create-dailyshot-web-app 1.0.0

package/index.js

@@ -0,0 +1,197 @@
+#!/usr/bin/env node
+
+import { execSync, spawnSync } from 'child_process';
+import fs from 'fs';
+import path from 'path';
+import readline from 'readline';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const CYAN = '\x1b[36m';
+const GREEN = '\x1b[32m';
+const RED = '\x1b[31m';
+const YELLOW = '\x1b[33m';
+const BOLD = '\x1b[1m';
+const RESET = '\x1b[0m';
+
+function logSuccess(msg) {
+  console.log(`${GREEN}✓${RESET} ${msg}`);
+}
+
+function logError(msg) {
+  console.error(`${RED}✗${RESET} ${msg}`);
+}
+
+function logStep(msg) {
+  console.log(`\n${CYAN}${BOLD}${msg}${RESET}`);
+}
+
+async function prompt(question) {
+  const rl = readline.createInterface({ input: process.stdin, output: process.stdout });
+  return new Promise((resolve) => {
+    rl.question(question, (answer) => {
+      rl.close();
+      resolve(answer.trim());
+    });
+  });
+}
+
+function copyDir(src, dest) {
+  fs.mkdirSync(dest, { recursive: true });
+  const entries = fs.readdirSync(src, { withFileTypes: true });
+
+  for (const entry of entries) {
+    const srcPath = path.join(src, entry.name);
+    const destPath = path.join(dest, entry.name);
+
+    if (entry.isDirectory()) {
+      copyDir(srcPath, destPath);
+    } else {
+      fs.copyFileSync(srcPath, destPath);
+    }
+  }
+}
+
+async function main() {
+  console.log(`
+${CYAN}${BOLD}  ╔══════════════════════════════════════════╗
+  ║   create-dailyshot-web-app               ║
+  ║   Next.js + TypeScript + Tailwind CSS    ║
+  ║   with Dailyshot Design System           ║
+  ╚══════════════════════════════════════════╝${RESET}
+`);
+
+  // 1. Get project name
+  let projectName = process.argv[2];
+
+  if (!projectName) {
+    projectName = await prompt(`${BOLD}프로젝트 이름:${RESET} `);
+  }
+
+  if (!projectName) {
+    logError('프로젝트 이름을 입력해주세요.');
+    process.exit(1);
+  }
+
+  // Validate project name
+  if (!/^[a-zA-Z0-9_-]+$/.test(projectName)) {
+    logError('프로젝트 이름은 영문, 숫자, 하이픈, 언더스코어만 사용할 수 있습니다.');
+    process.exit(1);
+  }
+
+  const projectDir = path.resolve(process.cwd(), projectName);
+
+  // 2. Check if directory exists
+  if (fs.existsSync(projectDir)) {
+    logError(`"${projectName}" 디렉토리가 이미 존재합니다.`);
+    process.exit(1);
+  }
+
+  logStep('1. 프로젝트 생성 중...');
+
+  // 3. Copy template
+  const templateDir = path.resolve(__dirname, 'template');
+  copyDir(templateDir, projectDir);
+  logSuccess('템플릿 파일 복사 완료');
+
+  // 4. Rename dotfiles
+  const dotfileRenames = [
+    ['gitignore', '.gitignore'],
+    ['eslintrc.cjs', '.eslintrc.cjs'],
+    ['prettierrc', '.prettierrc'],
+  ];
+
+  for (const [from, to] of dotfileRenames) {
+    const src = path.join(projectDir, from);
+    if (fs.existsSync(src)) {
+      fs.renameSync(src, path.join(projectDir, to));
+    }
+  }
+
+  // 5. Rename _claude to .claude
+  const claudeSrc = path.join(projectDir, '_claude');
+  if (fs.existsSync(claudeSrc)) {
+    fs.renameSync(claudeSrc, path.join(projectDir, '.claude'));
+  }
+  logSuccess('설정 파일 구성 완료');
+
+  // 6. Update package.json with project name
+  const pkgPath = path.join(projectDir, 'package.json');
+  const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf8'));
+  pkg.name = projectName;
+  fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2) + '\n');
+  logSuccess(`package.json 프로젝트명 설정: ${projectName}`);
+
+  // 7. Git init
+  logStep('2. Git 저장소 초기화 중...');
+  try {
+    execSync('git init', { cwd: projectDir, stdio: 'pipe' });
+    logSuccess('Git 저장소 초기화 완료');
+  } catch {
+    console.log(`${YELLOW}⚠${RESET} Git 초기화 실패 - 건너뜁니다.`);
+  }
+
+  // 8. Install dependencies
+  logStep('3. 의존성 설치 중...');
+
+  // Detect package manager
+  const userAgent = process.env.npm_config_user_agent || '';
+  let pkgManager = 'pnpm';
+  if (userAgent.startsWith('yarn')) {
+    pkgManager = 'yarn';
+  } else if (userAgent.startsWith('npm')) {
+    pkgManager = 'npm';
+  }
+
+  const installResult = spawnSync(pkgManager, ['install'], {
+    cwd: projectDir,
+    stdio: 'inherit',
+  });
+
+  if (installResult.status === 0) {
+    logSuccess('의존성 설치 완료');
+  } else {
+    console.log(`${YELLOW}⚠${RESET} 의존성 설치 실패 - 직접 설치해주세요.`);
+  }
+
+  // 9. Initial commit
+  try {
+    execSync('git add -A', { cwd: projectDir, stdio: 'pipe' });
+    execSync('git commit -m "Initial commit: Dailyshot web scaffolding"', {
+      cwd: projectDir,
+      stdio: 'pipe',
+    });
+    logSuccess('초기 커밋 생성 완료');
+  } catch {
+    // skip if git commit fails
+  }
+
+  // 10. Done!
+  console.log(`
+${GREEN}${BOLD}✨ 프로젝트가 생성되었습니다!${RESET}
+
+  ${BOLD}cd ${projectName}${RESET}
+  ${BOLD}pnpm dev${RESET}
+
+${CYAN}포함된 설정:${RESET}
+  • Next.js 14 (App Router)
+  • TypeScript (strict mode)
+  • Tailwind CSS + Dailyshot 디자인 시스템
+  • ESLint + Prettier
+  • shadcn/ui (new-york style)
+  • Claude AI 개발 가이드 (.claude/CLAUDE.md)
+
+${CYAN}디자인 시스템:${RESET}
+  • typo-* 타이포그래피 클래스 (typo-headline1-600, typo-body1-400, ...)
+  • 커스텀 컬러 팔레트 (orange, blue, green, red, purple, ...)
+  • 반응형 브레이크포인트 (desktop:, tablet:, mobile:)
+  • 커스텀 애니메이션 (accordion, dialog, sheet, tooltip, ...)
+`);
+}
+
+main().catch((e) => {
+  logError(e.message);
+  process.exit(1);
+});

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "create-dailyshot-web-app",
+  "version": "1.0.0",
+  "description": "Dailyshot 디자인 시스템이 적용된 Next.js 프로젝트 스캐폴딩 CLI",
+  "type": "module",
+  "bin": {
+    "create-dailyshot-web-app": "./index.js"
+  },
+  "files": [
+    "index.js",
+    "template"
+  ],
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "keywords": [
+    "dailyshot",
+    "nextjs",
+    "scaffolding",
+    "tailwindcss",
+    "typescript"
+  ],
+  "license": "PRIVATE"
+}

