fix: 사용자 로그아웃 이후 상태 초기화 에러 수정

[Yejiin21]

Summary by CodeRabbit

• New Features

  • SecondaryButton에 'full' 사이즈 옵션이 추가되어, 전체 너비 버튼을 사용할 수 있습니다.
  • SecondaryButton의 Storybook에 'FullPink'와 'FullBlack' 예제가 추가되었습니다.

• 버그 수정

  • 이벤트 상세 페이지에서 온라인 이벤트의 경우 지도 위치가 더 이상 표시되지 않습니다.

• 개선 사항

  • 메인 페이지에서 로그인 모달이 특정 네비게이션 상태(openLogin)일 때만 열리도록 조건이 개선되었습니다.
  • 마이페이지가 로그인 상태에 따라 다른 화면을 보여주며, 비로그인 시 로그인 유도 화면이 표시됩니다.

[coderabbitai]

Walkthrough

이번 변경에서는 SecondaryButton 컴포넌트와 스토리에 'full' 사이즈 옵션이 추가되었습니다. 또한, 마이페이지(MyPage)에서 로그인 여부에 따라 UI가 달라지도록 조건부 렌더링이 적용되었고, 이벤트 상세 페이지에서는 오프라인 이벤트에 한해 지도 정보가 노출됩니다. 메인 페이지에서는 로그인 모달이 특정 상태일 때만 열리도록 조건이 개선되었습니다.

Changes

파일/경로	변경 요약
design-system/stories/buttons/SecondaryButton.stories.tsx	'full' 사이즈 옵션 추가, FullPink/FullBlack 스토리 추가
design-system/ui/buttons/SecondaryButton.tsx	SecondaryButtonProps에 'full' 사이즈 추가, 스타일 분기 로직 보강
src/pages/event/ui/EventDetailsPage.tsx	온라인 이벤트가 아닌 경우에만 지도(KakaoMap) 표시하도록 조건 추가
src/pages/home/ui/MainPage.tsx	로그인 모달 오픈 조건에 location.state?.openLogin 플래그 추가, useLocation 훅 도입
src/pages/menu/ui/MyPage.tsx	로그인 여부에 따라 UI 조건부 렌더링, 비로그인 시 안내 및 로그인 버튼 표시, 관련 컴포넌트/아이콘 import

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant MyPage
    participant AuthStore
    participant Router

    User->>MyPage: 페이지 진입
    MyPage->>AuthStore: 로그인 상태 확인
    alt 로그인 상태 true
        MyPage->>User: 프로필, 북마크 등 원래 내용 렌더링
    else 로그인 상태 false
        MyPage->>User: 잠금 아이콘, 안내 메시지, 로그인 버튼 표시
        User->>MyPage: 로그인 버튼 클릭
        MyPage->>Router: 홈으로 이동 (state: openLogin)
    end

Loading

sequenceDiagram
    participant MainPage
    participant AuthStore
    participant Location
    participant Modal

    MainPage->>AuthStore: 로그인 상태 확인
    MainPage->>Location: location.state?.openLogin 확인
    alt 로그인 안 됨 && openLogin true
        MainPage->>Modal: openModal()
    end

Loading

Suggested reviewers

• xaexunxang
• hyeeuncho

Poem

새 버튼이 쏙! ‘full’로 변신,
마이페이지 잠금, 로그인이 진심.
오프라인 지도, 조건 따라 뿅!
메인에선 모달, 플래그가 뽕!
변화의 바람, 토끼도 신난다,
코드에 춤추며 🐇 오늘도 만세다!

---

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between ad15600 and e49f8fc.

⛔ Files ignored due to path filters (1)

