Merge branch 'dev' into feature-057

teamViNO · Feb 15, 2024 · bafb379 · bafb379
2 parents 735efaa + c96a7aa
commit bafb379
Show file tree

Hide file tree

Showing 14 changed files with 111 additions and 80 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -62,15 +62,18 @@ const App = () => {
                 <Route path="/search" element={<SearchPage />} />
                 <Route path="/search/result" element={<SearchResult />} />
                 <Route path="/profile" element={<ProfilePage />} />
+                <Route path="/category/recent" element={<CategoryPage />} />
+                <Route
+                  path="/category/:top_folder"
+                  element={<CategoryPage />}
+                />
+                <Route
+                  path="/category/:top_folder/:sub_folder"
+                  element={<CategoryPage />}
+                />
               </>
             )}
 
-            <Route path="/category/recent" element={<CategoryPage />} />
-            <Route path="/category/:top_folder" element={<CategoryPage />} />
-            <Route
-              path="/category/:top_folder/:sub_folder"
-              element={<CategoryPage />}
-            />
             <Route path="/summary/:videoId" element={<SummaryPage />} />
             <Route path="/" element={<HomePage />} />
           </Route>

diff --git a/src/apis/category.ts b/src/apis/category.ts
@@ -75,11 +75,11 @@ export const updateCategoryName = async (name: string, categoryId: number) => {
 
 // 비디오의 카테고리 위치 수정 API
 export const putVideoToOtherCategory = async (
-  videoId: number,
+  video_id: number[],
   categoryId: number,
 ) => {
-  const response = await axiosInstance.patch(
-    `/videos/${videoId}/${categoryId}/update`,
-  );
+  const response = await axiosInstance.patch(`/videos/${categoryId}/update`, {
+    video_id,
+  });
   return response.data;
 };
diff --git a/src/apis/videos.ts b/src/apis/videos.ts
@@ -67,13 +67,20 @@ export const deleteVideoSummaryAPI = (summaryId: number) => {
   return axios.delete<APIBaseResponse>(PREFIX + `/${summaryId}/deleteSummary`);
 };
 
-export const getDummyVideos = async (): Promise<
+export const getUnReadDummyVideos = async (): Promise<
   APIResponse<Record<'videos', IVideoProps[]>>
 > => {
   const response = await axiosInstance.get('/videos/dummyVideos/unRead');
   return response.data;
 };
 
+export const getAllDummyVideos = async (): Promise<
+  APIResponse<Record<'videos', IVideoProps[]>>
+> => {
+  const response = await axios.get('/videos/dummyVideos');
+  return response.data;
+};
+
 export const createDummyVideoToMine = async (
   videoId: number,
   categoryId: number,

diff --git a/src/components/Home/InsightVideos.tsx b/src/components/Home/InsightVideos.tsx
@@ -4,22 +4,19 @@ 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, getDummyVideos } from '@/apis/videos';
+import { createDummyVideoToMine, getUnReadDummyVideos } from '@/apis/videos';
 
 interface InsightVideosProps {
-  username: string;
-  popularHashtags: string[];
+  userToken: string | null;
   dummyVideos: IVideoProps[];
   setDummyVideos: React.Dispatch<React.SetStateAction<IVideoProps[]>>;
 }
 
 const InsightVideos: React.FC<InsightVideosProps> = ({
-  username,
-  popularHashtags,
+  userToken,
   dummyVideos,
   setDummyVideos,
 }) => {
-  const formattedHashtags = popularHashtags.map((tag) => '#' + tag);
   const [checkedItems, setCheckedItems] = useState<number[]>([]);
   const [showEndMessage, setShowEndMessage] = useState(false);
 
@@ -33,7 +30,9 @@ const InsightVideos: React.FC<InsightVideosProps> = ({
     e.stopPropagation();
     const res = await createDummyVideoToMine(videoId, categoryId);
     if (res.isSuccess)
-      await getDummyVideos().then((res) => setDummyVideos(res.result.videos));
+      await getUnReadDummyVideos().then((res) =>
+        setDummyVideos(res.result.videos),
+      );
   };
 
   useEffect(() => {
@@ -54,7 +53,7 @@ const InsightVideos: React.FC<InsightVideosProps> = ({
     });
 
     const endBoxElement = endBox.current;
-    if (endBoxElement) {
+    if (endBoxElement && userToken) {
       observer.observe(endBoxElement);
     }
 
@@ -63,32 +62,29 @@ const InsightVideos: React.FC<InsightVideosProps> = ({
         observer.unobserve(endBoxElement);
       }
     };
-  }, []);
+  }, [userToken]);
 
   return (
-    <InsightVideosContainer>
+    <InsightVideosContainer userToken={userToken}>
       <div className="insight-container">
         <div className="text-container">
           <h2 className="insight-title">이런 인사이트는 어때요?</h2>
           <h4 className="insight-subtitle">
-            {username}님이 많이 찾은 {formattedHashtags.join(', ')} 관련
-            콘텐츠에요!
+            최근 사용자들이 많이 찾은 콘텐츠들을 소개해드려요
           </h4>
         </div>
-        <div className="insight-videos">
-          <CardContainer>
-            {dummyVideos.map((video) => (
-              <Card
-                mode="recommend"
-                video={video}
-                checkedVideos={checkedItems}
-                setCheckedVideos={setCheckedItems}
-                onFileClick={onFileClick}
-                key={video.video_id}
-              />
-            ))}
-          </CardContainer>
-        </div>
+        <CardContainer>
+          {dummyVideos.map((video) => (
+            <Card
+              mode="recommend"
+              video={video}
+              checkedVideos={checkedItems}
+              setCheckedVideos={setCheckedItems}
+              onFileClick={onFileClick}
+              key={video.video_id}
+            />
+          ))}
+        </CardContainer>
         <div ref={endBox} className="end-message">
           <div
             className="end-wrapper"

diff --git a/src/components/Home/RecentVideos.tsx b/src/components/Home/RecentVideos.tsx
@@ -17,15 +17,13 @@ interface IRecentVideosProp {
 
 const RecentVideos = ({ videos }: IRecentVideosProp) => {
   return (
-    <RecentVideosContainer>
+    <RecentVideosContainer length={videos.length}>
       <div className="container">
         <div className="title-container">
           <VideosTitle>최근 읽은 영상</VideosTitle>
-          {videos.length >= 4 && (
-            <Link to="/videos/recent">
-              <div className="icon-wrapper">
-                <MoveIcon width={28} height={28} />
-              </div>
+          {videos.length >= 3 && (
+            <Link to="/category/recent" className="icon-wrapper">
+              <MoveIcon width={28} height={28} />
             </Link>
           )}
         </div>

diff --git a/src/components/category/VideoSelectMenu.tsx b/src/components/category/VideoSelectMenu.tsx
@@ -11,7 +11,7 @@ interface IVideoSelectMenuProps {
   setCheckedVideos: React.Dispatch<React.SetStateAction<number[]>>;
   handleDeleteVideos: () => void;
   allCheckBtnHandler: () => void;
-  onFileClick?: (videoId: number, categoryId: number) => void;
+  onFileClick?: (categoryId: number) => void;
 }
 
 const VideoSelectMenu = ({
@@ -23,7 +23,7 @@ const VideoSelectMenu = ({
   onFileClick,
 }: IVideoSelectMenuProps) => {
   const onFileClickWithProps = (categoryId: number) =>
-    onFileClick && onFileClick(checkedVideos[0], categoryId);
+    onFileClick && onFileClick(categoryId);
 
   return (
     <CategoryPageStyles.SelectModeWrap>

diff --git a/src/components/layout/sideBar/SubCategory.tsx b/src/components/layout/sideBar/SubCategory.tsx
@@ -59,6 +59,11 @@ const SubCategory = ({
       setIsEditing(true);
       setBeforeEdit(edit);
     } else if (option === '삭제') {
+      if (name === '기타') {
+        alert(`'기타' 폴더는 삭제할 수 없습니다.`);
+        setSubFolderOptionModalOpen(false);
+        return;
+      }
       setCategoryId(categoryId);
       setIsDeleteModalOpen(true);
     }

diff --git a/src/pages/CategoryPage.tsx b/src/pages/CategoryPage.tsx
@@ -63,9 +63,8 @@ const CategoryPage = () => {
       setCheckedVideos(videos.map((video) => video.video_id));
     }
   };
-
-  const onFileClick = async (videoId: number, categoryId: number) => {
-    const res = await putVideoToOtherCategory(videoId, categoryId);
+  const onFileClick = async (categoryId: number) => {
+    const res = await putVideoToOtherCategory(checkedVideos, categoryId);
     if (res.isSuccess) {
       handleVideo(
         categories,

diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
@@ -6,7 +6,11 @@ import InsightVideos from '@/components/Home/InsightVideos';
 import { useRecoilValue } from 'recoil';
 import { recommendationModalState } from '@/stores/modal';
 import RecommendationModal from '@/components/modals/RecommendationModal';
-import { getDummyVideos, getRecentVideos } from '@/apis/videos';
+import {
+  getUnReadDummyVideos,
+  getRecentVideos,
+  getAllDummyVideos,
+} from '@/apis/videos';
 import { userTokenState } from '@/stores/user';
 import { IVideoProps } from 'types/videos';
 
@@ -29,24 +33,44 @@ const HomePage: React.FC = () => {
   const isModalOpen = useRecoilValue(recommendationModalState);
 
   useEffect(() => {
-    Promise.all([getRecentVideos(), getDummyVideos()]).then((res) => {
-      const [recentVideosResponse, dummyVideosResponse] = res;
-      setRecentVideos(recentVideosResponse.result.videos);
-      setDummyVideos(dummyVideosResponse.result.videos);
-    });
+    userToken &&
+      Promise.all([getRecentVideos(), getUnReadDummyVideos()]).then((res) => {
+        const [recentVideosResponse, dummyVideosResponse] = res;
+        setRecentVideos(recentVideosResponse.result.videos);
+        setDummyVideos(dummyVideosResponse.result.videos);
+      });
+
+    !userToken &&
+      getAllDummyVideos().then((res) => {
+        setRecentVideos([]);
+        setDummyVideos(res.result.videos);
+      });
   }, [userToken]);
 
   return (
     <HomePageContainer>
       <SearchYoutube onSearch={handleSearch} />
       {isModalOpen && <RecommendationModal />}
-      <RecentVideos videos={recentVideos} />
-      <InsightVideos
-        username="여울"
-        popularHashtags={['디자인', '진로', '브랜딩']}
-        dummyVideos={dummyVideos}
-        setDummyVideos={setDummyVideos}
-      />
+      {userToken && (
+        <>
+          <RecentVideos videos={recentVideos} />
+          <InsightVideos
+            userToken={userToken}
+            dummyVideos={dummyVideos}
+            setDummyVideos={setDummyVideos}
+          />
+        </>
+      )}
+      {!userToken && (
+        <>
+          <InsightVideos
+            userToken={userToken}
+            dummyVideos={dummyVideos}
+            setDummyVideos={setDummyVideos}
+          />
+          <RecentVideos videos={recentVideos} />
+        </>
+      )}
     </HomePageContainer>
   );
 };

diff --git a/src/styles/HomepageStyle.ts b/src/styles/HomepageStyle.ts
@@ -128,15 +128,15 @@ export const SearchButton = styled.button`
   }
 `;
 
-export const RecentVideosContainer = styled.div`
-  margin-top: 60px;
-  margin-bottom: 100px;
+export const RecentVideosContainer = styled.div<{ length: number }>`
   background-color: ${theme.color.white};
   width: 100%;
   display: flex;
   justify-content: center;
-  border-top-left-radius: 50px;
-  border-top-right-radius: 50px;
+  border-radius: 50px 50px 0px 0px;
+  position: relative;
+  bottom: 50px;
+  padding: ${(props) => (props.length ? '100px' : '0')} 0 110px;
 
   .container {
     width: 910px;
@@ -232,12 +232,15 @@ export const VideoButton = styled.button`
   }
 `;
 
-export const InsightVideosContainer = styled.div`
+export const InsightVideosContainer = styled.div<{ userToken: string | null }>`
   display: flex;
   justify-content: center;
   background-color: ${theme.color.white};
   width: 100%;
-  padding: 100px 265px;
+  border-radius: 50px 50px 0 0;
+  padding: ${(props) => (props.userToken ? '0' : '100px')} 265px 110px;
+  position: relative;
+  bottom: 50px;
 
   .insight-container {
     display: flex;
@@ -264,20 +267,17 @@ export const InsightVideosContainer = styled.div`
     color: ${theme.color.gray400};
   }
 
-  .insight-videos {
-    margin-bottom: 40px;
-  }
-
   .end-message {
-    margin-top: 120px;
     display: flex;
     justify-content: center;
     text-align: center;
   }
 
   .end-wrapper {
+    transition: all 1s;
     width: 255px;
     height: 171.11px;
+    margin-top: 120px;
   }
 
   .end-text {

diff --git a/src/styles/category/Card.style.ts b/src/styles/category/Card.style.ts
@@ -62,6 +62,7 @@ export const Wrap = styled.div<{ mode: string }>`
   transition: all 0.5s;
   position: relative;
   height: 400px;
+  background-color: ${theme.color.white};
   &:hover {
     ${CheckBoxWrap} {
       display: flex;

diff --git a/src/styles/category/index.style.ts b/src/styles/category/index.style.ts
@@ -14,7 +14,7 @@ const CommonIconBackground = styled.div`
 `;
 
 export const Container = styled.div`
-  padding: 60px 60px 0px 120px;
+  padding: 60px 60px 40px 120px;
   width: 100%;
 `;
 
@@ -105,7 +105,7 @@ export const DropdownWrap = styled.div`
   margin: 0;
   display: flex;
   flex-direction: column;
-  z-index: 10;
+  z-index: 1;
   & div.select-box {
     padding: 8px 16px;
     width: 202px;

diff --git a/src/styles/layout/footer/index.ts b/src/styles/layout/footer/index.ts
@@ -7,7 +7,7 @@ export const Container = styled.footer<{ width: string }>`
   ${theme.typography.Body1};
   position: relative;
   width: ${(props) => `calc(${props.width})`};
-  z-index: -1;
+  z-index: 0;
 `;
 
 export const SendEmailWrap = styled.div`

diff --git a/src/styles/layout/sideBar/index.ts b/src/styles/layout/sideBar/index.ts
@@ -4,11 +4,9 @@ import styled from 'styled-components';
 export const Container = styled.div`
   display: flex;
   flex-direction: column;
-  margin: 60px 0px 0px 60px;
-  padding-right: 20px;
-  width: 288px;
+  padding: 60px 20px 0px 60px;
   box-shadow: 4px 0px 10px rgba(0, 0, 0, 0.05);
-  z-index: 0;
+  z-index: 1;
 `;
 
 export const StickySection = styled.div`