feat: matching 페이지 디자인

[dasosann]

PR Type

Enhancement

---

Description

• 매칭 페이지 UI 컴포넌트 구조 완성

• MBTI, 나이, 연락빈도, 관심사 선택 섹션 추가

• 중요한 옵션 선택 기능 구현

• 환경변수 및 애니메이션 타이밍 최적화

---

Diagram Walkthrough

flowchart LR
  A["ScreenMatching<br/>메인 페이지"] --> B["MatchingMBTISection<br/>MBTI 선택"]
  A --> C["MatchingAgeSection<br/>나이 선택"]
  A --> D["MatchingFrequencySection<br/>연락빈도 선택"]
  A --> E["MatchingHobbySection<br/>관심사 선택"]
  A --> F["MatchingImportantOptionSection<br/>중요 옵션"]
  B --> G["ProfileButton<br/>공유 버튼"]
  C --> G
  D --> G
  F --> H["상태 관리<br/>선택값 저장"]

Loading

File Walkthrough

	Relevant files
Enhancement	9 files ScreenMatching.tsx 매칭 페이지 메인 레이아웃 재구성                                                                              +37/-6    MatchingMBTISection.tsx MBTI 선택 섹션 컴포넌트 신규 추가                                                                        +118/-0  MatchingAgeSection.tsx 나이 선택 섹션 컴포넌트 신규 추가                                                                            +44/-0    MatchingFrequencySection.tsx 연락빈도 선택 섹션 컴포넌트 신규 추가                                                                        +52/-0    MatchingHobbySection.tsx 관심사 선택 섹션 컴포넌트 신규 추가                                                                          +45/-0    MatchingImportantOptionSection.tsx 중요 옵션 선택 섹션 컴포넌트 신규 추가                                                                      +89/-0    MyCoinSection.tsx className prop 추가 및 스타일 유연성 개선                                                      +18/-3    StartExtraInfo.tsx 애니메이션 타이밍 최적화 및 단축                                                                              +2/-2      StartOnBoarding.tsx 애니메이션 타이밍 최적화 및 단축                                                                              +2/-2
Formatting	2 files Step3MBTI.tsx 텍스트 색상 클래스명 일관성 개선                                                                              +1/-1      Step4ContactFrequency.tsx 텍스트 색상 클래스명 일관성 개선                                                                              +1/-1
Configuration changes	1 files next.config.ts 환경변수명 변경 및 API 설정 수정                                                                          +1/-1

---

---

✨ 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

이번 PR은 매칭 시스템을 위한 연령, MBTI, 연락 빈도 등 다양한 입력 섹션 컴포넌트를 신규 도입하고 ScreenMatching 메인 화면을 구축했습니다. 코드 리뷰에서는 defaultValue를 통한 상태 초기화 방식이 부모 컴포넌트와의 상태 동기화 문제를 야기함을 지적하며 제어 컴포넌트 패턴 도입을 강력히 권고했습니다. 더불어 웹 접근성 향상을 위한 시맨틱 태그 사용, 중복 UI의 컴포넌트화, 그리고 복잡한 상태 로직의 객체 통합 등 전반적인 코드 품질과 유지보수성 개선을 위한 구체적인 가이드가 제공되었습니다.

[dasosann]

@gemini-code-assist review

[gemini-code-assist]

Code Review

이번 풀 리퀘스트는 매칭 기능을 위한 다양한 섹션 컴포넌트(나이, 관심사, MBTI, 연락 빈도 등)를 추가하고, ScreenMatching 컴포넌트에서 이를 통합하여 상태를 관리하도록 변경했습니다. 또한 온보딩 및 추가 정보 페이지의 타이머 시간을 조정하고, MyCoinSection에 스타일 확장을 위한 className 프롭을 추가했습니다. 리뷰 결과, MyCoinSection에 클라이언트 컴포넌트 지시어("use client") 추가가 필요하며, button 태그 내부에 블록 레벨 요소를 배치한 웹 표준 위반 사항이 발견되었습니다. 또한 MBTI 섹션의 상태 동기화 문제와 컴포넌트 내 정적 데이터의 외부 추출을 통한 성능 최적화가 권장됩니다.

[dasosann]

@gemini-code-assist review

[gemini-code-assist]

Code Review

이번 풀 리퀘스트는 매칭 화면을 구성하는 MBTI, 나이, 관심사 등 다양한 선택 섹션 컴포넌트와 커스텀 슬라이더 버튼을 신규 구현하고 이를 통합했습니다. 리뷰를 통해 모듈 임포트 순서와 디버깅 로그 제거, 슬라이더의 반응형 레이아웃 및 타이머 클린업 누락에 대한 개선이 필요함이 확인되었습니다. 또한 웹 접근성 준수를 위한 속성 추가와 인라인 스타일 대신 Tailwind CSS를 활용한 스타일 최적화가 권장됩니다.