Skip to content

#123 refactor(review): 리뷰 섹션 기능 개선 및 UI 리디자인 - #124

Merged
Geunone2 merged 4 commits into
developfrom
#123-refactor-review
Feb 9, 2026
Merged

#123 refactor(review): 리뷰 섹션 기능 개선 및 UI 리디자인#124
Geunone2 merged 4 commits into
developfrom
#123-refactor-review

Conversation

@Geunone2

@Geunone2 Geunone2 commented Feb 9, 2026

Copy link
Copy Markdown
Contributor

🛠️ 설명 (Description)

리뷰 섹션 전반의 기능 안정화와, 사용자 경험 개선을 목표로 리팩토링 및 UI 리디자인을 진행했습니다.
리뷰 작성/수정/삭제 및 좋아요 흐름에서 발생하던 버그를 수정하고, 에러 처리와 상태 동기화 로직을 보완했습니다.
또한 리뷰 섹션 UI를 PerformanceInfo 영역과 톤을 맞춰 일관성 있게 개선했습니다.

📄 설계 문서 (Design Document)

✅ 테스트 계획 (Test Plan)

📝 변경 사항 요약 (Summary)

  • 리뷰 작성자 판별 로직 수정 (writerName 기반)
  • 중복 리뷰 작성 방지 로직 추가 (hasMyReview)
  • 리뷰 수정 시 별점 초기값 정상 반영
  • 리뷰 삭제 확인 모달 컴포넌트 분리 및 재사용화
  • 좋아요 클릭 후 리뷰 목록 자동 갱신
  • 리뷰 섹션 UI/UX 전면 개선 및 PerformanceInfo 스타일 통일
  • 403 에러(예매하지 않은 사용자) 처리 추가
  • DELETE 요청 시 빈 응답(204 No Content) 대응 로직 추가
  • 별점 표시 로직 개선 (반개 별 지원)

🔗 관련 이슈 (Related Issues)

☑️ 체크리스트 (Checklist)

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

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

  • 현재, 작성자 판별 로직은 writerName 기반 임시 처리입니다.
    추후, writerId 필드가 백엔드에 추가되면 해당 부분 수정이 필요합니다.
  • PATCH 요청은 현재 CORS 정책으로 인해 정상 동작하지 않습니다.(백엔드 확인 필요)
  • 좋아요한 리뷰 삭제 시 발생하는 에러는 백엔드 설정 이슈로 보입니다.
    (백엔드 확인 필요)

➕ 추가 정보 (Additional Information)

주요 변경사항:
- 리뷰 작성자 판별 로직 수정(writerName 기반)
- 중복 리뷰 작성 방지 (hasMyReview) 체크
- 리뷰 수정 시, 별점 초기값 반영
- 삭제 확인 모달 컴포넌트 추가
- 좋아요 후 리뷰 목록 자동 갱신
- 리뷰 섹션 전체 UI/UX 개선 및 PerformanceInfo 스타일 통일
- 별점 표시 로직 개선

Resolves: #123
See also: None
@Geunone2
Geunone2 requested a review from kaeuhy February 9, 2026 10:29
@Geunone2 Geunone2 self-assigned this Feb 9, 2026
@Geunone2 Geunone2 added status: review 코드 리뷰 중 type: refactor 리팩토링 labels Feb 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!

이 PR은 리뷰 섹션의 전반적인 기능과 사용자 경험을 대폭 개선하는 데 중점을 두었습니다. 기존 리뷰 기능의 안정성을 확보하고, UI를 현대적이고 일관된 디자인으로 리디자인하여 사용자들이 더욱 편리하고 직관적으로 리뷰를 작성하고 관리할 수 있도록 했습니다. 특히, 별점 기능의 추가와 에러 처리 강화는 사용자 피드백의 질을 높이고 시스템의 견고함을 더합니다.

Highlights

  • 리뷰 기능 안정화 및 UI/UX 개선: 리뷰 작성, 수정, 삭제 및 좋아요 기능에서 발생하던 버그를 수정하고, 에러 처리 및 상태 동기화 로직을 개선했습니다. 또한, 리뷰 섹션의 사용자 인터페이스와 경험을 PerformanceInfo 영역과 통일된 스타일로 전면 리디자인했습니다.
  • 별점 기능 및 중복 리뷰 방지 로직 추가: 리뷰 작성 및 수정 시 별점을 함께 입력할 수 있도록 기능을 확장하고, 반개 별을 포함한 별점 표시 로직을 개선했습니다. 더불어, 사용자가 동일한 공연에 대해 중복 리뷰를 작성할 수 없도록 hasMyReview 로직을 추가했습니다.
  • API 응답 처리 및 사용자 식별 로직 강화: DELETE 요청 시 204 No Content 응답과 빈 응답 본문을 처리하는 로직을 추가하여 API 통신 안정성을 확보했습니다. 리뷰 작성자 식별은 currentUserId 대신 writerName을 기반으로 하도록 변경되었습니다.
  • 재사용 가능한 삭제 확인 모달 및 좋아요 기능 개선: 리뷰 삭제 시 사용자에게 명확한 확인 절차를 제공하는 재사용 가능한 모달 컴포넌트를 분리하여 도입했습니다. 좋아요 클릭 후 리뷰 목록이 자동으로 갱신되도록 하여 실시간성을 높였습니다.
