[FE] feat: 리뷰 링크 관리 페이지와 라우터 설정 추가 #1032

soosoo22 · 2024-12-27T05:23:56Z

resolves [FE] 리뷰 링크 관리 페이지와 라우터 설정을 추가한다. #1028

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

리뷰 링크 관리 페이지(ReviewLinkManagementPage)를 만들고, 라우터 설정을 추가했습니다.

리뷰 링크 관리 페이지 레이아웃 구성
- 왼쪽 영역: 리뷰 링크 생성 폼(URLGeneratorForm)
- 오른쪽 영역: 생성된 리뷰 카드를 표시하는 UI(ReviewCard)
- 두 영역 사이에 구분선 추가
반응형 디자인
- 화면 너비가 768px 이하일 경우, 두 영역이 세로로 나열되도록 구현

라우터 설정

로그인된 사용자만 접근 가능한 페이지이므로 reviewRequestCode는 필요하지 않을 것 같아서 제거했습니다.

export const ROUTE = {
  // ...
  reviewLinkManagement: 'user/review-link-management',
};

const router = createBrowserRouter([
 // ....
      { path: `${ROUTE.reviewLinkManagement}`, element: <ReviewLinkManagementPage /> },
]);

🔥 어떻게 해결했나요 ?

기존에는 ReviewLinkManagementLayout을 생성하여, leftContent와 rightContent를 props로 받도록 구성했습니다. 하지만, 코드 가독성과 추후 suspense 등 관련 코드가 추가될 것을 고려하여, ReviewLinkManagementPage 페이지 컴포넌트를 만들어 레이아웃을 삽입하는 방식으로 구현했습니다.

추가 변경 사항

헤더에 리뷰미 로고 글자 간격을 조정했습니다.
푸터에 border-top을 주었습니다.

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

일단, 임시로 user/review-link-management 경로로 설정했어요. 더 나은 경로 명칭이 있으면 코멘트로 남겨주세요!
리뷰 생성 폼(URLGeneratorForm)을 pages/ReviewLinkManagementPage/ 안으로 이동하는 것이 좋을 것 같습니다! (바다의 리뷰 링크 생성 폼 PR이 머지된 이후에)

📚 참고 자료, 할 말

🎄🎄🎄🎄

ImxYJL · 2024-12-28T11:07:37Z

코드 확인했어요! 파일 위치는 나중에 페이지 들어오면 페이지 하위의 레이아웃 폴더로 돌리는 게 좋다고 생각합니다.
궁금한 점 하나만 코멘트 남깁니다! 확인하면 어프룹할게용
탭 컴포넌트 PR에서 이 레이아웃과 탭이 합쳐지는 건가요? 제 담당 페이지에서도 탭을 갖다 써야 해서 궁금해졌어요~~

BadaHertz52

쑤쑤 구현하느라 고생했어요.

코멘트에 남겨놨지만, 저는 레이아웃 컴포넌트보다 바로 리뷰 url 관리 페이지를 만드는게 어떨까 싶어요. pr에 남겨준 코드의 경우 아래의 두 가지 상황이 우려가 되네요.

  <ReviewLinkManagementLayout
      leftContent={<URLGeneratorForm />}
      rightContent={<ReviewCard createdAt={''} contentPreview={''} categories={[]} handleClick={() => {}} />}
    />

위의 코드대로 라면, ReviewLinkManageLayout 의 부모 컴포넌트에서 리뷰 url 목록 데이터를 불러와야한다.
leftContent, rightContent에 사용되는 컴포넌트 코드의 가독성 부분

ex : 리뷰 url 목록 컴포넌트내에서 데이터 패칭 시, suspsen, error boundary에 대한 코드가 붙어야하는 등, rightContent 컴포넌트 코드가 길어질 가능성이 높아 코드 가독성이 좋지 않다.

코멘트 확인 부탁해요! 연초인데 로그인 연동까지 하느라 고생이 많아요!! 성장하는 쑤쑤 화이팅!!!

BadaHertz52 · 2025-01-01T11:24:24Z

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

+interface ReviewLinkManagementLayoutProps {
+  leftContent: React.ReactNode;
+  rightContent: React.ReactNode;
+}
+


