[Init/#9] 폴더구조 세팅 및 라우터 설정

sinji2102 commented 1 week ago

📌 관련 이슈번호

Closes #17

🎟️ PR 유형

어떤 변경 사항이 있나요?

[x] 새 기능 추가
[ ] 버그 수정
[ ] CSS 등 사용자 UI 디자인 변경
[ ] 리팩토링

✅ Key Changes

이번 PR에서 작업한 내용을 간략히 설명해주세요

[x] 폴더구조 설정
[x] 라우팅 설정

📢 To Reviewers

폴더구조는 기본적으로 노션 내 컨벤션세팅에 맞춰서 했습니다!

apis api 연결 로직이 위치하는 폴더

assets 에셋 저장하는 폴더 => 하위에 imges, svgs 폴더 존재해서 에셋을 해당하는 곳에 넣어주면 됩니다!! index.ts는 svg 컴포넌트처럼 사용할 수 있도록 export해주는 파일입니다!!

components 컴포넌트들 저장하는 폴더 => 하위에 commons 폴더가 있습니다. 공통 컴포넌트 -> common 폴더

hooks 커스텀 훅을 저장하는 폴더

pages 페이지를 구성하는데 필요한 요소들이 들어있는 폴더 => 페이지 폴더 하위에 components, hooks, types, utils 폴더가 및 페이지이름.tsx, 페이지이름.styled.tsx 파일이 있습니다. -> 페이지를 구성하는 요소들을 하위 폴더에 맞춰 넣어주면 됩니다.

styles 스타일 폴더 => GlobalStyle.ts와 theme.ts가 위치할 폴더입니다.

types 타입 폴더 => 공통 타입들이 위치할 폴더입니다.

utils 유틸 함수 폴더 => 하위에 각 페이지 폴더 및 common 폴더가 있습니다. 공통 유틸 함수 -> common 폴더, 각 페이지에서만 사용하는 유틸 함수는 각 페이지별 폴더에 만들어서 사용하면 되겠습니다!!

routes 라우터가 위치하는 폴더 => Router.tsx, Outlet과 같은 파일들이 들어가는 폴더입니다. 라우터 설정은 BrowserRouter가 아니라 react-router에서 권장하는 createBrowserRouter를 사용해서 세팅하였습니다.

Router.tsx에서 다음과 같이 path와 element를 매핑하여 객체로 만든 다음, 객체를 배열에 계속 추가해나가는 방식으로 라우터를 연결해주시면 됩니다!! 일단 제가 하던대로 세팅해두긴 했는데 다른 더 좋은 방법 있으시면 레퍼 남겨주시면 제가 변경해도 되고 제가 좀 느리다 싶으시면 직접 하셔도 됩니다...!!