package/template/_claude/CLAUDE.md

@@ -0,0 +1,299 @@
+# Dailyshot Web Scaffolding - Claude 개발 가이드
+
+이 파일은 Dailyshot 프로젝트의 Claude AI 개발 지침을 정의합니다.
+
+## 프로젝트 개요
+
+- **Tech Stack**: Next.js 14, React 18, TypeScript, Tailwind CSS, shadcn/ui
+- **패키지 매니저**: pnpm
+- **라우팅**: Next.js App Router (`src/app/`)
+- **스타일링**: Tailwind CSS + Dailyshot 커스텀 디자인 시스템
+- **폰트**: Pretendard Variable (CDN)
+
+## 🔴 CRITICAL: Dailyshot 디자인 시스템
+
+프로젝트의 일관된 디자인을 위해 정의된 Tailwind CSS 디자인 시스템을 **반드시** 사용해야 합니다.
+
+### 1. 타이포그래피 시스템 (typo-* 클래스)
+
+기본 Tailwind의 `text-sm`, `text-lg` 등을 **절대 사용하지 마세요**. 반드시 `typo-*` 클래스를 사용하세요.
+
+#### 사용법: `typo-{variant}-{weight}`
+
+| Variant | Font Size | Line Height | Letter Spacing | 용도 |
+|---------|-----------|-------------|----------------|------|
+| `display` | 32px | 44px | -0.3px | 대형 제목, 히어로 텍스트 |
+| `headline1` | 24px | 28px | -0.3px | 페이지 제목 |
+| `headline2` | 20px | 24px | -0.3px | 섹션 제목 |
+| `title1` | 18px | 24px | -0.3px | 서브 제목, 카드 제목 |
+| `body1` | 16px | 24px | 0px | 본문 텍스트 (기본) |
+| `body2` | 14px | 20px | 0px | 보조 텍스트 |
+| `caption` | 12px | 16px | 0px | 캡션, 도움말 텍스트 |
+| `tag` | 10px | 12px | 0px | 태그, 뱃지 |
+| `content1` | 16px | 26px | 0px | 긴 컨텐츠 읽기용 |
+| `content2` | 15px | 22px | 0px | 컨텐츠 읽기용 (작음) |
+
+#### Font Weight
+
+| Weight | 값 | 설명 |
+|--------|-----|------|
+| `300` | Light | 얇은 텍스트 |
+| `400` | Regular | 기본 텍스트 |
+| `500` | Medium | 중간 굵기 |
+| `600` | SemiBold | 강조 텍스트 |
+| `700` | Bold | 굵은 텍스트 |
+
+#### 사용 예시
+
+```tsx
+{/* ✅ 올바른 사용 */}
+<h1 className="typo-display-700">대형 제목</h1>
+<h2 className="typo-headline1-600">페이지 제목</h2>
+<h3 className="typo-headline2-600">섹션 제목</h3>
+<h4 className="typo-title1-500">서브 제목</h4>
+<p className="typo-body1-400">본문 텍스트</p>
+<p className="typo-body2-400">보조 텍스트</p>
+<span className="typo-caption-400">캡션</span>
+<span className="typo-tag-500">태그</span>
+<article className="typo-content1-400">긴 읽기 컨텐츠</article>
+
+{/* ❌ 금지 - 기본 Tailwind 타이포그래피 */}
+<p className="text-sm">...</p>
+<p className="text-lg font-bold">...</p>
+<p className="text-[16px] leading-6">...</p>
+<p className="text-base">...</p>
+```
+
+#### 전체 클래스 목록 (50개)
+
+```
+typo-display-300, typo-display-400, typo-display-500, typo-display-600, typo-display-700
+typo-headline1-300, typo-headline1-400, typo-headline1-500, typo-headline1-600, typo-headline1-700
+typo-headline2-300, typo-headline2-400, typo-headline2-500, typo-headline2-600, typo-headline2-700
+typo-title1-300, typo-title1-400, typo-title1-500, typo-title1-600, typo-title1-700
+typo-body1-300, typo-body1-400, typo-body1-500, typo-body1-600, typo-body1-700
+typo-body2-300, typo-body2-400, typo-body2-500, typo-body2-600, typo-body2-700
+typo-caption-300, typo-caption-400, typo-caption-500, typo-caption-600, typo-caption-700
+typo-tag-300, typo-tag-400, typo-tag-500, typo-tag-600, typo-tag-700
+typo-content1-300, typo-content1-400, typo-content1-500, typo-content1-600, typo-content1-700
+typo-content2-300, typo-content2-400, typo-content2-500, typo-content2-600, typo-content2-700
+```
+
+### 2. 컬러 시스템
+
+정의된 컬러 팔레트만 사용하세요. **임의 색상값 사용 금지.**
+
+#### 기본 색상
+
+| 클래스 | 값 | 용도 |
+|--------|-----|------|
+| `white` | #ffffff | 기본 배경 |
+| `black` | #1e1e1e | 기본 텍스트 |
+
+#### 그레이스케일
+
+| 클래스 | 값 | 용도 |
+|--------|-----|------|
+| `gray-50` | #FBFBFB | 가장 밝은 배경 |
+| `gray-100` | #F7F7F7 | 밝은 배경 |
+| `gray-200` | #EFEFEF | 디바이더, 배경 |
+| `gray-300` | #E3E3E3 | 보더 |
+| `gray-400` | #C4C4C4 | 비활성 아이콘 |
+| `gray-500` | #A8A8A8 | 플레이스홀더 |
+| `gray-600` | #7B7B7B | 보조 텍스트 |
+| `gray-700` | #707070 | 보조 텍스트 (진) |
+| `gray-800` | #5D5D5D | 강조 보조 텍스트 |
+| `gray-900` | #464646 | 진한 텍스트 |
+| `gray-950` | #282828 | 가장 진한 텍스트 |
+
+#### 메인 컬러
+
+| 색상 | 범위 | 대표값 (500) | 용도 |
+|------|------|-------------|------|
+| `orange` | 50-900 | #FE5000 | **프라이머리 컬러**, CTA, 강조 |
+| `blue` | 50-950 | #5566FB | 정보, 링크 |
+| `green` | 50-900 | #01B9A0 | 성공, 긍정 |
+| `red` | 50-900 | #FF624D | 에러, 경고, 위험 |
+| `purple` | 50-900 | #9C53EA | 특별, 프리미엄 |
+| `yellow` | 50, 100, 500 | #FFC215 | 주의, 별점 |
+
+#### 라이트 컬러
+
+| 색상 | 범위 | 용도 |
+|------|------|------|
+| `light-orange` | 50-600 | 오렌지 배경, 하이라이트 |
+| `light-blue` | 50-400 | 블루 배경 |
+| `light-purple` | 50-400 | 퍼플 배경 |
+
+#### 특수 색상
+
+| 색상 | 범위 | 용도 |
+|------|------|------|
+| `paper` | 50-300 | 빈티지/페이퍼 느낌 |
+| `glow` | 100-300 | 글로우/하이라이트 효과 |
+
+#### 알파 색상
+
+| 클래스 | 투명도 | 용도 |
+|--------|--------|------|
+| `black-alpha-4` | 4% | 매우 옅은 오버레이 |
+| `black-alpha-30` | 30% | 가벼운 오버레이 |
+| `black-alpha-40` | 40% | 중간 오버레이 |
+| `black-alpha-55` | 55% | 진한 오버레이 |
+| `black-alpha-75` | 75% | 매우 진한 오버레이 |
+
+#### 사용 예시
+
+```tsx
+{/* ✅ 올바른 사용 */}
+<div className="bg-white text-black">...</div>
+<div className="bg-orange-500 text-white">CTA 버튼</div>
+<div className="bg-gray-100 border border-gray-300">카드</div>
+<span className="text-red-500">에러 메시지</span>
+<div className="bg-light-orange-100">하이라이트 영역</div>
+<div className="bg-black-alpha-40">오버레이</div>
+
+{/* ❌ 금지 - 임의 색상값 */}
+<div className="bg-[#FE5000]">...</div>
+<div className="text-[#1234ff]">...</div>
+<div className="border-[rgb(200,200,200)]">...</div>
+```
+
+### 3. 반응형 브레이크포인트
+
+기본 Tailwind 브레이크포인트(`sm:`, `md:`, `lg:`, `xl:`)를 **사용하지 마세요**.
+
+| 브레이크포인트 | 조건 | 용도 |
+|---------------|------|------|
+| `desktop:` | min-width: 1025px | 데스크탑 전용 스타일 |
+| `tablet:` | max-width: 768px | 태블릿 이하 스타일 |
+| `mobile:` | max-width: 480px | 모바일 전용 스타일 |
+
+```tsx
+{/* ✅ 올바른 사용 */}
+<div className="p-6 tablet:p-4 mobile:p-2">...</div>
+<div className="grid grid-cols-3 tablet:grid-cols-2 mobile:grid-cols-1">...</div>
+<div className="hidden desktop:block">데스크탑에서만 보임</div>
+
+{/* ❌ 금지 - 기본 Tailwind 브레이크포인트 */}
+<div className="md:p-4 lg:p-6">...</div>
+<div className="sm:grid-cols-1 lg:grid-cols-3">...</div>
+```
+
+### 4. 애니메이션
+
+정의된 애니메이션 클래스를 사용하세요.
+
+| 애니메이션 | 용도 |
+|-----------|------|
+| `animate-accordion-down` / `animate-accordion-up` | 아코디언 열기/닫기 |
+| `animate-dialog-overlay-in` / `animate-dialog-overlay-out` | 다이얼로그 오버레이 |
+| `animate-dialog-content-in` / `animate-dialog-content-out` | 다이얼로그 컨텐츠 |
+| `animate-dropdown-in` / `animate-dropdown-out` | 드롭다운 메뉴 |
+| `animate-sheet-in-from-{top,bottom,left,right}` | 시트 열기 |
+| `animate-sheet-out-to-{top,bottom,left,right}` | 시트 닫기 |
+| `animate-tooltip-in` / `animate-tooltip-out` | 툴팁 |
+| `animate-skeleton-pulse` | 스켈레톤 로딩 |
+
+### 5. 커스텀 유틸리티 클래스
+
+| 클래스 | 용도 |
+|--------|------|
+| `absolute-center` | 절대 위치 + 중앙 정렬 (flex) |
+| `scrollbar-hide` | 스크롤바 숨김 (cross-browser) |
+| `no-scrollbar` | overflow auto + 스크롤바 숨김 |
+| `visually-hidden` | 시각적으로 숨김 (접근성 유지) |
+| `font-pretendard` | Pretendard 폰트 적용 |
+
+### 6. 커스텀 미디어 쿼리 Variant
+
+| Variant | 조건 | 용도 |
+|---------|------|------|
+| `can-hover:` | `@media (hover: hover)` | 호버 가능한 디바이스에서만 |
+| `can-active:` | `@media (pointer: fine)` | 정밀 포인터 디바이스에서만 |
+
+```tsx
+{/* 마우스가 있는 디바이스에서만 호버 효과 */}
+<button className="can-hover:hover:bg-orange-50">버튼</button>
+```
+
+## 코드 스타일 규칙
+
+### Import 규칙
+
+- **절대 경로 사용 필수**: 같은 폴더를 제외하고 항상 `@/` 접두사 사용
+- ✅ `import { cn } from '@/lib/utils';`
+- ❌ `import { cn } from '../../lib/utils';`
+
+### 네이밍 규칙
+
+| 대상 | 규칙 | 예시 |
+|------|------|------|
+| interface | PascalCase (I 접두사 금지) | `UserProfile` (❌ `IUserProfile`) |
+| type alias | PascalCase (T 접두사 금지) | `ButtonVariant` (❌ `TButtonVariant`) |
+| 변수 | camelCase / PascalCase / UPPER_CASE | `userName`, `Button`, `MAX_COUNT` |
+| 함수 | camelCase / PascalCase | `getUserName`, `Button` |
+| 컴포넌트 | PascalCase | `ProductCard` |
+
+### Prettier 포매팅
+
+| 설정 | 값 |
+|------|-----|
+| printWidth | 100 |
+| singleQuote | true |
+| semi | true |
+| trailingComma | all |
+| tabWidth | 2 |
+| arrowParens | always |
+
+### 유틸리티 함수
+
+```tsx
+// cn() - Tailwind 클래스 병합 유틸리티
+import { cn } from '@/lib/utils';
+
+// 조건부 클래스 적용
+<div className={cn('typo-body1-400 text-black', isActive && 'text-orange-500')}>
+  텍스트
+</div>
+```
+
+## Frontend 코드 품질 가이드라인
+
+### 핵심 원칙
+
+1. **가독성**: 매직 넘버를 명명된 상수로 대체, 복잡한 로직 컴포넌트화
+2. **예측 가능성**: 일관된 반환 타입, Single Responsibility
+3. **응집력**: 기능/도메인별 코드 구조화
+4. **결합도**: Component Composition으로 Props Drilling 제거
+
+### shadcn/ui 컴포넌트
+
+- shadcn CLI로 설치: `npx shadcn@latest add [component-name]`
+- 컴포넌트 위치: `src/components/ui/`
+- 유틸리티: `src/lib/utils.ts` (cn 함수)
+- shadcn 컴포넌트 내부에서는 디자인 시스템 예외 허용
+
+## 개발 명령어
+
+| 명령어 | 설명 |
+|--------|------|
+| `pnpm dev` | 개발 서버 실행 |
+| `pnpm build` | 프로덕션 빌드 |
+| `pnpm lint` | ESLint 검사 |
+| `pnpm lint:fix` | ESLint 자동 수정 |
+| `pnpm format` | Prettier 포매팅 |
+| `pnpm typecheck` | TypeScript 타입 검사 |
+
+## 코드 리뷰 체크리스트
+
+개발 완료 전 반드시 확인:
+
+1. ✅ 모든 색상이 정의된 컬러 팔레트를 사용하는가?
+2. ✅ 모든 텍스트가 `typo-*` 클래스를 사용하는가?
+3. ✅ 반응형 디자인이 `desktop:`, `tablet:`, `mobile:` 브레이크포인트를 사용하는가?
+4. ✅ 임의의 값(`[#000]`, `[16px]` 등)을 사용하지 않았는가?
+5. ✅ 컴포넌트가 Frontend 가이드라인을 따르는가?
+6. ✅ Import 경로가 절대 경로(`@/`)를 사용하는가?
+7. ✅ 타입 에러가 없는가? (`pnpm typecheck`)
+8. ✅ 린트 에러가 없는가? (`pnpm lint`)

