AppsInToss Fullstack Templates

🏗️ Harness Engineering

Quick Start

# 1. Clone
git clone <repo-url> my-mini-app && cd my-mini-app
npm install
# 2. Claude Code에서 바로 시작
> "출석체크 미니앱을 만들고 싶어"

권장 플러그인 (선택사항)

# superpowers — TDD, 코드리뷰, 체계적 계획
claude plugin marketplace add obra/superpowers-marketplace
claude plugin install superpowers@superpowers-marketplace
# ouroboros — 요구사항 인터뷰, 스펙 결정화
claude plugin marketplace add Q00/ouroboros
claude plugin install ouroboros@ouroboros

왜 이 템플릿인가?

빠른 시작

# 1. 템플릿 클론
git clone <this-repo> my-mini-app
cd my-mini-app
# 2. 의존성 설치
npm install
# 3. 개발 서버 실행
npm run dev
# → http://localhost:8080
# 4. 앱인토스 SDK 추가 (미니앱 개발 시)
npm install @apps-in-toss/web-framework

기술 스택

Core

AppsInToss SDK

프로젝트 구조

my-mini-app/
├── src/
│ ├── App.tsx # 앱 엔트리 (Router, Providers)
│ ├── main.tsx # React DOM 마운트
│ ├── components/
│ │ ├── ui/ # shadcn-ui 컴포넌트 (~50개)
│ │ └── ... # 커스텀 컴포넌트
│ ├── hooks/ # 커스텀 훅 (use-mobile, use-toast)
│ ├── lib/ # 유틸리티 (cn, utils)
│ ├── pages/ # 페이지 컴포넌트
│ └── test/ # 테스트 설정 & 파일
├── vite.config.ts # Vite 설정 (@ alias → src/)
├── tailwind.config.ts # Tailwind 설정 (HSL 컬러 시스템)
├── tsconfig.json # TypeScript 설정
│
└── apps-in-toss-examples-robin/ # SDK 레퍼런스 예제 (29개)
 ├── with-*/ # 23개 단일 SDK 기능 예제
 ├── scenario-*/ # 6개 풀스택 비즈니스 시나리오
 ├── _template/ # 새 예제 생성용 템플릿
 └── _scenario-template/ # 새 시나리오 생성용 템플릿

사용 가능한 스크립트

ait dev # Granite 개발 서버
ait build # Granite 프로덕션 빌드 (granite.config.ts 필요)

SDK 예제 카탈로그

단일 기능 예제 (with-*) — 23개

풀스택 시나리오 (scenario-*) — 6개

예제 실행 방법

# 단일 기능 예제
cd apps-in-toss-examples-robin/with-{feature}
npm install && npm run dev
# 풀스택 시나리오
cd apps-in-toss-examples-robin/scenario-{name}
npm run install:all && npm run dev

미니앱 만들기 가이드

Step 1: 보일러플레이트에서 시작

Step 2: SDK 기능 추가

// Dynamic import → isSupported 체크 → cleanup 패턴
const { someAPI } = await import('@apps-in-toss/web-framework');
if (someAPI.isSupported() !== true) { return; } // 웹에서는 mock 제공
const cleanup = someAPI({ onEvent, onError });
return () => cleanup?.();

Step 3: 비즈니스 로직 구성

Step 4: 자주 만드는 조합 (레시피)

Step 5: 출시 전 체크리스트 (비게임)

AI 에이전트 지원

공식 문서

라이선스