Build a premium, dark, cinematic multi-screen web UI for "영상 팩토리 스튜디오" (Video Factory Studio) — an AI video AUTOMATION studio for 단비팜몰, a premium Korean agricultural-products e-commerce brand. ALL UI TEXT IN KOREAN. Use Next.js App Router + Tailwind, build it as a single app with a left icon-rail navigation switching between 6 screens (use client-side tab state, default = Dashboard).
=== DESIGN LANGUAGE: "Nightfall" — ultra-premium, dark, editorial (think Linear × Vercel × a luxury film studio) ===
#15160F (warm near-black ink), with a very subtle radial gold glow top-left#1C1D14 / #202117, 1px borders rgba(201,168,106,0.14), 14px radius, soft shadow#C9A86A (gradient up to #E2CB96) — primary buttons, active nav, key numbers, focus rings#9DBFA3 — success/positive/field-asset states#EDE8DD primary, muted #8C8975 secondary=== LAYOUT ===
Left vertical icon-rail nav (56px): dashboard ◧ / create ＋ / jobs ▦ / calendar ▤ / analytics ◔ / batch ▥ — active item glows gold.
Top bar: left = serif wordmark "영상 팩토리", env chip "local"; right = "크레딧 987.5 cr" (mono) + a status pill "● 실생성 HOLD" (gold dot, subtle).
=== SCREENS ===
(1) DASHBOARD "스튜디오 현황" [default]:
(2) CREATE WIZARD "새 영상 생성" — horizontal 8-step stepper (active = gold gradient pill, done = sage): 유형 → 현장자산 → 제품 → 대본 → 음성 → 모델 → 생성 → 배포.
Show STEP 1 active: heading "어떤 영상을 만드실까요? — 7가지 유형". Render 7 selectable video-type cards (emoji, name, duration badge, one-line desc):
🔥 문제해결형 · 35초 · 병해/냉해/활착부진 공감→해결
📦 제품소개형 · 25초 · 단일 제품 역할/시기/차별점
🔬 B/A 비교형 · 30초 · 전후 변화를 직관적으로 설득
👨🌾 농가사례형 · 45초 · 실제 농가 상황/사용맥락/결과
📅 재배캘린더형 · 35초 · 시기별/생육단계 관리 안내
🧬 성분·원리형 · 30초 · 미생물/칼슘/당이동 개념 교육
📞 CTA 전환형 · 20초 · 전화/밴드/자사몰 전환 유도
Below the type cards, a two-column area:
LEFT = "음성 → 영상 레일" — a vertical pipeline list with state dots (완료/진행중/대기): 음성 원본 접수(완료) → 전사 대기 STT(진행중) → 전사본 확인(대기) → NotebookLM 근거 확인(대기) → 농법·사용법·금지표현 검수(대기) → 대본 초안(대기) → 나레이션 초안(대기) → SRT 자막 초안(대기) → 대표 검수(대기). Caption: "업로드 ≠ 즉시생성".
RIGHT = inspector "근거 · 검수" card: 사용허락/동의 = 확인 대기 / NLM 근거 = 3 카드 / 나레이션 = 현장음 우선 / TTS 후보 = ElevenLabs · HOLD / 자막 = SRT 초안. Bottom HOLD panel: "실 전사·NLM·TTS·생성 = 대표 GO 전 HOLD".
(3) JOBS "작업": filter chips (전체 14 / 대기 3 / 큐 1 / 렌더링 1 / 완료 12 / 실패 0 / 현장자산 기반 9) + search. Table columns: thumbnail, 제목, 제품, 입력 자산 (e.g. "현장3·음성1·전사"), NLM 근거 (e.g. "3카드"/"전사 대기"), 모델 (seedance_2.0 / remotion), 비용 (22.5cr), 상태 badge, 생성 시각. 5 realistic rows.
(4) CALENDAR "콘텐츠 캘린더 · 6월": month grid (일~토). Day cells contain colored event chips — GOLD = 발행 예정/전사 대기/나레이션 검수; SAGE = 제작/현장 녹음 접수/NLM 근거 확인. Examples: 딸기 시즌가이드, 현장 녹음 접수, PF-1 발행 예정, 전사 대기, 농가사례 B/A, NLM 근거 확인. Legend at bottom + note "발행 스케줄 mock — 실제 발행은 대표 GO".
(5) ANALYTICS "분석 · 2026-06": KPI row (월 생산 38 / 발행 채널 6 / 크레딧 소모 855 / 완료율 86%). "생산 추이 30d" bar chart (sage bars, one gold highlight). "채널별 배포" horizontal bars: 유튜브 14 / 밴드 11 / 스마트스토어 8 / 인스타 5. "입력 자산(현장 1차) 30d": 현장사진 62 / 현장녹음 14 / 전사본 11 / NLM 근거 28.
(6) BATCH "배치 생성 · 제품 × 유형 매트릭스": a matrix table (rows = 제품 PF-1/응애킬/황리치/PF-4, columns = 제품소개/B/A/시즌처방/농가사례) with toggleable square cells (gold = 선택, sage = 자동추천, empty = off). Right panel "배치 요약 (dry-run)": 선택 작업 8 jobs / 모델 seedance_2.0 / 현장 음성 기반 2 / NLM 근거 카드 8 / 예상 크레딧 180 cr / 생성 후 잔여 807.5 cr. Primary button "배치 큐 (dry-run)". HOLD note "실생성·대량 = 대표 GO 필수. 현재 manifest dry-run만".
=== CORE PRODUCT THEME (reflect everywhere) ===
This is a HUMAN-IN-THE-LOOP automation studio. The system AUTO-PREPARES drafts from the CEO's field assets (현장 사진/녹음 → 전사 → NotebookLM 근거 → 대본 → 나레이션 → SRT 자막), but REAL video generation (which burns credits) is GATED behind a single "대표 GO" approval. So surface "실생성 HOLD" badges, dry-run/견적 framing, and "대표 GO" gates throughout. The CEO does NOT click generate per video — the system queues prepared drafts and the CEO approves a batch with one GO. Keep it premium, calm, and trustworthy. Korean throughout. Make it look genuinely high-end, like a flagship product.
Now let me set up the tasks and build this comprehensive app:
Now let me build everything. Starting with globals.css and layout:
Now let me build the main shell components:
Now let me build all 6 screens and the main page:
Now let's build the main page that ties everything together:
The full 6-screen studio UI is complete. Here's what was built:
Shell & Design System — globals.css defines the complete "Nightfall" design token system (#15160F canvas, #C9A86A gold, #9DBFA3 sage, #EDE8DD warm-white text) with Noto Serif KR + Pretendard fonts, custom scrollbars, and utility classes (card-nightfall, glow-gold, text-gold-gradient). The TopBar shows the serif wordmark, env chip, live credit balance in monospace, and an animated 실생성 HOLD pill. The IconRail (56px) uses gold active-state with a left accent bar and glow.
6 Screens: