Test recoil setter with mutate

src/api/index.ts

@@ -26,9 +26,9 @@ api.interceptors.response.use(
     return response;
   },
   async (error) => {
-    if (notFoundGroupDetail(error)) {
-      return (window.location.href = '/not-found');
-    }
+    // if (notFoundGroupDetail(error)) {
+    //   return (window.location.href = '/not-found');
+    // }
 
     const { config, response } = error;
     if (response?.status === 401) {

src/components/Alarm/AlarmDetail/AlarmInfo/index.tsx

@@ -8,11 +8,11 @@ import theme from '@/styles/Theme';
 import { SelectedEventInfo, Situation } from '@/types/event';
 
 import { useEffect, useState } from 'react';
-import { useRecoilState } from 'recoil';
+import { useRecoilState, useResetRecoilState } from 'recoil';
 import * as Style from './styles';
 import { SituationStatus } from '@/types/notification';
 import { useGroupDetail } from '@/queries/Group';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useSearchParams } from 'react-router-dom';
 import { isMobile } from 'react-device-detect';
 import { useUpdateDetailStatus } from '@/queries/Detail';
 import { Tooltip } from '@/components/@common/Tooltip';
@@ -32,12 +32,17 @@ const filterDisabledList = (dataList: SelectedEventInfo[] | undefined, disabledE
   dataList?.filter((item) => !disabledEventIdList?.includes(item.eventId)).map((item) => item.eventId) || [];
 
 const AlarmInfo = ({}) => {
-  const [{ alarmEventIdList, nickname, groupId, afterSituation, beforeSituation }, setAlarmIdList] = useRecoilState(alarmInfoState);
+  const [alr, setAlarmIdList] = useRecoilState(alarmInfoState);
+
+  const { alarmEventIdList, nickname, groupId, afterSituation, beforeSituation } = alr;
+  console.log(alr);
 
   const [situationToChange, setSituationToChange] = useState<Situation>('완납');
 
   const navigate = useNavigate();
 
+  const [searchParam, _] = useSearchParams();
+
   const { data: groupAdmin } = useGroupDetail(Number(groupId));
 
   const isAdmin = groupAdmin?.content.isAdmin;
@@ -51,7 +56,7 @@ const AlarmInfo = ({}) => {
     isAdmin && setSituationToChange('완납');
   }, [isAdmin]);
 
-  const { data, isLoading, disabledEventIdList, isDisabledItem } = useDisabledList(groupId!, alarmEventIdList, SITUATION_FORMAT_STYLE[afterSituation!]);
+  const { data, isLoading, isSuccess, disabledEventIdList, isDisabledItem } = useDisabledList(groupId, alarmEventIdList, SITUATION_FORMAT_STYLE[afterSituation!]);
 
   const stringToNumber_Date = (date: string) => +date?.replace(/\-/g, '');
 
@@ -71,6 +76,12 @@ const AlarmInfo = ({}) => {
       }));
   }, [data]);
 
+  useEffect(() => {
+    return () => {
+      console.log('alarmInfo');
+    };
+  }, []);
+
   useEffect(() => {
     setCheckedEventId([...filterDisabledList(data?.content.eventList, disabledEventIdList)]);
   }, [disabledEventIdList]);
@@ -94,31 +105,43 @@ const AlarmInfo = ({}) => {
   };
 
   const settingAlarmInfoNickname = () => {
-    data && setAlarmIdList((prev) => ({ ...prev, nickname: data?.content.eventList[0].nickname }));
+    isSuccess && data && setAlarmIdList((prev) => ({ ...prev, nickname: data?.content.eventList[0].nickname }));
   };
 
   useEffect(() => {
+    console.log('data');
     settingAlarmInfoNickname();
   }, [data]);
 
+  useEffect(() => {
+    console.log('alarmNickname');
+  }, [nickname]);
+
+  const resetList = useResetRecoilState(alarmInfoState);
+
   const mobileOnSuccess = () => {
+    console.log('onSuccess');
     setIsOpen(true);
-    navigate(`/m-group/${groupId}/book`);
+    setAlarmIdList(initAlarmInfoState);
+
+    navigate(`/m-group/${groupId}/book`); // 업데이트 완료 후에 navigate 실행
   };
 
