[REFACTOR] Select 컴포넌트 크기 맞춤, drag svg 추가

[keemsebin]

🔥 연관 이슈

• close [REFACTOR] 셀렉트 크기 조절, Input, textarea 플레이스 홀더 컬러 변경 #99

🚀 작업 내용

• Select 컴포넌트 크기를 input/textarea와 맞게 맞췄습니다.
• input/textarea 컴포넌트의 placeholder색상을 맞췄습니다.
• drag svg 추가했습니다.

Summary by CodeRabbit

릴리스 노트

• 새로운 기능

  • 드래그 아이콘이 새로 추가되었습니다.

• 스타일

  • SelectButton 컴포넌트의 시각적 스타일이 개선되었습니다. (모서리 반올림, 크기 조정 최적화)

• 리팩토링

  • 모듈 내보내기 구조가 최적화되었습니다.

[coderabbitai]

Walkthrough

세 개의 UI 컴포넌트 모듈이 업데이트되었습니다. Input의 내보내기 경로가 변경되고, SelectButton에 className 속성이 추가되며 크기 변수가 업데이트되고, 아이콘 에셋에 새로운 Drag 아이콘이 추가되었습니다.

Changes

Cohort / File(s)	Summary
Export 경로 변경 src/shared/index.ts	Input 내보내기 출처를 ./ui/Input/Input에서 ./ui/Input로 변경
SelectButton 컴포넌트 업데이트 src/shared/ui/Select/SelectButton.tsx	className 속성 추가, sizeVariants에 rounded 스타일 적용 (md: rounded-lg, lg: min-h-[52px] + rounded-xl), 내부 button에 rounded-xl 및 leading-none 적용, props 스프레딩 지원
아이콘 에셋 확장 src/shared/ui/assets/index.tsx	drag.svg 이미지 임포트 추가, Icons 맵에 drag 항목 추가, IconName 타입에 'drag' 키 포함

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• SelectButton.tsx: 새로운 className 속성의 Props 타입 정의 및 스프레딩이 올바르게 구현되었는지 확인
• sizeVariants 스타일: md와 lg 크기의 rounded 값 변경사항이 의도한 디자인과 일치하는지 검증
• 아이콘 에셋: drag.svg 파일의 존재 및 타입 안정성 확인

Possibly related PRs

• [FEAT] Input, IconButton 컴포넌트 #50: Input 컴포넌트 내보내기 경로 변경과 관련된 이전 Input 컴포넌트 추가 작업
• [FIX] Select width 수정, TextArea/Input/Select padding 조절 #79: SelectButton 컴포넌트의 props 및 className 처리 방식 변경과 관련된 동일 컴포넌트 수정 작업

Suggested labels

chore

Suggested reviewers

• yougyung
• ujinsim

Pre-merge checks and finishing touches

❌ Failed checks (3 warnings)

Check name	Status	Explanation	Resolution
Linked Issues check	⚠️ Warning	PR의 코드 변경사항이 연결된 이슈 #99의 요구사항 중 일부를 충족합니다. Select 컴포넌트 크기 조절과 drag svg 추가는 구현되었으나, 플레이스홀더 컬러 통일은 코드에서 확인되지 않습니다.	Input/textarea 플레이스홀더 컬러 통일 작업이 완료되지 않았습니다. 이슈 #99의 모든 요구사항을 완료하거나 부분 요구사항만 포함하는 새로운 이슈로 분리하세요.
Out of Scope Changes check	⚠️ Warning	src/shared/index.ts의 Input 내보내기 경로 변경은 이슈 #99의 범위에 포함되지 않은 변경사항으로 보입니다.	src/shared/index.ts의 Input 내보내기 경로 변경이 이슈 #99의 요구사항과 어떤 관련성이 있는지 명확히 하거나, 별도의 PR로 분리하세요.
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	PR 제목이 변경사항의 주요 내용을 정확하게 반영하고 있습니다. Select 컴포넌트 크기 맞춤과 drag svg 추가라는 두 가지 주요 변경사항을 명확하게 요약했습니다.
Description check	✅ Passed	PR 설명이 저장소의 필수 템플릿 구조를 따르고 있습니다. 연관 이슈, 작업 내용이 작성되었으나, 고민했던 내용과 리뷰 중점사항은 미작성 상태입니다.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch refactor/#99-select

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

Update: 2025년 11월 18일 20시 31분 42초
Storybook 미리보기: https://677a9a76c58a295e9421d3ef-gcssfiusns.chromatic.com/

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 0844966 and 31f707b.

⛔ Files ignored due to path filters (1)

• src/shared/ui/assets/drag.svg is excluded by !**/*.svg

📒 Files selected for processing (3)

• src/shared/index.ts (1 hunks)
• src/shared/ui/Select/SelectButton.tsx (1 hunks)
• src/shared/ui/assets/index.tsx (2 hunks)

🧰 Additional context used

🧬 Code graph analysis (1)

src/shared/ui/Select/SelectButton.tsx (2)

src/shared/ui/DoubleButton/DoubleButton.tsx (1)

• Props (7-16)

src/shared/ui/Flex/Flex.tsx (1)

• Flex (78-107)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: preview-storybook

🔇 Additional comments (6)

src/shared/ui/assets/index.tsx (2)

43-43: LGTM! 드래그 아이콘 추가

Icons 객체에 새로운 드래그 아이콘이 올바르게 추가되었습니다. 이는 PR 목표와 일치하며, IconName 타입이 자동으로 'drag' 키를 포함하도록 확장됩니다.

---

12-12: 드래그 SVG 파일 검증 완료

drag.svg 파일이 src/shared/ui/assets/ 디렉토리에 정상적으로 존재하는 것이 확인되었습니다. 파일 크기는 2.3K이며, 임포트 경로가 정확합니다.

src/shared/ui/Select/SelectButton.tsx (3)

24-27: LGTM! className 속성 추가

className 속성이 Props에 올바르게 추가되었습니다. 이는 컴포넌트의 확장성을 높이고 다른 컴포넌트(예: DoubleButton)와 일관된 패턴을 따릅니다.

---

35-52: LGTM! 속성 전달 패턴이 올바르게 구현되었습니다.

함수 시그니처가 className과 ...props를 포함하도록 업데이트되었으며, 이들이 Flex 컴포넌트에 올바르게 전달됩니다. 이는 Flex 컴포넌트의 패턴과 일치하며 추가 HTML 속성을 전달할 수 있게 합니다.

---

57-57: LGTM! 버튼 스타일 개선

버튼 클래스명에 leading-none이 추가되어 수직 정렬이 개선되었으며, rounded-xl은 lg 크기 변형과 일치합니다.

src/shared/index.ts (1)

14-14: 배럴 내보내기 경로 변경이 올바르게 검증되었습니다.

검증 결과, src/shared/ui/Input/index.ts 파일이 존재하며 export { Input } from './Input';를 통해 Input 컴포넌트를 올바르게 내보내고 있습니다. src/shared/ui/Input/Input.tsx 파일도 정상적으로 존재합니다.

내보내기 경로 변경('./ui/Input/Input' → './ui/Input')은 배럴 파일 패턴을 올바르게 적용한 것으로, 구조적으로 문제없습니다.