Mission: Grand Open, 말로 주문받는 AI 카페를 개점하라

import * as cdk from "aws-cdk-lib";
import { Construct } from "constructs";
import * as dynamodb from "aws-cdk-lib/aws-dynamodb";
import * as lambda from "aws-cdk-lib/aws-lambda";
import * as apigwv2 from "aws-cdk-lib/aws-apigatewayv2";
import * as integrations from "aws-cdk-lib/aws-apigatewayv2-integrations";
import * as s3 from "aws-cdk-lib/aws-s3";
import * as s3deploy from "aws-cdk-lib/aws-s3-deployment";
import * as cloudfront from "aws-cdk-lib/aws-cloudfront";
import * as origins from "aws-cdk-lib/aws-cloudfront-origins";
import * as iam from "aws-cdk-lib/aws-iam";

export class CafeStack extends cdk.Stack {
  constructor(scope: Construct, id: string, props?: cdk.StackProps) {
    super(scope, id, props);

    const orderModelId = this.node.tryGetContext("orderModelId") ?? "global.anthropic.claude-sonnet-4-6";

    // ── Phase 1: 저장소와 주문/보드 API ──
    const table = new dynamodb.Table(this, "CafeTable", {
      partitionKey: { name: "pk", type: dynamodb.AttributeType.STRING },
      sortKey: { name: "sk", type: dynamodb.AttributeType.STRING },
      billingMode: dynamodb.BillingMode.PAY_PER_REQUEST,
      removalPolicy: cdk.RemovalPolicy.DESTROY,
    });

    const orderFn = new lambda.Function(this, "OrderFn", {
      runtime: lambda.Runtime.NODEJS_22_X,
      handler: "order.handler",
      code: lambda.Code.fromAsset("lambda"),
      environment: {
        TABLE_NAME: table.tableName,
        ORDER_MODEL_ID: orderModelId,
        // 발급 API 키 인증, 배포 셸에서 주입 (Bedrock IAM 정책 불필요)
        AWS_BEARER_TOKEN_BEDROCK: process.env.AWS_BEARER_TOKEN_BEDROCK ?? "",
      },
      timeout: cdk.Duration.seconds(29),
      memorySize: 512,
    });
    table.grantReadWriteData(orderFn);

    const boardFn = new lambda.Function(this, "BoardFn", {
      runtime: lambda.Runtime.NODEJS_22_X,
      handler: "board.handler",
      code: lambda.Code.fromAsset("lambda"),
      environment: { TABLE_NAME: table.tableName },
      timeout: cdk.Duration.seconds(10),
    });
    table.grantReadWriteData(boardFn);

    const api = new apigwv2.HttpApi(this, "CafeApi", {
      corsPreflight: {
        allowOrigins: ["*"],
        allowMethods: [apigwv2.CorsHttpMethod.GET, apigwv2.CorsHttpMethod.POST, apigwv2.CorsHttpMethod.OPTIONS],
        allowHeaders: ["Content-Type"],
      },
    });
    const orderInt = new integrations.HttpLambdaIntegration("OrderInt", orderFn);
    const boardInt = new integrations.HttpLambdaIntegration("BoardInt", boardFn);
    api.addRoutes({ path: "/order", methods: [apigwv2.HttpMethod.POST], integration: orderInt });
    api.addRoutes({ path: "/orders", methods: [apigwv2.HttpMethod.GET], integration: boardInt });
    api.addRoutes({ path: "/status", methods: [apigwv2.HttpMethod.POST], integration: boardInt });
    api.addRoutes({ path: "/menu", methods: [apigwv2.HttpMethod.GET], integration: boardInt });

    // ── Phase 2: 프론트 2뷰 (S3 + CloudFront) ──
    const siteBucket = new s3.Bucket(this, "SiteBucket", {
      blockPublicAccess: s3.BlockPublicAccess.BLOCK_ALL,
      removalPolicy: cdk.RemovalPolicy.DESTROY,
      autoDeleteObjects: true,
    });
    const dist = new cloudfront.Distribution(this, "SiteDist", {
      defaultBehavior: {
        origin: origins.S3BucketOrigin.withOriginAccessControl(siteBucket),
        viewerProtocolPolicy: cloudfront.ViewerProtocolPolicy.REDIRECT_TO_HTTPS,
      },
      defaultRootObject: "index.html",
    });
    new s3deploy.BucketDeployment(this, "DeploySite", {
      sources: [s3deploy.Source.asset("frontend")],
      destinationBucket: siteBucket,
      distribution: dist,
      distributionPaths: ["/*"],
    });

    new cdk.CfnOutput(this, "ApiUrl", { value: api.apiEndpoint });
    new cdk.CfnOutput(this, "SiteUrl", { value: `https://${dist.distributionDomainName}` });
    new cdk.CfnOutput(this, "KitchenUrl", { value: `https://${dist.distributionDomainName}/kitchen.html` });
    new cdk.CfnOutput(this, "TableName", { value: table.tableName });
  }
}

