Wheel Picker

구조는 당근 SEED Wheel Picker(Apache-2.0)를 따른다 — 칼럼 · 항목 · 가운데 선택 띠 · 위아래 안개, 크기 small 36 · medium 44. 값은 groo 토큰이고, SEED 와 다른 자리는 맨 아래 "SEED 와 다른 점" 에 적었다(2026-10-03 사용자 결정). groo 에 처음 두는 컴포넌트다.

수치 원본은 wheel-picker.yaml이다. 수치 표 자리([표: …])와 그림 자리([그림: …])는 사이트가 그 파일로 그린다.

직접 골라 보기제목 링크 복사

크기 · 보이는 칸 수 · 칼럼을 고르면 스펙대로 그린 휠이 바뀐다. 실제로 굴리고 누를 수 있다.

import { WheelPicker, WheelPickerColumn } from "@/components/ui/wheel-picker"

<WheelPicker aria-label="월 선택">
  <WheelPickerColumn aria-label="연도" options={years} align="right" className="w-[120px]" value={year} onValueChange={setYear} />
  <WheelPickerColumn aria-label="월" options={months} align="left" className="w-[96px]" loop value={month} onValueChange={setMonth} />
</WheelPicker>

Anatomy제목 링크 복사

부위

Properties제목 링크 복사

Size제목 링크 복사

medium(44 · 글자 26)이 기본이다 — 시각 · 월 고르기 · 연 · 월 휠. small(36 · 글자 20)은 좁은 팝오버에만 쓴다. 글자는 글자 크기 설정을 따르지 않는 px 이다 — 휠 칸이 넘치지 않게.

크기

보이는 칸 수제목 링크 복사

기본 5칸(220), 달력 머리의 연 · 월 휠은 요일 줄과 6주 자리를 덮는 7칸(308)이다. 홀수만 쓴다 — 가운데 줄이 있어야 한다. 안개는 휠 높이의 40% 와 항목 3칸 중 짧은 쪽이다(5칸 88 · 7칸 123).

공통

상태

Guidelines제목 링크 복사

휠을 쓰는 자리제목 링크 복사

