create-ait-app 0.0.2 → 0.0.3

package/templates/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/ts/src/app.ts

@@ -0,0 +1,60 @@
+import "./App.css";
+{{SAMPLE_IMPORTS}}
+
+let currentPage: string | null = null;
+
+function renderHome() {
+  const root = document.getElementById("root");
+  if (!root) return;
+
+  root.innerHTML = `
+    <div class="app">
+      <header class="app-header">
+        <h1 class="page-title">반가워요</h1>
+        <p class="page-subtitle">앱인토스 개발을 시작해 보세요.</p>
+      </header>
+
+      <div class="app-actions">
+        <a
+          class="app-button app-button-primary"
+          href="https://developers-apps-in-toss.toss.im"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          개발자센터
+        </a>
+        <a
+          class="app-button app-button-primary"
+          href="https://techchat-apps-in-toss.toss.im"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          개발자 커뮤니티
+        </a>
+        {{SAMPLE_BUTTONS}}
+      </div>
+
+      <div class="app-logo-wrap">
+        <img
+          class="logo"
+          src="${import.meta.env.BASE_URL}appsintoss-logo.png"
+          alt="apps in toss"
+        />
+      </div>
+    </div>
+  `;
+
+  root.querySelectorAll<HTMLButtonElement>("[data-page]").forEach((button) => {
+    button.addEventListener("click", () => {
+      currentPage = button.dataset.page ?? null;
+      render();
+    });
+  });
+}
+
+function render() {
+{{SAMPLE_ROUTES}}
+  renderHome();
+}
+
+render();

package/templates/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/ts/src/main.ts

@@ -0,0 +1,2 @@
+import "./index.css";
+import "./app.ts";

package/templates/ts/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

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

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

package/templates/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/ts/vite.config.ts

@@ -0,0 +1,3 @@
+import { defineConfig } from "vite";
+
+export default defineConfig({});