import * as cdk from "aws-cdk-lib";
import { CafeStack } from "./cafe-stack";

const app = new cdk.App();
new CafeStack(app, "CafeStack", {
  env: { region: process.env.CDK_DEFAULT_REGION ?? "ap-northeast-2" },
  tags: { project: "capstone-ai-cafe" },
});

// 메뉴 대조 검증과 합계 계산. AI가 뽑은 주문을 신뢰하지 않고 여기서 다시 검증한다.
export function buildReceipt(menu, items) {
  const byId = Object.fromEntries(menu.map((m) => [m.id, m]));
  const lines = [];
  const rejected = [];
  let total = 0;

  for (const it of items ?? []) {
    const m = byId[it.menu_id];
    if (!m) {
      rejected.push(`unknown menu: ${it.menu_id}`);
      continue;
    }
    const qty = Math.min(Math.max(Number(it.qty) || 1, 1), 10);
    let unit = m.price;
    const opts = [];
    for (const o of it.options ?? []) {
      if (m.options && o in m.options) {
        unit += m.options[o];
        opts.push(o);
      } else {
        rejected.push(`unknown option: ${o} (${m.name})`);
      }
    }
    const subtotal = unit * qty;
    total += subtotal;
    lines.push({ name: m.name, qty, options: opts, subtotal });
  }
  return { lines, total, rejected };
}

import { DynamoDBClient } from "@aws-sdk/client-dynamodb";
import { DynamoDBDocumentClient, PutCommand, QueryCommand } from "@aws-sdk/lib-dynamodb";
import { BedrockRuntimeClient, ConverseCommand } from "@aws-sdk/client-bedrock-runtime";
import { buildReceipt } from "./receipt.mjs";

const ddb = DynamoDBDocumentClient.from(new DynamoDBClient({}));
const brt = new BedrockRuntimeClient({});
const TABLE = process.env.TABLE_NAME;
const MODEL_ID = process.env.ORDER_MODEL_ID ?? "global.anthropic.claude-sonnet-4-6";
const CORS = {
  "Access-Control-Allow-Origin": "*",
  "Access-Control-Allow-Headers": "Content-Type",
  "Access-Control-Allow-Methods": "GET,POST,OPTIONS",
};

async function loadMenu() {
  const res = await ddb.send(new QueryCommand({
    TableName: TABLE,
    KeyConditionExpression: "pk = :p",
    ExpressionAttributeValues: { ":p": "menu" },
  }));
  return (res.Items ?? []).map((x) => ({
    id: x.sk, name: x.name, price: x.price, options: x.options ?? {},
  }));
}

