create-ait-app 0.0.1 → 0.0.3

package/templates/react/samples/iap/src/hooks/useInAppPurchase.js

@@ -0,0 +1,95 @@
+import { IAP } from "@apps-in-toss/web-framework";
+import { useCallback, useEffect, useState } from "react";
+
+// 참고문서: https://developers-apps-in-toss.toss.im/iap/intro.html
+export function useInAppPurchase() {
+  const [products, setProducts] = useState([]);
+  const [productsLoading, setProductsLoading] = useState(false);
+  const [purchasingSku, setPurchasingSku] = useState(null);
+
+  useEffect(() => {
+    async function fetchProducts() {
+      setProductsLoading(true);
+
+      try {
+        const response = await IAP.getProductItemList();
+        const fetchedProducts = response?.products ?? [];
+
+        setProducts(fetchedProducts);
+      } catch (error) {
+        alert(
+          "상품 목록 조회 실패: \n\n-앱인토스 콘솔에서 미니앱을 생성후 인앱상품을 등록해주세요\n- 인앱결제 기능은 브라우저가 아닌 샌드박스앱/토스앱에서 실행해주세요\n\n" +
+            error,
+        );
+      } finally {
+        setProductsLoading(false);
+      }
+    }
+
+    fetchProducts();
+  }, []);
+
+  const grantProduct = useCallback((orderId) => {
+    // TODO: 여기에 상품 지급 로직을 작성해주세요.
+    console.info(`상품 지급 처리: ${orderId}`);
+  }, []);
+
+  const purchaseProduct = useCallback(
+    (sku) => {
+      setPurchasingSku(sku);
+
+      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}이 결제되었어요.`);
+            }
+
+            setPurchasingSku(null);
+            cleanup();
+          },
+          onError: (error) => {
+            console.error("인앱결제 실패:", error);
+            setPurchasingSku(null);
+            cleanup();
+          },
+        });
+      } catch (error) {
+        console.error("인앱결제 실패:", error);
+        setPurchasingSku(null);
+      }
+    },
+    [grantProduct],
+  );
+
+  const restorePendingOrders = useCallback(async () => {
+    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);
+    }
+  }, [grantProduct]);
+
+  return {
+    products,
+    purchaseProduct,
+    restorePendingOrders,
+    productsLoading,
+    purchasingSku,
+  };
+}

package/templates/react/samples/iap/src/pages/InAppPurchasePage.css

@@ -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/react/samples/iap/src/pages/InAppPurchasePage.jsx

@@ -0,0 +1,115 @@
+import { useEffect } from "react";
+
+import { useInAppPurchase } from "../hooks/useInAppPurchase.js";
+import "./InAppPurchasePage.css";
+
+export function InAppPurchasePage({ onBack }) {
+  const {
+    products,
+    purchaseProduct,
+    restorePendingOrders,
+    productsLoading,
+    purchasingSku,
+  } = useInAppPurchase();
+
+  useEffect(() => {
+    restorePendingOrders();
+  }, [restorePendingOrders]);
+
+  if (productsLoading) {
+    return (
+      <>
+        <div className="app-header">
+          <h1 className="page-title">인앱결제</h1>
+        </div>
+
+        <p>상품을 불러오는 중...</p>
+      </>
+    );
+  }
+
+  if (products.length === 0) {
+    return (
+      <>
+        <div className="app-header">
+          <h1 className="page-title">인앱결제</h1>
+        </div>
+
+        <div className="iap-empty-state">
+          <img
+            className="iap-empty-state-icon"
+            src="icon-document.png"
+            aria-hidden
+            alt=""
+          />
+          <div className="iap-empty-state-content">
+            <h2 className="iap-empty-state-title">인앱 상품이 없어요</h2>
+            <p className="iap-empty-state-desc">
+              콘솔 '인앱 결제' 메뉴에서 상품을 등록해 주세요.
+            </p>
+          </div>
+
+          <button
+            type="button"
+            className="iap-empty-state-back-btn"
+            onClick={onBack}
+          >
+            홈으로
+          </button>
+        </div>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <div className="app-header">
+        <h1 className="page-title">인앱결제</h1>
+      </div>
+
+      <div className="iap-product-list">
+        {products.map((product) => (
+          <div key={product.sku} className="iap-product-item">
+            <div className="iap-product-info">
+              {product.iconUrl && (
+                <img
+                  className="iap-product-icon"
+                  src={product.iconUrl}
+                  alt={product.displayName}
+                />
+              )}
+              <div className="iap-product-details">
+                <div className="iap-product-name">{product.displayName}</div>
+                {product.description && (
+                  <div className="iap-product-description">
+                    {product.description}
+                  </div>
+                )}
+                <div className="iap-product-amount">
+                  {product.displayAmount}
+                </div>
+              </div>
+            </div>
+
+            <button
+              type="button"
+              className="iap-product-buy-btn"
+              onClick={() => purchaseProduct(product.sku)}
+              disabled={purchasingSku !== null}
+            >
+              {purchasingSku === product.sku ? "결제 처리 중" : "구매하기"}
+            </button>
+          </div>
+        ))}
+
+        <button
+          type="button"
+          className="text-button iap-back-btn"
+          onClick={onBack}
+        >
+          ← 홈으로
+        </button>
+      </div>
+    </>
+  );
+}

package/templates/react/src/App.css

@@ -0,0 +1,104 @@
+#root {
+  width: 100%;
+  min-height: 100vh;
+  box-sizing: border-box;
+  padding: 24px;
+}
+
+@media (min-width: 481px) {
+  #root {
+    background-color: #ffffff;
+    max-width: 480px;
+    margin: 0 auto;
+  }
+}
+
+.app {
+  display: flex;
+  flex-direction: column;
+}
+
+.app-header {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 24px 0;
+}
+
+.page-title {
+  margin: 0;
+  font-size: 24px;
+  font-weight: 600;
+  color: #333d4b;
+}
+
+.page-subtitle {
+  margin: 0;
+  font-size: 18px;
+  color: #4e5968;
+}
+
+.app-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 24px 0;
+}
+
+.app-button {
+  width: 100%;
+  border: none;
+  border-radius: 16px;
+  padding: 20px;
+  font-size: 18px;
+  font-weight: 500;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  text-decoration: none;
+}
+
+.app-button:active {
+  transform: scale(0.96);
+  transition: transform 0.1s ease;
+}
+
+.app-button-primary {
+  background-color: #ebf2ff;
+  color: #2272eb;
+}
+
+.app-button-primary:hover {
+  background-color: #c9e2ff;
+}
+
+.app-button-ghost {
+  background-color: #f2f4f6;
+  color: #4b5563;
+}
+
+.app-button-ghost:hover {
+  background-color: #e5e8eb;
+}
+
+.text-button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 18px;
+  color: #3182f6;
+}
+
+.app-logo-wrap {
+  position: fixed;
+  bottom: 24px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.logo {
+  width: 160px;
+  height: auto;
+}

package/templates/react/src/App.jsx

@@ -0,0 +1,45 @@
+import "./App.css";
+{{SAMPLE_IMPORTS}}
+
+
+function App() {
+  {{PAGE_STATE_AND_ROUTES}}
+  return (
+    <div className="app">
+      <header className="app-header">
+        <h1 className="page-title">반가워요</h1>
+        <p className="page-subtitle">앱인토스 개발을 시작해 보세요.</p>
+      </header>
+
+      <div className="app-actions">
+        <a
+          className="app-button app-button-primary"
+          href="https://developers-apps-in-toss.toss.im"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          개발자센터
+        </a>
+        <a
+          className="app-button app-button-primary"
+          href="https://techchat-apps-in-toss.toss.im"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          개발자 커뮤니티
+        </a>
+        {{SAMPLE_BUTTONS}}
+      </div>
+
+      <div className="app-logo-wrap">
+        <img
+          className="logo"
+          src={`${import.meta.env.BASE_URL}appsintoss-logo.png`}
+          alt="apps in toss"
+        />
+      </div>
+    </div>
+  );
+}
+
+export default App;

package/templates/react/src/index.css

@@ -0,0 +1,27 @@
+:root {
+  font-family: sans-serif;
+}
+
+* {
+  -webkit-tap-highlight-color: transparent;
+}
+
+body {
+  margin: 0;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+@media (min-width: 481px) {
+  body {
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    background-color: #f5f5f5;
+  }
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}

package/templates/react/src/main.jsx

@@ -0,0 +1,10 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "./index.css";
+import App from "./App.jsx";
+
+createRoot(document.getElementById("root")).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);

package/templates/react/vite.config.js

@@ -0,0 +1,6 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  plugins: [react()],
+});

package/templates/react-ts/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-ts/eslint.config.js

@@ -0,0 +1,28 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)

package/templates/react-ts/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-ts/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <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.tsx"></script>
+  </body>
+</html>

package/templates/react-ts/samples/iaa/src/pages/InAppAdsPage.css

@@ -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;
+}