[FE] EventLoader하위로 EditAccountPage를 옮겨 데이터를 유지하기 위한 로직을 제거

client/src/apis/request/event.ts

@@ -1,12 +1,12 @@
-import {CreatedEvents, Event, EventCreationData, EventId, EventName, User} from 'types/serviceType';
+import {CreatedEvents, Event, EventCreationData, EventName, User} from 'types/serviceType';
 import {WithErrorHandlingStrategy} from '@errors/RequestGetError';
 
 import {ADMIN_API_PREFIX, MEMBER_API_PREFIX, USER_API_PREFIX} from '@apis/endpointPrefix';
 import {requestGet, requestPatch, requestPostWithResponse} from '@apis/fetcher';
 import {WithEventId} from '@apis/withId.type';
 
 export const requestPostGuestEvent = async (postEventArgs: EventCreationData) => {
-  return await requestPostWithResponse<EventId>({
+  return await requestPostWithResponse<WithEventId>({
     endpoint: `${USER_API_PREFIX}/guest`,
     body: {
       ...postEventArgs,
@@ -15,7 +15,7 @@ export const requestPostGuestEvent = async (postEventArgs: EventCreationData) =>
 };
 
 export const requestPostUserEvent = async (eventName: EventName) => {
-  return await requestPostWithResponse<EventId>({
+  return await requestPostWithResponse<WithEventId>({
     endpoint: USER_API_PREFIX,
     body: {
       eventName,

client/src/components/Loader/EventDataProvider.tsx

@@ -0,0 +1,22 @@
+import {createContext, PropsWithChildren} from 'react';
+
+import {Event, EventId} from 'types/serviceType';
+
+import {useAuthStore} from '@store/authStore';
+
+type EventDataContextType = Event & {
+  eventToken: EventId;
+  isAdmin: boolean;
+};
+
+type EventDataProviderProps = PropsWithChildren<Omit<EventDataContextType, 'isAdmin'>>;
+
+export const EventDataContext = createContext<EventDataContextType | null>(null);
+
+const EventDataProvider = ({children, ...props}: EventDataProviderProps) => {
+  const {isAdmin} = useAuthStore();
+
+  return <EventDataContext.Provider value={{isAdmin, ...props}}>{children}</EventDataContext.Provider>;
+};
+
+export default EventDataProvider;

client/src/components/Loader/EventLoader.tsx

@@ -1,50 +1,17 @@
-import {useSuspenseQueries} from '@tanstack/react-query';
-import {useEffect} from 'react';
+import {Outlet} from 'react-router-dom';
 
-import {requestGetEvent} from '@apis/request/event';
-import {requestGetReports} from '@apis/request/report';
-import {requestGetSteps} from '@apis/request/step';
-import {WithErrorHandlingStrategy} from '@errors/RequestGetError';
-import {requestGetAllMembers} from '@apis/request/member';
+import useEventLoader from '@hooks/useEventLoader';
 
-import {useTotalExpenseAmountStore} from '@store/totalExpenseAmountStore';
+import EventDataProvider from './EventDataProvider';
 
-import getEventIdByUrl from '@utils/getEventIdByUrl';
+const EventLoader = () => {
+  const eventData = useEventLoader();
 
-import QUERY_KEYS from '@constants/queryKeys';
-
-const EventLoader = ({children, ...props}: React.PropsWithChildren<WithErrorHandlingStrategy | null> = {}) => {
-  const eventId = getEventIdByUrl();
-
-  const queries = useSuspenseQueries({
-    queries: [
-      {queryKey: [QUERY_KEYS.event], queryFn: () => requestGetEvent({eventId, ...props})},
-      {
-        queryKey: [QUERY_KEYS.reports],
-        queryFn: () => requestGetReports({eventId, ...props}),
-      },
-      {
-        queryKey: [QUERY_KEYS.steps],
-        queryFn: () => requestGetSteps({eventId, ...props}),
-      },
-      {
-        queryKey: [QUERY_KEYS.allMembers],
-        queryFn: () => requestGetAllMembers({eventId, ...props}),
-      },
-    ],
-  });
-
-  const {updateTotalExpenseAmount} = useTotalExpenseAmountStore();
-
-  const stepsData = queries[2];
-
-  useEffect(() => {
-    if (stepsData.isSuccess && stepsData.data) {
-      updateTotalExpenseAmount(stepsData.data);
-    }
-  }, [stepsData.data, stepsData.isSuccess, updateTotalExpenseAmount]);
-
-  return children;
+  return (
+    <EventDataProvider {...eventData}>
+      <Outlet />
+    </EventDataProvider>
+  );
 };
 
 export default EventLoader;

client/src/hooks/useAccount.ts

@@ -1,35 +1,21 @@
 import {useEffect, useState} from 'react';
-import {useLocation, useNavigate} from 'react-router-dom';
 
 import validateAccountNumber from '@utils/validate/validateAccountNumber';
-import {BankAccount} from 'types/serviceType';
-
-import getEventBaseUrl from '@utils/getEventBaseUrl';
 
 import RULE from '@constants/rule';
 
 import useRequestPatchUser from './queries/event/useRequestPatchUser';
+import useEventDataContext from './useEventDataContext';
 
 const useAccount = () => {
-  const location = useLocation();
-  const locationState = location.state as BankAccount | null;
+  const {bankName, accountNumber} = useEventDataContext();
 
-  const navigate = useNavigate();
-  const [bankNameState, setBankName] = useState<string>();
-  const [accountNumberState, setAccountNumber] = useState<string>();
+  const [bankNameState, setBankName] = useState<string>(bankName);
+  const [accountNumberState, setAccountNumber] = useState<string>(accountNumber);
   const [accountNumberErrorMessage, setAccountNumberErrorMessage] = useState<string | null>(null);
   const [canSubmit, setCanSubmit] = useState(false);
   const [isPasting, setIsPasting] = useState(false);
 
-  useEffect(() => {
-    if (locationState === null) {
-      navigate(`${getEventBaseUrl(location.pathname)}/admin`);
-    } else {
-      setBankName(locationState.bankName);
-      setAccountNumber(locationState.accountNumber);
-    }
-  }, [locationState]);
-
   const {patchUser} = useRequestPatchUser();
 
   const selectBank = (name: string) => {
@@ -71,10 +57,10 @@ const useAccount = () => {
 
   useEffect(() => {
     const existEmptyField = bankNameState?.trim() === '' || accountNumberState?.trim() === '';
-    const isChanged = locationState?.bankName !== bankNameState || locationState?.accountNumber !== accountNumberState;
+    const isChanged = bankName !== bankNameState || accountNumber !== accountNumberState;
 
     setCanSubmit(!existEmptyField && isChanged && accountNumberErrorMessage === null);
-  }, [locationState, bankNameState, accountNumberState, accountNumberErrorMessage]);
+  }, [bankNameState, accountNumberState, accountNumberErrorMessage]);
 
   return {
     bankName: bankNameState,

client/src/hooks/useAdminPage.ts

@@ -1,17 +1,14 @@
-import {useOutletContext} from 'react-router-dom';
-
-import {EventPageContextProps} from '@pages/event/[eventId]/EventPageLayout';
-
 import {useTotalExpenseAmountStore} from '@store/totalExpenseAmountStore';
 
 import getEventIdByUrl from '@utils/getEventIdByUrl';
 
 import useRequestGetSteps from './queries/step/useRequestGetSteps';
 import useBanner from './useBanner';
+import useEventDataContext from './useEventDataContext';
 
 const useAdminPage = () => {
   const eventId = getEventIdByUrl();
-  const {isAdmin, eventName, bankName, accountNumber} = useOutletContext<EventPageContextProps>();
+  const {isAdmin, bankName, accountNumber, eventName} = useEventDataContext();
 
   const {totalExpenseAmount} = useTotalExpenseAmountStore();
 

client/src/hooks/useEventDataContext.tsx

@@ -0,0 +1,15 @@
+import {useContext} from 'react';
+
+import {EventDataContext} from '@components/Loader/EventDataProvider';
+
+const useEventDataContext = () => {
+  const value = useContext(EventDataContext);
+
+  if (!value) {
+    throw new Error('EventDataProvider와 함께 사용해주세요.');
+  }
+
+  return value;
+};
+
+export default useEventDataContext;

client/src/hooks/useEventLoader.ts

@@ -0,0 +1,62 @@
+import {useSuspenseQueries} from '@tanstack/react-query';
+import {useEffect} from 'react';
+
+import {requestGetEvent} from '@apis/request/event';
+import {requestGetAllMembers} from '@apis/request/member';
+import {requestGetReports} from '@apis/request/report';
+import {requestGetSteps} from '@apis/request/step';
+
+import {useTotalExpenseAmountStore} from '@store/totalExpenseAmountStore';
+
+import getEventIdByUrl from '@utils/getEventIdByUrl';
+
+import QUERY_KEYS from '@constants/queryKeys';
+
+/**
+ * 이 훅이 하는 일:
+ * 이벤트 정보 불러오기 + 총액 상태 계산하기
+ */
+const useEventLoader = () => {
+  const eventId = getEventIdByUrl();
+
+  const {updateTotalExpenseAmount} = useTotalExpenseAmountStore();
+
+  const queries = useSuspenseQueries({
+    queries: [
+      {queryKey: [QUERY_KEYS.event], queryFn: () => requestGetEvent({eventId})},
+      {
+        queryKey: [QUERY_KEYS.reports],
+        queryFn: () => requestGetReports({eventId}),
+      },
+      {
+        queryKey: [QUERY_KEYS.steps],
+        queryFn: () => requestGetSteps({eventId}),
+      },
+      {
+        queryKey: [QUERY_KEYS.allMembers],
+        queryFn: () => requestGetAllMembers({eventId}),
+      },
+    ],
+  });
+
+  const [eventData, reportsData, stepsData, membersData] = queries;
+  const {data, isSuccess} = stepsData;
+
+  useEffect(() => {
+    if (isSuccess && data) {
+      updateTotalExpenseAmount(data);
+    }
+  }, [data, isSuccess]);
+
+  const {eventName, bankName, accountNumber, createdByGuest} = eventData.data;
+
+  return {
+    eventName,
+    bankName,
+    accountNumber,
+    createdByGuest,
+    eventToken: eventId,
+  };
+};
+
+export default useEventLoader;

client/src/hooks/useEventPageLayout.ts

@@ -1,17 +1,15 @@
-import {useAuthStore} from '@store/authStore';
 import {useTotalExpenseAmountStore} from '@store/totalExpenseAmountStore';
 
 import getEventIdByUrl from '@utils/getEventIdByUrl';
 
-import useRequestGetEvent from './queries/event/useRequestGetEvent';
 import useRequestGetAllMembers from './queries/member/useRequestGetAllMembers';
 import useRequestGetSteps from './queries/step/useRequestGetSteps';
 import useRequestGetUserInfo from './queries/auth/useRequestGetUserInfo';
+import useEventDataContext from './useEventDataContext';
 
 const useEventPageLayout = () => {
   const eventId = getEventIdByUrl();
-  const {eventName, bankName, accountNumber, createdByGuest} = useRequestGetEvent();
-  const {isAdmin} = useAuthStore();
+  const {isAdmin, eventName, bankName, accountNumber, createdByGuest} = useEventDataContext();
   const {totalExpenseAmount} = useTotalExpenseAmountStore();
   const {members} = useRequestGetAllMembers();
   const {steps} = useRequestGetSteps();

client/src/hooks/useReportsPage.ts

@@ -1,12 +1,11 @@
 import {useState} from 'react';
-import {useLocation, useNavigate, useOutletContext} from 'react-router-dom';
-
-import {EventPageContextProps} from '@pages/event/[eventId]/EventPageLayout';
+import {useLocation, useNavigate} from 'react-router-dom';
 
 import getEventBaseUrl from '@utils/getEventBaseUrl';
 
 import {useSearchReports} from './useSearchReports';
 import toast from './useToast/toast';
+import useEventDataContext from './useEventDataContext';
 
 export type SendInfo = {
   bankName: string;
@@ -18,7 +17,7 @@ export type SendInfo = {
 
 const useReportsPage = () => {
   const [memberName, setMemberName] = useState('');
-  const {eventName, eventToken, bankName, accountNumber} = useOutletContext<EventPageContextProps>();
+  const {eventName, eventToken, bankName, accountNumber} = useEventDataContext();
   const {matchedReports, reports} = useSearchReports({memberName});
 
   const location = useLocation();

client/src/mocks/handlers/eventHandlers.ts

@@ -38,7 +38,7 @@ export const eventHandler = [
       );
     }
 
-    const eventId: EventId = {eventId: 'mock-event-id'};
+    const eventId: {eventId: EventId} = {eventId: 'mock-event-id'};
     return HttpResponse.json(eventId, {
       status: 201,
       headers: {

client/src/pages/event/[eventId]/EventPageLayout.tsx

@@ -26,12 +26,8 @@ export type EventPageContextProps = Event & {
 };
 
 const EventPageLayout = () => {
-  const {isAdmin, event, eventId, eventSummary} = useEventPageLayout();
-  const outletContext: EventPageContextProps = {
-    isAdmin,
-    eventToken: eventId,
-    ...event,
-  };
+  const {event, eventSummary} = useEventPageLayout();
+
   const {trackShareEvent} = useAmplitude();
 
   const isMobile = isMobileDevice();
@@ -82,7 +78,7 @@ const EventPageLayout = () => {
           )}
         </Flex>
       </Flex>
-      <Outlet context={outletContext} />
+      <Outlet />
       <Footer />
     </MainLayout>
   );

client/src/pages/event/[eventId]/home/HomePage.tsx

@@ -1,12 +1,12 @@
-import type {EventPageContextProps} from '@pages/event/[eventId]/EventPageLayout';
-
-import {useMatch, useNavigate, useOutletContext} from 'react-router-dom';
+import {useMatch, useNavigate} from 'react-router-dom';
 
 import StepList from '@components/StepList/Steps';
 import useRequestGetSteps from '@hooks/queries/step/useRequestGetSteps';
 import Reports from '@components/Reports/Reports';
 import useRequestGetImages from '@hooks/queries/images/useRequestGetImages';
 
+import useEventDataContext from '@hooks/useEventDataContext';
+
 import {useTotalExpenseAmountStore} from '@store/totalExpenseAmountStore';
 
 import {Icon, Tab, Tabs, Title} from '@HDesign/index';
@@ -18,7 +18,7 @@ import {ROUTER_URLS} from '@constants/routerUrls';
 import {receiptStyle} from './HomePage.style';
 
 const HomePage = () => {
-  const {isAdmin, eventName} = useOutletContext<EventPageContextProps>();
+  const {isAdmin, eventName} = useEventDataContext();
   const isInHomePage = useMatch(ROUTER_URLS.home) !== null;
 
   const {steps} = useRequestGetSteps();