async function extractOrder(menu, text) {
  const res = await brt.send(new ConverseCommand({
    modelId: MODEL_ID,
    system: [{
      text: `당신은 카페 주문 접수원입니다. 메뉴판: ${JSON.stringify(menu)}. ` +
        "손님의 말을 place_order 도구 호출로만 응답하세요. " +
        "메뉴판에 없는 것은 items에 넣지 말고 reply에서 정중히 안내하세요. " +
        "reply는 한국어 한두 문장의 접수 멘트입니다.",
    }],
    messages: [{ role: "user", content: [{ text: String(text).slice(0, 1000) }] }],
    toolConfig: {
      tools: [{
        toolSpec: {
          name: "place_order",
          description: "구조화된 카페 주문 접수",
          inputSchema: {
            json: {
              type: "object",
              properties: {
                items: {
                  type: "array",
                  items: {
                    type: "object",
                    properties: {
                      menu_id: { type: "string" },
                      qty: { type: "integer" },
                      options: { type: "array", items: { type: "string" } },
                    },
                    required: ["menu_id", "qty"],
                  },
                },
                reply: { type: "string" },
              },
              required: ["items", "reply"],
            },
          },
        },
      }],
      toolChoice: { tool: { name: "place_order" } },
    },
    inferenceConfig: { maxTokens: 700 },
  }));
  const tu = res.output?.message?.content?.find((c) => c.toolUse)?.toolUse;
  if (!tu) throw new Error("no toolUse in response");
  return tu.input;
}

export const handler = async (event) => {
  const method = event.requestContext?.http?.method ?? "POST";
  if (method === "OPTIONS") return { statusCode: 204, headers: CORS };

  try {
    const body = JSON.parse(event.body ?? "{}");
    const menu = await loadMenu();
    if (!menu.length) {
      return { statusCode: 409, headers: CORS, body: JSON.stringify({ error: "메뉴가 비었습니다. seed.sh를 먼저 실행하세요." }) };
    }

    let items = body.items;
    let reply = "주문이 접수되었습니다.";
    if (!items && body.text) {
      const extracted = await extractOrder(menu, body.text);
      items = extracted.items;
      reply = extracted.reply;
    }
    if (!items) {
      return { statusCode: 400, headers: CORS, body: JSON.stringify({ error: "items 또는 text 필요" }) };
    }

    const receipt = buildReceipt(menu, items);
    if (!receipt.lines.length) {
      return { statusCode: 422, headers: CORS, body: JSON.stringify({ reply, receipt, error: "접수 가능한 항목 없음" }) };
    }

    const id = `${Date.now()}-${Math.random().toString(36).slice(2, 6)}`;
    await ddb.send(new PutCommand({
      TableName: TABLE,
      Item: {
        pk: "order", sk: id,
        customer: String(body.customer ?? "guest").slice(0, 30),
        source: body.text ? "ai" : "direct",
        note: String(body.text ?? "").slice(0, 200),
        lines: receipt.lines, total: receipt.total,
        status: "NEW", at: new Date().toISOString(),
      },
    }));
    return { statusCode: 201, headers: CORS, body: JSON.stringify({ order_id: id, reply, receipt }) };
  } catch (err) {
    console.error("ORDER_ERROR", err.name, err.message);
    return { statusCode: 502, headers: CORS, body: JSON.stringify({ error: err.name, message: err.message }) };
  }
};

import { DynamoDBClient } from "@aws-sdk/client-dynamodb";
import { DynamoDBDocumentClient, QueryCommand, UpdateCommand } from "@aws-sdk/lib-dynamodb";

const ddb = DynamoDBDocumentClient.from(new DynamoDBClient({}));
const TABLE = process.env.TABLE_NAME;
const CORS = {
  "Access-Control-Allow-Origin": "*",
  "Access-Control-Allow-Headers": "Content-Type",
  "Access-Control-Allow-Methods": "GET,POST,OPTIONS",
};
const FLOW = ["NEW", "MAKING", "DONE"];

