feat: shared/ui 공통 컴포넌트 3종 구현 (Indicator, OptionItem, NumberField)

[thwjddlqslek]

Summary

src/shared/ui가 비어 있던 상태에서 Figma 기반 공통 컴포넌트 3종을 구현한다.
여기서 정한 폴더 구조·작성 방식이 이후 모든 공통 컴포넌트의 기준이 되므로
ADR-0001로 같이 고정했다.

Related Issues

• close feat: 공통 컴포넌트 3종 구현: Indicator, OptionItem, TextField #14

PR Point (To Reviewer)

컴포넌트

Indicator — 온보딩 단계 진행 표시. 세그먼트가 컨테이너 폭을 균등 분할합니다.
role="progressbar" + aria-valuenow/min/max. label prop으로 스크린리더 텍스트 주입 가능.

<Indicator total={5} current={2} />
<Indicator total={5} current={2} label="온보딩 진행 단계" />

OptionItem — 원형 이미지 선택 아이템. <button type="button"> + aria-pressed.
alt가 이미지 대체 텍스트 겸 aria-label. 선택 상태는 부모가 소유, 나열 컨테이너는 쓰는 쪽(feature)에서 만듭니다.

<OptionItem imageSrc={src} alt="달리기" selected onClick={...} />

NumberField (Figma 명칭 "text field"에서 숫자 전용임을 명확히 하기 위해 변경) — 숫자 전용 단일 라인 입력 필드. suffix로 단위 표시, error prop으로 외부에서 에러 상태 제어. ghost span으로 value + suffix를 하나의 덩어리로 center 정렬.
너비는 부모 컨테이너를 따릅니다(w-full). onChange 내부에서 숫자 외 문자를 필터링해 붙여넣기·IME·드래그앤드롭 등 모든 입력 경로를 커버.

<NumberField
  value={height}
  suffix="cm"
  placeholder="160"
  maxLength={3}
  error={error}
  onChange={(e) => setHeight(e.target.value)}
  onBlur={() => setError(!/^\d{3}$/.test(height))}
/>

error 판단 시점은 blur. 컴포넌트는 UI만 담당하고 검증 로직은 사용처가 소유합니다.

리뷰 포인트

OptionItem의 hover / pressed / selected가 같은 색 오버레이를 공유합니다.
bg-accent-base/20 하나로 세 상태를 처리하고, selected만 ring-2 ring-accent-base가 추가됩니다.

className은 세 컴포넌트 모두 루트 엘리먼트로 갑니다.

Screenshot

ETC

• docs/adr/0001-shared-ui-component-convention.md 신규 — 폴더 구조, default export + 배럴 재노출, forwardRef 미사용, rem 임의값 표기, convenience prop 기준
• docs/design/design-system.md Figma ↔ 코드 대응표, CONTEXT.md 용어집에 3종 반영
• 색상·타이포·spacing은 styles/tokens/*.css의 기존 토큰만 사용

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
aligner	Ready	Preview	Aug 11, 2026 4:14am

[sohxxny]

bg-muted는 gray-97인데 디자인 스펙 보면 gray-96이어야 합니당

그리고 막대끼리 gap이 10px이라서 gap-5가 아니라 gap-2.5가 되어야 해요!!

[sohxxny]

디자인 시안과 다른 부분이 있어 말씀 드립니당

1. input 폰트는 title-1-emphasized입니다!
2. suffix는 타이포가 typo-headline-regular이고, input과 suffix의 gap이 8px이라서 ml-3으로 해야합니다!
3. 입력 박스만 봤을 때 높이가 82px이어야 하고, radius 값이 20px이어야 합니다!
4. placeholder가 gray-95여야 하고, 아무 값도 입력되지 않았을 때 suffix도 같은 값이 되어야 합니다!
5. input과 suffix가 중앙 정렬이 아닌 하단 정렬이 되어야 합니다!