feature-081: 알람 가져오는 로직 수정

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);

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);

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<IAlarm[]>([]);
+  const [alarmList, setAlarmList] = useRecoilState(userAlarmState);
+  const { getAlarm } = useGetAlarm();
 
   const [alarmRef] = useOutsideClick<HTMLDivElement>(() => 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 && (
         <AlarmList
           alarmList={alarmList}
-          onRefresh={callAPI}
+          onRefresh={getAlarm}
           onClose={() => setIsOpen(false)}
         />
       )}

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) {

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;

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<MyInfoResponse | null>({
   key: 'user-info',
@@ -14,3 +15,8 @@ export const userTokenState = atom<string | null>({
   default: null,
   effects_UNSTABLE: [localStorageEffect],
 });
+
+export const userAlarmState = atom<IAlarm[]>({
+  key: 'user-alarm',
+  default: [],
+});