Refactor: 피드페이지 리팩토링 #193

ParkSohyunee · 2024-03-09T12:23:18Z

개요

마이피드, 콜라보피드 페이지 관련 일부 리팩토링을 적용했습니다.

작업 사항

피드페이지 카테고리, 프로필, 리스트 스켈레톤 컴포넌트 제거 후 다시 구현
ㄴ 제가 확인했을 때는 스켈레톤 중 레이아웃 시프트는 발생하지 않아서 css는 수정하지 않았습니다.
피드페이지 리스트 전체조회 쿼리 호출 시, 데이터 캐시에 저장되도록 설정
ㄴ 마이/콜라보 페이지 이동 및 카테고리 선택시에 처음을 제외하고는 api 호출 x
리스트 생성, 수정, 삭제 시 리스트 전체조회 쿼리 무효화(invalidateQueries) 로직 추가
ㄴ 전체조회 쿼리 캐싱을 위해 리스트가 변경될때만 api를 요청할 수 있도록 추가하였습니다.
ㄴ 이 부분 서영님, 유진님, 나현님 확인 부탁드립니다. (@Eugene-A-01 , @seoyoung-min , @Nahyun-Kang )
프로필 팔로우/팔로우 취소 시 화면 깜빡거림 해결
프로필 팔로우 버튼 api 호출 도중에는 disabled 적용
기타 작업
- router hook 페이지 이동 코드를 Link 컴포넌트로 변경
- 모달 버튼 공통 컴포넌트 적용
- 프로필 팔로워 표시 문구 수정
- 기타 주석 정리, 컨벤션 정리

스크린샷

[ 처음에만 api를 호출하고 그 이후에는 캐싱된 쿼리를 보여줌(staleTime: 5분) ]

[ 팔로우 요청, 취소 시 UI상 변화만 있음 ]

리뷰어에게

리스트 생성, 수정, 상세페이지에 무효화 쿼리 로직을 추가한 부분 확인 부탁드립니다. 감사합니다. 📌🥰

vercel · 2024-03-09T12:23:22Z

@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.

seoyoung-min

소현님, 빠르게 개선해주셔서 감사드립니다!🥹👏👍
리스트 생성 부분에서 invalidQueries 부분 확인했습니다!
staleTime을 설정하고 변경 시 업데이트 해주는 식으로 구현하여 캐싱을 이용할 수 있는 거군요!🤩
감사합니다✨

seoyoung-min · 2024-03-10T04:11:21Z

src/app/user/[userId]/_components/Categories.tsx

    queryKey: [QUERY_KEYS.getCategories],
    queryFn: getCategories,
+    staleTime: Infinity, // 카테고리는 자주 변하는 데이터가 아니므로


👍👍👍👍👍

seoyoung-min · 2024-03-10T04:37:15Z

src/app/list/[listId]/_components/ListDetailOuter/OpenBottomSheetButton.tsx

@@ -48,7 +48,7 @@ export default function OpenBottomSheetButton({ listId, isCollaborator }: OpenBo
  const deleteCommentMutation = useMutation({
    mutationFn: () => deleteList(listId),
    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.getAllList, user.id] });
+      queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.getAllList, user.id + ''] });


소현님, 공백 추가하신 이유가 궁금합니다!! 뒤에 공백을 추가하지 않으면 인식되지 않는 걸까요??

소현님, 공백 추가하신 이유가 궁금합니다!! 뒤에 공백을 추가하지 않으면 인식되지 않는 걸까요??

서영님, 맞습니다🥰 getAllList의 쿼리키 중 userId가 string이기 때문에 동일한 키로 인식하기 위해 number타입의 user.id를 문자열로 변환하기 위한 방법을 넣은 것입니다! 문자열로 변환하기 위한 여러 방법이 있겠지만 저는 위처럼 작성하는 편입니다,
혹시 추가로 궁금하신 점 있으시면 말씀 부탁드립니다!!

@ParkSohyunee 소현님! 늦은 확인 죄송합니다..!! 🥹 쿼리 무효화 해주신 부분 잘 확인했습니다! 정말 감사합니다!! 🙇‍♀️

seoyoung-min · 2024-03-10T04:39:27Z

src/app/list/[listId]/edit/page.tsx

