-
Notifications
You must be signed in to change notification settings - Fork 5
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[FE] issue53: 디테일 페이지 구현 #88
Conversation
…oamoa into feat/53-detail-page
'@constants': resolve(__dirname, '../src/constants.ts'), | ||
'@api': resolve(__dirname, '../src/api'), | ||
'@context': resolve(__dirname, '../src/context'), | ||
'@detail-page': resolve(__dirname, '../src/pages/detail-page'), |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ㅇ여기에는 왜 main-page는 ㅇ없나요?!
그리고 pages가 있는데 그 내부 폴더들도 따로 만든 이유가 무엇인가요?
<Route path="/" element={<MainPage />} /> | ||
<Route path="/study/:studyId" element={<DetailPage />} /> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
예외 페이지 처리도 해주면 좋을 것 같네요!
path="*" element={<ErrorPage />}
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
나중에 로그인/로그아웃 했을 때만 갈 수 있는 페이지도 처리합시당
frontend/src/api/getStudyDetail.ts
Outdated
import axiosInstance from './axiosInstance'; | ||
|
||
const getStudyDetail = async (studyId: string): Promise<{ study: StudyDetail }> => { | ||
const response = await axiosInstance.get<{ study: StudyDetail }>(`/api/study/?study-id=${studyId}`); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
url 오류!!!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
수정 했슴다!
frontend/src/api/getStudyReviews.ts
Outdated
const getStudyReviews = async (studyId: string, size: number, loadAll: boolean): Promise<StudyReviewResponse> => { | ||
const url = loadAll ? `/api/studies/${studyId}/review` : `/api/studies/${studyId}/review?size=${size}`; | ||
const response = await axiosInstance.get<StudyReviewResponse>(url); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
size를 옵셔널로 해서 구현하는 게 더 낫지 않을까요?
- size가 들어오면 일부, size가 없으면 전체
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
좋네요 !
type DynamicImageContainerFn = (props: Pick<AvatarProps, 'size'>) => SerializedStyles; | ||
|
||
const dynamicImageContainer: DynamicImageContainerFn = props => css` |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
타입 나누니까 훨씬 보기 좋네요!
|
||
const StudyReviewList: React.FC<{ reviews: Array<StudyReview> }> = ({ reviews }) => { | ||
return ( | ||
<div css={css``}> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👀 ??
currentMemberCount, | ||
maxMemberCount, | ||
owner, | ||
onClickRegisterBtn, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
애는 왜 handleRegisterButtonClick이 아닌가요?
owner, | ||
onClickRegisterBtn, | ||
}) => { | ||
const handleClickRegisterBtn = () => onClickRegisterBtn(studyId); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
네이밍 지켜주세요!
<S.StudyWideFloatBox> | ||
<div className="left"> | ||
<div className="deadline"> | ||
<strong>{yyyymmddTommdd(deadline)}</strong> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
이거 함수 네이밍이.. 흠 formatDate~~ 이런건 어떨까요
return useQuery<{ study: StudyDetail }, unknown>([QK_FETCH_STUDY_DETAIL, studyId], () => getStudyDetail(studyId)); | ||
}; | ||
|
||
export default useFetchDetail; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
요건 재활용 목적이 아닌 로직 분리를 위한 커스텀 훅인가요?
daa8ab1
to
ef28bb3
Compare
요약
디테일 페이지를 구현했습니다.
세부사항
등을 디테일 페이지에서 보여줍니다.
close #53