@restnfeel/agentc-starter-kit/src/types/templates.ts

한국어 기업용 CMS 모듈 - Task Master AI와 함께 빠르게 웹사이트를 구현할 수 있는 재사용 가능한 컴포넌트 시스템

// 템플릿 카테고리
export type TemplateCategory =
  | "BUSINESS"
  | "ECOMMERCE"
  | "PORTFOLIO"
  | "BLOG"
  | "LANDING"
  | "AGENCY"
  | "RESTAURANT"
  | "EDUCATION"
  | "HEALTHCARE"
  | "NONPROFIT"
  | "OTHER";

// 템플릿 가격 정책
export type TemplatePricing = "FREE" | "PREMIUM" | "ENTERPRISE";

// 섹션 타입
export type SectionType =
  | "hero"
  | "about"
  | "services"
  | "features"
  | "testimonials"
  | "contact"
  | "pricing"
  | "blog"
  | "gallery"
  | "team"
  | "faq"
  | "cta"
  | "footer";

// 기본 섹션 설정
export interface SectionSettings {
  height?: "auto" | "screen" | "half" | string;
  alignment?: "left" | "center" | "right";
  animation?: string;
  background?: {
    type: "color" | "image" | "gradient";
    value: string;
    overlay?: boolean;
    overlayOpacity?: number;
  };
  padding?: {
    top?: string;
    bottom?: string;
    left?: string;
    right?: string;
  };
  margin?: {
    top?: string;
    bottom?: string;
  };
}

// 연락 폼 필드
export interface ContactFormField {
  name: string;
  label: string;
  type: "text" | "email" | "tel" | "textarea" | "select" | "checkbox";
  required: boolean;
  placeholder?: string;
  options?: string[];
  validation?: {
    pattern?: string;
    minLength?: number;
    maxLength?: number;
  };
}

// 연락 폼 설정
export interface ContactForm {
  fields: ContactFormField[];
  submitText?: string;
  successMessage?: string;
  errorMessage?: string;
  redirectUrl?: string;
}

// 소셜 미디어 링크
export interface SocialLink {
  platform:
    | "facebook"
    | "instagram"
    | "twitter"
    | "linkedin"
    | "youtube"
    | "tiktok";
  url: string;
  icon?: string;
}

// 네비게이션 메뉴 아이템
export interface MenuItem {
  label: string;
  href: string;
  children?: MenuItem[];
  icon?: string;
  external?: boolean;
}

// 로고 설정
export interface LogoSettings {
  text?: string;
  image?: string;
  width?: string;
  height?: string;
}

// 색상 팔레트
export interface ColorPalette {
  primary: string;
  secondary: string;
  accent: string;
  background: string;
  foreground: string;
  muted: string;
  border: string;
  success?: string;
  warning?: string;
  error?: string;
}

// 타이포그래피 설정
export interface Typography {
  fontFamily: {
    sans: string[];
    heading: string[];
    mono?: string[];
  };
  fontSize: {
    xs: string;
    sm: string;
    base: string;
    lg: string;
    xl: string;
    "2xl": string;
    "3xl": string;
    "4xl": string;
    "5xl": string;
    "6xl"?: string;
  };
  fontWeight?: {
    light?: number;
    normal?: number;
    medium?: number;
    semibold?: number;
    bold?: number;
  };
  lineHeight?: {
    tight?: number;
    normal?: number;
    relaxed?: number;
  };
}

// 스타일 설정
export interface TemplateStyles {
  colors: ColorPalette;
  typography: Typography;
  spacing: {
    section: string;
    container: string;
    grid?: string;
  };
  borderRadius: {
    sm: string;
    md: string;
    lg: string;
    xl: string;
    full?: string;
  };
  shadows?: {
    sm?: string;
    md?: string;
    lg?: string;
    xl?: string;
  };
  breakpoints?: {
    sm?: string;
    md?: string;
    lg?: string;
    xl?: string;
    "2xl"?: string;
  };
}

// SEO 설정
export interface SEOSettings {
  titleTemplate: string;
  defaultTitle: string;
  defaultDescription: string;
  defaultKeywords?: string[];
  ogImage?: string;
  twitterCard?: "summary" | "summary_large_image";
  jsonLd?: Record<string, unknown>;
}

// 네비게이션 설정
export interface NavigationSettings {
  position: "top" | "left" | "right";
  sticky: boolean;
  transparent?: boolean;
  logo: LogoSettings;
  menuItems: MenuItem[];
  ctaButton?: {
    text: string;
    href: string;
    style?: "primary" | "secondary" | "outline";
  };
}

// 푸터 설정
export interface FooterSettings {
  showSocial: boolean;
  socialLinks: SocialLink[];
  showNewsletter: boolean;
  newsletterTitle?: string;
  newsletterDescription?: string;
  copyright: string;
  links?: {
    title: string;
    items: MenuItem[];
  }[];
  address?: {
    street?: string;
    city?: string;
    country?: string;
    phone?: string;
    email?: string;
  };
}

