[FE] 로그인 구축으로 인한 인증 전략 변경

client/src/components/Design/components/TopNav/NavItem.tsx

@@ -3,7 +3,7 @@ import type {NavItemProps} from './NavItem.type';
 
 import {useLocation, useNavigate} from 'react-router-dom';
 
-import getDeletedLastPath from '@utils/getDeletedLastPath';
+import getEventBaseUrl from '@utils/getEventBaseUrl';
 
 import TextButton from '../TextButton/TextButton';
 
@@ -28,7 +28,7 @@ const NavItem = ({displayName, routePath, onHandleRouteInFunnel, noEmphasis = fa
         navigate(-1);
         break;
       default:
-        navigate(`${getDeletedLastPath(location.pathname)}${routePath}`);
+        navigate(`/${getEventBaseUrl(location.pathname)}${routePath}`);
         break;
     }
   };

client/src/constants/routerUrls.ts

@@ -17,4 +17,7 @@ export const ROUTER_URLS = {
   qrCode: `${EVENT_WITH_EVENT_ID}/qrcode`,
   event: EVENT,
   login: '/login',
+  guestEventLogin: `${EVENT_WITH_EVENT_ID}/admin/guest/login`,
+  memberEventLogin: `${EVENT_WITH_EVENT_ID}/admin/member/login`,
+  kakaoLoginRedirectUri: process.env.KAKAO_REDIRECT_URI,
 };

client/src/constants/sessionStorageKeys.ts

@@ -1,6 +1,8 @@
 const SESSION_STORAGE_KEYS = {
   closeAccountBannerByEventToken: (eventToken: string) => `closeAccountBanner-${eventToken}`,
   closeDepositStateBannerByEventToken: (eventToken: string) => `closeDepositStateBanner-${eventToken}`,
+  createdByGuest: 'createdByGuest',
+  previousUrlForLogin: 'previousUrlForLogin',
 } as const;
 
 export default SESSION_STORAGE_KEYS;

client/src/hooks/createEvent/useCreateGuestEventData.tsx

@@ -1,12 +1,12 @@
 import {useState} from 'react';
 
 import useSetEventNameStep from './useSetEventNameStep';