export const handler = async (event) => {
  const method = event.requestContext?.http?.method ?? "GET";
  const path = event.rawPath ?? "/";
  if (method === "OPTIONS") return { statusCode: 204, headers: CORS };

  try {
    if (path.endsWith("/menu")) {
      const res = await ddb.send(new QueryCommand({
        TableName: TABLE,
        KeyConditionExpression: "pk = :p",
        ExpressionAttributeValues: { ":p": "menu" },
      }));
      return { statusCode: 200, headers: CORS, body: JSON.stringify({ menu: res.Items ?? [] }) };
    }

    if (path.endsWith("/status") && method === "POST") {
      const { id, status } = JSON.parse(event.body ?? "{}");
      if (!id || !FLOW.includes(status)) {
        return { statusCode: 400, headers: CORS, body: JSON.stringify({ error: "id와 status(NEW/MAKING/DONE) 필요" }) };
      }
      await ddb.send(new UpdateCommand({
        TableName: TABLE,
        Key: { pk: "order", sk: id },
        UpdateExpression: "SET #s = :s",
        ExpressionAttributeNames: { "#s": "status" },
        ExpressionAttributeValues: { ":s": status },
      }));
      return { statusCode: 200, headers: CORS, body: JSON.stringify({ ok: true }) };
    }

    const res = await ddb.send(new QueryCommand({
      TableName: TABLE,
      KeyConditionExpression: "pk = :p",
      ExpressionAttributeValues: { ":p": "order" },
      ScanIndexForward: false,
      Limit: 30,
    }));
    const orders = res.Items ?? [];
    const sales = orders.reduce((a, x) => a + (x.total || 0), 0);
    return { statusCode: 200, headers: CORS, body: JSON.stringify({ orders, sales }) };
  } catch (err) {
    console.error(err);
    return { statusCode: 500, headers: CORS, body: JSON.stringify({ error: err.message }) };
  }
};

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Claude Cafe</title>
<style>
  :root { --bg:#12181F; --card:#1B242E; --line:#2A3542; --text:#E8ECF1; --muted:#8B96A5; --accent:#FF9900; --green:#3FB950; }
  * { box-sizing:border-box; margin:0; }
  body { background:var(--bg); color:var(--text); font-family:system-ui,sans-serif; padding:28px 20px 60px; }
  .wrap { max-width:680px; margin:0 auto; }
  h1 { font-size:26px; } h1 em { color:var(--accent); font-style:normal; }
  .sub { color:var(--muted); font-size:13px; margin:4px 0 20px; }
  .panel { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:18px; margin-bottom:16px; }
  .panel h2 { font-size:13px; color:var(--muted); letter-spacing:.06em; margin-bottom:12px; }
  ul#menu { list-style:none; display:grid; gap:8px; }
  ul#menu li { display:flex; justify-content:space-between; font-size:14.5px; padding:8px 10px; background:#0C1117; border-radius:8px; }
  ul#menu .price { color:var(--accent); font-weight:700; }
  ul#menu .opt { color:var(--muted); font-size:12px; }
  textarea { width:100%; background:#0C1117; border:1px solid var(--line); border-radius:8px; color:var(--text); padding:12px; font-size:15px; min-height:74px; resize:vertical; }
  .row { display:flex; gap:10px; margin-top:10px; }
  input#nick { flex:1; background:#0C1117; border:1px solid var(--line); border-radius:8px; color:var(--text); padding:10px 12px; }
  button { background:var(--accent); border:0; border-radius:8px; color:#12181F; padding:10px 24px; font-weight:800; cursor:pointer; font-size:15px; }
  button:disabled { opacity:.5; }
  #receipt { font-size:14px; line-height:1.7; }
  #receipt .reply { color:var(--green); margin-bottom:8px; }
  #receipt table { width:100%; border-collapse:collapse; margin-top:6px; }
  #receipt td { padding:6px 4px; border-bottom:1px solid var(--line); }
  #receipt td.r { text-align:right; }
  #receipt .total td { color:var(--accent); font-weight:800; border-bottom:0; }
  #receipt .rej { color:#f08080; font-size:12.5px; margin-top:6px; }
  .empty { color:var(--muted); font-size:13px; }
</style>
</head>
<body>
<div class="wrap">
  <h1><em>Claude</em> Cafe</h1>
  <div class="sub">말로 주문하세요. AI 접수원이 알아듣습니다 - Capstone Lab C</div>

  <div class="panel">
    <h2>MENU</h2>
    <ul id="menu"><li class="empty">메뉴 불러오는 중... (비어 있으면 seed.sh를 실행하세요)</li></ul>
  </div>

  <div class="panel">
    <h2>주문하기</h2>
    <textarea id="say" placeholder="예: 아이스 아메리카노 두 잔인데 한 잔은 샷 추가요, 크루아상도 하나 주세요"></textarea>
    <div class="row">
      <input id="nick" placeholder="닉네임 (주방 보드에 표시)" maxlength="20">
      <button id="go">주문</button>
    </div>
  </div>

  <div class="panel">
    <h2>영수증</h2>
    <div id="receipt"><span class="empty">아직 주문이 없습니다.</span></div>
  </div>
</div>

<script>
"use strict";
var API_BASE = "PASTE_API_URL";

function won(n) { return Number(n || 0).toLocaleString("ko-KR") + "원"; }

fetch(API_BASE + "/menu")
  .then(function (r) { return r.json(); })
  .then(function (d) {
    var ul = document.getElementById("menu");
    if (!d.menu || !d.menu.length) return;
    ul.innerHTML = d.menu.map(function (m) {
      var opts = Object.keys(m.options || {}).map(function (k) {
        return k + (m.options[k] ? " +" + won(m.options[k]) : "");
      }).join(", ");
      return "<li><span>" + m.name + (opts ? ' <span class="opt">(' + opts + ")</span>" : "") +
             '</span><span class="price">' + won(m.price) + "</span></li>";
    }).join("");
  })
  .catch(function () {});

document.getElementById("go").addEventListener("click", function () {
  var text = document.getElementById("say").value.trim();
  if (!text) return;
  var btn = this, box = document.getElementById("receipt");
  btn.disabled = true;
  box.innerHTML = '<span class="empty">AI 접수원이 듣는 중...</span>';
  fetch(API_BASE + "/order", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ text: text, customer: document.getElementById("nick").value.trim() || "guest" })
  })
    .then(function (r) { return r.json(); })
    .then(function (d) {
      if (!d.receipt) { box.innerHTML = '<span class="rej">' + (d.error || "접수 실패") + "</span>"; return; }
      var rows = d.receipt.lines.map(function (l) {
        return "<tr><td>" + l.name + (l.options.length ? " (" + l.options.join(", ") + ")" : "") +
               "</td><td class='r'>x" + l.qty + "</td><td class='r'>" + won(l.subtotal) + "</td></tr>";
      }).join("");
      box.innerHTML = '<div class="reply">"' + (d.reply || "") + '"</div>' +
        "<table>" + rows + '<tr class="total"><td>합계</td><td></td><td class="r">' + won(d.receipt.total) + "</td></tr></table>" +
        (d.receipt.rejected.length ? '<div class="rej">제외됨: ' + d.receipt.rejected.join(" / ") + "</div>" : "") +
        (d.order_id ? '<div class="empty">주문번호 ' + d.order_id + " - 주방 보드에서 확인하세요</div>" : "");
    })
    .catch(function (e) { box.innerHTML = '<span class="rej">오류: ' + e.message + "</span>"; })
    .finally(function () { btn.disabled = false; });
});
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Claude Cafe Kitchen</title>
<style>
  :root { --bg:#12181F; --card:#1B242E; --line:#2A3542; --text:#E8ECF1; --muted:#8B96A5; --accent:#FF9900; --green:#3FB950; --purple:#7a3ff2; }
  * { box-sizing:border-box; margin:0; }
  body { background:var(--bg); color:var(--text); font-family:system-ui,sans-serif; padding:24px; }
  header { display:flex; justify-content:space-between; align-items:baseline; max-width:1100px; margin:0 auto 18px; }
  h1 { font-size:22px; } h1 em { color:var(--accent); font-style:normal; }
  #sales { color:var(--green); font-weight:800; font-size:18px; }
  .cols { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; max-width:1100px; margin:0 auto; }
  .col h2 { font-size:13px; letter-spacing:.08em; margin-bottom:10px; }
  .col.new h2 { color:var(--accent); } .col.making h2 { color:#c9a2ff; } .col.done h2 { color:var(--green); }
  .ticket { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin-bottom:10px; font-size:13.5px; }
  .ticket .who { display:flex; justify-content:space-between; color:var(--muted); font-size:12px; margin-bottom:6px; }
  .ticket ul { list-style:none; margin:0 0 8px; }
  .ticket .total { color:var(--accent); font-weight:700; }
  .ticket .note { color:var(--muted); font-size:12px; margin-top:4px; font-style:italic; }
  .ticket button { margin-top:8px; width:100%; background:var(--purple); color:#fff; border:0; border-radius:7px; padding:7px 0; font-weight:700; cursor:pointer; }
  .col.making .ticket button { background:var(--green); color:#12181F; }
  .empty { color:var(--muted); font-size:12.5px; }
</style>
</head>
<body>
<header>
  <h1><em>Claude</em> Cafe, 주방 보드</h1>
  <div>오늘 매출 <span id="sales">0원</span></div>
</header>
<div class="cols">
  <div class="col new"><h2>NEW</h2><div id="new"><div class="empty">주문 대기 중</div></div></div>
  <div class="col making"><h2>MAKING</h2><div id="making"><div class="empty">-</div></div></div>
  <div class="col done"><h2>DONE</h2><div id="done"><div class="empty">-</div></div></div>
</div>

<script>
"use strict";
var API_BASE = "PASTE_API_URL";

function won(n) { return Number(n || 0).toLocaleString("ko-KR") + "원"; }

function ticket(o) {
  var lines = (o.lines || []).map(function (l) {
    return "<li>" + l.name + (l.options.length ? " (" + l.options.join(", ") + ")" : "") + " x" + l.qty + "</li>";
  }).join("");
  var next = o.status === "NEW" ? "MAKING" : o.status === "MAKING" ? "DONE" : null;
  var btn = next ? '<button onclick="advance(\'' + o.sk + "','" + next + '\')">' +
            (next === "MAKING" ? "제조 시작" : "완성") + "</button>" : "";
  return '<div class="ticket"><div class="who"><span>' + (o.customer || "guest") +
         (o.source === "ai" ? " (AI 접수)" : "") + "</span><span>#" + String(o.sk).slice(-4) + "</span></div>" +
         "<ul>" + lines + '</ul><div class="total">' + won(o.total) + "</div>" +
         (o.note ? '<div class="note">"' + o.note + '"</div>' : "") + btn + "</div>";
}

function advance(id, status) {
  fetch(API_BASE + "/status", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ id: id, status: status })
  }).then(refresh).catch(function () {});
}

function refresh() {
  fetch(API_BASE + "/orders")
    .then(function (r) { return r.json(); })
    .then(function (d) {
      document.getElementById("sales").textContent = won(d.sales);
      ["NEW", "MAKING", "DONE"].forEach(function (s) {
        var el = document.getElementById(s.toLowerCase());
        var list = (d.orders || []).filter(function (o) { return o.status === s; });
        el.innerHTML = list.length ? list.map(ticket).join("") : '<div class="empty">-</div>';
      });
    })
    .catch(function () {});
}
refresh();
setInterval(refresh, 3000);
</script>
</body>
</html>