-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #54 from kkkkkSE/feat/open-profile
[feat] 오픈 프로필(단일) 페이지 구현 및 테스트 코드 작성
- Loading branch information
Showing
13 changed files
with
271 additions
and
8 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,39 @@ | ||
import { fireEvent, screen } from '@testing-library/react'; | ||
|
||
import fixtures from '../../../fixtures'; | ||
|
||
import { render } from '../../test-helper'; | ||
|
||
import OpenProfile from './OpenProfile'; | ||
|
||
const context = describe; | ||
|
||
const handleClickInquery = jest.fn(); | ||
|
||
describe('<OpenProfile />', () => { | ||
const openProfile = fixtures.companies[0]; | ||
|
||
it('renders open profile', () => { | ||
render(<OpenProfile | ||
openProfile={openProfile} | ||
onClickInquiry={handleClickInquery} | ||
/>); | ||
|
||
screen.getByText(/기업 설명1/); | ||
}); | ||
|
||
context('when click inquery button', () => { | ||
it('execute handleClickInquiry function', () => { | ||
render(<OpenProfile | ||
openProfile={openProfile} | ||
onClickInquiry={handleClickInquery} | ||
/>); | ||
|
||
const button = screen.getByText(/문의하기/); | ||
|
||
fireEvent.click(button); | ||
|
||
expect(handleClickInquery).toHaveBeenCalled(); | ||
}); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,98 @@ | ||
import styled from 'styled-components'; | ||
|
||
import { Profile } from '../../types'; | ||
|
||
import ProfileBody from './ProfileBody'; | ||
|
||
import inquiryIcon from '../../assets/image/icon/inquiry-icon.png'; | ||
|
||
interface OpenProfileProps { | ||
openProfile: Profile; | ||
onClickInquiry: () => void; | ||
} | ||
|
||
export default function OpenProfile({ | ||
openProfile, onClickInquiry, | ||
}: OpenProfileProps) { | ||
return ( | ||
<Container> | ||
<ProfileBody profile={openProfile} /> | ||
|
||
<ul> | ||
<li> | ||
<button | ||
type="button" | ||
onClick={onClickInquiry} | ||
> | ||
<div><img src={inquiryIcon} alt="" /></div> | ||
<span>문의하기</span> | ||
</button> | ||
</li> | ||
</ul> | ||
</Container> | ||
); | ||
} | ||
|
||
const Container = styled.div` | ||
${(props) => props.theme.alignCenter.vertical} | ||
justify-content: start; | ||
overflow-y: scroll; | ||
ul { | ||
display: flex; | ||
padding-top: 6rem; | ||
li { | ||
margin-inline: 2.4rem; | ||
button { | ||
${(props) => props.theme.alignCenter.vertical} | ||
div { | ||
${(props) => props.theme.alignCenter.horizontal} | ||
width: 6rem; | ||
height: 6rem; | ||
background-color: ${(props) => props.theme.colors.gray2.default}; | ||
border-radius: 50%; | ||
margin-bottom: 1.2rem; | ||
img { | ||
width: 3.2rem; | ||
height: 3.2rem; | ||
} | ||
} | ||
span { | ||
${(props) => props.theme.texts.regular.medium} | ||
} | ||
} | ||
} | ||
} | ||
@media screen and (${(props) => props.theme.breakPoint.mobile}) { | ||
ul { | ||
padding-top: 3.8rem; | ||
li { | ||
margin-inline: 2rem; | ||
button { | ||
div { | ||
width: 4.8rem; | ||
height: 4.8rem; | ||
margin-bottom: .8rem; | ||
img { | ||
width: 2.4rem; | ||
height: 2.4rem; | ||
} | ||
} | ||
span { | ||
${(props) => props.theme.texts.regular.small} | ||
} | ||
} | ||
} | ||
} | ||
} | ||
`; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
import { useQuery } from '@tanstack/react-query'; | ||
|
||
import { QUERY_KEY } from '../constants/reactQuery'; | ||
|
||
import { apiService } from '../services/ApiService'; | ||
|
||
import { nullProfile } from '../types'; | ||
|
||
const useOpenProfileQuery = (id: number) => { | ||
const fetcher = () => apiService.fetchOpenProfile({ id }); | ||
|
||
const { isLoading, data, error } = useQuery(QUERY_KEY.OPEN_PROFILE(id), fetcher); | ||
|
||
return { | ||
isLoading, | ||
openProfile: data ?? nullProfile, | ||
error, | ||
}; | ||
}; | ||
|
||
export default useOpenProfileQuery; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,52 @@ | ||
import { useParams } from 'react-router-dom'; | ||
|
||
import useOpenProfileQuery from '../hooks/useOpenProfileQuery'; | ||
|
||
import ContentLayout from '../components/layout/ContentLayout'; | ||
import OpenProfile from '../components/profile/OpenProfile'; | ||
|
||
export default function OpenProfilePage() { | ||
const params = useParams(); | ||
const id = Number(params.id); | ||
|
||
// TODO : id 없을 때 not found 페이지 이동 | ||
if (!id) { | ||
return ( | ||
<div> | ||
<p>Not Found</p> | ||
</div> | ||
); | ||
} | ||
|
||
const { isLoading, openProfile, error } = useOpenProfileQuery(id); | ||
|
||
// TODO : Error Page로 이동하기 | ||
if (error) { | ||
return ( | ||
<div> | ||
<p>데이터를 불러올 수 없습니다.</p> | ||
</div> | ||
); | ||
} | ||
|
||
const handleClickInquiry = () => { | ||
// ... | ||
}; | ||
|
||
return ( | ||
<ContentLayout | ||
pageHeader={openProfile.name} | ||
testId="open-profile" | ||
enableBack | ||
> | ||
{isLoading ? ( | ||
<p>Loading...</p> | ||
) : ( | ||
<OpenProfile | ||
openProfile={openProfile} | ||
onClickInquiry={handleClickInquiry} | ||
/> | ||
)} | ||
</ContentLayout> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters