[FE] feat: 리뷰 그룹 목록 조회 API 연동 및 MSW 핸들러 수정 #1090

soosoo22 · 2025-02-12T09:27:42Z

resolves [FE] 회원이 생성한 리뷰 그룹 목록 조회 API를 연동한다. #1080

🚀 어떤 기능을 구현했나요 ?

리뷰 링크 페이지에서 회원이 생성한 리뷰 그룹 목록을 불러오는 API를 연동했습니다. 링크 생성 폼에서 새로운 링크를 생성하면 msw 환경에서도 이를 반영하도록 핸들러와 목 데이터를 수정했습니다.
API 요청했을 때, 성공적으로 리뷰 그룹 목록을 불러오는지에 대한 테스트를 작성했으며, 회원과 비회원에 따라 revieweeId 값이 달라지므로, 비회원일 경우 revieweeId가 null로 반환되는지 확인하는 테스트를 추가했습니다.
NavigationTab은 로그인 상태일 때만 표시되도록 처리했으며, Breadcrumb은 로그인 상태에서는 보이지 않도록 수정했습니다. ‼️ 아직 로그인 기능이 완전히 구현되지 않아, 로그인 상태를 가정하는 임시 변수를 만들어 진행했습니다. ‼️

	NavigationTab	Breadcrumb	BackButton
로그인 상태	O(홈, 연결 페이지 제외하고 모든 페이지에서 표시)	X	O (목록, 모아보기, 상세 페이지에서 표시)
비로그인 상태	X	O	X

ReviewLinkItem

목록 페이지와 작성한 리뷰 확인 페이지에서 사용하는 리뷰 아이템은 리뷰이가 포함되거나 키워드가 들어가는 등 차이점이 있어, 공통 컴포넌트로 재사용하기보다는 리뷰 링크 페이지에서 쓰이는 ReviewLinkItem 컴포넌트를 별도로 구현했습니다.
ResizeObserver를 사용해 ReviewLinkItem을 감싸는 컴포넌트에 스크롤이 생기면 padding-right: 2rem 추가했습니다.

🔥 어떻게 해결했나요 ?

