create-ait-app 0.0.2 → 0.0.3

package/templates/js/samples/iaa/src/lib/inAppAds.js

@@ -0,0 +1,119 @@
+import {
+  loadFullScreenAd,
+  showFullScreenAd,
+} from "@apps-in-toss/web-framework";
+
+// 참고문서: https://developers-apps-in-toss.toss.im/ads/intro.html
+export function createInAppAds(adGroupId) {
+  const state = {
+    isAdLoaded: false,
+    isSupported: false,
+    lastReward: null,
+  };
+
+  let onUpdate = () => {};
+  let unregister = null;
+
+  function notify() {
+    onUpdate();
+  }
+
+  function load() {
+    state.isAdLoaded = false;
+    notify();
+
+    try {
+      unregister = loadFullScreenAd({
+        options: { adGroupId },
+        onEvent: (event) => {
+          if (event.type === "loaded") {
+            state.isAdLoaded = true;
+            notify();
+          }
+        },
+        onError: (error) => {
+          console.error("광고 로드 실패:", error);
+        },
+      });
+    } catch (error) {
+      alert(
+        "광고 로드 실패: \n\n- 인앱광고 기능은 브라우저가 아닌 샌드박스앱/토스앱에서 실행해주세요\n\n" +
+          error,
+      );
+    }
+  }
+
+  function showAd() {
+    if (!state.isSupported) {
+      console.info("현재 환경에서는 인앱 광고가 지원되지 않습니다.");
+      return;
+    }
+
+    if (!state.isAdLoaded) {
+      console.info("아직 광고가 로드되지 않았습니다.");
+      return;
+    }
+
+    try {
+      showFullScreenAd({
+        options: { adGroupId },
+        onEvent: (event) => {
+          switch (event.type) {
+            case "userEarnedReward":
+              state.lastReward = event.data;
+              notify();
+              break;
+            case "dismissed":
+              state.isAdLoaded = false;
+              notify();
+              load();
+              break;
+            case "failedToShow":
+              console.error("광고 표시 실패");
+              state.isAdLoaded = false;
+              notify();
+              load();
+              break;
+          }
+        },
+        onError: (error) => {
+          console.error("광고 표시 실패:", error);
+          state.isAdLoaded = false;
+          notify();
+          load();
+        },
+      });
+    } catch (error) {
+      console.error("광고 표시 실패:", error);
+      state.isAdLoaded = false;
+      notify();
+      load();
+    }
+  }
+
+  try {
+    state.isSupported = loadFullScreenAd.isSupported();
+    if (state.isSupported) {
+      load();
+    }
+  } catch (error) {
+    console.error("광고 지원 여부 확인 실패:", error);
+    state.isSupported = false;
+  }
+
+  return {
+    getState: () => state,
+    showAd,
+    subscribe: (listener) => {
+      onUpdate = listener;
+      return () => {
+        onUpdate = () => {};
+        try {
+          unregister?.();
+        } catch (error) {
+          console.error("광고 정리(cleanup) 중 에러:", error);
+        }
+      };
+    },
+  };
+}

package/templates/js/samples/iaa/src/pages/InAppAdsPage.js