순서가 있고 앞뒤 값을 보며 고르는 값 — 시각 · 연 · 월. 하루를 고르면 달력(Date Picker)이 기본이다 — 요일 · 오늘과의 거리가 보인다. 몇 해 앞뒤의 먼 날도 달력 제목을 눌러 연 · 월 휠로 옮긴 뒤 날을 누른다. 연 · 월 · 일 세 휠은 피한다 — 31일이 없는 달을 따로 막아야 하고, 요일 · 오늘과의 거리가 보이지 않는다(2026-10-22 사용자 결정 3B — https://claude.ai/artifact/Mag1tEv51MdQHdy1o8hY3L). 순서가 없거나 고를 것이 적으면 다른 컴포넌트다 — Select 의 "고르는 컴포넌트 고르기" 판단 순서로 고른다(2026-10-22 사용자 결정 2B — https://claude.ai/artifact/SmHD31RQxTjWbfK83nbcym).

달만 고르기제목 링크 복사

예산 · 홈 · 카드 실적처럼 달만 고르는 자리는 연 | 월 두 칼럼 휠을 시트(1280 미만) · 팝오버(이상)로 열고 "완료" 로 넣는다 — 달력의 연 · 월 휠과 같은 모양이다(연 120 오른쪽 · 월 96 왼쪽 정렬, 보이는 칸 5). 4 × 3 월 격자는 두지 않는다. 시트 · 팝오버의 제목은 "월 선택" 이다 — 캘린더 · 예산 어디서 열어도 같은 말이고 휠의 이름(aria-label)과 같다(2026-10-29 I-27 — 웹 · 앱 같게).

항목제목 링크 복사

짧은 한 줄 글 — 숫자 · 짧은 낱말. 시 · 분처럼 숫자만으로 읽히는 칼럼은 단위를 칼럼 이름으로 알리고 항목마다 붙이지 않는다. 연 · 월은 날짜 표기 그대로 "2026년" · "10월" 이다(달력의 연 · 월 휠과 같다). 버튼 · 링크 · 여러 줄 글은 넣지 않는다. 아이콘을 쓰면 모든 항목에.

코드제목 링크 복사

레시피 recipes/shadcn/components/ui/wheel-picker.tsx 를 쓴다. 아래 미리보기는 스펙 값으로 그린 모습이다.

달만 고르기 — "완료" 로 넣는다제목 링크 복사

import { WheelPicker, WheelPickerColumn } from "@/components/ui/wheel-picker"

<WheelPicker aria-label="월 선택">
  <WheelPickerColumn aria-label="연도" options={years} align="right" className="w-[120px]" value={draft.year} onValueChange={(year) => setDraft({ ...draft, year })} />
  <WheelPickerColumn aria-label="월" options={months} align="left" className="w-[96px]" loop value={draft.month} onValueChange={(month) => setDraft({ ...draft, month })} />
</WheelPicker>
<Button onClick={() => { setMonth(draft); setOpen(false) }}>완료</Button>

Behavior제목 링크 복사

키보드제목 링크 복사

Accessibility제목 링크 복사

Do / Don't제목 링크 복사

✅ Do제목 링크 복사

• 시각 · 연 · 월처럼 순서가 있는 값.
• 휠이 멈춘 뒤에 값을 정하고, 시트 · 팝오버에서는 "완료" 로 넣는다.
• 칼럼마다 이름(연도 · 월 · 시 · 분).

❌ Don't제목 링크 복사

• 날짜를 연 · 월 · 일 세 휠로 받기 — 피한다. 먼 날도 달력 제목의 연 · 월 휠로.
• 순서 없는 긴 목록 — Select.
• 항목에 버튼 · 여러 줄 글.

Specification제목 링크 복사

SEED 와 다른 점제목 링크 복사

• 안개 높이는 늘 min(40%, 3칸) — SEED 는 연 · 월 휠에서 코드 상수 102 를 쓴다(식으로는 123).
• 기본 크기 medium — SEED rootage 는 small, 코드 · React 는 medium(코드를 따른다).
• 달만 고르기에 쓴다 — SEED 에는 월만 고르는 피커가 없다(연 · 월 휠은 Date Picker 안뿐).
• 링 색은 groo stroke-focus-ring.

Migration notes제목 링크 복사

2026-10-30 — 달 고르기 시트 제목제목 링크 복사

캘린더 · 예산의 달 고르기 시트 제목을 "월 선택" 한 말로 맞췄다(2026-10-29 I-27 — 웹 · 앱 같게). 코드 예시의 휠 이름 · 사이트 그림의 시트 제목이 이미 "월 선택" 이라 "달만 고르기" 에 한 줄만 더했다. 값 변경 없음.

2026-10-22 — 세 휠은 "피한다"제목 링크 복사

"연 · 월 · 일 세 휠로 받지 않는다"(c64ff4e 세션 문장 — 10-03 비교 페이지에 "세 휠" 이 없다)를 "하루는 달력이 기본 · 먼 날은 달력 제목의 연 · 월 휠 · 세 휠은 피한다" 로 낮췄다(3B). 사용자 결정 — https://claude.ai/artifact/Mag1tEv51MdQHdy1o8hY3L. 고르지 않은 안: Don't 그대로(3A) · 먼 날 칸은 세 휠 허용(3C). 지금 세 휠을 쓰는 곳은 없다 — 화면은 같다.

2026-10-22 — 앱 칼럼은 조절 가능으로(I-04 검수)제목 링크 복사

Flutter 3.44.9 는 spinButton 역할이 없다(넣으면 디버그에서 오류). 앱 칼럼은 이름 + 값 + 올리기 · 내리기로 두고(Android 조절 막대 · iOS 조절 가능), Flutter 가 역할을 구현하면 한 줄 더한다 — Accessibility 의 앱 줄.

2026-10-22 — "5개 이하" 를 판단 순서 링크로제목 링크 복사

"고를 것이 5개 이하면 Radio · Segmented Control" 은 결정 기록 없이 들어간 숫자라 Select 의 판단 순서(2 ~ 4 · 5 이상)와 어긋났다 — 그 절 링크로 바꿨다(사용자 결정 2B — https://claude.ai/artifact/SmHD31RQxTjWbfK83nbcym).

2026-10-15 — 누르기 · 키 이동은 200ms제목 링크 복사

구현 세션 질문 Q-005 — 항목을 눌러 가운데로 옮기는 시간이 "부드러운 스크롤" 로만 적혀 있어, 앱은 200ms ease-out cubic, 웹(레시피)은 브라우저 기본(크로미움 1칸 122 · 2칸 190 · 3칸 226ms, 브라우저마다 다르다)으로 갈렸다. 사용자가 200ms ease-out cubic(motion-duration-d4)으로 골랐다(안 A — 150ms(B) · 브라우저 기본(C) · 끌기 정착과 같은 220 + 칸당 40(D)은 고르지 않았다). 레시피는 scrollTo({ behavior: "smooth" }) 대신 끌기 정착에 쓰던 맞추기(스냅을 끄고 ease-out cubic)에 200ms 를 준다 — 키(↑ ↓ · Home · End)도 같다. 앱은 그대로다.

2026-10-08 — 글자 값을 고정 px 토큰으로제목 링크 복사

YAML 의 항목 글자가 rem 토큰($text-t10 · $text-t7)을 가리키고 "글자 크기 설정을 따르지 않는 px" 는 비고에만 있었다 — YAML 대로 만들면 글자 크기 200% 에서 휠 글자가 52 / 70 으로 커져 44 칸을 넘어 위아래 항목과 겹친다. 레시피 · 제품(웹 -static 클래스 · 앱 TextScaler.noScaling) · SEED rootage 와 같게 값 자리를 -static 토큰($text-t10-static · $text-t7-static)으로 고쳤다. 크기 · 모습은 그대로다. -static 은 같은 글자 토큰의 px 판이다(Typography v104 — 내보낼 때 생긴다). 사용자 결정 — 비교 페이지 3.

2026-10-03 — SEED Wheel Picker 로 새로 둔다제목 링크 복사

사용자가 비교 페이지에서 정했다 — 시각은 SEED Time Picker(이 휠 위), 달력의 연 · 월은 휠, 달만 고르기도 연 · 월 휠 + "완료".

제품은 앱 적용 단계에서 옮긴다(2026-10-02 조사).

• Desk 웹 — 월 피커 두 벌(MonthPicker 5곳 — 데스크톱 손 드롭다운 · 폰 Drawer, Esc 안 됨 · 포털 없음 · 이름 없는 연도 이동, 캘린더 머리 피커 — 다른 모양), 네이티브 month 1. 모두 4 × 3 격자를 누르면 바로 들어간다.
• Desk 앱 — 월 시트 두 벌(72 × 36 · 75 × 34, 하나는 버튼이 아님), 시각은 iOS 휠(CupertinoDatePicker).
• HR 웹 — 연도 셀렉트 7 · 연 · 월 숫자칸 2.