feat: 버튼 스크롤 및 취미 모달 완성

[dasosann]

PR Type

Enhancement

---

Description

• 취미 선택 모달을 그리드 레이아웃으로 개선하고 이미지 추가

• 중요한 옵션 선택 섹션을 독립적인 드로어로 통합

• 슬라이더 버튼 텍스트에 shimmer 애니메이션 효과 적용

• 드로어 컴포넌트 기본값 및 스타일 조정

---

Diagram Walkthrough

flowchart LR
  A["ScreenMatching<br/>상태 관리"] -->|props 전달| B["MatchingHobbySection<br/>취미 선택"]
  A -->|props 전달| C["MatchingImportantOptionSection<br/>중요 옵션"]
  B -->|내부 드로어| D["Hobby Grid<br/>카테고리 표시"]
  C -->|내부 드로어| E["Option List<br/>선택 항목"]
  F["MatchingSliderButton<br/>슬라이더"] -->|shimmer 효과| G["텍스트 애니메이션"]

Loading

File Walkthrough

	Relevant files
Refactoring	ImportantOptionDrawer.tsx Props 표준화 및 드로어 설정 개선                                                                        app/matching/_components/ImportantOptionDrawer.tsx "use client" 지시문 제거 Props 인터페이스 이름 및 속성명 표준화 (isOpen → open, onClose → onOpenChange) 드로어 닫기 로직 단순화 (직접 onOpenChange(false) 호출) DrawerContent에 showHandle={false} 추가 +10/-12  MatchingHobbyBottomSheet.tsx 파일 삭제 및 기능 통합                                                                                        app/matching/_components/MatchingHobbyBottomSheet.tsx 파일 전체 삭제 기능이 MatchingHobbySection.tsx로 통합됨 +0/-62    ScreenMatching.tsx 드로어 상태 관리 제거 및 Props 통합                                                                    app/matching/_components/ScreenMatching.tsx MatchingHobbyBottomSheet, ImportantBottomSheet 임포트 제거 드로어 열림 상태 관리 변수 제거 (isHobbyDrawerOpen, isImportantDrawerOpen) MatchingHobbySection Props 변경 (onHobbyClick → onSelect) MatchingImportantOptionSection Props 변경 (onClick → onSelect, selectedOption 추가) 하단 드로어 컴포넌트 제거 (섹션 컴포넌트 내부로 이동) +4/-22
Enhancement	MatchingHobbySection.tsx 취미 선택 UI를 그리드 레이아웃으로 개선                                                                    app/matching/_components/MatchingHobbySection.tsx 드로어 컴포넌트 직접 포함 (기존 별도 파일 제거) 취미 카테고리를 그리드 레이아웃(2열)으로 표시 각 카테고리에 이미지 추가 (/main/elec-bulb.png) 선택된 카테고리에 핑크 그래디언트 배경 적용 Props 인터페이스 단순화 (onHobbyClick → onSelect) +74/-28  MatchingImportantOptionSection.tsx 중요 옵션 선택을 드로어로 통합                                                                                app/matching/_components/MatchingImportantOptionSection.tsx 드로어 컴포넌트 직접 포함 (기존 별도 파일 제거) Props 인터페이스 확장 (onClick → onSelect, selectedOption 추가) 선택된 옵션을 텍스트로 표시하는 기능 추가 드로어 내부에 옵션 리스트 렌더링 내부 상태 관리로 드로어 열림/닫힘 제어 +91/-32  MatchingSliderButton.tsx 슬라이더 텍스트 shimmer 애니메이션 적용                                                                app/matching/_components/MatchingSliderButton.tsx 슬라이더 계산식 수정 (padding 값 제거) 텍스트에 shimmer 애니메이션 효과 추가 (활성 상태) 그래디언트 배경 인라인 스타일로 적용 썸 요소에 shrink-0 클래스 추가 컨테이너 boxShadow 값 수정 (inset 제거) 썸 요소에 boxShadow 스타일 추가 +16/-6
Configuration changes	drawer.tsx 드로어 기본 설정 및 스타일 조정                                                                              components/ui/drawer.tsx showHandle 기본값 변경 (true → false) 드로어 최대 높이 증가 (80vh → 96vh) mb-24, mt-24 마진 값 제거 after:hidden 클래스 추가 핸들 요소 조건부 렌더링 로직 유지 +5/-4

---

---

✨ 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

이번 풀요청은 매칭 화면의 구조를 개선하여 관심사 및 중요 옵션 선택 드로어를 각 섹션 컴포넌트 내부에 통합하고, ScreenMatching의 상태 관리를 간소화했습니다. 또한 Drawer 공통 컴포넌트의 UI 사양을 조정하고 MatchingSliderButton에 쉬머 애니메이션과 스타일 수정을 적용했습니다. 리뷰 결과, 이벤트 핸들러를 사용하는 ImportantOptionDrawer에 누락된 "use client" 지시어를 다시 추가해야 하며, MatchingSliderButton의 접근성 속성(aria-valuenow) 계산 시 컨테이너 패딩을 고려하지 않아 발생하는 오차를 수정해야 합니다. 더불어 Drawer 핸들의 조건부 노출 로직 오류와 스타일 가이드에 따른 조건부 클래스 처리(cn 유틸리티 사용)에 대한 개선 사항이 지적되었습니다.