@@ -0,0 +1,83 @@
+import { createInAppAds } from "../lib/inAppAds.js";
+import "./InAppAdsPage.css";
+
+// TODO: 서비스를 출시하기 전에 앱인토스 콘솔에서 발급한 광고그룹ID로 변경해주세요.
+const TEST_INTERSTITIAL_ID = "ait-ad-test-interstitial-id";
+const TEST_REWARDED_ID = "ait-ad-test-rewarded-id";
+
+export function mountInAppAdsPage(onBack) {
+  const root = document.getElementById("root");
+  const interstitial = createInAppAds(TEST_INTERSTITIAL_ID);
+  const rewarded = createInAppAds(TEST_REWARDED_ID);
+
+  function render() {
+    const interstitialState = interstitial.getState();
+    const rewardedState = rewarded.getState();
+
+    root.innerHTML = `
+      <div class="app-header">
+        <h1 class="page-title">인앱광고</h1>
+        ${
+          !interstitialState.isSupported
+            ? '<p class="page-subtitle">이 환경에서는 인앱 광고를 사용할 수 없어요.</p>'
+            : ""
+        }
+      </div>
+
+      <div class="iaa-section-list">
+        <div class="iaa-section">
+          <div class="iaa-section-row">
+            <div class="iaa-section-info">
+              <h2 class="iaa-section-title">전면형 광고</h2>
+              <p class="iaa-section-desc">화면 전체에 표시되는 광고</p>
+            </div>
+            <button
+              type="button"
+              class="iaa-section-button"
+              data-action="show-interstitial"
+              ${interstitialState.isAdLoaded ? "" : "disabled"}
+            >
+              ${interstitialState.isAdLoaded ? "보기" : "로딩 중"}
+            </button>
+          </div>
+        </div>
+
+        <div class="iaa-section">
+          <div class="iaa-section-row">
+            <div class="iaa-section-info">
+              <h2 class="iaa-section-title">보상형 광고</h2>
+              <p class="iaa-section-desc">시청 완료 시 보상을 받는 광고</p>
+            </div>
+            <button
+              type="button"
+              class="iaa-section-button"
+              data-action="show-rewarded"
+              ${rewardedState.isAdLoaded ? "" : "disabled"}
+            >
+              ${rewardedState.isAdLoaded ? "보기" : "로딩 중"}
+            </button>
+          </div>
+          ${
+            rewardedState.lastReward
+              ? `<p class="iaa-reward-message">보상 획득: ${rewardedState.lastReward.unitType} ${rewardedState.lastReward.unitAmount}개</p>`
+              : ""
+          }
+        </div>
+      </div>
+
+      <button type="button" class="text-button iaa-back-btn" data-action="back">← 홈으로</button>
+    `;
+
+    root
+      .querySelector('[data-action="show-interstitial"]')
+      ?.addEventListener("click", () => interstitial.showAd());
+    root
+      .querySelector('[data-action="show-rewarded"]')
+      ?.addEventListener("click", () => rewarded.showAd());
+    root.querySelector('[data-action="back"]')?.addEventListener("click", onBack);
+  }
+
+  interstitial.subscribe(render);
+  rewarded.subscribe(render);
+  render();
+}

package/templates/js/samples/iap/src/lib/inAppPurchase.js

@@ -0,0 +1,105 @@
+import { IAP } from "@apps-in-toss/web-framework";
+
+// 참고문서: https://developers-apps-in-toss.toss.im/iap/intro.html
+export function createInAppPurchase() {
+  const state = {
+    products: [],
+    productsLoading: false,
+    purchasingSku: null,
+  };
+
+  let onUpdate = () => {};
+
+  function notify() {
+    onUpdate();
+  }
+
+  function grantProduct(orderId) {
+    // TODO: 여기에 상품 지급 로직을 작성해주세요.
+    console.info(`상품 지급 처리: ${orderId}`);
+  }
+
+  async function fetchProducts() {
+    state.productsLoading = true;
+    notify();
+
+    try {
+      const response = await IAP.getProductItemList();
+      state.products = response?.products ?? [];
+    } catch (error) {
+      alert(
+        "상품 목록 조회 실패: \n\n-앱인토스 콘솔에서 미니앱을 생성후 인앱상품을 등록해주세요\n- 인앱결제 기능은 브라우저가 아닌 샌드박스앱/토스앱에서 실행해주세요\n\n" +
+          error,
+      );
+    } finally {
+      state.productsLoading = false;
+      notify();
+    }
+  }
+
+  function purchaseProduct(sku) {
+    state.purchasingSku = sku;
+    notify();
+
+    try {
+      const cleanup = IAP.createOneTimePurchaseOrder({
+        options: {
+          sku,
+          processProductGrant: ({ orderId }) => {
+            grantProduct(orderId);
+            console.info(`상품 지급 처리: ${orderId}`);
+            return true;
+          },
+        },
+        onEvent: (event) => {
+          if (event.type === "success") {
+            alert(`${event.data.displayName}이 결제되었어요.`);
+          }
+
+          state.purchasingSku = null;
+          notify();
+          cleanup();
+        },
+        onError: (error) => {
+          console.error("인앱결제 실패:", error);
+          state.purchasingSku = null;
+          notify();
+          cleanup();
+        },
+      });
+    } catch (error) {
+      console.error("인앱결제 실패:", error);
+      state.purchasingSku = null;
+      notify();
+    }
+  }
+
+  async function restorePendingOrders() {
+    try {
+      const pending = await IAP.getPendingOrders();
+      const orders = pending?.orders ?? [];
+
+      for (const order of orders) {
+        grantProduct(order.orderId);
+        await IAP.completeProductGrant({ params: { orderId: order.orderId } });
+        console.info("미결 주문 복원 완료:", order.orderId);
+      }
+    } catch (error) {
+      console.error("주문 복원 실패:", error);
+    }
+  }
+
+  fetchProducts();
+
+  return {
+    getState: () => state,
+    purchaseProduct,
+    restorePendingOrders,
+    subscribe: (listener) => {
+      onUpdate = listener;
+      return () => {
+        onUpdate = () => {};
+      };
+    },
+  };
+}

