[온보딩] funnel 이용하여 사용자 정보 수집 로직

src/App.tsx

@@ -4,6 +4,7 @@ import { RouterProvider } from 'react-router-dom';
 import { RecoilRoot } from 'recoil';
 import router from './router/Router';
 import GlobalStyle from './style/GlobalStyle';
+import styled from 'styled-components';
 
 function App() {
   const [queryClient] = useState(
@@ -17,13 +18,25 @@ function App() {
       }),
   );
   return (
-    <QueryClientProvider client={queryClient}>
-      <RecoilRoot>
-        <RouterProvider router={router} />
-        <GlobalStyle />
-      </RecoilRoot>
-    </QueryClientProvider>
+    <Wrapper>
+      <QueryClientProvider client={queryClient}>
+        <RecoilRoot>
+          <RouterProvider router={router} />
+          <GlobalStyle />
+        </RecoilRoot>
+      </QueryClientProvider>
+    </Wrapper>
   );
 }
 
 export default App;
+
+const Wrapper = styled.div`
+  background-color: white;
+  border: none;
+  min-height: calc(var(--vh, 1vh) * 100);
+  /* min-width: var(--app-max-width, 375px); */
+  margin-left: auto;
+  margin-right: auto;
+  position: relative;
+`;

src/assets/svg/IcCancelCircleFinal.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import type { SVGProps } from 'react';
 const SvgIcCancelCircleFinal = (props: SVGProps<SVGSVGElement>) => (
   <svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' {...props}>

src/components/common/Funnel/Funnel.tsx

@@ -0,0 +1,35 @@
+import { Children, isValidElement, PropsWithChildren, ReactElement, useEffect } from 'react';
+import { NonEmptyArray } from '../../../types/utility';
+import { assert } from '../../../../utils/errors';
+
+export interface FunnelProps<Steps extends NonEmptyArray<string>> {
+  steps: Steps;
+  step: Steps[number];
+  children: Array<ReactElement<StepProps<Steps>>> | ReactElement<StepProps<Steps>>;
+}
+
+export interface StepProps<Steps extends NonEmptyArray<string>> extends PropsWithChildren {
+  name: Steps[number];
+  onNext?: VoidFunction;
+}
+
+export const Funnel = <Steps extends NonEmptyArray<string>>(props: FunnelProps<Steps>) => {
+  const { steps, step, children } = props;
+  const validChildren = Children.toArray(children)
+    .filter(isValidElement<StepProps<Steps>>)
+    .filter(({ props }) => steps.includes(props.name));
+
+  const targetStep = validChildren.find((child) => child.props.name === step);
+
+  assert(targetStep != null, `${step} 스텝 컴포넌트를 찾지 못했습니다.`);
+
+  return targetStep;
+};
+
+export const Step = <T extends NonEmptyArray<string>>({ onNext, children }: StepProps<T>) => {
+  useEffect(() => {
+    onNext?.();
+  }, [onNext]);
+
+  return children;
+};

src/components/onboarding/step01/Step01.tsx

@@ -2,8 +2,14 @@ import { useState } from 'react';
 import Title from '../../common/title/Title';
 import * as S from './Step01.style';
 import { IcCancelCircleFinal } from '../../../assets/svg';
+import BtnNext from '../../common/Button/Next/BtnNext';
 
-const NameInput = () => {
+interface NameInputProps {
+  onNext: VoidFunction;
+}
+
+const NameInput = (props: NameInputProps) => {
+  const { onNext } = props;
   const [text, setText] = useState<string>('');
 
   const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -13,7 +19,6 @@ const NameInput = () => {
     inputValue.length + unicodeChars <= 10 ? setText(inputValue) : e.preventDefault();
   };
 
-
   const handleBtnClick = () => {
     setText('');
   };
@@ -42,6 +47,18 @@ const NameInput = () => {
         </S.IconField>
       </S.Wrapper>
       <S.LetterLength>({text.length}/10)</S.LetterLength>
+      <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
+        <BtnNext
+          type='button'
+          onClick={onNext}
+          customStyle={{
+            position: 'absolute',
+            bottom: '0',
+          }}
+        >
+          다음
+        </BtnNext>
+      </div>
     </>
   );
 };

src/components/onboarding/step02/Step02.style.ts

@@ -6,4 +6,5 @@ export const ThumbnailWrapper = styled.div`
   width: 24rem;
   height: 24rem;
   margin: 0 auto;
+  margin-top: 6.1rem;
 `;

src/components/onboarding/step02/Step02.tsx

@@ -1,16 +1,35 @@
 import Title from '../../common/title/Title';
 import { IcPlusImageFinal } from '../../../assets/svg';
 import * as S from './Step02.style';
+import BtnNext from '../../common/Button/Next/BtnNext';
 
-const ThumbnailInput = () => {
+interface ThumbnailInputProps {
+  onNext: VoidFunction;
+}
+
+const ThumbnailInput = (props: ThumbnailInputProps) => {
   // TODO 이미지 클릭 시 사진 업로드
+  const { onNext } = props;
+
   return (
     <>
       <Title title='썸네일을 등록해주세요' />
-      <div style={{ width: '100%', marginTop: '11rem' }}>
+      <div style={{ width: '100%' }}>
         <S.ThumbnailWrapper>
           <IcPlusImageFinal style={{ width: '5rem', height: '5rem' }} />
         </S.ThumbnailWrapper>
+        <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
+          <BtnNext
+            type='button'
+            onClick={onNext}
+            customStyle={{
+              position: 'absolute',
+              bottom: '0',
+            }}
+          >
+            다음
+          </BtnNext>
+        </div>
       </div>
     </>
   );

src/components/onboarding/step03/Step03.tsx

@@ -1,8 +1,15 @@
 import Title from '../../common/title/Title';
 import { IcUnselectedCalender } from '../../../assets/svg';
 import * as S from './Step03.style';
+import BtnNext from '../../common/Button/Next/BtnNext';
+
+interface GiftDeliveryProps {
+  onNext: VoidFunction;
+}
+
+const GiftDelivery = (props: GiftDeliveryProps) => {
+  const { onNext } = props;
 
-const GiftDelivery = () => {
   return (
     <>
       {/* TODO 추후 로그인된 유저네임으로 변경 및 인풋창 클릭 시 켈린더 호출*/}
@@ -17,6 +24,19 @@ const GiftDelivery = () => {
           <IcUnselectedCalender style={{ width: '2.4rem', height: '2.4rem' }} />
         </S.IconField>
       </S.Wrapper>
+
+      <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
+        <BtnNext
+          type='button'
+          onClick={onNext}
+          customStyle={{
+            position: 'absolute',
+            bottom: '0',
+          }}
+        >
+          다음
+        </BtnNext>
+      </div>
     </>
   );
 };

src/components/onboarding/step04/Step04.tsx

@@ -2,9 +2,16 @@ import SubTitle from '../../common/title/SubTitle';
 import Title from '../../common/title/Title';
 import { IcUnselectedCalender, IcUnselectedClock } from '../../../assets/svg';
 import * as S from './Step04.style';
+import BtnNext from '../../common/Button/Next/BtnNext';
 
-const SetTournamentSchedule = () => {
+interface SetTournamentScheduleProps {
+  onNext: VoidFunction;
+}
+
+const SetTournamentSchedule = (props: SetTournamentScheduleProps) => {
   // TODO 인풋창 클릭 시 캘린더 & 시간 선택 창 구현
+  const { onNext } = props;
+
   return (
     <>
       <div>
@@ -32,6 +39,18 @@ const SetTournamentSchedule = () => {
           <IcUnselectedClock style={{ width: '2.4rem', height: '2.4rem' }} />
         </S.IconField>
       </S.Container>
+      <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
+        <BtnNext
+          type='button'
+          onClick={onNext}
+          customStyle={{
+            position: 'absolute',
+            bottom: '0',
+          }}
+        >
+          다음
+        </BtnNext>
+      </div>
     </>
   );
 };

src/components/onboarding/step05/Step05.tsx

@@ -1,11 +1,16 @@
+import BtnNext from '../../common/Button/Next/BtnNext';
 import SubTitle from '../../common/title/SubTitle';
 import Title from '../../common/title/Title';
 import * as S from './Step05.style';
 import TimeBox from './TimeBox';
 
-const SetTournamentDuration = () => {
-  // TODO 오늘 기준 날짜로 수정 & map함수로 수정
+interface SetTournamentDurationProps {
+  onNext: VoidFunction;
+}
 
+const SetTournamentDuration = (props: SetTournamentDurationProps) => {
+  // TODO 오늘 기준 날짜로 수정 & map함수로 수정
+  const { onNext } = props;
   return (
     <>
       <div>
@@ -18,6 +23,18 @@ const SetTournamentDuration = () => {
       <S.SetTournamentDurationWrapper>
         <TimeBox />
       </S.SetTournamentDurationWrapper>
+      <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
+        <BtnNext
+          type='button'
+          onClick={onNext}
+          customStyle={{
+            position: 'absolute',
+            bottom: '0',
+          }}
+        >
+          다음
+        </BtnNext>
+      </div>
     </>
   );
 };

src/core/onboarding.ts

@@ -4,4 +4,5 @@ export const ONBOARDING_FORM_STEP = [
   'PRESENT',
   'TOURNAMENT_SCHEDULE_REGISTRATION',
   'TOURNAMENT_PROCEEDING',
+  'GIFT_ROOM_FIX',
 ] as const;

src/hooks/useFunnel.tsx

@@ -0,0 +1,23 @@
+import { useMemo, useState } from 'react';
+import { NonEmptyArray } from '../types/utility';
+import { Funnel, FunnelProps, Step } from '../components/common/Funnel/Funnel';
+
+export const useFunnel = <Steps extends NonEmptyArray<string>>(
+  steps: Steps,
+  defaultStep: Steps[number],
+) => {
+  const [step, setStep] = useState<Steps[number]>(defaultStep);
+
+  const FunnelComponent = useMemo(
+    () =>
+      Object.assign(
+        (props: Omit<FunnelProps<Steps>, 'step' | 'steps'>) => (
+          <Funnel<Steps> step={step} steps={steps} {...props} />
+        ),
+        { Step },
+      ),
+    [step],
+  );
+
+  return { Funnel: FunnelComponent, step, setStep };
+};

src/pages/OnBoardingPage.tsx

@@ -1,12 +1,36 @@
 //온보딩 모든 컴포넌트를 funnel로 관리하는 최상위 페이지
 
 import styled from 'styled-components';
+import { ONBOARDING_FORM_STEP } from '../core/onboarding';
+import { useFunnel } from '../hooks/useFunnel';
 import NameInput from '../components/onboarding/step01/Step01';
+import ThumbnailInput from '../components/onboarding/step02/Step02';
+import GiftDelivery from '../components/onboarding/step03/Step03';
+import SetTournamentSchedule from '../components/onboarding/step04/Step04';
+import SetTournamentDuration from '../components/onboarding/step05/Step05';
 
 const OnBoardingPage = () => {
+  const { Funnel, setStep } = useFunnel(ONBOARDING_FORM_STEP, ONBOARDING_FORM_STEP[0]);
+
   return (
     <OnBoardingPageWrapper>
-      <NameInput />
+      <Funnel>
+        <Funnel.Step name='NAME'>
+          <NameInput onNext={() => setStep(() => 'THUMBNAIL')} />
+        </Funnel.Step>
+        <Funnel.Step name='THUMBNAIL'>
+          <ThumbnailInput onNext={() => setStep(() => 'PRESENT')} />
+        </Funnel.Step>
+        <Funnel.Step name='PRESENT'>
+          <GiftDelivery onNext={() => setStep(() => 'TOURNAMENT_SCHEDULE_REGISTRATION')} />
+        </Funnel.Step>
+        <Funnel.Step name='TOURNAMENT_SCHEDULE_REGISTRATION'>
+          <SetTournamentSchedule onNext={() => setStep(() => 'TOURNAMENT_PROCEEDING')} />
+        </Funnel.Step>
+        <Funnel.Step name='TOURNAMENT_PROCEEDING'>
+          <SetTournamentDuration onNext={() => setStep(() => 'GIFT_ROOM_FIX')} />
+        </Funnel.Step>
+      </Funnel>
     </OnBoardingPageWrapper>
   );
 };

src/types/utility.ts

@@ -0,0 +1 @@
+export type NonEmptyArray<T> = readonly [T, ...T[]];

utils/errors.ts

@@ -0,0 +1,9 @@
+export function assert(condition: unknown, error: Error | string = new Error()): asserts condition {
+  if (!condition) {
+    if (typeof error === 'string') {
+      throw new Error(error);
+    } else {
+      throw error;
+    }
+  }
+}