feat: 매칭결과 디자인 by dasosann · Pull Request #56 · COMAtching/COMAtching5_FE

dasosann · 2026-04-17T16:53:49Z

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/>인터랙션"]

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 추가와 같은 개선 사항들이 제안되었습니다.

gemini-code-assist · 2026-04-17T16:56:45Z

+  const allHobbies = Object.values(HOBBIES).flat();
+  const allAdvantages = Object.values(ADVANTAGES).flat();
+
+  const findWithEmoji = (list: readonly string[] | string[], text: string) => {
+    return list.find((item) => item.includes(text)) || text;
+  };


allHobbies, allAdvantages 변수와 findWithEmoji 함수는 컴포넌트의 상태나 props에 의존하지 않는 순수 로직입니다. 프로젝트 규칙에 따라 이를 공통 유틸리티 파일로 추출하여 재사용성을 높이고 관심사를 분리하는 것을 권장합니다.

References

Pure functions, such as validation logic, should be extracted into common utility files to improve reusability and separate concerns.

gemini-code-assist · 2026-04-17T16:56:45Z

+  const data = {
+    nickname: "겨울이오길",
+    major: "정보통신전자공학부",
+    age: "21",
+    mbti: "ENTP",
+    contactFrequency: "보통",
+    hobbies: ["축구", "영화감상", "캠핑", "코딩", "게임"],
+    strengths: ["다정다감", "유머러스", "계획적"],
+    song: "한로로 - 사랑하게 될 거야",
+    intro: "친하게 지내요@!🙃",
+    instagram: "@winterizcoming_",
+  };


현재 매칭 결과 데이터(data)가 컴포넌트 내부에 하드코딩되어 있습니다. 컴포넌트의 재사용성을 높이기 위해 이 데이터를 props로 전달받도록 리팩토링하는 것을 권장합니다.

gemini-code-assist · 2026-04-17T16:56:45Z

+        <div className="flex w-full flex-row flex-wrap items-start gap-1 py-1">
+          {data.hobbies.map((hobby, index) => (
+            <div
+              key={index}


리스트 렌더링 시 index를 key로 사용하는 대신, 고유한 값인 hobby를 사용하는 것이 React의 재조정(Reconciliation) 프로세스에 더 효율적입니다.

Suggested change

key={index}

key={hobby}

gemini-code-assist · 2026-04-17T16:56:46Z

+        <div className="flex w-full flex-row flex-wrap items-start gap-1 py-1">
+          {data.strengths.map((strength, index) => (
+            <div
+              key={index}


리스트 렌더링 시 index를 key로 사용하는 대신, 고유한 값인 strength를 사용하는 것이 좋습니다.

Suggested change

key={index}

key={strength}

gemini-code-assist · 2026-04-17T16:56:46Z

+          if (prev <= 1) {
+            setIsTriggered((prevTriggered) => {
+              if (prevTriggered) return prevTriggered;
+              alert("한 번 더 뽑기 로직 실행!"); // 로직 실행 위치


성공적인 동작 트리거 시 alert을 사용하는 것은 사용자 경험 측면에서 부적절할 수 있습니다. 프로젝트 규칙에 따라 alert()은 에러 메시지 표시용으로 권장되므로, 성공 케이스에는 다른 방식의 UI 피드백을 고려해 주세요.

References

Prefer using the native alert() function for displaying error messages instead of toast notifications.

gemini-code-assist · 2026-04-17T16:56:46Z

+      <button
+        onMouseDown={handleHoldStart}
+        onMouseUp={handleHoldEnd}
+        onMouseLeave={handleHoldEnd}
+        onTouchStart={handleHoldStart}
+        onTouchEnd={handleHoldEnd}
+        className="flex w-full flex-row items-center justify-center gap-2 rounded-[15px] bg-linear-to-r from-[#FF4D61] to-[#FF775E] px-[22px] py-4 text-white shadow-[0px_4px_16px_rgba(0,0,0,0.12)] backdrop-blur-[50px] transition-all select-none active:scale-[0.98]"


롱프레스 동작은 보조 기술(스크린 리더 등)을 사용하는 사용자에게 접근성 장벽이 될 수 있습니다. 버튼에 aria-label을 추가하여 동작 방식에 대한 명확한 설명을 제공해 주세요.

gemini-code-assist · 2026-04-17T16:56:46Z

+    const timer = setTimeout(() => {
+      setIsWaiting(false);
+    }, 3000);


3초의 고정된 지연 시간(setTimeout)은 실제 데이터 로딩 상태와 일치하지 않을 수 있습니다. 실제 API 호출의 완료 여부에 따라 isWaiting 상태를 변경하도록 구현하는 것이 더 정확한 사용자 경험을 제공합니다.

feat: 매칭결과 디자인

cdc1b97

qodo-code-review bot added the enhancement New feature or request label Apr 17, 2026

gemini-code-assist bot reviewed Apr 17, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: 매칭결과 디자인#56

feat: 매칭결과 디자인#56
dasosann wants to merge 1 commit intomainfrom
feat/matching-result

dasosann commented Apr 17, 2026 •

edited by qodo-code-review bot

Loading

Uh oh!

gemini-code-assist bot left a comment

Uh oh!

gemini-code-assist bot Apr 17, 2026

Uh oh!

gemini-code-assist bot Apr 17, 2026

Uh oh!

gemini-code-assist bot Apr 17, 2026

Uh oh!

gemini-code-assist bot Apr 17, 2026

Uh oh!

gemini-code-assist bot Apr 17, 2026

Uh oh!

gemini-code-assist bot Apr 17, 2026

Uh oh!

gemini-code-assist bot Apr 17, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

dasosann commented Apr 17, 2026 • edited by qodo-code-review bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Type

Description

Diagram Walkthrough

File Walkthrough

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

gemini-code-assist bot Apr 17, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Apr 17, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Apr 17, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Apr 17, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Apr 17, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Apr 17, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Apr 17, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

dasosann commented Apr 17, 2026 •

edited by qodo-code-review bot

Loading