package/templates/js/samples/iap/src/pages/InAppPurchasePage.js

@@ -0,0 +1,102 @@
+import { createInAppPurchase } from "../lib/inAppPurchase.js";
+import "./InAppPurchasePage.css";
+
+function escapeHtml(value) {
+  return String(value)
+    .replaceAll("&", "&")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#39;");
+}
+
+export function mountInAppPurchasePage(onBack) {
+  const root = document.getElementById("root");
+  const iap = createInAppPurchase();
+
+  function render() {
+    const { products, productsLoading, purchasingSku } = iap.getState();
+
+    if (productsLoading) {
+      root.innerHTML = `
+        <div class="app-header">
+          <h1 class="page-title">인앱결제</h1>
+        </div>
+        <p>상품을 불러오는 중...</p>
+      `;
+      return;
+    }
+
+    if (products.length === 0) {
+      root.innerHTML = `
+        <div class="app-header">
+          <h1 class="page-title">인앱결제</h1>
+        </div>
+        <div class="iap-empty-state">
+          <img class="iap-empty-state-icon" src="icon-document.png" aria-hidden alt="" />
+          <div class="iap-empty-state-content">
+            <h2 class="iap-empty-state-title">인앱 상품이 없어요</h2>
+            <p class="iap-empty-state-desc">콘솔 '인앱 결제' 메뉴에서 상품을 등록해 주세요.</p>
+          </div>
+          <button type="button" class="iap-empty-state-back-btn" data-action="back">홈으로</button>
+        </div>
+      `;
+      root.querySelector('[data-action="back"]')?.addEventListener("click", onBack);
+      return;
+    }
+
+    const productItems = products
+      .map(
+        (product) => `
+          <div class="iap-product-item">
+            <div class="iap-product-info">
+              ${
+                product.iconUrl
+                  ? `<img class="iap-product-icon" src="${escapeHtml(product.iconUrl)}" alt="${escapeHtml(product.displayName)}" />`
+                  : ""
+              }
+              <div class="iap-product-details">
+                <div class="iap-product-name">${escapeHtml(product.displayName)}</div>
+                ${
+                  product.description
+                    ? `<div class="iap-product-description">${escapeHtml(product.description)}</div>`
+                    : ""
+                }
+                <div class="iap-product-amount">${escapeHtml(product.displayAmount)}</div>
+              </div>
+            </div>
+            <button
+              type="button"
+              class="iap-product-buy-btn"
+              data-sku="${escapeHtml(product.sku)}"
+              ${purchasingSku !== null ? "disabled" : ""}
+            >
+              ${purchasingSku === product.sku ? "결제 처리 중" : "구매하기"}
+            </button>
+          </div>
+        `,
+      )
+      .join("");
+
+    root.innerHTML = `
+      <div class="app-header">
+        <h1 class="page-title">인앱결제</h1>
+      </div>
+      <div class="iap-product-list">
+        ${productItems}
+        <button type="button" class="text-button iap-back-btn" data-action="back">← 홈으로</button>
+      </div>
+    `;
+
+    root.querySelector('[data-action="back"]')?.addEventListener("click", onBack);
+    root.querySelectorAll("[data-sku]").forEach((button) => {
+      button.addEventListener("click", () => {
+        iap.purchaseProduct(button.dataset.sku);
+      });
+    });
+  }
+
+  iap.subscribe(render);
+  iap.restorePendingOrders();
+  render();
+}

package/templates/js/src/app.js