스타일링이 복잡한 코드라면, 레이아웃 컴포넌트로 만들어서 재사용하면 좋겠지만 저는 다음의 이유로 레이아웃 컴포넌트보다는 리뷰 관리 페이지로 가는데 어떨까 싶네요. 리뷰 url 폼과 리뷰 url 목록 컴포넌트가 바로 ReviewLinkManagement에 선언되는 게 더 좋을 것 같아요.

가로 정렬과 세로 정렬을 오가는 단순한 스타일

반복되어서 사용하지 않음

코드의 단순성에 비해서, leftContent, rightContent 에 컴포넌트 할당 시 코드 가독성이 나빠짐

이번에는 리뷰 링크 관리 페이지의 기본 레이아웃만, 즉 "껍데기"만 구현하는 것이 목표라고 생각해서 레이아웃 작업만 진행했는데, 역시 페이지 전체로 만드는게 더 나은 것 같네요!

soosoo22 · 2025-01-01T15:58:27Z

코드 확인했어요! 파일 위치는 나중에 페이지 들어오면 페이지 하위의 레이아웃 폴더로 돌리는 게 좋다고 생각합니다. 궁금한 점 하나만 코멘트 남깁니다! 확인하면 어프룹할게용 탭 컴포넌트 PR에서 이 레이아웃과 탭이 합쳐지는 건가요? 제 담당 페이지에서도 탭을 갖다 써야 해서 궁금해졌어요~~

탭 PR을 리뷰 링크 관리 페이지 PR보다 늦게 올리긴 했는데, 탭 PR 먼저 머지되고 여기서 합치려고 합니다!

soosoo22 · 2025-01-02T03:09:22Z

리뷰 링크 관리 페이지와 라우터 설정으로 PR 내용 수정했습니다~

…viewLinkDashboard로 분리

BadaHertz52 · 2025-01-04T12:35:47Z

frontend/src/constants/amplitudeEventName.ts