+  console.log(isOpen);
   const onSuccess = () => {
-    setAlarmIdList(initAlarmInfoState);
-    isMobile && mobileOnSuccess();
+    mobileOnSuccess();
+    navigate(`/m-group/${groupId}/book`);
   };
 
   const { mutate: mutateDetailStatus } = useUpdateDetailStatus(onSuccess);
 
   const updateSituation = () => {
-    mutateDetailStatus({ situation: situationToChange, eventIdList: checkedEventId });
+    mutateDetailStatus({ situation: situationToChange, eventIdList: checkedEventId }, { onSuccess: () => setIsOpen(true) });
   };
 
   useEffect(() => {
     return () => {
+      console.log('unmount');
       setAlarmIdList((prev) => ({ ...prev, alarmEventIdList: [] }));
     };
   }, []);

src/components/Alarm/AlarmDetail/AlarmList/AlarmCard/index.tsx

@@ -66,7 +66,7 @@ const AlarmCard = ({ notificationInfo }: Props) => {
   const goToAlarmInfo = (eventIdList: number[]) => {
     handleReadNotification();
     setAlarmEventIdList({ alarmEventIdList: [...eventIdList], nickname, beforeSituation, afterSituation, groupId });
-    isMobile ? navigate(`/m-notification/info`) : settingCalendarDate();
+    isMobile ? navigate(`/m-notification/info?groupId=${groupId}`) : settingCalendarDate();
   };
 
   const goToGroupMember = () => {

src/components/Alarm/AlarmDetail/index.tsx

@@ -32,7 +32,7 @@ const AlarmDetail = ({ headerHeight, setShowAlarmDetail }: Props) => {
 
       <Style.Main>
         {!alarmIdList.alarmEventIdList.length && <AlarmList />}
-        {(alarmIdList.alarmEventIdList.length || null) && <AlarmInfo />}
+        {alarmIdList.alarmEventIdList.length && <AlarmInfo />}
       </Style.Main>
     </Style.AlarmDetailFrame>
   );

src/components/Alarm/index.tsx

@@ -2,6 +2,7 @@ import { ALARM } from '@/assets/icons/Alarm';
 import useCheckListState from '@/hooks/useCheckListState';
 import { useGetAlarmListCount } from '@/queries/Notification/useGetAlarmListCount';
 import { alarmInfoState } from '@/store/alarmInfoState';
+import { notificationModalState } from '@/store/notificationModalState';
 import styled from '@emotion/styled';
 import { useEffect, useState } from 'react';
 import { isMobile } from 'react-device-detect';
@@ -16,7 +17,9 @@ type Props = {
 };
 
 const AlarmComponent = ({ headerHeight }: Props) => {
-  const [showAlarmDetail, setShowAlarmDetail] = useState(false);
+  // const [showAlarmDetail, setShowAlarmDetail] = useState(false);
+  const [showNotification, setShowNotification] = useRecoilState(notificationModalState);
+  // 기존 컴포넌트 내부 state였는데 알람 On/off시  납부여부 변경 및 요청 페이지 , 상세리스트디테일 페이지가 닫혀야해서 전역으로 변경
 
   const navigate = useNavigate();
 
@@ -33,10 +36,10 @@ const AlarmComponent = ({ headerHeight }: Props) => {
 
   useEffect(() => {
     if (alarmIdList.groupId) {
-      setShowAlarmDetail(true);
+      setShowNotification(true);
     }
     return () => {
-      setShowAlarmDetail(false);
+      setShowNotification(false);
     };
   }, [location]);
 
@@ -49,7 +52,7 @@ const AlarmComponent = ({ headerHeight }: Props) => {
   };
 
   const handleToggleNotificationModal = () => {
-    setShowAlarmDetail((prev) => !prev);
+    setShowNotification((prev) => !prev);
     setInitCheckDetailFine();
   };
 
@@ -62,7 +65,7 @@ const AlarmComponent = ({ headerHeight }: Props) => {
       >
         {ALARM.ALARM}
       </Style.AlarmIconWrapper>
-      {showAlarmDetail && !isMobile && <AlarmDetail headerHeight={headerHeight} setShowAlarmDetail={setShowAlarmDetail} />}
+      {showNotification && !isMobile && <AlarmDetail headerHeight={headerHeight} setShowAlarmDetail={setShowNotification} />}
       {/* !isMobile을 안넣어줬을 때 AlarmDetail이 Mobile화면에서 출력이 되는 버그가 있다... ?(why.. isMobile에 따라 버튼 트리거도 다른데)  */}
     </>
   );

src/components/DetailFine/DetailList/index.tsx

@@ -6,12 +6,13 @@ import { DetailFilter } from '@/store/detailFilter';
 import { useRecoilState } from 'recoil';
 import { dateState } from '@/store/dateState';
 import { SelectedEventInfo } from '@/types/event';
-import { useSelectedContext } from '@/contexts/SelectedFineContext';
+import { useSelectedContext, initialSelectData } from '@/contexts/SelectedFineContext';
 import CheckboxContainer from '../../@common/Checkbox';
 import { CheckDetailFine, SetCheckDetailFine } from '@/components/DetailFine/AlarmRequest_PaymentUpdate/hooks/useCheckDetailFine';
 import DetailListCheckBox from '../checkbox';
 import useCheckListState from '@/hooks/useCheckListState';
 import { covertDateForView } from '@/utils/convertFormat';
+import { notificationModalState } from '@/store/notificationModalState';
 
 type Props = {
   details?: SelectedEventInfo[];
@@ -21,6 +22,8 @@ type Props = {
 const DetailList = ({ detailFilter, details }: Props) => {
   const [calendarState, setCalendarState] = useRecoilState(dateState);
 
+  const [showNotification, setShowNotification] = useRecoilState(notificationModalState);
+
   const [openButtonListId, setOpenButtonListId] = useState(0);
 
   const { selectedFine, setSelectedFine } = useSelectedContext('userDetails');
@@ -39,6 +42,10 @@ const DetailList = ({ detailFilter, details }: Props) => {
     setSelectedFine(detail);
   };
 
+  useEffect(() => {
+    setSelectedFine(initialSelectData);
+  }, [showNotification]);
+
   useEffect(() => {
     const closeCircleButtonList = () => {
       setOpenButtonListId(0);

src/components/DetailFine/DropDownWrapper/CircleButtonList/index.tsx

@@ -27,11 +27,14 @@ const getGATrigger = (situation: Situation): string => {
 
 const CircleButtonList = ({ setOpenButtonListId, situation, eventId, isAdmin = false }: Props) => {
   const onSuccessUpdateStatus = (buttonSituation: Situation) => {
+    console.log('성공');
     cancelUpdateStatus();
     pushDataLayerByStatus(isAdmin, buttonSituation);
     buttonSituation === '미납' && pushDataLayer('nonpayment', { route: 'list' });
   };
 
+  console.log('check');
+
   const { mutate: mutateDetailStatus } = useUpdateDetailStatus(onSuccessUpdateStatus);
   const { openConfirmModal, closeConfirmModal } = useConfirmModal();
   const { dropdownList, convertTextToSituation } = useSituationList(situation);

src/hooks/Group/useValidateSituation.ts

@@ -10,7 +10,7 @@ const useValidateSituation = () => {
   const { groupId } = useParams();
   const { checkDetailFineValues, checkDetailFineKeys } = useCheckListState();
 
-  const { refetch: refetchEventListById } = useQuery(['isSameSituationByServerState'], () =>
+  const { refetch: refetchEventListById } = useQuery(['isSameSituationByServerState', groupId], () =>
     getDetailListById({ groupId: Number(groupId), eventIdsList: checkDetailFineKeys.map(Number) }),
   );
 

src/hooks/useDisabledList.ts

@@ -3,8 +3,8 @@ import { SelectedEventInfo, Situation } from '@/types/event';
 import React from 'react';
 
 //disabled 되어야하는 List를 가져오는 hook
-const useDisabledList = (groupId: number, checkEventIdList: number[], currentSituation: Situation) => {
-  const { data, isLoading } = useGetDetailListById(groupId, checkEventIdList);
+const useDisabledList = (groupId: number | null, checkEventIdList: number[], currentSituation: Situation) => {
+  const { data, isLoading, isSuccess } = useGetDetailListById(groupId!, checkEventIdList);
 
   // Id로 가져오기랑 기존 가져오기를 합치면 무한 스크롤형식의 size가 들어가서 불편할듯
 
@@ -20,6 +20,7 @@ const useDisabledList = (groupId: number, checkEventIdList: number[], currentSit
   return {
     data,
     isLoading,
+    isSuccess,
     disabledEventIdList,
     isDisabledItem,
   };

src/m-components/MobileHome/GroupSection/index.tsx

@@ -1,13 +1,15 @@
 import { AddCard } from '@/components/Home/Card/AddCard';
 import { GroupCard } from '@/components/Home/Card/GroupCard';
 import useInfinityGroupList from '@/hooks/Group/useInfinityGroupList';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import * as Style from './styles';
 import { AuthModal } from '@/components/@common/Modal/LoginModal';
 import { Footer } from '../Footer';
 import { useRecoilState } from 'recoil';
 import { userState } from '@/store/userState';
+import { useUpdateDetailStatus } from '@/queries/Detail';
+import { alarmInfoState, initAlarmInfoState } from '@/store/alarmInfoState';
 
 const MobileGroupSection = () => {
   const { groups, ref, hasNextPage } = useInfinityGroupList();
@@ -28,12 +30,40 @@ const MobileGroupSection = () => {
       handleLoginModal();
       return;
     }
+    setT(true);
     navigate('/m-home/create-group');
   };
+  console.log('tttttt');
 
+  const [test, setT] = useState(false);
+
+  useEffect(() => {
+    console.log('init');
+    return () => {
+      console.log('clean');
+    };
+  }, [test]);
+  const [ar, setAr] = useRecoilState(alarmInfoState);
+
+  console.log(test);
+  console.log(ar);
+  const onSuccess = () => {
+    console.log('onSuccess');
+    setT(true);
+    setAr((prev) => ({ ...prev, afterSituation: 'FULL' }));
+    navigate(`/not-auth`);
+  };
+
+  const { mutate: mutateDetailStatus } = useUpdateDetailStatus(onSuccess);
+
+  // mutateDetailStatus({ situation: situationToChange, eventIdList: checkedEventId }
+  const onClickTest = () => {
+    mutateDetailStatus({ situation: '미납', eventIdList: [48] }, { onSuccess: () => console.log('석섹스') });
+  };
   return (
     <>
       <Style.GroupSection>
+        <button onClick={onClickTest}>안녕하세야ㅕ</button>
         <div>
           <div style={{ width: '100%', height: 'auto' }}>
             <img src="/public/banner.png" alt="group" style={{ width: '100%', height: '200px', objectFit: 'cover' }} />

src/m-pages/MobileHome/index.tsx

@@ -1,5 +1,6 @@
 import MobileLayout from '@/layouts/Mobile/MobileLayout';
 import MobileGroupSection from '@/m-components/MobileHome/GroupSection';
+import { useEffect } from 'react';
 
 // 이렇게 안 하니까 height가 이상하게 잡혀요 왜일까요...
 const MobileHome = () => {

src/m-pages/MobileNotificationInfo/index.tsx

@@ -1,17 +1,28 @@
 import { ARROW } from '@/assets/icons/Arrow';
 import AlarmInfo from '@/components/Alarm/AlarmDetail/AlarmInfo';
 import ModalPageLayout from '@/layouts/Mobile/ModalPageLayout';
+import { alarmInfoState } from '@/store/alarmInfoState';
+import { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { useRecoilState } from 'recoil';
 
 const MobileNotificationInfo = () => {
   const navigate = useNavigate();
   const goBack = () => {
     navigate(-1);
   };
 
+  const [{ alarmEventIdList, nickname, afterSituation, beforeSituation }, setAlarmIdList] = useRecoilState(alarmInfoState);
+
+  useEffect(() => {
+    return () => {
+      console.log('alarmInfoWrapper');
+    };
+  }, []);
   return (
     <ModalPageLayout left={{ icon: ARROW.LEFT, onClick: goBack }} title="">
       <AlarmInfo />
+      {/* Alarminfo mutate Success시 navigate로 설정을 해주었음에도 AlarmInfo가 unmount되지않고 몇 차례 다시 실행되는 이슈가 있어서 강제로 Trigger를 줘서 unmount해주었다. */}
     </ModalPageLayout>
   );
 };

src/store/notificationModalState.ts

@@ -0,0 +1,17 @@
+import { ConfirmModalType } from '@/constants/Confirm';
+import { atom } from 'recoil';
+
+// export interface NotificationModalState {
+//   isModal: boolean;
+// }
+
+type NotificationModalStateType = boolean;
+
+// export const initNotificationModalState = {
+//   isModal: false,
+// };
+
+export const notificationModalState = atom<NotificationModalStateType>({
+  key: 'notificationModalState',
+  default: false,
+});