From d6dafac6a8cdca7506692f735fc4ae45927b549c Mon Sep 17 00:00:00 2001 From: gs0428 Date: Tue, 20 Feb 2024 15:47:31 +0900 Subject: [PATCH] =?UTF-8?q?feature-081:=20=EC=95=8C=EB=9E=8C=20=EA=B0=80?= =?UTF-8?q?=EC=A0=B8=EC=98=A4=EB=8A=94=20=EB=A1=9C=EC=A7=81=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ModelController/ModelController.tsx | 10 -------- .../layout/header/alarm/AlarmItem.tsx | 7 ++---- src/components/layout/header/alarm/index.tsx | 24 +++++++------------ src/hooks/useCreateVideo.ts | 10 ++++++++ src/hooks/useGetAlarm.ts | 16 +++++++++++++ src/stores/user.ts | 6 +++++ 6 files changed, 43 insertions(+), 30 deletions(-) create mode 100644 src/hooks/useGetAlarm.ts diff --git a/src/components/common/ModelController/ModelController.tsx b/src/components/common/ModelController/ModelController.tsx index c0acf7a..f20dc83 100644 --- a/src/components/common/ModelController/ModelController.tsx +++ b/src/components/common/ModelController/ModelController.tsx @@ -55,15 +55,6 @@ const ModelController = () => { setVideoLink(null); }; - const handleUpdateAlarm = async (title: string) => { - await createVideoAlarmAPI(0, 'success', { - title: `[${title}]`, - content: - '영상이 모두 변환되었어요!\n이제 정리 된 영상을 확인하러 가볼까요?', - is_confirm: false, - }); - }; - useEffect(() => { if (!videoLink) return; @@ -109,7 +100,6 @@ 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 index d7f8b06..f59d184 100644 --- a/src/components/layout/header/alarm/AlarmItem.tsx +++ b/src/components/layout/header/alarm/AlarmItem.tsx @@ -17,7 +17,6 @@ import { modelingStatusState, } from '@/stores/model-controller'; import theme from '@/styles/theme'; -import useCreateVideo from '@/hooks/useCreateVideo'; import { confirmSelectAlarmAPI } from '@/apis/user'; type Props = { @@ -38,7 +37,6 @@ const AlarmItem = ({ const navigate = useNavigate(); const status = useRecoilValue(modelingStatusState); const progress = useRecoilValue(modelingProgressState); - const { createVideo } = useCreateVideo(); const isSelected = selectIdList.indexOf(alarm.alarm_id) > -1; const type = () => { @@ -76,12 +74,11 @@ const AlarmItem = ({ navigate('/guide'); onClose(); } - if (alarm.type === 'video' && !alarm.is_confirm) { + if (alarm.type === 'video' && !alarm.is_confirm && alarm.alarm_id !== 999) { try { await confirmSelectAlarmAPI({ alarms: [alarm.alarm_id] }); - onRefresh(); - createVideo(); + navigate(`/summary/${alarm.video_id}`); onClose(); } catch (e) { console.error(e); diff --git a/src/components/layout/header/alarm/index.tsx b/src/components/layout/header/alarm/index.tsx index 8c5023b..b60c51d 100644 --- a/src/components/layout/header/alarm/index.tsx +++ b/src/components/layout/header/alarm/index.tsx @@ -1,20 +1,18 @@ import { useEffect, useState } from 'react'; -import { useRecoilValue } from 'recoil'; - -import { getAlarmAPI } from '@/apis/user'; +import { useRecoilState, useRecoilValue } from 'recoil'; import NotifyOffIcon from '@/assets/icons/notify-off.svg?react'; import NotifyOnIcon from '@/assets/icons/notify-on.svg?react'; import useOutsideClick from '@/hooks/useOutsideClick'; -import { IAlarm } from '@/models/alarm'; - import { modelingStatusState } from '@/stores/model-controller'; import * as HeaderStyle from '@/styles/layout/header'; import AlarmList from './AlarmList'; +import { userAlarmState } from '@/stores/user'; +import useGetAlarm from '@/hooks/useGetAlarm'; type Props = { isDark: boolean; @@ -23,25 +21,21 @@ type Props = { const Alarm = ({ isDark }: Props) => { const status = useRecoilValue(modelingStatusState); const [isOpen, setIsOpen] = useState(false); - const [alarmList, setAlarmList] = useState([]); + const [alarmList, setAlarmList] = useRecoilState(userAlarmState); + const { getAlarm } = useGetAlarm(); const [alarmRef] = useOutsideClick(() => setIsOpen(false)); const hasNotReadAlarm = alarmList.find((item) => !item.is_confirm); - const callAPI = async () => { - const { alarms } = (await getAlarmAPI()).data.result; - - setAlarmList(alarms); - }; - useEffect(() => { - callAPI(); + getAlarm(); + // eslint-disable-next-line react-hooks/exhaustive-deps }, []); useEffect(() => { if (status === 'ERROR' || status === 'COMPLETE') { - callAPI(); + getAlarm(); } if (status === 'CONTINUE') { @@ -78,7 +72,7 @@ const Alarm = ({ isDark }: Props) => { {isOpen && ( setIsOpen(false)} /> )} diff --git a/src/hooks/useCreateVideo.ts b/src/hooks/useCreateVideo.ts index a0f4323..75e6a6e 100644 --- a/src/hooks/useCreateVideo.ts +++ b/src/hooks/useCreateVideo.ts @@ -1,3 +1,4 @@ +import { createVideoAlarmAPI } from '@/apis/user'; import { createVideoAPI } from '@/apis/videos'; import { errorModalState } from '@/stores/modal'; import { @@ -9,6 +10,7 @@ import { import { userTokenState } from '@/stores/user'; import { useNavigate } from 'react-router-dom'; import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'; +import useGetAlarm from './useGetAlarm'; const useCreateVideo = () => { const [modelingData, setModelingData] = useRecoilState(modelingDataState); @@ -17,6 +19,7 @@ const useCreateVideo = () => { const setVideoLink = useSetRecoilState(videoLinkState); const setStatus = useSetRecoilState(modelingStatusState); const setProgress = useSetRecoilState(modelingProgressState); + const { getAlarm } = useGetAlarm(); const navigate = useNavigate(); const createVideo = async () => { @@ -26,6 +29,13 @@ const useCreateVideo = () => { try { const { video_id } = (await createVideoAPI(modelingData)).data.result; + await createVideoAlarmAPI(video_id, 'success', { + title: `[${modelingData.title}]`, + content: + '영상이 모두 변환되었어요!\n이제 정리 된 영상을 확인하러 가볼까요?', + is_confirm: false, + }); + getAlarm(); navigate(`/summary/${video_id}`); setModelingData(null); } catch (e) { diff --git a/src/hooks/useGetAlarm.ts b/src/hooks/useGetAlarm.ts new file mode 100644 index 0000000..abca080 --- /dev/null +++ b/src/hooks/useGetAlarm.ts @@ -0,0 +1,16 @@ +import { getAlarmAPI } from '@/apis/user'; +import { userAlarmState } from '@/stores/user'; +import { useSetRecoilState } from 'recoil'; + +const useGetAlarm = () => { + const setAlarmList = useSetRecoilState(userAlarmState); + const getAlarm = async () => { + const { alarms } = (await getAlarmAPI()).data.result; + + setAlarmList(alarms); + }; + + return { getAlarm }; +}; + +export default useGetAlarm; diff --git a/src/stores/user.ts b/src/stores/user.ts index b9a6f60..6e26e83 100644 --- a/src/stores/user.ts +++ b/src/stores/user.ts @@ -3,6 +3,7 @@ import { atom } from 'recoil'; import { MyInfoResponse } from '@/models/user'; import localStorageEffect from './effects/localStorageEffect'; +import { IAlarm } from '@/models/alarm'; export const userInfoState = atom({ key: 'user-info', @@ -14,3 +15,8 @@ export const userTokenState = atom({ default: null, effects_UNSTABLE: [localStorageEffect], }); + +export const userAlarmState = atom({ + key: 'user-alarm', + default: [], +});