feature-081: 알림창에 영상 변환 상태 연결

teamViNO · Feb 19, 2024 · 4532ce0 · 4532ce0
1 parent 15210ee
commit 4532ce0
Show file tree

Hide file tree

Showing 10 changed files with 173 additions and 83 deletions.
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/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';
@@ -15,30 +12,31 @@ import {
   SearchContainer,
 } from '@/styles/HomepageStyle';
 
-import { recommendationModalState, errorModalState } from '@/stores/modal';
+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';
 
-const SearchYoutube = () => {
-  const navigate = useNavigate();
+type Props = {
+  searchRef: React.RefObject<HTMLInputElement>;
+};
 
-  const userToken = useRecoilValue(userTokenState);
+const SearchYoutube = ({ searchRef }: Props) => {
   const setIsOpenModal = useSetRecoilState(recommendationModalState);
-  const setIsOpenErrorModal = useSetRecoilState(errorModalState);
+  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('');
 
@@ -97,28 +95,6 @@ const SearchYoutube = () => {
     setModelingData(null);
   };
 
-  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);
-        setIsOpenErrorModal(true);
-      }
-    } else {
-      navigate('/summary/guest');
-    }
-
-    setVideoLink(null);
-    setStatus('NONE');
-    setProgress(0);
-  };
-
   return (
     <>
       <SearchContainer className="dark-section">
@@ -161,6 +137,7 @@ const SearchYoutube = () => {
                 disabled={status === 'CONTINUE'}
                 onChange={handleChangeInput}
                 placeholder="https://youtube.com/..."
+                searchRef={searchRef}
               />
             </div>
 
@@ -171,7 +148,7 @@ const SearchYoutube = () => {
                   color: theme.color.gray500,
                   backgroundColor: theme.color.green400,
                 }}
-                onClick={handleClickCreateVideoButton}
+                onClick={createVideo}
               >
                 영상 읽기
               </SearchButton>

diff --git a/src/components/common/ModelController/ModelController.tsx b/src/components/common/ModelController/ModelController.tsx
@@ -55,6 +55,15 @@ const ModelController = () => {
     setVideoLink(null);
   };
 
+  const handleUpdateAlarm = async (title: string) => {
+    await createVideoAlarmAPI(0, 'success', {
+      title: `[${title}]`,
+      content:
+        '영상이 모두 변환되었어요!\n이제 정리 된 영상을 확인하러 가볼까요?',
+      is_confirm: false,
+    });
+  };
+
   useEffect(() => {
     if (!videoLink) return;
 
@@ -100,6 +109,7 @@ const ModelController = () => {
           updated_at: new Date().toString(),
         });
         setModelingProgress(100);
+        handleUpdateAlarm(finalData.title);
         setModelingStatus('COMPLETE');
       } catch (e) {
         console.error(e);

diff --git a/src/components/layout/header/alarm/AlarmItem.tsx b/src/components/layout/header/alarm/AlarmItem.tsx
@@ -11,21 +11,34 @@ import ErrorImage from '@/assets/Error.png';
 import { Container } from '@/styles/layout/header/alarm/AlarmItem.style';
 
 import { diffTime } from '@/utils/date';
+import { useRecoilValue } from 'recoil';
+import {
+  modelingProgressState,
+  modelingStatusState,
+} from '@/stores/model-controller';
+import theme from '@/styles/theme';
+import useCreateVideo from '@/hooks/useCreateVideo';
+import { confirmSelectAlarmAPI } from '@/apis/user';
 
 type Props = {
   alarm: IAlarm;
   selectIdList: number[];
   onUpdateSelectIdList: (list: number[]) => void;
   onClose: () => void;
+  onRefresh: () => void;
 };
 
 const AlarmItem = ({
   alarm,
   selectIdList,
   onUpdateSelectIdList,
   onClose,
+  onRefresh,
 }: Props) => {
   const navigate = useNavigate();
+  const status = useRecoilValue(modelingStatusState);
+  const progress = useRecoilValue(modelingProgressState);
+  const { createVideo } = useCreateVideo();
   const isSelected = selectIdList.indexOf(alarm.alarm_id) > -1;
 
   const type = () => {
@@ -58,11 +71,22 @@ const AlarmItem = ({
     return `${second}초`;
   };
 
-  const handleClick = () => {
+  const handleClick = async () => {
     if (alarm.type === 'notice') {
       navigate('/guide');
       onClose();
     }
+    if (alarm.type === 'video' && !alarm.is_confirm) {
+      try {
+        await confirmSelectAlarmAPI({ alarms: [alarm.alarm_id] });
+
+        onRefresh();
+        createVideo();
+        onClose();
+      } catch (e) {
+        console.error(e);
+      }
+    }
   };
 
   const handleClickRemoveButton: React.MouseEventHandler<HTMLButtonElement> = (
@@ -110,6 +134,23 @@ const AlarmItem = ({
           <span>{alarm.content}</span>
         </div>
       </div>
+      {status !== 'NONE' && alarm.alarm_id === 999 && (
+        <div className="progress-wrap">
+          <div className="progress-bar">
+            <div
+              style={{
+                width: `${progress}%`,
+                backgroundColor:
+                  status === 'ERROR' ? theme.color.red : theme.color.green300,
+              }}
+            />
+          </div>
+
+          <span className="progress-text">
+            {status === 'ERROR' ? '변환 중 오류' : `${progress}%`}
+          </span>
+        </div>
+      )}
     </Container>
   );
 };

diff --git a/src/components/layout/header/alarm/AlarmList.tsx b/src/components/layout/header/alarm/AlarmList.tsx
@@ -75,6 +75,7 @@ const AlarmList = ({ alarmList, onRefresh, onClose }: Props) => {
                 selectIdList={selectIdList}
                 onUpdateSelectIdList={setSelectIdList}
                 onClose={onClose}
+                onRefresh={onRefresh}
               />
             ))}
           </div>

diff --git a/src/components/layout/header/alarm/index.tsx b/src/components/layout/header/alarm/index.tsx
@@ -40,9 +40,27 @@ const Alarm = ({ isDark }: Props) => {
   }, []);
 
   useEffect(() => {
-    if (status === 'ERROR') {
+    if (status === 'ERROR' || status === 'COMPLETE') {
+      console.log(status, 'dd');
       callAPI();
     }
+
+    if (status === 'CONTINUE') {
+      setAlarmList([
+        {
+          state: 'success',
+          type: 'video',
+          alarm_id: 999,
+          title: '열심히 영상을 변환하는 중이에요!',
+          content: '잠시후 멋진 글을 만날 수 있어요:)',
+          is_confirm: 0,
+          created_at: new Date().toString(),
+          updated_at: new Date().toString(),
+        },
+        ...alarmList,
+      ]);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [status]);
 
   return (

diff --git a/src/components/layout/sideBar/ConvertVideo.tsx b/src/components/layout/sideBar/ConvertVideo.tsx
@@ -1,8 +1,6 @@
 import { useState } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
-import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
-
-import { createVideoAPI } from '@/apis/videos';
+import { useLocation } from 'react-router-dom';
+import { useRecoilValue, useSetRecoilState } from 'recoil';
 
 import VideoSvg from '@/assets/icons/video.svg?react';
 import DownSvg from '@/assets/icons/down.svg?react';
@@ -11,59 +9,32 @@ import UpSvg from '@/assets/icons/up.svg?react';
 import * as ConvertVideoStyle from '@/styles/layout/sideBar/ConvertVideo.style';
 import { CommonTitle } from '@/styles/layout/sideBar/UserMode.style';
 
-import { errorModalState, recommendationModalState } from '@/stores/modal';
+import { recommendationModalState } from '@/stores/modal';
 import {
-  modelingDataState,
   modelingProgressState,
   modelingStatusState,
   videoLinkState,
 } from '@/stores/model-controller';
-import { userTokenState } from '@/stores/user';
 
 import theme from '@/styles/theme';
 
 import { validateYoutubeLink } from '@/utils/validation';
+import useCreateVideo from '@/hooks/useCreateVideo';
 
 const ConvertVideo = () => {
   const { pathname } = useLocation();
-  const navigate = useNavigate();
-
-  const userToken = useRecoilValue(userTokenState);
   const setIsOpenModal = useSetRecoilState(recommendationModalState);
   const setVideoLink = useSetRecoilState(videoLinkState);
-  const setIsOpenErrorModal = useSetRecoilState(errorModalState);
-  const [status, setStatus] = useRecoilState(modelingStatusState);
-  const [progress, setProgress] = useRecoilState(modelingProgressState);
-  const [modelingData, setModelingData] = useRecoilState(modelingDataState);
+  const status = useRecoilValue(modelingStatusState);
+  const progress = useRecoilValue(modelingProgressState);
+  const { createVideo } = useCreateVideo();
 
   const [isOpen, setIsOpen] = useState(false);
   const [isFocus, setIsFocus] = useState(false);
   const [url, setURL] = useState('');
 
   const isValidate = validateYoutubeLink(url);
 
-  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) {
-        setIsOpenErrorModal(true)
-        console.error(e);
-      }
-    } else {
-      navigate('/summary/guest');
-    }
-
-    setVideoLink(null);
-    setStatus('NONE');
-    setProgress(0);
-  };
-
   const handleClickStartConvertButton: React.MouseEventHandler<
     HTMLButtonElement
   > = (e) => {
@@ -114,7 +85,7 @@ const ConvertVideo = () => {
                 color: theme.color.gray500,
                 backgroundColor: theme.color.green400,
               }}
-              onClick={handleClickCreateVideoButton}
+              onClick={createVideo}
             >
               start
             </ConvertVideoStyle.Button>

diff --git a/src/hooks/useCreateVideo.ts b/src/hooks/useCreateVideo.ts
@@ -0,0 +1,47 @@
+import { createVideoAPI } from '@/apis/videos';
+import { errorModalState } from '@/stores/modal';
+import {
+  modelingDataState,
+  modelingProgressState,
+  modelingStatusState,
+  videoLinkState,
+} from '@/stores/model-controller';
+import { userTokenState } from '@/stores/user';
+import { useNavigate } from 'react-router-dom';
+import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
+
+const useCreateVideo = () => {
+  const [modelingData, setModelingData] = useRecoilState(modelingDataState);
+  const userToken = useRecoilValue(userTokenState);
+  const setIsOpenErrorModal = useSetRecoilState(errorModalState);
+  const setVideoLink = useSetRecoilState(videoLinkState);
+  const setStatus = useSetRecoilState(modelingStatusState);
+  const setProgress = useSetRecoilState(modelingProgressState);
+  const navigate = useNavigate();
+
+  const createVideo = async () => {
+    if (!modelingData) return;
+
+    if (userToken) {
+      try {
+        const { video_id } = (await createVideoAPI(modelingData)).data.result;
+
+        navigate(`/summary/${video_id}`);
+        setModelingData(null);
+      } catch (e) {
+        setIsOpenErrorModal(true);
+        console.error(e);
+      }
+    } else {
+      navigate('/summary/guest');
+    }
+
+    setVideoLink(null);
+    setStatus('NONE');
+    setProgress(0);
+  };
+
+  return { createVideo };
+};
+
+export default useCreateVideo;