feature-067: 홈 화면에서 인사이트 추천 데이터 가져오는 API 연동

teamViNO · Feb 14, 2024 · 15f47d7 · 15f47d7
1 parent 03aa543
commit 15f47d7
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 18 deletions.
diff --git a/src/apis/videos.ts b/src/apis/videos.ts
@@ -51,3 +51,10 @@ export const createVideoSummaryAPI = (videoId: number, content: string[]) => {
 export const deleteVideoSummaryAPI = (summaryId: number) => {
   return axios.delete<APIBaseResponse>(PREFIX + `/${summaryId}/deleteSummary`);
 };
+
+export const getDummyVideos = async (): Promise<
+  APIResponse<Record<'videos', IVideoProps[]>>
+> => {
+  const response = await axiosInstance.get('/videos/dummyVideos/unRead');
+  return response.data;
+};
diff --git a/src/components/Home/InsightVideos.tsx b/src/components/Home/InsightVideos.tsx
@@ -8,14 +8,15 @@ import successImg from '@/assets/success.png';
 interface InsightVideosProps {
   username: string;
   popularHashtags: string[];
+  dummyVideos: IVideoProps[];
 }
 
 const InsightVideos: React.FC<InsightVideosProps> = ({
   username,
   popularHashtags,
+  dummyVideos,
 }) => {
   const formattedHashtags = popularHashtags.map((tag) => '#' + tag);
-  const [categoryItems] = useState<IVideoProps[]>([]);
   const [checkedItems, setCheckedItems] = useState<number[]>([]);
   const [showEndMessage, setShowEndMessage] = useState(false);
 
@@ -31,15 +32,16 @@ const InsightVideos: React.FC<InsightVideosProps> = ({
       entries.forEach((entry) => {
         if (entry.isIntersecting) {
           setShowEndMessage(true);
-          setTimeout(() => {
+          const timer: NodeJS.Timeout = setTimeout(() => {
             setShowEndMessage(false);
+            clearTimeout(timer);
           }, 2000);
         }
       });
     };
 
     const observer = new IntersectionObserver(handleIntersect, {
-      threshold: 1.0, 
+      threshold: 1.0,
     });
 
     const endBoxElement = endBox.current;
@@ -66,23 +68,32 @@ const InsightVideos: React.FC<InsightVideosProps> = ({
         </div>
         <div className="insight-videos">
           <CardContainer>
-            {categoryItems.map((video) => (
+            {dummyVideos.map((video) => (
               <Card
                 mode="recommend"
                 video={video}
                 checkedVideos={checkedItems}
                 setCheckedVideos={setCheckedItems}
                 onFileClick={onFileClick}
-                key={video.category_id}
+                key={video.video_id}
               />
             ))}
           </CardContainer>
         </div>
-        <div ref={endBox} className='end-message'>
-          <div className='end-wrapper' style={{ display: showEndMessage ? 'block' : 'none' }}>
-            <img src={successImg} alt='successImg' width={87.11} height={87.11}/>
-            <h4 className='end-text'>
-              마지막 영상이에요!<br />더 많은 영상 변환하러 가볼까요?
+        <div ref={endBox} className="end-message">
+          <div
+            className="end-wrapper"
+            style={{ display: showEndMessage ? 'block' : 'none' }}
+          >
+            <img
+              src={successImg}
+              alt="successImg"
+              width={87.11}
+              height={87.11}
+            />
+            <h4 className="end-text">
+              마지막 영상이에요!
+              <br />더 많은 영상 변환하러 가볼까요?
             </h4>
           </div>
         </div>

diff --git a/src/components/Home/RecentVideos.tsx b/src/components/Home/RecentVideos.tsx
@@ -46,7 +46,7 @@ const RecentVideos = ({ videos }: IRecentVideosProp) => {
         {videos.length > 0 && (
           <CardContainer>
             {videos.slice(0, 3).map((video) => (
-              <Card key={video.category_id} mode="default" video={video} />
+              <Card key={video.video_id} mode="default" video={video} />
             ))}
           </CardContainer>
         )}

diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
@@ -6,7 +6,7 @@ import InsightVideos from '@/components/Home/InsightVideos';
 import { useRecoilValue } from 'recoil';
 import { recommendationModalState } from '@/stores/modal';
 import RecommendationModal from '@/components/modals/RecommendationModal';
-import { getRecentVideos } from '@/apis/videos';
+import { getDummyVideos, getRecentVideos } from '@/apis/videos';
 import { userTokenState } from '@/stores/user';
 import { IVideoProps } from 'types/videos';
 
@@ -20,28 +20,31 @@ export interface Video {
 
 const HomePage: React.FC = () => {
   const userToken = useRecoilValue(userTokenState);
-  const [videos, setVideos] = useState<IVideoProps[]>([]);
+  const [recentVideos, setRecentVideos] = useState<IVideoProps[]>([]);
+  const [dummyVideos, setDummyVideos] = useState<IVideoProps[]>([]);
   const handleSearch = (value: string) => {
     console.log(value);
   };
 
   const isModalOpen = useRecoilValue(recommendationModalState);
 
   useEffect(() => {
-    userToken &&
-      getRecentVideos()
-        .then((res) => setVideos(res.result.videos))
-        .catch((err) => console.log(err));
+    Promise.all([getRecentVideos(), getDummyVideos()]).then((res) => {
+      const [recentVideosResponse, dummyVideosResponse] = res;
+      setRecentVideos(recentVideosResponse.result.videos);
+      setDummyVideos(dummyVideosResponse.result.videos);
+    });
   }, [userToken]);
 
   return (
     <HomePageContainer>
       <SearchYoutube onSearch={handleSearch} />
       {isModalOpen && <RecommendationModal />}
-      <RecentVideos videos={videos} />
+      <RecentVideos videos={recentVideos} />
       <InsightVideos
         username="여울"
         popularHashtags={['디자인', '진로', '브랜딩']}
+        dummyVideos={dummyVideos}
       />
     </HomePageContainer>
   );