refactor: 메인 페이지 및 상세 페이지 리팩토링

[hyeeuncho]

이벤트 카드 크기 통일

북마크 취소 오류 해결 & 상세 페이지 html 문자열 랜더링

네트워크 카테고리 이벤트 카드 크기 오류 수정

[coderabbitai]

Walkthrough

이번 변경에서는 여러 UI 컴포넌트의 레이아웃과 스타일을 개선하고, 일부 컴포넌트의 내부 로직을 리팩토링하였으며, 인증 오류 처리와 로그아웃 오류 발생 시의 네비게이션 동작을 보완했습니다. 기능의 주요 흐름이나 API, props 등 외부 인터페이스에는 변화가 없습니다.

Changes

파일/경로 그룹	변경 요약
design-system/ui/texts/Countdown.tsx	Countdown 버튼에 고정 너비(w-12) 스타일 추가
src/features/event/ui/EventList.tsx	이벤트 카드 그리드 컨테이너에 w-[90%] 고정 너비 스타일 추가
src/features/home/ui/EventSliderSection.tsx	이벤트 슬라이더의 표시 로직을 상수로 분리, key 위치 변경 및 래퍼 div 추가
src/pages/event/ui/CategoryPage.tsx	로그인 상태에 따라 ProfileCircle 또는 로그인 버튼 조건부 렌더링
src/pages/event/ui/EventDetailsPage.tsx	북마크 로직에서 event.result 참조로 수정, 설명에 dangerouslySetInnerHTML 적용
src/pages/join/LogoutPage.tsx	로그아웃 실패 시 '/menu'로 네비게이션 추가
src/shared/types/api/http-client.ts	401 에러 시 access/refresh 토큰 모두 삭제, store의 logout() 호출 추가
src/shared/ui/EventCard.tsx	EventCard 레이아웃 및 텍스트 오버플로우 스타일 개선, Countdown 래퍼 div 추가

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant EventDetailsPage
    participant EventAPI

    User->>EventDetailsPage: 페이지 진입
    EventDetailsPage->>EventAPI: 이벤트 데이터 요청
    EventAPI-->>EventDetailsPage: 이벤트 데이터 반환
    EventDetailsPage->>User: HTML 설명 렌더링 (dangerouslySetInnerHTML)
    User->>EventDetailsPage: 북마크 클릭
    EventDetailsPage->>EventAPI: event.result 기준으로 북마크 처리

Loading

sequenceDiagram
    participant User
    participant http-client
    participant AuthStore

    User->>http-client: API 요청
    http-client-->>User: 401 에러 발생
    http-client->>AuthStore: access/refresh 토큰 삭제, logout() 호출, 인증 모달 오픈

Loading

Poem

🐇
새로운 스타일로 옷을 갈아입고
이벤트 카드도 두 줄로 말아
로그아웃 실패해도 길을 안내해
인증 오류엔 토큰 싹 비우고
토끼는 오늘도 UI를 다듬어요!
🥕✨

Note

⚡️ AI Code Reviews for VS Code, Cursor, Windsurf

CodeRabbit now has a plugin for VS Code, Cursor and Windsurf. This brings AI code reviews directly in the code editor. Each commit is reviewed immediately, finding bugs before the PR is raised. Seamless context handoff to your AI code agent ensures that you can easily incorporate review feedback.
Learn more here.

---

Note

⚡️ Faster reviews with caching

CodeRabbit now supports caching for code and dependencies, helping speed up reviews. This means quicker feedback, reduced wait times, and a smoother review experience overall. Cached data is encrypted and stored securely. This feature will be automatically enabled for all accounts on May 16th. To opt out, configure Review - Disable Cache at either the organization or repository level. If you prefer to disable all data retention across your organization, simply turn off the Data Retention setting under your Organization Settings.
Enjoy the performance boost—your workflow just got faster.

---

📜 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 f29dcb1 and f733612.

📒 Files selected for processing (8)

• design-system/ui/texts/Countdown.tsx (1 hunks)
• src/features/event/ui/EventList.tsx (1 hunks)
• src/features/home/ui/EventSliderSection.tsx (2 hunks)
• src/pages/event/ui/CategoryPage.tsx (2 hunks)
• src/pages/event/ui/EventDetailsPage.tsx (2 hunks)
• src/pages/join/LogoutPage.tsx (1 hunks)
• src/shared/types/api/http-client.ts (1 hunks)
• src/shared/ui/EventCard.tsx (2 hunks)

🧰 Additional context used

🧬 Code Graph Analysis (2)

src/shared/types/api/http-client.ts (1)

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

• useAuthStore (17-33)

src/features/home/ui/EventSliderSection.tsx (1)

src/entities/event/model/eventDetail.ts (1)

• EventItem (30-34)

🔇 Additional comments (13)

design-system/ui/texts/Countdown.tsx (1)

20-20: UI 일관성 개선을 위한 고정 너비 추가

카운트다운 컴포넌트에 고정 너비(w-12)를 추가하여 모든 화면 크기에서 일관된 디자인을 유지하도록 개선했습니다. 이는 UI 디자인의 일관성을 높여 사용자 경험을 향상시키는 좋은 변경입니다.

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

11-11: 새 컴포넌트 import 추가

ProfileCircle 컴포넌트를 import하여 로그인 상태에 따른 UI 개선을 위한 준비가 잘 되었습니다.

