Feat: 마이리스트, 콜라보리스트 페이지 api 연동 #21
Conversation
ParkSohyunee
requested review from
Eugene-A-01,
kanglocal,
Nahyun-Kang and
seoyoung-min
|
@ParkSohyunee is attempting to deploy a commit to the Eujin Ahn's projects Team on Vercel. A member of the Team first needs to authorize it. |
src/app/_api/list/createList.ts
Outdated
| const accessToken = ''; | ||
|
|
||
| export const createList = async (data: ListCreateType) => { | ||
| const response = await axiosInstance.post<ListIdType>('/lists', data); | ||
| const response = await axiosInstance.post<ListIdType>('/lists', data, { | ||
| headers: { | ||
| Authorization: `Bearer ${accessToken}`, | ||
| }, | ||
| }); |
There was a problem hiding this comment.
이 부분 테스트하기 위해 추가하였는데 원래대로 수정하겠습니다~!🥲
| @@ -19,7 +19,9 @@ export const options = style({ | |||
| }); | |||
|
|
|||
| export const link = style({ | |||
| // position: 'relative', | |||
|
|
||
| const { data: userData } = useQuery<UserType>({ | ||
| queryKey: [QUERY_KEYS.userOne], | ||
| queryFn: () => getUserOne(userId), |
There was a problem hiding this comment.
(궁금) 바로 getUserOne(userId)를 작성하지 않고, ()=>{}로 감싸신 이유가 궁금합니다!🤔🙇♀️
There was a problem hiding this comment.
서영님 덕분에 쿼리키에 파라미터를 함께 넣지 않았다는 사실을 발견하였습니다!! 감사합니다.👍
또, queryFn에는 호출할 함수를 넣어주기 위해 함수를 전달하였습니다~!
getUserOne(userId)을 넣게되면 함수를 바로 호출하는 것으로 알고있어서 아마 타입에러가 발생할 것 같습니다..!
ㄴ 확인해보니 타입에러가 발생하네요..!!
queryKey: [QUERY_KEYS.userOne, userId],
+. (참고) 서영님께서 담당하시는 프로필페이지에서 사용자 정보 불러올때 동일한 쿼리키 사용해 주시면 될 것 같습니다.
| /** 무한스크롤시 리액트 쿼리로 불러오는게 더 나을지에 대한 고민 때문에 주석처리 해 놓은 코드 */ | ||
| // const { data: listData, refetch } = useQuery<AllListType>({ | ||
| // queryKey: [QUERY_KEYS.getAllList], | ||
| // queryFn: () => getAllList(userId, type), | ||
| // }); |
There was a problem hiding this comment.
꼼꼼한 주석처리, 이해하기 너무 좋네요👍 저도 배워서 적용하겠습니다! 감사합니다🙇♀️
| const handleFetchLists = useCallback( | ||
| async (category?: string) => { | ||
| const data = await getAllList(userId, type, category); | ||
| setListGrid(data.feedLists); | ||
| }, | ||
| [userId, type] | ||
| ); | ||
|
|
||
| const handleFetchListsOnCategory = async (category: string) => { | ||
| handleFetchLists(category); | ||
| }; |
There was a problem hiding this comment.
이렇게 중복을 줄일 수 있군요 짱입니다👍👍👍
| @@ -45,6 +44,9 @@ export const profile = style({ | |||
| }); | |||
|
|
|||
| export const avatar = style({ | |||
There was a problem hiding this comment.
혹시 avatar대신 profileImage는 어떨까요??
사실 avatar라는 이름보고도 어떤 요소인지 이해가 바로 됐기에 수정을 안해도 좋지만
저희가 기본 이미지도 사람이 아닌 파도가 될수도 있을 것 같아, 제안드려봅니다 :)
There was a problem hiding this comment.
서영님 이부분 저번에 alt는 수정하였는데 스타일 네이밍을 수정하지 않았네요..🥲
확인해 주셔서 감사합니다. 다음번엔 꼼꼼히 확인하도록 하겠습니다!!
| <div className={styles.header}> | ||
| <ArrowLeftIcon alt="이전 페이지로 이동하기" className={styles.icon} /> |
There was a problem hiding this comment.
문득... 저희 피드에서는 하단탭이 존재하기 때문에 뒤로가기 버튼이 없어도 되겠다는 생각이 들었습니다! 소현님께서는 어떻게 생각하시나요??
| const onClickMoveToPage = (path: string) => () => { | ||
| router.push(path); | ||
| }; | ||
|
|
||
| return { onClickMoveToPage }; | ||
| } |
|
배포 에러가 create page에서 났습니다. 저도 나서 이 부분 수정했는데, 아직 머지가 안 돼 동일한 에러가 나는 것 같아요! 
|
- 프로필 헤더 이전페이지 돌아가기 버튼 제거 - style className 수정 - 유저 정보 조회 쿼리키 수정 - 주석 제거
개요
작업 사항
참고 사항 (optional)
스크린샷
리뷰어에게
[userNickname] 폴더를 [userId]폴더로 변경함에 따라 리스트 관련 페이지 및 컴포넌트는 변경하였지만, 리스트 상세페이지(나현님, 현지님 작업)는 변경하지 않고, [userNickname] 폴더에 그대로 두었습니다. 참고 부탁드립니다.
리스트 조회 페이지에서 클릭하면 이동하는 페이지에 대한 폴더를 생성해 두었습니다.
ㄴ (1)user/[userId]/followers (2)user/[userId]/followings (3)/account
페이지 이동 router.push 관련 코드를 hook으로 생성했습니다.
ㄴ (생성 배경) next/Link가 a태그 기반이라 css 이슈(파랑색 글씨) 등이 발생하여 text-decoration을 'none'으로 설정했으나, 일부 버튼에서는 router로 이동하기 위해 hook을 생성하게 되었습니다.
ㄴ (추가 활용) 관련 hook은 추후 (필요하다면) 방문페이지 path를 저장하는데에 활용될 수 있을 것 같습니다.