폴더 구조

personnalilty-test/
├── components/
├── pages/
│   ├── login/
│   ├── main/
│   ├── mypage/
│   ├── signup/         
│   └── index.js
│
├── features/
│   ├── login/
│   ├── mypage/
│   ├── personalityTest/
│   ├── signup/
│   ├── tests/
│   │     ├── components/
│   │     ├── container/
│   │     ├── hooks/
│   │     ├── schmeas/
│   │     ├── container/
│   │     ├── tests.const.ts
│   │     ├── tests.styles.ts
│   │     ├── tests.types.ts
│   │     ├── tests.util.ts
│   │     └──  tests.yup.ts
│   │
├── public/
│   ├── images/
│   └── fonts/
│
├── portal/
│
├── styles/
│   ├── styled.d.ts
│   ├── theme.ts
│   └── global-styles.ts
│
├── layout/
├── store/
├── utils/
├── types/
├── api/
├── types/
├── assets/
├── errors/
├── hoc/
├── hooks/
└── utils/ 

설명

features라는 폴더에 domain 별로 기능을 분리하였습니다.

ex) tests 폴더는 성향테스트 만드는 폴더, personalityTest 폴더는 성향테스트를 체험할 수 있는 폴더

서로 다른 feature에서 공통적으로 사용되는 컴포넌트의 경우 최상위 components 폴더에서 관리합니다.

features 구조

components : 재사용할 수있는 컴포넌트

container : 비지니스 로직 처리 코드가 있으며 2개이상의 컴포넌트가 조합된 컴포넌트

example.style.ts : example 도메인에서 공통적으로 사용되는 style

expmple.const.ts : example 도메인에서 공통적으로 사용되는 상수

example.types.ts : example 도메인에서 공통적으로 사용되는 타입

example.util.ts : example 도메인에서 공통적으로 사용되는 유틸 함수