♻️ refactor: Gnb 버튼들 하위 component로 분리

[Moon-ju-young]

📌 변경 사항 개요

Gnb의 버튼들을 하위 컴포넌트로 개별적으로 분리했습니다.

📝 상세 내용

• Gnb의 버튼과 그와 관련된 로직을 하위 컴포넌트로 분리하여 불필요한 api request가 발생하지 않도록 했습니다.

🔗 관련 이슈

Resolves: #248

🖼️ 스크린샷(선택사항)

💡 참고 사항

• 정말 분리만 했고 별다르게 코드를 분리하지는 않았습니다.

Summary by CodeRabbit

• Refactor
  • 사용자 로그인 상태에 따라 표시되는 버튼들을 별도의 컴포넌트(LoggedinButtons, LoggedoutButtons)로 분리하여 코드 구조를 개선했습니다.
  • 기존 기능과 UI에는 변화가 없습니다.

[coderabbitai]

📝 Walkthrough

Walkthrough

Gnb 컴포넌트에서 로그인 상태에 따른 버튼 렌더링 로직을 각각 LoggedinButtons와 LoggedoutButtons라는 하위 컴포넌트로 분리하는 구조적 리팩터링이 이루어졌습니다. 기존의 상태 관리, UI 동작, 데이터 요청 로직에는 변화가 없습니다.

Changes

Cohort / File(s)	Change Summary
Gnb 컴포넌트 구조 리팩터링 src/components/Gnb.tsx	로그인/비로그인 버튼 렌더링 로직을 각각 LoggedinButtons, LoggedoutButtons 컴포넌트로 분리. 기존의 상태 관리, 알림 패널, 드롭다운 메뉴 등은 해당 하위 컴포넌트로 이동.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant Gnb
    participant LoggedinButtons
    participant LoggedoutButtons

    User->>Gnb: 페이지 접근
    Gnb->>Gnb: 사용자 로그인 상태 확인
    alt 로그인 상태
        Gnb->>LoggedinButtons: user prop 전달 및 렌더링
        LoggedinButtons->>LoggedinButtons: 알림, 드롭다운 등 내부 로직 실행
    else 비로그인 상태
        Gnb->>LoggedoutButtons: 렌더링
        LoggedoutButtons->>LoggedoutButtons: 로그인/회원가입 버튼 표시
    end

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Assessment against linked issues