// 애널리틱스 설정
export interface AnalyticsSettings {
  googleAnalytics?: string;
  facebookPixel?: string;
  hotjar?: string;
  mixpanel?: string;
  customScripts?: {
    head?: string[];
    body?: string[];
  };
}

// 템플릿 전체 설정
export interface TemplateSettings {
  seo: SEOSettings;
  navigation: NavigationSettings;
  footer: FooterSettings;
  analytics: AnalyticsSettings;
  customCss?: string;
  customJs?: string;
  favicons?: {
    ico?: string;
    png16?: string;
    png32?: string;
    png192?: string;
    png512?: string;
  };
}

// 섹션 콘텐츠 (각 섹션 타입별로 다른 구조)
export type SectionContent =
  | HeroContent
  | AboutContent
  | ServicesContent
  | TestimonialsContent
  | ContactContent
  | Record<string, unknown>;

// Hero 섹션 콘텐츠
export interface HeroContent {
  title: string;
  subtitle?: string;
  description?: string;
  ctaText?: string;
  ctaUrl?: string;
  secondaryCta?: {
    text: string;
    url: string;
  };
  backgroundImage?: string;
  backgroundVideo?: string;
  overlay?: boolean;
  overlayOpacity?: number;
}

// About 섹션 콘텐츠
export interface AboutContent {
  title: string;
  subtitle?: string;
  description: string;
  image?: string;
  features?: {
    icon: string;
    title: string;
    description: string;
  }[];
  stats?: {
    value: string;
    label: string;
    description?: string;
  }[];
}

// Services 섹션 콘텐츠
export interface ServicesContent {
  title: string;
  subtitle?: string;
  services: {
    icon: string;
    title: string;
    description: string;
    features?: string[];
    price?: string;
    ctaText?: string;
    ctaUrl?: string;
  }[];
}

// Testimonials 섹션 콘텐츠
export interface TestimonialsContent {
  title: string;
  subtitle?: string;
  testimonials: {
    name: string;
    position?: string;
    company?: string;
    content: string;
    rating?: number;
    image?: string;
  }[];
}

// Contact 섹션 콘텐츠
export interface ContactContent {
  title: string;
  subtitle?: string;
  address?: string;
  phone?: string;
  email?: string;
  hours?: string;
  mapEmbed?: string;
  contactForm?: ContactForm;
}

// 섹션 정의
export interface TemplateSection {
  type: SectionType;
  name: string;
  required: boolean;
  order: number;
  defaultContent: SectionContent;
  settings?: SectionSettings;
  customFields?: {
    name: string;
    label: string;
    type: "text" | "textarea" | "select" | "checkbox" | "image" | "color";
    options?: string[];
    description?: string;
  }[];
}

// 메인 템플릿 인터페이스
export interface SiteTemplate {
  id: string;
  name: string;
  slug: string;
  description?: string;
  category: TemplateCategory;
  pricing: TemplatePricing;

  // 템플릿 구조
  sections: Record<string, TemplateSection>;
  styles: TemplateStyles;
  settings: TemplateSettings;

  // 메타데이터
  features: string[];
  tags: string[];
  previewImage?: string;
  previewUrl?: string;
  demoUrl?: string;
  documentationUrl?: string;

  // 상태
  isActive: boolean;
  isPublic: boolean;
  version: string;

  // 추가 정보
  author?: string;
  authorUrl?: string;
  license?: string;
  price?: number;
  downloads?: number;
  rating?: number;

  // 호환성
  requiredPlugins?: string[];
  supportedLanguages?: string[];
  minVersion?: string;

  // 커스터마이제이션 옵션
  customizable?: {
    colors: boolean;
    fonts: boolean;
    layout: boolean;
    content: boolean;
  };

  // 업데이트 정보
  changelog?: {
    version: string;
    date: string;
    changes: string[];
  }[];

  // 생성/수정 일시
  createdAt?: Date;
  updatedAt?: Date;
}

// 템플릿 설치/사용 정보
export interface TemplateUsage {
  templateId: string;
  siteId: string;
  installedAt: Date;
  customizations?: Record<string, unknown>;
  version: string;
}

// 템플릿 라이브러리 인터페이스
export interface TemplateLibrary {
  templates: SiteTemplate[];
  categories: {
    id: TemplateCategory;
    name: string;
    description: string;
    icon: string;
  }[];
  featured: string[];
  popular: string[];
  recent: string[];
}

// 템플릿 필터 옵션
export interface TemplateFilters {
  category?: TemplateCategory;
  pricing?: TemplatePricing;
  features?: string[];
  tags?: string[];
  search?: string;
  sortBy?: "name" | "popularity" | "rating" | "date" | "price";
  sortOrder?: "asc" | "desc";
}