feat: 조회하기 디자인

[dasosann]

PR Type

Enhancement

---

Description

• 매칭 조회 페이지 UI 구현 및 디자인 완성

• 매칭 상대 카드 컴포넌트 개발 (프로필, 통계, 관심사 표시)

• 검색, 필터링, 정렬 기능 추가 (닉네임, 나이, 전공, MBTI)

• 더미 데이터 및 빈 상태 UI 구현

---

Diagram Walkthrough

flowchart LR
  A["MatchingListPage<br/>SSR 데이터 프리페칭"] --> B["ScreenMatchingList<br/>메인 화면 레이아웃"]
  B --> C{"매칭 데이터<br/>존재 여부"}
  C -->|있음| D["YesMatchingList<br/>검색/필터/정렬"]
  C -->|없음| E["NoMatchingList<br/>빈 상태 UI"]
  D --> F["MatchingListCard<br/>카드 컴포넌트"]
  F --> G["CardHeader<br/>프로필 정보"]
  F --> H["CardStats<br/>나이/MBTI/연락빈도"]
  F --> I["CardHobbies<br/>관심사 태그"]

Loading

File Walkthrough

	Relevant files
Test data	dummyData.ts 매칭 상대 더미 데이터 세트 생성                                                                              app/matching-list/_components/dummyData.ts 10명의 매칭 상대 더미 데이터 생성 다양한 프로필 정보 포함 (닉네임, MBTI, 취미, 소개 등) 탈퇴 사용자 등 엣지 케이스 포함 +282/-0
Type definition	useMatchingHistory.ts 매칭 파트너 인터페이스 구조 업데이트                                                                          hooks/useMatchingHistory.ts birthDate nullable 처리 (string | null) profileImageKey → profileImageUrl 필드명 변경 hobbies 구조 변경 (category, name 객체 배열) intros 필드 추가 (question, answer 객체 배열) contactFrequency 타입을 string으로 변경 tags, song 필드 제거 +5/-6
Component development	MatchingListCard.tsx 매칭 카드 UI 컴포넌트 개발                                                                                  app/matching-list/_components/MatchingListCard.tsx 매칭 상대 카드 컴포넌트 구현 (펼치기/접기 기능) CardHeader, CardStats, CardHobbies 서브컴포넌트 분리 즐겨찾기, 메시지, 더보기 액션 버튼 구현 소셜 ID 표시 (카카오, 인스타그램) 그라디언트 푸터 및 터치/클릭 이벤트 처리 +242/-0  NoMatchingList.tsx 빈 상태 UI 컴포넌트 구현                                                                                    app/matching-list/_components/NoMatchingList.tsx 매칭 상대 없을 때 표시되는 빈 상태 UI 안내 메시지 및 "매칭하러 가기" 버튼 포함 대기 중인 사용자 수 표시 +47/-0    ScreenMatchingList.tsx 매칭 조회 페이지 메인 화면 구현                                                                              app/matching-list/_components/ScreenMatchingList.tsx 매칭 조회 페이지 메인 레이아웃 구현 API 데이터 또는 더미 데이터 조건부 사용 백 버튼 및 설명 텍스트 포함 매칭 있음/없음 상태 분기 처리 +41/-0
Feature implementation	YesMatchingList.tsx 검색/필터/정렬 기능 구현                                                                                      app/matching-list/_components/YesMatchingList.tsx 검색 기능 (닉네임, 나이, 전공, MBTI) 즐겨찾기 필터링 토글 오래된 순/최신 순 정렬 기능 검색 결과 없을 때 안내 메시지 표시 useMemo로 필터링 성능 최적화 +132/-0
Page implementation	page.tsx 매칭 조회 페이지 라우트 구현                                                                                  app/matching-list/page.tsx 매칭 조회 페이지 루트 컴포넌트 React Query SSR 프리페칭 구현 HydrationBoundary로 서버 상태 클라이언트 전달 /api/matching/history 엔드포인트 호출 +28/-0

---

---

✨ Describe tool usage guide:

---

Overview:
The describe tool scans the PR code changes, and generates a description for the PR - title, type, summary, walkthrough and labels. The tool can be triggered automatically every time a new PR is opened, or can be invoked manually by commenting on a PR.

When commenting, to edit configurations related to the describe tool (pr_description section), use the following template:

/describe --pr_description.some_config1=... --pr_description.some_config2=...

With a configuration file, use the following template:

[pr_description]
some_config1=...
some_config2=...

Enabling\disabling automation When you first install the app, the default mode for the describe tool is: pr_commands = ["/describe", ...] meaning the describe tool will run automatically on every PR. Markers are an alternative way to control the generated description, to give maximal control to the user. If you set: pr_commands = ["/describe --pr_description.use_description_markers=true", ...] the tool will replace every marker of the form pr_agent:marker_name in the PR description with the relevant content, where marker_name is one of the following: type: the PR type. summary: the PR summary. walkthrough: the PR walkthrough. diagram: the PR sequence diagram (if enabled). Note that when markers are enabled, if the original PR description does not contain any markers, the tool will not alter the description at all.