리뷰 링크 생성 폼에서 새로운 리뷰가 생성되면, 리뷰 링크 페이지에서 최신 리뷰 그룹 목록을 불러올 수 있도록 props로 함수를 전달했습니다. 사용자가 리뷰 링크를 생성하면 refetch()를 실행해서 최신 데이터를 불러오도록 했으며 생성된 리뷰 링크가 오른쪽에 ReviewLinkItem으로 즉시 추가되도록 구현했습니다.

    const ReviewLinkDashboard = () => {
  const { data: reviewLinks, refetch } = useGetReviewLinks();

  const navigate = useNavigate();

  // 새로운 리뷰 링크가 생성된 후, 최신 데이터를 다시 불러오기 위해 refetch() 실행
  const handleNewReviewLink = () => {
    refetch();
  };

  const handleReivewLinkItemClick = (reviewRequestCode: string) => {
    navigate(`/${ROUTE.reviewList}/${reviewRequestCode}`);
  };

  return (
    <S.ReviewLinkDashboardContainer>
      <S.FormSection>
        <URLGeneratorForm isMember={true} handleNewReviewLink={handleNewReviewLink} />
      </S.FormSection>

2025-02-12.5.52.09.mov

리뷰가 없을 경우

생성한 리뷰 링크가 없을 경우, 단순히 돋보기 컴포넌트만 두게 되면 딱 봤을 때 좌우 여백 차이가 더 두드러져 보여서 border를 추가했습니다. props로 isBorder를 받게끔 수정했습니다.
목록, 모아보기 페이지도 받은 리뷰가 없을 시, 널~이 아닌 돋보기 컴포넌트로 수정했습니다.

📝 어떤 부분에 집중해서 리뷰해야 할까요?

📚 참고 자료, 할 말

…ined-review-group-api

- apis/group.ts -> types

…ew-group-api

…up-api' into fe/feat/1080-reivew-link-page-api

…, BackButton 표시 방식 다르게 처리

…w-link-page-api

BadaHertz52 · 2025-02-13T11:00:56Z

frontend/src/apis/endpoints.ts

  gettingSectionList: `${serverUrl}/${VERSION2}/sections`,
  gettingGroupedReviews: (sectionId: number) =>
    `${REVIEW_GROUP_API_URL}?${REVIEW_GROUP_API_PARAMS.queryString.sectionId}=${sectionId}`,
  postingHighlight: `${serverUrl}/${VERSION2}/highlight`,
+  gettingReviewLinks: REVIEW_GROUP_DATA_API_URL,


gettingReviewLinks가 로그인한 사용자가 자신이 만든 리뷰 그룹 목록을 조회하는게 아닌가요?
자신이 만든 리뷰 그룹 목록을 조회하는거라면 다른 url로 요청을 보내야할 것 같은데요

리뷰 그룹 생성, 리뷰 그룹 목록 조회 url이 같아서 저 상수를 사용했어요.
REVIEW_GROUP_DATA_API_URL === https://api.review-me.page/v2/groups

BadaHertz52

쑤쑤 고생했어요.
굵직한 기능 위주로 코드를 봤어요. 스타일링 부분은 쑤쑤가 워낙 잘 하니 믿고 맡길게요 ㅎㅎㅎ

로그인 사용자 리뷰 링크 api url이 맞는 지 확인 부탁해요

BadaHertz52 · 2025-02-13T11:04:29Z

frontend/src/pages/ReviewLinkPage/components/ReviewLinkDashboard/index.tsx

+    refetch();
+  };
+
+  const handleReivewLinkItemClick = (reviewRequestCode: string) => {


오타를 발견했어요 (Reivew -> Review)

BadaHertz52 · 2025-02-13T11:48:55Z

frontend/src/pages/ReviewLinkPage/components/ReviewLinkDashboard/index.tsx

+  const handleNewReviewLink = () => {
+    refetch();
+  };


리뷰 링크를 다시 불러오는 함수의 기능이 함수명에 담겼으면 좋겠어요. (예시: refetchReviewLinks)
리뷰 생성 폼에서 확인 시, 새로운 링크로 뭘한다는 거지?하고 의미 파악이 쉽지 않았어요.

제가 봐도 의미 파악이 너무 안 되네요.... 수정하겠습니다!🙋‍♀️

덧) refetch만 호출할 거라면 중괄호로 감싸지 않고 한 줄로 처리해도 좋을 것 같습니다~

BadaHertz52 · 2025-02-13T11:54:11Z

frontend/src/mocks/handlers/group.ts

+    };
+
+    // 새로 생성된 리뷰 링크를 목 데이터에 추가
+    REVIEW_LINKS.reviewGroups.push(newReviewLink);


대문자 스네이크는 코드 컨벤션에서 변하지 않는 상수를 의미하기 때문에, 배열을 변형하는 push 동작과 맞지 않아요.
리뷰 링크 생성에 따른, 리뷰 목록의 변경을 확인하고 싶어서 넣은 것 같아요.
그렇다면 ' REVIEW_LINKS'의 변수명을 바꿔야할 것 같아요.

아....!!!! 맞네요... 꼼꼼하십니다!
수정하겠습니다!

BadaHertz52 · 2025-02-13T11:54:43Z

frontend/src/mocks/handlers/group.ts

+
+      // 비회원일 경우, revieweeId를 null로 변경
+      if (reviewRequestCode === nonMemberReviewRequestCode) {
+        REVIEW_GROUP_DATA.revieweeId = null;


이것도 앞에서 언급한 이유로, 변수명을 바꿔야겠어요.

BadaHertz52 · 2025-02-13T11:59:57Z

frontend/src/pages/ReviewLinkPage/components/ReviewLinkItem/index.tsx

+  const url = `${window.origin}/${ROUTE.reviewZone}/${reviewRequestCode}`;
+
+  return (
+    <S.Layout onClick={handleClick}>


Layout 태그가 div라서, 스크린 리더기를 사용하는 사용자 입장에서 클릭이 가능한지, 클릭하면 어떤 동작이 일어나는 지에 대한 정보가 없어요. 그리고 키보드 조작만으로는, 리뷰 카드 자체 클릭이 안돼요.

상위 태그가 ul이라서 div -> li로 변경해야 할 것 같아요. 그리고 UndraggableWrapper로 감싸보면 어떨까요?

BadaHertz52 · 2025-02-13T12:08:07Z

frontend/src/pages/ReviewLinkPage/components/layouts/ReviewLinkLayout/index.tsx

+    observer.observe(element);
+
+    return () => observer.disconnect();
+  }, []);


