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

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

* refactor: 푸터에 border 추가

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

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

* feat: 라우터 설정

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

* refactor: ErrorSuspenseContainer로 감싼 후, ReviewLinkManagementPage에서 ReviewLinkDashboard로 분리

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

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

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

* refactor: 리뷰 링크 관리 페이지 경로명 및 폴더명 변경

frontend/src/components/layouts/Footer/style.ts

@@ -21,6 +21,8 @@ export const Footer = styled.footer`
 
   background-color: ${({ theme }) => theme.colors.white};
 
+  border-top: 0.1rem solid ${({ theme }) => theme.colors.lightGray};
+
   ${media.xSmall} {
     flex-direction: column;
     gap: 0.2rem;

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

@@ -3,17 +3,11 @@ import styled from '@emotion/styled';
 import media from '@/utils/media';
 
 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} {
       font-size: 2.6rem;

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] 리뷰 작성 완료 페이지',
+  reviewLinks: '[page] 리뷰 링크 관리 페이지',
 };
 
 export const REVIEW_WRITING_EVENT_NAME = {

frontend/src/constants/route.ts

@@ -7,4 +7,5 @@ export const ROUTE = {
   detailedReview: 'user/detailed-review',
   reviewZone: 'user/review-zone',
   reviewCollection: 'user/review-collection',
+  reviewLinks: 'user/review-links',
 };

frontend/src/pages/HomePage/components/URLGeneratorForm/styles.ts

@@ -8,10 +8,10 @@ export const URLGeneratorForm = styled.section`
   justify-content: center;
 
   width: 40%;
