create-ait-app 0.0.2 → 0.0.3

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

package/templates/react-ts/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-ts/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-ts/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-ts/src/vite-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="vite/client" />
+
+declare module '*.css' {
+  const content: Record<string, string>;
+  export default content;
+}

package/templates/react-ts/tsconfig.app.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsBuildInfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

package/templates/react-ts/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/templates/react-ts/tsconfig.node.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsBuildInfo",
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/templates/react-ts/vite.config.ts

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

package/templates/react-ts-tds/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-tds/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-tds/package.json

@@ -0,0 +1,35 @@
+{
+  "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": {
+    "@emotion/react": "^11.0.0",
+    "@toss/tds-colors": "latest",
+    "@toss/tds-mobile": "latest",
+    "@toss/tds-mobile-ait": "latest",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.21.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.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",
+    "typescript": "~5.7.2",
+    "typescript-eslint": "^8.24.1",
+    "vite": "^6.2.0"
+  }
+}

package/templates/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)를 확인해보세요.