+ CASTAD
+
+
+ 
+
+
+
+ );
+};
+
+interface SidebarProps {
+ activeItem: string;
+ onNavigate: (id: string) => void;
+}
+
+const Sidebar: React.FC
+ {icon}
+
+ {!isCollapsed && {label}}
+ setIsMobileOpen(false)}
+ />
+ )}
+
+ {/* 사이드바 */}
+
+
+);
diff --git a/src/pages/Analysis/AnalysisResultSection.tsx b/src/pages/Analysis/AnalysisResultSection.tsx
new file mode 100755
index 0000000..e8210ea
--- /dev/null
+++ b/src/pages/Analysis/AnalysisResultSection.tsx
@@ -0,0 +1,131 @@
+
+import React from 'react';
+import { CrawlingResponse } from '../../types/api';
+
+interface AnalysisResultSectionProps {
+ onBack: () => void;
+ onGenerate?: () => void;
+ data: CrawlingResponse;
+}
+
+const AnalysisResultSection: React.FC = ({ onBack, onGenerate, data }) => {
+ const { processed_info, marketing_analysis, image_list } = data;
+ const tags = marketing_analysis.tags || [];
+ const facilities = marketing_analysis.facilities || [];
+
+ return (
+ = ({
+ onBack,
+ onNext,
+ imageList,
+ onRemoveImage,
+ onAddImages,
+}) => {
+ const fileInputRef = useRef(null);
+ const imageListRef = useRef(null);
+
+ // 이미지 아이템의 표시용 URL 가져오기
+ const getImageSrc = (item: ImageItem): string => {
+ return item.type === 'url' ? item.url : item.preview;
+ };
+
+ const handleImageListWheel = (e: React.WheelEvent) => {
+ const el = imageListRef.current;
+ if (!el) return;
+
+ const { scrollTop, scrollHeight, clientHeight } = el;
+ const hasScrollableContent = scrollHeight > clientHeight;
+
+ if (!hasScrollableContent) return;
+
+ const atTop = scrollTop <= 0;
+ const atBottom = scrollTop + clientHeight >= scrollHeight - 1;
+
+ // 스크롤 가능한 영역 내에서 스크롤 중이면 이벤트 전파 중지
+ if ((e.deltaY < 0 && !atTop) || (e.deltaY > 0 && !atBottom)) {
+ e.stopPropagation();
+ }
+ };
+
+ const handleDragOver = (e: React.DragEvent) => {
+ e.preventDefault();
+ e.stopPropagation();
+ };
+
+ const handleDrop = (e: React.DragEvent) => {
+ e.preventDefault();
+ e.stopPropagation();
+
+ const files = Array.from(e.dataTransfer.files).filter(file =>
+ file.type.startsWith('image/')
+ );
+
+ if (files.length > 0) {
+ onAddImages(files);
+ }
+ };
+
+ const handleFileSelect = () => {
+ fileInputRef.current?.click();
+ };
+
+ const handleFileChange = (e: React.ChangeEvent) => {
+ const files = e.target.files;
+ if (files && files.length > 0) {
+ onAddImages(Array.from(files));
+ // input 초기화 (같은 파일 다시 선택 가능하도록)
+ e.target.value = '';
+ }
+ };
+
+ return (
+
+
+ );
+};
+
+export default AssetManagementContent;
diff --git a/src/pages/Dashboard/AssetManagementSection.tsx b/src/pages/Dashboard/AssetManagementSection.tsx
new file mode 100755
index 0000000..cd2a95b
--- /dev/null
+++ b/src/pages/Dashboard/AssetManagementSection.tsx
@@ -0,0 +1,21 @@
+
+import React from 'react';
+import Sidebar from '../../components/Sidebar';
+import AssetManagementContent from './AssetManagementContent';
+
+interface AssetManagementSectionProps {
+ onBack: () => void;
+}
+
+const AssetManagementSection: React.FC = ({ onBack }) => {
+ return (
+ = ({ onBack }) => {
+ const [selectedSocials, setSelectedSocials] = useState([]);
+
+ const toggleSocial = (id: string) => {
+ setSelectedSocials(prev =>
+ prev.includes(id)
+ ? prev.filter(s => s !== id)
+ : [...prev, id]
+ );
+ };
+
+ const socials = [
+ { id: 'Youtube', color: '#ff0000', icon: },
+ { id: 'Instagram', color: '#e4405f', icon: },
+ { id: 'Facebook', color: '#1877f2', icon: }
+ ];
+
+ return (
+
+
+ );
+};
+
+export default CompletionContent;
diff --git a/src/pages/Dashboard/DashboardContent.tsx b/src/pages/Dashboard/DashboardContent.tsx
new file mode 100755
index 0000000..a3bc755
--- /dev/null
+++ b/src/pages/Dashboard/DashboardContent.tsx
@@ -0,0 +1,107 @@
+
+import React from 'react';
+
+const StatCard: React.FC<{ label: string; value: string; trend: string }> = ({ label, value, trend }) => (
+ = ({ onHome, initialActiveItem = '대시보드', initialImageList = [], businessInfo }) => {
+ const scrollContainerRef = useRef(null);
+ const [activeItem, setActiveItem] = useState(initialActiveItem);
+ const [maxWizardIndex, setMaxWizardIndex] = useState(0);
+
+ // URL 이미지를 ImageItem 형태로 변환하여 초기화
+ const [imageList, setImageList] = useState(
+ initialImageList.map(url => ({ type: 'url', url }))
+ );
+
+ const handleRemoveImage = (index: number) => {
+ setImageList(prev => {
+ const item = prev[index];
+ // 파일 이미지인 경우 메모리 해제
+ if (item.type === 'file') {
+ URL.revokeObjectURL(item.preview);
+ }
+ return prev.filter((_, i) => i !== index);
+ });
+ };
+
+ const handleAddImages = (files: File[]) => {
+ const newImages: ImageItem[] = files.map(file => ({
+ type: 'file',
+ file,
+ preview: URL.createObjectURL(file),
+ }));
+ setImageList(prev => [...prev, ...newImages]);
+ };
+
+ const scrollToWizardSection = (index: number) => {
+ if (scrollContainerRef.current) {
+ const sections = scrollContainerRef.current.querySelectorAll('.flow-section');
+ if (sections[index]) {
+ setMaxWizardIndex(prev => Math.max(prev, index));
+ sections[index].scrollIntoView({ behavior: 'smooth', block: 'start' });
+ }
+ }
+ };
+
+ useEffect(() => {
+ const container = scrollContainerRef.current;
+ if (!container || activeItem !== '새 프로젝트 만들기') return;
+
+ const handleWheel = (e: WheelEvent) => {
+ // 스크롤 가능한 자식 요소 내부에서 발생한 이벤트인지 확인
+ const target = e.target as HTMLElement;
+
+ // custom-scrollbar 클래스를 가진 요소 또는 그 자식에서 발생한 이벤트인지 확인
+ const scrollableParent = target.closest('.custom-scrollbar') as HTMLElement;
+ if (scrollableParent) {
+ const { scrollTop, scrollHeight, clientHeight } = scrollableParent;
+ const hasScrollableContent = scrollHeight > clientHeight;
+ const atTop = scrollTop <= 0;
+ const atBottom = scrollTop + clientHeight >= scrollHeight - 1;
+
+ // 스크롤 가능한 콘텐츠가 있는 경우
+ if (hasScrollableContent) {
+ // 위로 스크롤하고 맨 위가 아니거나, 아래로 스크롤하고 맨 아래가 아니면 허용
+ if ((e.deltaY < 0 && !atTop) || (e.deltaY > 0 && !atBottom)) {
+ return; // 이미지 리스트 스크롤 허용 (preventDefault 하지 않음)
+ }
+ }
+ }
+
+ const h = container.clientHeight;
+ const currentIdx = Math.round(container.scrollTop / h);
+
+ if (e.deltaY > 0) { // Down
+ if (currentIdx >= maxWizardIndex) {
+ e.preventDefault();
+ }
+ }
+ };
+
+ container.addEventListener('wheel', handleWheel, { passive: false });
+ return () => container.removeEventListener('wheel', handleWheel);
+ }, [maxWizardIndex, activeItem]);
+
+ const renderContent = () => {
+ switch (activeItem) {
+ case '대시보드':
+ return = ({ onBack, onNext, businessInfo }) => {
+ const [selectedType, setSelectedType] = useState('보컬');
+ const [selectedLang, setSelectedLang] = useState('한국어');
+ const [selectedGenre, setSelectedGenre] = useState('AI 추천');
+ const [progress, setProgress] = useState(0);
+ const [isDragging, setIsDragging] = useState(false);
+ const [status, setStatus] = useState('idle');
+ const [showLyrics, setShowLyrics] = useState(false);
+ const [lyrics, setLyrics] = useState('');
+ const [audioUrl, setAudioUrl] = useState(null);
+ const [isPlaying, setIsPlaying] = useState(false);
+ const [currentTime, setCurrentTime] = useState(0);
+ const [duration, setDuration] = useState(0);
+ const [errorMessage, setErrorMessage] = useState(null);
+ const [statusMessage, setStatusMessage] = useState('');
+ const [retryCount, setRetryCount] = useState(0);
+
+ const progressBarRef = useRef(null);
+ const audioRef = useRef(null);
+
+ // localStorage에 상태 저장
+ const saveToStorage = (taskId: string, currentLyrics: string, currentStatus: GenerationStatus) => {
+ const data: SavedGenerationState = {
+ taskId,
+ lyrics: currentLyrics,
+ status: currentStatus,
+ timestamp: Date.now(),
+ };
+ localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
+ };
+
+ // localStorage에서 상태 제거
+ const clearStorage = () => {
+ localStorage.removeItem(STORAGE_KEY);
+ };
+
+ // localStorage에서 상태 복구
+ const loadFromStorage = (): SavedGenerationState | null => {
+ try {
+ const saved = localStorage.getItem(STORAGE_KEY);
+ if (!saved) return null;
+
+ const data: SavedGenerationState = JSON.parse(saved);
+
+ // 만료된 데이터인지 확인 (30분)
+ if (Date.now() - data.timestamp > STORAGE_EXPIRY) {
+ clearStorage();
+ return null;
+ }
+
+ return data;
+ } catch {
+ clearStorage();
+ return null;
+ }
+ };
+
+ // 컴포넌트 마운트 시 저장된 상태 복구
+ useEffect(() => {
+ const savedState = loadFromStorage();
+ if (savedState && (savedState.status === 'polling' || savedState.status === 'generating_song')) {
+ // 저장된 가사가 있으면 표시
+ if (savedState.lyrics) {
+ setLyrics(savedState.lyrics);
+ setShowLyrics(true);
+ }
+
+ // 폴링 상태 복구
+ setStatus('polling');
+ setStatusMessage('음악을 처리하고 있습니다... (새로고침 후 복구됨)');
+
+ // 폴링 재개 (저장된 가사와 함께)
+ resumePolling(savedState.taskId, savedState.lyrics, 0);
+ }
+ }, []);
+
+ // 폴링 재개 함수 (타임아웃 시 재생성)
+ const resumePolling = async (taskId: string, currentLyrics: string, currentRetryCount: number = 0) => {
+ try {
+ const downloadResponse = await waitForSongComplete(
+ taskId,
+ (pollStatus) => {
+ if (pollStatus === 'pending') {
+ setStatusMessage('대기 중...');
+ } else if (pollStatus === 'processing') {
+ setStatusMessage('음악을 처리하고 있습니다...');
+ }
+ }
+ );
+
+ if (!downloadResponse.success) {
+ throw new Error(downloadResponse.error_message || '음악 다운로드에 실패했습니다.');
+ }
+
+ setAudioUrl(downloadResponse.file_url);
+ setStatus('complete');
+ setStatusMessage('');
+ setRetryCount(0);
+ clearStorage();
+
+ } catch (error) {
+ console.error('Polling failed:', error);
+
+ // 타임아웃인 경우 재생성 시도
+ if (error instanceof Error && error.message === 'TIMEOUT') {
+ if (currentRetryCount < MAX_RETRY_COUNT) {
+ const newRetryCount = currentRetryCount + 1;
+ setRetryCount(newRetryCount);
+ setStatusMessage(`시간 초과로 재생성 중... (${newRetryCount}/${MAX_RETRY_COUNT})`);
+
+ // 새로운 노래 생성 요청
+ await regenerateSongOnly(currentLyrics, newRetryCount);
+ } else {
+ setStatus('error');
+ setErrorMessage('여러 번 시도했지만 음악 생성에 실패했습니다. 다시 시도해주세요.');
+ setRetryCount(0);
+ clearStorage();
+ }
+ } else {
+ setStatus('error');
+ setErrorMessage(error instanceof Error ? error.message : '음악 생성 중 오류가 발생했습니다.');
+ setRetryCount(0);
+ clearStorage();
+ }
+ }
+ };
+
+ // 노래만 재생성 (가사는 유지)
+ const regenerateSongOnly = async (currentLyrics: string, currentRetryCount: number) => {
+ if (!businessInfo) return;
+
+ try {
+ const language = LANGUAGE_MAP[selectedLang] || 'Korean';
+ const genreMap: Record = {
+ 'AI 추천': 'pop',
+ '로파이': 'lofi',
+ '힙합': 'hip-hop',
+ '어쿠스틱': 'acoustic',
+ };
+
+ const songResponse = await generateSong({
+ genre: genreMap[selectedGenre] || 'pop',
+ language,
+ lyrics: currentLyrics,
+ });
+
+ if (!songResponse.success) {
+ throw new Error(songResponse.error_message || '음악 생성 요청에 실패했습니다.');
+ }
+
+ // 새 task_id로 저장
+ saveToStorage(songResponse.task_id, currentLyrics, 'polling');
+
+ // 폴링 재개
+ await resumePolling(songResponse.task_id, currentLyrics, currentRetryCount);
+
+ } catch (error) {
+ console.error('Song regeneration failed:', error);
+ setStatus('error');
+ setErrorMessage(error instanceof Error ? error.message : '음악 재생성 중 오류가 발생했습니다.');
+ setRetryCount(0);
+ clearStorage();
+ }
+ };
+
+ const handleMove = (clientX: number) => {
+ if (!progressBarRef.current || !audioRef.current) return;
+ const rect = progressBarRef.current.getBoundingClientRect();
+ const newProgress = Math.max(0, Math.min(100, ((clientX - rect.left) / rect.width) * 100));
+ const newTime = (newProgress / 100) * duration;
+ audioRef.current.currentTime = newTime;
+ setProgress(newProgress);
+ setCurrentTime(newTime);
+ };
+
+ const onMouseDown = (e: React.MouseEvent) => {
+ if (!audioUrl) return;
+ setIsDragging(true);
+ handleMove(e.clientX);
+ };
+
+ useEffect(() => {
+ const onMouseMove = (e: MouseEvent) => {
+ if (isDragging) handleMove(e.clientX);
+ };
+ const onMouseUp = () => {
+ setIsDragging(false);
+ };
+
+ if (isDragging) {
+ window.addEventListener('mousemove', onMouseMove);
+ window.addEventListener('mouseup', onMouseUp);
+ }
+
+ return () => {
+ window.removeEventListener('mousemove', onMouseMove);
+ window.removeEventListener('mouseup', onMouseUp);
+ };
+ }, [isDragging]);
+
+ useEffect(() => {
+ const audio = audioRef.current;
+ if (!audio) return;
+
+ const handleTimeUpdate = () => {
+ setCurrentTime(audio.currentTime);
+ if (audio.duration > 0) {
+ setProgress((audio.currentTime / audio.duration) * 100);
+ }
+ };
+
+ const handleLoadedMetadata = () => {
+ setDuration(audio.duration);
+ };
+
+ const handleEnded = () => {
+ setIsPlaying(false);
+ setProgress(0);
+ setCurrentTime(0);
+ };
+
+ audio.addEventListener('timeupdate', handleTimeUpdate);
+ audio.addEventListener('loadedmetadata', handleLoadedMetadata);
+ audio.addEventListener('ended', handleEnded);
+
+ return () => {
+ audio.removeEventListener('timeupdate', handleTimeUpdate);
+ audio.removeEventListener('loadedmetadata', handleLoadedMetadata);
+ audio.removeEventListener('ended', handleEnded);
+ };
+ }, [audioUrl]);
+
+ const formatTime = (seconds: number) => {
+ const mins = Math.floor(seconds / 60);
+ const secs = Math.floor(seconds % 60);
+ return `${mins}:${secs.toString().padStart(2, '0')}`;
+ };
+
+ const togglePlayPause = () => {
+ if (!audioRef.current) return;
+ if (isPlaying) {
+ audioRef.current.pause();
+ } else {
+ audioRef.current.play();
+ }
+ setIsPlaying(!isPlaying);
+ };
+
+ const handleGenerateMusic = async () => {
+ if (!businessInfo) {
+ setErrorMessage('비즈니스 정보가 없습니다. 다시 시도해주세요.');
+ return;
+ }
+
+ setStatus('generating_lyric');
+ setErrorMessage(null);
+ setStatusMessage('가사를 생성하고 있습니다...');
+
+ try {
+ // Step 1: Generate lyrics
+ const language = LANGUAGE_MAP[selectedLang] || 'Korean';
+ let lyricResponse = await generateLyric({
+ customer_name: businessInfo.customer_name,
+ detail_region_info: businessInfo.detail_region_info,
+ language,
+ region: businessInfo.region,
+ });
+
+ // Retry if the response contains error message
+ let retryCount = 0;
+ while (lyricResponse.lyric.includes("I'm sorry") && retryCount < 3) {
+ retryCount++;
+ setStatusMessage(`가사 재생성 중... (${retryCount}/3)`);
+ lyricResponse = await generateLyric({
+ customer_name: businessInfo.customer_name,
+ detail_region_info: businessInfo.detail_region_info,
+ language,
+ region: businessInfo.region,
+ });
+ }
+
+ if (!lyricResponse.success) {
+ throw new Error(lyricResponse.error_message || '가사 생성에 실패했습니다.');
+ }
+
+ // 3번 재시도 후에도 여전히 에러 메시지가 포함되어 있으면 가사 카드를 표시하지 않고 에러 처리
+ if (lyricResponse.lyric.includes("I'm sorry")) {
+ throw new Error('가사 생성에 실패했습니다. 다시 시도해주세요.');
+ }
+
+ setLyrics(lyricResponse.lyric);
+ setShowLyrics(true);
+
+ // Step 2: Generate song
+ setStatus('generating_song');
+ setStatusMessage('음악을 생성하고 있습니다...');
+
+ const genreMap: Record = {
+ 'AI 추천': 'pop',
+ '로파이': 'lofi',
+ '힙합': 'hip-hop',
+ '어쿠스틱': 'acoustic',
+ };
+
+ const songResponse = await generateSong({
+ genre: genreMap[selectedGenre] || 'pop',
+ language,
+ lyrics: lyricResponse.lyric,
+ });
+
+ if (!songResponse.success) {
+ throw new Error(songResponse.error_message || '음악 생성 요청에 실패했습니다.');
+ }
+
+ // Step 3: Poll for completion - 상태 저장
+ setStatus('polling');
+ setStatusMessage('음악을 처리하고 있습니다...');
+ saveToStorage(songResponse.task_id, lyricResponse.lyric, 'polling');
+
+ // 폴링 시작 (타임아웃 시 자동 재생성)
+ await resumePolling(songResponse.task_id, lyricResponse.lyric, 0);
+
+ } catch (error) {
+ console.error('Music generation failed:', error);
+ setStatus('error');
+ setErrorMessage(error instanceof Error ? error.message : '음악 생성 중 오류가 발생했습니다.');
+ setRetryCount(0);
+ clearStorage();
+ }
+ };
+
+ const handleRegenerate = async () => {
+ setShowLyrics(false);
+ setAudioUrl(null);
+ setLyrics('');
+ setProgress(0);
+ setCurrentTime(0);
+ setDuration(0);
+ setIsPlaying(false);
+ setRetryCount(0);
+ clearStorage();
+ await handleGenerateMusic();
+ };
+
+ const isGenerating = status === 'generating_lyric' || status === 'generating_song' || status === 'polling';
+
+ return (
+
+
+
+ );
+};
+
+export default Sidebar;
diff --git a/src/index.tsx b/src/index.tsx
new file mode 100755
index 0000000..aaa0c6e
--- /dev/null
+++ b/src/index.tsx
@@ -0,0 +1,16 @@
+
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+const rootElement = document.getElementById('root');
+if (!rootElement) {
+ throw new Error("Could not find root element to mount to");
+}
+
+const root = ReactDOM.createRoot(rootElement);
+root.render(
+
+ {!isCollapsed && CASTAD}
+
+
+
+
+ {menuItems.map(item => (
+ handleNavigate(item.id)}
+ />
+ ))}
+
+
+
+ {!isCollapsed && (
+
+
+
+ )}
+
+
+ Credit
+ 850 / 1000
+
+
+
+
+
+
+
+ {!isCollapsed && (
+
+
+
+
+
+ )}
+ username1234
+
+ {/* 뒤로가기 버튼 */}
+
+ );
+};
+
+export default AnalysisResultSection;
diff --git a/src/pages/Analysis/LoadingSection.tsx b/src/pages/Analysis/LoadingSection.tsx
new file mode 100755
index 0000000..9828f66
--- /dev/null
+++ b/src/pages/Analysis/LoadingSection.tsx
@@ -0,0 +1,26 @@
+
+import React from 'react';
+
+const LoadingSection: React.FC = () => {
+ return (
+
+
+
+
+ {/* 헤더 - 높이가 작을 때 숨김 */}
+
+
+
+ {/* 메인 콘텐츠 그리드 */}
+
+
+
+ 브랜드 분석
++ 쉽고 빠르게, 브랜드 소셜 미디어 캠페인을 만드세요. +
+
+ {/* 브랜드 정체성 */}
+
+
+ {/* 하단 버튼 */}
+
+ 브랜드 정체성
+
+
+ {/* 오른쪽 카드들 */}
+ {processed_info.customer_name}
+{processed_info.region} · {processed_info.detail_region_info}
+ + {/* 이미지 미리보기 */} + {image_list.length > 0 && ( +
+ 수집된 이미지 ({image_list.length}장)
+
+ )}
+
+ {image_list.slice(0, 8).map((img, idx) => (
+
+ {image_list.length > 8 && (
+
+ 
+
+ ))}
+ +{image_list.length - 8}장 더 있음
+ )} +
+ {/* 시설 정보 */}
+
+
+ 주요 시설
+
+
+ {/* 추천 태그 */}
+
+ {facilities.slice(0, 6).map((facility, idx) => (
+
+ {facility}
+
+ ))}
+ {facilities.length > 6 && (
+
+ +{facilities.length - 6}
+
+ )}
+
+
+ 추천 마케팅 태그
+
+
+ {/* 마케팅 분석 요약 */}
+
+ {tags.slice(0, 6).map((tag, idx) => (
+
+ {tag}
+
+ ))}
+ {tags.length > 6 && (
+
+ +{tags.length - 6}
+
+ )}
+
+
+ 마케팅 분석
+
+
+ {marketing_analysis.report.split('\n').slice(0, 3).map((line, idx) => (
+
+ {line.replace(/^#+\s*/, '')}
+ ))} +
+
+
+
+
+ );
+};
+
+export default LoadingSection;
diff --git a/src/pages/Dashboard/AssetManagementContent.tsx b/src/pages/Dashboard/AssetManagementContent.tsx
new file mode 100755
index 0000000..c1a4119
--- /dev/null
+++ b/src/pages/Dashboard/AssetManagementContent.tsx
@@ -0,0 +1,200 @@
+
+import React, { useRef } from 'react';
+import { ImageItem } from '../../types/api';
+
+interface AssetManagementContentProps {
+ onBack: () => void;
+ onNext: () => void;
+ imageList: ImageItem[];
+ onRemoveImage: (index: number) => void;
+ onAddImages: (files: File[]) => void;
+}
+
+const AssetManagementContent: React.FC
+ {/* Spinning Outer Ring */}
+
+ {/* Pulsing center icon */}
+
+
+
+
+
+
+
+ 비즈니스 분석 중
++ AI가 입력하신 정보를 바탕으로 마케팅 핵심 가치를 추출하고 있습니다... +
+
+
+
+
+
+
+
+ 브랜드 에셋
++ 쉽고 빠르게, 브랜드 소셜 미디어 캠페인을 만드세요. +
+
+ {/* 선택된 이미지 */}
+
+
+
+
+
+ {/* 이미지 업로드 */}
+
+
+ 선택된 이미지
+ {imageList.length}장 +
+ {imageList.length > 0 ? (
+
+
+ {imageList.map((item, i) => (
+
+ ) : (
+
+ })
+ {/* 업로드된 파일 표시 배지 */}
+ {item.type === 'file' && (
+
+ ))}
+
+ NEW
+
+ )}
+
+
+ 이미지가 없습니다
+
+ )}
+
+
+ 이미지 업로드
+
+
+
+
+
+
+
+ 이미지를 드래그하여
업로드
+
+ 또는 클릭하여 파일 선택 +
+
+
+
+
+
+ );
+};
+
+export default AssetManagementSection;
diff --git a/src/pages/Dashboard/BusinessSettingsContent.tsx b/src/pages/Dashboard/BusinessSettingsContent.tsx
new file mode 100755
index 0000000..f01cdd0
--- /dev/null
+++ b/src/pages/Dashboard/BusinessSettingsContent.tsx
@@ -0,0 +1,48 @@
+
+import React from 'react';
+
+const SocialItem: React.FC<{ platform: string; icon: React.ReactNode; color: string }> = ({ platform, icon, color }) => (
+
+ {}} />
+
+
+
+);
+
+const BusinessSettingsContent: React.FC = () => {
+ return (
+
+
+
+
+
+ {platform}
+ {icon}
+
+
+ );
+};
+
+export default BusinessSettingsContent;
diff --git a/src/pages/Dashboard/CompletionContent.tsx b/src/pages/Dashboard/CompletionContent.tsx
new file mode 100755
index 0000000..4f63d5a
--- /dev/null
+++ b/src/pages/Dashboard/CompletionContent.tsx
@@ -0,0 +1,131 @@
+
+import React, { useState } from 'react';
+
+interface CompletionContentProps {
+ onBack: () => void;
+}
+
+const CompletionContent: React.FC
+
+
+ 비즈니스 설정
++ 펜션 정보와 YouTube 채널을 설정하여 자동 업로드를 활성화하세요 +
+
+
+
+
+ 공유
+ +
+
+
+
+
+
+
+
+
+ 콘텐츠 제작 완료
++ 인스타그램 릴스 및 틱톡에 최적화된 고성능 영상을 제작했습니다. +
+
+ {/* Left: Video Preview */}
+
+
+
+
+
+ {/* Right: Sharing */}
+ 이미지 및 영상
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {['AI 최적화', '색상 보정', '자막', '비트 싱크', 'SEO'].map(tag => (
+
+
+ {tag}
+
+ ))}
+
+
+
+ 공유 채널 선택
+ +
+ {socials.map(social => {
+ const isSelected = selectedSocials.includes(social.id);
+ return (
+
+
+
+ toggleSocial(social.id)}
+ className={`flex items-center gap-2 sm:gap-3 bg-[#121a1d] p-2 sm:p-2.5 rounded-lg sm:rounded-xl border transition-all cursor-pointer ${
+ isSelected
+ ? 'border-[#a6ffea] shadow-[0_0_15px_rgba(166,255,234,0.15)] bg-[#1c2a2e]'
+ : 'border-white/5 hover:border-white/10 grayscale hover:grayscale-0 opacity-60 hover:opacity-100'
+ }`}
+ >
+
+ );
+ })}
+
+
+
+ {social.id}
+
+ {social.icon}
+ {isSelected && (
+
+
+
+ )}
+
+
+
+
+ {label}
+
+);
+
+const DashboardContent: React.FC = () => {
+ return (
+ {value}
+ {trend} +
+
+ );
+};
+
+export default DashboardContent;
diff --git a/src/pages/Dashboard/GenerationFlow.tsx b/src/pages/Dashboard/GenerationFlow.tsx
new file mode 100755
index 0000000..86f9f5b
--- /dev/null
+++ b/src/pages/Dashboard/GenerationFlow.tsx
@@ -0,0 +1,161 @@
+
+import React, { useRef, useEffect, useState } from 'react';
+import Sidebar from '../../components/Sidebar';
+import AssetManagementContent from './AssetManagementContent';
+import SoundStudioContent from './SoundStudioContent';
+import CompletionContent from './CompletionContent';
+import DashboardContent from './DashboardContent';
+import BusinessSettingsContent from './BusinessSettingsContent';
+import { ImageItem } from '../../types/api';
+
+interface BusinessInfo {
+ customer_name: string;
+ region: string;
+ detail_region_info: string;
+}
+
+interface GenerationFlowProps {
+ onHome: () => void;
+ initialActiveItem?: string;
+ initialImageList?: string[];
+ businessInfo?: BusinessInfo;
+}
+
+const GenerationFlow: React.FC
+
+
+ {/* Top Stats Grid - Fixed height based on content */}
+ 대시보드
+실시간 마케팅 퍼포먼스를 확인하세요.
+
+
+
+ {/* Engagement Chart Section - Flex-1 to fill remaining space */}
+
+
+
+
+
+ Engagement Overview
+
+
+ Weekly Active
+
+
+ {/* Chart SVG - Responsive viewBox and preserveAspectRatio */}
+
+
+ {/* Floating Data Badge - Positioning relative to SVG percentage */}
+
+
+ {/* X Axis Labels - Fixed bottom */}
+
+
+
+ 1,234
+
+
+
+ Mon
+ Tue
+ Wed
+ Thu
+ Fri
+ Sat
+ Sun
+
+
+ {/* Step 0: Asset Management (AnalysisResultSection removed) */}
+
+ );
+ default:
+ return (
+
+ setActiveItem('대시보드')}
+ onNext={() => scrollToWizardSection(1)}
+ imageList={imageList}
+ onRemoveImage={handleRemoveImage}
+ onAddImages={handleAddImages}
+ />
+
+ {/* Step 1: Sound Studio */}
+
+ scrollToWizardSection(0)}
+ onNext={() => scrollToWizardSection(2)}
+ businessInfo={businessInfo}
+ />
+
+ {/* Step 2: Completion */}
+
+ scrollToWizardSection(1)}
+ />
+
+
+ {activeItem} 페이지 준비 중입니다.
+
+ );
+ }
+ };
+
+ return (
+
+
+ );
+};
+
+export default GenerationFlow;
diff --git a/src/pages/Dashboard/SoundStudioContent.tsx b/src/pages/Dashboard/SoundStudioContent.tsx
new file mode 100755
index 0000000..e3d8edc
--- /dev/null
+++ b/src/pages/Dashboard/SoundStudioContent.tsx
@@ -0,0 +1,605 @@
+
+import React, { useState, useRef, useEffect } from 'react';
+import { generateLyric, generateSong, waitForSongComplete } from '../../utils/api';
+import { LANGUAGE_MAP } from '../../types/api';
+
+interface BusinessInfo {
+ customer_name: string;
+ region: string;
+ detail_region_info: string;
+}
+
+interface SoundStudioContentProps {
+ onBack: () => void;
+ onNext: () => void;
+ businessInfo?: BusinessInfo;
+}
+
+type GenerationStatus = 'idle' | 'generating_lyric' | 'generating_song' | 'polling' | 'complete' | 'error';
+
+// localStorage에 저장할 데이터 구조
+interface SavedGenerationState {
+ taskId: string;
+ lyrics: string;
+ status: GenerationStatus;
+ timestamp: number;
+}
+
+const STORAGE_KEY = 'castad_song_generation';
+const STORAGE_EXPIRY = 30 * 60 * 1000; // 30분
+const MAX_RETRY_COUNT = 3; // 최대 재시도 횟수
+
+const SoundStudioContent: React.FC
+ {renderContent()}
+
+
+ {/* Hidden audio element */}
+ {audioUrl && (
+
+ )}
+
+
+
+
+
+
+
+
+
+
+ 사운드 스튜디오
++ 쉽고 빠르게, 브랜드 소셜 미디어 캠페인을 만드세요. +
+
+
+ {/* Left Card: Audio Style */}
+
+
+
+ {/* Right Card: Lyrics - 애니메이션으로 나타남 */}
+ {showLyrics && (
+ 오디오 스타일
+ +
+
+
+ {/* Error Message */}
+ {errorMessage && (
+
+
+
+ AI 사운드 유형 선택
+
+ {['보컬', '성우 내레이션', '배경음악'].map(type => (
+
+ ))}
+
+
+
+
+ 언어 선택
+
+ {[
+ { label: '한국어', flag: '🇰🇷' },
+ { label: 'English', flag: '🇺🇸' },
+ { label: '中文', flag: '🇨🇳' },
+ { label: '日本語', flag: '🇯🇵' },
+ { label: 'ไทย', flag: '🇹🇭' },
+ { label: 'Tiếng Việt', flag: '🇻🇳' }
+ ].map(lang => (
+
+ ))}
+
+
+
+ 음악 장르 선택
+ +
+ {errorMessage}
+
+ )}
+
+ {/* Status Message */}
+ {isGenerating && statusMessage && (
+
+
+ {statusMessage}
+
+ )}
+
+
+
+
+
+
가사
+가사 영역을 선택해서 수정 가능해요
+ +
+ {/* Interactive Player Bar */}
+
+
+
+
+
+ {/* Editable Lyrics */}
+
+
+
+
+
+
+ {formatTime(currentTime)} / {formatTime(duration)}
+
+
+
+
+
+