From f4f9361efb2249754ca8dc02e57f016060f7266d Mon Sep 17 00:00:00 2001
From: Leejin Yang <ejin1996@gmail.com>
Date: Fri, 4 Aug 2023 10:32:16 +0900
Subject: [PATCH] =?UTF-8?q?[FE]=20feat:=20=EC=83=81=ED=92=88=20=EC=83=81?=
 =?UTF-8?q?=EC=84=B8=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20=ED=95=84=EC=9A=94=20?=
 =?UTF-8?q?=EB=A9=94=EC=8B=9C=EC=A7=80=EC=97=90=20=EB=A1=9C=EA=B7=B8?=
 =?UTF-8?q?=EC=9D=B8=20=EB=A7=81=ED=81=AC=20=EC=B6=94=EA=B0=80=20(#319)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: 비로그인 상품 리뷰 조회 메시지 로그인 경로 링크 추가

* refactor: 로그인 페이지 상수처리
---
 .../Review/ReviewList/ReviewList.tsx          | 28 +++++++++++++++----
 frontend/src/pages/ProfilePage.tsx            |  3 +-
 2 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/Review/ReviewList/ReviewList.tsx b/frontend/src/components/Review/ReviewList/ReviewList.tsx
index 8259f692e..a8db30587 100644
--- a/frontend/src/components/Review/ReviewList/ReviewList.tsx
+++ b/frontend/src/components/Review/ReviewList/ReviewList.tsx
@@ -1,9 +1,10 @@
-import { Text } from '@fun-eat/design-system';
-import React from 'react';
+import { Text, Link } from '@fun-eat/design-system';
+import { Link as RouterLink } from 'react-router-dom';
 import styled from 'styled-components';
 
 import ReviewItem from '../ReviewItem/ReviewItem';
 
+import { PATH } from '@/constants/path';
 import { useInfiniteProductReviews } from '@/hooks/product';
 import type { SortOption } from '@/types/common';
 
@@ -20,9 +21,14 @@ const ReviewList = ({ productId, selectedOption }: ReviewListProps) => {
 
   if (error) {
     return (
-      <ErrorDescription align="center" weight="bold" size="lg">
-        {LOGIN_ERROR_MESSAGE}
-      </ErrorDescription>
+      <ErrorContainer>
+        <ErrorDescription align="center" weight="bold" size="lg">
+          {LOGIN_ERROR_MESSAGE}
+        </ErrorDescription>
+        <LoginLink as={RouterLink} to={PATH.LOGIN} block>
+          로그인하러 가기
+        </LoginLink>
+      </ErrorContainer>
     );
   }
 
@@ -48,8 +54,20 @@ const ReviewListContainer = styled.ul`
   row-gap: 60px;
 `;
 
+const ErrorContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
 const ErrorDescription = styled(Text)`
   padding: 40px 0;
   white-space: pre-line;
   word-break: break-all;
 `;
+
+const LoginLink = styled(Link)`
+  padding: 16px 24px;
+  border: 1px solid ${({ theme }) => theme.colors.gray4};
+  border-radius: 8px;
+`;
diff --git a/frontend/src/pages/ProfilePage.tsx b/frontend/src/pages/ProfilePage.tsx
index 1a9970a7f..a9c024935 100644
--- a/frontend/src/pages/ProfilePage.tsx
+++ b/frontend/src/pages/ProfilePage.tsx
@@ -3,6 +3,7 @@ import { useEffect } from 'react';
 import { Navigate } from 'react-router-dom';
 import styled from 'styled-components';
 
+import { PATH } from '@/constants/path';
 import { useMember } from '@/hooks/auth';
 import { useMemberValueContext } from '@/hooks/context';
 
@@ -15,7 +16,7 @@ const ProfilePage = () => {
   }, []);
 
   if (member === null) {
-    return <Navigate to="/login" replace />;
+    return <Navigate to={PATH.LOGIN} replace />;
   }
 
   return (