feat: 매칭결과 디자인

[dasosann]

PR Type

Enhancement

---

Description

• 매칭 결과 화면 UI 컴포넌트 구현

• 사용자 프로필 정보 표시 레이아웃 구성

• 롱프레스 기반 한 번 더 뽑기 인터랙션 추가

• 로딩 상태 표시 및 shimmer 애니메이션 효과

---

Diagram Walkthrough

flowchart LR
  A["ScreenMatchingResult<br/>메인 페이지"] --> B["WaitingFrame<br/>로딩 상태"]
  A --> C["MatchingResult<br/>프로필 정보"]
  A --> D["ResultFooter<br/>액션 버튼"]
  B --> E["Shimmer<br/>애니메이션"]
  D --> F["롱프레스<br/>인터랙션"]

Loading

File Walkthrough

Relevant files

Enhancement

globals.css Shimmer 애니메이션 효과 추가                                                                            app/globals.css --animate-shimmer CSS 변수 추가 shimmer 키프레임 애니메이션 정의 배경 위치 0%에서 200%로 이동하는 로딩 효과 +11/-0    MatchingResult.tsx 매칭 결과 프로필 정보 컴포넌트                                                                                app/matching-result/_components/MatchingResult.tsx 매칭 상대 프로필 정보 표시 컴포넌트 신규 생성 프로필 이미지, 닉네임, 전공, 나이, MBTI, 연락빈도 표시 취미 및 장점 태그 렌더링 (이모지 포함) 좋아하는 노래, 자기소개, 인스타그램 정보 표시 +169/-0  ResultFooter.tsx 결과 화면 하단 액션 버튼 및 롱프레스                                                                        app/matching-result/_components/ResultFooter.tsx 다시 뽑기, 쪽지 보내기 버튼 UI 구현 롱프레스 기반 한 번 더 뽑기 기능 (3초 카운트다운) 마우스 및 터치 이벤트 핸들링으로 모바일 대응 코인/전구 아이콘 표시 및 상태별 텍스트 변경 +131/-0  ScreenMatchingResult.tsx 매칭 결과 페이지 메인 레이아웃                                                                                app/matching-result/_components/ScreenMatchingResult.tsx 매칭 결과 페이지 메인 컴포넌트 신규 생성 3초 로딩 후 결과 화면 표시 로직 백버튼 및 로고 헤더 구성 WaitingFrame, MatchingResult, ResultFooter 조합 +48/-0    WaitingFrame.tsx 로딩 상태 표시 컴포넌트                                                                                        app/matching-result/_components/WaitingFrame.tsx 로딩 상태 표시 컴포넌트 신규 생성 Shimmer 애니메이션 효과 적용 그라데이션 텍스트 효과로 로딩 중 메시지 표시 +26/-0    page.tsx 매칭 결과 페이지 라우트                                                                                        app/matching-result/page.tsx 매칭 결과 페이지 라우트 신규 생성 ScreenMatchingResult 컴포넌트 렌더링 +5/-0      BackButton.tsx BackButton 컴포넌트 유연성 개선                                                                      components/ui/BackButton.tsx text prop 타입을 string에서 React.ReactNode로 변경 텍스트 렌더링을 span에서 div로 변경하여 복합 콘텐츠 지원 레이아웃 개선으로 로고와 텍스트 함께 표시 가능 +2/-2

---

---

✨ 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

이번 풀 리퀘스트는 매칭 결과 페이지와 관련 컴포넌트들을 구현하고 있습니다. 주요 변경 사항으로 쉬머 애니메이션 추가, 매칭 결과 정보를 보여주는 MatchingResult, 롱프레스 기능을 포함한 ResultFooter, 그리고 대기 화면인 WaitingFrame이 도입되었습니다. 또한 BackButton 컴포넌트가 ReactNode를 수용할 수 있도록 개선되었습니다. 코드 리뷰에서는 순수 로직의 유틸리티화, 하드코딩된 데이터의 props 전환, 리스트 렌더링 시 고유 키 사용, 고정된 타임아웃 대신 실제 로딩 상태 활용, 그리고 접근성 향상을 위한 aria-label 추가와 같은 개선 사항들이 제안되었습니다.

[dasosann]

@gemini-code-assist review

[gemini-code-assist]

Code Review

이번 풀 리퀘스트는 매칭 결과 페이지(MatchingResult)와 대기 화면(WaitingFrame), 그리고 롱프레스 기능이 포함된 푸터 컴포넌트를 새롭게 구현하고 BackButton의 유연성을 개선했습니다. 리뷰에서는 하드코딩된 데이터를 props로 분리하고 TypeScript 인터페이스를 적용할 것과, 웹 표준 및 접근성을 위해 시맨틱 태그(article)와 구체적인 이미지 alt 속성을 사용할 것을 제안했습니다. 또한 클라이언트 환경에 적합한 타이머 타입 정의, 불필요한 인라인 스타일 제거, 그리고 BackButton 수정 과정에서 발생한 스타일 유실 문제에 대한 수정이 필요합니다.

[gemini-code-assist]

Repository Style Guide 85번에 따라, 단순히 스타일을 위한 div 대신 의미론적인 article 태그를 사용하여 매칭 결과라는 독립적인 콘텐츠 단위를 명시하는 것을 권장합니다. (닫는 태그인 160번 라인도 함께 수정이 필요합니다.)

References

1. Semantic Markup: 단순히 스타일을 위해
   를 남용하지 말고, main, section, article 등 의미에 맞는 태그를 사용했는지 엄격히 확인하세요. ^(link)