프론트엔드 개발자를 위한 SOLID 원칙 - TypeScript와 React로 이해하기

// SRP 준수: 책임을 분리

// 1. API 호출 책임 - Custom Hook
function useProducts() {
  const [products, setProducts] = useState([])
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState<Error | null>(null)

  useEffect(() => {
    setLoading(true)
    fetch('/api/products')
      .then(res => res.json())
      .then(data => setProducts(data))
      .catch(err => setError(err))
      .finally(() => setLoading(false))
  }, [])

  return { products, loading, error }
}

// 2. 검색 필터링 책임 - Custom Hook
function useProductSearch(products: Product[], searchTerm: string) {
  return useMemo(() => {
    return products.filter(product =>
      product.name.toLowerCase().includes(searchTerm.toLowerCase())
    )
  }, [products, searchTerm])
}

// 3. 가격 포맷팅 책임 - Utility
const PriceFormatter = {
  toKRW: (price: number) => {
    return new Intl.NumberFormat('ko-KR', {
      style: 'currency',
      currency: 'KRW'
    }).format(price)
  }
}

// 4. Analytics 책임 - Service
class AnalyticsService {
  static trackEvent(event: string, data: Record<string, any>) {
    fetch('/api/analytics', {
      method: 'POST',
      body: JSON.stringify({ event, ...data })
    })
  }

  static trackProductClick(productId: string) {
    this.trackEvent('product_click', { productId })
  }
}

// 5. UI 렌더링 책임만 남은 컴포넌트
function ProductList() {
  const [searchTerm, setSearchTerm] = useState('')
  const { products, loading, error } = useProducts()
  const filteredProducts = useProductSearch(products, searchTerm)

  if (loading) return <Spinner />
  if (error) return <ErrorMessage error={error} />

  return (
    <div>
      <SearchInput value={searchTerm} onChange={setSearchTerm} />
      <ProductGrid
        products={filteredProducts}
        onProductClick={(id) => AnalyticsService.trackProductClick(id)}
        formatPrice={PriceFormatter.toKRW}
      />
    </div>
  )
}

// ✅ OCP 준수: Strategy Pattern 활용

interface NotificationConfig {
  bgColor: string
  icon: React.ReactNode
}

const notificationConfigs: Record<string, NotificationConfig> = {
  success: {
    bgColor: 'bg-green-500',
    icon: <CheckIcon />
  },
  error: {
    bgColor: 'bg-red-500',
    icon: <ErrorIcon />
  },
  warning: {
    bgColor: 'bg-yellow-500',
    icon: <WarningIcon />
  }
}

function Notification({ type, message }: { type: string; message: string }) {
  const config = notificationConfigs[type]

  if (!config) {
    return <div>{message}</div>
  }

  return (
    <div className={config.bgColor}>
      {config.icon}
      <span>{message}</span>
    </div>
  )
}

// 새로운 타입 추가는 기존 코드 수정 없이 가능
notificationConfigs.info = {
  bgColor: 'bg-blue-500',
  icon: <InfoIcon />
}

// ✅ LSP 준수: 일관된 동작 보장

interface PaymentMethod {
  processPayment(amount: number): Promise<PaymentResult>
  canProcess(amount: number): boolean // 사전 검증 메서드 추가
}

class CreditCardPayment implements PaymentMethod {
  canProcess(amount: number): boolean {
    return amount > 0 // 금액만 양수면 OK
  }

  async processPayment(amount: number): Promise<PaymentResult> {
    const result = await fetch('/api/payment/card', {
      method: 'POST',
      body: JSON.stringify({ amount })
    })
    return result.json()
  }
}

class KakaoPayPayment implements PaymentMethod {
  canProcess(amount: number): boolean {
    return amount > 0 && amount <= 1000000 // 100만원 이하만 가능
  }

  async processPayment(amount: number): Promise<PaymentResult> {
    if (!this.canProcess(amount)) {
      return {
        success: false,
        message: '카카오페이는 100만원 이하만 결제 가능합니다'
      }
    }

    const result = await fetch('/api/payment/kakao', {
      method: 'POST',
      body: JSON.stringify({ amount })
    })
    return result.json()
  }
}

// 어떤 PaymentMethod를 사용해도 동일하게 동작
function PaymentProcessor({ method }: { method: PaymentMethod }) {
  const [amount, setAmount] = useState(0)

  const handlePay = async () => {
    // 사전 검증으로 사용자에게 명확한 피드백
    if (!method.canProcess(amount)) {
      alert('선택한 결제 수단으로는 이 금액을 결제할 수 없습니다')
      return
    }

    const result = await method.processPayment(amount)
    if (result.success) {
      alert('결제 완료')
    } else {
      alert(`결제 실패: ${result.message}`)
    }
  }

  return (
    <div>
      <input type="number" value={amount} onChange={e => setAmount(+e.target.value)} />
      <Button onClick={handlePay} disabled={!method.canProcess(amount)}>
        결제하기
      </Button>
    </div>
  )
}

