- 
+ 
-
+ {loggedIn ? (
+
+ ) : (
+
+ )}
+
- {/* Back Button */}
-
-
-
-
- {/* Header */}
-
-
-
+ {/* Header Area */}
+
+ {/* Back Button */}
+
{/* Main Content Grid */}
+
+
+
+ {/* Header */}
+
+
-
+
+
+ 브랜드 분석
++ 쉽고 빠르게, 브랜드 소셜 미디어 캠페인을 만드세요. +
브랜드 분석
-- 쉽고 빠르게, 브랜드 소셜 미디어 캠페인을 만드세요. -
- {/* Brand Identity */}
+ {/* Left: Brand Identity (Scrollable) */}
브랜드 정체성
AI 마케팅 분석 요약
-
-
+ {processed_info.customer_name}
-{processed_info.region} · {processed_info.detail_region_info}
-
+
+
- {/* Marketing Analysis Summary */}
- {processed_info.customer_name}
+{processed_info.detail_region_info}
+
-
- {/* Right Cards */}
+ {/* Right: Selling Points & Keywords (Fixed) */}
- {reportSections.length === 0 ? (
-
-
- {marketing_analysis.report
- ? formatReportText(marketing_analysis.report)
- : '분석 결과가 없습니다.'}
-
- ) : (
-
- {reportSections.map((section, idx) => (
-
- )}
+
- {section.title &&
- ))}
- {section.title}
} -
- {formatReportText(section.content)}
-
-
+ {marketing_analysis.report
+ ? formatReportText(marketing_analysis.report)
+ : '분석 결과가 없습니다.'}
- {/* Main Selling Points (Facilities) */}
-
- 주요 셀링 포인트
-
- {facilities.map((facility, idx) => (
-
- {facility}
-
+ {/* Main Selling Points */}
+
+ 주요 셀링 포인트
+
- {/* Recommended Target Keywords (Tags) */}
-
+ {sellingPoints.map((point, idx) => (
+
+ {point.title}
+
))}
+ {point.items.map((item, itemIdx) => (
+
+ {item}
+ ))} +
+ {/* Recommended Target Keywords */}
+
추천 타겟 키워드
{tags.map((tag, idx) => (
diff --git a/src/pages/Dashboard/GenerationFlow.tsx b/src/pages/Dashboard/GenerationFlow.tsx
index 20d994f..d57320d 100755
--- a/src/pages/Dashboard/GenerationFlow.tsx
+++ b/src/pages/Dashboard/GenerationFlow.tsx
@@ -6,12 +6,17 @@ import SoundStudioContent from './SoundStudioContent';
import CompletionContent from './CompletionContent';
import DashboardContent from './DashboardContent';
import BusinessSettingsContent from './BusinessSettingsContent';
-import { ImageItem } from '../../types/api';
+import UrlInputContent from './UrlInputContent';
+import LoadingSection from '../Analysis/LoadingSection';
+import AnalysisResultSection from '../Analysis/AnalysisResultSection';
+import { ImageItem, CrawlingResponse } from '../../types/api';
+import { crawlUrl } from '../../utils/api';
const WIZARD_STEP_KEY = 'castad_wizard_step';
const ACTIVE_ITEM_KEY = 'castad_active_item';
const SONG_TASK_ID_KEY = 'castad_song_task_id';
const IMAGE_TASK_ID_KEY = 'castad_image_task_id';
+const ANALYSIS_DATA_KEY = 'castad_analysis_data';
// 다른 컴포넌트에서 사용하는 storage key들 (초기화용)
const SONG_GENERATION_KEY = 'castad_song_generation';
@@ -37,27 +42,82 @@ interface GenerationFlowProps {
initialActiveItem?: string;
initialImageList?: string[];
businessInfo?: BusinessInfo;
+ initialAnalysisData?: CrawlingResponse | null;
}
-const GenerationFlow: React.FC = ({ onHome, initialActiveItem = '대시보드', initialImageList = [], businessInfo }) => {
+// 위저드 단계:
+// -2: URL 입력
+// -1: 로딩 (분석 중)
+// 0: 브랜드 분석 결과
+// 1: 에셋 관리 (Asset Management)
+// 2: 사운드 스튜디오 (Sound Studio)
+// 3: 완료 (Completion)
+
+const GenerationFlow: React.FC = ({
+ onHome,
+ initialActiveItem = '대시보드',
+ initialImageList = [],
+ businessInfo,
+ initialAnalysisData
+}) => {
// localStorage에서 저장된 상태 복원
const savedActiveItem = localStorage.getItem(ACTIVE_ITEM_KEY);
const savedWizardStep = localStorage.getItem(WIZARD_STEP_KEY);
const savedSongTaskId = localStorage.getItem(SONG_TASK_ID_KEY);
const savedImageTaskId = localStorage.getItem(IMAGE_TASK_ID_KEY);
+ const savedAnalysisData = localStorage.getItem(ANALYSIS_DATA_KEY);
+
+ // 분석 데이터 파싱
+ const parseAnalysisData = (): CrawlingResponse | null => {
+ if (initialAnalysisData) return initialAnalysisData;
+ if (!savedAnalysisData) return null;
+ try {
+ return JSON.parse(savedAnalysisData) as CrawlingResponse;
+ } catch {
+ return null;
+ }
+ };
const [activeItem, setActiveItem] = useState(savedActiveItem || initialActiveItem);
- // 현재 위저드 단계 (0: Asset, 1: Sound Studio, 2: Completion)
- const [wizardStep, setWizardStep] = useState(savedWizardStep ? parseInt(savedWizardStep, 10) : 0);
+
+ // 초기 위저드 단계 결정
+ const getInitialWizardStep = (): number => {
+ // 저장된 단계가 있으면 사용
+ if (savedWizardStep !== null) {
+ return parseInt(savedWizardStep, 10);
+ }
+ // 분석 데이터가 있으면 에셋 관리(1)부터, 없으면 URL 입력(-2)부터
+ const hasAnalysisData = initialAnalysisData || savedAnalysisData;
+ return hasAnalysisData ? 1 : -2;
+ };
+
+ const [wizardStep, setWizardStep] = useState(getInitialWizardStep());
const [songTaskId, setSongTaskId] = useState(savedSongTaskId);
const [imageTaskId, setImageTaskId] = useState(savedImageTaskId);
const [videoGenerationStatus, setVideoGenerationStatus] = useState<'idle' | 'generating' | 'complete' | 'error'>('idle');
const [videoGenerationProgress, setVideoGenerationProgress] = useState(0);
+ const [analysisData, setAnalysisData] = useState(parseAnalysisData());
+ const [analysisError, setAnalysisError] = useState(null);
+
+ // 현재 비즈니스 정보 (분석 데이터에서 가져오거나 prop에서 가져옴)
+ const currentBusinessInfo = analysisData?.processed_info || businessInfo;
// URL 이미지를 ImageItem 형태로 변환하여 초기화
- const [imageList, setImageList] = useState(
- initialImageList.map(url => ({ type: 'url', url }))
- );
+ const getInitialImageList = (): ImageItem[] => {
+ if (analysisData?.image_list && analysisData.image_list.length > 0) {
+ return analysisData.image_list.map(url => ({ type: 'url', url }));
+ }
+ return initialImageList.map(url => ({ type: 'url', url }));
+ };
+
+ const [imageList, setImageList] = useState(getInitialImageList());
+
+ // analysisData 변경 시 imageList 업데이트
+ useEffect(() => {
+ if (analysisData?.image_list && analysisData.image_list.length > 0) {
+ setImageList(analysisData.image_list.map(url => ({ type: 'url', url })));
+ }
+ }, [analysisData]);
const handleRemoveImage = (index: number) => {
setImageList(prev => {
@@ -83,10 +143,12 @@ const GenerationFlow: React.FC = ({ onHome, initialActiveIt
// 홈 버튼(로고) 클릭 시 모든 상태 초기화 후 홈으로 이동
const handleHome = () => {
clearAllProjectStorage();
- setWizardStep(0);
+ localStorage.removeItem(ANALYSIS_DATA_KEY);
+ setWizardStep(-2);
setSongTaskId(null);
setImageTaskId(null);
- setImageList(initialImageList.map(url => ({ type: 'url', url })));
+ setAnalysisData(null);
+ setImageList([]);
onHome();
};
@@ -96,6 +158,50 @@ const GenerationFlow: React.FC = ({ onHome, initialActiveIt
localStorage.setItem(WIZARD_STEP_KEY, step.toString());
};
+ // URL 분석 시작
+ const handleStartAnalysis = async (url: string) => {
+ if (!url.trim()) return;
+
+ goToWizardStep(-1); // 로딩 상태로
+ setAnalysisError(null);
+
+ try {
+ const data = await crawlUrl(url);
+
+ // 기본값 보장
+ if (data.marketing_analysis) {
+ data.marketing_analysis.tags = data.marketing_analysis.tags || [];
+ data.marketing_analysis.facilities = data.marketing_analysis.facilities || [];
+ data.marketing_analysis.report = data.marketing_analysis.report || '';
+ }
+ if (data.processed_info) {
+ data.processed_info.customer_name = data.processed_info.customer_name || '알 수 없음';
+ data.processed_info.region = data.processed_info.region || '';
+ data.processed_info.detail_region_info = data.processed_info.detail_region_info || '';
+ }
+ data.image_list = data.image_list || [];
+
+ setAnalysisData(data);
+ localStorage.setItem(ANALYSIS_DATA_KEY, JSON.stringify(data));
+ goToWizardStep(0); // 브랜드 분석 결과로
+ } catch (err) {
+ console.error('Crawling failed:', err);
+ const errorMessage = err instanceof Error ? err.message : '분석 중 오류가 발생했습니다. 다시 시도해주세요.';
+ setAnalysisError(errorMessage);
+ goToWizardStep(-2); // URL 입력으로 돌아가기
+ }
+ };
+
+ // 브랜드 분석에서 콘텐츠 생성 클릭
+ const handleAnalysisGenerate = () => {
+ goToWizardStep(1); // 에셋 관리로
+ };
+
+ // 브랜드 분석에서 뒤로가기
+ const handleAnalysisBack = () => {
+ goToWizardStep(-2); // URL 입력으로
+ };
+
// activeItem 변경 시 localStorage에 저장
useEffect(() => {
localStorage.setItem(ACTIVE_ITEM_KEY, activeItem);
@@ -104,7 +210,31 @@ const GenerationFlow: React.FC = ({ onHome, initialActiveIt
// 새 프로젝트 만들기 - 단계별 컨텐츠 렌더링
const renderWizardContent = () => {
switch (wizardStep) {
+ case -2:
+ // URL 입력 단계
+ return (
+ {
@@ -115,32 +245,32 @@ const GenerationFlow: React.FC = ({ onHome, initialActiveIt
setImageTaskId(taskId);
localStorage.setItem(IMAGE_TASK_ID_KEY, taskId);
- goToWizardStep(1);
+ goToWizardStep(2);
}}
imageList={imageList}
onRemoveImage={handleRemoveImage}
onAddImages={handleAddImages}
/>
);
- case 1:
+ case 2:
return (
goToWizardStep(0)}
+ onBack={() => goToWizardStep(1)}
onNext={(taskId: string) => {
setSongTaskId(taskId);
localStorage.setItem(SONG_TASK_ID_KEY, taskId);
- goToWizardStep(2);
+ goToWizardStep(3);
}}
- businessInfo={businessInfo}
+ businessInfo={currentBusinessInfo}
imageTaskId={imageTaskId}
videoGenerationStatus={videoGenerationStatus}
videoGenerationProgress={videoGenerationProgress}
/>
);
- case 2:
+ case 3:
return (
goToWizardStep(1)}
+ onBack={() => goToWizardStep(2)}
songTaskId={songTaskId}
onVideoStatusChange={setVideoGenerationStatus}
onVideoProgressChange={setVideoGenerationProgress}
@@ -158,6 +288,10 @@ const GenerationFlow: React.FC = ({ onHome, initialActiveIt
case '비즈니스 설정':
return
{renderWizardContent()}
@@ -172,10 +306,34 @@ const GenerationFlow: React.FC = ({ onHome, initialActiveIt
}
};
+ // 로딩 화면에서만 Sidebar 숨김
+ const showSidebar = wizardStep !== -1;
+
+ // 브랜드 분석(0)일 때는 전체 페이지 스크롤
+ const isBrandAnalysis = activeItem === '새 프로젝트 만들기' && wizardStep === 0;
+ // 스크롤이 필요한 페이지: 대시보드, 비즈니스 설정, 브랜드 분석(0)
+ const needsScroll = activeItem === '대시보드' || activeItem === '비즈니스 설정' || isBrandAnalysis;
+
+ // 브랜드 분석일 때는 높이 제한 없이 자연 스크롤
+ if (isBrandAnalysis) {
+ return (
+
+ {showSidebar && (
+
+ );
+ }
+
return (
-
+ {renderContent()}
+
+
-
+ = ({ onAnalyze, error }) => {
+ const [url, setUrl] = useState('');
+
+ const handleSubmit = (e: React.FormEvent) => {
+ e.preventDefault();
+ if (url.trim()) {
+ onAnalyze(url.trim());
+ }
+ };
+
+ return (
+ = ({ onAnalyze, onNext, error: externalError, scrollProgress = 0 }) => {
const [url, setUrl] = useState('');
const [localError, setLocalError] = useState('');
+ const [isFocused, setIsFocused] = useState(false);
const orbRefs = useRef<(HTMLDivElement | null)[]>([]);
const animationRefs = useRef([]);
@@ -174,8 +175,8 @@ const HeroSection: React.FC = ({ onAnalyze, onNext, error: ext
+ {showSidebar && (
+
diff --git a/src/pages/Dashboard/UrlInputContent.tsx b/src/pages/Dashboard/UrlInputContent.tsx
new file mode 100644
index 0000000..78ce5dd
--- /dev/null
+++ b/src/pages/Dashboard/UrlInputContent.tsx
@@ -0,0 +1,69 @@
+
+import React, { useState } from 'react';
+
+interface UrlInputContentProps {
+ onAnalyze: (url: string) => void;
+ error: string | null;
+}
+
+const UrlInputContent: React.FC
{renderContent()}
+
+ );
+};
+
+export default UrlInputContent;
diff --git a/src/pages/Landing/HeroSection.tsx b/src/pages/Landing/HeroSection.tsx
index 8ed1a35..14ccd42 100755
--- a/src/pages/Landing/HeroSection.tsx
+++ b/src/pages/Landing/HeroSection.tsx
@@ -50,6 +50,7 @@ const orbConfigs: OrbConfig[] = [
const HeroSection: React.FC
+ {/* 아이콘 */}
+
+
+
+
+
+ {/* 제목 */}
+ 브랜드 분석
++ 쉽고 빠르게, 브랜드 소셜 미디어 캠페인을 만드세요. +
+ + {/* URL 입력 폼 */} + + + {/* 안내 텍스트 */} ++ 네이버 지도에서 업체 URL을 복사하여 붙여넣기 해주세요. +
+
{/* Logo Image */}
@@ -183,7 +184,7 @@ const HeroSection: React.FC = ({ onAnalyze, onNext, error: ext
{/* Input Form */}
= {
'ไทย': 'Thai',
'Tiếng Việt': 'Vietnamese',
};
+
+// 카카오 로그인 URL 응답
+export interface KakaoLoginUrlResponse {
+ auth_url: string;
+}
+
+// 카카오 콜백 사용자 정보
+export interface KakaoCallbackUser {
+ id: number;
+ nickname: string;
+ email: string | null;
+ profile_image_url: string | null;
+ is_new_user: boolean;
+}
+
+// 카카오 콜백 응답 (JWT 토큰)
+export interface KakaoCallbackResponse {
+ access_token: string;
+ refresh_token: string;
+ token_type: string;
+ expires_in: number;
+ user: KakaoCallbackUser;
+ redirect_url: string;
+}
+
+// 토큰 갱신 응답
+export interface TokenRefreshResponse {
+ access_token: string;
+ token_type: string;
+ expires_in: number;
+}
+
+// 사용자 정보 응답
+export interface UserMeResponse {
+ id: number;
+ kakao_id: string;
+ nickname: string;
+ profile_image: string | null;
+ created_at: string;
+}
diff --git a/src/utils/api.ts b/src/utils/api.ts
index 1d19496..f85b293 100644
--- a/src/utils/api.ts
+++ b/src/utils/api.ts
@@ -13,6 +13,10 @@ import {
VideoDownloadResponse,
ImageUrlItem,
ImageUploadResponse,
+ KakaoLoginUrlResponse,
+ KakaoCallbackResponse,
+ TokenRefreshResponse,
+ UserMeResponse,
} from '../types/api';
const API_URL = import.meta.env.VITE_API_URL || 'http://40.82.133.44';
@@ -344,3 +348,160 @@ export async function waitForVideoComplete(
return poll();
}
+
+// ============================================
+// 카카오 인증 API
+// ============================================
+
+// 토큰 저장 키
+const ACCESS_TOKEN_KEY = 'castad_access_token';
+const REFRESH_TOKEN_KEY = 'castad_refresh_token';
+
+// 토큰 저장
+export function saveTokens(accessToken: string, refreshToken: string) {
+ localStorage.setItem(ACCESS_TOKEN_KEY, accessToken);
+ localStorage.setItem(REFRESH_TOKEN_KEY, refreshToken);
+}
+
+// 토큰 가져오기
+export function getAccessToken(): string | null {
+ return localStorage.getItem(ACCESS_TOKEN_KEY);
+}
+
+export function getRefreshToken(): string | null {
+ return localStorage.getItem(REFRESH_TOKEN_KEY);
+}
+
+// 토큰 삭제
+export function clearTokens() {
+ localStorage.removeItem(ACCESS_TOKEN_KEY);
+ localStorage.removeItem(REFRESH_TOKEN_KEY);
+}
+
+// 인증 헤더 생성
+function getAuthHeader(): HeadersInit {
+ const token = getAccessToken();
+ return token ? { 'Authorization': `Bearer ${token}` } : {};
+}
+
+// 카카오 로그인 URL 획득
+export async function getKakaoLoginUrl(): Promise {
+ const response = await fetch(`${API_URL}/user/auth/kakao/login`, {
+ method: 'GET',
+ });
+
+ if (!response.ok) {
+ throw new Error(`HTTP error! status: ${response.status}`);
+ }
+
+ return response.json();
+}
+
+// 카카오 콜백 처리 (인가 코드로 JWT 토큰 발급)
+export async function kakaoCallback(code: string): Promise {
+ const response = await fetch(`${API_URL}/user/auth/kakao/callback?code=${encodeURIComponent(code)}`, {
+ method: 'GET',
+ });
+
+ if (!response.ok) {
+ throw new Error(`HTTP error! status: ${response.status}`);
+ }
+
+ const data: KakaoCallbackResponse = await response.json();
+
+
+ // 토큰 저장
+ saveTokens(data.access_token, data.refresh_token);
+
+ return data;
+}
+
+// Access Token 갱신
+export async function refreshAccessToken(): Promise {
+ const refreshToken = getRefreshToken();
+
+ if (!refreshToken) {
+ throw new Error('No refresh token available');
+ }
+
+ const response = await fetch(`${API_URL}/user/auth/refresh`, {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({ refresh_token: refreshToken }),
+ });
+
+ if (!response.ok) {
+ // 리프레시 토큰도 만료된 경우 토큰 삭제
+ if (response.status === 401) {
+ clearTokens();
+ }
+ throw new Error(`HTTP error! status: ${response.status}`);
+ }
+
+ const data: TokenRefreshResponse = await response.json();
+
+ // 새 액세스 토큰 저장
+ const currentRefreshToken = getRefreshToken();
+ if (currentRefreshToken) {
+ saveTokens(data.access_token, currentRefreshToken);
+ }
+
+ return data;
+}
+
+// 로그아웃
+export async function logout(): Promise {
+ const response = await fetch(`${API_URL}/user/auth/logout`, {
+ method: 'POST',
+ headers: {
+ ...getAuthHeader(),
+ },
+ });
+
+ // 응답과 관계없이 로컬 토큰 삭제
+ clearTokens();
+
+ if (!response.ok) {
+ throw new Error(`HTTP error! status: ${response.status}`);
+ }
+}
+
+// 모든 기기에서 로그아웃
+export async function logoutAll(): Promise {
+ const response = await fetch(`${API_URL}/user/auth/logout/all`, {
+ method: 'POST',
+ headers: {
+ ...getAuthHeader(),
+ },
+ });
+
+ // 응답과 관계없이 로컬 토큰 삭제
+ clearTokens();
+
+ if (!response.ok) {
+ throw new Error(`HTTP error! status: ${response.status}`);
+ }
+}
+
+// 현재 사용자 정보 조회
+export async function getUserMe(): Promise {
+ const response = await fetch(`${API_URL}/user/auth/me`, {
+ method: 'GET',
+ headers: {
+ ...getAuthHeader(),
+ },
+ });
+
+ if (!response.ok) {
+ throw new Error(`HTTP error! status: ${response.status}`);
+ }
+
+ return response.json();
+}
+
+// 로그인 여부 확인
+export function isLoggedIn(): boolean {
+ return !!getAccessToken();
+}
@@ -183,7 +184,7 @@ const HeroSection: React.FC
URL 입력
-
diff --git a/src/types/api.ts b/src/types/api.ts
index 04d454a..fa9fab3 100644
--- a/src/types/api.ts
+++ b/src/types/api.ts
@@ -180,3 +180,43 @@ export const LANGUAGE_MAP: Record
+ = ({ onBack, onLogin }) => {
+ const [isLoading, setIsLoading] = useState(false);
+ const [error, setError] = useState(null);
+
+ // 카카오 콜백 처리 (URL에서 code 파라미터 확인)
+ useEffect(() => {
+ const urlParams = new URLSearchParams(window.location.search);
+ const code = urlParams.get('code');
+
+ if (code) {
+ handleKakaoCallback(code);
+ }
+ }, []);
+
+ const handleKakaoCallback = async (code: string) => {
+ setIsLoading(true);
+ setError(null);
+
+ try {
+ await kakaoCallback(code);
+
+ // URL에서 code 파라미터 제거
+ const url = new URL(window.location.href);
+ url.searchParams.delete('code');
+ window.history.replaceState({}, document.title, url.pathname);
+
+ // 로그인 성공
+ onLogin();
+ } catch (err) {
+ console.error('Kakao callback failed:', err);
+ setError('카카오 로그인에 실패했습니다. 다시 시도해주세요.');
+
+ // URL에서 code 파라미터 제거
+ const url = new URL(window.location.href);
+ url.searchParams.delete('code');
+ window.history.replaceState({}, document.title, url.pathname);
+ } finally {
+ setIsLoading(false);
+ }
+ };
+
+ const handleKakaoLogin = async () => {
+ setIsLoading(true);
+ setError(null);
+
+ try {
+ const response = await getKakaoLoginUrl();
+
+ // 카카오 로그인 페이지로 리다이렉트
+ window.location.href = response.auth_url;
+ } catch (err) {
+ console.error('Failed to get Kakao login URL:', err);
+ setError('로그인 URL을 가져오는데 실패했습니다. 다시 시도해주세요.');
+ setIsLoading(false);
+ }
+ };
+
return (
= ({ onAnalyze, onNext, error: ext
setUrl(e.target.value);
if (localError) setLocalError('');
}}
+ onFocus={() => setIsFocused(true)}
+ onBlur={() => setIsFocused(false)}
placeholder="https://www.castad.com"
- className={`hero-input ${error ? 'error' : ''}`}
+ className={`hero-input ${url ? 'has-value' : ''}`}
/>
+ {url && (
+
+ )}
URL에서 가져온 정보로 영상이 자동 생성됩니다.
{error && (
diff --git a/src/pages/Login/LoginSection.tsx b/src/pages/Login/LoginSection.tsx
index 92ea686..ae259f2 100755
--- a/src/pages/Login/LoginSection.tsx
+++ b/src/pages/Login/LoginSection.tsx
@@ -1,5 +1,6 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
+import { getKakaoLoginUrl, kakaoCallback } from '../../utils/api';
interface LoginSectionProps {
onBack: () => void;
@@ -7,10 +8,66 @@ interface LoginSectionProps {
}
const LoginSection: React.FC
{/* Back Button */}
-
+ {/* Error Message */}
+ {error && (
+
+ {error}
+
+ )}
+
{/* Kakao Login Button */}
-