feat: add GA-UT UI design system

.github/workflows/pages.yml

@@ -14,9 +14,11 @@ on:
       - docs/site/**
       - docs/data/**
       - apps/playground/**
+      - apps/ui-showcase/**
       - packages/ce/src/**
       - packages/ce/package.json
       - packages/ce/tsconfig.json
+      - packages/ui/**
   workflow_dispatch:
 
 permissions:
@@ -54,7 +56,7 @@ jobs:
       - name: Generate docs site
         run: bun run docs:build
 
-      - name: Prepare Pages artifact (docs/site/* + docs/data + dist)
+      - name: Prepare Pages artifact (docs/site/* + docs/data + dist + UI showcase)
         run: |
           set -euo pipefail
           mkdir -p _pages_artifact
@@ -77,6 +79,15 @@ jobs:
             echo "dist not found; skipping copy"
           fi
 
+          if [[ -f apps/ui-showcase/index.html && -f apps/ui-showcase/dist/app.js ]]; then
+            mkdir -p _pages_artifact/ui/dist
+            cp apps/ui-showcase/index.html _pages_artifact/ui/index.html
+            cp -a apps/ui-showcase/dist/. _pages_artifact/ui/dist/
+          else
+            echo "apps/ui-showcase build output not found; cannot publish /ui"
+            exit 1
+          fi
+
       - name: Upload Pages artifact
         uses: actions/upload-pages-artifact@v3
         with:
@@ -85,7 +96,7 @@ jobs:
       - name: Deployment failure guidance
         if: failure()
         run: |
-          echo "[Ops] If deployment fails, check docs/site and docs/data path configuration first."
+          echo "[Ops] If deployment fails, check docs/site, docs/data, and apps/ui-showcase/dist first."
 
   deploy:
     needs: build
@@ -132,4 +143,4 @@ jobs:
         if: failure()
         run: |
           echo "[Ops] First check that Settings > Pages is enabled and Source is set to GitHub Actions."
-          echo "[Ops] Then check docs/site and docs/data path configuration."
+          echo "[Ops] Then check docs/site, docs/data, and apps/ui-showcase/dist path configuration."

apps/ui-showcase/dev-server.mjs

@@ -0,0 +1,68 @@
+import { readFile } from "node:fs/promises";
+import { fileURLToPath } from "node:url";
+
+const port = Number(process.env.PORT || 4174);
+const host = process.env.HOST || "127.0.0.1";
+
+const indexHtmlUrl = new URL("./index.html", import.meta.url);
+const appEntryPath = fileURLToPath(new URL("./App.ts", import.meta.url));
+const indexHtml = await readFile(indexHtmlUrl, "utf8");
+
+const buildAppBundle = async () => {
+  const result = await Bun.build({
+    entrypoints: [appEntryPath],
+    format: "esm",
+    target: "browser",
+    sourcemap: "inline",
+    minify: false,
+  });
+
+  if (!result.success) {
+    const details = result.logs.map((log) => log.message).join("\n");
+    throw new Error(details || "GA-UT UI showcase bundle failed to build.");
+  }
+
+  return result.outputs[0].text();
+};
+
+const server = Bun.serve({
+  hostname: host,
+  port,
+  routes: {
+    "/": async () =>
+      new Response(indexHtml, {
+        headers: {
+          "cache-control": "no-store",
+          "content-type": "text/html; charset=utf-8",
+        },
+      }),
+    "/index.html": async () =>
+      new Response(indexHtml, {
+        headers: {
+          "cache-control": "no-store",
+          "content-type": "text/html; charset=utf-8",
+        },
+      }),
+    "/dist/app.js": async () => {
+      try {
+        const bundle = await buildAppBundle();
+        return new Response(bundle, {
+          headers: {
+            "cache-control": "no-store",
+            "content-type": "text/javascript; charset=utf-8",
+          },
+        });
+      } catch (error) {
+        return new Response(String(error), {
+          status: 500,
+          headers: { "content-type": "text/plain; charset=utf-8" },
+        });
+      }
+    },
+  },
+  fetch() {
+    return new Response("Not found", { status: 404 });
+  },
+});
+
+console.log(`GA-UT UI showcase: http://${server.hostname}:${server.port}`);

apps/ui-showcase/icons.ts

@@ -0,0 +1,27 @@
+export const icon = (name: string, className = "icon") => {
+  const paths: Record<string, string> = {
+    home: '<path d="M3 10.8 12 3l9 7.8"/><path d="M5.5 9.2V21h13V9.2M9.3 21v-6.6h5.4V21"/>',
+    layers:
+      '<path d="m12 2.7 9 5.1-9 5.1-9-5.1 9-5.1Z"/><path d="m3 12.2 9 5.1 9-5.1M3 16.4l9 5 9-5"/>',
+    cube: '<path d="m12 2.8 8.2 4.7v9.2L12 21.4l-8.2-4.7V7.5L12 2.8Z"/><path d="m3.8 7.5 8.2 4.7 8.2-4.7M12 12.2v9.2"/>',
+    grid: '<rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/>',
+    list: '<path d="M9 6h12M9 12h12M9 18h12"/><path d="M4 6h.01M4 12h.01M4 18h.01"/>',
+    smile: '<circle cx="12" cy="12" r="9"/><path d="M8.2 14.3s1.3 2 3.8 2 3.8-2 3.8-2M8.8 9h.01M15.2 9h.01"/>',
+    history: '<path d="M3.2 12a8.8 8.8 0 1 0 2.6-6.2L3.2 8.4"/><path d="M3.2 3.5v4.9h4.9M12 7v5l3.4 2"/>',
+    copy: '<rect x="8" y="8" width="11" height="12" rx="2"/><path d="M16 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h3"/>',
+    sun: '<circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.42 1.42M17.65 17.65l1.42 1.42M2 12h2M20 12h2M4.93 19.07l1.42-1.42M17.65 6.35l1.42-1.42"/>',
+    moon: '<path d="M20.6 15.5A9 9 0 0 1 8.5 3.4 9 9 0 1 0 20.6 15.5Z"/>',
+    menu: '<path d="M3 6h18M3 12h18M3 18h18"/>',
+    close: '<path d="m5 5 14 14M19 5 5 19"/>',
+    arrow: '<path d="M4 12h16M14 6l6 6-6 6"/>',
+    plus: '<path d="M12 5v14M5 12h14"/>',
+    more: '<circle cx="12" cy="5" r="1" fill="currentColor" stroke="none"/><circle cx="12" cy="12" r="1" fill="currentColor" stroke="none"/><circle cx="12" cy="19" r="1" fill="currentColor" stroke="none"/>',
+    check: '<path d="m5 12.5 4.3 4.3L19.5 6.5"/>',
+    mail: '<rect x="3" y="5" width="18" height="14" rx="2"/><path d="m4 7 8 6 8-6"/>',
+    chevron: '<path d="m8 10 4 4 4-4"/>',
+    warning: '<path d="M10.2 3.8 2.5 18a2 2 0 0 0 1.8 3h15.4a2 2 0 0 0 1.8-3L13.8 3.8a2 2 0 0 0-3.6 0Z"/><path d="M12 9v4M12 17h.01"/>',
+    info: '<circle cx="12" cy="12" r="9"/><path d="M12 10v6M12 7h.01"/>',
+  };
+
+  return `<svg class="${className}" viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.65" stroke-linecap="round" stroke-linejoin="round">${paths[name] ?? ""}</svg>`;
+};

apps/ui-showcase/index.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="color-scheme" content="light dark" />
+    <meta
+      name="description"
+      content="GA-UT UI — CE 위에 세운 GA-UT의 제품 인터페이스 시스템"
+    />
+    <title>GA-UT UI</title>
+    <style>
+      html,
+      body {
+        margin: 0;
+        min-width: 320px;
+        min-height: 100%;
+        background: #f7f5f1;
+      }
+
+      body {
+        min-height: 100vh;
+      }
+
+      ga-ut-showcase {
+        display: block;
+        min-height: 100vh;
+      }
+    </style>
+    <script type="module" src="./dist/app.js"></script>
+  </head>
+  <body></body>
+</html>

apps/ui-showcase/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@ga-ut/ui-showcase",
+  "private": true,
+  "scripts": {
+    "build": "bun build ./App.ts --outfile ./dist/app.js --target browser",
+    "preview": "bun run ./dev-server.mjs"
+  },
+  "dependencies": {
+    "@ga-ut/ce": "workspace:*",
+    "@ga-ut/ui": "workspace:*"
+  }
+}