@restnfeel/agentc-starter-kit/src/cms/admin/types.ts

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

/**
 * Admin Dashboard Types
 * Comprehensive type definitions for the CMS admin interface
 */

import { ReactNode } from "react";

// Icon type - using string to avoid dependency on lucide-react
export type IconType = string;

// Navigation Types
export interface NavigationItem {
  id: string;
  label: string;
  icon: IconType;
  href: string;
  badge?: string | number;
  children?: NavigationItem[];
  permissions?: string[];
  isActive?: boolean;
  isExpanded?: boolean;
}

export interface NavigationGroup {
  id: string;
  label: string;
  items: NavigationItem[];
  permissions?: string[];
  isCollapsible?: boolean;
  isCollapsed?: boolean;
}

export interface BreadcrumbItem {
  label: string;
  href?: string;
  isActive?: boolean;
}

// Layout Types
export interface LayoutConfig {
  sidebar: {
    width: number;
    collapsedWidth: number;
    isCollapsed: boolean;
    isCollapsible: boolean;
  };
  header: {
    height: number;
    showBreadcrumbs: boolean;
    showUserMenu: boolean;
    showNotifications: boolean;
  };
  content: {
    padding: number;
    maxWidth?: number;
    centerContent: boolean;
  };
  theme: "light" | "dark" | "auto";
  animations: boolean;
}

export interface UserMenuConfig {
  items: UserMenuItem[];
  showProfile: boolean;
  showSettings: boolean;
  showLogout: boolean;
}

export interface UserMenuItem {
  id: string;
  label: string;
  icon: IconType;
  href?: string;
  onClick?: () => void;
  isDivider?: boolean;
}

// Dashboard Types
export interface DashboardStats {
  totalSites: number;
  publishedSites: number;
  draftSites: number;
  totalUsers: number;
  activeUsers: number;
  storageUsed: number;
  storageLimit: number;
  lastBackup?: Date;
}

export interface DashboardWidget {
  id: string;
  title: string;
  description?: string;
  component: ReactNode;
  size: "small" | "medium" | "large";
  position: { row: number; col: number };
  isVisible: boolean;
  permissions?: string[];
}

export interface DashboardConfig {
  widgets: DashboardWidget[];
  layout: "grid" | "masonry";
  refreshInterval?: number;
  autoRefresh: boolean;
}

// Content Editor Types
export interface EditorTab {
  id: string;
  label: string;
  component: ReactNode;
  icon?: IconType;
  isActive?: boolean;
  isDirty?: boolean;
  canClose?: boolean;
}

export interface EditorConfig {
  tabs: EditorTab[];
  activeTab: string;
  showPreview: boolean;
  previewMode: "split" | "fullscreen" | "hidden";
  autoSave: boolean;
  autoSaveInterval: number;
}

// Notification Types
export interface NotificationItem {
  id: string;
  title: string;
  message: string;
  type: "info" | "success" | "warning" | "error";
  timestamp: Date;
  isRead: boolean;
  actionUrl?: string;
  actionLabel?: string;
}

export interface NotificationConfig {
  items: NotificationItem[];
  unreadCount: number;
  showBadge: boolean;
  autoMarkAsRead: boolean;
  maxItems: number;
}

// Search Types
export interface SearchResult {
  id: string;
  title: string;
  description?: string;
  type: "site" | "section" | "template" | "user" | "setting";
  url: string;
  thumbnail?: string;
  lastModified?: Date;
}

export interface SearchConfig {
  placeholder: string;
  showRecentSearches: boolean;
  showSuggestions: boolean;
  minQueryLength: number;
  maxResults: number;
  debounceDelay: number;
}

// Theme Types
export interface ThemeColors {
  primary: string;
  secondary: string;
  background: string;
  surface: string;
  text: string;
  textSecondary: string;
  border: string;
  success: string;
  warning: string;
  error: string;
  info: string;
}

export interface ThemeConfig {
  name: string;
  colors: ThemeColors;
  borderRadius: number;
  fontFamily: string;
  shadows: boolean;
  animations: boolean;
}

// Event Types
export interface AdminEvent {
  type: "navigation" | "layout" | "theme" | "notification" | "search";
  payload: Record<string, unknown>;
  timestamp: Date;
}

export interface AdminEventHandler {
  (event: AdminEvent): void;
}

