npm - create-ait-app - Versions diffs - 0.0.2 → 0.0.3 - Mend

create-ait-app 0.0.2 → 0.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (112) hide show

package/templates/ts/eslint.config.js ADDED Viewed

@@ -0,0 +1,15 @@
+import js from "@eslint/js";
+import globals from "globals";
+import tseslint from "typescript-eslint";
+export default tseslint.config(
+  { ignores: ["dist"] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ["**/*.{ts,mts}"],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+);

package/templates/ts/granite.config.ts ADDED Viewed

@@ -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/ts/index.html ADDED Viewed

@@ -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.ts"></script>
+  </body>
+</html>

package/templates/ts/package.json ADDED Viewed

@@ -0,0 +1,22 @@
+{
+  "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 ."
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.21.0",
+    "eslint": "^9.21.0",
+    "globals": "^15.15.0",
+    "prettier": "^3.4.2",
+    "typescript": "~5.7.2",
+    "typescript-eslint": "^8.24.1",
+    "vite": "^6.2.0"
+  }
+}

package/templates/ts/public/appsintoss-logo.png ADDED Viewed

Binary file

package/templates/ts/samples/iaa/src/lib/inAppAds.ts ADDED Viewed

@@ -0,0 +1,132 @@
+import {
+  loadFullScreenAd,
+  showFullScreenAd,
+} from "@apps-in-toss/web-framework";
+type Listener = () => void;
+interface Reward {
+  unitType: string;
+  unitAmount: number;
+}
+interface InAppAdsState {
+  isAdLoaded: boolean;
+  isSupported: boolean;
+  lastReward: Reward | null;
+}
+// 참고문서: https://developers-apps-in-toss.toss.im/ads/intro.html
+export function createInAppAds(adGroupId: string) {
+  const state: InAppAdsState = {
+    isAdLoaded: false,
+    isSupported: false,
+    lastReward: null,
+  };
+  let onUpdate: Listener = () => {};
+  let unregister: (() => void) | null = 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: Listener) => {
+      onUpdate = listener;
+      return () => {
+        onUpdate = () => {};
+        try {
+          unregister?.();
+        } catch (error) {
+          console.error("광고 정리(cleanup) 중 에러:", error);
+        }
+      };
+    },
+  };
+}

package/templates/ts/samples/iaa/src/pages/InAppAdsPage.css ADDED Viewed

@@ -0,0 +1,72 @@
+.iaa-section-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.iaa-section {
+  padding: 20px 0;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 0;
+}
+.iaa-section-row {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+.iaa-section-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.iaa-section-title {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+  color: #333d4b;
+}
+.iaa-section-desc {
+  margin: 0;
+  font-size: 15px;
+  color: #8b95a1;
+}
+.iaa-section-button {
+  flex-shrink: 0;
+  height: fit-content;
+  padding: 10px 16px;
+  color: #1368cc;
+  background-color: #ecf3ff;
+  border: 0;
+  border-radius: 8px;
+  font-size: 15px;
+  font-weight: 500;
+  cursor: pointer;
+}
+.iaa-section-button:hover:not(:disabled) {
+  background-color: #d4e5ff;
+}
+.iaa-section-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.iaa-reward-message {
+  margin: 8px 0 0;
+  font-size: 15px;
+  color: #3182f6;
+}
+/* 인앱결제 페이지 "← 홈으로"와 동일 스타일 */
+.iaa-back-btn {
+  margin: 16px 0;
+}

package/templates/ts/samples/iaa/src/pages/InAppAdsPage.ts ADDED Viewed

@@ -0,0 +1,85 @@
+import { createInAppAds } from "../lib/inAppAds.ts";
+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: () => void) {
+  const root = document.getElementById("root");
+  if (!root) return;
+  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/ts/samples/iap/public/icon-document.png ADDED Viewed

Binary file

package/templates/ts/samples/iap/src/lib/inAppPurchase.ts ADDED Viewed

@@ -0,0 +1,114 @@
+import type { IapProductListItem } from "@apps-in-toss/web-framework";
+import { IAP } from "@apps-in-toss/web-framework";
+type Listener = () => void;
+interface InAppPurchaseState {
+  products: IapProductListItem[];
+  productsLoading: boolean;
+  purchasingSku: string | null;
+}
+// 참고문서: https://developers-apps-in-toss.toss.im/iap/intro.html
+export function createInAppPurchase() {
+  const state: InAppPurchaseState = {
+    products: [],
+    productsLoading: false,
+    purchasingSku: null,
+  };
+  let onUpdate: Listener = () => {};
+  function notify() {
+    onUpdate();
+  }
+  function grantProduct(orderId: string) {
+    // 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: string) {
+    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: Listener) => {
+      onUpdate = listener;
+      return () => {
+        onUpdate = () => {};
+      };
+    },
+  };
+}

package/templates/ts/samples/iap/src/pages/InAppPurchasePage.css ADDED Viewed

@@ -0,0 +1,115 @@
+.iap-empty-state {
+  height: 300px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+}
+.iap-empty-state-icon {
+  width: 64px;
+}
+.iap-empty-state-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+}
+.iap-empty-state-title {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 600;
+  color: #191f28;
+}
+.iap-empty-state-desc {
+  margin: 0;
+  font-size: 16px;
+  color: #4e5968;
+}
+.iap-empty-state-back-btn {
+  width: fit-content;
+  padding: 10px 16px;
+  border-radius: 10px;
+  background-color: #3e8cf5;
+  color: #fff;
+  border: none;
+  font-size: 14px;
+  cursor: pointer;
+}
+.iap-empty-state-back-btn:hover {
+  background-color: #2d7ae0;
+}
+.iap-product-list {
+  /* wrapper for product items */
+}
+.iap-product-item {
+  padding: 20px 0;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.iap-product-info {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+.iap-product-icon {
+  width: 36px;
+  height: 36px;
+  border-radius: 6px;
+  object-fit: cover;
+}
+.iap-product-details {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.iap-product-name {
+  font-size: 18px;
+  font-weight: 600;
+  color: #333d4b;
+}
+.iap-product-description,
+.iap-product-amount {
+  font-size: 15px;
+  color: #8b95a1;
+}
+.iap-product-buy-btn {
+  height: fit-content;
+  padding: 10px;
+  color: #1368cc;
+  background-color: #ecf3ff;
+  border: 0;
+  border-radius: 8px;
+  font-size: 15px;
+  font-weight: 500;
+  cursor: pointer;
+}
+.iap-product-buy-btn:hover:not(:disabled) {
+  background-color: #d4e5ff;
+}
+.iap-product-buy-btn:disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+}
+.iap-back-btn {
+  margin: 16px 0;
+}

package/templates/ts/samples/iap/src/pages/InAppPurchasePage.ts ADDED Viewed

@@ -0,0 +1,105 @@
+import { createInAppPurchase } from "../lib/inAppPurchase.ts";
+import "./InAppPurchasePage.css";
+function escapeHtml(value: unknown) {
+  return String(value)
+    .replaceAll("&", "&amp;")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#39;");
+}
+export function mountInAppPurchasePage(onBack: () => void) {
+  const root = document.getElementById("root");
+  if (!root) return;
+  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<HTMLButtonElement>("[data-sku]").forEach((button) => {
+      button.addEventListener("click", () => {
+        const sku = button.dataset.sku;
+        if (sku) iap.purchaseProduct(sku);
+      });
+    });
+  }
+  iap.subscribe(render);
+  iap.restorePendingOrders();
+  render();
+}