# 🎯 AgentC CMS κ΅¬ν˜„ 예제 ## λͺ©μ°¨ - [Task Master μ›Œν¬ν”Œλ‘œμš° 예제](#task-master-μ›Œν¬ν”Œλ‘œμš°-예제) - [κΈ°λ³Έ λžœλ”© νŽ˜μ΄μ§€ κ΅¬ν˜„](#κΈ°λ³Έ-λžœλ”©-νŽ˜μ΄μ§€-κ΅¬ν˜„) - [κ΄€λ¦¬μž μ‹œμŠ€ν…œ κ΅¬ν˜„](#κ΄€λ¦¬μž-μ‹œμŠ€ν…œ-κ΅¬ν˜„) - [μ»€μŠ€ν…€ ν…Œλ§ˆ 적용](#μ»€μŠ€ν…€-ν…Œλ§ˆ-적용) - [λ‹€κ΅­μ–΄ μ‚¬μ΄νŠΈ κ΅¬ν˜„](#λ‹€κ΅­μ–΄-μ‚¬μ΄νŠΈ-κ΅¬ν˜„) - [μ „μžμƒκ±°λž˜ μ‚¬μ΄νŠΈ](#μ „μžμƒκ±°λž˜-μ‚¬μ΄νŠΈ) - [포트폴리였 μ‚¬μ΄νŠΈ](#포트폴리였-μ‚¬μ΄νŠΈ) - [λΈ”λ‘œκ·Έ μ‚¬μ΄νŠΈ](#λΈ”λ‘œκ·Έ-μ‚¬μ΄νŠΈ) --- ## 🎯 Task Master μ›Œν¬ν”Œλ‘œμš° 예제 ### 1. μƒˆ 고객 ν”„λ‘œμ νŠΈ μ‹œμž‘ ```bash # 1. ν”„λ‘œμ νŠΈ μ΄ˆκΈ°ν™” mkdir customer-website cd customer-website npm init -y npm install @restnfeel/agentc-starter-kit # 2. Task Master μ„€μ • task-master init --name="ABC Company Website" --description="ABC νšŒμ‚¬ κΈ°μ—… μ›Ήμ‚¬μ΄νŠΈ" task-master models --set-main="anthropic/claude-3-5-sonnet-20241022" --set-research="anthropic/claude-3-5-sonnet-20241022" ``` ### 2. PRD μž‘μ„± 및 νƒœμŠ€ν¬ 생성 **scripts/prd.txt μž‘μ„±:** ```text # ABC Company μ›Ήμ‚¬μ΄νŠΈ ν”„λ‘œμ νŠΈ ## ν”„λ‘œμ νŠΈ κ°œμš” - νšŒμ‚¬: ABC Technology Solutions - μ—…μ’…: IT μ†”λ£¨μ…˜ 및 μ»¨μ„€νŒ… - λͺ©ν‘œ: κΈ°μ—… μ‹ λ’°μ„± κ°•ν™” 및 λ¦¬λ“œ 생성 - λ°±μ—”λ“œ: Supabase (PostgreSQL, Auth, Storage) ## 기술 μŠ€νƒ - Frontend: Next.js 14 + TypeScript + Tailwind CSS - Backend: Supabase (BaaS) - Database: PostgreSQL (Supabase) - Auth: Supabase Auth + NextAuth.js - File Storage: Supabase Storage - CMS: AgentC Starter Kit ## νŽ˜μ΄μ§€ μš”κ΅¬μ‚¬ν•­ ### ν™ˆνŽ˜μ΄μ§€ - Hero Section: "IT μ†”λ£¨μ…˜μ˜ μƒˆλ‘œμš΄ ν‘œμ€€" - About Section: 15λ…„ κ²½λ ₯, 100+ ν”„λ‘œμ νŠΈ μ™„μ„± - Services Section: μ›Ήκ°œλ°œ, λͺ¨λ°”일앱, ν΄λΌμš°λ“œ λ§ˆμ΄κ·Έλ ˆμ΄μ…˜ - Testimonials: 고객 μΆ”μ²œμ‚¬ 3개 - Contact Section: 문의 폼, νšŒμ‚¬ 정보 ### μ„œλΉ„μŠ€ νŽ˜μ΄μ§€ - 상세 μ„œλΉ„μŠ€ μ„€λͺ… - 기술 μŠ€νƒ μ†Œκ°œ - ν”„λ‘œμ νŠΈ 포트폴리였 - 가격 μ •μ±… ### νšŒμ‚¬ μ†Œκ°œ - νŒ€ μ†Œκ°œ - νšŒμ‚¬ μ—°ν˜ - λΉ„μ „ 및 λ―Έμ…˜ ### μ—°λ½μ²˜ - 문의 폼 (Supabase DB μ €μž₯) - μ˜€μ‹œλŠ” κΈΈ - μ—°λ½μ²˜ 정보 ### κ΄€λ¦¬μž μ‹œμŠ€ν…œ - μ½˜ν…μΈ  관리 - 문의 관리 - 파일 μ—…λ‘œλ“œ (Supabase Storage) - μ‚¬μš©μž 관리 ## Supabase μ„€μ • μš”κ΅¬μ‚¬ν•­ - μ‚¬μš©μž 인증 (κ΄€λ¦¬μž/일반 μ‚¬μš©μž) - μ½˜ν…μΈ  μ €μž₯ 및 관리 - 파일 μ—…λ‘œλ“œ 및 μ €μž₯ - 문의 폼 데이터 μ €μž₯ - μ‹€μ‹œκ°„ μ•Œλ¦Ό (선택사항) ``` **νƒœμŠ€ν¬ 생성:** ```bash task-master parse-prd scripts/prd.txt --num-tasks=20 --research ``` ### 3. λ³΅μž‘λ„ 뢄석 및 νƒœμŠ€ν¬ λΆ„ν•΄ ```bash # λ³΅μž‘λ„ 뢄석 task-master analyze-complexity --research --threshold=6 task-master complexity-report # λ³΅μž‘ν•œ νƒœμŠ€ν¬λ“€ λΆ„ν•΄ task-master expand --id=1 --research --force # ν™ˆνŽ˜μ΄μ§€ κ΅¬ν˜„ task-master expand --id=2 --research --force # μ„œλΉ„μŠ€ νŽ˜μ΄μ§€ task-master expand --id=3 --research --force # ν…Œλ§ˆ μ‹œμŠ€ν…œ ``` ### 4. 개발 μ›Œν¬ν”Œλ‘œμš° ```bash # λ‹€μŒ μž‘μ—… 확인 task-master next # 첫 번째 μ„œλΈŒνƒœμŠ€ν¬ μ‹œμž‘ (예: 1.1 Hero Section) task-master set-status --id=1.1 --status=in-progress # Hero Section κ΅¬ν˜„ # ... μ½”λ“œ μž‘μ„± ... # 진행상황 μ—…λ°μ΄νŠΈ task-master update-subtask --id=1.1 --prompt="Hero Section κ΅¬ν˜„ μ™„λ£Œ - HeroSection μ»΄ν¬λ„ŒνŠΈ 생성 - λ°˜μ‘ν˜• λ””μžμΈ 적용 - CTA λ²„νŠΌ λ™μž‘ 확인 - λΈŒλžœλ“œ 컬러 적용 μ™„λ£Œ" # μ™„λ£Œ 처리 task-master set-status --id=1.1 --status=done # λ‹€μŒ μ„œλΈŒνƒœμŠ€ν¬λ‘œ 이동 task-master next ``` ### 5. 고객 ν”Όλ“œλ°± 반영 ```bash # 고객 ν”Όλ“œλ°±: "포트폴리였 μ„Ήμ…˜μ„ 더 κ°•μ‘°ν•˜κ³  μ‹Άμ–΄μš”" task-master add-task --prompt="포트폴리였 μ„Ήμ…˜ κ°•ν™” - 포트폴리였 κ°œλ³„ 상세 νŽ˜μ΄μ§€ μΆ”κ°€ - 이미지 가러리 κΈ°λŠ₯ - ν”„λ‘œμ νŠΈ 필터링 κΈ°λŠ₯ - μΌ€μ΄μŠ€ μŠ€ν„°λ”” ν˜•νƒœλ‘œ μž¬κ΅¬μ„±" --research --priority=high # κΈ°μ‘΄ κ΄€λ ¨ νƒœμŠ€ν¬λ“€ μ—…λ°μ΄νŠΈ task-master update --from=4 --prompt="포트폴리였 μ„Ήμ…˜ κ°•ν™” μš”κ΅¬μ‚¬ν•­μ— 따라 κ΄€λ ¨ νƒœμŠ€ν¬λ“€μ„ μ—…λ°μ΄νŠΈν•˜μ„Έμš”. 포트폴리였λ₯Ό 메인 셀링 포인트둜 κ°•μ‘°ν•΄μ•Ό ν•©λ‹ˆλ‹€." --research ``` ### 6. μΆ”κ°€ μš”κ΅¬μ‚¬ν•­ 처리 ```bash # λ‹€κ΅­μ–΄ 지원 μš”μ²­ task-master add-task --prompt="λ‹€κ΅­μ–΄ 지원 μ‹œμŠ€ν…œ κ΅¬ν˜„ - ν•œκ΅­μ–΄/μ˜μ–΄ 지원 - μ–Έμ–΄ μ „ν™˜ UI - λ²ˆμ—­ 파일 관리 - URL λΌμš°νŒ… (/ko, /en)" --research # SEO μ΅œμ ν™” κ°•ν™” task-master update-task --id=8 --prompt="SEO μ΅œμ ν™” μš”κ΅¬μ‚¬ν•­ κ°•ν™” - κ΅¬μ‘°ν™”λœ 데이터 (Schema.org) - OpenGraph λ©”νƒ€νƒœκ·Έ - μ‚¬μ΄νŠΈλ§΅ μžλ™ 생성 - λ‘œλ΄‡.txt μ΅œμ ν™” - Core Web Vitals κ°œμ„ " --research ``` ### 7. ν”„λ‘œμ νŠΈ μ™„λ£Œ 및 정리 ```bash # 전체 진행상황 확인 task-master list # λ§ˆμ§€λ§‰ νƒœμŠ€ν¬λ“€ 정리 task-master set-status --id=12 --status=done # μ΅œμ’… 리포트 생성 task-master complexity-report > final-report.md ``` ### Task Master ν™œμš© 팁 1. **정기적인 μƒνƒœ 확인**: 맀 μž‘μ—… μ„Έμ…˜ μ‹œμž‘ μ‹œ `task-master next` μ‹€ν–‰ 2. **μƒμ„Έν•œ 진행 기둝**: `update-subtask`둜 κ΅¬ν˜„ κ³Όμ •κ³Ό κ²°κ³Όλ₯Ό μƒμ„Ένžˆ 기둝 3. **μ˜μ‘΄μ„± 관리**: μˆœμ„œκ°€ μ€‘μš”ν•œ νƒœμŠ€ν¬λŠ” μ˜μ‘΄μ„± μ„€μ • 4. **연ꡬ λͺ¨λ“œ ν™œμš©**: λ³΅μž‘ν•œ κΈ°λŠ₯은 `--research` ν”Œλž˜κ·Έλ‘œ 더 μ •ν™•ν•œ 뢄석 5. **μœ μ—°ν•œ λŒ€μ‘**: 고객 μš”κ΅¬μ‚¬ν•­ λ³€κ²½ μ‹œ `update`와 `add-task`둜 λΉ λ₯Έ λŒ€μ‘ --- ## 🏠 κΈ°λ³Έ λžœλ”© νŽ˜μ΄μ§€ κ΅¬ν˜„ ### 1. ν”„λ‘œμ νŠΈ μ„€μ • ```typescript // app/layout.tsx import type { Metadata } from "next"; import "@restnfeel/agentc-starter-kit/styles.css"; import "./globals.css"; export const metadata: Metadata = { title: "My Business - ν˜μ‹ μ μΈ μ†”λ£¨μ…˜", description: "고객 성곡을 μœ„ν•œ 졜고의 μ„œλΉ„μŠ€λ₯Ό μ œκ³΅ν•©λ‹ˆλ‹€", }; export default function RootLayout({ children, }: { children: React.ReactNode; }) { return ( {children} ); } ``` ### 2. ν™ˆνŽ˜μ΄μ§€ κ΅¬ν˜„ ```typescript // app/page.tsx import { HeroSection, AboutSection, FeaturesSection, TestimonialSection, ContactSection, Footer, } from "@restnfeel/agentc-starter-kit"; export default function HomePage() { return (
{/* 메인 νžˆμ–΄λ‘œ μ„Ήμ…˜ */} {/* νšŒμ‚¬ μ†Œκ°œ μ„Ήμ…˜ */} {/* μ£Όμš” μ„œλΉ„μŠ€ μ„Ήμ…˜ */} {/* 고객 ν›„κΈ° μ„Ήμ…˜ */} {/* μ—°λ½μ²˜ μ„Ήμ…˜ */} { // 폼 제좜 처리 const response = await fetch("/api/contact", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(data), }); if (response.ok) { alert("λ¬Έμ˜κ°€ μ„±κ³΅μ μœΌλ‘œ μ ‘μˆ˜λ˜μ—ˆμŠ΅λ‹ˆλ‹€!"); } }} contactInfo={{ address: "μ„œμšΈμ‹œ 강남ꡬ ν…Œν—€λž€λ‘œ 123", phone: "02-1234-5678", email: "contact@mybusiness.com", hours: "평일 09:00 - 18:00", socialLinks: [ { platform: "Facebook", url: "https://facebook.com/mybusiness", icon: "πŸ“˜", }, { platform: "LinkedIn", url: "https://linkedin.com/company/mybusiness", icon: "πŸ’Ό", }, { platform: "Instagram", url: "https://instagram.com/mybusiness", icon: "πŸ“·", }, ], }} showMap={true} mapCenter={[37.5665, 126.978]} // μ„œμšΈμ‹œμ²­ μ’Œν‘œ /> {/* ν‘Έν„° */}
); } ``` ### 3. API 라우트 μ„€μ • ```typescript // app/api/contact/route.ts import { NextRequest, NextResponse } from "next/server"; import { z } from "zod"; const contactSchema = z.object({ name: z.string().min(1, "이름을 μž…λ ₯ν•΄μ£Όμ„Έμš”"), email: z.string().email("μ˜¬λ°”λ₯Έ 이메일을 μž…λ ₯ν•΄μ£Όμ„Έμš”"), phone: z.string().optional(), service: z.string().min(1, "μ„œλΉ„μŠ€λ₯Ό μ„ νƒν•΄μ£Όμ„Έμš”"), message: z.string().min(10, "μ΅œμ†Œ 10자 이상 μž…λ ₯ν•΄μ£Όμ„Έμš”"), }); export async function POST(request: NextRequest) { try { const body = await request.json(); const validatedData = contactSchema.parse(body); // 이메일 λ°œμ†‘ λ˜λŠ” λ°μ΄ν„°λ² μ΄μŠ€ μ €μž₯ 둜직 console.log("μƒˆ 문의:", validatedData); // 이메일 μ•Œλ¦Ό λ°œμ†‘ (μ˜ˆμ‹œ) // await sendNotificationEmail(validatedData); return NextResponse.json({ success: true, message: "λ¬Έμ˜κ°€ μ ‘μˆ˜λ˜μ—ˆμŠ΅λ‹ˆλ‹€", }); } catch (error) { return NextResponse.json( { success: false, error: "처리 쀑 였λ₯˜κ°€ λ°œμƒν–ˆμŠ΅λ‹ˆλ‹€" }, { status: 400 } ); } } ``` --- ## βš™οΈ κ΄€λ¦¬μž μ‹œμŠ€ν…œ κ΅¬ν˜„ ### 1. κ΄€λ¦¬μž λ ˆμ΄μ•„μ›ƒ ```typescript // app/admin/layout.tsx import { AdminLayout } from "@restnfeel/agentc-starter-kit"; export default function AdminLayoutPage({ children, }: { children: React.ReactNode; }) { return ( {children} ); } ``` ### 2. λŒ€μ‹œλ³΄λ“œ νŽ˜μ΄μ§€ ```typescript // app/admin/page.tsx import { AdminDashboard } from "@restnfeel/agentc-starter-kit"; export default async function AdminDashboardPage() { // μ„œλ²„μ—μ„œ 톡계 데이터 κ°€μ Έμ˜€κΈ° const stats = await getStats(); const recentActivity = await getRecentActivity(); return ( , , ]} /> ); } // 데이터 쑰회 ν•¨μˆ˜λ“€ async function getStats() { // μ‹€μ œ κ΅¬ν˜„μ—μ„œλŠ” λ°μ΄ν„°λ² μ΄μŠ€μ—μ„œ 쑰회 return { pageCount: 12, componentCount: 45, mediaCount: 128, userCount: 8, visitorCount: 1543, conversionCount: 89, }; } async function getRecentActivity() { return [ { type: "page_created", message: "μƒˆ νŽ˜μ΄μ§€ 'μ œν’ˆ μ†Œκ°œ'κ°€ μƒμ„±λ˜μ—ˆμŠ΅λ‹ˆλ‹€", timestamp: new Date(), user: "κΉ€νŽΈμ§‘μž", }, { type: "media_uploaded", message: "5개의 이미지가 μ—…λ‘œλ“œλ˜μ—ˆμŠ΅λ‹ˆλ‹€", timestamp: new Date(Date.now() - 3600000), user: "λ°•λ””μžμ΄λ„ˆ", }, ]; } ``` ### 3. νŽ˜μ΄μ§€ νŽΈμ§‘κΈ° ```typescript // app/admin/pages/[id]/edit/page.tsx import { PageEditor } from "@restnfeel/agentc-starter-kit"; export default function PageEditPage({ params }: { params: { id: string } }) { const handleSave = async (pageData: PageData) => { const response = await fetch(`/api/admin/pages/${params.id}`, { method: "PUT", headers: { "Content-Type": "application/json" }, body: JSON.stringify(pageData), }); if (response.ok) { alert("νŽ˜μ΄μ§€κ°€ μ €μž₯λ˜μ—ˆμŠ΅λ‹ˆλ‹€!"); } }; const handlePublish = async (pageData: PageData) => { const response = await fetch(`/api/admin/pages/${params.id}/publish`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(pageData), }); if (response.ok) { alert("νŽ˜μ΄μ§€κ°€ κ²Œμ‹œλ˜μ—ˆμŠ΅λ‹ˆλ‹€!"); } }; return ( { window.open(`/preview/${pageData.id}`, "_blank"); }} componentLibrary={{ categories: [ "Layout", "Content", "Media", "Forms", "E-commerce", "Social", ], search: true, dragAndDrop: true, }} preview={{ enabled: true, responsive: true, realtime: true, devices: ["desktop", "tablet", "mobile"], }} autosave={true} versionControl={true} collaboration={true} /> ); } ``` --- ## 🎨 μ»€μŠ€ν…€ ν…Œλ§ˆ 적용 ### 1. ν…Œλ§ˆ μ„€μ • ```typescript // lib/theme.ts import { createTheme } from "@restnfeel/agentc-starter-kit"; export const customTheme = createTheme({ colors: { primary: "#3B82F6", // 블루 secondary: "#64748B", // 그레이 accent: "#F59E0B", // 옐둜우 background: "#FFFFFF", // ν™”μ΄νŠΈ surface: "#F8FAFC", // 라이트 그레이 text: "#1F2937", // 닀크 그레이 textSecondary: "#6B7280", // λ―Έλ””μ—„ 그레이 error: "#EF4444", // λ ˆλ“œ warning: "#F59E0B", // 옐둜우 success: "#10B981", // κ·Έλ¦° }, fonts: { heading: "'Pretendard', 'Noto Sans KR', sans-serif", body: "'Pretendard', 'Noto Sans KR', sans-serif", mono: "'JetBrains Mono', 'SF Mono', monospace", }, spacing: { xs: "0.25rem", sm: "0.5rem", md: "1rem", lg: "1.5rem", xl: "2rem", "2xl": "3rem", "3xl": "4rem", }, breakpoints: { sm: "640px", md: "768px", lg: "1024px", xl: "1280px", "2xl": "1536px", }, borderRadius: { none: "0", sm: "0.125rem", md: "0.375rem", lg: "0.5rem", xl: "0.75rem", full: "9999px", }, shadows: { sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)", md: "0 4px 6px -1px rgb(0 0 0 / 0.1)", lg: "0 10px 15px -3px rgb(0 0 0 / 0.1)", xl: "0 20px 25px -5px rgb(0 0 0 / 0.1)", }, }); ``` ### 2. ν…Œλ§ˆ 적용 ```typescript // app/layout.tsx import { ThemeProvider } from "@restnfeel/agentc-starter-kit"; import { customTheme } from "@/lib/theme"; export default function RootLayout({ children, }: { children: React.ReactNode; }) { return ( {children} ); } ``` ### 3. μ»€μŠ€ν…€ CSS ```css /* app/globals.css */ @import "@restnfeel/agentc-starter-kit/styles.css"; /* μ»€μŠ€ν…€ μŠ€νƒ€μΌ */ :root { --brand-gradient: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); --brand-shadow: 0 20px 40px rgba(59, 130, 246, 0.15); } .hero-section { background: var(--brand-gradient); } .cta-button { background: var(--brand-gradient); box-shadow: var(--brand-shadow); transition: all 0.3s ease; } .cta-button:hover { transform: translateY(-2px); box-shadow: 0 25px 50px rgba(59, 130, 246, 0.25); } /* 닀크 λͺ¨λ“œ 지원 */ @media (prefers-color-scheme: dark) { :root { --text-color: #f3f4f6; --bg-color: #111827; --surface-color: #1f2937; } } ``` --- ## 🌐 λ‹€κ΅­μ–΄ μ‚¬μ΄νŠΈ κ΅¬ν˜„ ### 1. λ‹€κ΅­μ–΄ μ„€μ • ```typescript // lib/i18n.ts import { createI18n } from "@restnfeel/agentc-starter-kit"; export const i18n = createI18n({ defaultLocale: "ko", locales: ["ko", "en", "ja", "zh"], fallbackLocale: "ko", loadPath: "/locales/{{lng}}/{{ns}}.json", detection: { order: ["path", "cookie", "header"], caches: ["cookie", "localStorage"], }, interpolation: { escapeValue: false, }, }); ``` ### 2. λ²ˆμ—­ 파일 ```json // public/locales/ko/common.json { "nav": { "home": "ν™ˆ", "about": "νšŒμ‚¬μ†Œκ°œ", "services": "μ„œλΉ„μŠ€", "contact": "μ—°λ½μ²˜" }, "hero": { "title": "λΉ„μ¦ˆλ‹ˆμŠ€ μ„±μž₯을 μœ„ν•œ", "subtitle": "ν˜μ‹ μ μΈ μ†”λ£¨μ…˜", "description": "고객의 성곡이 곧 우리의 μ„±κ³΅μž…λ‹ˆλ‹€", "cta": "무료 상담 μ‹ μ²­", "secondary": "μ„œλΉ„μŠ€ λ‘˜λŸ¬λ³΄κΈ°" }, "about": { "title": "μš°λ¦¬λŠ” 고객의 성곡 νŒŒνŠΈλ„ˆμž…λ‹ˆλ‹€", "description": "10λ…„ μ΄μƒμ˜ κ²½ν—˜κ³Ό λ…Έν•˜μš°λ‘œ 고객의 λΉ„μ¦ˆλ‹ˆμŠ€ μ„±μž₯을 μ§€μ›ν•©λ‹ˆλ‹€" } } ``` ```json // public/locales/en/common.json { "nav": { "home": "Home", "about": "About", "services": "Services", "contact": "Contact" }, "hero": { "title": "Innovative Solutions", "subtitle": "for Business Growth", "description": "Your success is our success", "cta": "Get Free Consultation", "secondary": "Explore Services" }, "about": { "title": "We are your success partner", "description": "Supporting your business growth with over 10 years of experience" } } ``` ### 3. λ‹€κ΅­μ–΄ νŽ˜μ΄μ§€ κ΅¬ν˜„ ```typescript // app/[locale]/page.tsx import { HeroSection, AboutSection } from "@restnfeel/agentc-starter-kit"; import { useTranslation } from "@restnfeel/agentc-starter-kit/i18n"; export default function LocalizedHomePage({ params: { locale }, }: { params: { locale: string }; }) { const { t } = useTranslation(locale, "common"); return (
); } ``` --- ## πŸ›’ μ „μžμƒκ±°λž˜ μ‚¬μ΄νŠΈ ### 1. μƒν’ˆ νŽ˜μ΄μ§€ ```typescript // app/products/page.tsx import { ProductGrid, ProductFilter, SearchBox, } from "@restnfeel/agentc-starter-kit/ecommerce"; export default function ProductsPage() { return (
{/* ν•„ν„° μ‚¬μ΄λ“œλ°” */} {/* μƒν’ˆ κ·Έλ¦¬λ“œ */}
{ // 검색 둜직 }} /> { window.location.href = `/products/${product.id}`; }} />
); } ``` ### 2. μž₯λ°”κ΅¬λ‹ˆ κ΅¬ν˜„ ```typescript // app/cart/page.tsx import { ShoppingCart, CheckoutButton, } from "@restnfeel/agentc-starter-kit/ecommerce"; export default function CartPage() { return (

