From 1b6d43713edafb6e9bab4bc09dbf64817af683ed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E1=84=8C=E1=85=A5=E1=86=BC=E1=84=89=E1=85=A5=E1=86=BC?=
 =?UTF-8?q?=E1=84=92=E1=85=B1?= <whistle_js@naver.com>
Date: Wed, 21 Feb 2024 02:49:15 +0900
Subject: [PATCH] =?UTF-8?q?feature-074:=20=EA=B0=81=EC=A2=85=20=EC=9D=B4?=
 =?UTF-8?q?=EC=8A=88=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/layout/sideBar/AddCategory.tsx | 38 ++++++++----------
 src/components/layout/sideBar/index.tsx       | 39 ++++++++++++++-----
 src/components/modals/RecommendationModal.tsx |  2 +-
 src/hooks/useCreateVideo.ts                   |  2 +-
 src/stores/modal.ts                           |  5 +++
 5 files changed, 52 insertions(+), 34 deletions(-)

diff --git a/src/components/layout/sideBar/AddCategory.tsx b/src/components/layout/sideBar/AddCategory.tsx
index 909c334..41dde21 100644
--- a/src/components/layout/sideBar/AddCategory.tsx
+++ b/src/components/layout/sideBar/AddCategory.tsx
@@ -1,15 +1,16 @@
-import * as AddCategoryStyle from '@/styles/layout/sideBar/AddCategory.style';
-import PlusSvg from '@/assets/icons/plus.svg?react';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
-import { addCategoryModalState } from '@/stores/modal';
+
+import PlusSvg from '@/assets/icons/plus.svg?react';
+
+import { addCategoryModalState, guestCategoryModalState } from '@/stores/modal';
 import { userTokenState } from '@/stores/user';
