create-ait-app 0.0.2 → 0.0.3

package/templates/react/samples/iaa/src/hooks/useInAppAds.js

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

package/templates/react/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;
+}

package/templates/react/samples/iaa/src/pages/InAppAdsPage.jsx

@@ -0,0 +1,75 @@
+import { useInAppAds } from "../hooks/useInAppAds.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 InAppAdsPage({ onBack }) {
+  const interstitial = useInAppAds(TEST_INTERSTITIAL_ID);
+  const rewarded = useInAppAds(TEST_REWARDED_ID);
+
+  return (
+    <>
+      <div className="app-header">
+        <h1 className="page-title">인앱광고</h1>
+        {!interstitial.isSupported && (
+          <p className="page-subtitle">
+            이 환경에서는 인앱 광고를 사용할 수 없어요.
+          </p>
+        )}
+      </div>
+
+      <div className="iaa-section-list">
+        <div className="iaa-section">
+          <div className="iaa-section-row">
+            <div className="iaa-section-info">
+              <h2 className="iaa-section-title">전면형 광고</h2>
+              <p className="iaa-section-desc">화면 전체에 표시되는 광고</p>
+            </div>
+            <button
+              type="button"
+              className="iaa-section-button"
+              onClick={interstitial.showAd}
+              disabled={!interstitial.isAdLoaded}
+            >
+              {interstitial.isAdLoaded ? "보기" : "로딩 중"}
+            </button>
+          </div>
+        </div>
+
+        <div className="iaa-section">
+          <div className="iaa-section-row">
+            <div className="iaa-section-info">
+              <h2 className="iaa-section-title">보상형 광고</h2>
+              <p className="iaa-section-desc">시청 완료 시 보상을 받는 광고</p>
+            </div>
+            <button
+              type="button"
+              className="iaa-section-button"
+              onClick={rewarded.showAd}
+              disabled={!rewarded.isAdLoaded}
+            >
+              {rewarded.isAdLoaded ? "보기" : "로딩 중"}
+            </button>
+          </div>
+
+          {rewarded.lastReward && (
+            <p className="iaa-reward-message">
+              보상 획득: {rewarded.lastReward.unitType}{" "}
+              {rewarded.lastReward.unitAmount}개
+            </p>
+          )}
+        </div>
+      </div>
+
+      <button
+        type="button"
+        className="text-button iaa-back-btn"
+        onClick={onBack}
+      >
+        ← 홈으로
+      </button>
+    </>
+  );
+}

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