feat: 입력 프리미티브 (TextInput / Textarea / Select) + tsconfig 보정

UX/UI 개편 Phase A-6.

신규 컴포넌트 (lib/components/ui/)
- TextInput.svelte: \$bindable value, label/error/hint, leading/trailing icon,
  \$props.id() 기반 SSR-safe 자동 id, aria-describedby 자동 연결.
- Textarea.svelte: TextInput과 동일 구조 + autoGrow 옵션
  (\$effect로 scrollHeight 동기화, maxRows 지원).
- Select.svelte: 네이티브 <select> 래퍼, ChevronDown 표시.
  options: { value, label, disabled? }[]

빌드 환경 보정
- frontend/tsconfig.json 신규: svelte-kit 자동 생성 .svelte-kit/tsconfig.json을
  extends. 이게 없으면 svelte-check가 \$lib path mapping과 .svelte.ts 모듈
  resolution을 못 잡아 "Cannot find module" 에러 발생. SvelteKit 표준 패턴.
  strict는 false로 시작 (기존 코드 implicit any 다수 — 점진적 정리 예정).
- Button/IconButton/EmptyState/TextInput의 icon prop 타입을 IconComponent(any)로
  완화. lucide-svelte v0.400은 legacy SvelteComponentTyped 기반이라 Svelte 5의
  Component<P, E, B> 시그니처와 호환 안 됨. v0.469+ 업그레이드 후 좁힐 예정.

svelte-check: 0 errors / 8 warnings (전부 기존 latent, 새 코드 무관)
build: 2.07s 무경고

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Hyungi Ahn
2026-04-07 08:39:44 +09:00
parent 70b27d4a51
commit ad23925ed5
7 changed files with 350 additions and 6 deletions

View File

@@ -7,7 +7,12 @@
// - loading이면 disabled + 회전 아이콘
import { Loader2 } from 'lucide-svelte';
import type { Snippet } from 'svelte';
import type { Component } from 'svelte';
// lucide-svelte v0.400은 아직 legacy SvelteComponentTyped 기반이라 Svelte 5의
// Component 타입과 호환되지 않는다. 향후 lucide v0.469+ 업그레이드 시 정식 타입으로 좁히기.
// 우리는 size prop만 넘기므로 any로 받아도 충분히 안전.
// eslint-disable-next-line @typescript-eslint/no-explicit-any
type IconComponent = any;
type Variant = 'primary' | 'secondary' | 'ghost' | 'danger';
type Size = 'sm' | 'md';
@@ -18,7 +23,7 @@
loading?: boolean;
disabled?: boolean;
type?: 'button' | 'submit' | 'reset';
icon?: Component;
icon?: IconComponent;
iconPosition?: 'left' | 'right';
href?: string;
target?: string;