-import { useState } from 'react';
-import NoticeModal from '@/components/modals/NoticeModal';
+
+import * as AddCategoryStyle from '@/styles/layout/sideBar/AddCategory.style';
 
 const AddCategory = () => {
   const isUser = useRecoilValue(userTokenState);
   const setIsAddCategoryModalOpen = useSetRecoilState(addCategoryModalState);
-  const [isNoticeModalOpen, setIsNoticeModalOpen] = useState(false);
+  const setGuestCategoryModal = useSetRecoilState(guestCategoryModalState);
 
   const openAddModal = (e: React.MouseEvent<HTMLButtonElement>) => {
     setIsAddCategoryModalOpen({
@@ -21,28 +22,21 @@ const AddCategory = () => {
   };
 
   const openGuestNoticeModal = (e: React.MouseEvent<HTMLButtonElement>) => {
-    setIsNoticeModalOpen(true);
+    setGuestCategoryModal(true);
     e.stopPropagation();
   };
 
   const handleClickedAdd = (e: React.MouseEvent<HTMLButtonElement>) =>
     isUser ? openAddModal(e) : openGuestNoticeModal(e);
   return (
-    <AddCategoryStyle.Wrap>
-      <AddCategoryStyle.Text>카테고리</AddCategoryStyle.Text>
-      <AddCategoryStyle.Button onClick={handleClickedAdd}>
-        <PlusSvg width={20} height={20} />
-      </AddCategoryStyle.Button>
-      {isNoticeModalOpen && (
-        <NoticeModal
-          title="로그인하고 중요한 영상 저장하기"
-          subTitle="로그인 후 더 많은 서비스를 이용해보세요!"
-          to="/sign-in"
-          buttonTitle="로그인 하기"
-          setIsNoticeModalOpen={setIsNoticeModalOpen}
-        />
-      )}
-    </AddCategoryStyle.Wrap>
+    <>
+      <AddCategoryStyle.Wrap>
+        <AddCategoryStyle.Text>카테고리</AddCategoryStyle.Text>
+        <AddCategoryStyle.Button onClick={handleClickedAdd}>
+          <PlusSvg width={20} height={20} />
+        </AddCategoryStyle.Button>
+      </AddCategoryStyle.Wrap>
+    </>
   );
 };
 
diff --git a/src/components/layout/sideBar/index.tsx b/src/components/layout/sideBar/index.tsx
index e102bb2..8d146fc 100644
--- a/src/components/layout/sideBar/index.tsx
+++ b/src/components/layout/sideBar/index.tsx
@@ -1,6 +1,12 @@
-import * as SideBarStyles from '@/styles/layout/sideBar';
-import { useRecoilValue } from 'recoil';
+import { useRecoilState, useRecoilValue } from 'recoil';
+
+import NoticeModal from '@/components/modals/NoticeModal';
+
 import { userTokenState } from '@/stores/user';
+import { guestCategoryModalState } from '@/stores/modal';
+
+import * as SideBarStyles from '@/styles/layout/sideBar';
+
 import GuestMode from './GuestMode';
 import UserMode from './UserMode';
 import AddCategory from './AddCategory';
@@ -9,16 +15,29 @@ import VinoGuide from './VinoGuide';
 
 const SideBar = () => {
   const isUser = useRecoilValue(userTokenState);
+  const [isModalOpen, setIsModalOpen] = useRecoilState(guestCategoryModalState);
 
   return (
-    <SideBarStyles.Container>
-      <VinoGuide />
-      <ConvertVideo />
-      <SideBarStyles.StickySection>
-        <AddCategory />
-        {isUser ? <UserMode /> : <GuestMode />}
-      </SideBarStyles.StickySection>
-    </SideBarStyles.Container>
+    <>
+      <SideBarStyles.Container>
+        <VinoGuide />
+        <ConvertVideo />
+        <SideBarStyles.StickySection>
+          <AddCategory />
+          {isUser ? <UserMode /> : <GuestMode />}
+        </SideBarStyles.StickySection>
+      </SideBarStyles.Container>
+
+      {isModalOpen && (
+        <NoticeModal
+          title="로그인하고 중요한 영상 저장하기"
+          subTitle="로그인 후 더 많은 서비스를 이용해보세요!"
+          to="/sign-in"
+          buttonTitle="로그인 하기"
+          setIsNoticeModalOpen={() => setIsModalOpen(false)}
+        />
+      )}
+    </>
   );
 };
 
diff --git a/src/components/modals/RecommendationModal.tsx b/src/components/modals/RecommendationModal.tsx
index c82d39f..d955c05 100644
--- a/src/components/modals/RecommendationModal.tsx
+++ b/src/components/modals/RecommendationModal.tsx
@@ -83,7 +83,7 @@ const RecommendationModal = () => {
               <div className="insight-content">
                 <h1>{dummyVideo.title}</h1>
 
-                <div style={{ display: 'flex', gap: 8 }}>
+                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                   {dummyVideo.tag.slice(0, 3).map((item) => (
                     <div key={item.name} className="insight-tag">
                       # {item.name}
diff --git a/src/hooks/useCreateVideo.ts b/src/hooks/useCreateVideo.ts
index 75e6a6e..034fb82 100644
--- a/src/hooks/useCreateVideo.ts
+++ b/src/hooks/useCreateVideo.ts
@@ -43,7 +43,7 @@ const useCreateVideo = () => {
         setIsOpenErrorModal(true);
       }
     } else {
-      navigate('/summary/guest');
+      navigate(`/summary/guest?id=${Date.now()}`);
     }
 
     setVideoLink(null);
diff --git a/src/stores/modal.ts b/src/stores/modal.ts
index 5570113..e78bc20 100644
--- a/src/stores/modal.ts
+++ b/src/stores/modal.ts
@@ -5,6 +5,11 @@ export const addCategoryModalState = atom({
   default: { location: '', isOpen: false, categoryId: -1 },
 });
 
+export const guestCategoryModalState = atom({
+  key: 'guest-category-modal',
+  default: false,
+});
+
 export const summaryTransformModalState = atom({
   key: 'summary-transform-modal',
   default: false,