From ace64538cbdd05b0628dfca583d0f561d5cb451e Mon Sep 17 00:00:00 2001
From: gs0428 <lider28@naver.com>
Date: Mon, 19 Feb 2024 00:17:18 +0900
Subject: [PATCH 1/4] =?UTF-8?q?feature-077:=20=EB=B2=84=ED=8A=BC=20?=
 =?UTF-8?q?=ED=98=B8=EB=B2=84=20=EC=8B=9C=20=EC=83=89=EC=83=81=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/styles/category/EmptyCard.style.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/styles/category/EmptyCard.style.ts b/src/styles/category/EmptyCard.style.ts
index 547027d..c51ff1e 100644
--- a/src/styles/category/EmptyCard.style.ts
+++ b/src/styles/category/EmptyCard.style.ts
@@ -26,4 +26,8 @@ export const Button = styled(Link)`
   border-radius: 100px;
   padding: 12px 32px;
   ${theme.typography.Subheader2}
+
+  &:hover {
+    color: ${theme.color.green400};
+  }
 `;

From 5acb7a05179ac1cf059409ac4ab8484807b859c4 Mon Sep 17 00:00:00 2001
From: gs0428 <lider28@naver.com>
Date: Mon, 19 Feb 2024 00:28:46 +0900
Subject: [PATCH 2/4] =?UTF-8?q?feature-077:=20=EC=9D=B4=EB=A9=94=EC=9D=BC?=
 =?UTF-8?q?=20=EC=A0=84=EC=86=A1=20=EC=84=B1=EA=B3=B5=20=EC=8B=9C=20?=
 =?UTF-8?q?=EB=B3=B4=EC=97=AC=EC=A7=80=EB=8A=94=20UI=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/success-mail.png                | Bin 0 -> 874 bytes
 src/components/layout/footer/SendEmail.tsx |  48 ++++++++++++++-------
 src/styles/layout/footer/index.ts          |  12 ++++++
 3 files changed, 45 insertions(+), 15 deletions(-)
 create mode 100644 src/assets/success-mail.png

