Skip to main content

갤러리 기능 (Gallery Features)

이 문서는 사용자가 생성한 AI 콘텐츠(이미지, 비디오)를 조회하고 관리하는 갤러리 기능의 프론트엔드 구현 상세를 설명합니다.

개요​

갤러리 페이지(My Creations)는 사용자가 생성한 모든 작업물의 목록을 카드 형태로 보여주며, 각 작업물의 현재 상태(대기 중, 처리 중, 완료 등)를 실시간으로 확인할 수 있는 기능을 제공합니다.

주요 컴포넌트​

1. CreationsPage (app/creations/page.tsx)​

갤러리의 메인 페이지 컴포넌트입니다.

  • 역할:
    • useCreations 훅을 통해 백엔드로부터 생성물 목록 데이터를 가져옵니다.
    • 로딩 상태(isLoading), 에러 상태(isError), 데이터 없음 상태를 처리하여 적절한 UI를 렌더링합니다.
    • 데이터가 로드되면 CreationCard 컴포넌트를 사용하여 그리드 레이아웃으로 생성물 목록을 표시합니다.
  • UI 구성:
    • 헤더: "My Creations" 타이틀.
    • 그리드: 반응형 그리드(grid-cols-1 ~ lg:grid-cols-4)를 사용하여 다양한 화면 크기에 대응합니다.
    • 스켈레톤 로딩: 데이터 로딩 중에는 스켈레톤 UI를 보여주어 사용자 경험을 향상시킵니다.

2. CreationCard (app/creations/CreationCard.tsx)​

개별 생성물을 표시하는 카드 컴포넌트입니다.

  • Props: creation: Creation (API로부터 받은 생성물 객체)
  • 기능:
    • 썸네일 표시: creation.thumbnailPath 또는 creation.s3Path를 사용하여 이미지를 표시합니다. next/image를 사용하여 최적화된 이미지 로딩을 지원합니다.
    • 상태 표시: StatusIndicator 내부 컴포넌트를 통해 현재 작업의 상태를 시각적으로 보여줍니다.
      • PENDING (노란색 Hourglass)
      • PROCESSING (파란색 Spinner)
      • POST_PROCESSING (보라색 Spinner)
      • COMPLETED (초록색 CheckCircle)
      • FAILED (빨간색 XCircle)
    • 정보 표시: 프롬프트(툴팁 포함)와 생성 날짜를 표시합니다.
    • 인터랙션: 호버 시 카드가 살짝 확대되는 애니메이션 효과가 적용되어 있습니다.

데이터 페칭 (Data Fetching)​

useCreations Hook (features/creations/hooks/useCreations.ts)​

React Query(@tanstack/react-query)를 사용하여 생성물 데이터를 관리합니다.

  • Query Key: ['creations']
  • Query Function: getCreations (API 클라이언트 함수)
  • 특징:
    • 데이터를 캐싱하고 백그라운드에서 업데이트하여 빠른 반응성을 제공합니다.
    • (향후 계획) 실시간 업데이트를 위해 WebSocket 이벤트와 연동하여 쿼리를 무효화(invalidate)하거나 데이터를 직접 수정하는 로직이 추가될 수 있습니다.

구현 현황​

  • 생성물 목록 조회 API 연동
  • 반응형 그리드 레이아웃
  • 상태별 인디케이터 (Pending, Processing, Completed, Failed)
  • 스켈레톤 로딩 UI
  • 페이지네이션 또는 무한 스크롤 (현재는 전체 목록 조회)
  • 상세 보기 모달 또는 페이지
  • 필터링 및 정렬 기능

참고 사항​

  • 이미지는 S3의 Pre-signed URL을 통해 서빙되므로, next.config.ts의 images.remotePatterns 설정에 S3 호스트가 등록되어 있어야 합니다.