create-ait-app 0.0.1

package/template/__default/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/template/__default/src/App.tsx

@@ -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/template/__default/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/template/__default/src/main.tsx

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

package/template/__tds/__samples/iaa/src/hooks/useInAppAds.tsx

@@ -0,0 +1,132 @@
+import {
+  loadFullScreenAd,
+  showFullScreenAd,
+} from "@apps-in-toss/web-framework";
+import { useDialog, useToast } from "@toss/tds-mobile";
+import { useCallback, useEffect, useRef, useState } from "react";
+
+interface Reward {
+  unitType: string;
+  unitAmount: number;
+}
+
+interface UseInAppAdsReturn {
+  isAdLoaded: boolean;
+  isSupported: boolean;
+  showAd: () => void;
+  lastReward: Reward | null;
+}
+
+// 참고문서: https://developers-apps-in-toss.toss.im/ads/intro.html
+export function useInAppAds(adGroupId: string): UseInAppAdsReturn {
+  const dialog = useDialog();
+  const toast = useToast();
+
+  const [isAdLoaded, setIsAdLoaded] = useState(false);
+  const [lastReward, setLastReward] = useState<Reward | null>(null);
+  const [isSupported, setIsSupported] = useState(false);
+  const unregisterRef = useRef<(() => void) | null>(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) {
+      console.error("광고 로드 실패:", error);
+      setIsAdLoaded(false);
+    }
+  }, [adGroupId]);
+
+  useEffect(() => {
+    try {
+      setIsSupported(loadFullScreenAd.isSupported());
+
+      if (loadFullScreenAd.isSupported()) {
+        load();
+      }
+    } catch (error) {
+      dialog.openAlert({
+        title: "광고 지원 여부 확인 실패",
+        description:
+          "광고 지원 여부 확인 실패: \n\n- 인앱광고 기능은 브라우저가 아닌 샌드박스앱/토스앱에서 실행해주세요.\n\n" +
+          error,
+      });
+      setIsSupported(false);
+    }
+
+    return () => {
+      try {
+        unregisterRef.current?.();
+      } catch (error) {
+        console.error("광고 정리(cleanup) 중 에러:", error);
+      }
+    };
+  }, []);
+
+  /**
+   * 광고를 실제로 화면에 표시합니다.
+   * - 지원되지 않는 환경이거나, 아직 로드되지 않은 경우에는 아무 동작도 하지 않습니다.
+   */
+  const showAd = useCallback(() => {
+    if (!isSupported) {
+      console.info("현재 환경에서는 인앱 광고가 지원되지 않습니다.");
+      return;
+    }
+
+    if (!isAdLoaded) {
+      console.info("아직 광고가 로드되지 않았습니다.");
+      return;
+    }
+
+    try {
+      showFullScreenAd({
+        options: { adGroupId },
+        onEvent: (event) => {
+          switch (event.type) {
+            case "userEarnedReward":
+              toast.openToast(
+                `보상 획득: ${event.data.unitType} ${event.data.unitAmount}개`,
+              );
+              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/template/__tds/__samples/iaa/src/pages/InAppAdsPage.tsx

@@ -0,0 +1,92 @@
+import { colors } from "@toss/tds-colors";
+import { Button, List, ListRow, TextButton, Top } from "@toss/tds-mobile";
+
+import { useInAppAds } from "../hooks/useInAppAds";
+
+// TODO: 서비스를 출시하기 전에 앱인토스 콘솔에서 발급한 광고그룹ID로 변경해주세요.
+const TEST_INTERSTITIAL_ID = "ait-ad-test-interstitial-id";
+const TEST_REWARDED_ID = "ait-ad-test-rewarded-id";
+
+interface InAppAdsPageProps {
+  onBack: () => void;
+}
+
+export function InAppAdsPage({ onBack }: InAppAdsPageProps) {
+  const interstitial = useInAppAds(TEST_INTERSTITIAL_ID);
+  const rewarded = useInAppAds(TEST_REWARDED_ID);
+
+  return (
+    <>
+      <Top
+        title={<Top.TitleParagraph size={22}>인앱광고</Top.TitleParagraph>}
+        subtitleBottom={
+          !interstitial.isSupported && (
+            <Top.SubtitleParagraph
+              size={17}
+              style={{ overflow: `visible`, display: `block` }}
+            >
+              이 환경에서는 인앱 광고를 사용할 수 없어요.
+            </Top.SubtitleParagraph>
+          )
+        }
+      />
+
+      <List>
+        <ListRow
+          verticalPadding="large"
+          contents={
+            <ListRow.Texts
+              type="2RowTypeA"
+              top="전면형 광고"
+              topProps={{ color: colors.grey800, fontWeight: "bold" }}
+              bottom="화면 전체에 표시되는 광고"
+              bottomProps={{ color: colors.grey600 }}
+            />
+          }
+          right={
+            <Button
+              size="small"
+              variant="weak"
+              loading={!interstitial.isAdLoaded}
+              onClick={interstitial.showAd}
+            >
+              보기
+            </Button>
+          }
+        />
+
+        <ListRow
+          verticalPadding="large"
+          contents={
+            <ListRow.Texts
+              type="2RowTypeA"
+              top="보상형 광고"
+              topProps={{ color: colors.grey800, fontWeight: "bold" }}
+              bottom="시청 완료 시 보상을 받는 광고"
+              bottomProps={{ color: colors.grey600 }}
+            />
+          }
+          right={
+            <Button
+              size="small"
+              variant="weak"
+              loading={!rewarded.isAdLoaded}
+              onClick={rewarded.showAd}
+            >
+              보기
+            </Button>
+          }
+        />
+      </List>
+
+      <TextButton
+        style={{ padding: "16px 24px" }}
+        size="medium"
+        color={colors.blue500}
+        onClick={onBack}
+      >
+        ← 홈으로
+      </TextButton>
+    </>
+  );
+}

package/template/__tds/__samples/iap/src/hooks/useInAppPurchase.ts

@@ -0,0 +1,124 @@
+import type { IapProductListItem } from "@apps-in-toss/web-framework";
+import { IAP } from "@apps-in-toss/web-framework";
+import { useDialog } from "@toss/tds-mobile";
+import { useCallback, useEffect, useState } from "react";
+
+interface UseInAppPurchaseReturn {
+  products: IapProductListItem[];
+  purchaseProduct: (sku: string) => void;
+  restorePendingOrders: () => Promise<void>;
+  /** 상품 목록 조회 중일 때 true */
+  productsLoading: boolean;
+  /** 결제 진행 중인 상품의 sku. 없으면 null */
+  purchasingSku: string | null;
+}
+
+// 참고문서: https://developers-apps-in-toss.toss.im/iap/intro.html
+export function useInAppPurchase(): UseInAppPurchaseReturn {
+  const dialog = useDialog();
+
+  const [products, setProducts] = useState<IapProductListItem[]>([]);
+  const [productsLoading, setProductsLoading] = useState(false);
+  const [purchasingSku, setPurchasingSku] = useState<string | null>(null);
+
+  useEffect(() => {
+    async function fetchProducts() {
+      setProductsLoading(true);
+
+      try {
+        const response = await IAP.getProductItemList();
+        const fetchedProducts = response?.products ?? [];
+
+        setProducts(fetchedProducts);
+      } catch (error) {
+        dialog.openAlert({
+          title: "상품 목록 조회 실패",
+          description: `상품 목록 조회 실패: \n\n- 앱인토스 콘솔에서 미니앱을 생성후 인앱상품을 등록해주세요.\n- 인앱결제 기능은 브라우저가 아닌 샌드박스앱/토스앱에서 실행해주세요.\n\n${error}`,
+        });
+      } finally {
+        setProductsLoading(false);
+      }
+    }
+
+    fetchProducts();
+  }, []);
+
+  const grantProduct = useCallback((orderId: string) => {
+    // TODO: 여기에 상품 지급 로직을 작성해주세요.
+
+    console.info(`상품 지급 처리: ${orderId}`);
+  }, []);
+
+  /**
+   * 인앱상품을 결제합니다.
+   * 앱에서 호출해주세요.
+   * @param sku - 결제할 상품의 고유 식별자
+   * @returns void
+   */
+  const purchaseProduct = useCallback(
+    (sku: string) => {
+      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],
+  );
+
+  /**
+   * 결제 완료되었지만 상품 지급이 이뤄지지 않은 미결 주문을 처리합니다.
+   * 앱에서 호출해주세요.
+   * @returns void
+   */
+  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/template/__tds/__samples/iap/src/pages/InAppPurchasePage.tsx

@@ -0,0 +1,122 @@
+import { colors } from "@toss/tds-colors";
+import {
+  Asset,
+  Button,
+  List,
+  ListRow,
+  Result,
+  Text,
+  TextButton,
+  Top,
+} from "@toss/tds-mobile";
+import { useEffect } from "react";
+
+import { useInAppPurchase } from "../hooks/useInAppPurchase";
+
+interface InAppPurchasePageProps {
+  onBack: () => void;
+}
+
+export function InAppPurchasePage({ onBack }: InAppPurchasePageProps) {
+  const {
+    products,
+    purchaseProduct,
+    restorePendingOrders,
+    productsLoading,
+    purchasingSku,
+  } = useInAppPurchase();
+
+  useEffect(() => {
+    restorePendingOrders();
+  }, [restorePendingOrders]);
+
+  if (productsLoading) {
+    return (
+      <>
+        <Top
+          title={<Top.TitleParagraph size={22}>인앱결제</Top.TitleParagraph>}
+        />
+
+        <Text style={{ padding: 24 }}>상품을 불러오는 중...</Text>
+      </>
+    );
+  }
+
+  if (products.length === 0) {
+    return (
+      <>
+        <Top
+          title={<Top.TitleParagraph size={22}>인앱결제</Top.TitleParagraph>}
+        />
+
+        <Result
+          style={{ height: 300 }}
+          title="인앱 상품이 없어요"
+          description="콘솔 '인앱 결제' 메뉴에서 상품을 등록해 주세요."
+          figure={
+            <Asset.Image
+              frameShape={Asset.frameShape.CleanW60}
+              src={`${import.meta.env.BASE_URL}icon-document.png`}
+              aria-hidden={true}
+            />
+          }
+          button={<Result.Button onClick={onBack}>홈으로</Result.Button>}
+        />
+      </>
+    );
+  }
+
+  return (
+    <>
+      <Top
+        title={<Top.TitleParagraph size={22}>인앱결제</Top.TitleParagraph>}
+      />
+
+      <List>
+        {products.map((product) => (
+          <ListRow
+            key={product.sku}
+            verticalPadding="large"
+            left={
+              <ListRow.AssetImage
+                src={product.iconUrl}
+                shape="squircle"
+                size="xsmall"
+              />
+            }
+            contents={
+              <ListRow.Texts
+                type="3RowTypeA"
+                top={product.displayName}
+                topProps={{ color: colors.grey800, fontWeight: "bold" }}
+                middle={product.description}
+                middleProps={{ color: colors.grey600 }}
+                bottom={product.displayAmount}
+                bottomProps={{ color: colors.grey600 }}
+              />
+            }
+            right={
+              <Button
+                size="small"
+                variant="weak"
+                loading={purchasingSku !== null}
+                onClick={() => purchaseProduct(product.sku)}
+              >
+                구매하기
+              </Button>
+            }
+          />
+        ))}
+      </List>
+
+      <TextButton
+        style={{ padding: "16px 24px" }}
+        size="medium"
+        color={colors.blue500}
+        onClick={onBack}
+      >
+        ← 홈으로
+      </TextButton>
+    </>
+  );
+}

package/template/__tds/src/App.css

@@ -0,0 +1,13 @@
+#root {
+  width: 100%;
+  min-height: 100vh;
+  box-sizing: border-box;
+}
+
+@media (min-width: 481px) {
+  #root {
+    background-color: #ffffff !important;
+    max-width: 480px;
+    margin: 0 auto;
+  }
+}