pick-lunch/template/assets/branding/generate-thumbnail-1932x828.js

const fs = require('fs');
const path = require('path');
const { createCanvas } = require('@napi-rs/canvas');

const W = 1932;
const H = 828;
const outDir = __dirname;

function roundedRect(ctx, x, y, w, h, r) {
  ctx.beginPath();
  ctx.moveTo(x + r, y);
  ctx.arcTo(x + w, y, x + w, y + h, r);
  ctx.arcTo(x + w, y + h, x, y + h, r);
  ctx.arcTo(x, y + h, x, y, r);
  ctx.arcTo(x, y, x + w, y, r);
  ctx.closePath();
}

function drawSteam(ctx, x, y, color, width = 18) {
  ctx.strokeStyle = color;
  ctx.lineWidth = width;
  ctx.lineCap = 'round';
  ctx.beginPath();
  ctx.moveTo(x, y + 56);
  ctx.bezierCurveTo(x - 22, y + 16, x + 28, y - 6, x + 10, y - 54);
  ctx.stroke();
}

function drawHeroBowl(ctx, x, y, theme) {
  // bowl body
  const grad = ctx.createLinearGradient(x - 220, y + 80, x + 220, y + 300);
  grad.addColorStop(0, theme.bowlTop);
  grad.addColorStop(1, theme.bowlBottom);
  ctx.fillStyle = grad;
  roundedRect(ctx, x - 250, y + 120, 500, 260, 120);
  ctx.fill();

  // lip
  ctx.fillStyle = theme.lipOuter;
  ctx.beginPath();
  ctx.ellipse(x, y + 120, 280, 76, 0, 0, Math.PI * 2);
  ctx.fill();

  ctx.fillStyle = theme.lipInner;
  ctx.beginPath();
  ctx.ellipse(x, y + 130, 185, 44, 0, 0, Math.PI * 2);
  ctx.fill();

  // rice
  const riceGrad = ctx.createLinearGradient(x - 150, y + 20, x + 150, y + 150);
  riceGrad.addColorStop(0, theme.riceA);
  riceGrad.addColorStop(1, theme.riceB);
  ctx.fillStyle = riceGrad;
  ctx.beginPath();
  ctx.ellipse(x, y + 74, 230, 96, 0, 0, Math.PI * 2);
  ctx.fill();

  // grains
  ctx.fillStyle = 'rgba(255,255,255,0.65)';
  for (let i = 0; i < 18; i++) {
    const gx = x - 130 + i * 15;
    const gy = y + 54 + ((i % 2) * 7 - 3);
    ctx.beginPath();
    ctx.ellipse(gx, gy, 6, 3, -0.2, 0, Math.PI * 2);
    ctx.fill();
  }

  // steam
  drawSteam(ctx, x - 110, y - 120, theme.steam, 16);
  drawSteam(ctx, x, y - 145, theme.steam, 18);
  drawSteam(ctx, x + 110, y - 120, theme.steam, 16);
}

function drawThumbnail({ filename, theme }) {
  const canvas = createCanvas(W, H);
  const ctx = canvas.getContext('2d');

  // background
  const bg = ctx.createLinearGradient(0, 0, W, H);
  bg.addColorStop(0, theme.bgFrom);
  bg.addColorStop(1, theme.bgTo);
  ctx.fillStyle = bg;
  ctx.fillRect(0, 0, W, H);

  // soft circles
  ctx.fillStyle = theme.blob1;
  ctx.beginPath();
  ctx.ellipse(260, 120, 280, 180, 0, 0, Math.PI * 2);
  ctx.fill();

  ctx.fillStyle = theme.blob2;
  ctx.beginPath();
  ctx.ellipse(1700, 720, 360, 220, 0, 0, Math.PI * 2);
  ctx.fill();

  // glass card
  roundedRect(ctx, 72, 62, W - 144, H - 124, 64);
  ctx.fillStyle = theme.card;
  ctx.fill();

  // left visual
  drawHeroBowl(ctx, 520, 300, theme);

  // right text area
  ctx.fillStyle = theme.title;
  ctx.font = 'bold 112px sans-serif';
  ctx.textAlign = 'left';
  ctx.textBaseline = 'top';
  ctx.fillText('점메추', 910, 220);

  ctx.fillStyle = theme.subtitle;
  ctx.font = '600 52px sans-serif';
  ctx.fillText('직장인 점심 추천', 915, 360);

  ctx.fillStyle = theme.desc;
  ctx.font = '500 34px sans-serif';
  ctx.fillText('가까운 식당 찾기 · 카테고리별 탐색 · 리뷰/별점', 915, 446);

  // badge
  roundedRect(ctx, 915, 518, 520, 92, 44);
  ctx.fillStyle = theme.badge;
  ctx.fill();

  ctx.fillStyle = theme.badgeText;
  ctx.font = '700 40px sans-serif';
  ctx.fillText('오늘 점심, 더 빠르게 결정', 962, 542);

  const output = path.join(outDir, filename);
  fs.writeFileSync(output, canvas.toBuffer('image/png'));
  return output;
}

const light = drawThumbnail({
  filename: 'thumbnail-1932x828-light.png',
  theme: {
    bgFrom: '#F6FAFF',
    bgTo: '#E5F1FF',
    blob1: 'rgba(108,174,255,0.16)',
    blob2: 'rgba(41,130,255,0.12)',
    card: 'rgba(255,255,255,0.9)',
    bowlTop: '#31B4F4',
    bowlBottom: '#0A85E8',
    lipOuter: '#DDE9F8',
    lipInner: '#8EA6C5',
    riceA: '#FFFFFF',
    riceB: '#EFF6FF',
    steam: '#5EA8EE',
    title: '#114B95',
    subtitle: '#1D5FB0',
    desc: '#3A5A84',
    badge: '#0B86E9',
    badgeText: '#FFFFFF',
  },
});

const dark = drawThumbnail({
  filename: 'thumbnail-1932x828-dark.png',
  theme: {
    bgFrom: '#07142A',
    bgTo: '#0F284C',
    blob1: 'rgba(102,180,255,0.12)',
    blob2: 'rgba(59,148,255,0.1)',
    card: 'rgba(18,42,78,0.84)',
    bowlTop: '#66CBFF',
    bowlBottom: '#1A9EF4',
    lipOuter: '#DDE6F2',
    lipInner: '#8CA2BC',
    riceA: '#FFFFFF',
    riceB: '#F2F7FF',
    steam: '#B8DCFF',
    title: '#EAF4FF',
    subtitle: '#B8D9FF',
    desc: '#9EC2E8',
    badge: '#2A9DF8',
    badgeText: '#FFFFFF',
  },
});

console.log(light);
console.log(dark);