feat(ProductOrder): redirect to login page if not authenticated

README.md

@@ -7,4 +7,4 @@
 - [x] `/api/v1/products/{productId}/detail`에 대한 API 구현
 - [x] `/api/v1/products/{productId}/options`에 대한 API 구현
 - [x] 없는 상품의 경우 메인 페이지로 리다이렉트
-- [] 나에게 선물하기 버튼 클릭 시 로그인이 되어있지 않다면 로그인 페이지로 리다이렉트
+- [x] 나에게 선물하기 버튼 클릭 시 로그인이 되어있지 않다면 로그인 페이지로 리다이렉트

src/components/features/Product/ProductOrder/index.stories.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Meta, StoryObj } from '@storybook/react';
 import { ChakraProvider } from '@chakra-ui/react';
 import { MemoryRouter } from 'react-router-dom';
+import AuthProvider from '@/context/auth/AuthProvider';
 import GlobalStyles from '@assets/styles';
 import ProductOrder from '.';
 
@@ -12,8 +13,10 @@ const meta: Meta<typeof ProductOrder> = {
   decorators: (Story) => (
     <ChakraProvider>
       <MemoryRouter>
-        <GlobalStyles />
-        <Story />
+        <AuthProvider>
+          <GlobalStyles />
+          <Story />
+        </AuthProvider>
       </MemoryRouter>
     </ChakraProvider>
   ),

src/components/features/Product/ProductOrder/index.tsx

@@ -1,10 +1,20 @@
 import React from 'react';
 import styled from '@emotion/styled';
-import { Link } from 'react-router-dom';
+import { ROUTE_PATH } from '@routes/path';
+import { useNavigate } from 'react-router-dom';
+import { useAuth } from '@context/auth/useAuth';
 import { Button } from '@components/common';
 import QuantitySelector from './QuantitySelector';
 
 export default function ProductOrder() {
+  const { isAuthenticated } = useAuth();
+  const navigate = useNavigate();
+
+  const handleOrderClick = () => {
+    const targetPath = isAuthenticated ? ROUTE_PATH.ORDER : ROUTE_PATH.LOGIN;
+    navigate(targetPath);
+  };
+
   return (
     <ProductOrderContainer>
       <QuantitySelector />
@@ -15,9 +25,9 @@ export default function ProductOrder() {
             <dd>145000원</dd>
           </dl>
         </TotalAmount>
-        <Link to="/order">
-          <Button theme="darkGray">나에게 선물하기</Button>
-        </Link>
+        <Button theme="darkGray" onClick={handleOrderClick}>
+          나에게 선물하기
+        </Button>
       </div>
     </ProductOrderContainer>
   );