• public/assets/bottomBar/Lock.svg is excluded by !**/*.svg

📒 Files selected for processing (5)

• design-system/stories/buttons/SecondaryButton.stories.tsx (3 hunks)
• design-system/ui/buttons/SecondaryButton.tsx (2 hunks)
• src/pages/event/ui/EventDetailsPage.tsx (2 hunks)
• src/pages/home/ui/MainPage.tsx (3 hunks)
• src/pages/menu/ui/MyPage.tsx (1 hunks)

🧰 Additional context used

🧠 Learnings (1)

src/pages/event/ui/EventDetailsPage.tsx (1)

Learnt from: xaexunxang
PR: GoTogether-Inc/frontend#106
File: src/entities/event/model/eventRequest.ts:26-30
Timestamp: 2025-04-29T10:26:21.217Z
Learning: GoTogether 프로젝트의 이벤트 API에서는 생성(EventCreate)과 수정(EventUpdate) 인터페이스에서 다른 필드명을 사용합니다:
- EventCreate: organizerEmail, organizerPhoneNumber (Swagger 스펙 기준)
- EventUpdate: hostEmail, hostPhoneNumber (Notion 스펙 기준)
이는 백엔드 API 명세의 불일치로 인한 의도적인 차이입니다.

🧬 Code Graph Analysis (1)

src/pages/menu/ui/MyPage.tsx (1)

src/app/provider/authStore.ts (1)

• useAuthStore (17-36)

🪛 Biome (1.9.4)

src/pages/event/ui/EventDetailsPage.tsx

[error] 118-118: Avoid passing content using the dangerouslySetInnerHTML prop.

Setting content using code can expose users to cross-site scripting (XSS) attacks

(lint/security/noDangerouslySetInnerHtml)

⏰ Context from checks skipped due to timeout of 90000ms (1)

• GitHub Check: storybook

🔇 Additional comments (11)

src/pages/event/ui/EventDetailsPage.tsx (2)

21-21: 코드 스타일 개선 완료

import 문에 세미콜론을 추가하여 일관된 코드 스타일을 유지했습니다.

---

118-125: 지도 표시 조건 로직 개선

오프라인 이벤트에만 지도를 표시하도록 조건을 개선한 것이 적절합니다. onlineType !== 'ONLINE' 조건을 추가하여 온라인 전용 이벤트에서 불필요한 지도 표시를 방지했습니다.

design-system/ui/buttons/SecondaryButton.tsx (2)

4-4: 새로운 'full' 사이즈 옵션 추가

SecondaryButton 컴포넌트에 'full' 사이즈 옵션을 추가하여 전체 너비 버튼을 지원하도록 개선했습니다.

---

17-18: 'full' 사이즈 스타일 구현

전체 너비(w-full), 적절한 패딩(px-4 py-2), 텍스트 크기(text-sm), 라운드 모서리(rounded-md)를 적용한 스타일링이 적절합니다.

design-system/stories/buttons/SecondaryButton.stories.tsx (2)

28-28: Storybook 컨트롤 옵션 업데이트

'full' 사이즈 옵션을 Storybook 컨트롤에 추가하여 개발자들이 쉽게 테스트할 수 있도록 했습니다.

---

49-55: 새로운 'full' 사이즈 스토리 추가

FullPink와 FullBlack 스토리를 추가하여 두 색상 옵션 모두에서 'full' 사이즈가 어떻게 표시되는지 확인할 수 있도록 했습니다. 스토리북 문서화가 완전해졌습니다.

Also applies to: 73-79

src/pages/home/ui/MainPage.tsx (2)

9-9: useLocation 훅 추가

useLocation 훅을 추가하여 네비게이션 상태를 확인할 수 있도록 했습니다. 이를 통해 다른 컴포넌트에서 로그인 모달을 트리거할 수 있는 기능을 구현했습니다.

Also applies to: 23-23

---

43-46: 로그인 모달 트리거 조건 개선

로그인 모달이 location.state?.openLogin이 true일 때만 열리도록 조건을 추가했습니다. 이는 불필요한 모달 표시를 방지하고 다른 페이지에서 명시적으로 로그인이 필요할 때만 모달을 열도록 제어합니다. 의존성 배열에 location.state를 추가한 것도 적절합니다.

src/pages/menu/ui/MyPage.tsx (3)

10-12: 인증 상태 관리 개선

useAuthStore를 사용하여 로그인 상태를 확인하고, 필요한 컴포넌트들을 import했습니다. 이는 PR 목표인 "로그아웃 이후 상태 초기화 에러 수정"과 직접적으로 관련된 개선사항입니다.

Also applies to: 17-17

---

22-24: 로그인 리다이렉트 핸들러 구현

handleLoginRedirect 함수를 통해 메인 페이지로 네비게이션하면서 openLogin: true 상태를 전달하여 로그인 모달을 트리거하는 로직이 잘 구현되었습니다.

---

29-96: 로그인 상태 기반 조건부 렌더링 구현

로그인하지 않은 사용자에게는 명확한 메시지와 함께 로그인 버튼을 제공하고, 로그인한 사용자에게는 기존 마이페이지 기능을 제공하는 조건부 렌더링이 훌륭하게 구현되었습니다.

특히 다음 UX 개선사항이 돋보입니다:

• 잠금 아이콘과 함께 직관적인 메시지 표시
• 새로운 'full' 사이즈 SecondaryButton 활용
• 로그인 후 동일한 페이지에서 모든 기능 이용 가능

이 변경사항은 PR의 핵심 목표인 로그아웃 후 상태 초기화 문제를 해결하면서도 사용자 경험을 크게 향상시켰습니다.

✨ Finishing Touches

• 📝 Generate Docstrings

---

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

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

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: https://677a88d1e04e06676106db14-ihngahtlam.chromatic.com/

[hyeeuncho]

수고하셨습니다