프로젝트 구조

frontend/
├── node_modules/
├── public/
├── src/
│   ├── api/
│   ├── assets/
│   ├── components/
│   │   ├── RoomForm/
│   │   │   ├── index.tsx
│   │   │   ├── SetRoomQuery.tsx
│   │   │   ├── ...
│   ├── pages/
│   │   ├── CreateRoom.tsx
│   ├── constants/
│   │   ├── tierdata.tsx
│   ├── hooks/
│   │   ├── hooks.tsx
│   ├── routes/
│   │   ├── _root.tsx
│   │   ├── rooms
│   │   │   ├── [id].tsx
│   │   ├── create.tsx
│   │   ├── index.lazy.tsx
│   ├── types/
│       ├── RoomDetail.tsx
│       ├── RoomForm.tsx
│       ├── RoomSummary.tsx
├── .env

components

page에 사용되는 components들의 집합.

page별로 폴더 구분해서, 한 page 내에서 사용을 편하게 하자

어차피 더 추상화해서 공통 컴포넌트를 둘 필요는 아직까지는 없어보임. mantain딸깍중이니까 ㅇㅇ

index.tsx

export { default as SetRoomSize } from './SetRoomSize';
export { default as SetRoomPin } from './SetRoomPin';
export { default as SetRoomTitle } from './SetRoomTitle';
export { default as SetRoomQuery } from './SetRoomQuery';
export { default as SetRoomOwner } from './SetRoomOwner';
export { default as SetTierRange } from './SetTierRange';

만든 컴포넌트들을 관리해주는 역할을 하자.

pages

해당 페이지 폴더의 components들을 이리저리 조립해서 간결하게 적어주자.