Objective	Addressed	Explanation
버튼 부분 하위 컴포넌트로 분리 (#248)	✅
비로그인 상태에서 알림 정보 요청이 발생하지 않아야 함 (#248)	✅

Assessment against linked issues: Out-of-scope changes

(해당 PR에서 명시된 목적 외의 변경사항은 발견되지 않았습니다.)

Possibly related PRs

• ✨ feat: Gnb 컴포넌트 기초 구현 #45: Gnb 컴포넌트의 최초 구현과 관련되어, 이번 리팩터링이 해당 코드 기반 위에서 이루어졌음이 명확합니다.
• ✨ feat: Gnb component Notification 및 Dropdown 추가 #69: Gnb의 알림 및 드롭다운 기능 최초 도입 PR로, 이번 PR은 해당 기능의 구조적 재조정과 직접적으로 연관됩니다.

Suggested reviewers

• two678
• Yun-Jinwoo
• seong5
• dain823

Poem

🐰
버튼들이 깔끔하게 나뉜 오늘,
로그인, 로그아웃 길이 분명해졌네.
알림은 조용히, 필요할 때만,
Gnb 속 질서가 한층 더 단단해졌지!
리팩터링 박수 짝짝,
토끼도 기쁜 마음으로 뛰어오르네!
🥕

Note

⚡️ Unit Test Generation is now available in beta!

Learn more here, or try it out under "Finishing Touches" below.

---

📜 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 306f1b9 and c2c5e03.

📒 Files selected for processing (1)

• src/components/Gnb.tsx (2 hunks)

🧰 Additional context used

🧠 Learnings (3)

📓 Common learnings

Learnt from: two678
PR: Act-It-FE/global-nomad#22
File: src/app/page.tsx:3-3
Timestamp: 2025-07-16T04:52:59.478Z
Learning: User two678 has requested that all future PR reviews should be conducted in Korean language. All CodeRabbit reviews for this repository should be written in Korean from now on.

Learnt from: Yun-Jinwoo
PR: Act-It-FE/global-nomad#123
File: src/app/_components/Search.tsx:17-21
Timestamp: 2025-07-27T18:49:42.713Z
Learning: Search 컴포넌트에서는 로딩 상태를 내부적으로 관리하는 대신 props로 받아서 관리하는 것을 선호함. 상위 컴포넌트에서 로딩 상태를 제어하여 네비게이션과 상태 동기화를 더 명확하게 관리하려는 아키텍처 방향성을 가지고 있음.

Learnt from: Yun-Jinwoo
PR: Act-It-FE/global-nomad#118
File: src/app/_components/CardColumn.tsx:4-4
Timestamp: 2025-07-26T13:51:59.407Z
Learning: global-nomad 프로젝트에서 Icon 컴포넌트는 `src/components/Icon.tsx`에 위치합니다. 이전에 `src/components/common/Icon.tsx`에 있었지만 common 폴더가 제거되어 현재는 components 디렉토리에 직접 위치합니다.

Learnt from: two678
PR: Act-It-FE/global-nomad#124
File: src/app/mypage/reserves/page.tsx:92-111
Timestamp: 2025-07-28T02:59:38.788Z
Learning: 예약 내역 카드에서 CancelReservationButton과 ReviewReservationButton은 반응형 디자인을 위해 의도적으로 다른 위치에 렌더링됩니다: PC에서는 ReservesBottom 컴포넌트 내부에, 모바일/태블릿에서는 ReservesCard 외부에 위치합니다.

Learnt from: Yun-Jinwoo
PR: Act-It-FE/global-nomad#154
File: src/app/_components/ActivityList.tsx:32-38
Timestamp: 2025-07-29T10:22:31.617Z
Learning: 빈 상태 처리는 데이터 흐름을 제어하는 상위 컴포넌트에서 처리하는 것이 바람직함. 하위 컴포넌트에서 중복으로 빈 상태를 처리하는 것보다 단일 책임 원칙에 따라 상위에서 데이터 상태를 관리하고 하위에서는 표시에만 집중하는 것이 더 명확한 아키텍처임.

📚 Learning: global-nomad 프로젝트에서 icon 컴포넌트는 `src/components/icon.tsx`에 위치합니다. 이전에 `src/components/common/icon.tsx...

Learnt from: Yun-Jinwoo
PR: Act-It-FE/global-nomad#118
File: src/app/_components/CardColumn.tsx:4-4
Timestamp: 2025-07-26T13:51:59.407Z
Learning: global-nomad 프로젝트에서 Icon 컴포넌트는 `src/components/Icon.tsx`에 위치합니다. 이전에 `src/components/common/Icon.tsx`에 있었지만 common 폴더가 제거되어 현재는 components 디렉토리에 직접 위치합니다.

Applied to files:

• src/components/Gnb.tsx

📚 Learning: in cardcolumn component at src/app/_components/cardcolumn.tsx, native img tag is used instead of nex...

Learnt from: Yun-Jinwoo
PR: Act-It-FE/global-nomad#154
File: src/app/_components/CardColumn.tsx:26-34
Timestamp: 2025-07-29T10:23:45.293Z
Learning: In CardColumn component at src/app/_components/CardColumn.tsx, native img tag is used instead of Next.js Image component for simpler fallback image handling when images are missing or fail to load, avoiding the complexity of additional useState management.

Applied to files:

• src/components/Gnb.tsx

🔇 Additional comments (4)

src/components/Gnb.tsx (4)

8-8: 타입 import 추가가 적절합니다.

LoggedinButtons 컴포넌트의 props 타입 지정을 위해 UserProfile 타입을 import한 것이 적절합니다.

---

64-64: 컴포넌트 분리를 통한 조건부 렌더링이 우수합니다.

이 변경으로 로그인된 사용자일 때만 LoggedinButtons 컴포넌트가 렌더링되어 불필요한 알림 API 요청을 방지할 수 있습니다. 이슈 #248의 핵심 문제를 효과적으로 해결하는 구조적 개선입니다.

---

71-149: LoggedinButtons 컴포넌트 추출이 훌륭합니다.

기존 알림 및 사용자 드롭다운 로직을 성공적으로 분리했습니다. 이 컴포넌트는:

• 로그인된 상태에서만 렌더링되어 useMyNotifyQuery 훅이 불필요하게 실행되는 것을 방지합니다
• 기존 기능과 동일한 동작을 유지하면서 코드 구조를 개선했습니다
• TypeScript 타입 지정과 React 훅 사용이 적절합니다

이는 이슈 #248에서 언급된 불필요한 API 요청 문제를 근본적으로 해결하는 효과적인 리팩터링입니다.

---

151-162: LoggedoutButtons 컴포넌트가 깔끔하게 구현되었습니다.

로그아웃 상태의 UI를 별도 컴포넌트로 분리한 것이 적절합니다. 기존 스타일링과 동작을 그대로 유지하면서 관심사를 명확히 분리했습니다.

✨ Finishing Touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/248-gnb-unnessary-request

---

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.
• 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.

Support

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

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 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 or @coderabbitai 요약 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]

🧷 배포 미리보기: https://global-nomad-3n9i05a25-yun-jinwoos-projects.vercel.app
⏰ 최종 업데이트: 2025년 08월 07일 18시 51분