Conversation
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
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
수고 하셨습니다 ! 위클리 미션 하시느라 정말 수고 많으셨어요. |
|
캬아... 커밋 단위와 메시지가 정말 깔끔하네요 👍👍👍👍 |
kiJu2
approved these changes
May 15, 2024
| import CardList from "@/components/CardList"; | ||
| import SearchBar from "@/components/SearchBar"; | ||
| import styles from "@/styles/CardSection.module.css"; | ||
|
|
||
| interface CardListType { | ||
| id: number; | ||
| createdAt: string; | ||
| created_at: string; |
There was a problem hiding this comment.
오잉? 혹시 스네이크 케이스로 바꾸신 이유가 있으실까요?
Comment on lines
+16
to
+18
| const cardList = useQuery({ | ||
| queryKey: ["individualList", Number(id)], | ||
| }); |
There was a problem hiding this comment.
어랏 queryFn이 보이지 않는데 혹시 미완성일까요?
다음과 같이 queryFn이 필요할 듯 합니다:
Suggested change
| const cardList = useQuery({ | |
| queryKey: ["individualList", Number(id)], | |
| }); | |
| const cardList = useQuery({ | |
| queryKey: ["individualList", Number(id)], | |
| queryFn: () => getCards(), | |
| }); |
| image_source, | ||
| }: CardListType) => { | ||
| return ( | ||
| <CardList |
There was a problem hiding this comment.
cardList의 각 요소들이 CardList를 구성하여 다시 반환하고 있습니다.
이차원 배열이 아닌 이상 CardList의 네이밍이 잘못된게 아닐까 싶어요. Card로 짓는게 어떨까요?
Suggested change
| <CardList | |
| <Card |
Comment on lines
+16
to
+20
| const folderOwner = useQuery({ | ||
| queryKey: ["folderOwner"], | ||
| queryFn: () => getFolderUser(folderInfo.data[0].user_id), | ||
| enabled: !!folderInfo.data, | ||
| }); |
There was a problem hiding this comment.
굳굳. 키와 API 함수가 적절하게 들어갔군요.
리액트 쿼리를 쓰게 되면 queries를 커스텀 훅 폴더에 따로 배치해두는 디렉토리 스트럭쳐를 사용하기도 합니다. 쿼리 훅들을 중앙집중화 시키는거지요 !
Comment on lines
+32
to
+34
| const [folderName, setFolderName] = useState<string | undefined>( | ||
| "폴더를 선택해주세요" | ||
| ); |
There was a problem hiding this comment.
초기 값이 "폴더를 선택해주세요"로 되어있군요.
초기값을 undefined 혹은 null로 두시고 렌더링 할 때 조건부 렌더링을 통해서 folderName이 없을 경우 "폴더를 선택해주세요."를 출력하는건 어떨까요?
Suggested change
| const [folderName, setFolderName] = useState<string | undefined>( | |
| "폴더를 선택해주세요" | |
| ); | |
| const [folderName, setFolderName] = useState<string | null>( | |
| null | |
| ); |
| import styles from "@/styles/Edit.module.css"; | ||
| import closeIcon from "@/public/images/close.svg"; | ||
|
|
||
| interface EditProps { | ||
| folderName: string; | ||
| folderId: number | null; | ||
| folderName: string | undefined; |
There was a problem hiding this comment.
다음과 같이 옵셔널로 지정하실 수 있습니다 😊:
Suggested change
| folderName: string | undefined; | |
| folderName?: string; |
| const queryClient = useQueryClient(); | ||
|
|
||
| // input 값이 변경될 때마다 상태 업데이트 | ||
| const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => { |
Comment on lines
+61
to
+65
| <input | ||
| placeholder={folderName} | ||
| value={name} | ||
| onChange={handleInputChange} | ||
| ></input> |
There was a problem hiding this comment.
다음과 같이 children이 없을 경우 단축할 수 있습니다:
Suggested change
| <input | |
| placeholder={folderName} | |
| value={name} | |
| onChange={handleInputChange} | |
| ></input> | |
| <input | |
| placeholder={folderName} | |
| value={name} | |
| onChange={handleInputChange} | |
| /> |
| <Image | ||
| id={styles.kakaoIcon} | ||
| src={kakaoIcon} | ||
| onClick={() => moveToSharePage(folderId)} |
There was a problem hiding this comment.
단순 클릭 시 router로 페이지를 리다이렉트를 시키면 웹 접근성이 좋지 못할 수 있습니다!
<Link/>태그로 감싸는게 어떨지 제안드립니다 😊
<Link to={`/shared/${id}`}>
<Image
id={styles.kakaoIcon}
src={kakaoIcon}
onClick={() => moveToSharePage(folderId)}
alt="카카오 아이콘"
</Image>
</Link>
Comment on lines
+13
to
+14
| // 보통 SSR에서는 staleTime을 0 이상으로 해줌으로써 | ||
| // 클라이언트 사이드에서 바로 다시 데이터를 refetch 하는 것을 피한다. |
|
수고 정말 많으셨습니다 기범님 !! 리액트 쿼리와 쿼리 및 뮤테이션 커스텀 훅 코드 관리에 대해서 한 번 고민한다면 더욱 좋은 코드로 거듭날 것이라고 확신합니다 ! 😊 |
kiJu2
merged commit e6cc167
into
codeit-bootcamp-frontend:part3-박기범
1 of 3 checks passed
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
요구사항
기본
https://bootcamp-api.codeit.kr/docs/linkbrary/v1 문서를 참고해 https://bootcamp-api.codeit.kr/api/linkbrary/v1 api를 활용해 주세요. (주의: 응답 데이터 양식 일부 변경이 있어요!)
api 요청에 TanStack React Query를 활용해 주세요.
[] 로그인은 POST ‘/auth/sign-in’ 을 활용해 주세요.
[] 회원가입은 POST ‘/auth/sign-up’ 을 이메일 중복확인은 POST ‘/users/check-email’을 활용해 주세요.
유효한 access token이 있는 경우 GET ‘/users’로 현재 로그인한 유저 정보를 받아 상단 네비게이션 유저 프로필을 보여 주세요.
유효한 access token이 없는 경우 “로그인” 버튼을 보여 주세요.
폴더 페이지
폴더 페이지에서 현재 유저의 폴더 목록 데이터는 GET ‘/folders’를 활용해 주세요.
폴더 페이지에서 전체 링크 데이터를 받아올 때 GET ‘/links’, 특정 폴더의 링크를 받아올 때 GET ‘/folders/{folderId}/links’를 활용해 주세요.
폴더 이름 변경은 ‘PUT /folders/{folderId}’를 활용해 주세요.
폴더 삭제는 ‘DELETE /folders/{folderId}’를 활용해 주세요.
폴더 생성은 ‘POST /folders’를 활용해 주세요.
링크 삭제는 ‘DELETE /links/{linkId}’를 활용해 주세요.
링크 생성은 ‘POST /links’를 활용해 주세요.
공유 페이지
주요 변경사항
스크린샷
폴더페이지에서 공유페이지로 이동하는 기능이 없어서 임시로 모달창에서 클릭으로 구현하였습니다.
현재 폴더에 링크 추가하기 기능입니다.
폴더 이름변경 기능입니다.
폴더 추가하기 기능입니다.
폴더 삭제하기 기능입니다.
링크데이터 삭제하기 기능입니다.
멘토에게