프론트엔드 작업 폴더 구조

📌 프론트엔드 각 폴더 역할

.
├── api
├── components
├── interfaces
├── pages
├── service
├── store
├── styles
└── util

1. api : 네트워크 통신을 통해 backend에 요청을 보내는 fetch 코드를 모아두는 폴더
   => 여러 컴포넌트에서 같은 api요청을 할 수 있으므로 재사용할 수 있도록 별도로 분리해 놓자는 의도

2. components : 각 페이지 컴포넌트에 필요한 작은 단위의 컴포넌트들을 모아두는 폴더
   => 하위에 common 폴더는 각 컴포넌트에서 공통으로 사용하는 컴포넌트를 모아두는 폴더
   => 페이지별로 폴더를 구분 지어서, 각 페이지에서 사용하는 컴포넌트들 작성

3. interfaces : 타입스크립트로 마이그레이션 하는 과정에서 생긴 interface를 모아두는 폴더
   

4. pages : 한 페이지를 나타내는 컴포넌트가 들어가는 폴더
   => app.tsx에서 라우팅 처리하여 보여주는 큰 단위의 컴포넌트가 들어간다.
   => components의 공통 컴포넌트와 각 폴더별로 나누어진 컴포넌트들을 조합하여 하나의 페이지를 나타내는 컴포넌트가 된다.
   

5. service : 추상화 해놓아서 여러 컴포넌트에서 사용할 수 있는 파일들이 들어가는 폴더
   => CRUD에 따른 fetch 추상화 파일
   => 여러가지 커스텀 훅이 들어가 있는 상태 (별도로 hooks 폴더를 만들지 service 폴더에 유지할지 미정)

6. store : 전역으로 관리되는 데이터가 들어있는 폴더
   => mobx의 특성에 따라 여러 store를 만들고 사용할 수 있도록 폴더로 구분
   => 전역으로 관리할 데이터를 생성하는 store파일, 해당 store를 사용할 수 있도록 context를 만들어주는 context파일, observable한 데이터를 특정 데이터로 지정하여 observer할 수 있도록 해주는 hook파일로 구성되어있다.

7. styles : value 또는 mixin등 scss와 관련된 공통값을 모아두는 폴더
   => 반응형을 위한 mediaQuery.scss 파일 => 특정 값(color, border-radius 등)을 위한 values.scss파일 => 특정 mixin (default-button, input-form 등)을 위한 mixins.scss파일 => 특정값으로 관리할 수 있는 defaultCards.scss 파일

8. util : service와 비슷한 역할이지만, 좀 더 범용적인 계산등의 역할
   => 현재에는 date 계산을 위한 파일이 존재.
   => service로 통합하게 될 수도 있을 것 같다.