-import {useSetNickNameStep} from './useSetNicknameStep';
+import {useSetNicknameStep} from './useSetNicknameStep';
 
 // 행사 생성 페이지에서 여러 스텝에 걸쳐 사용되는 상태를 선언해 내려주는 용도의 훅입니다.
 const useCreateGuestEventData = () => {
   const eventNameProps = useSetEventNameStep();
-  const nickNameProps = useSetNickNameStep();
+  const nickNameProps = useSetNicknameStep();
   const [eventToken, setEventToken] = useState('');
 
   return {

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

@@ -1,18 +1,40 @@
 import {useMutation} from '@tanstack/react-query';
+import {useNavigate} from 'react-router-dom';
 
 import {requestPostAuthentication} from '@apis/request/auth';
 
 import {useAuthStore} from '@store/authStore';
 
 import getEventIdByUrl from '@utils/getEventIdByUrl';
+import SessionStorage from '@utils/SessionStorage';
+
+import SESSION_STORAGE_KEYS from '@constants/sessionStorageKeys';
+
+import useRequestGetEvent from '../event/useRequestGetEvent';
 
 const useRequestPostAuthentication = () => {
   const eventId = getEventIdByUrl();
+  const navigate = useNavigate();
   const {updateAuth} = useAuthStore();
 
+  const {createdByGuest} = useRequestGetEvent();
+
   const {mutate, ...rest} = useMutation({
     mutationFn: () => requestPostAuthentication({eventId}),
     onSuccess: () => updateAuth(true),
+    onError: () => {
+      if (!window.location.pathname.includes('/guest/login') && !window.location.pathname.includes('/member/login')) {
+        SessionStorage.set<string>(SESSION_STORAGE_KEYS.previousUrlForLogin, window.location.pathname);
+
+        const currentPath = window.location.pathname;
+
+        if (createdByGuest) {
+          navigate(`${currentPath}/guest/login`);
+        } else {
+          navigate(`${currentPath}/member/login`);
+        }
+      }
+    },
   });
 
   return {

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

@@ -1,18 +1,30 @@
 import {useMutation} from '@tanstack/react-query';
+import {useNavigate} from 'react-router-dom';
 
 import {RequestPostToken, requestPostToken} from '@apis/request/auth';
 
 import {useAuthStore} from '@store/authStore';
 
 import getEventIdByUrl from '@utils/getEventIdByUrl';
+import SessionStorage from '@utils/SessionStorage';
+
+import SESSION_STORAGE_KEYS from '@constants/sessionStorageKeys';
 
 const useRequestPostLogin = () => {
   const eventId = getEventIdByUrl();
   const {updateAuth} = useAuthStore();
+  const navigate = useNavigate();
 
   const {mutate, ...rest} = useMutation({
     mutationFn: ({password}: RequestPostToken) => requestPostToken({eventId, password}),
-    onSuccess: () => updateAuth(true),
+    onSuccess: () => {
+      const previousUrlForLogin = SessionStorage.get<string>(SESSION_STORAGE_KEYS.previousUrlForLogin);
+      if (previousUrlForLogin) {
+        SessionStorage.remove(SESSION_STORAGE_KEYS.previousUrlForLogin);
+        navigate(previousUrlForLogin, {replace: true});
+      }
+      updateAuth(true);
+    },
   });
 
   return {postLogin: mutate, ...rest};

client/src/hooks/queries/event/useRequestGetEvent.ts

@@ -1,4 +1,4 @@
-import {useQuery} from '@tanstack/react-query';
+import {useSuspenseQuery} from '@tanstack/react-query';
 
 import {requestGetEvent} from '@apis/request/event';
 import {WithErrorHandlingStrategy} from '@errors/RequestGetError';
@@ -10,15 +10,16 @@ import QUERY_KEYS from '@constants/queryKeys';
 const useRequestGetEvent = ({...props}: WithErrorHandlingStrategy | null = {}) => {
   const eventId = getEventIdByUrl();
 
-  const {data, ...rest} = useQuery({
+  const {data, ...rest} = useSuspenseQuery({
     queryKey: [QUERY_KEYS.event],
     queryFn: () => requestGetEvent({eventId, ...props}),
   });
 
   return {
-    eventName: data?.eventName ?? '',
-    bankName: data?.bankName ?? '',
-    accountNumber: data?.accountNumber ?? '',
+    eventName: data.eventName,
+    bankName: data.bankName,
+    accountNumber: data.accountNumber,
+    createdByGuest: data.createdByGuest,
     ...rest,
   };
 };

client/src/hooks/useAmplitude.ts

@@ -1,4 +1,4 @@
-import {EventName} from 'types/createEvent';
+import {EventName} from 'types/serviceType';
 
 import {useAmplitudeStore} from '@store/amplitudeStore';
 

client/src/hooks/useEventPageLayout.ts

@@ -9,7 +9,7 @@ import useRequestGetSteps from './queries/step/useRequestGetSteps';
 
 const useEventPageLayout = () => {
   const eventId = getEventIdByUrl();
-  const {eventName, bankName, accountNumber} = useRequestGetEvent();
+  const {eventName, bankName, accountNumber, createdByGuest} = useRequestGetEvent();
   const {isAdmin} = useAuthStore();
   const {totalExpenseAmount} = useTotalExpenseAmountStore();
   const {members} = useRequestGetAllMembers();
@@ -20,6 +20,7 @@ const useEventPageLayout = () => {
     eventName,
     bankName,
     accountNumber,
+    createdByGuest,
   };
 
   const eventSummary = {

client/src/hooks/useLoginPage.ts

@@ -1,57 +1,37 @@
-import {useEffect} from 'react';
-import {useLocation, useNavigate} from 'react-router-dom';
-
-import {useAuthStore} from '@store/authStore';
+import {useNavigate} from 'react-router-dom';
 
 import getKakaoRedirectUrl from '@utils/getKakaoRedirectUrl';
+import SessionStorage from '@utils/SessionStorage';
 
 import {ROUTER_URLS} from '@constants/routerUrls';
+import SESSION_STORAGE_KEYS from '@constants/sessionStorageKeys';
 
 import useRequestGetKakaoClientId from './queries/auth/useRequestGetKakaoClientId';
 import useAmplitude from './useAmplitude';
-import useRequestGetKakaoLogin from './queries/auth/useRequestGetKakaoLogin';
 
 const useLoginPage = () => {
   const navigate = useNavigate();
-  const location = useLocation();
   const {trackStartCreateEvent} = useAmplitude();
-  const {updateAuth} = useAuthStore();
-  const {requestGetKakaoLogin} = useRequestGetKakaoLogin();
 
   const {requestGetClientId} = useRequestGetKakaoClientId();
 
-  const goKakaoLogin = async () => {
+  const goKakaoLogin = async (previousUrl?: string) => {
     const queryResult = await requestGetClientId();
     const clientId = queryResult.data?.clientId;
 
+    if (typeof previousUrl !== 'undefined') {
+      SessionStorage.set<string>(SESSION_STORAGE_KEYS.previousUrlForLogin, previousUrl);
+    }
+
     const link = `https://kauth.kakao.com/oauth/authorize?client_id=${clientId}&redirect_uri=${getKakaoRedirectUrl()}&response_type=code`;
     window.location.href = link;
   };
 
   const goNonLoginCreateEvent = () => {
     trackStartCreateEvent({login: false});
-    navigate(ROUTER_URLS.createEvent);
+    navigate(ROUTER_URLS.createGuestEvent);
   };
 
-  useEffect(() => {
-    if (location.search === '') return;
-
-    const code = new URLSearchParams(location.search).get('code');
-
-    const kakaoLogin = async () => {
-      if (code) {
-        await requestGetKakaoLogin();
-        updateAuth(true);
-
-        // 추후에 업데이트 하는 로직 필요
-        trackStartCreateEvent({login: true});
-        navigate(ROUTER_URLS.createEvent);
-      }
-    };
-
-    kakaoLogin();
-  }, [location.search]);
-
   return {goKakaoLogin, goNonLoginCreateEvent};
 };
 

client/src/hooks/useReportsPage.ts

@@ -3,7 +3,7 @@ import {useLocation, useNavigate, useOutletContext} from 'react-router-dom';
 
 import {EventPageContextProps} from '@pages/EventPage/EventPageLayout';
 
-import getDeletedLastPath from '@utils/getDeletedLastPath';
+import getEventBaseUrl from '@utils/getEventBaseUrl';
 
 import {useSearchReports} from './useSearchReports';
 import toast from './useToast/toast';
@@ -37,7 +37,7 @@ const useReportsPage = () => {
       eventToken,
     };
 
-    navigate(`${getDeletedLastPath(location.pathname)}/${memberId}/send`, {state: sendInfo});
+    navigate(`/${getEventBaseUrl(location.pathname)}/${memberId}/send`, {state: sendInfo});
   };
 
   const onCopy = async (amount: number) => {

client/src/mocks/handlers/authHandlers.ts

@@ -9,7 +9,14 @@ import {MOCK_API_PREFIX} from '@mocks/mockEndpointPrefix';
 export const authHandler = [
   // POST /api/eventId/auth (requestPostAuthentication)
   http.post(`${MOCK_API_PREFIX}${ADMIN_API_PREFIX}/:eventId/auth`, () => {
-    return new HttpResponse(null, {status: 200});
+    // return new HttpResponse(null, {status: 200});
+    return HttpResponse.json(
+      {
+        errorCode: 'TOKEN_NOT_FOUND',
+        message: '토큰이 존재하지 않습니다.',
+      },
+      {status: 401},
+    );
   }),
 
   http.get(`${MOCK_API_PREFIX}/api/login/kakao`, () => {

client/src/mocks/sharedState.ts

@@ -2,6 +2,7 @@ export let eventData = {
   eventName: '행동대장 야유회',
   bankName: '',
   accountNumber: '000000-01-121212',
+  createdByGuest: true,
 };
 
 export let memberData = {

client/src/pages/AccountPage/Account.tsx

@@ -7,7 +7,7 @@ import useAccount from '@hooks/useAccount';
 
 import {FixedButton, Flex, FunnelLayout, Input, MainLayout, Top, TopNav} from '@components/Design';
 
-import getDeletedLastPath from '@utils/getDeletedLastPath';
+import getEventBaseUrl from '@utils/getEventBaseUrl';
 
 const Account = () => {
   const navigate = useNavigate();
@@ -28,7 +28,7 @@ const Account = () => {
 
   const enrollAccountAndNavigateAdmin = async () => {
     await enrollAccount();
-    navigate(getDeletedLastPath(location.pathname));
+    navigate(`/${getEventBaseUrl(location.pathname)}/admin`);
   };
 
   return (

client/src/pages/CreateEventPage/CreateGuestEventPage/CreateGuestEventFunnel.tsx

@@ -51,7 +51,7 @@ const CreateGuestEventFunnel = () => {
         <Funnel.Step name="eventPassword">
           <SetEventPasswordStep
             moveToNextStep={moveToNextStep}
-            nickname={nickNameProps.nickName}
+            nickname={nickNameProps.nickname}
             eventName={eventNameProps.eventName}
             setEventToken={setEventToken}
           />

client/src/pages/EventPage/AuthGate/index.tsx

@@ -2,24 +2,13 @@ import {useEffect} from 'react';
 
 import useRequestPostAuthentication from '@hooks/queries/auth/useRequestPostAuthentication';
 
-import {useAuthStore} from '@store/authStore';
-
-type AuthGateProps = React.PropsWithChildren & {
-  fallback: React.ReactNode;
-};
-
-const AuthGate = ({children, fallback}: AuthGateProps) => {
-  const {isError, postAuthenticate} = useRequestPostAuthentication();
-  const {isAdmin} = useAuthStore();
+const AuthGate = ({children}: React.PropsWithChildren) => {
+  const {postAuthenticate} = useRequestPostAuthentication();
 
   useEffect(() => {
     postAuthenticate();
   }, [postAuthenticate]);
 
-  if (isError && !isAdmin) {
-    return fallback;
-  }
-
   return children;
 };
 

client/src/pages/EventPage/AdminPage/EventLoginPage.tsx → client/src/pages/EventPage/EventPageFallback/Login/GusetEventLogin.tsx

@@ -1,25 +1,16 @@
-import {css} from '@emotion/react';
-
 import Top from '@components/Design/components/Top/Top';
 
 import useEventLogin from '@hooks/useEventLogin';
 
-import {FixedButton, Input} from '@HDesign/index';
+import {FixedButton, FunnelLayout, Input} from '@HDesign/index';
 
 import RULE from '@constants/rule';
 
-const EventLoginPage = () => {
+const GuestEventLogin = () => {
   const {password, errorMessage, handleChange, canSubmit, submitPassword} = useEventLogin();
 
   return (
-    <div
-      css={css`
-        display: flex;
-        flex-direction: column;
-        gap: 1rem;
-        padding: 1rem;
-      `}
-    >
+    <FunnelLayout>
       <Top>
         <Top.Line
           text={`행사 생성 시 설정한 ${RULE.maxEventPasswordLength}자리`}
@@ -41,8 +32,8 @@ const EventLoginPage = () => {
         ></Input>
         <FixedButton disabled={!canSubmit}>관리 페이지로</FixedButton>
       </form>
-    </div>
+    </FunnelLayout>
   );
 };
 
-export default EventLoginPage;
+export default GuestEventLogin;