[Init/#28] Router & path alias

[Leeyoonji23]

💡 Summary

close #28

✅ Tasks

• router
• path alias

👀 To Reviewer

router... 일단 아래와 같이 작성했는데 혹시 다른 좋은 네이밍 의견 있으시면 꼭! 주세요...
할 일, 만다르트, 수정, 히스토리 뷰 총 4개로 나눴습니다.

export const PATH = {
  ROOT: '/',
  TODO: '/todo',
  MANDAL: '/mandal',
  EDIT: '/edit',
  HISTORY: '/history',
} as const;

navigate(PATH.HISTORY);

이렇게 사용하면 됩니다!

📸 Screenshot

2025-07-04.11.01.31.mov

[github-actions]

빌드 결과

빌드 성공 🎉

[github-actions]

빌드 결과

빌드 성공 🎉

[github-actions]

🎨 스토리북 배포 완료!

👉 스토리북 미리보기

변경된 컴포넌트의 디자인을 확인해주세요.

[github-actions]

🎨 스토리북 배포 완료!

👉 스토리북 미리보기

변경된 컴포넌트의 디자인을 확인해주세요.

[github-actions]

🎨 스토리북 배포 완료!

👉 스토리북 미리보기

변경된 컴포넌트의 디자인을 확인해주세요.

[github-actions]

🎨 스토리북 배포 완료!

👉 스토리북 미리보기

변경된 컴포넌트의 디자인을 확인해주세요.

[github-actions]

빌드 결과

빌드 성공 🎉

[github-actions]

🎨 스토리북 배포 완료!

👉 스토리북 미리보기

변경된 컴포넌트의 디자인을 확인해주세요.

[jisooooooooooo]

전체적으로 라우팅 설정 너무 깔끔하게 잘 해주신 것 같아요!
코멘트 몇 개 달아놨는데 어떻게 생각하시는지 알려주시면 감사하겠습니닷!!
늦게까지 고생 많으셨어요🔥🔥

[jisooooooooooo]

p2) 현재 나의 할 일 작성 플로우가
전체 목표 -> 상위 목표 -> 하위 목표 로 이어지다보니
이 흐름을 한 컴포넌트 상태로 관리하기보다 중첩 라우팅 구조로 분리하는 게 명확할 거 같다고 생각합니다!

{
    path: PATH.TODO,
    element: <Todo />,
    children: [
      {
        path: 'upper',
        element: <UpperGoal />,
      },
      {
        path: 'lower',
        element: <LowerGoal />,
      },
    ],
  },

[Leeyoonji23]

제가 찾은 혜안입니다. 감사합니다

[jisooooooooooo]

p3) 제가 알기로 헤더, 푸터가 모든 페이지에 고정으로 들어가는 거 같아서 공통 레이아웃 컴포넌트를 만들어서 한 번에 관리해도 좋을 거 같아요!
이 부분은 제가 공컴 작업하면서 같이 적용해도 될 것 같구용!~

[Leeyoonji23]

넹! 적용했습니다!

[jisooooooooooo]

경로 상수화 넘 좋네요👍🏻👍🏻

[github-actions]

빌드 결과

빌드 성공 🎉

[github-actions]

🎨 스토리북 배포 완료!

👉 스토리북 미리보기

변경된 컴포넌트의 디자인을 확인해주세요.

[shinjigu]

지수언니가 이미 필요한 리뷰 달아주었네요 !!
중첩 라우팅 활용해서 Todo 하위 경로들 수정하신 것, Path 상수로 관리하신 것 모두 정말 좋다고 생각합니다 !! 수고하셨서용