feature-074: 각종 이슈 수정

teamViNO · Feb 20, 2024 · 1b6d437 · 1b6d437
1 parent 932e2cc
commit 1b6d437
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 34 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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,