---

34-38: 로그인 상태에 따른 UI 개선

로그인 상태에 따라 UI를 차별화하여 표시하는 방식으로 개선했습니다. 로그인한 사용자에게는 ProfileCircle로 이름 일부를 표시하고, 로그인하지 않은 사용자에게는 로그인 버튼을 보여주는 방식으로 사용자 경험이 향상되었습니다.

이전 구현보다 로그인 상태를 시각적으로 더 명확하게 구분할 수 있어 좋은 개선입니다.

src/features/event/ui/EventList.tsx (1)

65-65: 이벤트 카드 그리드 컨테이너 너비 설정

이벤트 카드 그리드 컨테이너에 w-[90%] 클래스를 추가하여 너비를 90%로 고정했습니다. 이는 다른 컴포넌트들과의 일관된 레이아웃을 위한 개선이며, 이벤트 카드의 표시 방식을 앱 전체에서 표준화하는 데 기여합니다.

화면 크기에 상관없이 일관된 여백을 유지할 수 있어 디자인의 안정성이 향상되었습니다.

src/pages/join/LogoutPage.tsx (1)

19-19: 로그아웃 실패 시 네비게이션 개선

로그아웃 실패 시 사용자를 '/menu' 경로로 리디렉션하는 코드가 추가되었습니다. 이전에는 로그아웃 실패 알림 후 페이지 이동이 없었는데, 이제는 명시적으로 메뉴 페이지로 이동하도록 개선되었습니다.

이는 에러 처리 흐름을 개선하여 사용자가 로그아웃 실패 상황에서도 적절한 페이지로 안내받을 수 있게 해주는 좋은 변경입니다.

src/shared/types/api/http-client.ts (1)

56-60: 인증 토큰 관련 로그아웃 처리 개선

기존에는 refresh 토큰 갱신 실패 시 access_token만 제거하고 모달을 표시했지만, 이제는 refresh_token도 함께 제거하고 명시적으로 logout() 메서드를 호출하여 인증 상태를 초기화한 후 모달을 표시합니다. 이는 더 완전한 로그아웃 처리 방식으로, 사용자 인증 상태를 더 일관되게 관리할 수 있게 해줍니다.

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

39-40: 이벤트 북마크 처리 로직 수정

event 객체에서 직접 속성을 참조하는 대신 event.result 객체를 통해 올바르게 속성에 접근하도록 수정되었습니다. 이는 북마크 상태와 ID를 올바르게 확인하기 위한 버그 수정입니다.

---

106-109: 이벤트 설명 렌더링 방식 개선

이벤트 설명을 단순 텍스트로 표시하는 <span> 대신 dangerouslySetInnerHTML을 사용하는 <div>로 변경하여 HTML 마크업이 포함된 설명을 올바르게 렌더링할 수 있게 되었습니다. 이제 서식이 있는 텍스트나 링크 등이 포함된 이벤트 설명이 의도한 대로 표시됩니다.

src/shared/ui/EventCard.tsx (3)

38-41: 이벤트 카드 컨테이너 스타일 개선

이벤트 카드의 루트 <div> 요소에 추가적인 스타일 클래스를 적용하여 전체 너비와 높이, 반응형 높이 조정, 그리고 flexbox 레이아웃으로 내용을 세로 방향으로 배치하고 공간을 분배하도록 개선되었습니다. 이는 다양한 화면 크기에서 일관된 디자인을 제공합니다.

---

49-50: 이벤트 제목 및 카운트다운 요소 디자인 개선

이벤트 제목이 단일 줄 자르기에서 두 줄 자르기(line-clamp-2)로 변경되어 텍스트 래핑과 시각적 일관성이 향상되었습니다. 또한 Countdown 컴포넌트를 반응형 최대 너비 제약이 있는 <div>로 감싸서 카드 내에서의 레이아웃을 더 잘 제어할 수 있게 되었습니다.

---

62-62: 위치 텍스트 표시 방식 개선

위치 텍스트를 두 줄 자르기(line-clamp-2)와 숨김 오버플로우 스타일링이 적용된 <div>로 감싸서 텍스트 오버플로우를 관리하도록 개선되었습니다. 이렇게 하면 긴 주소가 UI를 깨지지 않게 해줍니다.

src/features/home/ui/EventSliderSection.tsx (2)

31-40: 이벤트 슬라이더 로직 개선

슬라이더에 표시할 이벤트 카드를 선택하는 로직이 eventsToShow 상수로 추출되어 코드 가독성이 향상되었습니다. 이 로직은 이벤트의 순환 표시를 보장하며, 시작 인덱스와 최대 표시 카드 수에 따라 이벤트 목록을 적절히 슬라이스하고 연결합니다.

---

48-63: 이벤트 카드 레이아웃 구조 개선

기존에는 EventCard 컴포넌트에 직접 key prop을 설정했지만, 이제는 각 이벤트 카드를 <div>로 감싸고 해당 div에 key prop과 레이아웃 스타일링을 적용하는 방식으로 변경되었습니다. 이는 각 카드에 일관된 크기와 여백을 제공하여 슬라이더 내에서의 디자인 일관성을 높입니다.

✨ 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-ztyopxuiuh.chromatic.com/

[Yejiin21]

에러사항 모두 잘 수정해주셨네요👍 LGTM~