cardListRef.current 을 useEffect의 deps에 넣지 않아도 괜찮은가요?

ImxYJL

여러 가지 코멘트를 남겼지만ㅋㅋㅋ 당장 반영해야 할 것은 별로 없고 금방 할 수 있는 것들이라 가볍게 봐주시고, 확인 후에 재요청 주세요!
로그인 여부 처리가 까다로웠을 것 같은데 수고 많았어요~~~👍

ImxYJL · 2025-02-14T09:39:03Z

frontend/src/constants/review.ts

 export const REVIEW_EMPTY = {
-  noReviewInTotal: '아직 받은 리뷰가 없어요!',
-  noReviewInQuestion: '이 질문은 아직 받은 답변이 없어요!',
+  noReviewInTotal: '아직 받은 리뷰가 없어요...',
+  noReviewLink: '생성한 리뷰 링크가 없어요...',
+  noReviewInQuestion: '이 질문은 아직 받은 답변이 없어요...',
 };


(원래 있었던 상수긴 하지만) 이 값들을 상수로 관리할 필요가 있을까요?
각 페이지나 컴포넌트에 특화된 값들이고 재사용성도 딱히 고려할 필요 없을 것 같아서 공통 상수로 뺄 필요가 없다는 생각입니다. 또 당장 EmptyContent 컴포넌트도 안내 문구를 string으로만 받지 않고 children으로 받으니까요.

당장 수정하자는 건 아닙니다ㅎㅎ

ImxYJL · 2025-02-14T09:44:05Z

frontend/src/hooks/review/useGetReviewLinks/index.ts