-  padding: 0 9rem;
 
   ${media.medium} {
     width: 45%;
+    padding: 0 9rem;
 
     h2 {
       font-size: 2rem;

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

@@ -0,0 +1,27 @@
+import { URLGeneratorForm } from '@/pages/HomePage/components';
+
+import ReviewLinkLayout from '../layouts/ReviewLinkLayout';
+
+import * as S from './styles';
+
+const ReviewLinkDashboard = () => {
+  return (
+    <S.ReviewLinkDashboardContainer>
+      <S.FormSection>
+        <URLGeneratorForm />
+      </S.FormSection>
+      <S.Separator />
+      <S.LinkSection>
+        <ReviewLinkLayout
+          title="생성한 리뷰 링크를 확인해보세요"
+          subTitle="클릭하면 해당 프로젝트의 리뷰 목록으로 이동해요"
+        >
+          {/* TODO: ReviewCard 컴포넌트 추가 및 생성한 리뷰 링크가 없을 경우, 돋보기 컴포넌트 추가 */}
+          <></>
+        </ReviewLinkLayout>
+      </S.LinkSection>
+    </S.ReviewLinkDashboardContainer>
+  );
+};
+
+export default ReviewLinkDashboard;

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

@@ -0,0 +1,78 @@
+import styled from '@emotion/styled';
+
+import media from '@/utils/media';
+
+export const ReviewLinkDashboardContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  gap: 7rem;
+
+  width: 100%;
+
+  ${media.medium} {
+    gap: 4rem;
+  }
+
+  @media screen and (max-width: 900px) {
+    gap: 2rem;
+  }
+
+  ${media.small} {
+    flex-direction: column;
+    align-items: center;
+  }
+`;
+
+export const FormSection = styled.section`
+  section {
+    width: auto;
+  }
+
+  padding: 5rem 0;
+
+  ${media.medium} {
+    section {
+      padding: 0;
+    }
+  }
+
+  ${media.small} {
+    width: 100%;
+    padding: 0;
+  }
+`;
+
+export const Separator = styled.div`
+  width: 0.1rem;
+  // 전체 영역에서 헤더(7rem)와 푸터(6rem) 영역 제외하고, 추후 네비게이션 탭이 추가되면 해당 영역도 제외
+  min-height: calc(100vh - 13rem);
+
+  background-color: ${({ theme }) => theme.colors.lightGray};
+
+  ${media.small} {
+    display: none;
+  }
+`;
+
+export const LinkSection = styled.section`
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  gap: 3rem;
+
+  width: 100%;
+
+  padding: 5rem 0;
+
+  ${media.medium} {
+    width: 50%;
+  }
+
+  ${media.small} {
+    width: 85%;
+  }
+
+  ${media.xSmall} {
+    width: 90%;
+  }
+`;

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

@@ -0,0 +1,22 @@
+import { EssentialPropsWithChildren } from '@/types';
+
+import * as S from './styles';
+
+interface ReviewLinkListLayoutProps {
+  title: string;
+  subTitle: string;
+}
+
+const ReviewLinkLayout = ({ title, subTitle, children }: EssentialPropsWithChildren<ReviewLinkListLayoutProps>) => {
+  return (
+    <S.ReviewLinkLayout>
+      <S.TitleWrapper>
+        <S.Title>{title}</S.Title>
+        <S.SubTitle>{subTitle}</S.SubTitle>
+      </S.TitleWrapper>
+      <S.CardList>{children}</S.CardList>
+    </S.ReviewLinkLayout>
+  );
+};
+
+export default ReviewLinkLayout;

frontend/src/pages/ReviewLinkPage/components/layouts/ReviewLinkLayout/styles.ts

@@ -0,0 +1,58 @@
+import styled from '@emotion/styled';
+
+import media from '@/utils/media';
+
+export const ReviewLinkLayout = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  gap: 4rem;
+`;
+
+export const TitleWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+`;
+
+export const Title = styled.h2`
+  ${media.medium} {
+    font-size: 2rem;
+  }
+
+  ${media.xSmall} {
+    font-size: 1.8rem;
+  }
+
+  ${media.xxSmall} {
+    font-size: 1.6rem;
+  }
+`;
+
+export const SubTitle = styled.span`
+  color: ${({ theme }) => theme.colors.gray};
+
+  ${media.xSmall} {
+    font-size: 1.5rem;
+  }
+
+  ${media.xxSmall} {
+    font-size: 1.3rem;
+  }
+`;
+
+export const CardList = styled.ul`
+  display: flex;
+  flex-direction: column;
+  gap: 4rem;
+
+  max-height: calc(100vh - 34rem);
+  overflow-y: auto;
+
+  padding-right: 2rem;
+
+  ${media.small} {
+    max-height: none;
+    padding-right: 0;
+  }
+`;

frontend/src/pages/ReviewLinkPage/index.tsx

@@ -0,0 +1,14 @@
+import { ErrorSuspenseContainer } from '@/components';
+
+import ReviewLinkDashboard from './components/ReviewLinkDashboard';
+
+const ReviewLinkPage = () => {
+  return (
+    <ErrorSuspenseContainer>
+      {/* TODO: 네비게이션 탭 추가 */}
+      <ReviewLinkDashboard />
+    </ErrorSuspenseContainer>
+  );
+};
+
+export default ReviewLinkPage;

frontend/src/pages/index.tsx

@@ -7,3 +7,4 @@ export { default as ReviewWritingPage } from './ReviewWritingPage';
 export { default as ReviewWritingCompletePage } from './ReviewWritingCompletePage';
 export { default as ReviewZonePage } from './ReviewZonePage';
 export { default as ReviewCollectionPage } from './ReviewCollectionPage';
+export { default as ReviewLinkPage } from './ReviewLinkPage';

frontend/src/router.tsx

@@ -10,6 +10,7 @@ const ReviewWritingPage = lazy(() => import('@/pages/ReviewWritingPage'));
 const ReviewZonePage = lazy(() => import('@/pages/ReviewZonePage'));
 const ReviewCollectionPage = lazy(() => import('@/pages/ReviewCollectionPage'));
 const LoadingPage = lazy(() => import('@/pages/LoadingPage'));
+const ReviewLinkPage = lazy(() => import('@/pages/ReviewLinkPage'));
 
 import App from './App';
 import { ErrorSuspenseContainer } from './components';
@@ -52,6 +53,7 @@ const router = createBrowserRouter([
         ),
       },
       { path: `${ROUTE.reviewCollection}/:${ROUTE_PARAM.reviewRequestCode}`, element: <ReviewCollectionPage /> },
+      { path: `${ROUTE.reviewLinks}`, element: <ReviewLinkPage /> },
     ],
   },
 ]);