Skip to content

#24 feat(ui): 일부 페이지 UI/UX 디자인 리뉴얼 - #116

Merged
Geunone2 merged 2 commits into
developfrom
#24-feat-ui
Jan 12, 2026
Merged

#24 feat(ui): 일부 페이지 UI/UX 디자인 리뉴얼#116
Geunone2 merged 2 commits into
developfrom
#24-feat-ui

Conversation

@Geunone2

@Geunone2 Geunone2 commented Jan 9, 2026

Copy link
Copy Markdown
Contributor

🛠️ 설명 (Description)

전반적인 사용자 경험 개선과 UI 일관성을 위해 주요 페이지 디자인을 리뉴얼했습니다. 기존 기능 로직은 유지하면서, 카드 구조 통일, 정보 가독성 개선에 초점을 맞췄습니다.

해당 작업은 기능 추가보다는 시각적 구조 개선 및 레이아웃 재정비에 목적을 두었습니다.

📄 설계 문서 (Design Document)

✅ 테스트 계획 (Test Plan)

  • 해상도 별 레이아웃 정상 렌더링 확인
  • 페이지 전환 시 디자인 깨짐 여부 확인
  • 기존 기능의 정상 동작 확인

📝 변경 사항 요약 (Summary)

  • 메인페이지

    • 메인 캐러셀 UI 리뉴얼
    • 카테고리 영역 레이아웃 개선
    • 인기 공연 목록 카드 디자인 개선
  • 공연 페이지

    • 공연 카드 디자인 개선
    • 공연 상세 페이지 구조 개선
  • 좌석 페이지

    • 좌석 섹션 카드 디자인 개선
    • 좌석 선택 모달 UI 리뉴얼
    • 예약 정보 영역 레이아웃 정리
  • 결제 & 성공 페이지

    • 카드 형태 UI로 리뉴얼

🔗 관련 이슈 (Related Issues)

☑️ 체크리스트 (Checklist)

  • 코드가 프로젝트 코딩 컨벤션을 따릅니다.
  • 테스트 코드가 작성되었고, 통과했습니다.
  • 변경 사항에 대한 문서화가 완료되었습니다.
  • 필요한 경우, 다른 팀원에게 리뷰를 요청했습니다.
  • CI 파이프라인이 성공했습니다.

👀 리뷰어를 위한 참고 사항 (Notes for Reviewers)

➕ 추가 정보 (Additional Information)

디자인 변경 사항
1. 메인 페이지
- 메인 캐러셀, 카테고리, 인기 공연 목록 리뉴얼

2. 공연 페이지
- 공연 카드, 공연 상세 리뉴얼

3. 좌석 페이지
- 섹션 카드, 모달 디자인, 예약 정보 리뉴얼

4. 결제 & 성공 페이지
- 카드 형태로 리뉴얼

Resolves: #24
See also: None
@Geunone2 Geunone2 added this to the 반응형 UI 구현 milestone Jan 9, 2026
@Geunone2
Geunone2 requested a review from kaeuhy January 9, 2026 12:00
@Geunone2 Geunone2 self-assigned this Jan 9, 2026
@Geunone2 Geunone2 added the status: review 코드 리뷰 중 label Jan 9, 2026
@gemini-code-assist

Copy link
Copy Markdown

Summary of Changes

Hello @Geunone2, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

이 풀 리퀘스트는 사용자 경험과 UI 일관성을 향상시키기 위해 애플리케이션의 여러 핵심 페이지에 걸쳐 시각적 디자인과 레이아웃을 전반적으로 개선하는 데 중점을 둡니다. 기존 기능 로직은 그대로 유지하면서, 정보의 가독성을 높이고 카드 구조를 통일하는 데 주력하여 사용자 인터페이스를 현대화하고 직관성을 높였습니다.

Highlights

  • 주요 페이지 UI/UX 리뉴얼: 전반적인 사용자 경험 개선과 UI 일관성을 위해 메인페이지, 공연 페이지, 좌석 페이지, 결제 및 성공 페이지의 디자인이 리뉴얼되었습니다.
  • 메인 캐러셀 및 카테고리 개선: 메인페이지의 캐러셀 UI와 카테고리 영역 레이아웃이 개선되었으며, 새로운 공연 장르 아이콘과 목록이 적용되었습니다.
  • 공연 상세 페이지 구조 개선: 공연 상세 페이지의 정보 표시 방식과 좌석 가격, 관람 일정 선택 UI가 카드 형태로 재구성되어 가독성이 향상되었습니다.
  • 좌석 선택 모달 및 예약 정보 UI 개선: 좌석 선택 모달의 UI가 리뉴얼되었고, 예약 정보 영역의 레이아웃이 정리되어 사용자가 좌석 선택 및 예약 정보를 더 명확하게 확인할 수 있게 되었습니다.
  • 결제 및 실패 페이지 디자인 통일: 결제 정보와 결제 실패 페이지가 카드 형태의 UI로 리뉴얼되어 일관된 사용자 경험을 제공합니다.
Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature Command Description
Code Review /gemini review Performs a code review for the current pull request in its current state.
Pull Request Summary /gemini summary Provides a summary of the current pull request in its current state.
Comment @gemini-code-assist Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help /gemini help Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

  1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution.

@gemini-code-assist gemini-code-assist Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

전반적인 UI/UX 디자인 리뉴얼을 위한 대규모 업데이트 잘 보았습니다. 새로운 디자인이 적용되어 훨씬 현대적이고 사용자 친화적으로 개선된 점이 인상적입니다. 특히 카드형 UI, 일관성 있는 레이아웃, 그리고 향상된 시각적 계층 구조는 사용자 경험을 크게 향상시킬 것으로 보입니다.

코드 측면에서도 scheduleRange 유틸리티 함수를 추가하여 로직을 분리하고, 테스트 코드를 함께 수정한 점 등 좋은 변경 사항들이 많습니다. 다만, 접근성 및 코드 품질 개선을 위해 몇 가지 제안 사항을 리뷰 코멘트로 남겼습니다. 확인 부탁드립니다.

Comment thread src/components/performance/list/PerformanceCard.tsx
Comment thread src/pages/main/MainPage.tsx
@Geunone2 Geunone2 added status: done 완료됨 and removed status: review 코드 리뷰 중 labels Jan 12, 2026
@Geunone2
Geunone2 merged commit 70b9815 into develop Jan 12, 2026
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

status: done 완료됨

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[FEATURE] 페이지 별 반응형 UI 적용

1 participant