Merge branch 'dev' into feature-006

teamViNO · Feb 20, 2024 · 4e5cf7d · 4e5cf7d
2 parents 582a381 + e99c493
commit 4e5cf7d
Show file tree

Hide file tree

Showing 58 changed files with 1,641 additions and 936 deletions.
diff --git a/index.html b/index.html
@@ -2,7 +2,7 @@
 <html lang="ko">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vi.No</title>
     <!-- Google Fonts -->

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/src/apis/user.ts b/src/apis/user.ts
@@ -15,7 +15,7 @@ import {
   FindEmailRequest,
   FindPasswordResponse,
   FindPasswordRequest,
-  CreateVideoAlarmRequest
+  CreateVideoAlarmRequest,
 } from '@/models/user';
 import {
   AlarmResponse,
@@ -93,11 +93,8 @@ export const createVideoAlarmAPI = (
     PREFIX + `/videoAlarm/${videoId}/${status}`,
     data,
   );
-}
+};
 
-export const findPasswordAPI = (data : FindPasswordRequest) => {
-  return axios.post<FindPasswordResponse>(
-    PREFIX + '/findPassword',
-    data
-  );
-}
+export const findPasswordAPI = (data: FindPasswordRequest) => {
+  return axios.post<FindPasswordResponse>(PREFIX + '/findPassword', data);
+};
diff --git a/src/apis/videos.ts b/src/apis/videos.ts
@@ -1,5 +1,7 @@
 import { APIBaseResponse, APIResponse } from '@/models/config/axios';
