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

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] 리뷰 작성 완료 페이지',
+  reviewLinkManagement: '[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',
+  reviewLinkManagement: 'user/review-link-management',
 };

frontend/src/pages/ReviewLinkManagementPage/index.tsx

@@ -0,0 +1,27 @@
+import ReviewCard from '@/components/ReviewCard';
+
+import { URLGeneratorForm } from '../HomePage/components';
+
+import * as S from './styles';
+
+const ReviewLinkManagementPage = () => {
+  return (
+    <S.Layout>
+      <S.LeftContainer>
+        <URLGeneratorForm />
+      </S.LeftContainer>
+      <S.Separator />
+      <S.RightContainer>
+        <S.TitleWrapper>
+          <h2>생성한 리뷰 링크를 확인해보세요</h2>
+          <S.SubTitle>클릭하면 해당 프로젝트의 리뷰 목록으로 이동해요</S.SubTitle>
+        </S.TitleWrapper>
+        <S.ReviewLinkList>
+          <ReviewCard createdAt={''} contentPreview={''} categories={[]} handleClick={() => {}} />
+        </S.ReviewLinkList>
+      </S.RightContainer>
+    </S.Layout>
+  );
+};
+
+export default ReviewLinkManagementPage;

frontend/src/pages/ReviewLinkManagementPage/styles.ts

@@ -0,0 +1,66 @@
+import styled from '@emotion/styled';
+
+import media from '@/utils/media';
+
+export const Layout = styled.section`
+  width: 100%;
+
+  display: flex;
+
+  ${media.small} {
+    flex-direction: column;
+
+    padding: 0 3rem;
+  }
+`;
+
+export const LeftContainer = styled.div`
+  width: 30%;
+
+  padding: 10rem 0;
+
+  ${media.small} {
+    width: 100%;
+  }
+`;
+
+export const Separator = styled.div`
+  width: 0.1rem;
+  min-height: calc(100vh - 13rem); // 전체 영역에서 헤더와 푸터 영역 제외
+
+  background-color: ${({ theme }) => theme.colors.lightGray};
+
+  margin: 0 10rem;
+
+  ${media.small} {
+    display: none;
+  }
+`;
+
+export const RightContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 3rem;
+
+  width: 70%;
+
+  padding: 10rem 0;
+
+  ${media.small} {
+    width: 100%;
+  }
+`;
+
+export const TitleWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+`;
+
+export const SubTitle = styled.span`
+  color: ${({ theme }) => theme.colors.gray};
+  /* font-size: ${({ theme }) => theme.fontSize.small}; */
+  /* font-weight: ${({ theme }) => theme.fontWeight.semibold}; */
+`;
+
+export const ReviewLinkList = styled.div``;

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 ReviewLinkManagementPage } from './ReviewLinkManagementPage';

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 ReviewLinkManagementPage = lazy(() => import('@/pages/ReviewLinkManagementPage'));
 
 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.reviewLinkManagement}`, element: <ReviewLinkManagementPage /> },
     ],
   },
 ]);