css 적용

반복되는 구조

빨간색

레이아웃 형식은 그대로에 데이터만 바뀜

⇒ 컴포넌트로 구분

⇒ 레이아웃 및 스타일 (header, button)만 공통 style.js에서 관리하기

파란색

레이아웃 형식 그대로, 데이터도 바뀌지 않고 기능도 그대로

⇒ index.jsx에서 공통 스타일로 관리

확장성(?)을 고려하기

만약, 페이지가 늘어나던가 줄어들면 어떻게하지? 

⇒ 페이지별 반복되는 로직을 추상화화여 관리하기

# 페이지 구조
.
├── EssentialInfo.stories.jsx
├── EssentialInfo.style.js
├── SubPages
│   ├── BelongTeam.jsx
│   ├── EssentailCallback.jsx
│   ├── Introduction.jsx
│   ├── Nickname.jsx
│   ├── Portfolio.jsx
│   ├── ProfileImage.jsx
│   ├── SessionJob.jsx
│   ├── Skills.jsx
│   └── Slogan.jsx
└── index.jsx

바뀌는 컨텐츠는 react-router-dom의 nested router과 outlet을 활용했다.

// index.jsx
import React from 'react';
import { Outlet } from 'react-router-dom';
import Button from 'components/Common/Button';
import WithProvider from 'hoc/withProvider';
import EssentialFormProvider, {
  useEssentialFormsAction,
} from 'contexts/EssentialForm/EssentialForm.Provider';
import * as S from './EssentialInfo.style';

export default WithProvider({ Provider: EssentialFormProvider, Component: EssentialInfo });

function EssentialInfo() {
  const { handleClickNextButton, handleClickPrevButton } = useEssentialFormsAction();

  return (
    <S.Layout>
      <S.DialogContainer>
        <Button theme="none" customStyle={S.CloseButton}>
          <S.CloseLarge />
        </Button>
        <S.AngleContainer>
          <Button theme="none" customStyle={S.AngleButton} onClick={handleClickPrevButton}>
            <S.LeftAngle />
          </Button>
          <Button theme="none" customStyle={S.AngleButton} onClick={handleClickNextButton}>
            <S.RightAngle />
          </Button>
        </S.AngleContainer>
        {/* Outlet === subPage  */}
        <Outlet />
      </S.DialogContainer>
    </S.Layout>
  );
}

로직과 ui분리

• props drilling을 해결하고 ui와 로직을 분리하기 위해 context의 useEssentialForm.js에서 로직을 관리한다.

.
└── EssentialForm
    ├── EssentialForm.Provider.jsx
    └── useEssentialForm.js   

• 페이지 넘어가는 순서를 개별 페이지가 아니라 중앙에서 관리 (

const essentailSubPagesRouteOrder = [
  ESSENTIAL_INFO.NICKNAME,
  ESSENTIAL_INFO.SKILL,
  ESSENTIAL_INFO.PROFILE_IMAGE,
  ESSENTIAL_INFO.SESSION_JOB,
  ESSENTIAL_INFO.SLOGAN,
  ESSENTIAL_INFO.BELONG_TEAM,
  ESSENTIAL_INFO.CONTENT,
  ESSENTIAL_INFO.PROTFOLIO,
  ESSENTIAL_INFO.CALLBACK,
];

그 외

• useForm 적용
• Common 컴포넌트 생성

└── Common
    ├── SelectInput
    ├── TextArea
    └── TextInput