// Layout Context Types
export interface AdminLayoutContextValue {
  config: LayoutConfig;
  navigation: NavigationGroup[];
  breadcrumbs: BreadcrumbItem[];
  userMenu: UserMenuConfig;
  notifications: NotificationConfig;
  dashboard: DashboardConfig;
  editor: EditorConfig;
  search: SearchConfig;
  theme: ThemeConfig;
  updateConfig: (updates: Partial<LayoutConfig>) => void;
  setNavigation: (navigation: NavigationGroup[]) => void;
  setBreadcrumbs: (breadcrumbs: BreadcrumbItem[]) => void;
  toggleSidebar: () => void;
  setActiveNavigation: (itemId: string) => void;
  setTheme: (theme: "light" | "dark" | "auto") => void;
  addNotification: (
    notification: Omit<NotificationItem, "id" | "timestamp">
  ) => void;
  markNotificationAsRead: (id: string) => void;
  clearNotifications: () => void;
  emitEvent: (event: Omit<AdminEvent, "timestamp">) => void;
  addEventListener: (handler: AdminEventHandler) => () => void;
}

// Component Props Types
export interface AdminLayoutProps {
  children: ReactNode;
  config?: Partial<LayoutConfig>;
  className?: string;
}

export interface SidebarProps {
  navigation: NavigationGroup[];
  config: LayoutConfig["sidebar"];
  onToggle: () => void;
  className?: string;
}

export interface HeaderProps {
  breadcrumbs: BreadcrumbItem[];
  userMenu: UserMenuConfig;
  notifications: NotificationConfig;
  search: SearchConfig;
  config: LayoutConfig["header"];
  className?: string;
}

export interface ContentAreaProps {
  children: ReactNode;
  config: LayoutConfig["content"];
  className?: string;
}

export interface NavigationMenuProps {
  groups: NavigationGroup[];
  activeItem?: string;
  onItemClick: (item: NavigationItem) => void;
  className?: string;
}

export interface BreadcrumbNavigationProps {
  items: BreadcrumbItem[];
  className?: string;
}

export interface UserMenuProps {
  config: UserMenuConfig;
  onItemClick: (item: UserMenuItem) => void;
  className?: string;
}

export interface NotificationsPanelProps {
  config: NotificationConfig;
  onMarkAsRead: (id: string) => void;
  onClearAll: () => void;
  className?: string;
}

export interface SearchBarProps {
  config: SearchConfig;
  onSearch: (query: string) => Promise<SearchResult[]>;
  onResultClick: (result: SearchResult) => void;
  className?: string;
}

// State Management Types
export interface AdminState {
  layout: LayoutConfig;
  navigation: NavigationGroup[];
  breadcrumbs: BreadcrumbItem[];
  userMenu: UserMenuConfig;
  notifications: NotificationConfig;
  dashboard: DashboardConfig;
  editor: EditorConfig;
  search: SearchConfig;
  theme: ThemeConfig;
  isLoading: boolean;
  error: string | null;
}

export interface AdminActions {
  setLayout: (config: LayoutConfig) => void;
  updateLayout: (updates: Partial<LayoutConfig>) => void;
  setNavigation: (navigation: NavigationGroup[]) => void;
  setActiveNavigation: (itemId: string) => void;
  setBreadcrumbs: (breadcrumbs: BreadcrumbItem[]) => void;
  addBreadcrumb: (item: BreadcrumbItem) => void;
  setUserMenu: (menu: UserMenuConfig) => void;
  addNotification: (
    notification: Omit<NotificationItem, "id" | "timestamp">
  ) => void;
  markNotificationAsRead: (id: string) => void;
  clearNotifications: () => void;
  setDashboard: (config: DashboardConfig) => void;
  setEditor: (config: EditorConfig) => void;
  setSearch: (config: SearchConfig) => void;
  setTheme: (theme: ThemeConfig) => void;
  toggleSidebar: () => void;
  setLoading: (loading: boolean) => void;
  setError: (error: string | null) => void;
}

// Constants
export const SIDEBAR_WIDTH = 280;
export const SIDEBAR_COLLAPSED_WIDTH = 64;
export const HEADER_HEIGHT = 64;
export const CONTENT_PADDING = 24;

export const DEFAULT_LAYOUT_CONFIG: LayoutConfig = {
  sidebar: {
    width: SIDEBAR_WIDTH,
    collapsedWidth: SIDEBAR_COLLAPSED_WIDTH,
    isCollapsed: false,
    isCollapsible: true,
  },
  header: {
    height: HEADER_HEIGHT,
    showBreadcrumbs: true,
    showUserMenu: true,
    showNotifications: true,
  },
  content: {
    padding: CONTENT_PADDING,
    centerContent: false,
  },
  theme: "light",
  animations: true,
};