[FE] 행사 생성 페이지에 퍼널 방식 적용

client/cypress/e2e/createEvent.cy.ts

@@ -1,4 +1,6 @@
+import {ROUTER_URLS} from '@constants/routerUrls';
 import CONSTANTS from '../constants/constants';
+
 beforeEach(() => {
   cy.blockSentry();
   cy.blockKakao();
@@ -8,18 +10,17 @@ describe('Flow: 랜딩 페이지에서부터 이벤트를 생성 완료하는 fl
   it('랜딩페이지에서 "행사 생성하기" 버튼을 눌러 행사 이름 입력 페이지로 이동해야 한다.', () => {
     cy.visit('/');
     cy.get('header').find('button').click();
-    cy.url().should('include', '/event/create/name');
+    cy.url().should('include', ROUTER_URLS.createEvent);
   });
 
   context('행사 이름 입력 페이지', () => {
     beforeEach(() => {
-      cy.visit('/event/create/name');
+      cy.visit(ROUTER_URLS.createEvent);
     });
 
     it('행사 이름 입력 페이지에서 input이 포커싱 되어 있고, "다음" 버튼이 비활성화 되어 있어야 한다.', () => {
       cy.get('input').focused();
       cy.get('button').contains('다음').should('have.attr', 'disabled');
-      cy.url().should('include', '/event/create/name');
     });
 
     it('행사 이름이 1자 이상 입력된 경우 "다음" 버튼이 활성화 되고, 값이 없는 경우 "다음" 버튼이 비활성화 되어야 한다.', () => {
@@ -28,13 +29,14 @@ describe('Flow: 랜딩 페이지에서부터 이벤트를 생성 완료하는 fl
       cy.get('input').clear();
       cy.get('input').should('have.value', '');
       cy.get('button').contains('다음').should('have.attr', 'disabled');
-      cy.url().should('include', '/event/create/name');
     });
 
     it('행사 이름을 입력한 후 "다음" 버튼을 누르면 행사 비밀번호 설정 화면으로 이동해야 한다.', () => {
       cy.get('input').type(CONSTANTS.eventName);
       cy.get('button').contains('다음').click();
-      cy.url().should('include', '/event/create/password');
+
+      // 다음 버튼을 클릭하면 /create/event 경로가 아니라 /create/event/?로 가네요.. 그래서 일단 제거함.
+      cy.contains('비밀번호').should('exist');
     });
   });
 
@@ -46,7 +48,6 @@ describe('Flow: 랜딩 페이지에서부터 이벤트를 생성 완료하는 fl
     it('행사 비밀번호 입력 페이지에서 input이 포커싱 되어 있고, "행동 개시!" 버튼이 비활성화 되어 있어야 한다.', () => {
       cy.get('input').focused();
       cy.get('button').contains('행동 개시!').should('have.attr', 'disabled');
-      cy.url().should('include', '/event/create/password');
     });
 
     it('행사 비밀번호에 숫자가 아닌 입력을 할 경우 값이 입력되지 않아야 한다.', () => {
@@ -65,16 +66,13 @@ describe('Flow: 랜딩 페이지에서부터 이벤트를 생성 완료하는 fl
       cy.get('input').clear();
       cy.get('input').should('have.value', '');
       cy.get('button').contains('행동 개시!').should('have.attr', 'disabled');
-      cy.url().should('include', '/event/create/password');
     });
 
     it('행사 비밀번호을 입력한 후 "행동 개시!" 버튼을 누르면 행사 생성 완료 화면으로 이동해야 한다.', () => {
       cy.interceptAPI({type: 'postEvent', statusCode: 200});
       cy.interceptAPI({type: 'getEventName', statusCode: 200});
       cy.get('input').type(CONSTANTS.eventPassword);
       cy.get('button').contains('행동 개시!').click();
-
-      cy.url().should('include', '/event/create/complete');
     });
   });
 });

client/cypress/support/commands.ts

@@ -1,3 +1,4 @@
+import {ROUTER_URLS} from '@constants/routerUrls';
 import CONSTANTS from '../constants/constants';
 
 type APIType = 'sentry' | 'postEvent' | 'getEventName';
@@ -46,10 +47,9 @@ Cypress.Commands.add('interceptAPI', ({type, delay = 0, statusCode = 200}: Inter
 });
 
 Cypress.Commands.add('createEventName', (eventName: string) => {
-  cy.visit('/event/create/name');
+  cy.visit(ROUTER_URLS.createEvent);
   cy.get('input').type(eventName);
   cy.get('button').contains('다음').click();
-  cy.url().should('include', '/event/create/password');
 });
 
 declare global {

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

@@ -1,14 +1,17 @@
 /** @jsxImportSource @emotion/react */
-import React from 'react';
 import {useNavigate} from 'react-router-dom';
 
 import TextButton from '@HDcomponents/TextButton/TextButton';
 
-function Back() {
+type BackProps = {
+  onClick?: () => void;
+};
+
+function Back({onClick}: BackProps) {
   const navigate = useNavigate();
 
   return (
-    <TextButton onClick={() => navigate(-1)} textSize="bodyBold" textColor="gray">
+    <TextButton onClick={() => (onClick ? onClick() : navigate(-1))} textSize="bodyBold" textColor="gray">
       뒤로가기
     </TextButton>
   );

client/src/constants/routerUrls.ts

@@ -1,9 +1,7 @@
 export const ROUTER_URLS = {
   main: '/',
-  eventCreateName: '/event/create/name',
-  eventCreatePassword: '/event/create/password',
-  eventCreateComplete: '/event/create/complete',
-  event: '/event', // TODO: (@weadie) baseurl을 어떻게 관리할 것인가?
+  createEvent: '/event/create',
+  event: '/event',
   eventLogin: '/event/:eventId/login',
   eventManage: '/event/:eventId/admin',
   home: '/event/:eventId/home',

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

@@ -3,12 +3,13 @@ import {useMutation} from '@tanstack/react-query';
 import {RequestPostEvent, requestPostEvent} from '@apis/request/event';
 
 const useRequestPostEvent = () => {
-  const {mutate, ...rest} = useMutation({
+  const {mutate, mutateAsync, ...rest} = useMutation({
     mutationFn: ({eventName, password}: RequestPostEvent) => requestPostEvent({eventName, password}),
   });
 
+  // 실행 순서를 await으로 보장하기 위해 mutateAsync 사용
   return {
-    postEvent: mutate,
+    postEvent: mutateAsync,
     isPostEventPending: rest.isPending,
     ...rest,
   };

client/src/hooks/useCreateEventData.tsx

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

client/src/hooks/useFunnel.tsx

@@ -0,0 +1,58 @@
+import {useState} from 'react';
+
+type UseFunnel = {
+  defaultStep: string;
+  stepList: string[];
+};
+
+type StepProps = {
+  children: React.ReactNode;
+  name: string;
+};
+
+type FunnelProps = {
+  children: React.ReactElement<StepProps>[];
+};
+
+const useFunnel = ({defaultStep, stepList}: UseFunnel) => {
+  const [step, setStep] = useState(defaultStep);
+
+  const moveToNextStep = () => {
+    const curStepIndex = stepList.indexOf(step);
+
+    if (curStepIndex === stepList.length - 1) return;
+
+    setStep(stepList[curStepIndex + 1]);
+  };
+
+  const moveToPrevStep = () => {
+    const curStepIndex = stepList.indexOf(step);
+
+    if (curStepIndex === 0) return;
+
+    setStep(stepList[curStepIndex - 1]);
+  };
+
+  const Step = (stepProps: StepProps) => {
+    return <>{stepProps.children}</>;
+  };
+
+  const Funnel = ({children}: FunnelProps) => {
+    const targetStep = children.find(curStep => curStep.props.name === step);
+
+    if (!targetStep)
+      throw new Error(`현재 ${step} 단계에 보여줄 컴포넌트가 존재하지 않습니다. Step 컴포넌트를 호출해 사용해주세요.`);
+
+    return <>{targetStep}</>;
+  };
+
+  return {
+    Step,
+    step,
+    Funnel,
+    moveToNextStep,
+    moveToPrevStep,
+  };
+};
+
+export default useFunnel;

client/src/hooks/useSetEventNamePage.ts → client/src/hooks/useSetEventNameStep.ts

@@ -2,7 +2,9 @@ import {useState} from 'react';
 
 import validateEventName from '@utils/validate/validateEventName';
 
-const useSetEventNamePage = () => {
+export type UseSetEventNameStepReturnType = ReturnType<typeof useSetEventNameStep>;
+
+const useSetEventNameStep = () => {
   const [eventName, setEventName] = useState('');
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
   const [canSubmit, setCanSubmit] = useState(false);
@@ -29,4 +31,4 @@ const useSetEventNamePage = () => {
   };
 };
 
-export default useSetEventNamePage;
+export default useSetEventNameStep;

client/src/hooks/useSetEventPasswordStep.ts

@@ -0,0 +1,72 @@
+import {useState} from 'react';
+import {useNavigate} from 'react-router-dom';
+
+import validateEventPassword from '@utils/validate/validateEventPassword';
+
+import RULE from '@constants/rule';
+
+import useRequestPostEvent from './queries/event/useRequestPostEvent';
+
+export type UseSetEventPasswordStepReturnType = ReturnType<typeof useSetEventPasswordStep>;
+
+const useSetEventPasswordStep = () => {
+  const [password, setPassword] = useState('');
+  const [errorMessage, setErrorMessage] = useState('');
+  const [canSubmit, setCanSubmit] = useState(false);
+  const {postEvent: requestPostEvent, isPostEventPending} = useRequestPostEvent();
+
+  const submitDataForPostEvent = async ({
+    event,
+    eventName,
+    setEventToken,
+  }: {
+    event: React.FormEvent<HTMLFormElement>;
+    eventName: string;
+    setEventToken: (eventToken: string) => void;
+  }) => {
+    event.preventDefault();
+
+    await postEvent(eventName, setEventToken);
+  };
+
+  const getPasswordWithPad = () => {
+    return String(password).padStart(4, '0');
+  };
+
+  const postEvent = async (eventName: string, updateEventToken: (eventToken: string) => void) => {
+    await requestPostEvent(
+      {eventName, password: getPasswordWithPad()},
+      {
+        onSuccess: ({eventId}) => {
+          updateEventToken(eventId);
+        },
+      },
+    );
+  };
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = event.target.value;
+    const validation = validateEventPassword(newValue);
+
+    setCanSubmit(newValue.length === RULE.maxEventPasswordLength);
+
+    if (validation.isValid) {
+      setPassword(newValue);
+      setErrorMessage('');
+    } else {
+      event.target.value = password;
+      setErrorMessage(validation.errorMessage ?? '');
+    }
+  };
+
+  return {
+    submitDataForPostEvent,
+    errorMessage,
+    handleChange,
+    canSubmit,
+    isPostEventPending,
+    password,
+  };
+};
+
+export default useSetEventPasswordStep;

client/src/pages/CreateEventPage/CompleteCreateEventPage.tsx → client/src/pages/CreateEventPage/CompleteCreateEventStep.tsx

@@ -8,12 +8,12 @@ import {FixedButton, MainLayout, Title, TopNav} from '@HDesign/index';
 
 import {ROUTER_URLS} from '@constants/routerUrls';
 
-const CompleteCreateEventPage = () => {
-  const navigate = useNavigate();
-  const location = useLocation();
+type CompleteCreateEventStepProps = {
+  eventToken: string;
+};
 
-  const params = new URLSearchParams(location.search);
-  const eventId = params.get('eventId');
+const CompleteCreateEventStep = ({eventToken}: CompleteCreateEventStepProps) => {
+  const navigate = useNavigate();
 
   return (
     <MainLayout backgroundColor="white">
@@ -32,9 +32,9 @@ const CompleteCreateEventPage = () => {
         </Top>
         <RunningDog />
       </div>
-      <FixedButton onClick={() => navigate(`${ROUTER_URLS.event}/${eventId}/admin`)}>관리 페이지로 이동</FixedButton>
+      <FixedButton onClick={() => navigate(`${ROUTER_URLS.event}/${eventToken}/admin`)}>관리 페이지로 이동</FixedButton>
     </MainLayout>
   );
 };
 
-export default CompleteCreateEventPage;
+export default CompleteCreateEventStep;