Frontend Dev

Frontend Development Workflow

stripe-newsletter 프로젝트의 Next.js 프론트엔드 개발 표준 워크플로우.

페이지 생성 패턴

App Router 페이지

apps/{app}/src/app/{route}/page.tsx:

// 서버 컴포넌트 (기본) — 데이터 표시만
export default function SomePage() {
  return <div>...</div>
}

// 클라이언트 컴포넌트 — 상호작용 필요 시
'use client'
export default function InteractivePage() {
  const [state, setState] = useState(...)
  return <div>...</div>
}

클라이언트 컴포넌트 사용 기준: useState, useEffect, 이벤트 핸들러, useAuth/useSubscription 등 훅 사용 시.

커스텀 훅 패턴

API 연동 훅의 표준 구조:

interface UseXxxReturn {
  readonly data: T | null
  readonly isLoading: boolean
  readonly error: string | null
  readonly mutate: (input: Input) => Promise<void>
  readonly refresh: () => Promise<void>
}

export function useXxx(): UseXxxReturn {
  const [data, setData] = useState<T | null>(null)
  const [isLoading, setIsLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)

  const fetch = useCallback(async () => {
    setIsLoading(true)
    setError(null)
    try {
      const response = await api.get<T>('/endpoint')
      if (response.success && response.data) {
        setData(response.data)
      }
    } catch {
      setError('Failed to fetch')
    } finally {
      setIsLoading(false)
    }
  }, [])

  useEffect(() => { fetch() }, [fetch])

  return { data, isLoading, error, mutate, refresh: fetch }
}