agentic-dev 0.1.0 → 0.2.0

package/client/platform/src/pages/LoginPage.tsx

@@ -0,0 +1,72 @@
+import { useState } from "react";
+import { Navigate, useLocation } from "react-router-dom";
+
+import { useAuth } from "@/auth/AuthProvider";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { appTheme } from "@/theme";
+import { appThemeVars } from "@/theme-vars";
+
+export function LoginPage() {
+  const { authenticating, login, user } = useAuth();
+  const location = useLocation();
+  const [email, setEmail] = useState("admin@example.com");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState<string | null>(null);
+
+  if (user) {
+    const destination = (location.state as { from?: { pathname?: string } } | null)?.from?.pathname ?? "/";
+    return <Navigate to={destination} replace />;
+  }
+
+  async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    setError(null);
+
+    try {
+      await login({ email, password });
+    } catch (submitError) {
+      setError(submitError instanceof Error ? submitError.message : "로그인에 실패했습니다.");
+    }
+  }
+
+  return (
+    <div className="min-h-screen bg-[var(--app-shell-bg)] px-6 py-12 text-[#22314d]" style={appThemeVars(appTheme)}>
+      <div className="mx-auto grid max-w-6xl gap-10 lg:grid-cols-[1.1fr_420px] lg:items-center">
+        <div>
+          <p className="inline-flex rounded-full bg-white px-4 py-2 text-sm font-semibold text-[#223a82] shadow-sm">Customer workspace</p>
+          <h1 className="mt-6 text-5xl font-black tracking-[-0.04em] text-[#16253f]">실제 API에 연결된 로그인 흐름</h1>
+          <p className="mt-5 max-w-xl text-lg leading-8 text-[#5f6e86]">
+            `VITE_API_BASE_URL/auth/login`으로 인증하고, 저장된 토큰으로 `auth/me`를 다시 호출해 앱 셸을 엽니다.
+          </p>
+        </div>
+
+        <Card className="border-[var(--app-border)] bg-white p-7 shadow-[0_24px_60px_rgba(31,58,138,0.1)]">
+          <form className="space-y-5" onSubmit={handleSubmit}>
+            <div>
+              <p className="text-2xl font-bold text-[#16253f]">Sign in</p>
+              <p className="mt-2 text-sm text-[#6b7890]">예시 계정 값이 기본으로 채워져 있습니다.</p>
+            </div>
+
+            <label className="block space-y-2">
+              <span className="text-sm font-semibold text-[#314157]">Email</span>
+              <Input type="email" value={email} onChange={(event) => setEmail(event.target.value)} required />
+            </label>
+
+            <label className="block space-y-2">
+              <span className="text-sm font-semibold text-[#314157]">Password</span>
+              <Input type="password" value={password} onChange={(event) => setPassword(event.target.value)} required />
+            </label>
+
+            {error ? <p className="text-sm font-medium text-[#c53030]">{error}</p> : null}
+
+            <Button className="w-full" size="lg" type="submit" disabled={authenticating}>
+              {authenticating ? "Signing in..." : "Continue to app"}
+            </Button>
+          </form>
+        </Card>
+      </div>
+    </div>
+  );
+}

package/client/platform/src/pages/OrdersPage.tsx

