[FE] 로그인 상태라면 행사 생성시 로그인 페이지를 띄우지 않음

client/src/App.tsx

@@ -1,7 +1,11 @@
 import {Outlet} from 'react-router-dom';
 import {Global} from '@emotion/react';
+import {ReactQueryDevtools} from '@tanstack/react-query-devtools';
 
 import AmplitudeInitializer from '@components/AmplitudeInitializer/AmplitudeInitializer';
+import ErrorCatcher from '@components/AppErrorBoundary/ErrorCatcher';
+import QueryClientBoundary from '@components/QueryClientBoundary/QueryClientBoundary';
+import ToastContainer from '@components/Toast/ToastContainer';
 
 import {HDesignProvider} from '@HDesign/index';
 
@@ -15,10 +19,16 @@ const App: React.FC = () => {
     <HDesignProvider>
       <UnPredictableErrorBoundary>
         <Global styles={GlobalStyle} />
-        <NetworkStateCatcher />
-        <AmplitudeInitializer>
-          <Outlet />
-        </AmplitudeInitializer>
+        <ErrorCatcher>
+          <QueryClientBoundary>
+            <ReactQueryDevtools initialIsOpen={false} />
+            <NetworkStateCatcher />
+            <ToastContainer />
+            <AmplitudeInitializer>
+              <Outlet />
+            </AmplitudeInitializer>
+          </QueryClientBoundary>
+        </ErrorCatcher>
       </UnPredictableErrorBoundary>
     </HDesignProvider>
   );

client/src/apis/endpointPrefix.ts

@@ -1,3 +1,4 @@
 // TODO: (@weadie) 반복되서 쓰이는 이 api/events가 추후 수정 가능성이 있어서 일단 편집하기 편하게 이 변수를 재사용하도록 했습니다.
 export const USER_API_PREFIX = '/api/events';
 export const ADMIN_API_PREFIX = '/api/admin/events';
+export const MEMBER_API_PREFIX = '/api/users';

client/src/apis/request/auth.ts

@@ -1,5 +1,7 @@
+import {UserInfo} from 'types/serviceType';
+
 import {BASE_URL} from '@apis/baseUrl';
-import {ADMIN_API_PREFIX, USER_API_PREFIX} from '@apis/endpointPrefix';
+import {ADMIN_API_PREFIX, MEMBER_API_PREFIX, USER_API_PREFIX} from '@apis/endpointPrefix';
 import {requestGet, requestGetWithoutResponse, requestPostWithoutResponse} from '@apis/fetcher';
 import {WithEventId} from '@apis/withId.type';
 
@@ -42,3 +44,11 @@ export const requestGetKakaoLogin = async (code: string) => {
 
   return null;
 };
+
+export const requestGetUserInfo = async () => {
+  return await requestGet<UserInfo>({
+    baseUrl: BASE_URL.HD,
+    endpoint: `${MEMBER_API_PREFIX}/mine`,
+    errorHandlingStrategy: 'unsubscribe',
+  });
+};

client/src/apis/request/event.ts

@@ -1,7 +1,7 @@
 import {Event, EventCreationData, EventId, EventName, User} from 'types/serviceType';
 import {WithErrorHandlingStrategy} from '@errors/RequestGetError';
 
-import {ADMIN_API_PREFIX, USER_API_PREFIX} from '@apis/endpointPrefix';
+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';
 
