> = {
+ youtube: YoutubeFilled,
+ instagram: InstagramFilled,
+ facebook: FacebookFilled,
+ globe: GlobeFilled,
+ tiktok: TiktokFilled,
+};
+
+interface ChannelCardProps {
+ option: ChannelFormatOption;
+ isSelected: boolean;
+ onSelect: (channel: StudioChannel | null) => void;
+}
+
+export function ChannelCard({ option, isSelected, onSelect }: ChannelCardProps) {
+ const Icon = iconMap[option.icon] ?? GlobeFilled;
+
+ return (
+
+ );
+}
diff --git a/src/features/studio/ui/channelFormat/ChannelSelectGrid.tsx b/src/features/studio/ui/channelFormat/ChannelSelectGrid.tsx
new file mode 100644
index 0000000..d557dde
--- /dev/null
+++ b/src/features/studio/ui/channelFormat/ChannelSelectGrid.tsx
@@ -0,0 +1,28 @@
+import type { StudioChannel } from "@/features/studio/types/studio";
+import { MOCK_CHANNEL_OPTIONS } from "@/features/studio/mocks/channels";
+import { ChannelCard } from "@/features/studio/ui/channelFormat/ChannelCard";
+
+interface ChannelSelectGridProps {
+ selectedChannel: StudioChannel | null;
+ onChannelSelect: (channel: StudioChannel | null) => void;
+}
+
+export function ChannelSelectGrid({ selectedChannel, onChannelSelect }: ChannelSelectGridProps) {
+ return (
+
+
채널 선택
+
콘텐츠를 게시할 채널을 선택하세요
+
+
+ {MOCK_CHANNEL_OPTIONS.map((option) => (
+
+ ))}
+
+
+
포맷 선택
+
+ {option.label}에 적합한 콘텐츠 포맷을 선택하세요
+
+
+
+ {option.formats.map((fmt) => (
+
+ ))}
+
+
+ {TABS.map((tab) => (
+
+ ))}
+
+ );
+}
diff --git a/src/features/studio/ui/generate/PreviewArea.tsx b/src/features/studio/ui/generate/PreviewArea.tsx
new file mode 100644
index 0000000..dd90460
--- /dev/null
+++ b/src/features/studio/ui/generate/PreviewArea.tsx
@@ -0,0 +1,112 @@
+import { motion } from "motion/react";
+import type { GenerateOutputType } from "@/features/studio/types/studio";
+import { FileTextFilled, VideoFilled } from "@/components/icons/FilledIcons";
+import type { GenerateResult } from "@/features/studio/services/generateImage";
+
+type GenerateStatus = "idle" | "generating" | "done" | "error";
+
+interface PreviewAreaProps {
+ status: GenerateStatus;
+ result: GenerateResult | null;
+ errorMsg: string;
+ outputType: GenerateOutputType;
+ channelLabel: string;
+ formatLabel: string;
+ aspectRatio: string;
+ aspectClass: string;
+}
+
+export function PreviewArea({
+ status,
+ result,
+ errorMsg,
+ outputType,
+ channelLabel,
+ formatLabel,
+ aspectRatio,
+ aspectClass,
+}: PreviewAreaProps) {
+ return (
+
+
프리뷰
+
+
+ {/* Idle */}
+ {status === "idle" && (
+
+
+ {outputType === "image" ? (
+
+ ) : (
+
+ )}
+
+
설정을 확인하고 생성 버튼을 눌러주세요
+
+ )}
+
+ {/* Generating */}
+ {status === "generating" && (
+
+
+
+ {outputType === "image" ? "이미지" : "영상"} 생성 중...
+
+
AI가 콘텐츠를 제작하고 있습니다
+
+ )}
+
+ {/* Error */}
+ {status === "error" && (
+
+ )}
+
+ {/* Done — with image */}
+ {status === "done" && result?.imageDataUrl && (
+
+ )}
+
+ {/* Done — video placeholder */}
+ {status === "done" && !result?.imageDataUrl && (
+
+
+ 생성 완료
+
+ {channelLabel} {formatLabel}
+ {outputType === "image" ? " 이미지" : " 영상"}이 준비되었습니다
+
+
+ {aspectRatio} | {outputType === "image" ? "PNG" : "MP4"}
+
+
+ )}
+
+
+ {label}
+ {value}
+
+ );
+}
+
+export function SettingsSummary({
+ channelLabel,
+ formatLabel,
+ aspectRatio,
+ trackName,
+ narrationValue,
+ subtitleValue,
+ outputType,
+ status,
+ result,
+ errorMsg,
+ onGenerate,
+ onReset,
+ onDownload,
+}: SettingsSummaryProps) {
+ return (
+
+
설정 요약
+
+
+
+
+
+
+
+
+
+
+ {/* Generate / Retry button */}
+ {(status === "idle" || status === "error") && (
+
+ )}
+
+ {/* Error message */}
+ {status === "error" && (
+
{errorMsg}
+ )}
+
+ {/* Done actions */}
+ {status === "done" && (
+
+ {result?.imageDataUrl && (
+
+ )}
+
+
+ )}
+
+ {GENRE_OPTIONS.map((g) => (
+
+ ))}
+
+ );
+}
diff --git a/src/features/studio/ui/sound/NarrationSettings.tsx b/src/features/studio/ui/sound/NarrationSettings.tsx
new file mode 100644
index 0000000..1e525fe
--- /dev/null
+++ b/src/features/studio/ui/sound/NarrationSettings.tsx
@@ -0,0 +1,78 @@
+import type { NarrationLanguage, NarrationVoice } from "@/features/studio/types/studio";
+import { LANGUAGE_OPTIONS } from "@/features/studio/content/sound";
+import { MessageFilled } from "@/components/icons/FilledIcons";
+
+interface NarrationSettingsProps {
+ language: NarrationLanguage;
+ voice: NarrationVoice;
+ onLanguageChange: (lang: NarrationLanguage) => void;
+ onVoiceChange: (voice: NarrationVoice) => void;
+}
+
+const VOICE_OPTIONS: { key: NarrationVoice; label: string }[] = [
+ { key: "female", label: "Female" },
+ { key: "male", label: "Male" },
+];
+
+export function NarrationSettings({
+ language,
+ voice,
+ onLanguageChange,
+ onVoiceChange,
+}: NarrationSettingsProps) {
+ return (
+
+
+ {/* 언어 선택 */}
+
+
언어
+
+ {LANGUAGE_OPTIONS.map((lang) => (
+
+ ))}
+
+
+
+ {/* 보이스 선택 */}
+
+
보이스
+
+ {VOICE_OPTIONS.map((v) => (
+
+ ))}
+
+
+
+
+ {tracks.map((track) => (
+
+ ))}
+
+ );
+}
diff --git a/src/features/studio/ui/strategySource/PillarCard.tsx b/src/features/studio/ui/strategySource/PillarCard.tsx
new file mode 100644
index 0000000..6e2ccb4
--- /dev/null
+++ b/src/features/studio/ui/strategySource/PillarCard.tsx
@@ -0,0 +1,43 @@
+import type { ContentPillar, ContentPillarId } from "@/features/studio/types/studio";
+
+interface PillarCardProps {
+ pillar: ContentPillar;
+ isSelected: boolean;
+ onSelect: (id: ContentPillarId) => void;
+}
+
+export function PillarCard({ pillar, isSelected, onSelect }: PillarCardProps) {
+ return (
+
+ );
+}
diff --git a/src/features/studio/ui/strategySource/PillarSelectList.tsx b/src/features/studio/ui/strategySource/PillarSelectList.tsx
new file mode 100644
index 0000000..e30f347
--- /dev/null
+++ b/src/features/studio/ui/strategySource/PillarSelectList.tsx
@@ -0,0 +1,28 @@
+import type { ContentPillarId } from "@/features/studio/types/studio";
+import { MOCK_CONTENT_PILLARS } from "@/features/studio/mocks/contentPillars";
+import { PillarCard } from "@/features/studio/ui/strategySource/PillarCard";
+
+interface PillarSelectListProps {
+ selectedPillarId: ContentPillarId | null;
+ onPillarSelect: (id: ContentPillarId) => void;
+}
+
+export function PillarSelectList({ selectedPillarId, onPillarSelect }: PillarSelectListProps) {
+ return (
+
+
콘텐츠 전략
+
콘텐츠의 핵심 메시지 필러를 선택하세요
+
+
+ {MOCK_CONTENT_PILLARS.map((pillar) => (
+
+ ))}
+
+
+
소스 선택
+
콘텐츠에 사용할 에셋 소스를 선택하세요 (복수 선택)
+
+
+ {ASSET_SOURCE_OPTIONS.map((source) => (
+
+ ))}
+
+