refactor(ui): 공통 UI와 대화상자를 shadcn(Base UI)으로 통합

AGENTS.md

@@ -17,7 +17,7 @@
 ## 로딩 UI 원칙
 
 - 화면 전환과 데이터 조회 중에 `불러오는 중…`, `확인 중…` 같은 문장형 로딩 안내를 화면에 노출하지 않는다.
-- 최초 로딩에는 완료 후 화면과 배치·크기가 비슷한 스켈레톤을 우선 사용한다. 작은 영역에는 공통 `LoadingIndicator` 같은 간결한 로딩 표시를 사용한다.
+- 최초 로딩에는 완료 후 화면과 배치·크기가 비슷한 스켈레톤을 우선 사용한다. 작은 영역에는 공통 `Spinner`(`src/components/ui/spinner`) 같은 간결한 로딩 표시를 사용한다.
 - 제목, 진행 현황, 버튼, 목록의 자리를 미리 확보해 로딩 전후에 화면이 튀거나 다른 화면이 잠깐 끼어 보이지 않게 한다.
 - 백그라운드 재조회에서는 이미 표시된 유효한 데이터를 유지하고, 새 데이터가 준비되면 갱신한다. 재조회만으로 전체 화면을 비우거나 금액을 임시 값으로 바꾸지 않는다.
 - 로딩 상태는 `role="status"`, `aria-label`, `aria-busy`, `sr-only` 등으로 접근성 도구에 전달할 수 있다. 화면에서 문구를 숨기는 것과 접근성 안내를 제거하는 것은 구분한다.

Design.md

@@ -17,9 +17,9 @@
 예를들어서 피그마 페이지에 폰트가 17px이고 시멘틱 토큰과 css변수가 없다면 임의값을 사용한다.
 
 ### 1-3. 컴포넌트
-목표는 shadcn이다. 아직 설치 전이라 기존 공용 컴포넌트와 병행하고, 무엇을 쓸지는 [핵심 원칙 1-1](docs/code-conventions/principles.md)을 따른다.
+목표는 shadcn(Base UI)이다. 옮기는 동안 기존 공용 컴포넌트와 병행하고, 무엇을 쓸지는 [핵심 원칙 1-1](docs/code-conventions/principles.md)을 따른다.
 - 공용: `src/components/<도메인>/`(`layout`, `place`, `map`, `settings` …)
-- shadcn: 설치 후 `src/components/ui/`
+- shadcn: `src/components/ui/`
 - 특정 페이지 전용: `src/app/**/_components/`
 
 ### 1-4. Figma 디자인 시스템