+import { ModelingFinalData } from '@/models/modeling';
 import {
+  CreateVideoResponse,
   IVideo,
   UpdateVideoCategoryRequest,
   UpdateVideoRequest,
@@ -13,8 +15,11 @@ import { IVideoProps } from 'types/videos';
 
 const PREFIX = '/videos';
 
-export const createVideoAPI = (data: IVideo) => {
-  return axios.post<APIResponse<IVideo>>(PREFIX + `/new-video`, data);
+export const createVideoAPI = (data: ModelingFinalData) => {
+  return axios.post<APIResponse<CreateVideoResponse>>(
+    PREFIX + `/new-video`,
+    data,
+  );
 };
 
 export const getVideoAPI = (
@@ -24,6 +29,10 @@ export const getVideoAPI = (
   return axios.get<APIResponse<IVideo>>(PREFIX + `/${videoId}/${versionId}`);
 };
 
+export const getDummyVideoAPI = (videoId: string | number) => {
+  return axios.get<APIResponse<IVideo>>(PREFIX + `/dummyVideos/${videoId}/get`);
+};
+
 export const deleteVideos = async (videos: number[] | undefined) => {
   const response = await axiosInstance.delete('/videos/selectDelete', {
     data: { videos },
@@ -76,6 +85,17 @@ export const getUnReadDummyVideosAPI = () => {
   return axios.get<APIResponse<VideoResponse>>('/videos/dummyVideos/unRead');
 };
 
+export const getAllDummyVideosAPI = () => {
+  return axios.get<APIResponse<VideoResponse>>('/videos/dummyVideos');
+};
+
+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[]>>
 > => {

diff --git a/src/assets/icons/dark-logo.svg b/src/assets/icons/dark-logo.svg
diff --git a/src/assets/icons/light-logo.svg b/src/assets/icons/light-logo.svg
diff --git a/src/assets/spinner.gif b/src/assets/spinner.gif
diff --git a/src/components/Home/InsightVideos.tsx b/src/components/Home/InsightVideos.tsx
@@ -55,7 +55,7 @@ const InsightVideos: React.FC<InsightVideosProps> = ({
   }, [userToken]);
 
   return (
-    <InsightVideosContainer user={userToken}>
+    <InsightVideosContainer>
       <div className="insight-container">
         <div className="text-container">
           <h2 className="insight-title">이런 인사이트는 어때요?</h2>
@@ -66,7 +66,7 @@ const InsightVideos: React.FC<InsightVideosProps> = ({
         <CardContainer>
           {dummyVideos.map((video) => (
             <Card
-              mode={userToken ? 'recommend' : 'default'}
+              mode="recommend"
               video={video}
               checkedVideos={checkedItems}
               setCheckedVideos={setCheckedItems}

diff --git a/src/components/Home/RecentVideos.tsx b/src/components/Home/RecentVideos.tsx
@@ -18,7 +18,7 @@ interface IRecentVideosProp {
 
 const RecentVideos = ({ videos, searchRef }: IRecentVideosProp) => {
   return (
-    <RecentVideosContainer length={videos.length}>
+    <RecentVideosContainer>
       <div className="container">
         <div className="title-container">
           <VideosTitle>최근 읽은 영상</VideosTitle>
@@ -37,8 +37,15 @@ const RecentVideos = ({ videos, searchRef }: IRecentVideosProp) => {
             <VideosSubtitle>
               처음 방문하셨나요? <br /> 아직 정리해본 영상이 없어요!
             </VideosSubtitle>
-            <VideoButton onClick={() => searchRef?.current?.focus()}>
-              <h2 className="button-text">영상 정리해보기</h2>
+            <VideoButton
+              onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
+            >
+              <h2
+                className="button-text"
+                onClick={() => searchRef.current?.focus()}
+              >
+                영상 정리해보기
+              </h2>
             </VideoButton>
           </div>
         )}

diff --git a/src/components/Home/SearchYoutube.tsx b/src/components/Home/SearchYoutube.tsx
@@ -1,8 +1,5 @@
 import React, { useState, FormEvent } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
-
-import { createVideoAPI } from '@/apis/videos';
+import { useRecoilState, useSetRecoilState } from 'recoil';
 
 import VideoIcon from '@/assets/icons/video.svg?react';
 import WarningIcon from '@/assets/icons/warning.svg?react';
@@ -16,31 +13,30 @@ import {
 } from '@/styles/HomepageStyle';
 
 import { recommendationModalState } from '@/stores/modal';
+
 import {
   modelingDataState,
   modelingProgressState,
   modelingStatusState,
   videoLinkState,
 } from '@/stores/model-controller';
-import { userTokenState } from '@/stores/user';
 
 import { validateYoutubeLink } from '@/utils/validation';
 
 import ProgressBar from './ProgressBar';
+import useCreateVideo from '@/hooks/useCreateVideo';
 
 type Props = {
   searchRef: React.RefObject<HTMLInputElement>;
 };
 
 const SearchYoutube = ({ searchRef }: Props) => {
-  const navigate = useNavigate();
-
-  const userToken = useRecoilValue(userTokenState);
   const setIsOpenModal = useSetRecoilState(recommendationModalState);
+  const setModelingData = useSetRecoilState(modelingDataState);
   const setVideoLink = useSetRecoilState(videoLinkState);
   const setProgress = useSetRecoilState(modelingProgressState);
   const [status, setStatus] = useRecoilState(modelingStatusState);
-  const [modelingData, setModelingData] = useRecoilState(modelingDataState);
+  const { createVideo } = useCreateVideo();
 
   const [inputLink, setInputLink] = useState('');
 
@@ -96,35 +92,25 @@ const SearchYoutube = ({ searchRef }: Props) => {
     setVideoLink(null);
     setStatus('NONE');
     setProgress(0);
-  };
-
-  const handleClickCreateVideoButton = async () => {
-    if (!modelingData) return;
-
-    if (userToken) {
-      try {
-        const { video_id } = (await createVideoAPI(modelingData)).data.result;
-
-        navigate(`/summary/${video_id}`);
-        setModelingData(null);
-      } catch (e) {
-        console.error(e);
-      }
-    } else {
-      navigate('/summary/guest');
-    }
-
-    setVideoLink(null);
-    setStatus('NONE');
-    setProgress(0);
+    setModelingData(null);
   };
 
   return (
     <>
       <SearchContainer className="dark-section">
         <SearchForm onSubmit={handleSubmit}>
           <div className="search-text">
-            <h1 className="search-title">{getTitle()}</h1>
+            <h1
+              className="search-title"
+              style={{
+                color:
+                  status === 'COMPLETE'
+                    ? theme.color.green300
+                    : theme.color.white,
+              }}
+            >
+              {getTitle()}
+            </h1>
 
             <div className="search-subtitle-wrapper">
               {(status === 'ERROR' || (!isValidate && inputLink !== '')) && (
@@ -156,12 +142,12 @@ const SearchYoutube = ({ searchRef }: Props) => {
               </div>
 
               <SearchInput
-                ref={searchRef}
                 type="text"
                 value={inputLink}
                 disabled={status === 'CONTINUE'}
                 onChange={handleChangeInput}
                 placeholder="https://youtube.com/..."
+                ref={searchRef}
               />
             </div>
 
@@ -172,7 +158,7 @@ const SearchYoutube = ({ searchRef }: Props) => {
                   color: theme.color.gray500,
                   backgroundColor: theme.color.green400,
                 }}
-                onClick={handleClickCreateVideoButton}
+                onClick={createVideo}
               >
                 영상 읽기
               </SearchButton>

diff --git a/src/components/PhoneCheck.tsx b/src/components/PhoneCheck.tsx
@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { sendSMSAPI, checkSMSAPI, sendSMSFindAPI } from '@/apis/sms';
 import Container from '@/styles/PhoneCheck';
+import { AxiosError } from "axios";
 
 
 interface PhoneCheckProps {
@@ -100,7 +101,9 @@ const PhoneCheck : React.FC<PhoneCheckProps> = ({setCheck, tel, setTel, type}) =
                         setToken(data.result.token);
                     }
             } catch(e){
-                setPhoneCertify(true);
+                const err = e as AxiosError;
+                if(err.response?.status === 400)
+                    setPhoneCertify(true);
             }
 
       }