Changelog
  • .idea/*
    • 프로젝트 코드 스타일 및 IDE 설정 파일이 추가되었습니다.
  • src/api/performanceReview.ts
    • fetchPatchReview 함수에 별점(star) 파라미터가 추가되었고, credentials: "include" 옵션이 추가되었습니다.
  • src/components/mocks/*
    • 인증 토큰 및 리뷰 데이터 목업이 업데이트되어 별점 필드가 포함되었습니다.
  • src/components/tests/performance/detail/*
    • ReviewItem, ReviewList, ReviewRating, ReviewSection 컴포넌트 테스트에 onLikeToggle 프롭 추가 및 currentUserIdcurrentUserName으로 변경되는 등 변경 사항이 반영되었습니다.
  • src/components/performance/detail/PerformanceInfo.tsx
    • ReviewSection 컴포넌트에 currentUserName을 전달하도록 수정되었습니다.
  • src/components/performance/detail/review/DeleteConfirmModal.tsx
    • 리뷰 삭제 확인을 위한 재사용 가능한 모달 컴포넌트가 새로 추가되었습니다.
  • src/components/performance/detail/review/ReviewForm.tsx
    • 리뷰 작성 폼의 UI/UX가 전면 개선되었으며, 별점 선택 기능이 통합되고, 입력 유효성 검사 및 에러 메시지 처리가 강화되었습니다.
  • src/components/performance/detail/review/ReviewItem.tsx
    • 리뷰 수정 시 별점 입력 기능이 추가되었고, 반개 별을 포함한 별점 표시, 좋아요 버튼 UI 개선, 삭제 확인 모달 연동 등 UI/UX가 대폭 개선되었습니다.
  • src/components/performance/detail/review/ReviewLikeButton.tsx
    • 좋아요 버튼의 시각적 디자인과 아이콘이 업데이트되었습니다.
  • src/components/performance/detail/review/ReviewList.tsx
    • currentUserId 대신 currentUserName을 사용하여 리뷰 작성자를 식별하고, onLikeToggle 프롭이 추가되었습니다.
  • src/components/performance/detail/review/ReviewRating.tsx
    • 별점 컴포넌트에 initialValue 프롭이 추가되어 초기 별점 설정이 가능해졌으며, UI가 개선되었습니다.
  • src/components/performance/detail/review/ReviewSection.tsx
    • currentUserName을 기반으로 중복 리뷰 작성을 방지하는 로직이 추가되었고, 로딩, 에러, 리뷰 없음 상태에 대한 UI가 개선되었습니다.
  • src/hooks/useReviews.ts
    • useQueryClient를 사용하여 리뷰 관련 API 호출 후 데이터를 자동으로 갱신하도록 변경되었으며, 중복 리뷰(409) 및 예매하지 않은 사용자(403)에 대한 구체적인 에러 처리가 추가되었습니다.
  • src/lib/apiClient.ts
    • 204 No Content 응답 및 빈 응답 본문을 처리하는 로직이 추가되어 API 클라이언트의 견고성이 향상되었습니다.
  • src/types/ApiDataTypes.ts
    • reviewList 인터페이스에 star 필드가 추가되었습니다.
Activity
  • 현재까지 이 PR에 대한 특별한 리뷰 활동이나 코멘트는 없습니다.
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 개선을 위한 전반적인 리팩토링이 인상적입니다. 특히 react-query를 활용한 상태 관리와 캐시 무효화 로직, 재사용 가능한 모달 컴포넌트 분리, 향상된 에러 처리 등 코드 품질을 높이기 위한 노력이 돋보입니다. 몇 가지 비동기 처리 관련 버그와 타입 안정성 문제를 발견하여 수정을 제안합니다. 또한, .idea 디렉토리와 같이 버전 관리에 포함되지 않아야 할 파일들이 포함되어 있어, 프로젝트의 루트 .gitignore 파일에 .idea/를 추가하여 IDE 설정 파일이 저장소에 포함되지 않도록 하는 것을 권장합니다.

Comment thread src/components/performance/detail/review/ReviewForm.tsx Outdated
Comment thread src/components/performance/detail/review/ReviewItem.tsx Outdated
Comment thread src/lib/apiClient.ts
Comment thread src/hooks/useReviews.ts Outdated

@kaeuhy kaeuhy left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

확실히 UI 디자인이 깔끔해져서 시각적으로 너무 좋습니다. 고생하셨습니다. 코드리뷰 남겼습니다

Comment thread src/components/performance/detail/review/ReviewItem.tsx
주요 변경사항
1. ConfirmDialog 공통 컴포넌트 생성
    - Headless UI Dialog 기반
    - title, description, icon, 버튼 텍스트/색상 커스터마이징 가능
2. DeleteConfirmModal 리팩토링
    - ConfirmDialog 활용하여 간결하게 변경
    - 기존 인터페이스 유지
3. AdultVerificationModal 리팩토링
    - 중복 코드 제거, ConfirmDialog 재사용
    - 기존 기능 및 스타일 유지

Resolves: #123
See also: None
@Geunone2
Geunone2 merged commit c25fb17 into develop Feb 9, 2026
4 checks passed
@Geunone2
Geunone2 deleted the #123-refactor-review branch February 19, 2026 11:34
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

status: review 코드 리뷰 중 type: refactor 리팩토링

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[REFACTOR] 리뷰 섹션 기능 개선 및 UI 리디자인

2 participants