@@ -35,7 +35,8 @@
 - 11 [Tabs](https://www.figma.com/design/Va7ys9C4lx9PIHOGvlaAID/Design-System?node-id=5138-2632) — Tabs Line, Tabs Chip, Tab Item
 - 12 [Toast](https://www.figma.com/design/Va7ys9C4lx9PIHOGvlaAID/Design-System?node-id=5285-4979) — Toast
 - 13 [Alert Dialog](https://www.figma.com/design/Va7ys9C4lx9PIHOGvlaAID/Design-System?node-id=5619-553) — Alert Dialog
-- 14·15 [Chip · Badge](https://www.figma.com/design/Va7ys9C4lx9PIHOGvlaAID/Design-System?node-id=5624-159) — Chip(Solid·Outline), Badge(Weak·Solid·Outline, 톤 6종)
+- 14 [Chips](https://www.figma.com/design/Va7ys9C4lx9PIHOGvlaAID/Design-System?node-id=5624-159) — Chip(Solid·Outline)
+- 15 [Badges](https://www.figma.com/design/Va7ys9C4lx9PIHOGvlaAID/Design-System?node-id=5864-12983) — Badge(Weak·Solid·Outline, 톤 6종)
 - [Update Log](https://www.figma.com/design/Va7ys9C4lx9PIHOGvlaAID/Design-System?node-id=5635-11) — 디자인 시스템 변경 기록
 
 ---
@@ -111,7 +112,7 @@ import { MapPinIcon } from "@/assets/icons";
 
 ### 3-3. 이벤트 피드백
 - 사용자 액션에는 결과 피드백이 있어야 한다
-- alert는 toast, confirm은 `ConfirmDialog`를 쓰고 요구조건에 맞춘다(shadcn 설치 후 기준은 [핵심 원칙 1-1](docs/code-conventions/principles.md))
+- alert는 toast, confirm은 `ConfirmDialog`(ui `AlertDialog` 위)를 쓰고 요구조건에 맞춘다(shadcn 부품으로 옮기는 기준은 [핵심 원칙 1-1](docs/code-conventions/principles.md))
 - 비동기 동작 중 중복 실행 방지(핵심 원칙 2-4)
 
 

components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "base-nova",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

docs/code-conventions/anti-patterns.md

@@ -37,8 +37,8 @@
 - ✓ prop을 더하기 전에 계산 → slot → `variant` → 화면 훅 순서로 본다. `<PlaceCard variant="compact" action={<AddToScheduleButton placeId={place.id} />} />`(원칙 2-2·1-4)
 
 ### 6. 있는 부품 다시 만들기
-- 신호: 새 `fixed inset-0` 모달·바텀시트·로딩 표시, `SettingsActionButton`·`alertDialogButtonClass`가 맞는 자리에 복붙한 버튼 클래스, 새로 만든 범용 Button, `lucide-react`·새 아이콘 패키지
-- ✓ `ConfirmDialog`·`SettingsDialog`·`MobileBottomSheet`·`LoadingIndicator`를 먼저 쓴다. 버튼은 `SettingsActionButton`·`alertDialogButtonClass`가 맞으면 쓰고, 아니면 그 자리 `<button>`에 토큰 클래스로 쓴다(범용 Button은 보류). 아이콘은 `@/assets/icons`(원칙 1-1, Design.md 2장).
+- 신호: 새 `fixed inset-0` 모달·바텀시트·로딩 표시, 손으로 만든 메뉴·셀렉트·탭, `Button` 대신 복붙한 버튼 클래스, `useState`로 하나씩 든 대화상자 폼 값·오류, `lucide-react`·새 아이콘 패키지
+- ✓ `src/components/ui/`의 부품(`Button`·`Dialog`·`AlertDialog`·`Drawer`·`DropdownMenu`·`Select`·`Combobox`·`Popover`·`Tabs`·`Spinner`·`Skeleton` 등)과 확인창 `ConfirmDialog`를 먼저 쓴다. 대화상자 폼은 TanStack Form(원칙 2-9). 아이콘은 `@/assets/icons`(원칙 1-1, Design.md 2장).
 
 ### 7. 미리 만든 추상화
 - 신호: 사용처가 하나인 래퍼·옵션 객체·범용 컴포넌트, `useMount`·`useUpdateEffect` 같은 생명주기 훅, 쓰는 곳 없는 설정 레이어. 로직을 나누는 화면 훅은 사용처가 하나여도 걸리지 않는다.
@@ -87,7 +87,7 @@
 
 ### 17. 토큰 우회
 - 신호: 토큰에 있는 값을 `text-[16px] leading-6`·`rounded-[8px]`·`#333`으로 쓴다. `bg-gray-800`·`shadow-md`(Tailwind 기본값), `dark-gray`(레거시 별칭), `text-body-s`(없는 토큰 이름), 타이포 토큰에 붙인 `font-semibold`, 템플릿 리터럴 className, 조립한 클래스 이름(`` `bg-${tone}` ``)
-- ✓ `text-body-m-regular`, `rounded-md`, `text-text`, 클래스는 `cn("…", TONE_CLASS[tone], className)`(원칙 3-6).
+- ✓ `text-body-m-regular`, `rounded-md`, `text-text`, 변형은 cva로 두고 `cn(tagVariants({ tone }), className)`(원칙 3-6).
 
 ### 18. div 버튼과 지운 포커스
 - 신호: `<div onClick>`, 단순 이동을 `router.push` 버튼으로 만든다. 아이콘 버튼에 `aria-label`이 없다. placeholder만 있는 입력, `outline-none`으로 지운 포커스 표시