package/template/components.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/app/globals.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  }
+}

package/template/eslintrc.cjs

@@ -0,0 +1,61 @@
+module.exports = {
+  plugins: ['no-relative-import-paths', 'prettier'],
+  extends: [
+    '@rushstack/eslint-config/profile/web-app',
+    'plugin:prettier/recommended',
+    'next/core-web-vitals',
+  ],
+  rules: {
+    '@typescript-eslint/explicit-function-return-type': 'off',
+    '@typescript-eslint/consistent-type-definitions': 'off',
+    '@typescript-eslint/no-floating-promises': 'off',
+    '@rushstack/no-new-null': 'off',
+    '@rushstack/typedef-var': 'off',
+    'no-relative-import-paths/no-relative-import-paths': [
+      'warn',
+      { allowSameFolder: true, rootDir: 'src', prefix: '@' },
+    ],
+    '@typescript-eslint/explicit-member-accessibility': [
+      'warn',
+      {
+        overrides: {
+          constructors: 'no-public',
+        },
+      },
+    ],
+    '@typescript-eslint/naming-convention': [
+      'warn',
+      {
+        selector: 'objectLiteralProperty',
+        format: ['camelCase', 'PascalCase', 'UPPER_CASE', 'snake_case'],
+      },
+      {
+        selector: 'interface',
+        format: ['PascalCase'],
+        custom: { regex: '^I[A-Z]', match: false },
+      },
+      {
+        selector: 'typeAlias',
+        format: ['PascalCase'],
+        custom: { regex: '^T[A-Z]', match: false },
+      },
+      {
+        selector: 'typeParameter',
+        format: ['PascalCase'],
+        custom: { regex: '^T[A-Z]', match: false },
+      },
+      {
+        selector: 'variable',
+        format: ['camelCase', 'PascalCase', 'UPPER_CASE', 'snake_case'],
+      },
+      {
+        selector: 'function',
+        format: ['camelCase', 'PascalCase'],
+      },
+      {
+        selector: 'typeLike',
+        format: ['PascalCase'],
+      },
+    ],
+  },
+};