@@ -47,7 +47,7 @@ export type RequestPatchUser = Partial<User>;
 
 export const requestPatchUser = async (args: RequestPatchUser) => {
   return requestPatch({
-    endpoint: `/api/users`,
+    endpoint: MEMBER_API_PREFIX,
     body: {
       ...args,
     },

client/src/components/QueryClientBoundary/QueryClientBoundary.tsx

@@ -23,6 +23,7 @@ const QueryClientBoundary = ({children}: React.PropsWithChildren) => {
       onError: (error: Error) => {
         // errorBoundary로 처리해야하는 에러인 경우 updateAppError를 하지 못하도록 얼리리턴
         if (error instanceof RequestGetError && error.errorHandlingStrategy === 'errorBoundary') return;
+        if (error instanceof RequestGetError && error.errorHandlingStrategy === 'unsubscribe') return;
 
         updateAppError(error);
       },

client/src/constants/queryKeys.ts

@@ -8,6 +8,7 @@ const QUERY_KEYS = {
   images: 'images',
   kakaoClientId: 'kakao-client-id',
   kakaoLogin: 'kakao-login',
+  userInfo: 'user-info',
 };
 
 export default QUERY_KEYS;

client/src/errors/RequestGetError.ts

@@ -1,7 +1,7 @@
 import RequestError from './RequestError';
 import {RequestErrorType} from './requestErrorType';
 
-type ErrorHandlingStrategy = 'toast' | 'errorBoundary';
+type ErrorHandlingStrategy = 'toast' | 'errorBoundary' | 'unsubscribe';
 
 export type WithErrorHandlingStrategy<P = unknown> = P & {
   errorHandlingStrategy?: ErrorHandlingStrategy;

client/src/hooks/queries/auth/useRequestGetUserInfo.ts

@@ -0,0 +1,32 @@
+import {useQuery} from '@tanstack/react-query';
+import {useEffect} from 'react';
+
+import {requestGetUserInfo} from '@apis/request/auth';
+
+import QUERY_KEYS from '@constants/queryKeys';
+
+export type UseRequestGetUserInfo = ReturnType<typeof useRequestGetUserInfo>;
+
+const useRequestGetUserInfo = () => {
+  const {data, ...rest} = useQuery({
+    queryKey: [QUERY_KEYS.userInfo],
+    queryFn: () => requestGetUserInfo(),
+    // quernFn은 ErrorCatcher 구독을 하지 않으며 오류가 났을 경우 로그인 화면을 띄워야하므로 initialData를 설정했습니다.
+    throwOnError: false,
+    initialData: {
+      isGuest: true,
+      nickname: '',
+      profileImage: '',
+      accountNumber: '',
+      bankName: '',
+    },
+    initialDataUpdatedAt: 0,
+  });
+
+  return {
+    ...data,
+    ...rest,
+  };
+};
+
+export default useRequestGetUserInfo;

client/src/mocks/handlers/authHandlers.ts

@@ -23,6 +23,19 @@ export const authHandler = [
     return new HttpResponse(null, {status: 200});
   }),
 
+  http.get(`${MOCK_API_PREFIX}/api/users/mine`, () => {
+    return HttpResponse.json(
+      {
+        nickname: '크리스마스',
+        isGuest: false,
+        profileImage: '',
+        bankName: '',
+        accountNumber: '',
+      },
+      {status: 200},
+    );
+  }),
+
   // POST /api/eventId/login (requestPostToken)
   http.post<{eventId: string}, {password: string}>(
     `${MOCK_API_PREFIX}${USER_API_PREFIX}/:eventId/login`,

client/src/pages/MainPage/MainPage.tsx

@@ -1,4 +1,7 @@
+import {useEffect} from 'react';
+
 import Image from '@components/Design/components/Image/Image';
+import useRequestGetUserInfo from '@hooks/queries/auth/useRequestGetUserInfo';
 
 import usePageBackground from '@hooks/usePageBackground';
 
@@ -13,10 +16,12 @@ import CreatorSection from './Section/CreatorSection/CreatorSection';
 
 const MainPage = () => {
   const {isVisible} = usePageBackground();
+  const {isGuest} = useRequestGetUserInfo();
+
   return (
     <div css={mainContainer}>
-      <Nav />
-      <MainSection />
+      <Nav isGuest={isGuest} />
+      <MainSection isGuest={isGuest} />
       <DescriptionSection />
       <FeatureSection />
       <CreatorSection />

client/src/pages/MainPage/Nav/Nav.tsx

@@ -1,16 +1,20 @@
 import {useNavigate} from 'react-router-dom';
 
+import {UseRequestGetUserInfo} from '@hooks/queries/auth/useRequestGetUserInfo';
+
 import {Button, Text, Icon, TopNav, IconButton} from '@HDesign/index';
 
 import {ROUTER_URLS} from '@constants/routerUrls';
 
 import {navFixedStyle, navStyle, navWrapperStyle} from './Nav.style';
 
-const Nav = () => {
+type NavProps = Pick<UseRequestGetUserInfo, 'isGuest'>;
+
+const Nav = ({isGuest}: NavProps) => {
   const navigate = useNavigate();
 
   const goLogin = () => {
-    navigate(ROUTER_URLS.login);
+    navigate(isGuest ? ROUTER_URLS.login : ROUTER_URLS.createMemberEvent);
   };
 
   return (

client/src/pages/MainPage/Section/MainSection/MainSection.tsx

@@ -2,18 +2,21 @@ import {useNavigate} from 'react-router-dom';
 
 import Button from '@HDesign/components/Button/Button';
 import Text from '@HDesign/components/Text/Text';
+import {UseRequestGetUserInfo} from '@hooks/queries/auth/useRequestGetUserInfo';
 
 import {Icon} from '@components/Design';
 
 import {ROUTER_URLS} from '@constants/routerUrls';
 
 import {animateWithDelay, chevronStyle, mainSectionStyle, sectionStyle} from './MainSection.style';
 
-const MainSection = () => {
+type NavProps = Pick<UseRequestGetUserInfo, 'isGuest'>;
+
+const MainSection = ({isGuest}: NavProps) => {
   const navigate = useNavigate();
 
   const handleClick = () => {
-    navigate(ROUTER_URLS.login);
+    navigate(isGuest ? ROUTER_URLS.login : ROUTER_URLS.createMemberEvent);
   };
 
   return (

client/src/router.tsx

@@ -49,100 +49,95 @@ const router = createBrowserRouter([
         element: <MainPage />,
       },
       {
-        element: <EssentialQueryApp />,
+        path: ROUTER_URLS.createGuestEvent,
+        element: <CreateGuestEventFunnel />,
+      },
+      {
+        path: ROUTER_URLS.createMemberEvent,
+        element: <CreateMemberEventFunnel />,
+      },
+      {
+        path: ROUTER_URLS.login,
+        element: <LoginPage />,
+      },
+      {
+        path: ROUTER_URLS.myPage,
+        element: <MyPage />,
+      },
+      {
+        path: ROUTER_URLS.kakaoLoginRedirectUri,
+        element: <LoginRedirectPage />,
+        errorElement: <LoginFailFallback />,
+      },
+      {
+        path: ROUTER_URLS.event,
+        element: (
+          <EventLoader>
+            <EventPage />
+          </EventLoader>
+        ),
         children: [
           {
-            path: ROUTER_URLS.createGuestEvent,
-            element: <CreateGuestEventFunnel />,
-          },
-          {
-            path: ROUTER_URLS.createMemberEvent,
-            element: <CreateMemberEventFunnel />,
-          },
-          {
-            path: ROUTER_URLS.login,
-            element: <LoginPage />,
-          },
-          {
-            path: ROUTER_URLS.myPage,
-            element: <MyPage />,
-          },
-          {
-            path: ROUTER_URLS.kakaoLoginRedirectUri,
-            element: <LoginRedirectPage />,
-            errorElement: <LoginFailFallback />,
-          },
-          {
-            path: ROUTER_URLS.event,
+            path: ROUTER_URLS.eventManage,
             element: (
-              <EventLoader>
-                <EventPage />
-              </EventLoader>
+              <AuthGate>
+                <AdminPage />
+              </AuthGate>
             ),
-            children: [
-              {
-                path: ROUTER_URLS.eventManage,
-                element: (
-                  <AuthGate>
-                    <AdminPage />
-                  </AuthGate>
-                ),
-              },
-              {
-                path: ROUTER_URLS.home,
-                element: <HomePage />,
-              },
-              {
-                path: ROUTER_URLS.guestEventLogin,
-                element: <GuestEventLogin />,
-              },
-              {
-                path: ROUTER_URLS.memberEventLogin,
-                element: <MemberEventLogin />,
-              },
-            ],
-          },
-          {
-            path: ROUTER_URLS.addBill,
-            element: <AddBillFunnel />,
-          },
-          {
-            path: ROUTER_URLS.member,
-            element: <EventMember />,
-          },
-          {
-            path: ROUTER_URLS.editBill,
-            element: <EditBillPage />,
-          },
-          {
-            path: ROUTER_URLS.eventEdit,
-            element: <Account />,
-          },
-          {
-            path: ROUTER_URLS.images,
-            element: <ImagesPage />,
           },
           {
-            path: ROUTER_URLS.addImages,
-            element: <AddImagesPage />,
+            path: ROUTER_URLS.home,
+            element: <HomePage />,
           },
           {
-            path: ROUTER_URLS.send,
-            element: <SendPage />,
-            errorElement: <SendErrorPage />,
+            path: ROUTER_URLS.guestEventLogin,
+            element: <GuestEventLogin />,
           },
           {
-            path: ROUTER_URLS.qrCode,
-            element: <QRCodePage />,
+            path: ROUTER_URLS.memberEventLogin,
+            element: <MemberEventLogin />,
           },
         ],
       },
       {
-        path: '*',
-        element: <ErrorPage />,
+        path: ROUTER_URLS.addBill,
+        element: <AddBillFunnel />,
+      },
+      {
+        path: ROUTER_URLS.member,
+        element: <EventMember />,
+      },
+      {
+        path: ROUTER_URLS.editBill,
+        element: <EditBillPage />,
+      },
+      {
+        path: ROUTER_URLS.eventEdit,
+        element: <Account />,
+      },
+      {
+        path: ROUTER_URLS.images,
+        element: <ImagesPage />,
+      },
+      {
+        path: ROUTER_URLS.addImages,
+        element: <AddImagesPage />,
+      },
+      {
+        path: ROUTER_URLS.send,
+        element: <SendPage />,
+        errorElement: <SendErrorPage />,
+      },
+      {
+        path: ROUTER_URLS.qrCode,
+        element: <QRCodePage />,
       },
     ],
   },
+  {
+    path: '*',
+    element: <ErrorPage />,
+  },
 ]);
 
 export default router;