+import { REVIEW_QUERY_KEY } from '@/constants';
+
+const useGetReviewLinks = () => {
+  const result = useSuspenseQuery({


오 리뷰 링크를 받아올 때 infiniteQuery를 쓸 줄 알았는데 일반 query를 쓰네요?!
서버에서 isLastPage나 lastReviewGroupId를 내려주길래 inf query를 쓸 줄 알았어요. 애초에 요청에 id를 보내지 않으니 무한 구현은 안 될 것 같긴 한데 왜 저 값들을 내려주는지는 궁금하네요...

ImxYJL · 2025-02-14T09:48:51Z

frontend/src/hooks/review/index.ts

 export { default as useGetReviewList } from './useGetReviewList';
+export { default as useGetReviewLinks } from './useGetReviewLinks';


맥락을 까먹어서 그러는데, ReviewList 가져오는 훅(외에 한 페이지에서만 쓰는 쿼리 훅들)을 공통 훅으로 뺐던 이유가 뭐였는지 기억하시나요? depth 이슈였나...

초반에 만든 훅이라 공통 훅 자리에 있는것 같아요

ImxYJL · 2025-02-14T09:51:16Z

frontend/src/hooks/review/useGetReviewLinks/test.ts

+import useGetReviewLinks from '.';
+
+describe('회원이 생성한 리뷰 그룹 목록 조회 테스트', () => {
+  it('회원이 생성한 리뷰 그룹 목록을 성공적으로 불러온다.', async () => {


테스트까지 만들어주셨네요 👍
추후에 회원/비회원 쿠키를 나누고 그에 따라 테스트 유틸 함수도 나눠보면 좋겠네요!

ImxYJL · 2025-02-14T09:52:59Z

frontend/src/components/layouts/PageLayout/index.tsx

+  // TODO: NavigationTab은 사용자가 홈 페이지와 연결 페이지가 아닌 다른 페이지에서 로그인 상태일 때만 보여준다.
+  // 임시로 true 설정 (로그인 기능 추가하면서 여기도 수정해야 한다.)


주석 좋아요~~

ImxYJL · 2025-02-14T10:10:41Z

frontend/src/pages/ReviewLinkPage/components/ReviewLinkItem/index.tsx

+        <S.ReviewLink>{url}</S.ReviewLink>
+      </S.ContentContainer>
+      <S.Divider />
+      <RevieweeName revieweeTitle="🧑‍💻 리뷰이" revieweeName={revieweeName} />


이모지는 임시용인가요?ㅎㅎ 리뷰어/리뷰이 이모지를 신중하게 골라서 모든 환경에서 동일해 보이도록 이미지 파일을 사용하자고 했던 것 같아서요. (제 PR에 png 파일이 있으니 두 페이지 모두 머지되면 수정해봅시다!)

ImxYJL · 2025-02-14T11:35:41Z

frontend/src/pages/ReviewLinkPage/components/layouts/ReviewLinkLayout/index.tsx

+  useEffect(() => {
+    const element = cardListRef.current;
+    if (!element) return;
+
+    const observer = new ResizeObserver(() => {
+      requestAnimationFrame(() => {
+        const newPadding = element.scrollHeight > element.clientHeight ? '1rem' : '0';
+        if (element.style.paddingRight !== newPadding) {
+          element.style.paddingRight = newPadding;
+        }
+      });
+    });
+
+    observer.observe(element);
+
+    return () => observer.disconnect();
+  }, []);


CSS의 scrollbar-gutter: stable 속성으로 대신할 수 있지 않을까요?

그리고 여기서는 requestAnimationFrame의 추가가 오히려 성능에 영향을 줄 수 있다고 해요.
ResizeObserver가 레이아웃 변경 직후 실행돼서 항상 최신 element 정보를 갖고올 수 있는데, 여기다requestAnimationFrame을 추가하면 이미 최신 값을 갖고 있음에도 다음 repaint가 일어날 때까지 1프레임을 더 기다린다고 하네요!
만약 이 로직을 사용한다면 ResizeObserver만으로 충분할 것 같습니다!

ImxYJL · 2025-02-14T11:51:23Z

frontend/src/pages/DetailedReviewPage/components/DetailedReviewPageContents/styles.ts

@@ -34,6 +29,6 @@ export const DetailedReviewContainer = styled.div`

 export const ReviewContentContainer = styled.div`
  ${media.xSmall} {
-    padding: 0 2rem;
+    padding: 0 1rem;
  }
 `;


DetailedReview 스타일을 수정한 이유가 있을까요?

작성한 리뷰 페이지에서 기존 DetailedReview를 재활용하면서 공통 컴포넌트로 뺐고, 그래서 제 PR에서는 DetailedReviewPage에서도 더 이상 기존 DetailedReviewPageContents 컴포넌트를 사용하지 않거든요. (다만 파일 삭제는 안 했습니다... ㅎㅎ 그래서 충돌은 안 날지도?) 그리고 반응형을 공통 DetailedReview 스타일을 보면서 작업해서 나중에 서로 생각하지 못한 결과물이 나올 수도 있을 것 같아요.

ImxYJL · 2025-02-14T12:09:17Z

frontend/src/components/common/NavigationTab/index.tsx


 import NavItem from './NavItem';
 import * as S from './styles';
+export interface Tab {
+  label: '리뷰 링크 관리' | '작성한 리뷰 확인';


공통 컴포넌트라면 label에 올 수 있는 타입을 열어둬야 하지 않을까요?!

ImxYJL · 2025-02-14T12:11:42Z

frontend/src/components/layouts/PageLayout/index.tsx

+  const isShowBreadCrumb = !isUserLoggedIn && isNeedBreadCrumb && breadcrumbPathList.length > 1;
+  const isShowNavigationTab = isUserLoggedIn && pathname !== '/' && !pathname.includes(ROUTE.reviewZone);


렌더링 로직 빡세네요...ㅋㅋㅋㅋㅋ 개발자살려~!

BadaHertz52 and others added 30 commits January 22, 2025 16:05

feat : 회원용 리뷰 리뷰 생성 폼 API 연결

de753af

feat : ReviewLinkDashboard 리뷰 링크 생성 폼 - 회원용으로 변경

e1bb55c

refactor : gettingPath 함수로 회원 전용 여부를 path에 표시

374c27f

refactor : 회원 전용 페이지의 Amplitude용 페이지 이름 변경

fdadd37

Merge branch 'fe/refactor/1069-logged-in-path' into fe/feat/1068-logg…

27aec28

…ined-review-group-api

refactor : route path 만드는 함수명 변경

7c780b7

Merge branch 'fe/refactor/1069-logged-in-path' into fe/feat/1068-logg…

237139b

…ined-review-group-api

fix : groupAccessCode에 따른 reviewRequestCode 요청 body 변경 오류 수정

a4ade66

feat : 목킹 핸들러에서 request.body를 분석하는 유틸 함수 구현

720b134

feat : reviewRequestCode 요청 목킹 핸들러에서 회원용 reviewRequsetCode 반환

99878dc

test : 회원용 reviewRequestCode 테스트 추가

0d4eec6

refactor: DataForReviewRequestCode 위치 변경

b9978ac

- apis/group.ts -> types

refactor : 반복되는 usePostDataForReviewRequestCode 테스트 코드 추상화

ebf9de8

refactoor : 목서버 유효한 리뷰 요청 코드 변수 추상화

11178c5

Merge remote-tracking branch 'origin' into fe/feat/1068-loggined-revi…

3475641

…ew-group-api

feat: 리뷰 링크 엔드포인트 추가

d43e672

feat: 리뷰 링크 목록 api 호출 및 인터페이스 정의 추가

db631aa

feat: 리뷰 링크 목록 목 데이터 추가

aacd795

feat: ReviewLinkItem 컴포넌트 구현

fe194ab

feat: useSuspenseQuery로 리뷰 링크 데이터 불러오는 훅 구현

3d87270

feat: 리뷰 링크 목록 핸들러 추가

149cccf

feat: 리뷰 링크 생성 후, 최신 데이터를 불러오기 위한 refetch() 실행 함수 추가

ee7061f

feat: ReviewLinkItem 클릭 시, 리뷰 목록 페이지로 이동

eb406d7

Merge remote-tracking branch 'origin/fe/feat/1068-loggined-review-gro…

6146267

…up-api' into fe/feat/1080-reivew-link-page-api

feat: 스크롤 발생 시, paddingRight 변경

21c9d10

refactor: 회원, 비회원에 따라 인터페이스, 핸들러, 목 데이터 수정

37533ad

feat: 회원이 만든 URL일 경우 NavigationTab 및 BackButton 추가

7857738

test: 리뷰 그룹 목록 조회 및 비회원일 경우 revieweeId가 null로 반환되는지 테스트 추가

32bee72

refactor: 리뷰 링크 핸들러, 목 데이터 수정

8e5b331

design: 반응형 개선 및 margin, padding 조정

01f0f96

soosoo22 added 6 commits February 12, 2025 13:54

refactor: 탭이 활성화되어야 하는 페이지 목록을 포함한 탭 정보 배열을 props로 전달하도록 변경

693a882

feat: 임시로 isUserLoggedIn 변수 추가해서 로그인 상태에 따라 NavigationTab, Breadcrumb…

76fcf0d

…, BackButton 표시 방식 다르게 처리

design: 리뷰 링크가 없을 경우 border 추가 및 헤더, 푸터 border 수정

3c73013

Merge remote-tracking branch 'origin/develop' into fe/feat/1080-reive…

175c65e

…w-link-page-api

feat: theme에 NavigationTab 높이 추가

40d0482

refactor: 받은 리뷰가 없을 경우, EmptyContent 적용

c31a51c

soosoo22 added 🍀 FE 🚀 기능 labels Feb 12, 2025

soosoo22 added this to the 7차 스프린트 milestone Feb 12, 2025

soosoo22 self-assigned this Feb 12, 2025

soosoo22 requested review from chysis, BadaHertz52 and ImxYJL as code owners February 12, 2025 09:27

soosoo22 linked an issue Feb 12, 2025 that may be closed by this pull request

[FE] 회원이 생성한 리뷰 그룹 목록 조회 API를 연동한다. #1080

Open

3 tasks

soosoo22 changed the title ~~feat: 리뷰 링크 페이지 API 연동~~ feat: 리뷰 그룹 목록 조회 API 연동 및 MSW 핸들러 수정 Feb 12, 2025

BadaHertz52 reviewed Feb 13, 2025

View reviewed changes

BadaHertz52 requested changes Feb 13, 2025

View reviewed changes

chysis changed the title ~~feat: 리뷰 그룹 목록 조회 API 연동 및 MSW 핸들러 수정~~ [FE] feat: 리뷰 그룹 목록 조회 API 연동 및 MSW 핸들러 수정 Feb 14, 2025

ImxYJL requested changes Feb 14, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[FE] feat: 리뷰 그룹 목록 조회 API 연동 및 MSW 핸들러 수정 #1090

[FE] feat: 리뷰 그룹 목록 조회 API 연동 및 MSW 핸들러 수정 #1090

soosoo22 commented Feb 12, 2025

BadaHertz52 Feb 13, 2025

soosoo22 Feb 13, 2025

BadaHertz52 left a comment

BadaHertz52 Feb 13, 2025

BadaHertz52 Feb 13, 2025

soosoo22 Feb 13, 2025

ImxYJL Feb 14, 2025

BadaHertz52 Feb 13, 2025

soosoo22 Feb 13, 2025 •

edited

Loading

BadaHertz52 Feb 13, 2025

BadaHertz52 Feb 13, 2025

ImxYJL Feb 14, 2025 •

edited

Loading

BadaHertz52 Feb 13, 2025

ImxYJL left a comment

ImxYJL Feb 14, 2025

ImxYJL Feb 14, 2025

ImxYJL Feb 14, 2025

BadaHertz52 Feb 14, 2025

ImxYJL Feb 14, 2025

ImxYJL Feb 14, 2025

ImxYJL Feb 14, 2025

ImxYJL Feb 14, 2025

ImxYJL Feb 14, 2025

ImxYJL Feb 14, 2025

ImxYJL Feb 14, 2025

		export { default as useGetReviewList } from './useGetReviewList';
		export { default as useGetReviewLinks } from './useGetReviewLinks';

		// TODO: NavigationTab은 사용자가 홈 페이지와 연결 페이지가 아닌 다른 페이지에서 로그인 상태일 때만 보여준다.
		// 임시로 true 설정 (로그인 기능 추가하면서 여기도 수정해야 한다.)

		const isShowBreadCrumb = !isUserLoggedIn && isNeedBreadCrumb && breadcrumbPathList.length > 1;
		const isShowNavigationTab = isUserLoggedIn && pathname !== '/' && !pathname.includes(ROUTE.reviewZone);

[FE] feat: 리뷰 그룹 목록 조회 API 연동 및 MSW 핸들러 수정 #1090

Are you sure you want to change the base?

[FE] feat: 리뷰 그룹 목록 조회 API 연동 및 MSW 핸들러 수정 #1090

Conversation

soosoo22 commented Feb 12, 2025

🚀 어떤 기능을 구현했나요 ?

ReviewLinkItem

🔥 어떻게 해결했나요 ?

리뷰가 없을 경우

📝 어떤 부분에 집중해서 리뷰해야 할까요?

📚 참고 자료, 할 말

Choose a reason for hiding this comment

Choose a reason for hiding this comment

BadaHertz52 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

soosoo22 Feb 13, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ImxYJL Feb 14, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ImxYJL 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

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

soosoo22 Feb 13, 2025 •

edited

Loading

ImxYJL Feb 14, 2025 •

edited

Loading