@@ -144,6 +145,9 @@ export default function EditPage() {
  } = useMutation({
    mutationFn: updateList,
    onSettled: () => {
+      queryClient.invalidateQueries({
+        queryKey: [QUERY_KEYS.getAllList, user.id + ''],


수정에서는 생성페이지에서 사용했던 키인
formatData().listData.collaboratorIds.length === 0 ? 'my' : 'collabo',
이 부분은 따로 필요 없을까요??

수정에서는 생성페이지에서 사용했던 키인 formatData().listData.collaboratorIds.length === 0 ? 'my' : 'collabo', 이 부분은 따로 필요 없을까요??

서영님 맞습니다~!, 쿼리키를 다 넣을 수도 있지만 수정페이지에서는 타입도 변할 가능성이 있기 때문에 (예를 들어, 마이리스트에서 수정할때 콜라보를 넣어서 콜라보를 넣는 경우 또는 그 반대의 경우 등) 정확한 쿼리키를 넣으면 그 반대의 경우도 넣어줘야 하므로 여러가지 조건을 고려해야 했습니다, 그래서 수정할때는 유저아이디에 해당하는 리스트를 다시 무효화하는 방법이 더 맞다고 판단하여 적용했습니다!✍️

ParkSohyunee

서영님! 시간내서 꼼꼼히 확인해 주시고, 리뷰 달아주셔서 정말 감사합니다.😍
여쭤보신 부분 reply 남겼는데 혹시 궁금하신 점 있으시면 말씀 부탁드립니다. 감사합니당👍🌈

ParkSohyunee · 2024-03-11T05:32:38Z

src/app/list/[listId]/_components/ListDetailOuter/OpenBottomSheetButton.tsx

@@ -48,7 +48,7 @@ export default function OpenBottomSheetButton({ listId, isCollaborator }: OpenBo
  const deleteCommentMutation = useMutation({
    mutationFn: () => deleteList(listId),
    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.getAllList, user.id] });
+      queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.getAllList, user.id + ''] });


소현님, 공백 추가하신 이유가 궁금합니다!! 뒤에 공백을 추가하지 않으면 인식되지 않는 걸까요??

서영님, 맞습니다🥰 getAllList의 쿼리키 중 userId가 string이기 때문에 동일한 키로 인식하기 위해 number타입의 user.id를 문자열로 변환하기 위한 방법을 넣은 것입니다! 문자열로 변환하기 위한 여러 방법이 있겠지만 저는 위처럼 작성하는 편입니다,
혹시 추가로 궁금하신 점 있으시면 말씀 부탁드립니다!!

ParkSohyunee · 2024-03-11T05:37:11Z

src/app/list/[listId]/edit/page.tsx

@@ -144,6 +145,9 @@ export default function EditPage() {
  } = useMutation({
    mutationFn: updateList,
    onSettled: () => {
+      queryClient.invalidateQueries({
+        queryKey: [QUERY_KEYS.getAllList, user.id + ''],


수정에서는 생성페이지에서 사용했던 키인 formatData().listData.collaboratorIds.length === 0 ? 'my' : 'collabo', 이 부분은 따로 필요 없을까요??

서영님 맞습니다~!, 쿼리키를 다 넣을 수도 있지만 수정페이지에서는 타입도 변할 가능성이 있기 때문에 (예를 들어, 마이리스트에서 수정할때 콜라보를 넣어서 콜라보를 넣는 경우 또는 그 반대의 경우 등) 정확한 쿼리키를 넣으면 그 반대의 경우도 넣어줘야 하므로 여러가지 조건을 고려해야 했습니다, 그래서 수정할때는 유저아이디에 해당하는 리스트를 다시 무효화하는 방법이 더 맞다고 판단하여 적용했습니다!✍️

Nahyun-Kang

@ParkSohyunee 소현님! 멘션해주신 부분을 뒤늦게 확인하고 PR 리뷰가 너무 늦었습니다..! 정말 죄송합니다 👀 쿼리 무효화 부분 확인했습니다..! 정말 감사합니다!! 리팩토링을 어떻게 바로 시작하셨는지.. 정말 본 받고 싶은 갓생 소현님👍

* Design: 피드페이지 - 카테고리 스켈레톤 UI 수정 * Style: 주석 정리 * Style: 카테고리 컴포넌트 'use client' 제거 * Design: 피드페이지 - 프로필 컴포넌트 스켈레톤 UI 수정 및 isLoading으로 속성 변경 * Refactor: 모달 버튼 공통컴포넌트로 적용, 페이지 이동 Link 컴포넌트로 변경 * Fix: 다국어 기능 팔로우 -> 팔로워로 수정 * Style: 변수이름 알맞게 수정 및 src 표기 수정 * Design: 피드페이지 - 그리드컨텐츠 리스트 스켈레톤 UI 수정 * Style: 불필요한 파일 삭제, 일부 컴포넌트 컨벤션 수정 * Feat: 팔로우 버튼 disabled 적용 * Refactor: 피드페이지 리스트전체조회 쿼리 staleTime 설정, unmount시 쿼리초기화 로직 제거 * Chore: 리액트쿼리 devtools 적용 * Feat: 리스트 생성, 수정, 삭제 시 리스트 전체조회 쿼리 무효화(invalidateQueries) 로직 추가 * Refactor: 카테고리 조회 staleTime 설정, 스켈레톤 적용 시 isLoading 속성으로 변경

ParkSohyunee added 14 commits March 7, 2024 19:44

Design: 피드페이지 - 카테고리 스켈레톤 UI 수정

5da2589

Style: 주석 정리

9b70300

Style: 카테고리 컴포넌트 'use client' 제거

60ac2da

Design: 피드페이지 - 프로필 컴포넌트 스켈레톤 UI 수정 및 isLoading으로 속성 변경

9549726

Refactor: 모달 버튼 공통컴포넌트로 적용, 페이지 이동 Link 컴포넌트로 변경

32ea591

Fix: 다국어 기능 팔로우 -> 팔로워로 수정

768ad38

Style: 변수이름 알맞게 수정 및 src 표기 수정

716ffd6

Design: 피드페이지 - 그리드컨텐츠 리스트 스켈레톤 UI 수정

363e136

Style: 불필요한 파일 삭제, 일부 컴포넌트 컨벤션 수정

4487cd3

Feat: 팔로우 버튼 disabled 적용

7f9fe09

Refactor: 피드페이지 리스트전체조회 쿼리 staleTime 설정, unmount시 쿼리초기화 로직 제거

13154a7

Chore: 리액트쿼리 devtools 적용

a0ae6d0

Feat: 리스트 생성, 수정, 삭제 시 리스트 전체조회 쿼리 무효화(invalidateQueries) 로직 추가

6e16b38

Refactor: 카테고리 조회 staleTime 설정, 스켈레톤 적용 시 isLoading 속성으로 변경

d7fac51

ParkSohyunee added the Refactor 리팩토링 label Mar 9, 2024

ParkSohyunee requested review from Eugene-A-01, kanglocal, Nahyun-Kang and seoyoung-min March 9, 2024 12:23

ParkSohyunee self-assigned this Mar 9, 2024

seoyoung-min approved these changes Mar 10, 2024

View reviewed changes

ParkSohyunee commented Mar 11, 2024

View reviewed changes

Nahyun-Kang approved these changes Mar 12, 2024

View reviewed changes

ParkSohyunee merged commit 129d743 into 8-Sprinters:dev Mar 12, 2024
1 of 2 checks passed

ParkSohyunee linked an issue Mar 12, 2024 that may be closed by this pull request

팔로우/팔로우 취소시 깜빡임 문제 #70

Closed

ParkSohyunee deleted the refactor/feed-page branch August 3, 2024 02:23

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Refactor: 피드페이지 리팩토링 #193

Refactor: 피드페이지 리팩토링 #193

ParkSohyunee commented Mar 9, 2024 •

edited

Loading

vercel bot commented Mar 9, 2024

seoyoung-min left a comment

seoyoung-min Mar 10, 2024

seoyoung-min Mar 10, 2024

ParkSohyunee Mar 11, 2024

Nahyun-Kang Mar 12, 2024

seoyoung-min Mar 10, 2024

ParkSohyunee Mar 11, 2024

ParkSohyunee left a comment

ParkSohyunee Mar 11, 2024

ParkSohyunee Mar 11, 2024

Nahyun-Kang left a comment

Refactor: 피드페이지 리팩토링 #193

Refactor: 피드페이지 리팩토링 #193

Conversation

ParkSohyunee commented Mar 9, 2024 • edited Loading

개요

작업 사항

관련 이슈

스크린샷

[ 처음에만 api를 호출하고 그 이후에는 캐싱된 쿼리를 보여줌(staleTime: 5분) ]

[ 팔로우 요청, 취소 시 UI상 변화만 있음 ]

리뷰어에게

vercel bot commented Mar 9, 2024

seoyoung-min left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ParkSohyunee left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Nahyun-Kang left a comment

Choose a reason for hiding this comment

ParkSohyunee commented Mar 9, 2024 •

edited

Loading