[FEAT] router 세팅

[seong-hui]

🛰️ 관련 이슈

해결한 이슈 번호를 작성해주세요
close #81

🧑‍💻 작업 내용

작업한 내용을 간략히 작성해주세요

• router 세팅을 진행하였습니다.
• lazy를 통해 페이지 컴포넌트를 동적으로 로드하여 초기 번들 크기를 줄이고 필요할 때만 해당 모듈을 가져오도록 하였습니다.
• lazy로 로드된 컴포넌트를 suspense로 감싸서 컴포넌트가 로드될 때까지 사용자에게 로딩 화면을 보여주도록 하였습니다.
• outlet에 margin: 0 auto를 주어서 해당 컴포넌트가 화면의 가운데에 위치할 수 있도록 하였습니다.
• 디자인 선생님들께 말씀 드려서 페이지의 margin-top은 12px로 고정해놔서 해당 값도 함께 추가하였습니다.
• 유효하지 않은 url주소로 갈시 main으로 리다이렉트되도록 설정하였습니다.

🗯️ PR 포인트

리뷰어가 특별히 봐주었으면 하는 부분이 있다면 작성해주세요

• header와 footer가 반복적으로 사용되었다면 app에 header와 footer를 지정해 놓거나, header와 footer를 따로 받아서 children으로 넣을지에 대해서 고민해보았는데 화면마다 헤더의 값에 서버 데이터가 들어가기도 하고, header는 화면중에 1번, footer은 2개의 화면에만 존재해서 각 화면에서 정의하는 것이 나을것이라 생각하여 header와 footer를 공통적으로 app에 정의하지 않았습니다.

🚀 알게된 점

기록하며 개발하기!

📖 참고 자료 (선택)

참고했던 문서들 공유하기!

https://codeparrot.ai/blogs/createbrowserrouter-a-step-up-from-switch
https://hihiha2.tistory.com/164

📸 스크린샷 (선택)

[github-actions]

🪷 Storybook 확인 🪷
🔗 https://677fa9af1269762b7858c29f-oppanflbhb.chromatic.com/

[Taew00k]

좋은 것 같아요~~~~ 이제 페이지 작업 들어가자

[bykbyk0401]

저도 페이지작업 하고싶어요.............
파이탱투

[maylh]

margin-top 12px로 픽스한거 좋네요 😎

같이 얘기 나눈 것처럼 공통적으로 정의할 수 있는 레이아웃이 따로 없기도 하고, header와 footer를 분리해 children으로 전달하는 방식은 각 페이지에서 직접 레이아웃을 잡는 것과 큰 차이가 없을 것 같아요. 그래서 우선은 각 페이지에서 개별적으로 작업하는 것이 더 나을 것 같습니다 !
수고하셨어요옹