@@ -24,6 +24,7 @@ export const PAGE_VISITED_EVENT_NAME: { [key in Exclude<PageName, undefined>]: s
  detailedReview: '[page] 리뷰 상세 보기 페이지',
  reviewWriting: '[page] 리뷰 작성 페이지',
  reviewWritingComplete: '[page] 리뷰 작성 완료 페이지',
+  reviewLinkManagement: '[page] 리뷰 링크 관리 페이지',


세심하게, Amplitude도 챙겼네요 👍

Amplitude에서 접속한 페이지 경로를 추적하려면, ROUTE에 'reviewLinkManagement' 를 key로 하는 경로도 추가되어야해요.

BadaHertz52 · 2025-01-04T12:38:21Z

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

+const TITLE = '생성한 리뷰 링크를 확인해보세요';
+const SUBTITLE = '클릭하면 해당 프로젝트의 리뷰 목록으로 이동해요';


TITEL, SUBTITLE을 상수화한 이유가 있을까요?
반복 사용하는 상수나, 매직넘버가 아니라서 이유가 궁금하네요

큰... 이유가 있진 않습니다.......😅

chysis

작업하느라 고생했어요! 코멘트와 함께 제보 남깁니다😊

제보

화면 너비가 약 1250px 이하로 줄어들 때, 폼이 잘려서 보이는 문제가 있어요. 확인 부탁해요!

chysis · 2025-01-04T15:21:55Z

frontend/src/components/layouts/Topbar/components/Logo/styles.ts

 export const Logo = styled.div`
-  line-height: 8rem;
  text-align: center;

  span {
-    font-size: 3rem;
+    font-size: 2.8rem;
    font-weight: ${({ theme }) => theme.fontWeight.bolder};
-    letter-spacing: 0.7rem;
-
-    ${media.small} {
-      font-size: 2.8rem;
-    }

    ${media.xSmall} {


기존 로고 컴포넌트가 Topbar의 padding 때문에 영역을 벗어났는데, 해결되었네요👍🏻

chysis · 2025-01-04T15:23:55Z

frontend/src/constants/route.ts

@@ -7,4 +7,5 @@ export const ROUTE = {
  detailedReview: 'user/detailed-review',
  reviewZone: 'user/review-zone',
  reviewCollection: 'user/review-collection',
+  reviewLinkManagement: 'user/review-link-management',


URL의 경우, 개인적으로 간단하게 user/review-links나 user/my-review-links 같은 느낌도 괜찮을 것 같아요!

훨씬 좋은 것 같네요!👍👍
일단 이 부분은 회의를 통해서 확정을 지어야 할 것 같아서 추후에 변경할게요!

chysis · 2025-01-04T15:33:12Z

frontend/src/pages/ReviewLinkManagementPage/components/ReviewLinkDashboard/styles.ts

+
+  background-color: ${({ theme }) => theme.colors.lightGray};
+
+  margin: 0 10rem;


구분선 양옆 margin도 화면 너비에 따라 조절되어야 할 것 같아요!

800px 정도에서 margin을 제외하면 실제 content가 들어갈 자리가 거의 없을 것 같아요.

chysis · 2025-01-04T15:36:12Z

frontend/src/pages/ReviewLinkManagementPage/components/ReviewLinkDashboard/styles.ts

+
+export const Separator = styled.div`
+  width: 0.1rem;
+  min-height: calc(100vh - 13rem); // 전체 영역에서 헤더와 푸터 영역 제외


이 부분도 네비게이션 탭이 들어오면 값이 바뀌겠네요

soosoo22 · 2025-01-07T07:22:53Z

⭐️ 변경사항 v0.0.1 ⭐️

생성한 리뷰 링크 목록(오른쪽 영역)에 스크롤을 추가했습니다.
모바일에서는 리뷰 링크 생성 폼과 생성한 리뷰 링크 목록 두 영역이 세로로 나열되어서 생성한 리뷰 링크 목록의 스크롤이 필요하지 않다고 판단되어 일단 스크롤을 제거했습니다. 스크롤 유무는 아직 확정?된 느낌이 아닌 것 같아서 추가 회의가 필요하겠네요.

BadaHertz52 · 2025-01-08T11:38:39Z

frontend/src/pages/ReviewLinkManagementPage/index.tsx

+const ReviewLinkManagementPage = () => {
+  return (
+    <ErrorSuspenseContainer>
+      {/* TODO: 네비게이션 탭 추가 */}


쑤쑤가 구현한 네비게이션 탭은 '네비게이션 탭은 부모 페이지에만 두고 탭을 클릭하면 네비게이션 탭은 그대로 유지되면서, 탭 아래의 컨텐츠가 전환되는 방식' 같은데, ReviewLinkManagementPage 안에 네비게이션 탭이 추가된다고 주석이 되어 있어서 어떤 방식이 맞는 건가요?

원래 의도했던 바는리뷰 링크 관리, 작성한 리뷰 확인 페이지를 포함하는 부모 페이지 안에 네비게이션 탭을 배치하는 거였어요. 근데 이 부분은 제가 임의로 결정할 문제가 아닌 것 같아서 OptionSwitch와 같은 방식으로 각 페이지에 넣는 방식으로 하려고 합니다!

soosoo22 added 3 commits December 26, 2024 23:08

refactor: 리뷰미 로고 글자 간격 및 크기 조정

d2185cf

refactor: 푸터에 border 추가

47e8253

feat: 리뷰 링크 관리 페이지 레이아웃 구현

8580927

soosoo22 added 🍀 FE 🎨 디자인 labels Dec 27, 2024

soosoo22 self-assigned this Dec 27, 2024

soosoo22 requested review from chysis, BadaHertz52 and ImxYJL as code owners December 27, 2024 05:23

soosoo22 linked an issue Dec 27, 2024 that may be closed by this pull request

[FE] 리뷰 링크 관리 페이지와 라우터 설정을 추가한다. #1028

Open

2 tasks

soosoo22 added this to the 7차 스프린트 milestone Dec 27, 2024

BadaHertz52 reviewed Jan 1, 2025

View reviewed changes

soosoo22 changed the title ~~[FE] feat: 리뷰 링크 관리 페이지 레이아웃 구현~~ [FE] feat: 리뷰 링크 관리 페이지와 라우터 설정 추가 Jan 1, 2025

soosoo22 added the 🚀 기능 label Jan 1, 2025

soosoo22 added 2 commits January 2, 2025 11:47

feat: 리뷰 링크 관리 페이지 구현 및 레이아웃 적용

4ec2fa7

feat: 라우터 설정

a82450d

soosoo22 added 2 commits January 2, 2025 19:03

fix: Amplitude 방문 이벤트에 리뷰 링크 관리 페이지 추가

bfa7a9d

refactor: ErrorSuspenseContainer로 감싼 후, ReviewLinkManagementPage에서 Re…

281b115

…viewLinkDashboard로 분리

BadaHertz52 reviewed Jan 4, 2025

View reviewed changes

chysis reviewed Jan 4, 2025

View reviewed changes

soosoo22 added 2 commits January 7, 2025 14:52

feat: ReviewLinkLayout 컴포넌트 추가 및 반응형 스타일 적용

45d1585

feat: 모바일 환경에서 CardList의 max-height를 none으로 설정 및 반응형 세부 수정

e869d38

fix: ReviewCard 컴포넌트 flex-start로 상단 정렬 및 위치 비워두기

3202a95

BadaHertz52 reviewed Jan 8, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[FE] feat: 리뷰 링크 관리 페이지와 라우터 설정 추가 #1032

[FE] feat: 리뷰 링크 관리 페이지와 라우터 설정 추가 #1032

soosoo22 commented Dec 27, 2024 •

edited

Loading

ImxYJL commented Dec 28, 2024 •

edited

Loading

BadaHertz52 left a comment

BadaHertz52 Jan 1, 2025

soosoo22 Jan 2, 2025

soosoo22 commented Jan 1, 2025 •

edited

Loading

soosoo22 commented Jan 2, 2025

BadaHertz52 Jan 4, 2025 •

edited

Loading

BadaHertz52 Jan 4, 2025

soosoo22 Jan 6, 2025 •

edited

Loading

chysis left a comment

chysis Jan 4, 2025

chysis Jan 4, 2025

soosoo22 Jan 6, 2025 •

edited

Loading

chysis Jan 4, 2025

chysis Jan 4, 2025

soosoo22 commented Jan 7, 2025 •

edited

Loading

BadaHertz52 Jan 8, 2025

soosoo22 Jan 8, 2025

		const TITLE = '생성한 리뷰 링크를 확인해보세요';
		const SUBTITLE = '클릭하면 해당 프로젝트의 리뷰 목록으로 이동해요';


		background-color: ${({ theme }) => theme.colors.lightGray};

		margin: 0 10rem;

[FE] feat: 리뷰 링크 관리 페이지와 라우터 설정 추가 #1032

Are you sure you want to change the base?

[FE] feat: 리뷰 링크 관리 페이지와 라우터 설정 추가 #1032

Conversation

soosoo22 commented Dec 27, 2024 • edited Loading

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

🔥 어떻게 해결했나요 ?

추가 변경 사항

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

📚 참고 자료, 할 말

ImxYJL commented Dec 28, 2024 • edited Loading

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

soosoo22 commented Jan 1, 2025 • edited Loading

soosoo22 commented Jan 2, 2025

BadaHertz52 Jan 4, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

soosoo22 Jan 6, 2025 • edited Loading

Choose a reason for hiding this comment

chysis left a comment

Choose a reason for hiding this comment

제보

Choose a reason for hiding this comment

Choose a reason for hiding this comment

soosoo22 Jan 6, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

soosoo22 commented Jan 7, 2025 • edited Loading

⭐️ 변경사항 v0.0.1 ⭐️

Choose a reason for hiding this comment

Choose a reason for hiding this comment

soosoo22 commented Dec 27, 2024 •

edited

Loading

ImxYJL commented Dec 28, 2024 •

edited

Loading

soosoo22 commented Jan 1, 2025 •

edited

Loading

BadaHertz52 Jan 4, 2025 •

edited

Loading

soosoo22 Jan 6, 2025 •

edited

Loading

soosoo22 Jan 6, 2025 •

edited

Loading

soosoo22 commented Jan 7, 2025 •

edited

Loading