Merge pull request #94 from teamViNO/feature-073

feature-073: 수정사항 반영
teamViNO · Feb 17, 2024 · 049cd02 · 049cd02
2 parents e8160bc + 2f30254
commit 049cd02
Show file tree

Hide file tree

Showing 15 changed files with 154 additions and 140 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -41,17 +41,12 @@ import useUpdateCategories from '@/hooks/useUpdateCategories';
 
 // Store
 import { userTokenState } from '@/stores/user';
-import { getTempToken } from './apis/videos';
 
 const App = () => {
   const userToken = useRecoilValue(userTokenState);
   const { updateCategories } = useUpdateCategories();
 
   useEffect(() => {
-    (async () => {
-      const response = await getTempToken();
-      document.cookie = `tempToken=${response.result.tempToken}`;
-    })();
     userToken && updateCategories();
   }, [updateCategories, userToken]);
   return (

diff --git a/src/apis/videos.ts b/src/apis/videos.ts
@@ -1,6 +1,5 @@
 import { APIBaseResponse, APIResponse } from '@/models/config/axios';
 import {
-  ITempTokenResponse,
   IVideo,
   UpdateVideoCategoryRequest,
   UpdateVideoRequest,
@@ -93,13 +92,6 @@ export const createDummyVideoToMine = async (
   return response.data;
 };
 
-export const getTempToken = async (): Promise<
-  APIResponse<ITempTokenResponse>
-> => {
-  const response = await axiosInstance.get('/');
-  return response.data;
-};
-
 export const getVideoModeling = async (url: string) => {
   const response = await axiosInstance.get(`/video/?v=${url}`);
   console.log(response);

diff --git a/src/components/Home/InsightVideos.tsx b/src/components/Home/InsightVideos.tsx
@@ -4,32 +4,27 @@ import Card from '../category/Card';
 import { IVideoProps } from 'types/videos';
 import { CardContainer } from '@/styles/category/Card.style';
 import successImg from '@/assets/success.png';
-import { createDummyVideoToMine, getUnReadDummyVideos } from '@/apis/videos';
 
 interface InsightVideosProps {
   userToken: string | null;
   dummyVideos: IVideoProps[];
-  setDummyVideos: React.Dispatch<React.SetStateAction<IVideoProps[]>>;
+  onFileClick: (
+    videoId: number,
+    categoryId: number,
+    categoryName?: string,
+  ) => void;
 }
 
 const InsightVideos: React.FC<InsightVideosProps> = ({
   userToken,
   dummyVideos,
-  setDummyVideos,
+  onFileClick,
 }) => {
   const [checkedItems, setCheckedItems] = useState<number[]>([]);
   const [showEndMessage, setShowEndMessage] = useState(false);
 
   const endBox = useRef<HTMLDivElement>(null);
 
-  const onFileClick = async (videoId: number, categoryId: number) => {
-    const res = await createDummyVideoToMine(videoId, categoryId);
-    if (res.isSuccess)
-      await getUnReadDummyVideos().then((res) =>
-        setDummyVideos(res.result.videos),
-      );
-  };
-
   useEffect(() => {
     const handleIntersect = (entries: IntersectionObserverEntry[]) => {
       entries.forEach((entry) => {
@@ -71,7 +66,7 @@ const InsightVideos: React.FC<InsightVideosProps> = ({
         <CardContainer>
           {dummyVideos.map((video) => (
             <Card
-              mode="recommend"
+              mode={userToken ? 'recommend' : 'default'}
               video={video}
               checkedVideos={checkedItems}
               setCheckedVideos={setCheckedItems}

diff --git a/src/components/category/Card.tsx b/src/components/category/Card.tsx
@@ -14,7 +14,11 @@ interface ICardProps {
   video: IVideoProps;
   checkedVideos?: number[];
   setCheckedVideos?: (value: number[]) => void;
-  onFileClick?: (videoId: number, categoryId: number) => void;
+  onFileClick?: (
+    videoId: number,
+    categoryId: number,
+    categoryName?: string,
+  ) => void;
 }
 
 const Card: React.FC<ICardProps> = ({
@@ -30,9 +34,9 @@ const Card: React.FC<ICardProps> = ({
     category.length ? category[0].categoryId : -1,
   );
 
-  const onFileClickWithProps = (categoryId: number) => {
+  const onFileClickWithProps = (categoryId: number, categoryName?: string) => {
     setSelectedCategoryId(categoryId);
-    onFileClick && onFileClick(video.video_id, categoryId);
+    onFileClick && onFileClick(video.video_id, categoryId, categoryName);
   };
 
   const handleCheckBox = (videoId: number) => {

diff --git a/src/components/category/EditCategoryName.tsx b/src/components/category/EditCategoryName.tsx
@@ -0,0 +1,62 @@
+import useOutsideClick from '@/hooks/useOutsideClick';
+import * as EditCategoryNameStyles from '@/styles/category/EditCategoryName.style';
+import handleEdit from '@/utils/handleEdit';
+import { useState } from 'react';
+
+interface IEditCategoryNameProps {
+  mode: 'top' | 'sub';
+  beforeEdit: string;
+  categoryId: number;
+  edit: string;
+  setEdit: React.Dispatch<React.SetStateAction<string>>;
+  setIsEditing: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+const EditCategoryName = ({
+  mode,
+  categoryId,
+  beforeEdit,
+  edit,
+  setEdit,
+  setIsEditing,
+}: IEditCategoryNameProps) => {
+  const { editText, finishEdit } = handleEdit();
+  const [nameRegex, setNameRegex] = useState(true);
+
+  const handleFinish = () =>
+    finishEdit(
+      edit,
+      setEdit,
+      beforeEdit,
+      setIsEditing,
+      nameRegex,
+      setNameRegex,
+      categoryId,
+    );
+
+  const onKeydown = (e: React.KeyboardEvent) => {
+    if (e.code === 'Enter') handleFinish();
+  };
+
+  const [editNameRef] = useOutsideClick<HTMLDivElement>(handleFinish);
+
+  const handleInput = (e: React.ChangeEvent<HTMLInputElement>) =>
+    editText(e, setEdit, setNameRegex);
+  return (
+    <EditCategoryNameStyles.EditNameInputWrap
+      ref={editNameRef}
+      className={`${(!nameRegex || !edit.length) && 'warning'} ${
+        mode === 'sub' && 'sub-category'
+      }`}
+    >
+      <EditCategoryNameStyles.EditNameInput
+        value={edit}
+        onChange={handleInput}
+        onKeyDown={onKeydown}
+        className={`${mode === 'sub' && 'sub-category'}`}
+      />
+    </EditCategoryNameStyles.EditNameInputWrap>
+  );
+};
+
+export default EditCategoryName;
diff --git a/src/components/layout/sideBar/SubCategory.tsx b/src/components/layout/sideBar/SubCategory.tsx
@@ -3,9 +3,9 @@ import useOutsideClick from '@/hooks/useOutsideClick';
 import { useState } from 'react';
 import * as SubCategoryStyles from '@/styles/layout/sideBar/SubCategory.style';
 import Option from './Option';
-import handleEdit from '@/utils/handleEdit';
 import handleDrag from '@/utils/handleDrag';
 import { ISubFolderProps } from 'types/category';
+import EditCategoryName from '@/components/category/EditCategoryName';
 
 interface ISubCategoryProps {
   topId: number;
@@ -33,19 +33,6 @@ const SubCategory = ({
   const [isEditing, setIsEditing] = useState(false);
   const [edit, setEdit] = useState(name);
   const [beforeEdit, setBeforeEdit] = useState(edit);
-  const { editText, finishEdit } = handleEdit();
-  const [editNameRef] = useOutsideClick<HTMLDivElement>(() =>
-    finishEdit(
-      edit,
-      setEdit,
-      beforeEdit,
-      setIsEditing,
-      nameRegex,
-      setNameRegex,
-      categoryId,
-    ),
-  );
-  const [nameRegex, setNameRegex] = useState(true);
 
   const [subFolderOptionModalRef] = useOutsideClick<HTMLDivElement>(() =>
     setSubFolderOptionModalOpen(false),
@@ -76,9 +63,6 @@ const SubCategory = ({
     setSubFolderOptionModalOpen(true);
   };
 
-  const handleInput = (e: React.ChangeEvent<HTMLInputElement>) =>
-    editText(e, setEdit, setNameRegex);
-
   const handleDragStart = () =>
     (grabedCategory.current = {
       categoryId: categoryId,
@@ -96,15 +80,14 @@ const SubCategory = ({
       onDragEnd={putCategoryFolder}
     >
       {isEditing ? (
-        <SubCategoryStyles.EditNameInputWrap
-          ref={editNameRef}
-          className={`${(!nameRegex || !edit.length) && 'warning'}`}
-        >
-          <SubCategoryStyles.EditNameInput
-            value={edit}
-            onChange={handleInput}
-          />
-        </SubCategoryStyles.EditNameInputWrap>
+        <EditCategoryName
+          mode="sub"
+          categoryId={categoryId}
+          beforeEdit={beforeEdit}
+          edit={edit}
+          setEdit={setEdit}
+          setIsEditing={setIsEditing}
+        />
       ) : (
         <SubCategoryStyles.SubFolderWrap>
           <div style={{ display: 'flex' }}>

diff --git a/src/components/layout/sideBar/TopCategory.tsx b/src/components/layout/sideBar/TopCategory.tsx
@@ -6,9 +6,9 @@ import React, { useState } from 'react';
 import useOutsideClick from '@/hooks/useOutsideClick';
 import SubCategory from './SubCategory';
 import Option from './Option';
-import handleEdit from '@/utils/handleEdit';
 import handleDrag from '@/utils/handleDrag';
 import { ISubFolderProps } from 'types/category';
+import EditCategoryName from '@/components/category/EditCategoryName';
 
 interface ITopCategoryProps {
   topId: number;
@@ -47,23 +47,8 @@ const TopCategory = ({
   const [isEditing, setIsEditing] = useState(false);
   const [edit, setEdit] = useState(name);
   const [beforeEdit, setBeforeEdit] = useState(edit);
-  const { editText, finishEdit } = handleEdit();
-
-  const [nameRegex, setNameRegex] = useState(true);
   const options = ['추가', '수정', '삭제', '이동'];
 
-  const [editNameRef] = useOutsideClick<HTMLDivElement>(() =>
-    finishEdit(
-      edit,
-      setEdit,
-      beforeEdit,
-      setIsEditing,
-      nameRegex,
-      setNameRegex,
-      categoryId,
-    ),
-  );
-
   const handleOptionClick = (e: React.MouseEvent, option: string) => {
     e.stopPropagation();
     if (option === '추가') {
@@ -84,8 +69,6 @@ const TopCategory = ({
     setFolderOptionModalOpen(true);
   };
 
-  const handleInput = (e: React.ChangeEvent<HTMLInputElement>) =>
-    editText(e, setEdit, setNameRegex);
   const handleDragStart = () =>
     (grabedCategory.current = {
       categoryId: categoryId,
@@ -124,16 +107,14 @@ const TopCategory = ({
         selected={topId === categoryId && !subId}
       >
         {isEditing ? (
-          <TopCategoryStyles.EditNameInputWrap
-            ref={editNameRef}
-            className={`${(!nameRegex || !edit.length) && 'warning'}`}
-          >
-            <OpenFileSvg width={28} height={28} />
-            <TopCategoryStyles.EditNameInput
-              value={edit}
-              onChange={handleInput}
-            />
-          </TopCategoryStyles.EditNameInputWrap>
+          <EditCategoryName
+            mode="top"
+            categoryId={categoryId}
+            beforeEdit={beforeEdit}
+            edit={edit}
+            setEdit={setEdit}
+            setIsEditing={setIsEditing}
+          />
         ) : (
           <>
             <TopCategoryStyles.FolderButton to={`/category/${categoryId}`}>

diff --git a/src/models/video.ts b/src/models/video.ts
@@ -52,7 +52,3 @@ export interface UpdateVideoRequest {
 export interface UpdateVideoCategoryRequest {
   video_id: (string | number)[];
 }
-
-export interface ITempTokenResponse {
-  tempToken: string;
-}
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
@@ -3,16 +3,18 @@ import SearchYoutube from '@/components/Home/SearchYoutube';
 import { HomePageContainer } from '@/styles/HomepageStyle';
 import RecentVideos from '@/components/Home/RecentVideos';
 import InsightVideos from '@/components/Home/InsightVideos';
-import { useRecoilValue } from 'recoil';
+import { useRecoilState, useRecoilValue } from 'recoil';
 import { recommendationModalState } from '@/stores/modal';
 import RecommendationModal from '@/components/modals/RecommendationModal';
 import {
   getUnReadDummyVideos,
   getRecentVideos,
   getAllDummyVideos,
+  createDummyVideoToMine,
 } from '@/apis/videos';
 import { userTokenState } from '@/stores/user';
 import { IVideoProps } from 'types/videos';
+import { toastListState } from '@/stores/toast';
 
 export interface Video {
   id: string;
@@ -26,9 +28,29 @@ const HomePage: React.FC = () => {
   const userToken = useRecoilValue(userTokenState);
   const [recentVideos, setRecentVideos] = useState<IVideoProps[]>([]);
   const [dummyVideos, setDummyVideos] = useState<IVideoProps[]>([]);
+  const [toastList, setToastList] = useRecoilState(toastListState);
+
+  const createToast = (content: string) => {
+    setToastList([...toastList, { id: Date.now(), content }]);
+  };
   const handleSearch = (value: string) => {
     console.log(value);
   };
+
+  const onFileClick = async (
+    videoId: number,
+    categoryId: number,
+    categoryName?: string,
+  ) => {
+    const res = await createDummyVideoToMine(videoId, categoryId);
+    if (res.isSuccess) {
+      createToast(`[${categoryName}] 폴더에 저장되었어요`);
+
+      await getUnReadDummyVideos().then((res) =>
+        setDummyVideos(res.result.videos.slice(0, 9)),
+      );
+    }
+  };
   const searchRef = useRef(null);
 
   const isModalOpen = useRecoilValue(recommendationModalState);
@@ -38,7 +60,7 @@ const HomePage: React.FC = () => {
       Promise.all([getRecentVideos(), getUnReadDummyVideos()]).then((res) => {
         const [recentVideosResponse, dummyVideosResponse] = res;
         setRecentVideos(recentVideosResponse.result.videos);
-        setDummyVideos(dummyVideosResponse.result.videos);
+        setDummyVideos(dummyVideosResponse.result.videos.slice(0, 9));
       });
 
     !userToken &&
@@ -58,7 +80,7 @@ const HomePage: React.FC = () => {
           <InsightVideos
             userToken={userToken}
             dummyVideos={dummyVideos}
-            setDummyVideos={setDummyVideos}
+            onFileClick={onFileClick}
           />
         </>
       )}
@@ -67,7 +89,7 @@ const HomePage: React.FC = () => {
           <InsightVideos
             userToken={userToken}
             dummyVideos={dummyVideos}
-            setDummyVideos={setDummyVideos}
+            onFileClick={onFileClick}
           />
           <RecentVideos searchRef={searchRef} videos={recentVideos} />
         </>