@gaonjs/cli 0.15.0 → 0.21.2

package/dist/templates/project/apps/web/pages/Home/Index.vue.tpl

@@ -2,6 +2,8 @@
 import { computed } from 'vue'
 import { pageProps } from 'gaonjs/vue'
 import { useGaonHealth, type HealthDoctor } from '../../composables/useGaonHealth.js'
+import Card from '../../components/ui/Card.vue'
+import Badge from '../../components/ui/Badge.vue'
 
 // home#index 의 render props — Serialized<> 로 넘어온다(§6.2).
 // 라우트 키는 .gaon/routes.d.ts 가 유효한 값을 알려준다.
@@ -11,7 +13,7 @@ const props = pageProps<'web:home#index'>()
 const { health, loading, available } = useGaonHealth()
 
 type CardStatus = 'ok' | 'warn' | 'error' | 'idle'
-interface Card {
+interface StatusCard {
   readonly key: string
   readonly title: string
   readonly status: CardStatus
@@ -25,14 +27,14 @@ function doctorNote(d: HealthDoctor | undefined): string {
   return `${d.passed} 통과 · ${d.warnings} 경고 · ${d.errors} 오류`
 }
 
-const cards = computed<Card[]>(() => {
+const cards = computed<StatusCard[]>(() => {
   const h = health.value
   const web = h?.web
   const db = h?.database
   const hub = h?.hub
   const doc = h?.doctor
 
-  const webCard: Card = {
+  const webCard: StatusCard = {
     key: 'web',
     title: 'WEB',
     status: available.value ? 'ok' : 'idle',
@@ -42,7 +44,7 @@ const cards = computed<Card[]>(() => {
       : ['개발 서버에서만'],
   }
 
-  const dbCard: Card = {
+  const dbCard: StatusCard = {
     key: 'database',
     title: 'DATABASE',
     status: !db || !db.configured ? 'idle' : db.connected ? 'ok' : 'error',
@@ -55,7 +57,7 @@ const cards = computed<Card[]>(() => {
         : ['.env 에 DATABASE_URL', 'gaon.config.ts 에서 켜기'],
   }
 
-  const hubCard: Card = {
+  const hubCard: StatusCard = {
     key: 'hub',
     title: 'HUB',
     status: !hub || !hub.configured ? 'idle' : hub.connected ? 'ok' : 'error',
@@ -63,12 +65,16 @@ const cards = computed<Card[]>(() => {
     lines:
       hub && hub.configured
         ? hub.connected
-          ? (hub.streams ?? []).map((s) => `${s.stream}: ${s.waiting === null ? '대기 없음' : `${s.waiting} 대기`}`)
+          ? [
+              // jobs = 스트림 대기 수 · channels = 프레즌스 실 접속자 수(결정 71).
+              ...(hub.streams ?? []).map((s) => `${s.stream}: ${s.waiting === null ? '대기 없음' : `${s.waiting} 대기`}`),
+              `채널 접속 ${(hub.channels ?? []).reduce((n, c) => n + c.members, 0)}명`,
+            ]
           : [hub.error ?? 'NATS 미연결']
         : ['.env 에 NATS_URL', '실시간·비동기 백본'],
   }
 
-  const doctorCard: Card = {
+  const doctorCard: StatusCard = {
     key: 'doctor',
     title: 'DOCTOR',
     status: !doc ? 'idle' : doc.level === 'pass' ? 'ok' : doc.level === 'warn' ? 'warn' : 'error',
@@ -87,6 +93,14 @@ const cards = computed<Card[]>(() => {
   return [webCard, dbCard, hubCard, doctorCard]
 })
 
+// 상태 → 점 색(Tailwind). idle 은 은은하게, 나머지는 신호색.
+const DOT: Record<CardStatus, string> = {
+  ok: 'bg-green-500',
+  warn: 'bg-yellow-500',
+  error: 'bg-red-500',
+  idle: 'bg-muted-foreground/40',
+}
+
 // 다음 단계 — 라이브 상태에서 완료 여부를 파생한다.
 interface Step {
   readonly label: string
@@ -155,265 +169,68 @@ const routeLines = computed<CodeLine[]>(() => {
 </script>
 
 <template>
-  <div class="landing">
-    <section class="hero">
-      <p class="eyebrow">{{ props.title }}</p>
-      <h1>가온에 올라탔습니다.</h1>
-      <p class="lede">
-        이 화면은 <code>apps/web/pages/Home/Index.vue</code> 입니다.
-        <code>routes.ts</code> 의 <code>r.get('/', 'home#index')</code> 가 여기로 연결했습니다.
+  <div class="mx-auto max-w-[880px] px-5 pb-16 pt-12 leading-relaxed">
+    <section class="mb-10">
+      <p class="mb-1.5 text-xs font-semibold uppercase tracking-[0.08em] text-[#7c5cff]">{{ props.title }}</p>
+      <h1 class="mb-3.5 text-[clamp(2rem,5vw,2.9rem)] font-bold leading-[1.15] tracking-tight">가온에 올라탔습니다.</h1>
+      <p class="my-1.5 text-[1.02rem] text-foreground/80">
+        이 화면은 <code class="rounded bg-muted px-1.5 py-0.5 font-mono text-[0.86em]">apps/web/pages/Home/Index.vue</code> 입니다.
+        <code class="rounded bg-muted px-1.5 py-0.5 font-mono text-[0.86em]">routes.ts</code> 의 <code class="rounded bg-muted px-1.5 py-0.5 font-mono text-[0.86em]">r.get('/', 'home#index')</code> 가 여기로 연결했습니다.
       </p>
-      <p class="lede sub">
-        아래 카드는 지금 이 서버의 <strong>실제 상태</strong>입니다 —
-        하드코딩이 아니라 <code>/_gaon/health</code> 를 읽어 그립니다.
-        <a :href="props.docs" target="_blank" rel="noreferrer">{{ props.docs }}</a>
+      <p class="my-1.5 text-[0.95rem] text-muted-foreground">
+        아래 카드는 지금 이 서버의 <strong class="font-semibold text-foreground">실제 상태</strong>입니다 —
+        하드코딩이 아니라 <code class="rounded bg-muted px-1.5 py-0.5 font-mono text-[0.86em]">/_gaon/health</code> 를 읽어 그립니다.
+        <a :href="props.docs" target="_blank" rel="noreferrer" class="text-[#4f8cff] hover:underline">{{ props.docs }}</a>
       </p>
     </section>
 
-    <section class="cards" aria-label="프레임웍 상태">
-      <article v-for="c in cards" :key="c.key" class="card" :class="`is-${c.status}`">
-        <header class="card-top">
-          <span class="dot" :class="`dot-${c.status}`" aria-hidden="true"></span>
-          <span class="card-title">{{ c.title }}</span>
-        </header>
-        <p class="card-headline">{{ c.headline }}</p>
-        <ul class="card-lines">
-          <li v-for="(ln, i) in c.lines" :key="i">{{ ln }}</li>
+    <section class="mb-4 grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-4" aria-label="프레임웍 상태">
+      <Card v-for="c in cards" :key="c.key" class="card p-[1.15rem]">
+        <div class="mb-2.5 flex items-center gap-2">
+          <span class="h-2.5 w-2.5 rounded-full" :class="DOT[c.status]" aria-hidden="true"></span>
+          <span class="text-[0.74rem] font-bold tracking-[0.08em] text-muted-foreground">{{ c.title }}</span>
+        </div>
+        <p class="mb-2 text-[1.35rem] font-bold tabular-nums tracking-tight">{{ c.headline }}</p>
+        <ul class="m-0 list-none p-0 text-[0.82rem] text-muted-foreground">
+          <li v-for="(ln, i) in c.lines" :key="i" class="break-words py-[0.08rem]">{{ ln }}</li>
         </ul>
-      </article>
+      </Card>
     </section>
 
-    <p v-if="loading" class="hint">상태 확인 중…</p>
-    <p v-else-if="!available" class="hint">
-      라이브 상태는 <code>gaon dev</code> 개발 서버에서만 보입니다(운영 빌드엔 진단 엔드포인트가 없습니다).
+    <p v-if="loading" class="my-1 mb-6 text-sm text-muted-foreground">상태 확인 중…</p>
+    <p v-else-if="!available" class="my-1 mb-6 text-sm text-muted-foreground">
+      라이브 상태는 <code class="rounded bg-muted px-1.5 py-0.5 font-mono text-[0.86em]">gaon dev</code> 개발 서버에서만 보입니다(운영 빌드엔 진단 엔드포인트가 없습니다).
     </p>
 
-    <section class="next">
-      <h2>다음 단계</h2>
-      <ul class="steps">
-        <li v-for="s in steps" :key="s.label" :class="{ done: s.done }">
-          <span class="check" aria-hidden="true">{{ s.done ? '✓' : '○' }}</span>
-          <div class="step-body">
-            <div class="step-head">
-              <span class="step-label">{{ s.label }}</span>
-              <code class="step-cmd">{{ s.cmd }}</code>
+    <section class="my-10">
+      <h2 class="mb-4 text-[1.15rem] font-semibold">다음 단계</h2>
+      <ul class="flex list-none flex-col gap-1.5 p-0">
+        <li
+          v-for="s in steps"
+          :key="s.label"
+          class="flex items-start gap-3 rounded-[10px] border px-3.5 py-2.5"
+          :class="s.done ? 'border-green-200 bg-green-50 dark:border-green-900 dark:bg-green-950/30' : 'border-border bg-muted/30'"
+        >
+          <span class="font-bold leading-6" :class="s.done ? 'text-green-600' : 'text-muted-foreground/60'" aria-hidden="true">{{ s.done ? '✓' : '○' }}</span>
+          <div class="min-w-0 flex-1">
+            <div class="flex flex-wrap items-center gap-2.5">
+              <span class="font-semibold">{{ s.label }}</span>
+              <code class="rounded bg-[#0d1117] px-1.5 py-0.5 font-mono text-[0.86em] text-[#e6edf3]">{{ s.cmd }}</code>
             </div>
-            <span class="step-note">{{ s.note }}</span>
+            <span class="mt-0.5 block text-xs text-muted-foreground">{{ s.note }}</span>
           </div>
         </li>
       </ul>
     </section>
 
-    <section v-if="routeLines.length" class="code">
-      <div class="code-head">{{ routesPath }}</div>
-      <pre class="code-body"><code><span v-for="(ln, i) in routeLines" :key="i" class="code-line"><span class="c-code">{{ ln.code }}</span><span class="c-comment">{{ ln.comment }}</span>{{ '\n' }}</span></code></pre>
+    <section v-if="routeLines.length" class="overflow-hidden rounded-xl border">
+      <div class="border-b bg-muted px-4 py-2 font-mono text-xs text-muted-foreground">{{ routesPath }}</div>
+      <pre class="m-0 overflow-x-auto bg-[#0d1117] px-[1.15rem] py-4 text-[0.82rem] leading-[1.65] text-[#c9d1d9]"><code><span v-for="(ln, i) in routeLines" :key="i" class="block"><span>{{ ln.code }}</span><span class="text-[#8b949e]">{{ ln.comment }}</span>{{ '\n' }}</span></code></pre>
     </section>
+
+    <p class="mt-8 text-center text-xs text-muted-foreground">
+      <Badge variant="secondary">UI 킷</Badge>
+      이 화면·카드·다음 단계는 gaon g ui-kit 로 심은 컴포넌트로 그렸습니다 — apps/web/components/ui/ 에서 소유·수정하세요.
+    </p>
   </div>
 </template>
-
-<style scoped>
-.landing {
-  max-width: 880px;
-  margin: 0 auto;
-  padding: 3rem 1.25rem 4rem;
-  color: #1b1f24;
-  line-height: 1.6;
-}
-
-.hero {
-  margin-bottom: 2.5rem;
-}
-.eyebrow {
-  margin: 0 0 0.4rem;
-  font-size: 0.8rem;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  color: #7c5cff;
-}
-.hero h1 {
-  margin: 0 0 0.9rem;
-  font-size: clamp(2rem, 5vw, 2.9rem);
-  line-height: 1.15;
-  letter-spacing: -0.02em;
-}
-.lede {
-  margin: 0.35rem 0;
-  color: #3a424c;
-  font-size: 1.02rem;
-}
-.lede.sub {
-  color: #57606a;
-  font-size: 0.95rem;
-}
-.lede a {
-  color: #4f8cff;
-}
-code {
-  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
-  font-size: 0.86em;
-  background: #f2f4f7;
-  padding: 0.1rem 0.35rem;
-  border-radius: 5px;
-}
-
-.cards {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-  gap: 1rem;
-  margin-bottom: 1rem;
-}
-.card {
-  border: 1px solid #e4e7eb;
-  border-radius: 12px;
-  padding: 1.1rem 1.15rem;
-  background: #fff;
-  box-shadow: 0 1px 2px rgba(16, 22, 26, 0.04);
-}
-.card-top {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  margin-bottom: 0.6rem;
-}
-.card-title {
-  font-size: 0.74rem;
-  font-weight: 700;
-  letter-spacing: 0.08em;
-  color: #6a737d;
-}
-.dot {
-  width: 9px;
-  height: 9px;
-  border-radius: 50%;
-  background: #c2c8cf;
-}
-.dot-ok {
-  background: #2da44e;
-  box-shadow: 0 0 0 3px rgba(45, 164, 78, 0.15);
-}
-.dot-warn {
-  background: #d4a72c;
-  box-shadow: 0 0 0 3px rgba(212, 167, 44, 0.15);
-}
-.dot-error {
-  background: #cf222e;
-  box-shadow: 0 0 0 3px rgba(207, 34, 46, 0.15);
-}
-.card-headline {
-  margin: 0 0 0.5rem;
-  font-size: 1.35rem;
-  font-weight: 700;
-  letter-spacing: -0.01em;
-  font-variant-numeric: tabular-nums;
-}
-.card-lines {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  font-size: 0.82rem;
-  color: #57606a;
-}
-.card-lines li {
-  padding: 0.08rem 0;
-  overflow-wrap: anywhere;
-}
-
-.hint {
-  margin: 0.25rem 0 1.5rem;
-  font-size: 0.85rem;
-  color: #6a737d;
-}
-
-.next {
-  margin: 2.5rem 0;
-}
-.next h2 {
-  font-size: 1.15rem;
-  margin: 0 0 1rem;
-}
-.steps {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 0.35rem;
-}
-.steps li {
-  display: flex;
-  gap: 0.75rem;
-  align-items: flex-start;
-  padding: 0.65rem 0.85rem;
-  border: 1px solid #eaecef;
-  border-radius: 10px;
-  background: #fbfcfd;
-}
-.steps li.done {
-  border-color: #cbe7d3;
-  background: #f3faf5;
-}
-.check {
-  color: #b0b7bf;
-  font-weight: 700;
-  line-height: 1.5;
-}
-.steps li.done .check {
-  color: #2da44e;
-}
-.step-body {
-  flex: 1;
-  min-width: 0;
-}
-.step-head {
-  display: flex;
-  align-items: center;
-  gap: 0.6rem;
-  flex-wrap: wrap;
-}
-.step-label {
-  font-weight: 600;
-}
-.step-cmd {
-  background: #0d1117;
-  color: #e6edf3;
-}
-.step-note {
-  display: block;
-  font-size: 0.8rem;
-  color: #6a737d;
-  margin-top: 0.15rem;
-}
-
-.code {
-  border: 1px solid #e4e7eb;
-  border-radius: 12px;
-  overflow: hidden;
-}
-.code-head {
-  padding: 0.55rem 1rem;
-  background: #f6f8fa;
-  border-bottom: 1px solid #e4e7eb;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 0.78rem;
-  color: #57606a;
-}
-.code-body {
-  margin: 0;
-  padding: 1rem 1.15rem;
-  overflow-x: auto;
-  background: #0d1117;
-  color: #c9d1d9;
-  font-size: 0.82rem;
-  line-height: 1.65;
-}
-.code-body code {
-  background: none;
-  padding: 0;
-  font-size: inherit;
-  color: inherit;
-}
-.c-comment {
-  color: #8b949e;
-}
-</style>

package/dist/templates/project/apps/web/static/robots.txt.tpl

@@ -0,0 +1,4 @@
+# {{PROJECT_NAME}} · 정적 파일 폴더 (결정 85) — 이 폴더의 파일은 앱 루트로 서빙된다.
+# 예: 이 robots.txt 는 /robots.txt 로, static/img/logo.png 은 /img/logo.png 으로.
+User-agent: *
+Disallow:

package/dist/templates/project/apps/web/style.css.tpl

@@ -0,0 +1,66 @@
+/* apps/web/style.css — 앱 전역 스타일 (결정 74).
+ *
+ * main.ts 가 이 파일을 import 해 번들에 싣는다. @tailwind 3줄이 Tailwind 의
+ * base/components/utilities 레이어를 펼친다(PostCSS · postcss.config.js).
+ *
+ * :root/.dark 의 CSS 변수 = 디자인 토큰(shadcn 관례). UI 킷 컴포넌트는 이
+ * 토큰(bg-primary·text-muted-foreground …)만 참조하므로, 브랜드 색을 바꾸려면
+ * 여기 한 곳만 고친다. hsl 채널 값으로 두는 이유는 tailwind.config.ts 가
+ * hsl(var(--token)) 로 감싸 투명도 유틸(bg-primary/50)까지 동작하게 하기 위함이다. */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 240 5.9% 10%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
+  }
+
+  * {
+    border-color: hsl(var(--border));
+  }
+
+  body {
+    background-color: hsl(var(--background));
+    color: hsl(var(--foreground));
+    font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
+    -webkit-font-smoothing: antialiased;
+  }
+}

package/dist/templates/project/compose.prod.yaml.tpl

@@ -0,0 +1,98 @@
+# {{PROJECT_NAME}} 운영 스택 — 웹·워커·허브 3종 프로세스 + 실 인프라.
+#
+# 개발 스택(docker-compose.yaml)과 달리 앱 이미지(Dockerfile)를 빌드해 serve·work·
+# hub 를 별도 서비스로 띄운다(운영 프로세스 3종 · CLAUDE.md §2 · 결정 60). 인프라는
+# 실 pg·redis·nats(목업 금지 §9). 시크릿은 env 로 주입한다 — 이 파일에 값을 박지 말 것.
+#
+# 기동:  docker compose -f compose.prod.yaml up -d --build
+# 정지:  docker compose -f compose.prod.yaml down
+name: {{PROJECT_NAME}}-prod
+
+x-app-env: &app-env
+  DATABASE_URL: postgres://{{PROJECT_NAME}}:${DB_PASSWORD:?set DB_PASSWORD}@postgres:5432/{{PROJECT_NAME}}
+  REDIS_URL: redis://redis:6379
+  NATS_URL: nats://nats:4222
+  COOKIE_SECRET: ${COOKIE_SECRET:?set COOKIE_SECRET (32+ chars)}
+  NODE_ENV: production
+
+services:
+  # 웹 프로세스(gaon serve). node:cluster 워커 수는 WEB_CONCURRENCY 로(기본 1).
+  web:
+    build: .
+    command: ["pnpm", "serve"]
+    environment:
+      <<: *app-env
+      PORT: "3000"
+      WEB_CONCURRENCY: "${WEB_CONCURRENCY:-1}"
+    ports:
+      - "3000:3000"
+    depends_on:
+      postgres: { condition: service_healthy }
+      redis: { condition: service_healthy }
+      nats: { condition: service_healthy }
+    restart: unless-stopped
+
+  # 워커 프로세스(gaon work) — 잡·리스너·스케줄러·아웃박스 릴레이.
+  worker:
+    build: .
+    command: ["pnpm", "work"]
+    environment: *app-env
+    depends_on:
+      postgres: { condition: service_healthy }
+      nats: { condition: service_healthy }
+    restart: unless-stopped
+
+  # 허브 프로세스(gaon hub) — 리더만 bind, 프레즌스 단일 권위(결정 60 · §7).
+  hub:
+    build: .
+    command: ["pnpm", "hub"]
+    environment:
+      <<: *app-env
+      GAON_HUB_PORT: "4001"
+      GAON_HUB_ADVERTISE: "hub:4001"
+    depends_on:
+      nats: { condition: service_healthy }
+    restart: unless-stopped
+
+  postgres:
+    image: postgres:16-alpine
+    environment:
+      POSTGRES_USER: {{PROJECT_NAME}}
+      POSTGRES_PASSWORD: ${DB_PASSWORD:?set DB_PASSWORD}
+      POSTGRES_DB: {{PROJECT_NAME}}
+    volumes:
+      - pgdata:/var/lib/postgresql/data
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -U {{PROJECT_NAME}} -d {{PROJECT_NAME}}"]
+      interval: 5s
+      timeout: 3s
+      retries: 30
+    restart: unless-stopped
+
+  redis:
+    image: redis:7-alpine
+    volumes:
+      - redisdata:/data
+    healthcheck:
+      test: ["CMD", "redis-cli", "ping"]
+      interval: 5s
+      timeout: 3s
+      retries: 30
+    restart: unless-stopped
+
+  nats:
+    image: nats:2.10-alpine
+    command: ["-js", "-sd", "/data", "-m", "8222"]
+    volumes:
+      - natsdata:/data
+    healthcheck:
+      test: ["CMD", "wget", "--spider", "-q", "http://127.0.0.1:8222/healthz"]
+      interval: 5s
+      timeout: 3s
+      retries: 30
+    restart: unless-stopped
+
+volumes:
+  pgdata:
+  redisdata:
+  natsdata:

package/dist/templates/project/package.json.tpl

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "type": "module",
+  "packageManager": "pnpm@10.27.0",
   "engines": {
     "node": ">=22"
   },
@@ -24,6 +25,9 @@
   "devDependencies": {
     "@types/node": "^22.0.0",
     "@vitejs/plugin-vue": "^6.0.0",
+    "autoprefixer": "^10.4.0",
+    "postcss": "^8.4.0",
+    "tailwindcss": "^3.4.0",
     "typescript": "^5.9.0",
     "vite": "^7.0.0",
     "vue-tsc": "^3.3.0",

package/dist/templates/project/postcss.config.js.tpl

@@ -0,0 +1,15 @@
+// postcss.config.js — Vite 가 CSS 를 처리할 때 타는 PostCSS 파이프라인 (결정 74).
+//
+// Vite 는 프로젝트 루트에서 이 파일을 자동으로 찾아 style.css 의 @tailwind
+// 지시문을 실 유틸 클래스로 펼치고(tailwindcss), 벤더 프리픽스를 붙인다
+// (autoprefixer). gaon dev(Vite 미들웨어)·vite build 가 같은 설정을 공유한다.
+//
+// PostCSS 설정은 .js 가 표준이다 — Vite 의 postcss-load-config 가 .ts 를 바로
+// 로드하지 못한다. 프레임웍의 "TS 전용" 관례는 앱/도메인 소스에 대한 것이고,
+// 툴 설정 파일은 각 도구가 요구하는 형식을 따른다.
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

package/dist/templates/project/tailwind.config.ts.tpl

@@ -0,0 +1,56 @@
+// tailwind.config.ts — Tailwind CSS 설정 (결정 74).
+//
+// content 는 유틸 클래스가 등장하는 모든 소스를 가리킨다. 앱 페이지·컴포넌트와
+// shared UI 를 훑는다(자동 import 금지 관례와 무관 — 여기선 클래스 문자열 스캔).
+// darkMode: 'class' — <html class="dark"> 로 다크 테마를 켠다(토큰은 style.css).
+//
+// 색 토큰은 style.css 의 CSS 변수(hsl 채널)를 가리킨다(shadcn 관례). 컴포넌트는
+// bg-primary·text-muted-foreground 처럼 의미 토큰만 쓰고, 실제 색은 style.css 의
+// :root/.dark 한 곳에서 바꾼다 — 라이트/다크가 한 지점에서 갈린다.
+import type { Config } from 'tailwindcss'
+
+export default {
+  darkMode: 'class',
+  content: ['./apps/**/*.{vue,ts}', './shared/**/*.{vue,ts}', './apps/**/index.html'],
+  theme: {
+    extend: {
+      colors: {
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        primary: {
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
+        },
+        secondary: {
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))',
+        },
+        destructive: {
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))',
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))',
+        },
+        card: {
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))',
+        },
+      },
+      borderRadius: {
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)',
+      },
+    },
+  },
+  plugins: [],
+} satisfies Config

package/dist/templates/ui-kit/Alert.vue.tpl

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+// UI 킷 · Alert (결정 75). 인라인 알림. variant='destructive' 로 오류 톤.
+import { computed } from 'vue'
+import { cn } from '../../lib/utils.js'
+
+type Variant = 'default' | 'destructive'
+
+const props = withDefaults(defineProps<{ variant?: Variant }>(), { variant: 'default' })
+
+const VARIANTS: Record<Variant, string> = {
+  default: 'bg-background text-foreground',
+  destructive: 'border-destructive/50 text-destructive',
+}
+const classes = computed(() =>
+  cn('relative w-full rounded-lg border p-4', VARIANTS[props.variant]),
+)
+</script>
+
+<template>
+  <div role="alert" :class="classes">
+    <slot />
+  </div>
+</template>