Feat: 경로 상수화 및 nav 컴포넌트 네이밍 수정

[seueooo]

📌 Summary

• [Feature]: path 상수화 및 컴포넌트 네이밍 수정 #67

📚 Tasks

• 경로 상수화 및 적용
• nav-home -> navbar-main 으로 좀더 명확한 이름으로 변경
  Navbar들을 모아서 관리할 수 있도록 상위 폴더 생성했습니다.

👀 To Reviewer

버튼 만드려고 브랜치 팠다가, 생각난 김에 간단히 수정한 부분만 pr 올려요..! 브랜치명은 죄송함다 ㅎㅎ;

Summary by CodeRabbit

• 신규 기능

  • 주요 앱 경로 상수를 도입하여 내비게이션이 더 직관적으로 개선되었습니다.

• 리팩터

  • 내비게이션 컴포넌트가 NavHome에서 NavbarMain으로 변경되었습니다.
  • 내비게이션에서 하드코딩된 경로가 상수로 대체되어 유지보수가 용이해졌습니다.
  • 일부 컴포넌트 및 내보내기(export) 이름이 명확하게 변경되었습니다.

[coderabbitai]

Walkthrough

네비게이션 컴포넌트가 NavHome에서 NavbarMain으로 이름이 변경되고, 경로 문자열이 상수(PATH)로 대체되었습니다. 또한, 일부 컴포넌트 및 export 이름이 명확하게 변경되었으며, 새로운 경로 상수 파일이 추가되었습니다.

Changes

파일/경로	변경 요약
app/(main)/layout.tsx, app/page.tsx	NavHome → NavbarMain 컴포넌트로 교체, import 경로 및 JSX 요소 변경
app/(main)/my-capsule/page.tsx	함수 및 export 이름을 My → MyCapsule로 변경
shared/constants/path.ts	주요 라우트 경로를 담은 PATH 상수 객체 신규 추가 및 export
shared/ui/navbar/navbar-main/navbar-main.tsx	컴포넌트명 NavHome → NavbarMain으로 변경, 하드코딩된 경로 → PATH 상수로 대체, import 경로 및 CSS 파일명 변경

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant NavbarMain
    participant PATH

    User->>NavbarMain: 페이지 진입 시 렌더링
    NavbarMain->>PATH: 경로 상수 참조 (HOME, EXPLORE, MY_CAPSULE, SETTING)
    NavbarMain-->>User: 네비게이션 UI 렌더링 (경로 상수 기반 링크)

Loading

Possibly related issues

• [Feature]: path 상수화 및 컴포넌트 네이밍 수정 #67: 네비게이션 컴포넌트 이름 변경 및 경로 상수화 요구사항을 정확히 반영합니다.

---

📜 Recent review details

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 383186e and d873d32.

📒 Files selected for processing (5)

• app/(main)/layout.tsx (2 hunks)
• app/(main)/my-capsule/page.tsx (1 hunks)
• app/page.tsx (1 hunks)
• shared/constants/path.ts (1 hunks)
• shared/ui/navbar/navbar-main/navbar-main.tsx (6 hunks)

🧰 Additional context used

🧬 Code Graph Analysis (1)

shared/ui/navbar/navbar-main/navbar-main.tsx (1)

shared/constants/path.ts (1)

• PATH (1-7)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)

• GitHub Check: build
• GitHub Check: storybook-deploy
• GitHub Check: test
• GitHub Check: deploy

🔇 Additional comments (11)

shared/constants/path.ts (1)

1-7: 경로 상수 정의가 잘 구현되었습니다.

as const 사용으로 타입 안전성을 확보하고, 명확한 구조로 경로를 중앙화했습니다. 향후 경로 변경 시 유지보수성이 크게 향상될 것입니다.

app/page.tsx (2)

1-1: 임포트 경로가 올바르게 업데이트되었습니다.

새로운 폴더 구조에 맞게 임포트 경로가 정확하게 변경되었습니다.

---

6-6: 컴포넌트 사용이 일관되게 업데이트되었습니다.

NavHome에서 NavbarMain으로 컴포넌트명이 명확하게 변경되었습니다.

app/(main)/my-capsule/page.tsx (1)

1-1: 컴포넌트 네이밍이 개선되었습니다.

My에서 MyCapsule로 변경하여 컴포넌트의 목적이 더 명확해졌습니다. 코드 가독성과 유지보수성이 향상되었습니다.

Also applies to: 9-9

app/(main)/layout.tsx (2)

3-3: 레이아웃에서 네비게이션 컴포넌트 임포트가 올바르게 업데이트되었습니다.

새로운 폴더 구조와 컴포넌트명에 맞게 임포트가 정확하게 변경되었습니다.

---

12-12: 컴포넌트 사용이 일관되게 업데이트되었습니다.

레이아웃에서도 NavbarMain 컴포넌트가 올바르게 적용되었습니다.

shared/ui/navbar/navbar-main/navbar-main.tsx (5)

4-4: PATH 상수 임포트가 올바르게 추가되었습니다.

경로 상수를 중앙화하여 코드 유지보수성이 크게 향상되었습니다.

---

8-8: 상대 경로 임포트가 새로운 폴더 구조에 맞게 업데이트되었습니다.

HamburgerMenuButton 컴포넌트의 임포트 경로가 정확하게 조정되었습니다.

---

9-9: CSS 모듈 임포트가 새로운 파일명에 맞게 업데이트되었습니다.

nav-home.css에서 navbar-main.css로 일관되게 변경되었습니다.

---

11-11: 컴포넌트 네이밍이 개선되었습니다.

NavHome에서 NavbarMain으로 변경하여 컴포넌트의 역할이 더 명확해졌습니다.

Also applies to: 94-94

---

30-30: 하드코딩된 경로가 PATH 상수로 올바르게 대체되었습니다.

모든 Link 컴포넌트에서 하드코딩된 경로 문자열이 PATH 상수로 깔끔하게 변경되었습니다. 이는 경로 변경 시 유지보수성을 크게 향상시킵니다.

Also applies to: 35-35, 40-40, 64-64, 73-73, 82-82

✨ Finishing Touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/button/#67

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Explain this complex logic.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai explain this code block.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and explain its main purpose.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
• @coderabbitai auto-generate unit tests to generate unit tests for this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[github-actions]

🚀 Storybook 배포

📖 Storybook: https://683d91ab23651aa0b399e435-rjzflorixu.chromatic.com/
🔗 Chromatic Build: https://www.chromatic.com/build?appId=683d91ab23651aa0b399e435&number=61
✅ Status: success

[github-actions]

This pull request (commit d873d32) has been deployed to Vercel ▲ - View GitHub Actions Workflow Logs

Name	Link
🌐 Unique	https://time-capsule-51g2x8b61-hs-projects-b4a69d5f.vercel.app
🔍 Inspect	https://vercel.com/hs-projects-b4a69d5f/time-capsule/8RxPFYYVAwCij3Jjj5XAEfB8cDFB

[seung365]

Path 상수화 좋아요~! 고생하셨습니당