diff --git a/src/assets/success-mail.png b/src/assets/success-mail.png
new file mode 100644
index 0000000000000000000000000000000000000000..e82cc8f1ce51eec44d6cac2b29da1313aad2edb4
GIT binary patch
literal 874
zcmV-w1C{)VP)<h;3K|Lk000e1NJLTq001Na001Ni1^@s6;Q*MJ00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0{=-wK~#7F?UqkW
z(@-48zhfPgY>-al!pxMiI2Pm0KWOB_BvBG$V)TLs4J2MXDT!yngC|YUlZj|TyvU6s
zEMys&NE8)fOiX|SMGfOm;-(u}fzJBgMi=&{Tib1TfKSr2eZRE*yuSCoEwImCBoGMn
zj*X4=q70Z&0>NOAlO$=F9JXyYjWZ0>?eqBr7{ss;k>L}GL{OGxKI4WalVCQReMY6K
zU;w}0f0fA0WXn)!8+mIpqobquU;x!Obf!=0BE99a+g-L;qu0LH1r5xG4-Ni|*%q_g
zWs@v?e83Dsk5J1)d4XKYqcR9ny;V*53QUm;(cA#oSZE?90&~lmZB7p8Y)SQdXi7#X
zQurQ4g?cWUaFT~6rUl^6YdL*hM>_KSmMJMkX>KrO)C~#s`(@Z_)$6f15Z%aM^E4nW
zL!lj`l2H-*glN9>O>S{<i9ye$!f$9`LdMI9{I&Vz)Whqxhnx-<J+EaXj>bm5XkhZl
z&}BQ!l8dO&z*`y4FHmJ}MZHEJe)ENl&a<iWp%1A&YnC{gVT7E#%2;J2{@ch>A0}DC
zJ(+GrSkyS1bz-j(asSl2<S`NJ>FDTqs?^fK7z%}Wm&+BjSS%cN5t8ctBO@cca-K0{
zcDo%`s}+$*1eJtkwp435pN{J4YB(GYJifM$_T~c1!62>9AGm#DTD7ja>>YIp-1Ysz
zjnnIR^T~?9Txs*kT_48vW8c8Bg*#a^hjxlR8?VRLB@6UGMJ^m&Koi+(p{USKu}4?J
zcrVo8)uat8Q8UUZqFYGe9KVs=0<$cJK3j9d>@{&*=I3$z;2MmeTS%eZD<(HZ?05Vx
z+K&i0@BEHZFf5cUwz%{QVss6gn<$Brg%lbOA0RR|tgfyi9M(5)c4FukRt=hAB<<n#
zdXpjh--Q%P5vz!hf+FU2yTP*Bg0-ST3iSKv@pzJQRI(6do77sM!$&td>FMO(%(EnS
zRY)OQjQkKHM~IAZL=?qt>>?b;rJs#`_9+wp07s@6n8R-B<^TWy07*qoM6N<$f=k(x
A9smFU

literal 0
HcmV?d00001

diff --git a/src/components/layout/footer/SendEmail.tsx b/src/components/layout/footer/SendEmail.tsx
index 5516af5..08520a0 100644
--- a/src/components/layout/footer/SendEmail.tsx
+++ b/src/components/layout/footer/SendEmail.tsx
@@ -2,10 +2,12 @@ import * as FooterStyle from '@/styles/layout/footer';
 import { useState } from 'react';
 
 import SendEmailImage from '@/assets/mail.png';
+import SuccessSendEmailImage from '@/assets/success-mail.png';
 import { postFeedback } from '@/apis/feedback';
 
 const SendEmail = () => {
   const [feedback, setFeedback] = useState<string>('');
+  const [successSend, setSuccessSend] = useState(false);
 
   const handleInputFeedback = (e: React.ChangeEvent<HTMLInputElement>) =>
     setFeedback(e.target.value);
@@ -14,27 +16,43 @@ const SendEmail = () => {
     const res = await postFeedback(feedback);
     if (res.data.success) {
       setFeedback('');
+      setSuccessSend(true);
       return;
     }
     alert('피드백을 전송하는 과정에서 오류가 발생했습니다.');
   };
 
   return (
-    <FooterStyle.SendEmailWrap>
-      <FooterStyle.SendEmailImage src={SendEmailImage} alt="메일 보내기" />
-      <FooterStyle.SendEmailInput
-        type="text"
-        placeholder="서비스를 이용하면서 불편하거나, 좋은 피드백이 있다면 보내주세요!"
-        value={feedback}
-        onChange={handleInputFeedback}
-      />
-      <FooterStyle.SendEmailButton
-        onClick={onSendFeedback}
-        disabled={!feedback}
-        className={`${!feedback && 'disabled'}`}
-      >
-        보내기
-      </FooterStyle.SendEmailButton>
+    <FooterStyle.SendEmailWrap className={`${successSend && 'success-send'}`}>
+      {successSend && (
+        <>
+          <FooterStyle.SendEmailImage
+            src={SuccessSendEmailImage}
+            alt="메일 보내기"
+          />
+          <FooterStyle.SuccessSendEmail>
+            소중한 피드백이 전달되었어요!
+          </FooterStyle.SuccessSendEmail>
+        </>
+      )}
+      {!successSend && (
+        <>
+          <FooterStyle.SendEmailImage src={SendEmailImage} alt="메일 보내기" />
+          <FooterStyle.SendEmailInput
+            type="text"
+            placeholder="서비스를 이용하면서 불편하거나, 좋은 피드백이 있다면 보내주세요!"
+            value={feedback}
+            onChange={handleInputFeedback}
+          />
+          <FooterStyle.SendEmailButton
+            onClick={onSendFeedback}
+            disabled={!feedback}
+            className={`${!feedback && 'disabled'}`}
+          >
+            보내기
+          </FooterStyle.SendEmailButton>
+        </>
+      )}
     </FooterStyle.SendEmailWrap>
   );
 };
diff --git a/src/styles/layout/footer/index.ts b/src/styles/layout/footer/index.ts
index 2410db9..a8c279e 100644
--- a/src/styles/layout/footer/index.ts
+++ b/src/styles/layout/footer/index.ts
@@ -18,6 +18,18 @@ export const SendEmailWrap = styled.div`
   margin: 40px 0px;
   border-radius: 12px;
   background-color: ${theme.color.white};
+
+  &.success-send {
+    justify-content: flex-start;
+    padding: 0;
+    background-color: ${theme.color.gray100};
+  }
+`;
+
+export const SuccessSendEmail = styled.span`
+  margin-left: 20px;
+  ${theme.typography.Subheader2}
+  color: ${theme.color.blue};
 `;
 
 export const SendEmailImage = styled.img`

From b14763e110391c1139165511276e9934782b73dd Mon Sep 17 00:00:00 2001
From: gs0428 <lider28@naver.com>
Date: Mon, 19 Feb 2024 00:32:09 +0900
Subject: [PATCH 3/4] =?UTF-8?q?feature-077:=20=ED=99=88=20=ED=99=94?=
 =?UTF-8?q?=EB=A9=B4=EC=9C=BC=EB=A1=9C=20=EC=9D=B4=EB=8F=99=20=EC=8B=9C=20?=
 =?UTF-8?q?=EC=82=AC=EC=9D=B4=EB=93=9C=20=EB=B0=94=20=EB=8B=AB=ED=9E=88?=
 =?UTF-8?q?=EB=8F=84=EB=A1=9D=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/HomePage.tsx | 36 ++++++++++++++++++++++++------------
 1 file changed, 24 insertions(+), 12 deletions(-)

diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index aaa76f0..a4f855e 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { useRecoilState, useRecoilValue } from 'recoil';
+import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
 import { IVideoProps } from 'types/videos';
 
 import {
@@ -19,6 +19,7 @@ import { HomePageContainer } from '@/styles/HomepageStyle';
 import { userTokenState } from '@/stores/user';
 import { recommendationModalState } from '@/stores/modal';
 import { toastListState } from '@/stores/toast';
+import { isSideBarOpenState } from '@/stores/ui';
 
 export interface Video {
   id: string;
@@ -30,6 +31,7 @@ export interface Video {
 
 const HomePage: React.FC = () => {
   const userToken = useRecoilValue(userTokenState);
+  const setIsSideBarOpen = useSetRecoilState(isSideBarOpenState);
   const isOpenModal = useRecoilValue(recommendationModalState);
   const [recentVideos, setRecentVideos] = useState<IVideoProps[]>([]);
   const [dummyVideos, setDummyVideos] = useState<IVideoProps[]>([]);
@@ -68,7 +70,9 @@ const HomePage: React.FC = () => {
         setRecentVideos([]);
         setDummyVideos(res.result.videos);
       });
-  }, [userToken]);
+
+    setIsSideBarOpen(false);
+  }, [setIsSideBarOpen, userToken]);
 
   return (
     <>
@@ -76,16 +80,24 @@ const HomePage: React.FC = () => {
         <SearchYoutube searchRef={searchRef} />
 
         {userToken ? (
-        <div>
-          <RecentVideos searchRef={searchRef} videos={recentVideos} />
-          <InsightVideos userToken={userToken} dummyVideos={dummyVideos} onFileClick={onFileClick} />
-        </div>
-      ) : (
-        <div>
-          <InsightVideos userToken={userToken} dummyVideos={dummyVideos} onFileClick={onFileClick} />
-          <RecentVideos searchRef={searchRef} videos={recentVideos} />
-        </div>
-      )}
+          <div>
+            <RecentVideos searchRef={searchRef} videos={recentVideos} />
+            <InsightVideos
+              userToken={userToken}
+              dummyVideos={dummyVideos}
+              onFileClick={onFileClick}
+            />
+          </div>
+        ) : (
+          <div>
+            <InsightVideos
+              userToken={userToken}
+              dummyVideos={dummyVideos}
+              onFileClick={onFileClick}
+            />
+            <RecentVideos searchRef={searchRef} videos={recentVideos} />
+          </div>
+        )}
       </HomePageContainer>
 
       {isOpenModal && <RecommendationModal />}

From 1732b6711fd9155e7253ec6d82257759555872b0 Mon Sep 17 00:00:00 2001
From: gs0428 <lider28@naver.com>
Date: Mon, 19 Feb 2024 01:00:30 +0900
Subject: [PATCH 4/4] =?UTF-8?q?feature-077:=20=ED=95=98=EC=9C=84=20?=
 =?UTF-8?q?=EC=B9=B4=ED=85=8C=EA=B3=A0=EB=A6=AC=20=EC=83=9D=EC=84=B1=20?=
 =?UTF-8?q?=ED=9B=84=20=EB=B3=B4=EB=9F=AC=EA=B0=80=EA=B8=B0=20=ED=81=B4?=
 =?UTF-8?q?=EB=A6=AD=20=EC=8B=9C=20=ED=95=B4=EB=8B=B9=20=ED=95=98=EC=9C=84?=
 =?UTF-8?q?=20=EC=B9=B4=ED=85=8C=EA=B3=A0=EB=A6=AC=EB=A1=9C=20=EC=9D=B4?=
 =?UTF-8?q?=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/layout/sideBar/UserMode.tsx        |  5 +++--
 src/components/modals/AddCategoryModal.tsx        | 10 +++++-----
 src/components/modals/SuccessAddCategoryModal.tsx |  6 +++---
 3 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/components/layout/sideBar/UserMode.tsx b/src/components/layout/sideBar/UserMode.tsx
index 3c7446c..a183e3d 100644
--- a/src/components/layout/sideBar/UserMode.tsx
+++ b/src/components/layout/sideBar/UserMode.tsx
@@ -21,6 +21,7 @@ const UserMode = () => {
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
   const [categoryName, setCategoryName] = useState('');
   const [categoryId, setCategoryId] = useState<number | null>(null);
+  const [to, setTo] = useState('');
   const categories = useRecoilValue(categoryState);
   const [isSubCategoryModalOpen, setIsSubCategoryModalOpen] = useState(false);
   const grabedCategory = useRef<ISubFolderProps | undefined>(undefined);
@@ -105,7 +106,7 @@ const UserMode = () => {
           setCategoryName={setCategoryName}
           setIsSuccessAddCategoryModalOpen={setIsSuccessAddCategoryModalOpen}
           topCategoryId={topId}
-          setCategoryId={setCategoryId}
+          setTo={setTo}
         />
       )}
       {isDeleteModalOpen && (
@@ -119,7 +120,7 @@ const UserMode = () => {
           categoryName={categoryName}
           setCategoryName={setCategoryName}
           setIsSuccessAddCategoryModalOpen={setIsSuccessAddCategoryModalOpen}
-          categoryId={categoryId}
+          to={to}
         />
       )}
     </>
diff --git a/src/components/modals/AddCategoryModal.tsx b/src/components/modals/AddCategoryModal.tsx
index 3efb0fa..9883254 100644
--- a/src/components/modals/AddCategoryModal.tsx
+++ b/src/components/modals/AddCategoryModal.tsx
@@ -19,7 +19,7 @@ interface IAddTopCategoryModalProps extends ICommonModalProps {
   isTopCategoryModalOpen: boolean;
   setIsSubCategoryModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
   topCategoryId: number;
-  setCategoryId: React.Dispatch<React.SetStateAction<number | null>>;
+  setTo: React.Dispatch<React.SetStateAction<string>>;
 }
 
 const AddCategoryModal = ({
@@ -29,7 +29,7 @@ const AddCategoryModal = ({
   setCategoryName,
   setIsSuccessAddCategoryModalOpen,
   topCategoryId,
-  setCategoryId,
+  setTo,
 }: IAddTopCategoryModalProps) => {
   const setIsTopCategoryModalOpen = useSetRecoilState(topCategoryModalState);
   const { updateCategories } = useUpdateCategories();
@@ -58,10 +58,10 @@ const AddCategoryModal = ({
       : await postSubCategroy(categoryName, topCategoryId);
     if (response.isSuccess) {
       updateCategories();
-      setCategoryId(
+      setTo(
         isTopCategoryModalOpen
-          ? response.result.categoryId
-          : response.result.topCategoryId,
+          ? `${response.result.categoryId}`
+          : `${response.result.topCategoryId}/${response.result.categoryId}`,
       );
       setIsSuccessAddCategoryModalOpen(true);
     }
diff --git a/src/components/modals/SuccessAddCategoryModal.tsx b/src/components/modals/SuccessAddCategoryModal.tsx
index b3d12c2..ac746f4 100644
--- a/src/components/modals/SuccessAddCategoryModal.tsx
+++ b/src/components/modals/SuccessAddCategoryModal.tsx
@@ -10,14 +10,14 @@ import { ICommonModalProps } from 'types/modal';
 import FileImage from '@/assets/file.png';
 
 interface ISuccessAddCategory extends ICommonModalProps {
-  categoryId: number | null;
+  to: string;
 }
 
 const SuccessAddCategoryModal = ({
   categoryName,
   setCategoryName,
   setIsSuccessAddCategoryModalOpen,
-  categoryId,
+  to,
 }: ISuccessAddCategory) => {
   const onCloseModal = () => {
     setIsSuccessAddCategoryModalOpen(false);
@@ -40,7 +40,7 @@ const SuccessAddCategoryModal = ({
           생성 완료!
         </SuccessAddCategoryStyles.Title>
         <SuccessAddCategoryStyles.GoToCategoryButton
-          to={`/category/${categoryId}`}
+          to={`/category/${to}`}
           onClick={onCloseModal}
         >
           보러가기