package/template/gitignore

@@ -0,0 +1,37 @@
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+.env
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+.omc/

package/template/next.config.mjs

@@ -0,0 +1,11 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  swcMinify: true,
+  images: {
+    remotePatterns: [
+      { protocol: 'https', hostname: 'd1e2y5wc27crnp.cloudfront.net' },
+    ],
+  },
+};
+
+export default nextConfig;

package/template/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "my-dailyshot-app",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint src --ext .ts,.tsx",
+    "lint:fix": "eslint src --ext .ts,.tsx --fix",
+    "format": "prettier --write 'src/**/*.{ts,tsx,css,json}'",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "next": "^14.2.35",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^2.6.0"
+  },
+  "devDependencies": {
+    "@rushstack/eslint-config": "^4.0.5",
+    "@tailwindcss/container-queries": "^0.1.1",
+    "@types/node": "^20.17.12",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "autoprefixer": "^10.4.20",
+    "cssnano": "^7.0.6",
+    "eslint": "^8.57.0",
+    "eslint-config-next": "^14.2.35",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-no-relative-import-paths": "^1.5.5",
+    "eslint-plugin-prettier": "^5.2.1",
+    "postcss": "^8.4.49",
+    "prettier": "^3.3.2",
+    "tailwindcss": "^3.4.17",
+    "typescript": "^5.2.2"
+  }
+}