@@ -0,0 +1,58 @@
+import "./App.css";
+{{SAMPLE_IMPORTS}}
+
+let currentPage = null;
+
+function renderHome() {
+  const root = document.getElementById("root");
+  root.innerHTML = `
+    <div class="app">
+      <header class="app-header">
+        <h1 class="page-title">반가워요</h1>
+        <p class="page-subtitle">앱인토스 개발을 시작해 보세요.</p>
+      </header>
+
+      <div class="app-actions">
+        <a
+          class="app-button app-button-primary"
+          href="https://developers-apps-in-toss.toss.im"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          개발자센터
+        </a>
+        <a
+          class="app-button app-button-primary"
+          href="https://techchat-apps-in-toss.toss.im"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          개발자 커뮤니티
+        </a>
+        {{SAMPLE_BUTTONS}}
+      </div>
+
+      <div class="app-logo-wrap">
+        <img
+          class="logo"
+          src="${import.meta.env.BASE_URL}appsintoss-logo.png"
+          alt="apps in toss"
+        />
+      </div>
+    </div>
+  `;
+
+  root.querySelectorAll("[data-page]").forEach((button) => {
+    button.addEventListener("click", () => {
+      currentPage = button.dataset.page;
+      render();
+    });
+  });
+}
+
+function render() {
+{{SAMPLE_ROUTES}}
+  renderHome();
+}
+
+render();

package/templates/js/src/main.js

@@ -0,0 +1,2 @@
+import "./index.css";
+import "./app.js";

package/templates/js/vite.config.js

@@ -0,0 +1,3 @@
+import { defineConfig } from "vite";
+
+export default defineConfig({});

package/templates/react/README.md

@@ -0,0 +1,26 @@
+# {{APP_NAME}}
+
+Apps in Toss 프로젝트입니다.
+
+## 시작하기
+
+```bash
+{{PM_DEV}}
+```
+
+## 배포하기
+
+- 앱인토스 배포 API 키는 [앱인토스 콘솔](https://apps-in-toss.toss.im/) > 워크스페이스 > API 키 > 콘솔 API 키 에서 발급받을 수 있어요.
+
+```bash
+{{PM_BUILD}}
+{{PM_DEPLOY}}
+```
+
+## 유용한 링크
+
+- [앱인토스 콘솔](https://apps-in-toss.toss.im/)
+- [앱인토스 개발자센터](https://developers-apps-in-toss.toss.im/)
+- [앱인토스 개발자 커뮤니티](https://techchat-apps-in-toss.toss.im/)
+
+AI를 사용하시는 경우 [여기](https://developers-apps-in-toss.toss.im/development/llms.html)를 확인해보세요.

package/templates/react/eslint.config.js

@@ -0,0 +1,30 @@
+import js from "@eslint/js";
+import globals from "globals";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+
+export default [
+  { ignores: ["dist"] },
+  {
+    files: ["**/*.{js,jsx}"],
+    ...js.configs.recommended,
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaFeatures: { jsx: true },
+      },
+    },
+    plugins: {
+      "react-hooks": reactHooks,
+      "react-refresh": reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      "react-refresh/only-export-components": [
+        "warn",
+        { allowConstantExport: true },
+      ],
+    },
+  },
+];

package/templates/react/granite.config.ts

@@ -0,0 +1,20 @@
+import { defineConfig } from "@apps-in-toss/web-framework/config";
+
+export default defineConfig({
+  appName: "{{APP_NAME}}",
+  brand: {
+    displayName: "앱 이름", // 화면에 노출될 앱의 한글 이름으로 바꿔주세요.
+    primaryColor: "{{PRIMARY_COLOR}}", // 화면에 노출될 앱의 기본 색상으로 바꿔주세요.
+    icon: "", // 화면에 노출될 앱의 아이콘 이미지 주소로 바꿔주세요.
+  },
+  web: {
+    host: "localhost",
+    port: 5173,
+    commands: {
+      dev: "vite dev",
+      build: "vite build",
+    },
+  },
+  permissions: [],
+  outdir: "dist",
+});

package/templates/react/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>AIT App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

package/templates/react/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "{{APP_NAME}}",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "granite dev",
+    "build": "ait build",
+    "deploy": "ait deploy",
+    "lint": "eslint .",
+    "format": "prettier --write ."
+  },
+  "dependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.21.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.21.0",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-react-refresh": "^0.4.19",
+    "globals": "^15.15.0",
+    "prettier": "^3.4.2",
+    "vite": "^6.2.0"
+  }
+}