@@ -0,0 +1,123 @@
+import { useEffect, useState } from "react";
+import { Search } from "lucide-react";
+
+import { useAuth } from "@/auth/AuthProvider";
+import { fetchOrders, type OrderSummary } from "@/api/orders";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+
+export function OrdersPage() {
+  const { token } = useAuth();
+  const [orders, setOrders] = useState<OrderSummary[]>([]);
+  const [query, setQuery] = useState("");
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!token?.access_token) {
+      return;
+    }
+
+    let cancelled = false;
+
+    setLoading(true);
+    setError(null);
+
+    fetchOrders(token.access_token)
+      .then((response) => {
+        if (!cancelled) {
+          setOrders(response);
+        }
+      })
+      .catch((nextError: Error) => {
+        if (!cancelled) {
+          setError(nextError.message);
+          setOrders([]);
+        }
+      })
+      .finally(() => {
+        if (!cancelled) {
+          setLoading(false);
+        }
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [token?.access_token]);
+
+  const normalizedQuery = query.trim().toLowerCase();
+  const filteredOrders = orders.filter((order) =>
+    [order.id, order.product_name, order.customer_name, order.status].some((field) =>
+      field.toLowerCase().includes(normalizedQuery),
+    ),
+  );
+
+  return (
+    <div className="space-y-6">
+      <Card className="p-[var(--app-card-padding)]">
+        <div className="flex flex-wrap items-center gap-3">
+          <div className="relative min-w-[280px] flex-1">
+            <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[#8d97a8]" />
+            <Input className="pl-9" placeholder="Search orders" value={query} onChange={(event) => setQuery(event.target.value)} />
+          </div>
+          <Button variant="outline" onClick={() => setQuery("")}>
+            Reset
+          </Button>
+          <Button>New order</Button>
+        </div>
+        <p className="mt-4 text-sm text-[var(--app-muted)]">
+          {loading ? "Loading order list..." : `Showing ${filteredOrders.length} of ${orders.length} orders`}
+        </p>
+      </Card>
+
+      <Card className="overflow-hidden">
+        <table className="w-full border-collapse text-sm">
+          <thead className="bg-[#f8fafe] text-left text-[#516174]">
+            <tr>
+              {["Order", "Product", "Customer", "Status"].map((cell) => (
+                <th key={cell} className="border-y border-[var(--app-border)] px-[var(--app-table-cell-px)] py-[var(--app-table-cell-py)] font-semibold">
+                  {cell}
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {loading ? (
+              <tr>
+                <td className="border-b border-[var(--app-border)] px-[var(--app-table-cell-px)] py-[var(--app-table-cell-py)] text-[var(--app-muted)]" colSpan={4}>
+                  Loading orders...
+                </td>
+              </tr>
+            ) : null}
+            {error ? (
+              <tr>
+                <td className="border-b border-[var(--app-border)] px-[var(--app-table-cell-px)] py-[var(--app-table-cell-py)] text-[var(--app-danger)]" colSpan={4}>
+                  {error}
+                </td>
+              </tr>
+            ) : null}
+            {!loading && !error && !filteredOrders.length ? (
+              <tr>
+                <td className="border-b border-[var(--app-border)] px-[var(--app-table-cell-px)] py-[var(--app-table-cell-py)] text-[var(--app-muted)]" colSpan={4}>
+                  No orders matched the current search.
+                </td>
+              </tr>
+            ) : null}
+            {filteredOrders.map((order) => (
+              <tr key={order.id}>
+                <td className="border-b border-[var(--app-border)] px-[var(--app-table-cell-px)] py-[var(--app-table-cell-py)] text-[var(--app-accent)]">{order.id}</td>
+                <td className="border-b border-[var(--app-border)] px-[var(--app-table-cell-px)] py-[var(--app-table-cell-py)]">{order.product_name}</td>
+                <td className="border-b border-[var(--app-border)] px-[var(--app-table-cell-px)] py-[var(--app-table-cell-py)]">{order.customer_name}</td>
+                <td className="border-b border-[var(--app-border)] px-[var(--app-table-cell-px)] py-[var(--app-table-cell-py)]">
+                  <span className={order.status === "At risk" ? "text-[var(--app-danger)]" : "text-[#314157]"}>{order.status}</span>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </Card>
+    </div>
+  );
+}

package/client/platform/src/styles/globals.css

@@ -0,0 +1,17 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  color-scheme: light;
+  font-family: "SUIT", "Pretendard", "Noto Sans KR", sans-serif;
+}
+
+body {
+  margin: 0;
+  background: var(--app-shell-bg, #f5f7fb);
+}
+
+* {
+  box-sizing: border-box;
+}

package/client/platform/src/theme-vars.ts

@@ -0,0 +1,18 @@
+import type { CSSProperties } from "react";
+
+import type { AppTheme } from "./theme";
+
+export function appThemeVars(theme: AppTheme): CSSProperties {
+  return {
+    "--app-shell-bg": theme.shellBg,
+    "--app-card-radius": theme.cardRadius,
+    "--app-card-padding": theme.cardPadding,
+    "--app-border": theme.border,
+    "--app-accent": theme.accent,
+    "--app-danger": theme.danger,
+    "--app-muted": theme.muted,
+    "--app-table-cell-py": theme.tableCellPy,
+    "--app-table-cell-px": theme.tableCellPx,
+    "--app-panel-width": theme.panelWidth,
+  } as CSSProperties;
+}

package/client/platform/src/theme.ts

@@ -0,0 +1,25 @@
+export type AppTheme = {
+  shellBg: string;
+  cardRadius: string;
+  cardPadding: string;
+  border: string;
+  accent: string;
+  danger: string;
+  muted: string;
+  tableCellPy: string;
+  tableCellPx: string;
+  panelWidth: string;
+};
+
+export const appTheme: AppTheme = {
+  shellBg: "#f5f7fb",
+  cardRadius: "18px",
+  cardPadding: "20px",
+  border: "#e8edf5",
+  accent: "#496fe8",
+  danger: "#d95d4a",
+  muted: "#708097",
+  tableCellPy: "14px",
+  tableCellPx: "16px",
+  panelWidth: "340px",
+};

package/client/platform/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/client/platform/tailwind.config.js

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ["./index.html", "./src/**/*.{ts,tsx}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};

package/client/platform/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "include": ["src"],
+  "references": []
+}

package/client/platform/vite.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import { fileURLToPath, URL } from "node:url";
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      "@": fileURLToPath(new URL("./src", import.meta.url)),
+    },
+  },
+});

package/compose.yml

@@ -0,0 +1,206 @@
+name: templates
+
+services:
+  postgres:
+    image: postgres:16-alpine
+    environment:
+      POSTGRES_DB: ${POSTGRES_DB:-template}
+      POSTGRES_USER: ${POSTGRES_USER:-template}
+      POSTGRES_PASSWORD: ${POSTGRES_PASSWORD:-template}
+    ports:
+      - "${POSTGRES_PORT:-5432}:5432"
+    volumes:
+      - postgres_data:/var/lib/postgresql/data
+    healthcheck:
+      test:
+        [
+          "CMD-SHELL",
+          "pg_isready -U ${POSTGRES_USER:-template} -d ${POSTGRES_DB:-template}",
+        ]
+      interval: 10s
+      timeout: 5s
+      retries: 5
+    networks:
+      - template-dev
+
+  mysql:
+    image: mysql:8.4
+    profiles: ["mysql"]
+    environment:
+      MYSQL_DATABASE: ${MYSQL_DATABASE:-template}
+      MYSQL_USER: ${MYSQL_USER:-template}
+      MYSQL_PASSWORD: ${MYSQL_PASSWORD:-template}
+      MYSQL_ROOT_PASSWORD: ${MYSQL_ROOT_PASSWORD:-template-root}
+    ports:
+      - "${MYSQL_PORT:-3306}:3306"
+    volumes:
+      - mysql_data:/var/lib/mysql
+    healthcheck:
+      test:
+        [
+          "CMD-SHELL",
+          "mysqladmin ping -h 127.0.0.1 -u${MYSQL_USER:-template} -p${MYSQL_PASSWORD:-template}",
+        ]
+      interval: 10s
+      timeout: 5s
+      retries: 10
+      start_period: 20s
+    networks:
+      - template-dev
+
+  mariadb:
+    image: mariadb:11.7
+    profiles: ["mariadb"]
+    environment:
+      MARIADB_DATABASE: ${MARIADB_DATABASE:-template}
+      MARIADB_USER: ${MARIADB_USER:-template}
+      MARIADB_PASSWORD: ${MARIADB_PASSWORD:-template}
+      MARIADB_ROOT_PASSWORD: ${MARIADB_ROOT_PASSWORD:-template-root}
+    ports:
+      - "${MARIADB_PORT:-3307}:3306"
+    volumes:
+      - mariadb_data:/var/lib/mysql
+    healthcheck:
+      test:
+        [
+          "CMD-SHELL",
+          "mariadb-admin ping -h 127.0.0.1 -u${MARIADB_USER:-template} -p${MARIADB_PASSWORD:-template}",
+        ]
+      interval: 10s
+      timeout: 5s
+      retries: 10
+      start_period: 20s
+    networks:
+      - template-dev
+
+  mongo:
+    image: mongo:8
+    profiles: ["mongo"]
+    ports:
+      - "${MONGO_PORT:-27017}:27017"
+    volumes:
+      - mongo_data:/data/db
+    networks:
+      - template-dev
+
+  server:
+    build:
+      context: .
+      dockerfile: server/Dockerfile.dev
+      network: host
+    environment:
+      APP_NAME: ${SERVER_APP_NAME:-Template Server}
+      ENVIRONMENT: ${SERVER_ENVIRONMENT:-development}
+      API_PREFIX: ${SERVER_API_PREFIX:-/api/v1}
+      DATABASE_BACKEND: ${SERVER_DATABASE_BACKEND:-postgres}
+      POSTGRES_URL: ${SERVER_POSTGRES_URL:-postgresql+psycopg://template:template@postgres:5432/template}
+      MYSQL_URL: ${SERVER_MYSQL_URL:-mysql+pymysql://template:template@mysql:3306/template}
+      MARIADB_URL: ${SERVER_MARIADB_URL:-mysql+pymysql://template:template@mariadb:3306/template}
+      MONGODB_URL: ${SERVER_MONGODB_URL:-mongodb://mongo:27017}
+      MONGODB_DATABASE: ${SERVER_MONGODB_DATABASE:-template}
+      JWT_SECRET: ${SERVER_JWT_SECRET:-template-local-dev-secret}
+      JWT_ALGORITHM: ${SERVER_JWT_ALGORITHM:-HS256}
+      ACCESS_TOKEN_TTL_MINUTES: ${SERVER_ACCESS_TOKEN_TTL_MINUTES:-120}
+      BOOTSTRAP_ADMIN_EMAIL: ${SERVER_BOOTSTRAP_ADMIN_EMAIL:-admin@example.com}
+      BOOTSTRAP_ADMIN_PASSWORD: ${SERVER_BOOTSTRAP_ADMIN_PASSWORD:-change-me-admin}
+      BOOTSTRAP_ADMIN_NAME: ${SERVER_BOOTSTRAP_ADMIN_NAME:-Template Admin}
+      BOOTSTRAP_OPERATOR_EMAIL: ${SERVER_BOOTSTRAP_OPERATOR_EMAIL:-operator@example.com}
+      BOOTSTRAP_OPERATOR_PASSWORD: ${SERVER_BOOTSTRAP_OPERATOR_PASSWORD:-change-me-operator}
+      BOOTSTRAP_OPERATOR_NAME: ${SERVER_BOOTSTRAP_OPERATOR_NAME:-Template Operator}
+      CORS_ORIGINS: '${SERVER_CORS_ORIGINS:-["http://localhost:3000","http://127.0.0.1:3000","http://localhost:3001","http://127.0.0.1:3001","http://localhost:3002","http://127.0.0.1:3002","http://localhost:4000","http://127.0.0.1:4000"]}'
+      SERVER_HTTP_PORT: ${SERVER_HTTP_PORT:-8000}
+    ports:
+      - "${SERVER_HTTP_PORT:-8000}:${SERVER_HTTP_PORT:-8000}"
+    volumes:
+      - ./server:/app/server
+    depends_on:
+      postgres:
+        condition: service_healthy
+    networks:
+      - template-dev
+
+  client-landing:
+    build:
+      context: .
+      dockerfile: client/landing/Dockerfile.dev
+      network: host
+    environment:
+      PORT: ${CLIENT_LANDING_PORT:-3000}
+      VITE_API_BASE_URL: ${CLIENT_LANDING_VITE_API_BASE_URL:-http://127.0.0.1:8000/api/v1}
+      CHOKIDAR_USEPOLLING: ${CLIENT_WATCH_USE_POLLING:-false}
+    ports:
+      - "${CLIENT_LANDING_PORT:-3000}:${CLIENT_LANDING_PORT:-3000}"
+    volumes:
+      - ./client/landing:/app/client/landing
+    depends_on:
+      server:
+        condition: service_started
+    networks:
+      - template-dev
+
+  client-platform:
+    build:
+      context: .
+      dockerfile: client/platform/Dockerfile.dev
+      network: host
+    environment:
+      PORT: ${CLIENT_PLATFORM_PORT:-3001}
+      VITE_API_BASE_URL: ${CLIENT_PLATFORM_VITE_API_BASE_URL:-http://127.0.0.1:8000/api/v1}
+      CHOKIDAR_USEPOLLING: ${CLIENT_WATCH_USE_POLLING:-false}
+    ports:
+      - "${CLIENT_PLATFORM_PORT:-3001}:${CLIENT_PLATFORM_PORT:-3001}"
+    volumes:
+      - ./client/platform:/app/client/platform
+    depends_on:
+      server:
+        condition: service_started
+    networks:
+      - template-dev
+
+  client-mobile:
+    build:
+      context: .
+      dockerfile: client/mobile/Dockerfile.dev
+      network: host
+    environment:
+      PORT: ${CLIENT_MOBILE_PORT:-3002}
+      VITE_API_BASE_URL: ${CLIENT_MOBILE_VITE_API_BASE_URL:-http://127.0.0.1:8000/api/v1}
+      CHOKIDAR_USEPOLLING: ${CLIENT_WATCH_USE_POLLING:-false}
+    ports:
+      - "${CLIENT_MOBILE_PORT:-3002}:${CLIENT_MOBILE_PORT:-3002}"
+    volumes:
+      - ./client/mobile:/app/client/mobile
+    depends_on:
+      server:
+        condition: service_started
+    networks:
+      - template-dev
+
+  client-admin:
+    build:
+      context: .
+      dockerfile: client/admin/Dockerfile.dev
+      network: host
+    environment:
+      PORT: ${CLIENT_ADMIN_PORT:-4000}
+      VITE_API_BASE_URL: ${CLIENT_ADMIN_VITE_API_BASE_URL:-http://127.0.0.1:8000/api/v1}
+      CHOKIDAR_USEPOLLING: ${CLIENT_WATCH_USE_POLLING:-false}
+    ports:
+      - "${CLIENT_ADMIN_PORT:-4000}:${CLIENT_ADMIN_PORT:-4000}"
+    volumes:
+      - ./client/admin:/app/client/admin
+    depends_on:
+      server:
+        condition: service_started
+    networks:
+      - template-dev
+
+networks:
+  template-dev:
+    driver: bridge
+
+volumes:
+  postgres_data:
+  mysql_data:
+  mariadb_data:
+  mongo_data:

package/infra/compose/.env.dev.example

@@ -0,0 +1,28 @@
+DEV_POSTGRES_DB=template
+DEV_POSTGRES_USER=template
+DEV_POSTGRES_PASSWORD=template
+DEV_POSTGRES_PORT=15432
+
+DEV_SERVER_HTTP_PORT=18000
+DEV_SERVER_APP_NAME=Template Server DEV
+DEV_SERVER_ENVIRONMENT=development
+DEV_SERVER_API_PREFIX=/api/v1
+DEV_SERVER_DATABASE_BACKEND=postgres
+DEV_SERVER_POSTGRES_URL=postgresql+psycopg://template:template@postgres:5432/template
+DEV_SERVER_MYSQL_URL=mysql+pymysql://template:template@mysql:3306/template
+DEV_SERVER_MARIADB_URL=mysql+pymysql://template:template@mariadb:3306/template
+DEV_SERVER_MONGODB_URL=mongodb://mongo:27017
+DEV_SERVER_MONGODB_DATABASE=template
+DEV_SERVER_JWT_SECRET=change-me
+DEV_SERVER_ACCESS_TOKEN_TTL_MINUTES=120
+DEV_SERVER_CORS_ORIGINS=https://dev-landing.example.com,https://dev-platform.example.com,https://dev-mobile.example.com,https://dev-admin.example.com
+
+DEV_CLIENT_LANDING_PORT=13000
+DEV_CLIENT_PLATFORM_PORT=13001
+DEV_CLIENT_MOBILE_PORT=13002
+DEV_CLIENT_ADMIN_PORT=14000
+
+DEV_CLIENT_LANDING_VITE_API_BASE_URL=https://dev-api.example.com/api/v1
+DEV_CLIENT_PLATFORM_VITE_API_BASE_URL=https://dev-api.example.com/api/v1
+DEV_CLIENT_MOBILE_VITE_API_BASE_URL=https://dev-api.example.com/api/v1
+DEV_CLIENT_ADMIN_VITE_API_BASE_URL=https://dev-api.example.com/api/v1

package/infra/compose/.env.prod.example

@@ -0,0 +1,29 @@
+PROD_POSTGRES_DB=template
+PROD_POSTGRES_USER=template
+PROD_POSTGRES_PASSWORD=template
+PROD_POSTGRES_PORT=25432
+
+PROD_SERVER_HTTP_PORT=28000
+PROD_SERVER_WORKERS=4
+PROD_SERVER_APP_NAME=Template Server PROD
+PROD_SERVER_ENVIRONMENT=production
+PROD_SERVER_API_PREFIX=/api/v1
+PROD_SERVER_DATABASE_BACKEND=postgres
+PROD_SERVER_POSTGRES_URL=postgresql+psycopg://template:template@postgres:5432/template
+PROD_SERVER_MYSQL_URL=mysql+pymysql://template:template@mysql:3306/template
+PROD_SERVER_MARIADB_URL=mysql+pymysql://template:template@mariadb:3306/template
+PROD_SERVER_MONGODB_URL=mongodb://mongo:27017
+PROD_SERVER_MONGODB_DATABASE=template
+PROD_SERVER_JWT_SECRET=change-me
+PROD_SERVER_ACCESS_TOKEN_TTL_MINUTES=120
+PROD_SERVER_CORS_ORIGINS=https://landing.example.com,https://platform.example.com,https://mobile.example.com,https://admin.example.com
+
+PROD_CLIENT_LANDING_PORT=23000
+PROD_CLIENT_PLATFORM_PORT=23001
+PROD_CLIENT_MOBILE_PORT=23002
+PROD_CLIENT_ADMIN_PORT=24000
+
+PROD_CLIENT_LANDING_VITE_API_BASE_URL=https://api.example.com/api/v1
+PROD_CLIENT_PLATFORM_VITE_API_BASE_URL=https://api.example.com/api/v1
+PROD_CLIENT_MOBILE_VITE_API_BASE_URL=https://api.example.com/api/v1
+PROD_CLIENT_ADMIN_VITE_API_BASE_URL=https://api.example.com/api/v1

package/infra/compose/README.md

@@ -0,0 +1,35 @@
+# Infra Compose
+
+루트 [compose.yml](../../compose.yml)은 템플릿 저장소의 canonical dev-focused runtime baseline이다.
+이 디렉터리는 dedicated host나 분리된 환경 스택이 필요할 때 사용하는 DEV(개발계)/PROD overlay와 env example을 유지한다.
+
+파일:
+
+- `dev.yml`: dedicated DEV(개발계) host/reference stack
+- `prod.yml`: dedicated PROD/reference stack
+- `.env.dev.example`: DEV(개발계) 변수 예시
+- `.env.prod.example`: PROD 변수 예시
+
+사용:
+
+```bash
+cp .env.example .env
+docker compose up --build
+
+cp infra/compose/.env.dev.example infra/compose/.env.dev
+docker compose --env-file infra/compose/.env.dev -f infra/compose/dev.yml up -d --build
+
+cp infra/compose/.env.prod.example infra/compose/.env.prod
+docker compose --env-file infra/compose/.env.prod -f infra/compose/prod.yml up -d --build
+```
+
+주의:
+
+- 루트 `compose.yml`은 clone 직후 4개 frontend surface, `server`, 기본 `postgres`를 함께 올리는 dev-focused baseline이다.
+- optional DB adapter 검증은 root compose profile로 수행한다: `mysql`, `mariadb`, `mongo`.
+- `infra/compose/dev.yml`, `infra/compose/prod.yml`은 dedicated host/runtime split이 필요할 때 쓰는 overlay이며, root compose baseline을 대체하는 문서 기준선은 아니다.
+- provider-first canonical delivery split은 `AWS edge/domain -> OpenStack backend compute -> AWS data plane`이고, 세부 구조는 `infra/terraform/README.md`를 기준으로 설명한다.
+- `VITE_API_BASE_URL`은 컨테이너 내부 DNS가 아니라 브라우저가 도달 가능한 API URL이어야 한다.
+- 포트 역할은 root compose baseline과 같은 순서를 따른다: landing, platform, mobile, admin, server/http.
+- PROD 웹 앱은 `pnpm build + pnpm preview`로 기동한다.
+- OpenStack에서 자동 배포까지 묶고 싶으면 `infra/terraform/openstack/server` 또는 lower-level `openstack/dev`, `openstack/prod` root를 사용한다.