Custom labels The default labels of the describe tool are quite generic: [Bug fix, Tests, Enhancement, Documentation, Other]. If you specify custom labels in the repo's labels page or via configuration file, you can get tailored labels for your use cases. Examples for custom labels: Main topic:performance - pr_agent:The main topic of this PR is performance New endpoint - pr_agent:A new endpoint was added in this PR SQL query - pr_agent:A new SQL query was added in this PR Dockerfile changes - pr_agent:The PR contains changes in the Dockerfile ... The list above is eclectic, and aims to give an idea of different possibilities. Define custom labels that are relevant for your repo and use cases. Note that Labels are not mutually exclusive, so you can add multiple label categories. Make sure to provide proper title, and a detailed and well-phrased description for each label, so the tool will know when to suggest it.

Inline File Walkthrough 💎 For enhanced user experience, the describe tool can add file summaries directly to the "Files changed" tab in the PR page. This will enable you to quickly understand the changes in each file, while reviewing the code changes (diffs). To enable inline file summary, set pr_description.inline_file_summary in the configuration file, possible values are: 'table': File changes walkthrough table will be displayed on the top of the "Files changed" tab, in addition to the "Conversation" tab. true: A collapsable file comment with changes title and a changes summary for each file in the PR. false (default): File changes walkthrough will be added only to the "Conversation" tab.

Utilizing extra instructions The describe tool can be configured with extra instructions, to guide the model to a feedback tailored to the needs of your project. Be specific, clear, and concise in the instructions. With extra instructions, you are the prompter. Notice that the general structure of the description is fixed, and cannot be changed. Extra instructions can change the content or style of each sub-section of the PR description. Examples for extra instructions: [pr_description] extra_instructions="""- The PR title should be in the format: '<PR type>: <title>' - The title should be short and concise (up to 10 words) - ... """ Use triple quotes to write multi-line instructions. Use bullet points to make the instructions more readable.

More PR-Agent commands To invoke the PR-Agent, add a comment using one of the following commands: /review: Request a review of your Pull Request. /describe: Update the PR title and description based on the contents of the PR. /improve [--extended]: Suggest code improvements. Extended mode provides a higher quality feedback. /ask <QUESTION>: Ask a question about the PR. /update_changelog: Update the changelog based on the PR's contents. /help_docs <QUESTION>: Given a path to documentation (either for this repository or for a given one), ask a question. /add_docs 💎: Generate docstring for new components introduced in the PR. /generate_labels 💎: Generate labels for the PR based on the PR's contents. /analyze 💎: Automatically analyzes the PR, and presents changes walkthrough for each component. See the tools guide for more details. To list the possible configuration parameters, add a /config comment.

See the describe usage page for a comprehensive guide on using this tool.

[gemini-code-assist]

Code Review

이번 풀 리퀘스트는 매칭 리스트 조회 기능을 위한 MatchingListCard, YesMatchingList, NoMatchingList 컴포넌트 추가와 서버 사이드 데이터 프리페칭 로직 구현을 포함합니다. 코드 리뷰를 통해 Next.js 16의 권장 사항인 useRouter 훅 사용과 중복된 getAge 유틸리티 함수의 공통 모듈화에 대한 개선 의견이 제시되었습니다.

[dasosann]

@gemini-code-assist review

[gemini-code-assist]

Code Review

이번 PR은 TanStack Query의 useInfiniteQuery를 도입하여 매칭 히스토리 기능을 구현하고, 검색·필터링·정렬 기능이 포함된 UI 컴포넌트들을 추가했습니다. 리뷰 결과, 빈 데이터 상태에서 더미 데이터가 노출되는 논리적 오류와 하드코딩된 닉네임 및 숫자값에 대한 수정이 필요합니다. 또한 성능 최적화를 위해 반복적인 날짜 객체 생성과 max-height 애니메이션 방식을 개선해야 하며, 컴포넌트 분리 및 웹 접근성 준수(aria-label) 등 코드 품질과 표준을 위한 보완이 권장됩니다.

[dasosann]

@gemini-code-assist review

[gemini-code-assist]

Code Review

이번 풀 리퀘스트는 매칭 히스토리 조회 기능의 무한 스크롤 구현, 상품 구매 및 실명 설정 기능을 위한 API 연동, 그리고 관련 UI 컴포넌트 추가를 포함하고 있습니다. 전반적으로 기능 구현은 잘 되어 있으나, 일부 하드코딩된 값의 상수화, 디버깅용 로그 제거, 그리고 SSR 환경에서의 Hydration 안정성을 고려한 코드 개선이 필요합니다.