[FIX] Select width 수정, TextArea/Input/Select padding 조절

[keemsebin]

🔥 연관 이슈

• close [FIX] Select width 수정 #78
• close [FIX] SelectButton Type 지정 #80

🚀 작업 내용

• 기존에 고정되어 있던 Select의 width를 w-full로 변경하여, 부모 컴포넌트에서 너비를 컨트롤할 수 있도록 수정했습니다.

• TextArea 디자인도 Input과 맞게 수정 진행했습니다.

고민한 내용

기존에 구현되어 있던 TextArea, Input, Select 컴포넌트는 패딩 값이 서로 달라 일관성이 부족했습니다.
이 세 컴포넌트는 사용자의 입력과 직접 맞닿는 영역이며, 한 화면에서 함께 사용될 가능성이 높기 때문에 패딩 차이가 존재하면 시각적으로 이질감을 줄 수 있다고 판단했습니다. 이에 따라 세 컴포넌트의 패딩 값을 14px 16px으로 통일했습니다.

as is

Summary by CodeRabbit

• New Features

  • Select에 기본 표시값(defaultValue) 지원 추가.

• Refactor

  • Select 버튼 구조를 Flex 기반으로 단순화.
  • 옵션 목록의 배치 기준을 절대→상대 방식으로 변경.
  • 내부 컴포넌트 DOM/구조 정리로 렌더링 단순화.

• Style

  • Input/Select/Option 그룹 및 옵션의 패딩·타이포·호버 색상 일관성 조정.
  • 옵션/그룹 헤더의 크기·패딩 토큰 간소화.

• Breaking Changes

  • TextArea에서 variant prop 제거 — 스타일이 하얀 배경으로 고정됨.

• Documentation

  • Select 스토리 문서 구조 정리(메타 설명 이동, Basic에 ArgTypes 추가).

[coderabbitai]

Walkthrough

Select 관련 컴포넌트들의 레이아웃·스타일이 정리되고 SelectMain에 defaultValue가 추가되었습니다. SelectButton이 Flex 기반으로 재구성되었고 OptionList 포지셔닝이 absolute→relative로 변경되었습니다. TextArea는 variant prop이 제거되어 단일 스타일로 단순화되었습니다.

Changes

