@restnfeel/agentc-starter-kit
Version:
한국어 기업용 CMS 모듈 - Task Master AI와 함께 빠르게 웹사이트를 구현할 수 있는 재사용 가능한 컴포넌트 시스템
1,362 lines (1,223 loc) • 36.4 kB
Markdown
# 🎯 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 (
<html lang="ko">
<body className="antialiased">{children}</body>
</html>
);
}
```
### 2. 홈페이지 구현
```typescript
// app/page.tsx
import {
HeroSection,
AboutSection,
FeaturesSection,
TestimonialSection,
ContactSection,
Footer,
} from "@restnfeel/agentc-starter-kit";
export default function HomePage() {
return (
<main className="min-h-screen">
{/* 메인 히어로 섹션 */}
<HeroSection
title="비즈니스 성장을 위한"
subtitle="혁신적인 솔루션"
description="고객의 성공이 곧 우리의 성공입니다. 최고의 기술과 서비스로 함께하겠습니다."
backgroundImage="/images/hero-bg.jpg"
ctaButton={{
text: "무료 상담 신청",
link: "/contact",
variant: "primary",
size: "lg",
}}
secondaryButton={{
text: "서비스 둘러보기",
link: "/services",
}}
features={[
"24/7 전문 지원",
"99.9% 서비스 안정성",
"무료 데이터 마이그레이션",
]}
alignment="center"
animation={true}
/>
{/* 회사 소개 섹션 */}
<AboutSection
title="우리는 고객의 성공 파트너입니다"
description="10년 이상의 경험과 노하우로 고객의 비즈니스 성장을 지원합니다."
content="우리 회사는 혁신적인 기술과 창의적인 사고로 고객에게 최상의 가치를 제공하는 것을 목표로 합니다. 전문성과 신뢰를 바탕으로 지속가능한 성장을 추구하며, 고객과 함께 성공하는 미래를 만들어갑니다."
image="/images/about-team.jpg"
imagePosition="right"
stats={[
{ label: "만족한 고객", value: "500+", icon: "👥" },
{ label: "완료 프로젝트", value: "1,200+", icon: "🚀" },
{ label: "서비스 경험", value: "10년+", icon: "⏱️" },
{ label: "팀 전문가", value: "50+", icon: "🎯" },
]}
layout="stats"
/>
{/* 주요 서비스 섹션 */}
<FeaturesSection
title="고객 맞춤형 서비스"
description="다양한 비즈니스 요구사항에 맞는 전문 솔루션을 제공합니다"
features={[
{
icon: "🎨",
title: "웹 디자인 & 개발",
description: "반응형 웹사이트와 모바일 앱을 전문적으로 개발합니다.",
link: "/services/web-development",
},
{
icon: "📱",
title: "모바일 앱 개발",
description: "iOS와 Android 네이티브 앱을 효율적으로 구축합니다.",
link: "/services/mobile-app",
},
{
icon: "☁️",
title: "클라우드 솔루션",
description: "안전하고 확장 가능한 클라우드 인프라를 구성합니다.",
link: "/services/cloud",
},
{
icon: "🔒",
title: "보안 컨설팅",
description:
"기업의 디지털 자산을 보호하는 보안 솔루션을 제공합니다.",
link: "/services/security",
},
{
icon: "📊",
title: "데이터 분석",
description: "빅데이터 분석을 통한 비즈니스 인사이트를 제공합니다.",
link: "/services/analytics",
},
{
icon: "🤖",
title: "AI 솔루션",
description: "인공지능 기술을 활용한 자동화 시스템을 구축합니다.",
link: "/services/ai",
},
]}
layout="grid"
columns={3}
showIcons={true}
animation={true}
/>
{/* 고객 후기 섹션 */}
<TestimonialSection
title="고객들의 생생한 후기"
description="우리와 함께한 고객들의 성공 스토리를 확인해보세요"
testimonials={[
{
content:
"정말 전문적이고 신속한 서비스였습니다. 우리 회사의 매출이 30% 증가했어요!",
author: "김지원",
position: "마케팅 이사",
company: "㈜글로벌테크",
avatar: "/images/testimonial-1.jpg",
rating: 5,
},
{
content:
"복잡한 요구사항도 완벽하게 이해하고 구현해주셨습니다. 강력 추천합니다!",
author: "박민수",
position: "CTO",
company: "스타트업랩",
avatar: "/images/testimonial-2.jpg",
rating: 5,
},
{
content:
"24시간 지원 서비스 덕분에 언제나 안심이 됩니다. 최고의 파트너입니다.",
author: "이서연",
position: "운영팀장",
company: "이커머스플러스",
avatar: "/images/testimonial-3.jpg",
rating: 5,
},
]}
layout="carousel"
showRatings={true}
showAvatars={true}
autoplay={true}
/>
{/* 연락처 섹션 */}
<ContactSection
title="프로젝트 상담 문의"
description="언제든 편하게 연락주세요. 24시간 내에 답변드립니다."
fields={[
{
type: "text",
name: "name",
label: "이름",
placeholder: "홍길동",
required: true,
},
{
type: "email",
name: "email",
label: "이메일",
placeholder: "hong@example.com",
required: true,
},
{
type: "tel",
name: "phone",
label: "연락처",
placeholder: "010-1234-5678",
required: false,
},
{
type: "select",
name: "service",
label: "관심 서비스",
options: [
"웹 개발",
"모바일 앱",
"클라우드",
"보안 컨설팅",
"데이터 분석",
"AI 솔루션",
],
required: true,
},
{
type: "textarea",
name: "message",
label: "문의 내용",
placeholder: "프로젝트에 대해 자세히 설명해주세요",
required: true,
},
]}
onSubmit={async (data) => {
// 폼 제출 처리
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]} // 서울시청 좌표
/>
{/* 푸터 */}
<Footer
company={{
name: "My Business",
description: "혁신적인 기술로 고객의 성공을 이끄는 파트너",
logo: "/images/logo.png",
}}
links={[
{
title: "서비스",
items: [
{ label: "웹 개발", href: "/services/web" },
{ label: "모바일 앱", href: "/services/mobile" },
{ label: "클라우드", href: "/services/cloud" },
{ label: "보안", href: "/services/security" },
],
},
{
title: "회사",
items: [
{ label: "회사소개", href: "/about" },
{ label: "팀", href: "/team" },
{ label: "채용", href: "/careers" },
{ label: "뉴스", href: "/news" },
],
},
{
title: "지원",
items: [
{ label: "고객지원", href: "/support" },
{ label: "문서", href: "/docs" },
{ label: "FAQ", href: "/faq" },
{ label: "연락처", href: "/contact" },
],
},
]}
socialLinks={[
{ platform: "facebook", url: "https://facebook.com/mybusiness" },
{ platform: "twitter", url: "https://twitter.com/mybusiness" },
{
platform: "linkedin",
url: "https://linkedin.com/company/mybusiness",
},
{ platform: "instagram", url: "https://instagram.com/mybusiness" },
]}
copyright="© 2024 My Business. All rights reserved."
/>
</main>
);
}
```
### 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 (
<AdminLayout
user={{
name: "관리자",
role: "admin",
avatar: "/images/admin-avatar.jpg",
permissions: ["read", "write", "delete", "manage_users"],
}}
navigation={[
{
label: "대시보드",
href: "/admin",
icon: "📊",
},
{
label: "페이지 관리",
href: "/admin/pages",
icon: "📄",
},
{
label: "미디어 라이브러리",
href: "/admin/media",
icon: "🖼️",
},
{
label: "사용자 관리",
href: "/admin/users",
icon: "👥",
},
{
label: "설정",
href: "/admin/settings",
icon: "⚙️",
},
]}
branding={{
logo: "/images/admin-logo.png",
name: "My Business CMS",
version: "1.0.0",
}}
>
{children}
</AdminLayout>
);
}
```
### 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 (
<AdminDashboard
user={{
name: "김관리자",
role: "admin",
avatar: "/images/admin.jpg",
permissions: ["all"],
}}
stats={{
pages: stats.pageCount,
components: stats.componentCount,
media: stats.mediaCount,
users: stats.userCount,
visitors: stats.visitorCount,
conversions: stats.conversionCount,
}}
quickActions={[
{
label: "새 페이지 작성",
action: "create_page",
icon: "➕",
href: "/admin/pages/new",
},
{
label: "미디어 업로드",
action: "upload_media",
icon: "📤",
href: "/admin/media/upload",
},
{
label: "사이트 설정",
action: "site_settings",
icon: "🔧",
href: "/admin/settings",
},
]}
recentActivity={recentActivity}
customWidgets={[
<TrafficWidget key="traffic" />,
<PerformanceWidget key="performance" />,
]}
/>
);
}
// 데이터 조회 함수들
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 (
<PageEditor
pageId={params.id}
onSave={handleSave}
onPublish={handlePublish}
onPreview={(pageData) => {
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 (
<html lang="ko">
<body>
<ThemeProvider theme={customTheme}>{children}</ThemeProvider>
</body>
</html>
);
}
```
### 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 (
<main>
<HeroSection
title={t("hero.title")}
subtitle={t("hero.subtitle")}
description={t("hero.description")}
ctaButton={{
text: t("hero.cta"),
link: `/${locale}/contact`,
variant: "primary",
}}
secondaryButton={{
text: t("hero.secondary"),
link: `/${locale}/services`,
}}
/>
<AboutSection
title={t("about.title")}
description={t("about.description")}
/>
</main>
);
}
```
---
## 🛒 전자상거래 사이트
### 1. 상품 페이지
```typescript
// app/products/page.tsx
import {
ProductGrid,
ProductFilter,
SearchBox,
} from "@restnfeel/agentc-starter-kit/ecommerce";
export default function ProductsPage() {
return (
<div className="container mx-auto px-4 py-8">
<div className="flex gap-8">
{/* 필터 사이드바 */}
<aside className="w-1/4">
<ProductFilter
categories={["전자제품", "의류", "홈&리빙", "스포츠"]}
priceRange={{
min: 0,
max: 1000000,
step: 10000,
}}
brands={["브랜드A", "브랜드B", "브랜드C"]}
onFilterChange={(filters) => {
// 필터 적용 로직
}}
/>
</aside>
{/* 상품 그리드 */}
<main className="w-3/4">
<SearchBox
placeholder="상품을 검색하세요"
onSearch={(query) => {
// 검색 로직
}}
/>
<ProductGrid
products={[
{
id: "1",
name: "무선 이어폰",
price: 129000,
originalPrice: 159000,
image: "/products/earphones.jpg",
rating: 4.5,
reviewCount: 128,
tags: ["무료배송", "당일배송"],
inStock: true,
},
{
id: "2",
name: "스마트 워치",
price: 299000,
image: "/products/smartwatch.jpg",
rating: 4.8,
reviewCount: 89,
tags: ["신상품"],
inStock: true,
},
]}
layout="grid"
columns={3}
showQuickView={true}
showWishlist={true}
onProductClick={(product) => {
window.location.href = `/products/${product.id}`;
}}
/>
</main>
</div>
</div>
);
}
```
### 2. 장바구니 구현
```typescript
// app/cart/page.tsx
import {
ShoppingCart,
CheckoutButton,
} from "@restnfeel/agentc-starter-kit/ecommerce";
export default function CartPage() {
return (
<div className="container mx-auto px-4 py-8">
<h1 className="text-3xl font-bold mb-8">장바구니</h1>
<ShoppingCart
items={[
{
id: "1",
productId: "1",
name: "무선 이어폰",
price: 129000,
quantity: 2,
image: "/products/earphones.jpg",
options: {
color: "블랙",
size: "원사이즈",
},
},
]}
onQuantityChange={(itemId, quantity) => {
// 수량 변경 로직
}}
onRemove={(itemId) => {
// 아이템 제거 로직
}}
showCouponField={true}
showShippingCalculator={true}
/>
<div className="mt-8">
<CheckoutButton
total={258000}
onCheckout={() => {
window.location.href = "/checkout";
}}
/>
</div>
</div>
);
}
```
---
## 🎨 포트폴리오 사이트
```typescript
// app/portfolio/page.tsx
import {
PortfolioGrid,
PortfolioFilter,
SkillsSection,
} from "@restnfeel/agentc-starter-kit/portfolio";
export default function PortfolioPage() {
return (
<main>
{/* 스킬 섹션 */}
<SkillsSection
title="전문 기술"
skills={[
{
name: "React",
level: 95,
category: "Frontend",
icon: "⚛️",
},
{
name: "Node.js",
level: 90,
category: "Backend",
icon: "🟢",
},
{
name: "TypeScript",
level: 88,
category: "Language",
icon: "🔷",
},
]}
layout="circular"
showPercentage={true}
animation={true}
/>
{/* 포트폴리오 그리드 */}
<section className="py-16">
<div className="container mx-auto px-4">
<h2 className="text-3xl font-bold text-center mb-12">
프로젝트 포트폴리오
</h2>
<PortfolioFilter
categories={[
"전체",
"웹 개발",
"모바일 앱",
"UI/UX 디자인",
"브랜딩",
]}
onFilterChange={(category) => {
// 필터링 로직
}}
/>
<PortfolioGrid
projects={[
{
id: "1",
title: "E-commerce 플랫폼",
description: "React와 Node.js로 구축한 대규모 쇼핑몰",
image: "/portfolio/ecommerce.jpg",
category: "웹 개발",
technologies: ["React", "Node.js", "MongoDB"],
liveUrl: "https://example.com",
githubUrl: "https://github.com/example",
completedAt: "2024-01-15",
},
{
id: "2",
title: "모바일 뱅킹 앱",
description: "React Native로 개발한 금융 서비스 앱",
image: "/portfolio/banking-app.jpg",
category: "모바일 앱",
technologies: ["React Native", "Redux", "Firebase"],
liveUrl: "https://apps.apple.com/example",
completedAt: "2023-11-20",
},
]}
layout="masonry"
showTechnologies={true}
showLinks={true}
lightbox={true}
/>
</div>
</section>
</main>
);
}
```
---
## 📝 블로그 사이트
```typescript
// app/blog/page.tsx
import {
BlogGrid,
BlogSidebar,
BlogSearch,
FeaturedPost,
} from "@restnfeel/agentc-starter-kit/blog";
export default function BlogPage() {
return (
<div className="container mx-auto px-4 py-8">
{/* 특별 게시물 */}
<FeaturedPost
post={{
id: "featured",
title: "2024년 웹 개발 트렌드",
excerpt: "올해 주목해야 할 최신 웹 개발 기술과 트렌드를 소개합니다",
content: "...",
author: {
name: "김개발자",
avatar: "/authors/kim.jpg",
bio: "풀스택 개발자",
},
publishedAt: new Date("2024-01-01"),
readTime: 8,
featuredImage: "/blog/web-trends-2024.jpg",
tags: ["웹개발", "트렌드", "기술"],
category: "기술",
}}
showAuthor={true}
showReadTime={true}
showTags={true}
/>
<div className="flex gap-8 mt-12">
{/* 메인 블로그 콘텐츠 */}
<main className="w-2/3">
<BlogSearch
placeholder="블로그 검색..."
onSearch={(query) => {
// 검색 로직
}}
/>
<BlogGrid
posts={[
{
id: "1",
title: "Next.js 14의 새로운 기능들",
excerpt: "최신 버전에서 추가된 기능들을 살펴봅시다",
author: {
name: "박프론트",
avatar: "/authors/park.jpg",
},
publishedAt: new Date("2024-01-15"),
readTime: 5,
featuredImage: "/blog/nextjs-14.jpg",
tags: ["Next.js", "React", "웹개발"],
category: "기술",
},
{
id: "2",
title: "TypeScript 모범 사례",
excerpt: "실무에서 활용할 수 있는 TypeScript 팁들",
author: {
name: "이타입",
avatar: "/authors/lee.jpg",
},
publishedAt: new Date("2024-01-10"),
readTime: 7,
featuredImage: "/blog/typescript-tips.jpg",
tags: ["TypeScript", "JavaScript"],
category: "기술",
},
]}
layout="list"
showExcerpt={true}
showAuthor={true}
showReadTime={true}
showTags={true}
pagination={{
currentPage: 1,
totalPages: 10,
onPageChange: (page) => {
// 페이지 변경 로직
},
}}
/>
</main>
{/* 사이드바 */}
<aside className="w-1/3">
<BlogSidebar
categories={[
{ name: "기술", count: 25 },
{ name: "디자인", count: 12 },
{ name: "비즈니스", count: 8 },
{ name: "라이프스타일", count: 15 },
]}
popularTags={[
"React",
"TypeScript",
"Next.js",
"웹개발",
"UI/UX",
"성능최적화",
]}
recentPosts={[
{
id: "recent-1",
title: "웹 성능 최적화 가이드",
publishedAt: new Date("2024-01-20"),
},
{
id: "recent-2",
title: "모던 CSS 기법들",
publishedAt: new Date("2024-01-18"),
},
]}
showNewsletter={true}
onNewsletterSignup={(email) => {
// 뉴스레터 구독 로직
}}
/>
</aside>
</div>
</div>
);
}
```
---
**💡 이 예제들을 참고하여 AI가 다양한 유형의 웹사이트를 빠르게 구현할 수 있습니다!**