7fa7dc1510
UX/UI 개편 Phase A-3 / A-4 / A-5. 후속 phase가 곧바로 소비할 수 있도록 디자인 시스템의 코어 자산을 한꺼번에 도입한다. A-3 — 유틸 헬퍼 (lib/utils/) - pLimit.ts: 동시 실행 N개 제한 (5대 원칙 #4 — 일괄 PATCH/DELETE에서 GPU 서버/SSE 부하 방지). 외부 의존성 없음. - mergeDoc.ts: PATCH/SSE 응답을 로컬 cache에 머지할 때 updated_at으로 stale 갱신 차단 (5대 원칙 #6 — optimistic update conflict resolution). dropDoc 헬퍼 포함. A-4 — CI 토큰 차단 (5대 원칙 #1) - scripts/check-tokens.sh: bg-[var(--*)] 등 임의값 토큰 우회 grep 차단. - npm run lint:tokens 등록. - 현재 baseline 421건 — A-8 토큰 swap에서 0으로 떨어진 후 pre-commit 강제화. A-5 — 첫 6개 프리미티브 (lib/components/ui/) - Button.svelte: variant(primary/secondary/ghost/danger) × size(sm/md), loading/disabled, icon 슬롯, href 자동 a 변환, focus-visible ring. - IconButton.svelte: 정사각형, aria-label 필수, Button과 동일 variant 체계. - Card.svelte: bg-surface + rounded-card + border-default 패턴 1군데화. padded/interactive 옵션, interactive면 button 시맨틱. - Badge.svelte: 의미적 tone(neutral/success/warning/error/accent) 표시. TagPill과 별개 (TagPill은 도메인 prefix 코드 전용). - Skeleton.svelte: ad-hoc animate-pulse div 통합. w/h/rounded prop. - EmptyState.svelte: icon + title + description + action slot. 모든 프리미티브는 Svelte 5 runes mode strict (\$props/\$derived/\$bindable), @theme 토큰만 사용 (bg-surface, text-dim, border-default 등 — bg-[var(--*)] 미사용), focus-visible ring 통일, slot은 {@render children?.()}로 작성. svelte-check: 0 errors, 8 warnings (모두 기존 latent 이슈, 새 코드 무관). build: 1.95s 무경고. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
67 lines
1.7 KiB
Bash
Executable File
67 lines
1.7 KiB
Bash
Executable File
#!/usr/bin/env bash
|
|
# Tailwind 임의값 토큰 우회 차단 — plan 5대 원칙 #1.
|
|
#
|
|
# 새 코드에서 bg-[var(--*)] / text-[var(--*)] / border-[var(--*)] 등을 grep으로 차단.
|
|
# @theme 토큰을 우회해 임의값을 작성하면 이 스크립트가 fail.
|
|
#
|
|
# 예외:
|
|
# - frontend/src/lib/components/ui/ (프리미티브 정의 자체는 토큰 매핑이 필요할 수 있음)
|
|
# - frontend/src/app.css (@theme/:root 선언이므로 grep 대상 아님)
|
|
#
|
|
# 사용:
|
|
# npm run -C frontend lint:tokens
|
|
#
|
|
# 향후 pre-commit hook에 포함:
|
|
# .git/hooks/pre-commit → npm run -C frontend lint:tokens
|
|
|
|
set -e
|
|
|
|
# 스크립트 위치 기준으로 frontend 루트로 이동
|
|
SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
|
|
FRONTEND_DIR="$(dirname "$SCRIPT_DIR")"
|
|
cd "$FRONTEND_DIR"
|
|
|
|
PATTERNS=(
|
|
'bg-\[var\(--'
|
|
'text-\[var\(--'
|
|
'border-\[var\(--'
|
|
'ring-\[var\(--'
|
|
'fill-\[var\(--'
|
|
'stroke-\[var\(--'
|
|
)
|
|
|
|
EXIT=0
|
|
TOTAL=0
|
|
|
|
for p in "${PATTERNS[@]}"; do
|
|
HITS=$(grep -rEn \
|
|
--include='*.svelte' \
|
|
--include='*.ts' \
|
|
--include='*.js' \
|
|
--exclude-dir=node_modules \
|
|
--exclude-dir=.svelte-kit \
|
|
--exclude-dir=ui \
|
|
"$p" src 2>/dev/null || true)
|
|
if [ -n "$HITS" ]; then
|
|
COUNT=$(echo "$HITS" | wc -l | tr -d ' ')
|
|
TOTAL=$((TOTAL + COUNT))
|
|
echo ""
|
|
echo "❌ 금지 패턴 발견: $p ($COUNT 건)"
|
|
echo "$HITS" | head -20
|
|
if [ "$COUNT" -gt 20 ]; then
|
|
echo "... (이하 $((COUNT - 20)) 건 생략)"
|
|
fi
|
|
EXIT=1
|
|
fi
|
|
done
|
|
|
|
if [ $EXIT -eq 0 ]; then
|
|
echo "✅ 토큰 우회 패턴 없음."
|
|
else
|
|
echo ""
|
|
echo "총 $TOTAL 건의 토큰 우회 패턴이 발견되었습니다."
|
|
echo "→ @theme 유틸리티 (bg-surface, text-dim, border-default 등)로 교체하세요."
|
|
fi
|
|
|
|
exit $EXIT
|