# Role
너는 세계적인 수준의 Full-stack 엔지니어이자 UI/UX 디자이너야.
Google의 Gemini API를 사용하여 이미지에서 워터마크를 제거하는 'Gemini Logo Remover' 웹앱을 제작해야 해.
# App Overview
- 목적: Gemini AI가 생성한 이미지 우측 하단의 로고를 자동으로 감지하고 제거함.
- 핵심 기능: 여러 장의 이미지를 한 번에 업로드하고 순차적으로 처리하는 배치(Batch) 시스템.
# Technical Requirements
1. 프레임워크: React (TypeScript), Tailwind CSS 사용.
2. AI 모델: `@google/genai` 라이브러리의 `gemini-1.5-flash` 또는 최신 모델 사용.
3. 상태 관리:
- `items`: 각 이미지의 상태(ID, 원본 URL, 결과 URL, 상태[Pending, Processing, Success, Error])를 관리하는 배열.
- `appStatus`: 앱의 전체 상태(Idle, Processing, Completed) 관리.
4. 순차 처리 로직:
- `useEffect`를 사용하여 `items` 배열 중 `Pending` 상태인 항목을 하나씩 찾아 AI API를 호출할 것.
- 한 번에 하나의 이미지 만 처리하여 API 할당량을 관리하고 사용자에게 진행 상황을 실시간으로 보여줄 것.
# AI Prompt Engineering (geminiService)
- 모델에게 전달할 프롬프트: "이 이미지의 우측 하단에 있는 워터마크(로고)를 찾아서 제거해줘. 주변 배경과 자연스럽게 어우러지도록 인페인팅(Inpainting) 기술을 사용해줘. 결과는 텍스트 설명 없이 오직 수정된 이미지 데이터만 반환해."
"이 이미지의 오른쪽 하단 구석에 있는 작은 별 모양(sparkle)의 제미나이(Gemini) 워터마크 로고만 찾아서 제거해줘. 그 외의 모든 요소(캐릭터, 배경, 가구, 책상 위의 물건 등)는 절대 수정하거나 지우지 마. 오직 제미나이 워터마크만 주변 배경과 자연스럽게 어우러지도록 지우고, 나머지 부분은 원본 그대로 유지해야 해."
- 이미지 전달 방식: Base64 인코딩된 인라인 데이터를 사용.
# UI/UX Design (Tailwind CSS)
- 테마: Slate-50 배경의 깨끗하고 현대적인 디자인. Indigo-600을 포인트 컬러로 사용.
- 레이아웃:
- Header: 앱 이름과 간단한 설명.
- Progress Section: 전체 진행률을 보여주는 프로그레스 바와 '모두 저장', '초기화' 버튼.
- Upload Area: Idle 상태일 때 나타나는 큰 점선 드래그 앤 드롭 영역.
- Result Grid: 3열 그리드(모바일 1열). 각 카드는 원본/결과 이미지를 보여주며, Hover 시 원본과 비교할 수 있는 효과 포함.
- 애니메이션: `framer-motion` 또는 Tailwind의 `animate-in` 클래스를 사용하여 부드러운 등장 효과 구현.
# Detailed Component Logic
- `handleFileChange`: 여러 파일을 선택하면 즉시 `items` 배열에 추가하고 프로세스를 시작함.
- `downloadImage`: 처리된 이미지를 Blob으로 변환하여 브라우저에서 즉시 다운로드되도록 구현.
- `downloadAll`: 모든 성공한 이미지를 일정 간격(stagger)을 두고 순차적으로 다운로드 실행.
이 지침에 따라 `App.tsx`, `geminiService.ts`, `types.ts`를 포함한 전체 코드를 작성해줘.