μž₯λ°”κ΅¬λ‹ˆ

{ // μˆ˜λŸ‰ λ³€κ²½ 둜직 }} onRemove={(itemId) => { // μ•„μ΄ν…œ 제거 둜직 }} showCouponField={true} showShippingCalculator={true} />
{ window.location.href = "/checkout"; }} />
); } ``` --- ## 🎨 포트폴리였 μ‚¬μ΄νŠΈ ```typescript // app/portfolio/page.tsx import { PortfolioGrid, PortfolioFilter, SkillsSection, } from "@restnfeel/agentc-starter-kit/portfolio"; export default function PortfolioPage() { return (
{/* μŠ€ν‚¬ μ„Ήμ…˜ */} {/* 포트폴리였 κ·Έλ¦¬λ“œ */}

ν”„λ‘œμ νŠΈ 포트폴리였

{ // 필터링 둜직 }} />
); } ``` --- ## πŸ“ λΈ”λ‘œκ·Έ μ‚¬μ΄νŠΈ ```typescript // app/blog/page.tsx import { BlogGrid, BlogSidebar, BlogSearch, FeaturedPost, } from "@restnfeel/agentc-starter-kit/blog"; export default function BlogPage() { return (
{/* νŠΉλ³„ κ²Œμ‹œλ¬Ό */}
{/* 메인 λΈ”λ‘œκ·Έ μ½˜ν…μΈ  */}
{ // 검색 둜직 }} /> { // νŽ˜μ΄μ§€ λ³€κ²½ 둜직 }, }} />
{/* μ‚¬μ΄λ“œλ°” */}
); } ``` --- **πŸ’‘ 이 μ˜ˆμ œλ“€μ„ μ°Έκ³ ν•˜μ—¬ AIκ°€ λ‹€μ–‘ν•œ μœ ν˜•μ˜ μ›Ήμ‚¬μ΄νŠΈλ₯Ό λΉ λ₯΄κ²Œ κ΅¬ν˜„ν•  수 μžˆμŠ΅λ‹ˆλ‹€!**