// ✅ ISP 준수: 인터페이스 분리

interface TableDataProps {
  data: any[]
  loading: boolean
  error: Error | null
}

interface TablePaginationProps {
  currentPage: number
  totalPages: number
  onPageChange: (page: number) => void
}

interface TableSortProps {
  sortColumn: string
  sortDirection: 'asc' | 'desc'
  onSort: (column: string) => void
}

interface TableFilterProps {
  filters: Record<string, any>
  onFilterChange: (filters: Record<string, any>) => void
}

interface TableSelectionProps {
  selectedRows: number[]
  onRowSelect: (rows: number[]) => void
}

interface TableActionsProps {
  onRowClick: (row: any) => void
  onRowDelete: (id: number) => void
  onRowEdit: (id: number) => void
}

// 단순한 테이블은 필요한 props만 받음
function SimpleTable({ data, loading, error }: TableDataProps) {
  if (loading) return <Spinner />
  if (error) return <ErrorMessage error={error} />

  return (
    <table>
      {data.map(row => (
        <tr key={row.id}>
          <td>{row.name}</td>
        </tr>
      ))}
    </table>
  )
}

// 복잡한 테이블은 필요한 props들을 조합
function AdvancedTable(props: TableDataProps & TablePaginationProps & TableSortProps) {
  // 필요한 기능만 조합해서 사용
  return (
    <div>
      <table>
        <thead>
          <tr>
            <th onClick={() => props.onSort('name')}>
              이름 {props.sortColumn === 'name' && (props.sortDirection === 'asc' ? '↑' : '↓')}
            </th>
          </tr>
        </thead>
        <tbody>
          {props.data.map(row => (
            <tr key={row.id}>
              <td>{row.name}</td>
            </tr>
          ))}
        </tbody>
      </table>
      <Pagination
        currentPage={props.currentPage}
        totalPages={props.totalPages}
        onPageChange={props.onPageChange}
      />
    </div>
  )
}

// ✅ DIP 준수: 추상화에 의존

// 1. 추상화 정의
interface HttpClient {
  get<T>(url: string): Promise<T>
  post<T>(url: string, data: any): Promise<T>
}

interface StorageService {
  save(key: string, data: any): void
  load(key: string): any
}

interface NotificationService {
  success(message: string): void
  error(message: string): void
}

// 2. 구체적 구현들
class AxiosHttpClient implements HttpClient {
  async get<T>(url: string): Promise<T> {
    const response = await axios.get(url)
    return response.data
  }

  async post<T>(url: string, data: any): Promise<T> {
    const response = await axios.post(url, data)
    return response.data
  }
}

class LocalStorageService implements StorageService {
  save(key: string, data: any): void {
    localStorage.setItem(key, JSON.stringify(data))
  }

  load(key: string): any {
    const item = localStorage.getItem(key)
    return item ? JSON.parse(item) : null
  }
}

class ToastNotificationService implements NotificationService {
  success(message: string): void {
    toast.success(message)
  }

  error(message: string): void {
    toast.error(message)
  }
}

// 3. Context로 의존성 주입
const ServiceContext = createContext<{
  http: HttpClient
  storage: StorageService
  notification: NotificationService
} | null>(null)

function App() {
  const services = {
    http: new AxiosHttpClient(),
    storage: new LocalStorageService(),
    notification: new ToastNotificationService()
  }

  return (
    <ServiceContext.Provider value={services}>
      <OrderList />
    </ServiceContext.Provider>
  )
}

// 4. 추상화에 의존하는 컴포넌트
function OrderList() {
  const services = useContext(ServiceContext)
  if (!services) throw new Error('Services not provided')

  const [orders, setOrders] = useState([])

  useEffect(() => {
    // 추상화된 인터페이스 사용
    services.http.get('/api/orders')
      .then(data => setOrders(data))
      .catch(error => services.notification.error('주문 목록을 불러올 수 없습니다'))
  }, [services])

  const handleExport = () => {
    services.storage.save('orders', orders)
    services.notification.success('주문 목록이 저장되었습니다')
  }

  return (
    <div>
      {orders.map(order => (
        <div key={order.id}>{order.title}</div>
      ))}
      <button onClick={handleExport}>내보내기</button>
    </div>
  )
}