Feat: 마이리스트, 콜라보리스트 페이지 팔로우 기능 구현 #26
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. |
| items: ListItemsType[]; | ||
| collaborators: CollaboratorType[]; | ||
| items: ItemType[]; | ||
| collaborators: UserProfileType[]; | ||
| ownerNickname: string; | ||
| } |
There was a problem hiding this comment.
@Nahyun-Kang
나현님, dev branch에서 listType 수정에 따른 CI/CD 배포 오류가 발생하여 해당 PR에서 Footer 컴포넌트의 타입을 위와 같이 수정하였습니다. 참고 부탁드립니다!!
+. 나현님, 이부분 외에도 관련 타입 에러가 발생하여 더이상 수정하지 않고 merge 진행하려고 합니다, 참고 부탁드립니다!!
| onSuccess: () => { | ||
| queryClient.invalidateQueries({ | ||
| queryKey: [QUERY_KEYS.userOne, userId], | ||
| }); | ||
| }, |
There was a problem hiding this comment.
이렇게 다시 불러올 수 있는거군요...!
와 저 프로필 설정에서 '저장' 버튼 누른다음에 다시 fetch 해올때 딱 이 방법이 필요했어요! 지금은 수정사항 발생시 true로 바뀌었던 'isDirty'를 '저장' 버튼을 누르면 false로 바꾸는 식으로 구현했거든요! 당장 코드 바꾸러 갑니다 🙇♀️
| <span className={styles.count}>{data?.followingCount.toLocaleString('ko-KR')}</span> | ||
| <span>팔로잉</span> | ||
| </div> | ||
| <div className={styles.text} onClick={onClickMoveToPage(`/user/${userId}/followers`)}> | ||
| <span className={styles.count}>{data?.followerCount}</span> | ||
| <span className={styles.count}>{data?.followerCount.toLocaleString('ko-KR')}</span> |
There was a problem hiding this comment.
소현님, 저희가 숫자의 경우 축약형을 사용하기로 했는데, 공용정책 중 '숫자'를 IA에만 적어두고 피그마로 안 옮겼네요! 소현님 덕분에 발견하여, 급하게 추가했습니다!
팔로워도 축약형으로 나타내고, hover시 정확한 숫자 나오게 하거나 '팔로잉/팔로워' 목록에서 정확한 숫자 나오게 하는 식은 어떨까요??
+) toLocaleString('ko-KR') 얻어갑니다 👍🙇♀️
There was a problem hiding this comment.
그렇네요 서영님!! 정책대로 축약형으로 나타내는 것으로 수정하겠습니다! (+.공통 유틸로 분리해 놓겠습니다.)
+. 생각해보니 천이상 ~ 만, 십만, 백만까지가 축약이 많이된 것 같아서 다음과 같이 변경해도 괜찮을 것 같은데.. 서영님 생각은 어떠신가요?
- 백 이하 : 그대로 ~ 999
- 1만 이하: 그대로 1,000 ~ 9,999
- 만 이상: 축양형 10k, 10.1k 10.8k 15k ~ (버림x)
- 백만 이상: 축약형 1M, 1.1M ~ (버림x)
There was a problem hiding this comment.
[KO]
천 이하: 0~9,999
1만 이상: 1만, 11.1만, 510만, ~ (소숫점 한 자리까지 노출 - 천 단위의 버림)
[ENG]
천 이하: 0~9,999
1만 이상: 10.5k, 111k, / 5.1M, ~ (소숫점 한 자리까지 노출)
K: 1,000
M:1,000,000
| @@ -43,7 +43,7 @@ export default function FollowButton({ isFollowed, userId }: FollowButtonProps) | |||
| }, | |||
| onError: (error: AxiosError) => { | |||
| if (error.response?.status === 401) { | |||
| toasting({ type: 'warning', txt: '로그인이 필요한 기능입니다.' }); | |||
| toasting({ type: 'warning', txt: '로그인이 필요해요.' }); | |||
There was a problem hiding this comment.
토스트 메시지 상수파일(src/lib/constants/toastMessage.ts) 이 있어서, 그 파일에 넣고 꺼내쓰면 좋을 것 같아요~!
| const handleFollowUser = (isFollowed: boolean) => () => { | ||
| if (userMeData && userMeData?.followingCount >= MAX_FOLLOWING) { | ||
| toasting({ type: 'warning', txt: '최대 1,000명까지 팔로우할 수 있어요.' }); | ||
| return; | ||
| } | ||
|
|
||
| const handleFollowUser = () => { | ||
| // 1. follow 하는 api 요청 + update | ||
| if (isFollowed) { | ||
| deleteFollowingUser.mutate(); | ||
| } else { | ||
| followUser.mutate(); | ||
| } |
There was a problem hiding this comment.
혹시 팔로잉 1000명이지만 '팔로우 취소' 버튼은 클릭할 수 있게 하려면,
코드 순서가 아래와 같이 바뀌는게 맞을까요??
if (isFollowed) {
deleteFollowingUser.mutate();
} else {
if (userMeData && userMeData?.followingCount >= MAX_FOLLOWING) {
toasting({ type: 'warning', txt: '최대 1,000명까지 팔로우할 수 있어요.' });
return;
}
followUser.mutate();
}
There was a problem hiding this comment.
서영님! 그렇네요!! 반대의 경우는 생각하지 못했네요 ㅋㅋㅋ🤣 상세하게 확인해 주셔서 감사합니다.
작성해주신 코드 바탕으로 수정하겠습니다!! 😊
| if (lang === 'ko') { | ||
| const formattedNumKo = Math.trunc((num / unit) * 10) / 10; | ||
| return formattedNumKo + '만'; | ||
| } else { | ||
| const formattedNumEn = Math.trunc((num / unit) * 10); | ||
| if (formattedNumEn < 1000) { | ||
| return formattedNumEn + 'K'; | ||
| } else { | ||
| const formattedMillion = Math.trunc((formattedNumEn / 1000) * 10) / 10; | ||
| return formattedMillion + 'M'; | ||
| } | ||
| } |
개요
작업 사항
참고 사항 (optional)
ㄴ 현재 팔로우 요청이 정상적으로 들어간 이후에도 사용자에게 반영되지 않은 상태라서, 백엔드의 수정이 필요한 부분입니다. (완료)
ㄴ 내일까지 수정 요청 드릴 예정이며, 이후 스크린샷 첨부하도록 하겠습니다.
스크린샷
리뷰어에게