Cohort / File(s)	Summary
Input 스타일 정리 src/shared/ui/Input/Input.tsx	입력 필드의 수직 패딩을 md:py-3.5에서 고정 py-3.5로 변경.
Select 옵션 스타일 조정 src/shared/ui/Select/Option.tsx	Option의 hover 배경을 gray-50→gray-100로 변경; lg 사이즈 패딩/타이포 토큰 조정(예: px-4 py-3.5).
Select 그룹명 스타일 조정 src/shared/ui/Select/OptionGroupName.tsx	md 브레이크포인트 제거, 패딩·타이포를 px-4 py-3.5 text-lg로 단순화.
Select 리스트 포지셔닝/타입 수정 src/shared/ui/Select/OptionList.tsx	컨테이너 포지셔닝 absolute→relative로 변경; lg 폰트 토큰에서 text-base 제거(유지: md:text-lg).
Select 버튼 구조/스타일 개편 src/shared/ui/Select/SelectButton.tsx	외부 래퍼를 Flex로 교체(alignItems="center"); 클래스명·패딩·타이포 토큰 정리; 내부 버튼에 type="button" 추가.
Select 기본값 처리 추가 src/shared/ui/Select/SelectMain.tsx	Props 및 시그니처에 defaultValue 추가. 표시값을 `value
Select 스토리 문서 구성 변경 src/shared/ui/Select/Select.stories.tsx	meta의 argTypes를 parameters.docs.description으로 이동; Basic 스토리에 argTypes(size, defaultValue) 재추가.
TextArea API 단순화 src/shared/ui/TextArea/TextArea.tsx	variant prop 및 관련 스타일 맵 제거. 단일 화이트 배경 스타일로 변경; 시그니처에서 variant 제거.
TextArea 스토리 정리 src/shared/ui/TextArea/TextArea.stories.tsx	Basic 스토리의 args에서 variant 제거.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor 사용자
  participant SelectMain
  participant SelectButton
  participant OptionList

  Note over SelectMain: Props: value?, defaultValue?
  사용자->>SelectButton: 클릭 (열기/닫기)
  SelectButton->>SelectMain: isOpen 토글 요청
  SelectMain-->>OptionList: isOpen 상태 전달

  alt 값 존재
    SelectMain->>SelectButton: 표시 텍스트 = value
  else 값 없음
    SelectMain->>SelectButton: 표시 텍스트 = defaultValue
  end

  사용자->>OptionList: 옵션 선택
  OptionList->>SelectMain: onChange(value)
  SelectMain->>SelectButton: 표시 텍스트 갱신 (value)
  SelectMain-->>OptionList: 닫기

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• [BUGFIX] Select 레이아웃 쉬프트 문제  #61: Select 관련 파일(Option.tsx, OptionList.tsx, SelectMain.tsx) 변경과 중복 영역(포지셔닝·props 처리) 있음.
• [FEAT] Textarea 컴포넌트, 스토리북 #51: TextArea의 variant 도입/변경 이력 관련 PR로, 이번 PR의 variant 제거와 직접적 연관성 있음.

Suggested labels

fix, refactor

Suggested reviewers

• yougyung
• ujinsim

Pre-merge checks and finishing touches

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Out of Scope Changes Check	⚠️ Warning	PR에는 Select 너비 수정 외에도 TextArea의 public API(variant 제거), SelectMain에 defaultValue 추가, OptionList의 포지셔닝 변경, Option/OptionGroupName의 패딩·사이징 변경, SelectButton 구조 변경, 스토리북 메타 변경 등 여러 스타일·구조·API 변경이 포함되어 있어 링크된 이슈(#78)의 범위를 벗어나는 변경이 다수 존재합니다; 특히 TextArea에서 variant를 제거한 점은 하위 호환성에 영향을 줄 수 있어 주의가 필요합니다.	이 PR을 기능별로 분리하거나(예: Select 너비 변경만 별도의 PR), TextArea의 API 변경을 별도 이슈로 분리해 문서와 릴리스 노트를 업데이트하고 자동/시각 테스트를 수행한 뒤 병합하세요.
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 (3 passed)

Check name	Status	Explanation
Title Check	✅ Passed	제목은 Select 너비 수정과 TextArea/Input/Select 패딩 조정이라는 PR의 핵심 변경사항을 간결하게 요약하고 있어 스캔 시 의도를 파악하기 쉽습니다.
Linked Issues Check	✅ Passed	링크된 이슈 #78의 목표(Select의 고정 너비 해제)는 구현되어 있습니다; 변경된 SelectButton/SelectMain 클래스에서 w-full로 너비가 변경되어 부모가 너비를 제어할 수 있도록 수정된 것이 확인됩니다.
Description Check	✅ Passed	PR 본문은 연관 이슈, 작업 내용, 고민한 내용과 스크린샷을 포함해 주요 변경사항과 의도를 잘 전달하고 있어 템플릿의 핵심 항목을 대부분 충족합니다; 다만 "리뷰 중점사항" 섹션이 비어 있고 본문에서 "close #80"을 언급하고 있으나 제공된 연결된 이슈 목록에는 #80이 없습니다.

✨ 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 fix/#78-select

---

📜 Recent 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 e76205a and 5691fb1.

📒 Files selected for processing (1)

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

🧰 Additional context used

🧬 Code graph analysis (1)

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

src/shared/index.ts (2)

• Flex (10-10)
• cn (29-29)

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

• Flex (78-107)

🔇 Additional comments (3)

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

3-3: Flex 컴포넌트 import가 적절합니다.

레이아웃 개선을 위해 Flex 컴포넌트를 사용하는 것은 좋은 선택입니다.

---

42-42: type="button" 명시가 좋은 관행입니다.

form 내에서 의도치 않은 submit을 방지하기 위해 button type을 명시적으로 지정한 것은 올바른 접근입니다.

---

27-28: SelectButton.tsx 27–28: lg 사이즈의 min-w-64 검토 필요
min-w-64(16rem)가 부모 컴포넌트의 너비 제어를 방해할 수 있습니다. 현재 16rem보다 작은 너비 사용 사례는 없지만, PR 목표인 “부모가 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년 10월 10일 14시 25분 34초
Storybook 미리보기: https://677a9a76c58a295e9421d3ef-scrcwqzhhw.chromatic.com/

[coderabbitai]

Actionable comments posted: 5

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

src/shared/ui/Select/SelectMain.tsx (1)

24-24: defaultValue를 선택적 prop으로 변경해야 합니다.

현재 defaultValue가 필수 prop으로 정의되어 있지만, 기본값을 항상 제공해야 하는 것은 아닙니다.

다음 diff를 적용하여 선택적 prop으로 변경하세요:

  /**
   * The default value of the select component.
   */
- defaultValue: string;
+ defaultValue?: string;

📜 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 755b5e0 and 46b6d4f.

📒 Files selected for processing (9)

• src/shared/ui/Input/Input.tsx (1 hunks)
• src/shared/ui/Select/Option.tsx (1 hunks)
• src/shared/ui/Select/OptionGroupName.tsx (1 hunks)
• src/shared/ui/Select/OptionList.tsx (1 hunks)
• src/shared/ui/Select/Select.stories.tsx (2 hunks)
• src/shared/ui/Select/SelectButton.tsx (3 hunks)
• src/shared/ui/Select/SelectMain.tsx (2 hunks)
• src/shared/ui/TextArea/TextArea.stories.tsx (0 hunks)
• src/shared/ui/TextArea/TextArea.tsx (1 hunks)

💤 Files with no reviewable changes (1)

• src/shared/ui/TextArea/TextArea.stories.tsx

🧰 Additional context used

🧬 Code graph analysis (2)

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

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

• SelectButton (31-62)

src/shared/ui/Select/OptionList.tsx (1)

• OptionList (26-30)

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

src/shared/index.ts (2)

• Flex (10-10)
• cn (29-29)

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 (7)

src/shared/ui/Select/Option.tsx (1)

8-13: LGTM! 패딩 및 호버 스타일 변경이 적절합니다.

호버 배경색을 gray-100으로 변경하고 lg 크기의 패딩을 px-4 py-3.5로 통일하여 PR 목표에 부합합니다.

src/shared/ui/Select/OptionGroupName.tsx (1)

6-6: LGTM! 패딩 통일로 일관성이 개선되었습니다.

px-4 py-3.5 패딩이 Option 컴포넌트와 일치하며, 단순화된 렌더링 구조가 적절합니다.

src/shared/ui/Select/SelectMain.tsx (1)

47-53: 래퍼 div 제거가 레이아웃에 미치는 영향을 확인하세요.

SelectButton과 OptionList를 직접 렌더링하도록 변경되었습니다. OptionList의 포지셔닝이 absolute에서 relative로 변경된 것과 함께 레이아웃이 의도대로 작동하는지 확인이 필요합니다.

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

33-60: Flex 컴포넌트 사용으로 레이아웃이 개선되었습니다.

Flex 컴포넌트를 사용한 구조 개선이 적절하며, 아이콘 회전 애니메이션도 잘 유지되고 있습니다.

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

10-17: LGTM! Storybook 문서화가 개선되었습니다.

컴포넌트 설명을 parameters.docs.description으로 이동한 것이 Storybook 모범 사례에 부합합니다.

---

31-41: LGTM! argTypes 추가로 문서화가 명확해졌습니다.

새로 추가된 defaultValue prop과 size prop에 대한 argTypes가 적절하게 정의되었습니다.

src/shared/ui/Select/OptionList.tsx (1)

8-8: OptionList 포지셔닝 변경 시각 확인 필요
OptionList가 absolute에서 relative로 변경되어 드롭다운 위치가 달라졌습니다. SelectButton 아래에 정상적으로 표시되는지 화면에서 확인하세요.