Compare commits
14 Commits
feature-cr
...
main
| Author | SHA1 | Date |
|---|---|---|
 김성경
|
cd7b1bf9f3 | |
|
김성경
|
b18dd7aa4d | |
|
김성경
|
7f1e2b83a9 | |
|
김성경
|
1d855fd14c | |
|
김성경
|
0ea14da748 | |
|
김성경
|
f3195628d2 | |
|
김성경
|
9910d0146c | |
|
김성경
|
9697c40ed2 | |
|
김성경
|
bf5fc05a25 | |
|
김성경
|
d3502fd421 | |
|
김성경
|
f8ae482a16 | |
|
김성경
|
8a60d69467 | |
|
김성경
|
0a055a605c | |
|
김성경
|
a155a98767 |
|
|
@ -5,6 +5,14 @@
|
|||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<title>ADO2</title>
|
||||
<!-- ① 페이지 설명 -->
|
||||
<meta name="description" content="ADO2는 ㈜에이아이오투오의 AI 기반 마케팅 자동화 플랫폼입니다. 콘텐츠 제작부터 채널 배포까지 자동으로 처리합니다." />
|
||||
<!-- ② Open Graph 제목 -->
|
||||
<meta property="og:title" content="ADO2 - AI 마케팅 자동화 플랫폼" />
|
||||
<!-- ③ Open Graph 설명 -->
|
||||
<meta property="og:description" content="ADO2는 ㈜에이아이오투오의 AI 기반 마케팅 자동화 플랫폼입니다. 콘텐츠 제작부터 채널 배포까지 자동으로 처리합니다." />
|
||||
<meta property="og:url" content="https://demo.castad.net/" />
|
||||
<meta property="og:type" content="website" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon_32.svg" sizes="32x32">
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon_48.svg" sizes="48x48">
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
|
|
@ -28,6 +36,7 @@
|
|||
}
|
||||
}
|
||||
</script>
|
||||
<script src="https://t1.kakaocdn.net/kakao_js_sdk/2.7.4/kakao.min.js" crossorigin="anonymous"></script>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&family=Playfair+Display:ital,wght@0,700;1,700&display=swap" rel="stylesheet">
|
||||
|
|
|
|||
|
|
@ -17,55 +17,76 @@
|
|||
</head>
|
||||
<body>
|
||||
<h1>개인정보처리방침 (Privacy Policy)</h1>
|
||||
<p class="updated"><strong>시행일:</strong> 2026년 5월 7일 | <strong>최종 수정일:</strong> 2026년 5월 7일</p>
|
||||
<p class="updated"><strong>시행일:</strong> 2026년 5월 7일 | <strong>최종 수정일:</strong> 2026년 5월 27일</p>
|
||||
|
||||
<p>㈜에이아이오투오(이하 "회사")는 AI 마케팅 자동화 서비스 ADO2(이하 "서비스")를 제공함에 있어 사용자의 개인정보를 중요시하며, 「개인정보 보호법」 등 관련 법령을 성실히 준수합니다.</p>
|
||||
|
||||
<h2>1. 수집하는 개인정보 항목 및 수집 방법</h2>
|
||||
<p>회사는 서비스 제공을 위해 아래와 같은 개인정보를 수집합니다.</p>
|
||||
<ul>
|
||||
<li><strong>Google OAuth를 통한 수집:</strong> 이름, 이메일 주소, 프로필 사진</li>
|
||||
<li><strong>마케팅 자동화 서비스 제공용 (해당 권한 동의 시):</strong> YouTube 채널 데이터, Google 광고 계정 데이터 등 연동된 마케팅 채널 데이터</li>
|
||||
<li><strong>카카오 로그인을 통한 수집:</strong> 이름, 이메일 주소, 프로필 사진 — 서비스 회원 가입 및 로그인에 사용</li>
|
||||
<li><strong>Google 사용자 프로필 :</strong> YouTube 채널 연동 시 연결된 구글 계정의 이름 및 프로필 사진 확인 — 채널 소유자 식별 목적으로만 사용</li>
|
||||
<li><strong>YouTube Data API :</strong> 채널 정보, 동영상 목록, 재생목록 등 YouTube 계정 데이터 (읽기 전용)</li>
|
||||
<li><strong>YouTube Data API :</strong> AI가 생성한 콘텐츠를 YouTube에 업로드하기 위한 동영상 관리 권한</li>
|
||||
<li><strong>YouTube Analytics API :</strong> 채널 및 동영상의 조회수, 시청 시간 등 성과 지표 데이터 (읽기 전용)</li>
|
||||
<li><strong>서비스 이용 과정에서 자동 수집:</strong> 접속 IP, 쿠키, 서비스 이용 기록</li>
|
||||
</ul>
|
||||
|
||||
<h2>2. 개인정보의 수집 및 이용 목적</h2>
|
||||
<h2>2. Google 사용자 데이터의 수집 및 이용 목적</h2>
|
||||
<p>회사가 접근하는 Google 사용자 데이터는 아래 목적으로만 사용되며, 명시된 목적 외에는 사용하지 않습니다.</p>
|
||||
<ul>
|
||||
<li>AI 마케팅 콘텐츠 자동 생성 및 배포 서비스 제공</li>
|
||||
<li>계정 연동 및 사용자 식별·본인 인증</li>
|
||||
<li>서비스 품질 개선 및 통계 분석</li>
|
||||
<li>공지사항 전달 및 고객 상담</li>
|
||||
<li><strong>Google 사용자 프로필:</strong> YouTube 채널 연동 과정에서 연결 대상 구글 계정을 식별하는 용도로만 사용하며, 서비스 로그인에는 사용되지 않습니다.</li>
|
||||
<li><strong>YouTube 계정 데이터 (읽기):</strong> 기존 채널 정보·동영상 현황을 분석하여 AI 콘텐츠 전략 수립에 활용합니다.</li>
|
||||
<li><strong>YouTube 동영상 업로드:</strong> AI가 생성한 영상을 사용자의 YouTube 채널에 업로드합니다. 업로드는 반드시 사용자의 명시적 요청에 의해서만 실행됩니다.</li>
|
||||
<li><strong>YouTube 분석 데이터:</strong> 채널 성과 지표를 분석하여 AI 마케팅 전략 수립 및 콘텐츠 최적화에 활용합니다.</li>
|
||||
</ul>
|
||||
|
||||
<div class="google-policy">
|
||||
<p><strong>[Google API 서비스 사용자 데이터 정책 준수]</strong><br><br>
|
||||
㈜에이아이오투오가 운영하는 ADO2 서비스가 Google API로부터 수신한 정보의 사용 및 타 앱으로의 전송은,
|
||||
<a href="https://developers.google.com/terms/api-services-user-data-policy" target="_blank">Google API 서비스 사용자 데이터 정책</a>의
|
||||
제한적 사용(Limited Use) 요건을 포함한 모든 정책을 엄격히 준수합니다.</p>
|
||||
제한적 사용(Limited Use) 요건을 포함한 모든 정책을 엄격히 준수합니다.<br><br>
|
||||
특히, Google API로부터 수신한 데이터는 <strong>AI·ML 모델 학습에 사용되지 않으며</strong>, 사용자가 명시적으로 요청한 서비스 기능 제공 목적 외에는 사용·전송·공유되지 않습니다.</p>
|
||||
</div>
|
||||
|
||||
<h2>3. 개인정보의 보유 및 이용 기간</h2>
|
||||
<h2>3. Google 사용자 데이터의 제3자 공유</h2>
|
||||
<p>회사는 Google API로부터 수신한 사용자 데이터를 아래 경우를 제외하고 어떠한 제3자에게도 판매하거나 공유하지 않습니다.</p>
|
||||
<ul>
|
||||
<li><strong>AI 콘텐츠 생성 처리:</strong> 서비스 제공에 필수적인 AI 생성 기능 수행을 위해 처리 서버로 전달될 수 있으며, 해당 처리는 서비스 제공 목적으로만 사용됩니다.</li>
|
||||
<li><strong>법적 요구:</strong> 관련 법령에 의거한 수사기관 등의 적법한 요청이 있는 경우</li>
|
||||
</ul>
|
||||
<p>Google 사용자 데이터는 광고, 마케팅, 프로파일링 목적으로 사용되지 않습니다.</p>
|
||||
|
||||
<h2>4. Google 사용자 데이터의 저장 및 보안</h2>
|
||||
<ul>
|
||||
<li>Google OAuth 액세스 토큰 및 리프레시 토큰은 암호화된 상태로 보관됩니다.</li>
|
||||
<li>Google API를 통해 읽어온 데이터는 서비스 기능 처리에 필요한 최소한의 시간 동안만 임시 보유하며, 처리 완료 후 삭제됩니다.</li>
|
||||
<li>서버와의 모든 통신은 TLS(HTTPS)를 통해 암호화됩니다.</li>
|
||||
<li>데이터 접근 권한은 서비스 운영에 필요한 최소 인원에게만 부여됩니다.</li>
|
||||
</ul>
|
||||
|
||||
<h2>5. 개인정보의 보유 및 이용 기간 / 데이터 삭제</h2>
|
||||
<p>원칙적으로 회원 탈퇴 또는 개인정보 수집·이용 목적이 달성된 후에는 해당 정보를 지체 없이 파기합니다. 단, 관련 법령에 따라 보존이 필요한 경우 해당 기간 동안 보관합니다.</p>
|
||||
<ul>
|
||||
<li>전자상거래 관련 기록: 5년 (전자상거래 등에서의 소비자보호에 관한 법률)</li>
|
||||
<li>접속 로그 기록: 3개월 (통신비밀보호법)</li>
|
||||
<li>Google 연동 토큰: 연동 해제 또는 회원 탈퇴 즉시 삭제</li>
|
||||
</ul>
|
||||
<p><strong>데이터 삭제 요청 방법:</strong> 아래 이메일(<a href="mailto:o2oteam@o2o.kr">o2oteam@o2o.kr</a>)로 요청하시면 <strong>영업일 기준 7일 이내</strong>에 처리 결과를 안내해 드립니다. Google 계정 연동 해제는 서비스 내 계정 설정에서 직접 처리하실 수 있으며, 해제 즉시 관련 토큰이 삭제됩니다.</p>
|
||||
|
||||
<h2>4. 개인정보의 제3자 제공</h2>
|
||||
<p>회사는 사용자의 사전 동의 없이 개인정보를 외부에 제공하지 않습니다. 다만, 법령에 의거한 수사기관 등의 적법한 요청이 있는 경우는 예외로 합니다.</p>
|
||||
|
||||
<h2>5. 정보주체의 권리 및 행사 방법</h2>
|
||||
<h2>6. 정보주체의 권리 및 행사 방법</h2>
|
||||
<p>사용자는 언제든지 자신의 개인정보에 대한 열람, 수정, 삭제, 처리 정지를 요청할 수 있습니다. 서비스 내 계정 설정에서 직접 처리하거나 아래 문의처로 연락해 주시기 바랍니다.</p>
|
||||
<p>또한, <a href="https://myaccount.google.com/permissions" target="_blank">Google 계정 권한 관리 페이지</a>에서 ADO2 앱의 Google 데이터 접근 권한을 언제든지 직접 취소하실 수 있습니다.</p>
|
||||
|
||||
<h2>6. 개인정보 보호책임자 및 문의처</h2>
|
||||
<h2>7. 개인정보 보호책임자 및 문의처</h2>
|
||||
<p>개인정보 보호와 관련된 불만 처리 및 피해 구제에 관한 사항은 아래로 문의해 주시기 바랍니다.</p>
|
||||
<ul>
|
||||
<li><strong>회사명:</strong> ㈜에이아이오투오</li>
|
||||
<li><strong>서비스명:</strong> ADO2</li>
|
||||
<li><strong>이메일:</strong> o2oteam@o2o.kr</li>
|
||||
<li><strong>이메일:</strong> <a href="mailto:o2oteam@o2o.kr">o2oteam@o2o.kr</a></li>
|
||||
<li><strong>웹사이트:</strong> https://demo.castad.net</li>
|
||||
</ul>
|
||||
|
||||
<p style="margin-top:40px; font-size:14px; color:#999;">본 방침은 2026년 5월 7일부터 시행됩니다.</p>
|
||||
<p style="margin-top:40px; font-size:14px; color:#999;">본 방침은 2026년 5월 7일부터 시행됩니다. 최종 수정일: 2026년 5월 27일</p>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -15,7 +15,7 @@
|
|||
</head>
|
||||
<body>
|
||||
<h1>서비스 이용약관 (Terms of Service)</h1>
|
||||
<p class="updated"><strong>시행일:</strong> 2026년 5월 7일 | <strong>최종 수정일:</strong> 2026년 5월 7일</p>
|
||||
<p class="updated"><strong>시행일:</strong> 2026년 5월 7일 | <strong>최종 수정일:</strong> 2026년 5월 21일</p>
|
||||
|
||||
<h2>제 1 조 (목적)</h2>
|
||||
<p>본 약관은 ㈜에이아이오투오(이하 "회사")가 제공하는 AI 마케팅 자동화 서비스 ADO2(이하 "서비스")의 이용과 관련하여, 회사와 이용자(이하 "회원") 간의 권리, 의무 및 책임사항을 규정함을 목적으로 합니다.</p>
|
||||
|
|
@ -41,7 +41,8 @@
|
|||
</ul>
|
||||
|
||||
<h2>제 6 조 (외부 API 연동 및 데이터 활용)</h2>
|
||||
<p>서비스는 Google, YouTube, Naver 등의 제3자 API를 활용하여 마케팅 자동화 기능을 제공합니다. 회원은 각 외부 서비스의 이용약관 및 정책을 준수할 의무가 있으며, 외부 API 제공사의 정책 변경으로 인한 서비스 제한에 대해 회사는 면책됩니다.</p>
|
||||
<p>서비스는 Google, YouTube, Naver 등의 제3자 API를 활용하여 마케팅 자동화 기능을 제공합니다. 특히 YouTube 서비스 연동을 위해 YouTube Data API 및 YouTube Analytics API를 사용하며, 이를 통해 수집·처리되는 데이터는 <a href="/privacy.html">개인정보처리방침</a>에 따라 관리됩니다. 회원은 각 외부 서비스의 이용약관 및 정책을 준수할 의무가 있으며, 외부 API 제공사의 정책 변경으로 인한 서비스 제한에 대해 회사는 면책됩니다.</p>
|
||||
<p>YouTube API 서비스 이용과 관련하여 <a href="https://www.youtube.com/t/terms" target="_blank">YouTube 이용약관</a> 및 <a href="https://policies.google.com/privacy" target="_blank">Google 개인정보처리방침</a>이 함께 적용됩니다.</p>
|
||||
|
||||
<h2>제 7 조 (AI 생성 콘텐츠의 권리)</h2>
|
||||
<p>서비스 내에서 AI가 생성한 콘텐츠에 대한 권리 관계는 관련 법령 및 회사의 별도 정책에 따릅니다. 회원이 직접 입력한 정보(매장 URL, 상호명 등)를 기반으로 생성된 콘텐츠에 대한 책임은 회원에게 있습니다.</p>
|
||||
|
|
|
|||
50
src/App.tsx
50
src/App.tsx
|
|
@ -12,7 +12,10 @@ import GenerationFlow from './pages/Dashboard/GenerationFlow';
|
|||
import SocialConnectSuccess from './pages/Social/SocialConnectSuccess';
|
||||
import SocialConnectError from './pages/Social/SocialConnectError';
|
||||
import YouTubeOAuthCallback from './pages/Social/YouTubeOAuthCallback';
|
||||
import { crawlUrl, autocomplete, kakaoCallback, isLoggedIn, saveTokens, AutocompleteRequest } from './utils/api';
|
||||
import ADO2ContentsPage from './pages/Dashboard/ADO2ContentsPage';
|
||||
import VideoDetailPage from './components/VideoDetailPage';
|
||||
import LoginPromptModal from './components/LoginPromptModal';
|
||||
import { crawlUrl, autocomplete, marketingAnalysis, kakaoCallback, isLoggedIn, saveTokens, AutocompleteRequest } from './utils/api';
|
||||
import { saveSearchHistory } from './components/SearchHistory/useSearchHistory';
|
||||
import { CrawlingResponse } from './types/api';
|
||||
|
||||
|
|
@ -144,6 +147,12 @@ const App: React.FC = () => {
|
|||
localStorage.removeItem('castad_wizard_step');
|
||||
localStorage.removeItem('castad_active_item');
|
||||
}
|
||||
const redirectPath = sessionStorage.getItem('castad_login_redirect');
|
||||
sessionStorage.removeItem('castad_login_redirect');
|
||||
if (redirectPath && redirectPath !== '/') {
|
||||
window.location.href = redirectPath;
|
||||
return;
|
||||
}
|
||||
setInitialTab('새 프로젝트 만들기');
|
||||
setViewMode('generation_flow');
|
||||
} catch (err) {
|
||||
|
|
@ -275,8 +284,7 @@ const App: React.FC = () => {
|
|||
setIsAnalysisComplete(true);
|
||||
} catch (err) {
|
||||
console.error('Crawling failed:', err);
|
||||
const errorMessage = err instanceof Error ? err.message : t('app.analysisError');
|
||||
setError(errorMessage);
|
||||
setError(t('app.analysisError'));
|
||||
setViewMode('landing');
|
||||
}
|
||||
};
|
||||
|
|
@ -301,9 +309,31 @@ const App: React.FC = () => {
|
|||
setIsAnalysisComplete(true);
|
||||
} catch (err) {
|
||||
console.error('Autocomplete failed:', err);
|
||||
const is404 = err instanceof Error && err.message.includes('status: 404');
|
||||
const errorMessage = is404 ? t('app.autocompleteError') : (err instanceof Error ? err.message : t('app.autocompleteGeneralError'));
|
||||
setError(errorMessage);
|
||||
setError(t('app.autocompleteError'));
|
||||
setViewMode('landing');
|
||||
}
|
||||
};
|
||||
|
||||
// 업체명·주소 수동 입력으로 마케팅 분석 API 호출
|
||||
const handleManualInput = async (businessName: string, address: string) => {
|
||||
setViewMode('loading');
|
||||
setIsAnalysisComplete(false);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
const data = await marketingAnalysis(businessName, address);
|
||||
|
||||
if (!validateCrawlingResponse(data)) {
|
||||
throw new Error(t('app.autocompleteError'));
|
||||
}
|
||||
|
||||
setAnalysisData(data);
|
||||
localStorage.setItem(ANALYSIS_DATA_KEY, JSON.stringify(data));
|
||||
saveSearchHistory({ type: 'name', value: businessName, address, roadAddress: address });
|
||||
setIsAnalysisComplete(true);
|
||||
} catch (err) {
|
||||
console.error('Marketing analysis failed:', err);
|
||||
setError(t('app.autocompleteError'));
|
||||
setViewMode('landing');
|
||||
}
|
||||
};
|
||||
|
|
@ -390,6 +420,13 @@ const App: React.FC = () => {
|
|||
return <SocialConnectError />;
|
||||
}
|
||||
|
||||
// 영상 상세 페이지 (/video/{id}) — 인증 게이트는 VideoDetailPage 내부에서 처리
|
||||
const videoDetailMatch = pathname.match(/^\/video\/([^/]+)$/);
|
||||
if (videoDetailMatch) {
|
||||
return <VideoDetailPage videoId={videoDetailMatch[1]} />;
|
||||
}
|
||||
|
||||
|
||||
// 카카오 콜백 처리 중 로딩 화면 표시
|
||||
if (isProcessingCallback) {
|
||||
return (
|
||||
|
|
@ -449,6 +486,7 @@ const App: React.FC = () => {
|
|||
<HeroSection
|
||||
onAnalyze={handleStartAnalysis}
|
||||
onAutocomplete={handleAutocomplete}
|
||||
onManualInput={handleManualInput}
|
||||
onTestData={handleTestData}
|
||||
onNext={() => scrollToSection(1)}
|
||||
error={error}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,95 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
interface BusinessNameInputModalProps {
|
||||
onClose: () => void;
|
||||
onSubmit: (businessName: string, address: string) => void;
|
||||
}
|
||||
|
||||
const BusinessNameInputModal: React.FC<BusinessNameInputModalProps> = ({ onClose, onSubmit }) => {
|
||||
const { t } = useTranslation();
|
||||
const [businessName, setBusinessName] = useState('');
|
||||
const [address, setAddress] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
document.body.style.overflow = 'hidden';
|
||||
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') onClose();
|
||||
};
|
||||
document.addEventListener('keydown', handleKeyDown);
|
||||
|
||||
return () => {
|
||||
document.body.style.overflow = '';
|
||||
document.removeEventListener('keydown', handleKeyDown);
|
||||
};
|
||||
}, [onClose]);
|
||||
|
||||
const isValid = businessName.trim().length > 0 && address.trim().length > 0;
|
||||
|
||||
const handleSubmit = () => {
|
||||
if (!isValid) return;
|
||||
onSubmit(businessName.trim(), address.trim());
|
||||
onClose();
|
||||
};
|
||||
|
||||
const handleKeyDown = (e: React.KeyboardEvent) => {
|
||||
if (e.key === 'Enter' && isValid) handleSubmit();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="manual-modal-backdrop" onClick={onClose}>
|
||||
<div className="manual-modal" onClick={e => e.stopPropagation()}>
|
||||
<div className="manual-modal-header">
|
||||
<span className="manual-modal-title">{t('landing.hero.manualModalTitle')}</span>
|
||||
<button className="manual-modal-close" onClick={onClose}>✕</button>
|
||||
</div>
|
||||
|
||||
<div className="manual-modal-body">
|
||||
<div className="manual-modal-field">
|
||||
<label className="manual-modal-label">{t('landing.hero.manualLabelName')}</label>
|
||||
<input
|
||||
type="text"
|
||||
className="manual-modal-input"
|
||||
placeholder={t('landing.hero.manualPlaceholderName')}
|
||||
value={businessName}
|
||||
onChange={e => setBusinessName(e.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
maxLength={50}
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="manual-modal-field">
|
||||
<label className="manual-modal-label">{t('landing.hero.manualLabelAddress')}</label>
|
||||
<input
|
||||
type="text"
|
||||
className="manual-modal-input"
|
||||
placeholder={t('landing.hero.manualPlaceholderAddress')}
|
||||
value={address}
|
||||
onChange={e => setAddress(e.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
maxLength={100}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="manual-modal-actions">
|
||||
<button type="button" className="manual-modal-cancel" onClick={onClose}>
|
||||
{t('common.cancel')}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="manual-modal-submit"
|
||||
onClick={handleSubmit}
|
||||
disabled={!isValid}
|
||||
>
|
||||
{t('landing.hero.analyzeButton')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default BusinessNameInputModal;
|
||||
|
|
@ -0,0 +1,145 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
|
||||
const REGIONS: { label: string; cities: string[] }[] = [
|
||||
{
|
||||
label: '특별시 / 광역시',
|
||||
cities: ['서울시', '부산시', '대구시', '인천시', '광주시', '대전시', '울산시', '세종시'],
|
||||
},
|
||||
{
|
||||
label: '경기도',
|
||||
cities: [
|
||||
'수원시', '성남시', '고양시', '용인시', '부천시', '안산시', '안양시', '남양주시',
|
||||
'화성시', '평택시', '의정부시', '시흥시', '파주시', '김포시', '광주시', '광명시',
|
||||
'군포시', '하남시', '오산시', '이천시', '안성시', '구리시', '양주시', '포천시',
|
||||
'여주시', '동두천시', '과천시', '가평군', '양평군', '연천군',
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '강원도',
|
||||
cities: [
|
||||
'춘천시', '원주시', '강릉시', '동해시', '태백시', '속초시', '삼척시',
|
||||
'홍천군', '횡성군', '영월군', '평창군', '정선군', '철원군', '화천군',
|
||||
'양구군', '인제군', '고성군', '양양군',
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '충청북도',
|
||||
cities: [
|
||||
'청주시', '충주시', '제천시',
|
||||
'보은군', '옥천군', '영동군', '증평군', '진천군', '괴산군', '음성군', '단양군',
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '충청남도',
|
||||
cities: [
|
||||
'천안시', '공주시', '보령시', '아산시', '서산시', '논산시', '계룡시', '당진시',
|
||||
'금산군', '부여군', '서천군', '청양군', '홍성군', '예산군', '태안군',
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '전라북도',
|
||||
cities: [
|
||||
'전주시', '군산시', '익산시', '정읍시', '남원시', '김제시',
|
||||
'완주군', '진안군', '무주군', '장수군', '임실군', '순창군', '고창군', '부안군',
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '전라남도',
|
||||
cities: [
|
||||
'목포시', '여수시', '순천시', '나주시', '광양시',
|
||||
'담양군', '곡성군', '구례군', '고흥군', '보성군', '화순군', '장흥군', '강진군',
|
||||
'해남군', '영암군', '무안군', '함평군', '영광군', '장성군', '완도군', '진도군', '신안군',
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '경상북도',
|
||||
cities: [
|
||||
'포항시', '경주시', '김천시', '안동시', '구미시', '영주시', '영천시', '상주시', '문경시', '경산시',
|
||||
'의성군', '청송군', '영양군', '영덕군', '청도군', '고령군', '성주군', '칠곡군',
|
||||
'예천군', '봉화군', '울진군', '울릉군',
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '경상남도',
|
||||
cities: [
|
||||
'창원시', '진주시', '통영시', '사천시', '김해시', '밀양시', '거제시', '양산시',
|
||||
'의령군', '함안군', '창녕군', '고성군', '남해군', '하동군', '산청군', '함양군', '거창군', '합천군',
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '제주도',
|
||||
cities: ['제주시', '서귀포시'],
|
||||
},
|
||||
];
|
||||
|
||||
interface CitySelectModalProps {
|
||||
selected: string;
|
||||
onSelect: (city: string) => void;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
const CitySelectModal: React.FC<CitySelectModalProps> = ({ selected, onSelect, onClose }) => {
|
||||
const [activeRegion, setActiveRegion] = useState<string | null>(
|
||||
() => REGIONS.find(r => r.cities.includes(selected))?.label ?? null
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
document.body.style.overflow = 'hidden';
|
||||
return () => { document.body.style.overflow = ''; };
|
||||
}, []);
|
||||
|
||||
const cities = REGIONS.find(r => r.label === activeRegion)?.cities ?? [];
|
||||
|
||||
const handleCityClick = (city: string) => {
|
||||
onSelect(city === selected ? '' : city);
|
||||
onClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="city-modal-backdrop" onClick={onClose}>
|
||||
<div className="city-modal" onClick={e => e.stopPropagation()}>
|
||||
<div className="city-modal-header">
|
||||
<span className="city-modal-title">
|
||||
{activeRegion ? (
|
||||
<>
|
||||
<button className="city-modal-back" onClick={() => setActiveRegion(null)}>←</button>
|
||||
{activeRegion}
|
||||
</>
|
||||
) : '지역 선택'}
|
||||
</span>
|
||||
<button className="city-modal-close" onClick={onClose}>✕</button>
|
||||
</div>
|
||||
|
||||
{activeRegion === null ? (
|
||||
<div className="city-modal-grid">
|
||||
{REGIONS.map(r => (
|
||||
<button
|
||||
key={r.label}
|
||||
className={`city-modal-region-item ${r.cities.includes(selected) ? 'has-selected' : ''}`}
|
||||
onClick={() => setActiveRegion(r.label)}
|
||||
>
|
||||
<span>{r.label}</span>
|
||||
{r.cities.includes(selected) && <span className="city-modal-region-badge">{selected}</span>}
|
||||
<span className="city-modal-arrow">›</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="city-modal-item-wrap">
|
||||
{cities.map(city => (
|
||||
<button
|
||||
key={city}
|
||||
className={`city-modal-item ${selected === city ? 'active' : ''}`}
|
||||
onClick={() => handleCityClick(city)}
|
||||
>
|
||||
{city}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CitySelectModal;
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
import React from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { getKakaoLoginUrl } from '../utils/api';
|
||||
|
||||
interface LoginPromptModalProps {
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
const LoginPromptModal: React.FC<LoginPromptModalProps> = ({ onClose }) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const handleLogin = async () => {
|
||||
try {
|
||||
sessionStorage.setItem('castad_login_redirect', window.location.pathname);
|
||||
const response = await getKakaoLoginUrl();
|
||||
window.location.href = response.auth_url;
|
||||
} catch (err) {
|
||||
console.error('Failed to get Kakao login URL:', err);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
position: 'fixed',
|
||||
inset: 0,
|
||||
background: 'rgba(255, 255, 255, 0.25)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
zIndex: 9999,
|
||||
}}
|
||||
onClick={onClose}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
background: '#01282A',
|
||||
border: '1px solid rgba(155, 202, 204, 0.2)',
|
||||
borderRadius: '16px',
|
||||
padding: '40px 32px',
|
||||
width: '360px',
|
||||
maxWidth: '90vw',
|
||||
textAlign: 'center',
|
||||
position: 'relative',
|
||||
}}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<button
|
||||
onClick={onClose}
|
||||
aria-label="닫기"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: '16px',
|
||||
right: '16px',
|
||||
background: 'none',
|
||||
border: 'none',
|
||||
cursor: 'pointer',
|
||||
color: '#9BCACC',
|
||||
padding: '4px',
|
||||
}}
|
||||
>
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.5">
|
||||
<line x1="4" y1="4" x2="16" y2="16"/>
|
||||
<line x1="16" y1="4" x2="4" y2="16"/>
|
||||
</svg>
|
||||
</button>
|
||||
<h2 style={{ color: '#FFFFFF', fontSize: '20px', fontWeight: 600, marginBottom: '12px' }}>
|
||||
{t('loginPrompt.title')}
|
||||
</h2>
|
||||
|
||||
<button
|
||||
onClick={handleLogin}
|
||||
style={{
|
||||
width: '50%',
|
||||
margin: '0 auto',
|
||||
padding: '14px',
|
||||
background: '#FEE500',
|
||||
color: '#3C1E1E',
|
||||
border: 'none',
|
||||
borderRadius: '8px',
|
||||
fontSize: '15px',
|
||||
fontWeight: 600,
|
||||
cursor: 'pointer',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: '8px',
|
||||
}}
|
||||
>
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fillRule="evenodd" clipRule="evenodd" d="M10 2C5.582 2 2 4.91 2 8.5c0 2.26 1.37 4.25 3.44 5.44L4.6 17.1a.3.3 0 0 0 .44.33l4.03-2.67c.3.03.62.04.93.04 4.418 0 8-2.91 8-6.5S14.418 2 10 2z" fill="#3C1E1E"/>
|
||||
</svg>
|
||||
{t('loginPrompt.loginBtn')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default LoginPromptModal;
|
||||
|
|
@ -38,9 +38,12 @@ interface SidebarProps {
|
|||
userInfo?: UserMeResponse | null;
|
||||
onLogout?: () => void;
|
||||
credits?: number | null;
|
||||
tutorialAvailable?: boolean;
|
||||
tutorialEnabled?: boolean;
|
||||
onToggleTutorial?: () => void;
|
||||
}
|
||||
|
||||
const Sidebar: React.FC<SidebarProps> = ({ activeItem, onNavigate, onHome, userInfo, onLogout, credits }) => {
|
||||
const Sidebar: React.FC<SidebarProps> = ({ activeItem, onNavigate, onHome, userInfo, onLogout, credits, tutorialAvailable, tutorialEnabled, onToggleTutorial }) => {
|
||||
const { t } = useTranslation();
|
||||
const [isCollapsed, setIsCollapsed] = useState(false);
|
||||
const [isMobileOpen, setIsMobileOpen] = useState(false);
|
||||
|
|
@ -85,7 +88,7 @@ const Sidebar: React.FC<SidebarProps> = ({ activeItem, onNavigate, onHome, userI
|
|||
{ id: '대시보드', label: t('sidebar.dashboard'), disabled: false, icon: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><rect x="3" y="3" width="7" height="9"/><rect x="14" y="3" width="7" height="5"/><rect x="14" y="12" width="7" height="9"/><rect x="3" y="16" width="7" height="5"/></svg> },
|
||||
{ id: '새 프로젝트 만들기', label: t('sidebar.newProject'), disabled: false, icon: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg> },
|
||||
{ id: 'ADO2 콘텐츠', label: t('sidebar.ado2Contents'), disabled: false, icon: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg> },
|
||||
{ id: '내 콘텐츠', label: t('sidebar.myContents'), disabled: true, icon: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg> },
|
||||
{ id: '내 콘텐츠', label: t('sidebar.myContents'), disabled: false, icon: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg> },
|
||||
{ id: '콘텐츠 캘린더', label: t('contentCalendar.title'), disabled: false, icon: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg> },
|
||||
{ id: '내 정보', label: t('sidebar.myInfo'), disabled: false, icon: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg> },
|
||||
];
|
||||
|
|
@ -159,6 +162,24 @@ const Sidebar: React.FC<SidebarProps> = ({ activeItem, onNavigate, onHome, userI
|
|||
</div>
|
||||
|
||||
<div className="sidebar-footer">
|
||||
{/* 모바일 전용 튜토리얼 토글 */}
|
||||
{tutorialAvailable && (
|
||||
<button
|
||||
className={`sidebar-tutorial-btn ${tutorialEnabled ? 'active' : ''}`}
|
||||
onClick={() => onToggleTutorial?.()}
|
||||
title={tutorialEnabled ? t('sidebar.tutorialOff') : t('sidebar.tutorialOn')}
|
||||
>
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
|
||||
<circle cx="12" cy="12" r="10"/>
|
||||
<path d="M12 8v4l3 3"/>
|
||||
</svg>
|
||||
<span className="sidebar-tutorial-label">{t('sidebar.tutorial')}</span>
|
||||
<span className={`sidebar-tutorial-badge ${tutorialEnabled ? 'on' : 'off'}`}>
|
||||
{tutorialEnabled ? 'ON' : 'OFF'}
|
||||
</span>
|
||||
</button>
|
||||
)}
|
||||
|
||||
<div className="sidebar-language-switch">
|
||||
<LanguageSwitch isCollapsed={isCollapsed} />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -142,6 +142,10 @@ const SocialPostingModal: React.FC<SocialPostingModalProps> = ({
|
|||
const channelDropdownRef = useRef<HTMLDivElement>(null);
|
||||
const privacyDropdownRef = useRef<HTMLDivElement>(null);
|
||||
const hasBeenOpenedRef = useRef(false);
|
||||
const loadedForTaskIdRef = useRef<string | null>(null);
|
||||
const loadedAtRef = useRef<number>(0);
|
||||
const seoCache = useRef<Map<string, { title: string; description: string; tags: string }>>(new Map());
|
||||
const SEO_CACHE_TTL = 50 * 60 * 1000;
|
||||
|
||||
// Upload progress modal state
|
||||
const [showUploadProgress, setShowUploadProgress] = useState(false);
|
||||
|
|
@ -207,11 +211,28 @@ const SocialPostingModal: React.FC<SocialPostingModalProps> = ({
|
|||
|
||||
// 소셜 계정 로드
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
loadSocialAccounts();
|
||||
if (!isOpen) return;
|
||||
|
||||
const now = Date.now();
|
||||
|
||||
loadSocialAccounts();
|
||||
|
||||
const taskId = video?.task_id ?? null;
|
||||
const expired = now - loadedAtRef.current > SEO_CACHE_TTL;
|
||||
|
||||
if (taskId && (taskId !== loadedForTaskIdRef.current || expired)) {
|
||||
loadedForTaskIdRef.current = taskId;
|
||||
loadedAtRef.current = now;
|
||||
loadAutocomplete();
|
||||
} else if (taskId) {
|
||||
const cached = seoCache.current.get(taskId);
|
||||
if (cached) {
|
||||
setTitle(cached.title);
|
||||
setDescription(cached.description);
|
||||
setTags(cached.tags);
|
||||
}
|
||||
}
|
||||
}, [isOpen, video]);
|
||||
}, [isOpen, video?.task_id]);
|
||||
|
||||
const loadSocialAccounts = async () => {
|
||||
setIsLoadingAccounts(true);
|
||||
|
|
@ -252,6 +273,11 @@ const SocialPostingModal: React.FC<SocialPostingModalProps> = ({
|
|||
if (autoSeoResponse.title) setTitle(autoSeoResponse.title);
|
||||
if (autoSeoResponse.description) setDescription(autoSeoResponse.description);
|
||||
if (autoSeoResponse.keywords) setTags(autoSeoResponse.keywords.join(','));
|
||||
seoCache.current.set(video.task_id, {
|
||||
title: autoSeoResponse.title || '',
|
||||
description: autoSeoResponse.description || '',
|
||||
tags: autoSeoResponse.keywords?.join(',') || '',
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Failed to load autocomplete:', error);
|
||||
// 실패해도 사용자에게 별도 알림 없이 조용히 처리
|
||||
|
|
@ -530,7 +556,7 @@ const SocialPostingModal: React.FC<SocialPostingModalProps> = ({
|
|||
onClick={() => setIsChannelDropdownOpen(!isChannelDropdownOpen)}
|
||||
>
|
||||
<div className="social-posting-channel-selected">
|
||||
{selectedAccount && (
|
||||
{selectedAccount ? (
|
||||
<>
|
||||
<img
|
||||
src={getPlatformIcon(selectedAccount.platform)}
|
||||
|
|
@ -539,6 +565,8 @@ const SocialPostingModal: React.FC<SocialPostingModalProps> = ({
|
|||
/>
|
||||
<span>{selectedAccount.display_name}</span>
|
||||
</>
|
||||
) : (
|
||||
<span className="social-posting-channel-placeholder">{t('social.selectChannel')}</span>
|
||||
)}
|
||||
</div>
|
||||
<svg className="social-posting-channel-arrow" viewBox="0 0 12 8" fill="none">
|
||||
|
|
|
|||
|
|
@ -27,7 +27,11 @@ interface TutorialOverlayProps {
|
|||
const PADDING = 8;
|
||||
|
||||
function getTargetRect(selector: string): Rect | null {
|
||||
const el = document.querySelector(selector);
|
||||
const els = Array.from(document.querySelectorAll(selector));
|
||||
const el = els.find(e => {
|
||||
const r = (e as HTMLElement).getBoundingClientRect();
|
||||
return r.width > 0 && r.height > 0;
|
||||
}) ?? els[0];
|
||||
if (!el) return null;
|
||||
const r = el.getBoundingClientRect();
|
||||
return { top: r.top, left: r.left, width: r.width, height: r.height, bottom: r.bottom };
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@ export const tutorialSteps: TutorialStepDef[] = [
|
|||
targetSelector: '.hero-dropdown-trigger',
|
||||
titleKey: 'tutorial.landing.dropdown.title',
|
||||
descriptionKey: 'tutorial.landing.dropdown.desc',
|
||||
position: 'left',
|
||||
position: 'top',
|
||||
clickToAdvance: false,
|
||||
noSpotlight: true,
|
||||
variant: 'bubble',
|
||||
|
|
@ -59,7 +59,7 @@ export const tutorialSteps: TutorialStepDef[] = [
|
|||
targetSelector: '.hero-input-wrapper',
|
||||
titleKey: 'tutorial.landing.field.title',
|
||||
descriptionKey: 'tutorial.landing.field.desc',
|
||||
position: 'right',
|
||||
position: 'top',
|
||||
clickToAdvance: false,
|
||||
noSpotlight: true,
|
||||
variant: 'bubble',
|
||||
|
|
@ -68,7 +68,7 @@ export const tutorialSteps: TutorialStepDef[] = [
|
|||
targetSelector: '.hero-button',
|
||||
titleKey: 'tutorial.landing.button.title',
|
||||
descriptionKey: 'tutorial.landing.button.desc',
|
||||
position: 'right',
|
||||
position: 'bottom',
|
||||
clickToAdvance: true,
|
||||
noSpotlight: true,
|
||||
variant: 'bubble',
|
||||
|
|
@ -86,17 +86,17 @@ export const tutorialSteps: TutorialStepDef[] = [
|
|||
clickToAdvance: false,
|
||||
},
|
||||
{
|
||||
targetSelector: '.asset-upload-zone',
|
||||
targetSelector: '.asset-upload-zone, .asset-mobile-upload-btn',
|
||||
titleKey: 'tutorial.asset.upload.title',
|
||||
descriptionKey: 'tutorial.asset.upload.desc',
|
||||
position: 'left',
|
||||
position: 'bottom',
|
||||
clickToAdvance: false,
|
||||
},
|
||||
{
|
||||
targetSelector: '.asset-ratio-section',
|
||||
titleKey: 'tutorial.asset.ratio.title',
|
||||
descriptionKey: 'tutorial.asset.ratio.desc',
|
||||
position: 'left',
|
||||
position: 'top',
|
||||
clickToAdvance: false,
|
||||
},
|
||||
{
|
||||
|
|
@ -129,7 +129,7 @@ export const tutorialSteps: TutorialStepDef[] = [
|
|||
targetSelector: '.btn-generate-sound',
|
||||
titleKey: 'tutorial.sound.generate.title',
|
||||
descriptionKey: 'tutorial.sound.generate.desc',
|
||||
position: 'right',
|
||||
position: 'top',
|
||||
clickToAdvance: true,
|
||||
},
|
||||
],
|
||||
|
|
@ -141,14 +141,14 @@ export const tutorialSteps: TutorialStepDef[] = [
|
|||
targetSelector: '.lyrics-display',
|
||||
titleKey: 'tutorial.sound.lyrics.title',
|
||||
descriptionKey: 'tutorial.sound.lyrics.desc',
|
||||
position: 'left',
|
||||
position: 'top',
|
||||
clickToAdvance: false,
|
||||
},
|
||||
{
|
||||
targetSelector: '.status-message-new',
|
||||
titleKey: 'tutorial.sound.lyricsWait.title',
|
||||
descriptionKey: 'tutorial.sound.lyricsWait.desc',
|
||||
position: 'right',
|
||||
position: 'top',
|
||||
clickToAdvance: false,
|
||||
},
|
||||
],
|
||||
|
|
@ -160,7 +160,7 @@ export const tutorialSteps: TutorialStepDef[] = [
|
|||
targetSelector: '.audio-player',
|
||||
titleKey: 'tutorial.sound.audioPlayer.title',
|
||||
descriptionKey: 'tutorial.sound.audioPlayer.desc',
|
||||
position: 'left',
|
||||
position: 'bottom',
|
||||
clickToAdvance: false,
|
||||
},
|
||||
{
|
||||
|
|
@ -220,21 +220,21 @@ export const tutorialSteps: TutorialStepDef[] = [
|
|||
targetSelector: '.content-upload-btn',
|
||||
titleKey: 'tutorial.ado2.download.title',
|
||||
descriptionKey: 'tutorial.ado2.download.desc',
|
||||
position: 'right',
|
||||
position: 'top',
|
||||
clickToAdvance: false,
|
||||
},
|
||||
{
|
||||
targetSelector: '.content-delete-btn',
|
||||
titleKey: 'tutorial.ado2.delete.title',
|
||||
descriptionKey: 'tutorial.ado2.delete.desc',
|
||||
position: 'right',
|
||||
position: 'top',
|
||||
clickToAdvance: false,
|
||||
},
|
||||
{
|
||||
targetSelector: '.content-download-btn',
|
||||
titleKey: 'tutorial.ado2.upload.title',
|
||||
descriptionKey: 'tutorial.ado2.upload.desc',
|
||||
position: 'right',
|
||||
position: 'top',
|
||||
clickToAdvance: true,
|
||||
},
|
||||
],
|
||||
|
|
@ -252,7 +252,7 @@ export const tutorialSteps: TutorialStepDef[] = [
|
|||
targetSelector: '.comp2-video-section',
|
||||
titleKey: 'tutorial.completion.generating.title',
|
||||
descriptionKey: 'tutorial.completion.generating.desc',
|
||||
position: 'right',
|
||||
position: 'top',
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -263,7 +263,7 @@ export const tutorialSteps: TutorialStepDef[] = [
|
|||
targetSelector: '.comp2-video-section',
|
||||
titleKey: 'tutorial.completion.completion.title',
|
||||
descriptionKey: 'tutorial.completion.completion.desc',
|
||||
position: 'right',
|
||||
position: 'top',
|
||||
clickToAdvance: false,
|
||||
},
|
||||
{
|
||||
|
|
@ -294,14 +294,14 @@ export const tutorialSteps: TutorialStepDef[] = [
|
|||
targetSelector: '.social-posting-form',
|
||||
titleKey: 'tutorial.upload.required.title',
|
||||
descriptionKey: 'tutorial.upload.required.desc',
|
||||
position: 'left',
|
||||
position: 'top',
|
||||
clickToAdvance: false,
|
||||
},
|
||||
{
|
||||
targetSelector: '.social-posting-radio-group',
|
||||
titleKey: 'tutorial.upload.schedule.title',
|
||||
descriptionKey: 'tutorial.upload.schedule.desc',
|
||||
position: 'left',
|
||||
position: 'top',
|
||||
clickToAdvance: false,
|
||||
},
|
||||
{
|
||||
|
|
@ -326,7 +326,7 @@ export const tutorialSteps: TutorialStepDef[] = [
|
|||
targetSelector: '.yoy-chart-card',
|
||||
titleKey: 'tutorial.dashboard.chart.title',
|
||||
descriptionKey: 'tutorial.dashboard.chart.desc',
|
||||
position: 'right',
|
||||
position: 'top',
|
||||
},
|
||||
{
|
||||
targetSelector: '.tutorial-center-anchor',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,485 @@
|
|||
import React, { useState, useEffect, useCallback, useRef } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {
|
||||
getVideoById,
|
||||
getVideoComments,
|
||||
postVideoComment,
|
||||
deleteComment,
|
||||
toggleVideoLike,
|
||||
isLoggedIn,
|
||||
} from '../utils/api';
|
||||
import { VideoDetailItem, CommentItem } from '../types/api';
|
||||
import LoginPromptModal from './LoginPromptModal';
|
||||
|
||||
interface VideoDetailContentProps {
|
||||
videoId: string;
|
||||
isModal?: boolean;
|
||||
onClose?: () => void;
|
||||
}
|
||||
|
||||
const VideoDetailContent: React.FC<VideoDetailContentProps> = ({ videoId, isModal = false, onClose }) => {
|
||||
const { t } = useTranslation();
|
||||
const authed = isLoggedIn();
|
||||
|
||||
const [video, setVideo] = useState<VideoDetailItem | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const [likeCount, setLikeCount] = useState(0);
|
||||
const [isLiked, setIsLiked] = useState(false);
|
||||
|
||||
const [copied, setCopied] = useState(false);
|
||||
const [shareMenuOpen, setShareMenuOpen] = useState(false);
|
||||
const [isLandscape, setIsLandscape] = useState(false);
|
||||
const [showLoginModal, setShowLoginModal] = useState(false);
|
||||
|
||||
const [comments, setComments] = useState<CommentItem[]>([]);
|
||||
const [commentsTotal, setCommentsTotal] = useState(0);
|
||||
const [commentsPage, setCommentsPage] = useState(1);
|
||||
const [commentsHasNext, setCommentsHasNext] = useState(false);
|
||||
const [commentsLoading, setCommentsLoading] = useState(false);
|
||||
const [commentInput, setCommentInput] = useState('');
|
||||
const [commentSubmitting, setCommentSubmitting] = useState(false);
|
||||
const commentTextareaRef = useRef<HTMLTextAreaElement>(null);
|
||||
|
||||
const [commentNickname, setCommentNickname] = useState('');
|
||||
const [commentAvatarSeedIdx, setCommentAvatarSeedIdx] = useState(0);
|
||||
|
||||
// 고정 seed 목록: 브라우저가 캐싱하여 중복 요청 없음
|
||||
const AVATAR_SEEDS = ['42', '77', '123', '256', '512', '888', '1024', '2048', '3141', '9999'];
|
||||
const commentAvatarSeed = AVATAR_SEEDS[commentAvatarSeedIdx % AVATAR_SEEDS.length];
|
||||
|
||||
const handleChangeAvatar = useCallback(() => {
|
||||
setCommentAvatarSeedIdx(prev => (prev + 1) % AVATAR_SEEDS.length);
|
||||
}, []);
|
||||
|
||||
const fetchComments = useCallback(async (page: number, append = false) => {
|
||||
setCommentsLoading(true);
|
||||
try {
|
||||
const res = await getVideoComments(videoId, page, 20);
|
||||
const sorted = [...res.items].sort(
|
||||
(a, b) => new Date(a.created_at).getTime() - new Date(b.created_at).getTime()
|
||||
);
|
||||
setComments(prev => append ? [...prev, ...sorted] : sorted);
|
||||
setCommentsTotal(res.total);
|
||||
setCommentsHasNext(res.has_next);
|
||||
setCommentsPage(page);
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch comments:', err);
|
||||
} finally {
|
||||
setCommentsLoading(false);
|
||||
}
|
||||
}, [videoId]);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchVideo = async () => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const data = await getVideoById(videoId);
|
||||
setVideo(data);
|
||||
setLikeCount(data.like_count);
|
||||
setIsLiked(data.is_liked_by_me);
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch video:', err);
|
||||
setError(t('ado2Contents.loadFailed'));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchVideo();
|
||||
fetchComments(1);
|
||||
}, [videoId, fetchComments]);
|
||||
|
||||
const formatDate = (dateString: string) => {
|
||||
const date = new Date(dateString);
|
||||
return `${date.getFullYear()}년 ${date.getMonth() + 1}월 ${date.getDate()}일`;
|
||||
};
|
||||
|
||||
const formatCommentDate = (dateString: string) => {
|
||||
const date = new Date(dateString);
|
||||
return `${date.getFullYear()}.${String(date.getMonth() + 1).padStart(2, '0')}.${String(date.getDate()).padStart(2, '0')}`;
|
||||
};
|
||||
|
||||
const shareUrl = `${window.location.origin}/video/${videoId}`;
|
||||
|
||||
const handleCopyLink = async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(shareUrl);
|
||||
} catch {
|
||||
// clipboard API 미지원 환경에서는 무시
|
||||
}
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
};
|
||||
|
||||
const handleKakaoShare = () => {
|
||||
const kakao = window.Kakao;
|
||||
if (kakao?.Share) {
|
||||
kakao.Share.sendDefault({
|
||||
objectType: 'feed',
|
||||
content: {
|
||||
title: video?.store_name ?? 'ADO2 영상',
|
||||
description: `${video?.region ?? ''} · ADO2 AI 마케팅 영상`,
|
||||
imageUrl: 'https://demo.castad.net/favicon_48.svg',
|
||||
link: { mobileWebUrl: shareUrl, webUrl: shareUrl },
|
||||
},
|
||||
buttons: [{ title: '영상 보기', link: { mobileWebUrl: shareUrl, webUrl: shareUrl } }],
|
||||
});
|
||||
} else if (navigator.share) {
|
||||
navigator.share({ url: shareUrl }).catch(() => {});
|
||||
} else {
|
||||
handleCopyLink();
|
||||
}
|
||||
setShareMenuOpen(false);
|
||||
};
|
||||
|
||||
const handleFacebookShare = () => {
|
||||
window.open(`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(shareUrl)}`, '_blank', 'noopener,width=600,height=600');
|
||||
setShareMenuOpen(false);
|
||||
};
|
||||
|
||||
const handleTwitterShare = () => {
|
||||
window.open(`https://twitter.com/intent/tweet?url=${encodeURIComponent(shareUrl)}`, '_blank', 'noopener,width=600,height=600');
|
||||
setShareMenuOpen(false);
|
||||
};
|
||||
|
||||
const shareMenuRef = React.useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!shareMenuOpen) return;
|
||||
const handleClickOutside = (e: MouseEvent) => {
|
||||
if (shareMenuRef.current && !shareMenuRef.current.contains(e.target as Node)) {
|
||||
setShareMenuOpen(false);
|
||||
}
|
||||
};
|
||||
document.addEventListener('mousedown', handleClickOutside);
|
||||
return () => document.removeEventListener('mousedown', handleClickOutside);
|
||||
}, [shareMenuOpen]);
|
||||
|
||||
const likeDebounceRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
|
||||
const handleLike = () => {
|
||||
if (!authed) { setShowLoginModal(true); return; }
|
||||
|
||||
// 1. UI 즉시 업데이트 (Optimistic)
|
||||
setIsLiked(prev => !prev);
|
||||
setLikeCount(prev => isLiked ? prev - 1 : prev + 1);
|
||||
|
||||
// 2. 기존 debounce 타이머 취소 후 재설정
|
||||
if (likeDebounceRef.current) clearTimeout(likeDebounceRef.current);
|
||||
likeDebounceRef.current = setTimeout(async () => {
|
||||
const prevLiked = isLiked;
|
||||
const prevCount = likeCount;
|
||||
try {
|
||||
await toggleVideoLike(videoId);
|
||||
} catch (err) {
|
||||
// 3. 실패 시 롤백
|
||||
console.error('Failed to toggle like:', err);
|
||||
setIsLiked(prevLiked);
|
||||
setLikeCount(prevCount);
|
||||
}
|
||||
}, 500);
|
||||
};
|
||||
|
||||
const handleHeaderAction = () => {
|
||||
if (!isModal && !authed) { setShowLoginModal(true); return; }
|
||||
onClose?.();
|
||||
};
|
||||
|
||||
const handleCommentFocus = () => {
|
||||
if (!authed) setShowLoginModal(true);
|
||||
};
|
||||
|
||||
const handleCommentSubmit = async () => {
|
||||
if (!authed) { setShowLoginModal(true); return; }
|
||||
if (!commentInput.trim() || commentSubmitting) return;
|
||||
setCommentSubmitting(true);
|
||||
try {
|
||||
await postVideoComment(videoId, commentInput.trim(), commentNickname);
|
||||
setCommentInput('');
|
||||
if (commentTextareaRef.current) {
|
||||
commentTextareaRef.current.style.height = 'auto';
|
||||
}
|
||||
setCommentNickname('');
|
||||
setCommentAvatarSeedIdx(prev => (prev + 1) % AVATAR_SEEDS.length);
|
||||
await fetchComments(1);
|
||||
} catch (err) {
|
||||
console.error('Failed to post comment:', err);
|
||||
} finally {
|
||||
setCommentSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteComment = async (commentId: number) => {
|
||||
try {
|
||||
await deleteComment(commentId);
|
||||
await fetchComments(commentsPage);
|
||||
} catch (err) {
|
||||
console.error('Failed to delete comment:', err);
|
||||
}
|
||||
};
|
||||
|
||||
const renderCommentContent = (content: string | null, isDeleted: boolean) => {
|
||||
if (isDeleted) return <span style={{ color: '#6B9EA0', fontStyle: 'italic' }}>(삭제된 댓글입니다.)</span>;
|
||||
return content;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={isModal ? 'video-detail-modal-content' : 'video-detail-page-content'}>
|
||||
{/* 헤더 */}
|
||||
<div className="video-detail-header">
|
||||
{isModal ? (
|
||||
<button className="video-detail-close-btn" onClick={handleHeaderAction} aria-label="닫기">
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
|
||||
</svg>
|
||||
</button>
|
||||
) : (
|
||||
<button className="video-detail-back-btn" onClick={handleHeaderAction}>
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.5">
|
||||
<path d="M13 4l-6 6 6 6"/>
|
||||
</svg>
|
||||
{t('sidebar.ado2Contents')}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<div className="ado2-contents-loading">
|
||||
<div className="loading-spinner"></div>
|
||||
<p>{t('ado2Contents.loading')}</p>
|
||||
</div>
|
||||
) : error ? (
|
||||
<div className="ado2-contents-error"><p>{error}</p></div>
|
||||
) : video ? (
|
||||
<div className={`video-detail-content ${isLandscape ? 'landscape' : ''}`}>
|
||||
<video
|
||||
src={video.result_movie_url}
|
||||
controls
|
||||
autoPlay
|
||||
controlsList="nodownload"
|
||||
onContextMenu={(e) => e.preventDefault()}
|
||||
className="video-detail-player"
|
||||
onLoadedMetadata={(e) => {
|
||||
const v = e.currentTarget;
|
||||
setIsLandscape(v.videoWidth > v.videoHeight);
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="video-detail-info">
|
||||
<h2 className="video-detail-store">{video.store_name}</h2>
|
||||
<p className="video-detail-date">{formatDate(video.created_at)}</p>
|
||||
|
||||
{/* 좋아요 + 링크 복사 */}
|
||||
<div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
|
||||
<button
|
||||
className={`video-detail-like-btn ${isLiked ? 'liked' : ''}`}
|
||||
onClick={handleLike}
|
||||
disabled={false}
|
||||
>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill={isLiked ? 'currentColor' : 'none'} stroke="currentColor" strokeWidth="2">
|
||||
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
|
||||
</svg>
|
||||
{likeCount}
|
||||
</button>
|
||||
<div style={{ position: 'relative' }} ref={shareMenuRef}>
|
||||
<button
|
||||
className="video-detail-copy-btn"
|
||||
onClick={() => setShareMenuOpen(v => !v)}
|
||||
>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/>
|
||||
<line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/>
|
||||
</svg>
|
||||
{copied ? '복사됨!' : '공유하기'}
|
||||
</button>
|
||||
{shareMenuOpen && (
|
||||
<div className="video-detail-share-menu">
|
||||
{/* 카카오톡 */}
|
||||
<button className="video-detail-share-item" onClick={handleKakaoShare}>
|
||||
<svg width="18" height="18" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="20" height="20" rx="4" fill="#FEE500"/>
|
||||
<path fillRule="evenodd" clipRule="evenodd" d="M10 3.5C6.134 3.5 3 6.01 3 9.1c0 1.98 1.2 3.72 3.01 4.76l-.74 2.75a.19.19 0 0 0 .28.21l3.37-2.23c.34.04.69.06 1.06.06 3.866 0 7-2.51 7-5.6S13.866 3.5 10 3.5z" fill="#3C1E1E"/>
|
||||
</svg>
|
||||
카카오톡
|
||||
</button>
|
||||
{/* 페이스북 */}
|
||||
<button className="video-detail-share-item" onClick={handleFacebookShare}>
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="#1877F2">
|
||||
<path d="M24 12.073C24 5.405 18.627 0 12 0S0 5.405 0 12.073C0 18.1 4.388 23.094 10.125 24v-8.437H7.078v-3.49h3.047V9.41c0-3.025 1.792-4.697 4.533-4.697 1.312 0 2.686.235 2.686.235v2.97h-1.513c-1.491 0-1.956.93-1.956 1.887v2.268h3.328l-.532 3.49h-2.796V24C19.612 23.094 24 18.1 24 12.073z"/>
|
||||
</svg>
|
||||
페이스북
|
||||
</button>
|
||||
{/* X (트위터) */}
|
||||
<button className="video-detail-share-item" onClick={handleTwitterShare}>
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
|
||||
</svg>
|
||||
X (트위터)
|
||||
</button>
|
||||
{/* URL 복사 */}
|
||||
<button className="video-detail-share-item" onClick={() => { handleCopyLink(); setShareMenuOpen(false); }}>
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<rect x="9" y="9" width="13" height="13" rx="2"/>
|
||||
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
|
||||
</svg>
|
||||
{copied ? '복사됨!' : 'URL 복사'}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 댓글 섹션 */}
|
||||
<div className="video-detail-comments">
|
||||
<div className="video-detail-comments-header">
|
||||
<h3 className="video-detail-comments-title">댓글</h3>
|
||||
<span className="video-detail-comments-count">{commentsTotal}</span>
|
||||
</div>
|
||||
|
||||
{/* 댓글 작성자 프로필 선택 */}
|
||||
{authed && (
|
||||
<div className="video-detail-comment-profile">
|
||||
<img
|
||||
src={`https://api.dicebear.com/9.x/pixel-art/svg?seed=${commentAvatarSeed}`}
|
||||
alt="아바타 변경"
|
||||
className="video-detail-comment-avatar"
|
||||
onClick={handleChangeAvatar}
|
||||
style={{ cursor: 'pointer' }}
|
||||
title="클릭하여 아바타 변경"
|
||||
/>
|
||||
<input
|
||||
className="video-detail-nickname-input"
|
||||
type="text"
|
||||
placeholder="작성자 이름"
|
||||
value={commentNickname}
|
||||
onChange={(e) => setCommentNickname(e.target.value)}
|
||||
maxLength={20}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="video-detail-comment-input-wrap">
|
||||
<textarea
|
||||
ref={commentTextareaRef}
|
||||
className="video-detail-comment-input"
|
||||
placeholder={authed ? '댓글을 입력하세요...' : '로그인 후 댓글을 작성할 수 있습니다'}
|
||||
maxLength={500}
|
||||
rows={1}
|
||||
value={commentInput}
|
||||
onChange={(e) => {
|
||||
setCommentInput(e.target.value);
|
||||
e.target.style.height = 'auto';
|
||||
e.target.style.height = `${e.target.scrollHeight}px`;
|
||||
}}
|
||||
onFocus={handleCommentFocus}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
handleCommentSubmit();
|
||||
}
|
||||
}}
|
||||
disabled={!authed}
|
||||
/>
|
||||
<button
|
||||
className="video-detail-comment-submit"
|
||||
onClick={handleCommentSubmit}
|
||||
disabled={!authed || !commentInput.trim() || commentSubmitting}
|
||||
>
|
||||
{commentSubmitting ? '작성 중' : '작성'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{comments.length === 0 && !commentsLoading ? (
|
||||
<p className="video-detail-comments-empty">아직 댓글이 없습니다.</p>
|
||||
) : (
|
||||
<ul className="video-detail-comment-list">
|
||||
{comments.map((c) => (
|
||||
<li key={c.id} className="video-detail-comment-item">
|
||||
<img
|
||||
src={`https://api.dicebear.com/9.x/pixel-art/svg?seed=${c.id}`}
|
||||
alt="avatar"
|
||||
className="video-detail-comment-avatar"
|
||||
/>
|
||||
<div className="video-detail-comment-body">
|
||||
<span className="video-detail-comment-nickname">
|
||||
{c.nickname || '익명'}
|
||||
</span>
|
||||
<p className="video-detail-comment-text">
|
||||
{renderCommentContent(c.content, c.is_deleted)}
|
||||
</p>
|
||||
<div className="video-detail-comment-bottom">
|
||||
<span className="video-detail-comment-date">{formatCommentDate(c.created_at)}</span>
|
||||
{c.is_mine && !c.is_deleted && (
|
||||
<button
|
||||
className="video-detail-comment-delete"
|
||||
onClick={() => handleDeleteComment(c.id)}
|
||||
>
|
||||
삭제
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 대댓글 (읽기 전용) */}
|
||||
{c.replies && c.replies.length > 0 && (
|
||||
<ul className="video-detail-reply-list">
|
||||
{c.replies.map((r) => (
|
||||
<li key={r.id} className="video-detail-reply-item">
|
||||
<img
|
||||
src={`https://api.dicebear.com/9.x/pixel-art/svg?seed=${r.id}`}
|
||||
alt="avatar"
|
||||
className="video-detail-comment-avatar small"
|
||||
/>
|
||||
<div className="video-detail-comment-body">
|
||||
<span className="video-detail-comment-nickname">
|
||||
{r.nickname || '익명'}
|
||||
</span>
|
||||
<p className="video-detail-comment-text">
|
||||
{renderCommentContent(r.content, r.is_deleted)}
|
||||
</p>
|
||||
<div className="video-detail-comment-bottom">
|
||||
<span className="video-detail-comment-date">{formatCommentDate(r.created_at)}</span>
|
||||
{r.is_mine && !r.is_deleted && (
|
||||
<button
|
||||
className="video-detail-comment-delete"
|
||||
onClick={() => handleDeleteComment(r.id)}
|
||||
>
|
||||
삭제
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
|
||||
{commentsHasNext && (
|
||||
<button
|
||||
className="video-detail-comments-more"
|
||||
onClick={() => fetchComments(commentsPage + 1, true)}
|
||||
disabled={commentsLoading}
|
||||
>
|
||||
{commentsLoading ? '불러오는 중...' : '댓글 더 보기'}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{showLoginModal && (
|
||||
<LoginPromptModal onClose={() => setShowLoginModal(false)} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default VideoDetailContent;
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
import React, { useEffect } from 'react';
|
||||
import VideoDetailContent from './VideoDetailContent';
|
||||
|
||||
interface VideoDetailModalProps {
|
||||
videoId: string;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
const VideoDetailModal: React.FC<VideoDetailModalProps> = ({ videoId, onClose }) => {
|
||||
useEffect(() => {
|
||||
// 모달 열릴 때 배경 스크롤 잠금
|
||||
const prev = document.body.style.overflow;
|
||||
document.body.style.overflow = 'hidden';
|
||||
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') onClose();
|
||||
};
|
||||
document.addEventListener('keydown', handleKeyDown);
|
||||
|
||||
return () => {
|
||||
document.body.style.overflow = prev;
|
||||
document.removeEventListener('keydown', handleKeyDown);
|
||||
};
|
||||
}, [onClose]);
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
position: 'fixed',
|
||||
inset: 0,
|
||||
background: 'rgba(0, 0, 0, 0.85)',
|
||||
zIndex: 2000,
|
||||
display: 'flex',
|
||||
overflowY: 'auto',
|
||||
padding: '24px 16px',
|
||||
}}
|
||||
onClick={onClose}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
background: '#01282A',
|
||||
borderRadius: '16px',
|
||||
width: '100%',
|
||||
maxWidth: '900px',
|
||||
margin: 'auto',
|
||||
position: 'relative',
|
||||
}}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<VideoDetailContent videoId={videoId} isModal={true} onClose={onClose} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default VideoDetailModal;
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
import React from 'react';
|
||||
import VideoDetailContent from './VideoDetailContent';
|
||||
|
||||
interface VideoDetailPageProps {
|
||||
videoId: string;
|
||||
}
|
||||
|
||||
const VideoDetailPage: React.FC<VideoDetailPageProps> = ({ videoId }) => {
|
||||
const handleBack = () => {
|
||||
localStorage.setItem('castad_active_item', 'ADO2 콘텐츠');
|
||||
window.location.href = '/';
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="video-detail-page">
|
||||
<VideoDetailContent videoId={videoId} isModal={false} onClose={handleBack} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default VideoDetailPage;
|
||||
|
|
@ -4,6 +4,17 @@ import ReactDOM from 'react-dom/client';
|
|||
import './i18n';
|
||||
import App from './App';
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
Kakao: any;
|
||||
}
|
||||
}
|
||||
|
||||
const kakaoKey = import.meta.env.VITE_KAKAO_JS_KEY as string | undefined;
|
||||
if (kakaoKey && window.Kakao && !window.Kakao.isInitialized()) {
|
||||
window.Kakao.init(kakaoKey);
|
||||
}
|
||||
|
||||
const rootElement = document.getElementById('root');
|
||||
if (!rootElement) {
|
||||
throw new Error("Could not find root element to mount to");
|
||||
|
|
|
|||
|
|
@ -95,8 +95,8 @@
|
|||
"footer": {
|
||||
"company":"O2O Inc.",
|
||||
"businessNumber": "Business Registration No. : 620-87-00810 | CEO : Ahn Sungmin",
|
||||
"headquarters": "HQ : 41593 Unicorn Lab Daegu A05, 5F, 111 Oksan-ro, Buk-gu, Daegu, Korea",
|
||||
"researchCenter": "R&D : 13453 Rooms 504-505 (East), KT Pangyo Bldg, 32 Geumto-ro, Sujeong-gu, Seongnam-si, Gyeonggi-do, Korea",
|
||||
"headquarters": "HQ : Unicorn Lab Daegu A05, 5F, 111 Oksan-ro, Buk-gu, Daegu, Korea",
|
||||
"researchCenter": "R&D : Rooms 504-505 (East), KT Pangyo Bldg, 32 Geumto-ro, Sujeong-gu, Seongnam-si, Gyeonggi-do, Korea",
|
||||
"phone": "Tel : 070-4260-8310 | 010-2755-6463",
|
||||
"email": "Email : o2oteam@o2o.kr",
|
||||
"privacyPolicy": "Privacy Policy",
|
||||
|
|
@ -169,7 +169,13 @@
|
|||
"testDataLoading": "Loading...",
|
||||
"testData": "Test Data",
|
||||
"testDataLoadFailed": "Failed to load test data.",
|
||||
"searching": "Searching..."
|
||||
"searching": "Searching...",
|
||||
"searchTypeManual": "Manual Input",
|
||||
"manualModalTitle": "Enter Business Info",
|
||||
"manualLabelName": "Business Name",
|
||||
"manualLabelAddress": "Address",
|
||||
"manualPlaceholderName": "Enter the business name",
|
||||
"manualPlaceholderAddress": "Enter the address"
|
||||
},
|
||||
"welcome": {
|
||||
"title": "Welcome to ADO2.AI",
|
||||
|
|
@ -200,7 +206,13 @@
|
|||
"searchButton": "Search",
|
||||
"searching": "Searching...",
|
||||
"testDataLoading": "Loading...",
|
||||
"testData": "Test Data"
|
||||
"testData": "Test Data",
|
||||
"searchTypeManual": "Manual Input",
|
||||
"manualModalTitle": "Enter Business Info",
|
||||
"manualLabelName": "Business Name",
|
||||
"manualLabelAddress": "Address",
|
||||
"manualPlaceholderName": "Enter the business name",
|
||||
"manualPlaceholderAddress": "Enter the address"
|
||||
},
|
||||
"assetManagement": {
|
||||
"title": "Brand Assets",
|
||||
|
|
@ -208,7 +220,7 @@
|
|||
"imageAlt": "Image",
|
||||
"uploadBadge": "Uploaded",
|
||||
"imageUpload": "Image Upload",
|
||||
"dragAndDrop": "Drag and drop\nimages to upload",
|
||||
"dragAndDrop": "Drag & drop or\nclick to upload",
|
||||
"videoRatio": "Video Ratio",
|
||||
"minImages": "Min. 5 images",
|
||||
"youtubeShorts": "YouTube Shorts",
|
||||
|
|
@ -234,6 +246,7 @@
|
|||
"lyricsColumn": "Lyrics",
|
||||
"lyricsHint": "Select the lyrics area to edit",
|
||||
"lyricsPlaceholder": "Lyrics will be displayed when sound is generated.",
|
||||
"lyricsPlaceholderBGM": "Background music is generated without lyrics.",
|
||||
"generateButton": "Generate Sound",
|
||||
"regenerateButton": "Regenerate",
|
||||
"regenerateHint": "Press the regenerate button to create new lyrics and music.",
|
||||
|
|
@ -265,6 +278,8 @@
|
|||
"titleError": "Video Generation Failed",
|
||||
"titleComplete": "Content Creation Complete",
|
||||
"imageAndVideo": "Images & Video",
|
||||
"checkingSubtitle": "Checking subtitle generation status...",
|
||||
"waitingSubtitle": "Generating subtitles...",
|
||||
"requestingGeneration": "Requesting video generation...",
|
||||
"generatingVideo": "Generating video...",
|
||||
"processingAfterRefresh": "Processing video... (recovered after refresh)",
|
||||
|
|
@ -306,6 +321,7 @@
|
|||
"resolution": "Resolution",
|
||||
"lyrics": "Lyrics",
|
||||
"sampleLyrics": "Loading lyrics...",
|
||||
"noLyricsBGM": "Background music is generated without lyrics.",
|
||||
"downloading": "Downloading...",
|
||||
"download": "Download",
|
||||
"uploadToSocial": "Upload to Social"
|
||||
|
|
@ -467,7 +483,14 @@
|
|||
"delete": "Delete",
|
||||
"previous": "Previous",
|
||||
"next": "Next",
|
||||
"uploadToSocial": "Upload to social media"
|
||||
"uploadToSocial": "Upload to social media",
|
||||
"sortLatest": "Latest",
|
||||
"sortOldest": "Oldest",
|
||||
"sortLikes": "Most Liked",
|
||||
"sortComments": "Most Commented",
|
||||
"regionPlaceholder": "Select Region",
|
||||
"searchPlaceholder": "Search by name",
|
||||
"searchBtn": "Search"
|
||||
},
|
||||
"businessSettings": {
|
||||
"title": "Business Settings",
|
||||
|
|
@ -542,14 +565,18 @@
|
|||
"scheduledCount": "Sched {{count}}",
|
||||
"failedCount": "Fail {{count}}"
|
||||
},
|
||||
"loginPrompt": {
|
||||
"title": "Login Required",
|
||||
"loginBtn": "Login with Kakao"
|
||||
},
|
||||
"app": {
|
||||
"loginProcessing": "Processing login...",
|
||||
"loginFailed": "Login processing failed. Please try again.",
|
||||
"kakaoLoginFailed": "Kakao login failed. Please try again.",
|
||||
"loginUrlFailed": "Failed to get login URL. Please try again.",
|
||||
"invalidUrl": "Invalid URL. Please enter a Naver Map URL.",
|
||||
"analysisError": "An error occurred during analysis. Please try again.",
|
||||
"autocompleteError": "Failed to retrieve business information. Please enter the URL directly.",
|
||||
"analysisError": "No results found. Please check your input and try again.",
|
||||
"autocompleteError": "No results found. Please check your input and try again.",
|
||||
"autocompleteGeneralError": "An error occurred while retrieving business information. Please try again.",
|
||||
"pageComingSoon": "{{page}} page is coming soon."
|
||||
}
|
||||
|
|
|
|||
|
|
@ -95,8 +95,8 @@
|
|||
"footer": {
|
||||
"company":"㈜에이아이오투오",
|
||||
"businessNumber": "사업자 등록번호 : 620-87-00810 | 대표 : 안성민",
|
||||
"headquarters": "본사 : 41593 대구광역시 북구 옥산로 111, 5층 유니콘랩 대구 A05호",
|
||||
"researchCenter": "연구소 : 13453 경기 성남시 수정구 금토로 32 (금토동) (주)KT 판교빌딩 504호~505호 (East)",
|
||||
"headquarters": "본사 : 대구광역시 북구 옥산로 111, 5층 유니콘랩 대구 A05호",
|
||||
"researchCenter": "연구소 : 경기 성남시 수정구 금토로 32 (금토동) (주)KT 판교빌딩 504호~505호 (East)",
|
||||
"phone": "전화 : 070-4260-8310 | 010-2755-6463",
|
||||
"email": "이메일 : o2oteam@o2o.kr",
|
||||
"privacyPolicy": "개인정보처리방침",
|
||||
|
|
@ -169,7 +169,13 @@
|
|||
"testDataLoading": "로딩 중...",
|
||||
"testData": "테스트 데이터",
|
||||
"testDataLoadFailed": "테스트 데이터를 불러오는데 실패했습니다.",
|
||||
"searching": "검색 중..."
|
||||
"searching": "검색 중...",
|
||||
"searchTypeManual": "직접 입력",
|
||||
"manualModalTitle": "업체 정보 입력",
|
||||
"manualLabelName": "업체명",
|
||||
"manualLabelAddress": "주소",
|
||||
"manualPlaceholderName": "업체명을 입력하세요.",
|
||||
"manualPlaceholderAddress": "주소를 입력하세요."
|
||||
},
|
||||
"welcome": {
|
||||
"title": "ADO2.AI에 오신 것을 환영합니다.",
|
||||
|
|
@ -200,7 +206,13 @@
|
|||
"searchButton": "검색하기",
|
||||
"searching": "검색 중...",
|
||||
"testDataLoading": "로딩 중...",
|
||||
"testData": "테스트 데이터"
|
||||
"testData": "테스트 데이터",
|
||||
"searchTypeManual": "직접 입력",
|
||||
"manualModalTitle": "업체 정보 입력",
|
||||
"manualLabelName": "업체명",
|
||||
"manualLabelAddress": "주소",
|
||||
"manualPlaceholderName": "업체명을 입력하세요.",
|
||||
"manualPlaceholderAddress": "주소를 입력하세요."
|
||||
},
|
||||
"assetManagement": {
|
||||
"title": "브랜드 에셋",
|
||||
|
|
@ -208,7 +220,7 @@
|
|||
"imageAlt": "이미지",
|
||||
"uploadBadge": "업로드",
|
||||
"imageUpload": "이미지 업로드",
|
||||
"dragAndDrop": "이미지를 드래그하여\n업로드",
|
||||
"dragAndDrop": "이미지를 끌어다 놓거나\n클릭하여 업로드",
|
||||
"videoRatio": "영상 비율",
|
||||
"minImages": "최소 5장",
|
||||
"youtubeShorts": "유튜브 쇼츠",
|
||||
|
|
@ -234,6 +246,7 @@
|
|||
"lyricsColumn": "가사",
|
||||
"lyricsHint": "가사 영역을 선택해서 수정 가능해요",
|
||||
"lyricsPlaceholder": "사운드 생성 시 가사 표시됩니다.",
|
||||
"lyricsPlaceholderBGM": "배경음악은 가사 없이 생성됩니다.",
|
||||
"generateButton": "사운드 생성",
|
||||
"regenerateButton": "재생성 하기",
|
||||
"regenerateHint": "재생성 버튼을 누르면 가사와 음악을 다시 만들 수 있어요.",
|
||||
|
|
@ -265,6 +278,8 @@
|
|||
"titleError": "영상 생성 실패",
|
||||
"titleComplete": "콘텐츠 제작 완료",
|
||||
"imageAndVideo": "이미지 및 영상",
|
||||
"checkingSubtitle": "자막 생성 상태를 확인하고 있습니다...",
|
||||
"waitingSubtitle": "자막을 생성하고 있습니다...",
|
||||
"requestingGeneration": "영상 생성을 요청하고 있습니다...",
|
||||
"generatingVideo": "영상을 생성하고 있습니다...",
|
||||
"processingAfterRefresh": "영상을 처리하고 있습니다... (새로고침 후 복구됨)",
|
||||
|
|
@ -306,6 +321,7 @@
|
|||
"resolution": "규격",
|
||||
"lyrics": "가사",
|
||||
"sampleLyrics": "가사를 불러오는 중...",
|
||||
"noLyricsBGM": "배경음악은 가사 없이 생성됩니다.",
|
||||
"downloading": "다운로드 중...",
|
||||
"download": "다운로드",
|
||||
"uploadToSocial": "소셜 채널 업로드"
|
||||
|
|
@ -467,7 +483,14 @@
|
|||
"delete": "삭제",
|
||||
"previous": "이전",
|
||||
"next": "다음",
|
||||
"uploadToSocial": "소셜 미디어에 업로드"
|
||||
"uploadToSocial": "소셜 미디어에 업로드",
|
||||
"sortLatest": "최신순",
|
||||
"sortOldest": "오래된순",
|
||||
"sortLikes": "좋아요 많은순",
|
||||
"sortComments": "댓글 많은순",
|
||||
"regionPlaceholder": "지역 선택",
|
||||
"searchPlaceholder": "업체명 검색",
|
||||
"searchBtn": "검색"
|
||||
},
|
||||
"businessSettings": {
|
||||
"title": "비즈니스 설정",
|
||||
|
|
@ -542,14 +565,18 @@
|
|||
"scheduledCount": "예약 {{count}}",
|
||||
"failedCount": "실패 {{count}}"
|
||||
},
|
||||
"loginPrompt": {
|
||||
"title": "로그인이 필요합니다.",
|
||||
"loginBtn": "로그인"
|
||||
},
|
||||
"app": {
|
||||
"loginProcessing": "로그인 처리 중...",
|
||||
"loginFailed": "로그인 처리에 실패했습니다. 다시 시도해주세요.",
|
||||
"kakaoLoginFailed": "카카오 로그인에 실패했습니다. 다시 시도해주세요.",
|
||||
"loginUrlFailed": "로그인 URL을 가져오는데 실패했습니다. 다시 시도해주세요.",
|
||||
"invalidUrl": "유효하지 않은 URL입니다. 네이버 지도 URL을 입력해주세요.",
|
||||
"analysisError": "분석 중 오류가 발생했습니다. 다시 시도해주세요.",
|
||||
"autocompleteError": "업체 정보 조회에 실패했습니다. URL을 직접 입력해주세요.",
|
||||
"analysisError": "검색 정보를 찾을 수 없습니다. 입력 정보를 다시 확인해주세요.",
|
||||
"autocompleteError": "검색 정보를 찾을 수 없습니다. 입력 정보를 다시 확인해주세요.",
|
||||
"autocompleteGeneralError": "업체 정보 조회 중 오류가 발생했습니다. 다시 시도해주세요.",
|
||||
"pageComingSoon": "{{page}} 페이지 준비 중입니다."
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,149 +1,127 @@
|
|||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { getVideosList, deleteVideo } from '../../utils/api';
|
||||
import { getAllVideos, isLoggedIn } from '../../utils/api';
|
||||
import { VideoListItem } from '../../types/api';
|
||||
import SocialPostingModal from '../../components/SocialPostingModal';
|
||||
import LoginPromptModal from '../../components/LoginPromptModal';
|
||||
import VideoDetailModal from '../../components/VideoDetailModal';
|
||||
import CitySelectModal from '../../components/CitySelectModal';
|
||||
|
||||
interface ADO2ContentsPageProps {
|
||||
onBack: () => void;
|
||||
onNavigate?: (item: string) => void;
|
||||
onBack?: () => void;
|
||||
}
|
||||
|
||||
const ADO2ContentsPage: React.FC<ADO2ContentsPageProps> = ({ onBack, onNavigate }) => {
|
||||
const ADO2ContentsPage: React.FC<ADO2ContentsPageProps> = () => {
|
||||
const { t } = useTranslation();
|
||||
const authed = isLoggedIn();
|
||||
const [selectedVideoId, setSelectedVideoId] = useState<number | null>(null);
|
||||
const [videos, setVideos] = useState<VideoListItem[]>([]);
|
||||
const [total, setTotal] = useState(0);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [loading, setLoading] = useState(authed);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [page, setPage] = useState(1);
|
||||
const [hasNext, setHasNext] = useState(false);
|
||||
const [hasPrev, setHasPrev] = useState(false);
|
||||
const [totalPages, setTotalPages] = useState(1);
|
||||
const [deleteModalOpen, setDeleteModalOpen] = useState(false);
|
||||
const [deleteTargetId, setDeleteTargetId] = useState<number | null>(null);
|
||||
const [isDeleting, setIsDeleting] = useState(false);
|
||||
const [uploadModalOpen, setUploadModalOpen] = useState(false);
|
||||
const [uploadTargetVideo, setUploadTargetVideo] = useState<VideoListItem | null>(null);
|
||||
|
||||
const pageSize = 12;
|
||||
const pageSize = 20;
|
||||
const [sortBy, setSortBy] = useState<'created_at' | 'like_count' | 'comment_count'>('created_at');
|
||||
const [order, setOrder] = useState<'desc' | 'asc'>('desc');
|
||||
const [searchInput, setSearchInput] = useState('');
|
||||
const [storeName, setStoreName] = useState('');
|
||||
const [region, setRegion] = useState('');
|
||||
const [showCityModal, setShowCityModal] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!authed) return;
|
||||
fetchVideos();
|
||||
}, [page]);
|
||||
}, [page, sortBy, order, storeName, region]);
|
||||
|
||||
const fetchVideos = async () => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const response = await getVideosList(page, pageSize);
|
||||
console.log('[ADO2] API response:', response);
|
||||
console.log('[ADO2] First video item:', response.items[0]);
|
||||
// result_movie_url이 있는 비디오만 필터링 (빈/더미 데이터 제외)
|
||||
const validVideos = response.items.filter(video => video.result_movie_url && video.result_movie_url.trim() !== '');
|
||||
setVideos(validVideos);
|
||||
const response = await getAllVideos(page, pageSize, sortBy, storeName, order, region);
|
||||
setVideos(response.items);
|
||||
setTotal(response.total);
|
||||
setTotalPages(response.total_pages);
|
||||
setHasNext(response.has_next);
|
||||
setHasPrev(response.has_prev);
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch videos:', err);
|
||||
console.error('Failed to fetch all videos:', err);
|
||||
setError(t('ado2Contents.loadFailed'));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCardClick = (videoId: number) => {
|
||||
setSelectedVideoId(videoId);
|
||||
};
|
||||
|
||||
const formatDate = (dateString: string) => {
|
||||
const date = new Date(dateString);
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
const hours = String(date.getHours()).padStart(2, '0');
|
||||
const minutes = String(date.getMinutes()).padStart(2, '0');
|
||||
return `${year}.${month}.${day}・${hours}:${minutes}`;
|
||||
};
|
||||
|
||||
const formatTitle = (storeName: string, dateString: string) => {
|
||||
const date = new Date(dateString);
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
const hours = String(date.getHours()).padStart(2, '0');
|
||||
const minutes = String(date.getMinutes()).padStart(2, '0');
|
||||
return `${storeName} ${month}/${day} ${hours}:${minutes}`;
|
||||
};
|
||||
|
||||
const handleDownload = async (videoUrl: string, storeName: string) => {
|
||||
try {
|
||||
const response = await fetch(videoUrl);
|
||||
const blob = await response.blob();
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `${storeName}.mp4`;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
window.URL.revokeObjectURL(url);
|
||||
document.body.removeChild(a);
|
||||
} catch (err) {
|
||||
console.error('Download failed:', err);
|
||||
alert(t('ado2Contents.downloadFailed'));
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteClick = (videoId: number) => {
|
||||
setDeleteTargetId(videoId);
|
||||
setDeleteModalOpen(true);
|
||||
};
|
||||
|
||||
const handleUploadClick = (video: VideoListItem) => {
|
||||
console.log('[ADO2] Upload clicked - video object:', video);
|
||||
console.log('[ADO2] video.video_id:', video.video_id);
|
||||
setUploadTargetVideo(video);
|
||||
setUploadModalOpen(true);
|
||||
};
|
||||
|
||||
const handleUploadModalClose = () => {
|
||||
setUploadModalOpen(false);
|
||||
setUploadTargetVideo(null);
|
||||
};
|
||||
|
||||
const handleDeleteCancel = () => {
|
||||
setDeleteModalOpen(false);
|
||||
setDeleteTargetId(null);
|
||||
};
|
||||
|
||||
const handleDeleteConfirm = async () => {
|
||||
if (!deleteTargetId) return;
|
||||
setIsDeleting(true);
|
||||
try {
|
||||
await deleteVideo(deleteTargetId);
|
||||
|
||||
// 삭제 성공 시 로컬 상태에서 즉시 제거 (UI 즉시 반영)
|
||||
// fetchVideos()를 호출하지 않음 - 서버 캐시 또는 동기화 지연으로 인해
|
||||
// 삭제된 항목이 다시 나타날 수 있기 때문
|
||||
setVideos(prev => prev.filter(video => video.video_id !== deleteTargetId));
|
||||
setTotal(prev => Math.max(0, prev - 1));
|
||||
|
||||
setDeleteModalOpen(false);
|
||||
setDeleteTargetId(null);
|
||||
} catch (err) {
|
||||
console.error('Delete failed:', err);
|
||||
alert(t('ado2Contents.deleteFailed'));
|
||||
} finally {
|
||||
setIsDeleting(false);
|
||||
}
|
||||
return `${year}.${month}.${day}`;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="ado2-contents-page">
|
||||
{/* Header */}
|
||||
<div className="ado2-contents-header">
|
||||
<h1 className="ado2-contents-title">{t('ado2Contents.title')}</h1>
|
||||
<h1 className="ado2-contents-title">{t('sidebar.ado2Contents')}</h1>
|
||||
<span className="ado2-contents-count">{t('ado2Contents.totalCount', { count: total })}</span>
|
||||
</div>
|
||||
|
||||
{/* Content Grid */}
|
||||
<div className="ado2-contents-filters">
|
||||
<select
|
||||
className="ado2-filter-select"
|
||||
value={`${sortBy}__${order}`}
|
||||
onChange={(e) => {
|
||||
const [sb, ord] = e.target.value.split('__') as [typeof sortBy, typeof order];
|
||||
setSortBy(sb);
|
||||
setOrder(ord);
|
||||
setPage(1);
|
||||
}}
|
||||
>
|
||||
<option value="created_at__desc">{t('ado2Contents.sortLatest')}</option>
|
||||
<option value="created_at__asc">{t('ado2Contents.sortOldest')}</option>
|
||||
<option value="like_count__desc">{t('ado2Contents.sortLikes')}</option>
|
||||
<option value="comment_count__desc">{t('ado2Contents.sortComments')}</option>
|
||||
</select>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className={`ado2-region-pill ${region ? 'active' : ''}`}
|
||||
onClick={() => setShowCityModal(true)}
|
||||
>
|
||||
{region || t('ado2Contents.regionPlaceholder')}
|
||||
{region && (
|
||||
<span className="ado2-region-clear" onClick={(e) => { e.stopPropagation(); setRegion(''); setPage(1); }}>✕</span>
|
||||
)}
|
||||
</button>
|
||||
|
||||
<form
|
||||
className="ado2-filter-search"
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
setStoreName(searchInput);
|
||||
setPage(1);
|
||||
}}
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
className="ado2-filter-input"
|
||||
value={searchInput}
|
||||
onChange={(e) => setSearchInput(e.target.value)}
|
||||
placeholder={t('ado2Contents.searchPlaceholder')}
|
||||
/>
|
||||
<button type="submit" className="ado2-filter-btn">
|
||||
{t('ado2Contents.searchBtn')}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<div className="ado2-contents-loading">
|
||||
<div className="loading-spinner"></div>
|
||||
|
|
@ -162,89 +140,64 @@ const ADO2ContentsPage: React.FC<ADO2ContentsPageProps> = ({ onBack, onNavigate
|
|||
<>
|
||||
<div className="ado2-contents-grid">
|
||||
{videos.map((video) => (
|
||||
<div key={video.task_id} className="ado2-content-card">
|
||||
{/* Video Thumbnail */}
|
||||
<div className="content-card-thumbnail">
|
||||
{video.result_movie_url ? (
|
||||
<div
|
||||
key={video.video_id}
|
||||
className="ado2-content-card"
|
||||
style={{ cursor: 'pointer' }}
|
||||
onClick={() => handleCardClick(video.video_id)}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onKeyDown={(e) => e.key === 'Enter' && handleCardClick(video.video_id)}
|
||||
>
|
||||
<div className="content-card-thumbnail ado2-gallery-thumbnail-wrap">
|
||||
{video.thumbnail_url ? (
|
||||
<img
|
||||
src={video.thumbnail_url}
|
||||
alt={video.store_name}
|
||||
style={{ width: '100%', height: '100%', objectFit: 'cover' }}
|
||||
/>
|
||||
) : video.result_movie_url ? (
|
||||
<video
|
||||
src={video.result_movie_url}
|
||||
className="content-video-preview"
|
||||
preload="metadata"
|
||||
muted
|
||||
playsInline
|
||||
onMouseEnter={(e) => e.currentTarget.play()}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.pause();
|
||||
e.currentTarget.currentTime = 0;
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<div className="content-no-video">
|
||||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
|
||||
<rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"/>
|
||||
<line x1="7" y1="2" x2="7" y2="22"/>
|
||||
<line x1="17" y1="2" x2="17" y2="22"/>
|
||||
<line x1="2" y1="12" x2="22" y2="12"/>
|
||||
<line x1="2" y1="7" x2="7" y2="7"/>
|
||||
<line x1="2" y1="17" x2="7" y2="17"/>
|
||||
<line x1="17" y1="17" x2="22" y2="17"/>
|
||||
<line x1="17" y1="7" x2="22" y2="7"/>
|
||||
<div className="content-no-video" />
|
||||
)}
|
||||
{/* 호버 오버레이 */}
|
||||
<div className="ado2-gallery-overlay">
|
||||
<div className="ado2-gallery-play-btn">
|
||||
<svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor">
|
||||
<polygon points="5,3 19,12 5,21"/>
|
||||
</svg>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Card Info */}
|
||||
<div className="content-card-info">
|
||||
<div className="content-card-text">
|
||||
<h3 className="content-card-title">
|
||||
{formatTitle(video.store_name, video.created_at)}
|
||||
</h3>
|
||||
<p className="content-card-date">
|
||||
{formatDate(video.created_at)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="content-card-actions">
|
||||
<button
|
||||
className="content-download-btn"
|
||||
onClick={() => handleUploadClick(video)}
|
||||
disabled={!video.result_movie_url}
|
||||
>
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.5">
|
||||
<path d="M10 13V3M10 3l-4 4M10 3l4 4"/>
|
||||
<path d="M3 15v2h14v-2"/>
|
||||
</svg>
|
||||
<span>{t('ado2Contents.uploadToSocial')}</span>
|
||||
</button>
|
||||
<button
|
||||
className="content-upload-btn"
|
||||
onClick={() => handleDownload(video.result_movie_url, video.store_name)}
|
||||
disabled={!video.result_movie_url}
|
||||
title={t('ado2Contents.download')}
|
||||
>
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.5">
|
||||
<path d="M10 3v10M10 13l-4-4M10 13l4-4"/>
|
||||
<path d="M3 15v2h14v-2"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
className="content-delete-btn"
|
||||
onClick={() => handleDeleteClick(video.video_id)}
|
||||
>
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.5">
|
||||
<path d="M3 5h14M8 5V3h4v2M6 5v12h8V5"/>
|
||||
<line x1="8" y1="8" x2="8" y2="14"/>
|
||||
<line x1="12" y1="8" x2="12" y2="14"/>
|
||||
</svg>
|
||||
</button>
|
||||
<h3 className="content-card-title">{video.store_name}</h3>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<p className="content-card-date">{formatDate(video.created_at)}</p>
|
||||
<span className="content-card-like">
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" strokeWidth="2">
|
||||
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
|
||||
</svg>
|
||||
{video.like_count ?? 0}
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" style={{ marginLeft: '6px' }}>
|
||||
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
|
||||
</svg>
|
||||
{video.comment_count ?? 0}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Pagination - 항상 표시 */}
|
||||
<div className="ado2-contents-pagination">
|
||||
<button
|
||||
className="pagination-btn"
|
||||
|
|
@ -265,39 +218,24 @@ const ADO2ContentsPage: React.FC<ADO2ContentsPageProps> = ({ onBack, onNavigate
|
|||
</>
|
||||
)}
|
||||
|
||||
{/* 삭제 확인 모달 */}
|
||||
{deleteModalOpen && (
|
||||
<div className="delete-modal-overlay" onClick={handleDeleteCancel}>
|
||||
<div className="delete-modal" onClick={(e: React.MouseEvent) => e.stopPropagation()}>
|
||||
<h2 className="delete-modal-title">{t('ado2Contents.deleteConfirmTitle')}</h2>
|
||||
<p className="delete-modal-description">{t('ado2Contents.deleteConfirmDesc')}</p>
|
||||
<div className="delete-modal-actions">
|
||||
<button
|
||||
className="delete-modal-btn cancel"
|
||||
onClick={handleDeleteCancel}
|
||||
disabled={isDeleting}
|
||||
>
|
||||
{t('ado2Contents.cancel')}
|
||||
</button>
|
||||
<button
|
||||
className="delete-modal-btn confirm"
|
||||
onClick={handleDeleteConfirm}
|
||||
disabled={isDeleting}
|
||||
>
|
||||
{isDeleting ? t('ado2Contents.deleting') : t('ado2Contents.delete')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{!authed && (
|
||||
<LoginPromptModal onClose={() => { window.location.href = '/'; }} />
|
||||
)}
|
||||
|
||||
{/* 소셜 미디어 업로드 모달 */}
|
||||
<SocialPostingModal
|
||||
isOpen={uploadModalOpen}
|
||||
onClose={handleUploadModalClose}
|
||||
video={uploadTargetVideo}
|
||||
onGoToCalendar={onNavigate ? () => onNavigate('콘텐츠 캘린더') : undefined}
|
||||
/>
|
||||
{selectedVideoId !== null && (
|
||||
<VideoDetailModal
|
||||
videoId={String(selectedVideoId)}
|
||||
onClose={() => setSelectedVideoId(null)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{showCityModal && (
|
||||
<CitySelectModal
|
||||
selected={region}
|
||||
onSelect={(city) => { setRegion(city); setPage(1); }}
|
||||
onClose={() => setShowCityModal(false)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { generateVideo, waitForVideoComplete } from '../../utils/api';
|
||||
import { generateVideo, waitForVideoComplete, getSubtitleStatus, waitForSubtitleComplete } from '../../utils/api';
|
||||
import SocialPostingModal from '../../components/SocialPostingModal';
|
||||
import { useTutorial } from '../../components/Tutorial/useTutorial';
|
||||
import { TUTORIAL_KEYS } from '../../components/Tutorial/tutorialSteps';
|
||||
|
|
@ -174,10 +174,19 @@ const CompletionContent: React.FC<CompletionContentProps> = ({
|
|||
|
||||
hasStartedGeneration.current = true;
|
||||
setVideoStatus('generating');
|
||||
setStatusMessage(t('completion.requestingGeneration'));
|
||||
setStatusMessage(t('completion.checkingSubtitle'));
|
||||
setErrorMessage(null);
|
||||
|
||||
try {
|
||||
// 자막 완료 여부 확인 후 미완료면 폴링
|
||||
const subtitleStatus = await getSubtitleStatus(songTaskId);
|
||||
if (subtitleStatus.status !== 'completed') {
|
||||
setStatusMessage(t('completion.waitingSubtitle'));
|
||||
await waitForSubtitleComplete(songTaskId);
|
||||
}
|
||||
|
||||
setStatusMessage(t('completion.requestingGeneration'));
|
||||
|
||||
const savedRatio = localStorage.getItem('castad_video_ratio');
|
||||
const orientation = (savedRatio === 'horizontal' || savedRatio === 'vertical') ? savedRatio : 'vertical';
|
||||
|
||||
|
|
@ -483,9 +492,33 @@ const CompletionContent: React.FC<CompletionContentProps> = ({
|
|||
<div className="comp2-meta-divider"></div>
|
||||
<div className="comp2-lyrics-section">
|
||||
<span className="comp2-meta-label">{t('completion.lyrics')}</span>
|
||||
<p className="comp2-lyrics-text">
|
||||
{songCompletionData?.lyrics || t('completion.sampleLyrics')}
|
||||
</p>
|
||||
{(() => {
|
||||
if (!songCompletionData) {
|
||||
return <p className="comp2-lyrics-text">{t('completion.sampleLyrics')}</p>;
|
||||
}
|
||||
if (!songCompletionData.lyrics) {
|
||||
return <p className="comp2-lyrics-text">{t('completion.noLyricsBGM')}</p>;
|
||||
}
|
||||
const lines = songCompletionData.lyrics.split('\n').filter((l: string) => l.trim());
|
||||
const outro = lines.slice(-1);
|
||||
const body = lines.slice(0, -1);
|
||||
const half = Math.ceil(body.length / 2);
|
||||
const sections = [
|
||||
{ tag: '[Verse]', lines: body.slice(0, half) },
|
||||
{ tag: '[Chorus]', lines: body.slice(half) },
|
||||
{ tag: '[Outro]', lines: outro },
|
||||
].filter(s => s.lines.length > 0);
|
||||
return (
|
||||
<div className="comp2-lyrics-paragraphs">
|
||||
{sections.map((section, i) => (
|
||||
<div key={i} className="comp2-lyrics-para-section">
|
||||
<span className="comp2-lyrics-tag">{section.tag}</span>
|
||||
<p className="comp2-lyrics-text">{section.lines.join('\n')}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
})()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -522,6 +555,8 @@ const CompletionContent: React.FC<CompletionContentProps> = ({
|
|||
task_id: songTaskId || '',
|
||||
result_movie_url: videoUrl,
|
||||
created_at: new Date().toISOString(),
|
||||
like_count: 0,
|
||||
comment_count: 0,
|
||||
} : null}
|
||||
/>
|
||||
|
||||
|
|
|
|||
|
|
@ -553,7 +553,7 @@ const ContentCalendarContent: React.FC<ContentCalendarContentProps> = ({ onNavig
|
|||
<PlatformIcon platform={item.platform} size={16} />
|
||||
<span style={{
|
||||
fontFamily: 'Pretendard, sans-serif', fontWeight: 500, fontSize: 12,
|
||||
color: '#9bcacc', lineHeight: 1,
|
||||
color: '#9bcacc', lineHeight: 1.4,
|
||||
overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis',
|
||||
}}>
|
||||
{item.platform_username || item.platform_user_id || item.channel_name}
|
||||
|
|
|
|||
|
|
@ -9,12 +9,13 @@ import DashboardContent from './DashboardContent';
|
|||
import BusinessSettingsContent from './BusinessSettingsContent';
|
||||
import UrlInputContent from './UrlInputContent';
|
||||
import ADO2ContentsPage from './ADO2ContentsPage';
|
||||
import MyContentsPage from './MyContentsPage';
|
||||
import MyInfoContent from './MyInfoContent';
|
||||
import ContentCalendarContent from './ContentCalendarContent';
|
||||
import LoadingSection from '../Analysis/LoadingSection';
|
||||
import AnalysisResultSection from '../Analysis/AnalysisResultSection';
|
||||
import { ImageItem, CrawlingResponse, UserMeResponse } from '../../types/api';
|
||||
import { crawlUrl, autocomplete, AutocompleteRequest, getUserMe, getUserCredits, clearTokens } from '../../utils/api';
|
||||
import { crawlUrl, autocomplete, marketingAnalysis, AutocompleteRequest, getUserMe, getUserCredits, clearTokens } from '../../utils/api';
|
||||
import { useTutorial } from '../../components/Tutorial/useTutorial';
|
||||
import { TUTORIAL_KEYS } from '../../components/Tutorial/tutorialSteps';
|
||||
import TutorialOverlay, { TutorialRestartPopup } from '../../components/Tutorial/TutorialOverlay';
|
||||
|
|
@ -130,6 +131,13 @@ const GenerationFlow: React.FC<GenerationFlowProps> = ({
|
|||
}
|
||||
}, []);
|
||||
|
||||
// 사운드 스튜디오, 영상 완성 진입 시 크레딧 갱신
|
||||
useEffect(() => {
|
||||
if (wizardStep === 2 || wizardStep === 3) {
|
||||
refreshCredits();
|
||||
}
|
||||
}, [wizardStep]);
|
||||
|
||||
// 로그인 직후 사용자 정보 + 크레딧 조회
|
||||
useEffect(() => {
|
||||
const fetchUserInfo = async () => {
|
||||
|
|
@ -248,12 +256,38 @@ const GenerationFlow: React.FC<GenerationFlowProps> = ({
|
|||
setIsAnalysisComplete(true);
|
||||
} catch (err) {
|
||||
console.error('Autocomplete error:', err);
|
||||
const msg = err instanceof Error ? err.message : '';
|
||||
setAnalysisError(/^HTTP error!/.test(msg) ? t('app.autocompleteError') : (msg || t('app.autocompleteError')));
|
||||
setAnalysisError(t('app.autocompleteError'));
|
||||
goToWizardStep(-2); // URL 입력으로 돌아가기
|
||||
}
|
||||
};
|
||||
|
||||
// 업체명·주소 수동 입력으로 마케팅 분석 API 호출
|
||||
const handleManualInput = async (businessName: string, address: string) => {
|
||||
goToWizardStep(-1);
|
||||
setIsAnalysisComplete(false);
|
||||
setAnalysisError(null);
|
||||
|
||||
try {
|
||||
const data = await marketingAnalysis(businessName, address);
|
||||
|
||||
if (data.processed_info) {
|
||||
data.processed_info.customer_name = data.processed_info.customer_name || businessName;
|
||||
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));
|
||||
saveSearchHistory({ type: 'name', value: businessName, address, roadAddress: address });
|
||||
setIsAnalysisComplete(true);
|
||||
} catch (err) {
|
||||
console.error('Marketing analysis error:', err);
|
||||
setAnalysisError(t('app.autocompleteError'));
|
||||
goToWizardStep(-2);
|
||||
}
|
||||
};
|
||||
|
||||
// 테스트용 랜덤 m_id 생성 (99 ~ 300)
|
||||
const generateRandomMId = (): number => {
|
||||
return Math.floor(Math.random() * (300 - 99 + 1)) + 99;
|
||||
|
|
@ -318,8 +352,7 @@ const GenerationFlow: React.FC<GenerationFlowProps> = ({
|
|||
setIsAnalysisComplete(true);
|
||||
} catch (err) {
|
||||
console.error('Crawling failed:', err);
|
||||
const errorMessage = err instanceof Error ? err.message : t('app.analysisError');
|
||||
setAnalysisError(errorMessage);
|
||||
setAnalysisError(t('app.analysisError'));
|
||||
goToWizardStep(-2); // URL 입력으로 돌아가기
|
||||
}
|
||||
};
|
||||
|
|
@ -359,7 +392,7 @@ const GenerationFlow: React.FC<GenerationFlowProps> = ({
|
|||
if (tutorial.isActive) tutorial.skipTutorial();
|
||||
if (activeItem === '내 정보' && !tutorial.hasSeen(TUTORIAL_KEYS.MY_INFO)) {
|
||||
tutorial.startTutorial(TUTORIAL_KEYS.MY_INFO);
|
||||
} else if (activeItem === 'ADO2 콘텐츠' && !tutorial.hasSeen(TUTORIAL_KEYS.ADO2_CONTENTS)) {
|
||||
} else if (activeItem === '내 콘텐츠' && !tutorial.hasSeen(TUTORIAL_KEYS.ADO2_CONTENTS)) {
|
||||
tutorial.startTutorial(TUTORIAL_KEYS.ADO2_CONTENTS);
|
||||
} else if (activeItem === '대시보드' && !tutorial.hasSeen(TUTORIAL_KEYS.DASHBOARD)) {
|
||||
tutorial.startTutorial(TUTORIAL_KEYS.DASHBOARD);
|
||||
|
|
@ -405,6 +438,7 @@ const GenerationFlow: React.FC<GenerationFlowProps> = ({
|
|||
<UrlInputContent
|
||||
onAnalyze={handleStartAnalysis}
|
||||
onAutocomplete={handleAutocomplete}
|
||||
onManualInput={handleManualInput}
|
||||
onTestData={handleTestData}
|
||||
error={analysisError}
|
||||
/>
|
||||
|
|
@ -504,8 +538,10 @@ const GenerationFlow: React.FC<GenerationFlowProps> = ({
|
|||
case '비즈니스 설정':
|
||||
return <BusinessSettingsContent />;
|
||||
case 'ADO2 콘텐츠':
|
||||
return <ADO2ContentsPage />;
|
||||
case '내 콘텐츠':
|
||||
return (
|
||||
<ADO2ContentsPage
|
||||
<MyContentsPage
|
||||
onBack={() => setActiveItem('새 프로젝트 만들기')}
|
||||
onNavigate={handleNavigate}
|
||||
/>
|
||||
|
|
@ -539,12 +575,12 @@ const GenerationFlow: React.FC<GenerationFlowProps> = ({
|
|||
// 브랜드 분석(0)일 때는 전체 페이지 스크롤
|
||||
const isBrandAnalysis = activeItem === '새 프로젝트 만들기' && wizardStep === 0;
|
||||
// 스크롤이 필요한 페이지: 대시보드, 비즈니스 설정, 브랜드 분석(0), ADO2 콘텐츠, 내 정보
|
||||
const needsScroll = activeItem === '대시보드' || activeItem === '비즈니스 설정' || activeItem === 'ADO2 콘텐츠' || activeItem === '내 정보' || activeItem === '콘텐츠 캘린더' || isBrandAnalysis;
|
||||
const needsScroll = activeItem === '대시보드' || activeItem === '비즈니스 설정' || activeItem === 'ADO2 콘텐츠' || activeItem === '내 콘텐츠' || activeItem === '내 정보' || activeItem === '콘텐츠 캘린더' || isBrandAnalysis;
|
||||
|
||||
// 현재 화면에 맞는 튜토리얼 키 반환 (없으면 null)
|
||||
const getCurrentTutorialKey = (): string | null => {
|
||||
if (activeItem === '내 정보') return TUTORIAL_KEYS.MY_INFO;
|
||||
if (activeItem === 'ADO2 콘텐츠') return TUTORIAL_KEYS.ADO2_CONTENTS;
|
||||
if (activeItem === '내 콘텐츠') return TUTORIAL_KEYS.ADO2_CONTENTS;
|
||||
if (activeItem === '대시보드') return TUTORIAL_KEYS.DASHBOARD;
|
||||
if (activeItem === '콘텐츠 캘린더') return TUTORIAL_KEYS.CONTENT_CALENDAR;
|
||||
if (activeItem === '새 프로젝트 만들기') {
|
||||
|
|
@ -596,7 +632,7 @@ const GenerationFlow: React.FC<GenerationFlowProps> = ({
|
|||
return (
|
||||
<div className="analysis-page-wrapper">
|
||||
{showSidebar && (
|
||||
<Sidebar activeItem={activeItem} onNavigate={handleNavigate} onHome={handleHome} userInfo={userInfo} onLogout={handleLogout} credits={credits} />
|
||||
<Sidebar activeItem={activeItem} onNavigate={handleNavigate} onHome={handleHome} userInfo={userInfo} onLogout={handleLogout} credits={credits} tutorialAvailable={!!getCurrentTutorialKey()} tutorialEnabled={tutorial.isEnabled} onToggleTutorial={() => tutorial.toggleTutorial(getCurrentTutorialKey())} />
|
||||
)}
|
||||
<main className="analysis-page-main">
|
||||
{renderContent()}
|
||||
|
|
@ -609,7 +645,7 @@ const GenerationFlow: React.FC<GenerationFlowProps> = ({
|
|||
return (
|
||||
<div className={`flex w-full bg-[#002224] text-white ${needsScroll ? 'min-h-[100dvh]' : 'h-[100dvh] overflow-hidden'}`}>
|
||||
{showSidebar && (
|
||||
<Sidebar activeItem={activeItem} onNavigate={handleNavigate} onHome={handleHome} userInfo={userInfo} onLogout={handleLogout} credits={credits} />
|
||||
<Sidebar activeItem={activeItem} onNavigate={handleNavigate} onHome={handleHome} userInfo={userInfo} onLogout={handleLogout} credits={credits} tutorialAvailable={!!getCurrentTutorialKey()} tutorialEnabled={tutorial.isEnabled} onToggleTutorial={() => tutorial.toggleTutorial(getCurrentTutorialKey())} />
|
||||
)}
|
||||
{tutorialUI}
|
||||
<div className={`flex-1 relative pl-0 md:pl-0 ${needsScroll ? 'overflow-auto' : 'h-full overflow-hidden'}`}>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,399 @@
|
|||
|
||||
import React, { useState, useEffect, useRef, useCallback } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { getVideosList, deleteVideo } from '../../utils/api';
|
||||
import { VideoListItem } from '../../types/api';
|
||||
import SocialPostingModal from '../../components/SocialPostingModal';
|
||||
import VideoDetailModal from '../../components/VideoDetailModal';
|
||||
import { useTutorial } from '../../components/Tutorial/useTutorial';
|
||||
import { TUTORIAL_KEYS } from '../../components/Tutorial/tutorialSteps';
|
||||
|
||||
const VideoPreviewCard: React.FC<{ src: string; className?: string }> = ({ src, className }) => {
|
||||
const videoRef = useRef<HTMLVideoElement>(null);
|
||||
const isPlayingRef = useRef(false);
|
||||
const pendingPlayRef = useRef(false);
|
||||
|
||||
useEffect(() => {
|
||||
const video = videoRef.current;
|
||||
if (!video) return;
|
||||
|
||||
const observer = new IntersectionObserver(
|
||||
([entry]) => {
|
||||
if (entry.isIntersecting) {
|
||||
video.preload = 'auto';
|
||||
} else {
|
||||
video.preload = 'none';
|
||||
}
|
||||
},
|
||||
{ threshold: 0.1 }
|
||||
);
|
||||
|
||||
observer.observe(video);
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
const safePlay = useCallback((video: HTMLVideoElement) => {
|
||||
const playPromise = video.play();
|
||||
if (playPromise !== undefined) {
|
||||
playPromise
|
||||
.then(() => { isPlayingRef.current = true; })
|
||||
.catch((error) => {
|
||||
if (error.name !== 'AbortError') console.error(error);
|
||||
});
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleCanPlay = useCallback(() => {
|
||||
if (!pendingPlayRef.current || !videoRef.current) return;
|
||||
pendingPlayRef.current = false;
|
||||
safePlay(videoRef.current);
|
||||
}, [safePlay]);
|
||||
|
||||
const handleMouseEnter = useCallback(() => {
|
||||
const video = videoRef.current;
|
||||
if (!video) return;
|
||||
if (video.readyState >= 3) {
|
||||
safePlay(video);
|
||||
} else {
|
||||
pendingPlayRef.current = true;
|
||||
}
|
||||
}, [safePlay]);
|
||||
|
||||
const handleMouseLeave = useCallback(() => {
|
||||
const video = videoRef.current;
|
||||
if (!video) return;
|
||||
pendingPlayRef.current = false;
|
||||
if (isPlayingRef.current) {
|
||||
video.pause();
|
||||
video.currentTime = 0;
|
||||
isPlayingRef.current = false;
|
||||
}
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<video
|
||||
ref={videoRef}
|
||||
src={src}
|
||||
className={className}
|
||||
muted
|
||||
playsInline
|
||||
preload="none"
|
||||
onCanPlay={handleCanPlay}
|
||||
onMouseEnter={handleMouseEnter}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
interface MyContentsPageProps {
|
||||
onBack?: () => void;
|
||||
onNavigate?: (item: string) => void;
|
||||
}
|
||||
|
||||
const MyContentsPage: React.FC<MyContentsPageProps> = ({ onNavigate }) => {
|
||||
const { t } = useTranslation();
|
||||
const tutorial = useTutorial();
|
||||
const [videos, setVideos] = useState<VideoListItem[]>([]);
|
||||
const [total, setTotal] = useState(0);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [page, setPage] = useState(1);
|
||||
const [hasNext, setHasNext] = useState(false);
|
||||
const [hasPrev, setHasPrev] = useState(false);
|
||||
const [totalPages, setTotalPages] = useState(1);
|
||||
const [deleteModalOpen, setDeleteModalOpen] = useState(false);
|
||||
const [deleteTargetId, setDeleteTargetId] = useState<number | null>(null);
|
||||
const [isDeleting, setIsDeleting] = useState(false);
|
||||
const [uploadModalOpen, setUploadModalOpen] = useState(false);
|
||||
const [uploadTargetVideo, setUploadTargetVideo] = useState<VideoListItem | null>(null);
|
||||
const [selectedVideoId, setSelectedVideoId] = useState<number | null>(null);
|
||||
|
||||
const pageSize = 12;
|
||||
|
||||
useEffect(() => {
|
||||
fetchVideos();
|
||||
}, [page]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!tutorial.hasSeen(TUTORIAL_KEYS.ADO2_CONTENTS)) {
|
||||
tutorial.startTutorial(TUTORIAL_KEYS.ADO2_CONTENTS);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const fetchVideos = async () => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const response = await getVideosList(page, pageSize);
|
||||
const validVideos = response.items.filter(video => video.result_movie_url && video.result_movie_url.trim() !== '');
|
||||
setVideos(validVideos);
|
||||
setTotal(response.total);
|
||||
setTotalPages(response.total_pages);
|
||||
setHasNext(response.has_next);
|
||||
setHasPrev(response.has_prev);
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch videos:', err);
|
||||
setError(t('ado2Contents.loadFailed'));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const formatDate = (dateString: string) => {
|
||||
const date = new Date(dateString);
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
const hours = String(date.getHours()).padStart(2, '0');
|
||||
const minutes = String(date.getMinutes()).padStart(2, '0');
|
||||
return `${year}.${month}.${day}・${hours}:${minutes}`;
|
||||
};
|
||||
|
||||
const formatTitle = (storeName: string, dateString: string) => {
|
||||
const date = new Date(dateString);
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
const hours = String(date.getHours()).padStart(2, '0');
|
||||
const minutes = String(date.getMinutes()).padStart(2, '0');
|
||||
return `${storeName} ${month}/${day} ${hours}:${minutes}`;
|
||||
};
|
||||
|
||||
const handleDownload = async (videoUrl: string, storeName: string) => {
|
||||
try {
|
||||
const response = await fetch(videoUrl);
|
||||
const blob = await response.blob();
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `${storeName}.mp4`;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
window.URL.revokeObjectURL(url);
|
||||
document.body.removeChild(a);
|
||||
} catch (err) {
|
||||
console.error('Download failed:', err);
|
||||
alert(t('ado2Contents.downloadFailed'));
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteClick = (videoId: number) => {
|
||||
setDeleteTargetId(videoId);
|
||||
setDeleteModalOpen(true);
|
||||
};
|
||||
|
||||
const handleUploadClick = (video: VideoListItem) => {
|
||||
setUploadTargetVideo(video);
|
||||
setUploadModalOpen(true);
|
||||
};
|
||||
|
||||
const handleUploadModalClose = () => {
|
||||
setUploadModalOpen(false);
|
||||
setUploadTargetVideo(null);
|
||||
};
|
||||
|
||||
const handleDeleteCancel = () => {
|
||||
setDeleteModalOpen(false);
|
||||
setDeleteTargetId(null);
|
||||
};
|
||||
|
||||
const handleDeleteConfirm = async () => {
|
||||
if (!deleteTargetId) return;
|
||||
setIsDeleting(true);
|
||||
try {
|
||||
await deleteVideo(deleteTargetId);
|
||||
setVideos(prev => prev.filter(video => video.video_id !== deleteTargetId));
|
||||
setTotal(prev => Math.max(0, prev - 1));
|
||||
setDeleteModalOpen(false);
|
||||
setDeleteTargetId(null);
|
||||
} catch (err) {
|
||||
console.error('Delete failed:', err);
|
||||
alert(t('ado2Contents.deleteFailed'));
|
||||
} finally {
|
||||
setIsDeleting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="ado2-contents-page">
|
||||
{/* Header */}
|
||||
<div className="ado2-contents-header">
|
||||
<h1 className="ado2-contents-title">{t('sidebar.myContents')}</h1>
|
||||
<span className="ado2-contents-count">{t('ado2Contents.totalCount', { count: total })}</span>
|
||||
</div>
|
||||
|
||||
{/* Content Grid */}
|
||||
{loading ? (
|
||||
<div className="ado2-contents-loading">
|
||||
<div className="loading-spinner"></div>
|
||||
<p>{t('ado2Contents.loading')}</p>
|
||||
</div>
|
||||
) : error ? (
|
||||
<div className="ado2-contents-error">
|
||||
<p>{error}</p>
|
||||
<button onClick={fetchVideos} className="retry-btn">{t('ado2Contents.retry')}</button>
|
||||
</div>
|
||||
) : videos.length === 0 ? (
|
||||
<div className="ado2-contents-empty">
|
||||
<p>{t('ado2Contents.noContent')}</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="ado2-contents-grid">
|
||||
{videos.map((video) => (
|
||||
<div key={video.task_id} className="ado2-content-card">
|
||||
{/* Video Thumbnail */}
|
||||
<div
|
||||
className="content-card-thumbnail"
|
||||
style={{ cursor: 'pointer' }}
|
||||
onClick={() => setSelectedVideoId(video.video_id)}
|
||||
>
|
||||
{video.result_movie_url ? (
|
||||
<VideoPreviewCard
|
||||
src={video.result_movie_url}
|
||||
className="content-video-preview"
|
||||
/>
|
||||
) : (
|
||||
<div className="content-no-video">
|
||||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
|
||||
<rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"/>
|
||||
<line x1="7" y1="2" x2="7" y2="22"/>
|
||||
<line x1="17" y1="2" x2="17" y2="22"/>
|
||||
<line x1="2" y1="12" x2="22" y2="12"/>
|
||||
<line x1="2" y1="7" x2="7" y2="7"/>
|
||||
<line x1="2" y1="17" x2="7" y2="17"/>
|
||||
<line x1="17" y1="17" x2="22" y2="17"/>
|
||||
<line x1="17" y1="7" x2="22" y2="7"/>
|
||||
</svg>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Card Info */}
|
||||
<div className="content-card-info">
|
||||
<div className="content-card-text">
|
||||
<h3 className="content-card-title">
|
||||
{formatTitle(video.store_name, video.created_at)}
|
||||
</h3>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<p className="content-card-date">
|
||||
{formatDate(video.created_at)}
|
||||
</p>
|
||||
<span className="content-card-like">
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" strokeWidth="2">
|
||||
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
|
||||
</svg>
|
||||
{video.like_count ?? 0}
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" style={{ marginLeft: '6px' }}>
|
||||
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
|
||||
</svg>
|
||||
{video.comment_count ?? 0}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="content-card-actions">
|
||||
<button
|
||||
className="content-download-btn"
|
||||
onClick={() => handleUploadClick(video)}
|
||||
disabled={!video.result_movie_url}
|
||||
>
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.5">
|
||||
<path d="M10 13V3M10 3l-4 4M10 3l4 4"/>
|
||||
<path d="M3 15v2h14v-2"/>
|
||||
</svg>
|
||||
<span>{t('ado2Contents.uploadToSocial')}</span>
|
||||
</button>
|
||||
<button
|
||||
className="content-upload-btn"
|
||||
onClick={() => handleDownload(video.result_movie_url, video.store_name)}
|
||||
disabled={!video.result_movie_url}
|
||||
title={t('ado2Contents.download')}
|
||||
>
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.5">
|
||||
<path d="M10 3v10M10 13l-4-4M10 13l4-4"/>
|
||||
<path d="M3 15v2h14v-2"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
className="content-delete-btn"
|
||||
onClick={() => handleDeleteClick(video.video_id)}
|
||||
>
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.5">
|
||||
<path d="M3 5h14M8 5V3h4v2M6 5v12h8V5"/>
|
||||
<line x1="8" y1="8" x2="8" y2="14"/>
|
||||
<line x1="12" y1="8" x2="12" y2="14"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Pagination */}
|
||||
<div className="ado2-contents-pagination">
|
||||
<button
|
||||
className="pagination-btn"
|
||||
onClick={() => setPage(p => p - 1)}
|
||||
disabled={!hasPrev}
|
||||
>
|
||||
{t('ado2Contents.previous')}
|
||||
</button>
|
||||
<span className="pagination-info">{page} / {totalPages}</span>
|
||||
<button
|
||||
className="pagination-btn"
|
||||
onClick={() => setPage(p => p + 1)}
|
||||
disabled={!hasNext}
|
||||
>
|
||||
{t('ado2Contents.next')}
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* 삭제 확인 모달 */}
|
||||
{deleteModalOpen && (
|
||||
<div className="delete-modal-overlay" onClick={handleDeleteCancel}>
|
||||
<div className="delete-modal" onClick={(e: React.MouseEvent) => e.stopPropagation()}>
|
||||
<h2 className="delete-modal-title">{t('ado2Contents.deleteConfirmTitle')}</h2>
|
||||
<p className="delete-modal-description">{t('ado2Contents.deleteConfirmDesc')}</p>
|
||||
<div className="delete-modal-actions">
|
||||
<button
|
||||
className="delete-modal-btn cancel"
|
||||
onClick={handleDeleteCancel}
|
||||
disabled={isDeleting}
|
||||
>
|
||||
{t('ado2Contents.cancel')}
|
||||
</button>
|
||||
<button
|
||||
className="delete-modal-btn confirm"
|
||||
onClick={handleDeleteConfirm}
|
||||
disabled={isDeleting}
|
||||
>
|
||||
{isDeleting ? t('ado2Contents.deleting') : t('ado2Contents.delete')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{selectedVideoId !== null && (
|
||||
<VideoDetailModal
|
||||
videoId={String(selectedVideoId)}
|
||||
onClose={() => setSelectedVideoId(null)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* 소셜 미디어 업로드 모달 */}
|
||||
<SocialPostingModal
|
||||
isOpen={uploadModalOpen}
|
||||
onClose={handleUploadModalClose}
|
||||
video={uploadTargetVideo}
|
||||
onGoToCalendar={onNavigate ? () => onNavigate('콘텐츠 캘린더') : undefined}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MyContentsPage;
|
||||
|
|
@ -153,10 +153,10 @@ const SoundStudioContent: React.FC<SoundStudioContentProps> = ({
|
|||
'ROCK': 'rock',
|
||||
};
|
||||
|
||||
const isInstrumental = selectedType === '배경음악';
|
||||
const songResponse = await generateSong(imageTaskId, {
|
||||
genre: genreMap[selectedGenre] || 'pop',
|
||||
language,
|
||||
lyrics: currentLyrics,
|
||||
...(isInstrumental ? { instrumental: true, lyrics: '' } : { language, lyrics: currentLyrics }),
|
||||
});
|
||||
|
||||
if (!songResponse.success) {
|
||||
|
|
@ -276,6 +276,7 @@ const SoundStudioContent: React.FC<SoundStudioContentProps> = ({
|
|||
|
||||
try {
|
||||
const language = LANGUAGE_MAP[selectedLang] || 'Korean';
|
||||
const isInstrumental = selectedType === '배경음악';
|
||||
|
||||
// 1. 가사 생성 요청
|
||||
console.log('[SoundStudio] Sending m_id:', mId);
|
||||
|
|
@ -287,37 +288,13 @@ const SoundStudioContent: React.FC<SoundStudioContentProps> = ({
|
|||
region: businessInfo.region,
|
||||
task_id: imageTaskId,
|
||||
orientation,
|
||||
...(isInstrumental && { instrumental: true }),
|
||||
});
|
||||
|
||||
if (!lyricResponse.success || !lyricResponse.task_id) {
|
||||
throw new Error(lyricResponse.error_message || t('soundStudio.lyricGenerationFailed'));
|
||||
}
|
||||
|
||||
// 2. 가사 생성 상태 폴링 → 완료 시 상세 조회
|
||||
setStatusMessage(t('soundStudio.generatingLyrics'));
|
||||
const lyricDetailResponse = await waitForLyricComplete(
|
||||
lyricResponse.task_id,
|
||||
(status: string) => {
|
||||
if (status === 'processing') {
|
||||
setStatusMessage(t('soundStudio.generatingLyrics'));
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
if (!lyricDetailResponse.lyric_result) {
|
||||
throw new Error(t('soundStudio.lyricNotReceived'));
|
||||
}
|
||||
|
||||
// "I'm sorry" 체크
|
||||
if (lyricDetailResponse.lyric_result.includes("I'm sorry")) {
|
||||
throw new Error(t('soundStudio.lyricGenerationError'));
|
||||
}
|
||||
|
||||
setLyrics(lyricDetailResponse.lyric_result);
|
||||
|
||||
setStatus('generating_song');
|
||||
setStatusMessage(t('soundStudio.generatingSong'));
|
||||
|
||||
const genreMap: Record<string, string> = {
|
||||
'자동 선택': 'pop',
|
||||
'K-POP': 'kpop',
|
||||
|
|
@ -329,10 +306,39 @@ const SoundStudioContent: React.FC<SoundStudioContentProps> = ({
|
|||
'ROCK': 'rock',
|
||||
};
|
||||
|
||||
let songLyrics: string | undefined;
|
||||
|
||||
if (!isInstrumental) {
|
||||
// 2. 가사 생성 상태 폴링 → 완료 시 상세 조회
|
||||
setStatusMessage(t('soundStudio.generatingLyrics'));
|
||||
const lyricDetailResponse = await waitForLyricComplete(
|
||||
lyricResponse.task_id,
|
||||
(status: string) => {
|
||||
if (status === 'processing') {
|
||||
setStatusMessage(t('soundStudio.generatingLyrics'));
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
if (!lyricDetailResponse.lyric_result) {
|
||||
throw new Error(t('soundStudio.lyricNotReceived'));
|
||||
}
|
||||
|
||||
// "I'm sorry" 체크
|
||||
if (lyricDetailResponse.lyric_result.includes("I'm sorry")) {
|
||||
throw new Error(t('soundStudio.lyricGenerationError'));
|
||||
}
|
||||
|
||||
setLyrics(lyricDetailResponse.lyric_result);
|
||||
songLyrics = lyricDetailResponse.lyric_result;
|
||||
}
|
||||
|
||||
setStatus('generating_song');
|
||||
setStatusMessage(t('soundStudio.generatingSong'));
|
||||
|
||||
const songResponse = await generateSong(imageTaskId, {
|
||||
genre: genreMap[selectedGenre] || 'pop',
|
||||
language,
|
||||
lyrics: lyricDetailResponse.lyric_result,
|
||||
...(isInstrumental ? { instrumental: true, lyrics: '' } : { language, lyrics: songLyrics }),
|
||||
});
|
||||
|
||||
if (!songResponse.success) {
|
||||
|
|
@ -351,7 +357,7 @@ const SoundStudioContent: React.FC<SoundStudioContentProps> = ({
|
|||
setStatus('polling');
|
||||
setStatusMessage(t('soundStudio.generatingSong'));
|
||||
|
||||
await resumePolling(songResponse.task_id, songResponse.song_id, lyricDetailResponse.lyric_result, 0);
|
||||
await resumePolling(songResponse.task_id, songResponse.song_id, songLyrics ?? '', 0);
|
||||
|
||||
} catch (error) {
|
||||
console.error('Music generation failed:', error);
|
||||
|
|
@ -383,7 +389,14 @@ const SoundStudioContent: React.FC<SoundStudioContentProps> = ({
|
|||
<>
|
||||
<main className="sound-studio-page">
|
||||
{audioUrl && (
|
||||
<audio ref={audioRef} src={audioUrl} preload="metadata" />
|
||||
<audio
|
||||
ref={audioRef}
|
||||
src={audioUrl}
|
||||
preload="metadata"
|
||||
onLoadedMetadata={() => {
|
||||
if (audioRef.current) setDuration(audioRef.current.duration);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Header */}
|
||||
|
|
@ -412,7 +425,7 @@ const SoundStudioContent: React.FC<SoundStudioContentProps> = ({
|
|||
<div className="sound-type-grid">
|
||||
{[
|
||||
{ key: '보컬', label: t('soundStudio.soundTypeVocal'), disabled: false },
|
||||
{ key: '배경음악', label: t('soundStudio.soundTypeBGM'), disabled: true },
|
||||
{ key: '배경음악', label: t('soundStudio.soundTypeBGM'), disabled: false },
|
||||
].map(({ key, label, disabled }) => (
|
||||
<button
|
||||
key={key}
|
||||
|
|
@ -483,8 +496,8 @@ const SoundStudioContent: React.FC<SoundStudioContentProps> = ({
|
|||
{['한국어', 'English', '中文'].map((lang) => (
|
||||
<button
|
||||
key={lang}
|
||||
onClick={() => !isGenerating && setSelectedLang(lang)}
|
||||
disabled={isGenerating}
|
||||
onClick={() => !isGenerating && selectedType !== '배경음악' && setSelectedLang(lang)}
|
||||
disabled={isGenerating || selectedType === '배경음악'}
|
||||
className={`genre-btn ${selectedLang === lang ? 'active' : ''}`}
|
||||
>
|
||||
<span>{LANGUAGE_FLAGS[lang]}</span> {lang}
|
||||
|
|
@ -495,8 +508,8 @@ const SoundStudioContent: React.FC<SoundStudioContentProps> = ({
|
|||
{['日本語', 'ไทย', 'Tiếng Việt'].map((lang) => (
|
||||
<button
|
||||
key={lang}
|
||||
onClick={() => !isGenerating && setSelectedLang(lang)}
|
||||
disabled={isGenerating}
|
||||
onClick={() => !isGenerating && selectedType !== '배경음악' && setSelectedLang(lang)}
|
||||
disabled={isGenerating || selectedType === '배경음악'}
|
||||
className={`genre-btn ${selectedLang === lang ? 'active' : ''}`}
|
||||
>
|
||||
<span>{LANGUAGE_FLAGS[lang]}</span> {lang}
|
||||
|
|
@ -598,16 +611,29 @@ const SoundStudioContent: React.FC<SoundStudioContentProps> = ({
|
|||
|
||||
{/* Lyrics Display */}
|
||||
<div className="lyrics-display">
|
||||
{lyrics ? (
|
||||
<textarea
|
||||
value={lyrics}
|
||||
readOnly
|
||||
className="lyrics-textarea"
|
||||
placeholder={t('soundStudio.lyricsPlaceholder')}
|
||||
/>
|
||||
) : (
|
||||
{lyrics ? (() => {
|
||||
const lines = lyrics.split('\n').filter(l => l.trim());
|
||||
const outro = lines.slice(-1);
|
||||
const body = lines.slice(0, -1);
|
||||
const half = Math.ceil(body.length / 2);
|
||||
const sections = [
|
||||
{ tag: '[Verse]', lines: body.slice(0, half) },
|
||||
{ tag: '[Chorus]', lines: body.slice(half) },
|
||||
{ tag: '[Outro]', lines: outro },
|
||||
].filter(s => s.lines.length > 0);
|
||||
return (
|
||||
<div className="lyrics-paragraphs">
|
||||
{sections.map((section, i) => (
|
||||
<div key={i} className="lyrics-section">
|
||||
<span className="lyrics-tag">{section.tag}</span>
|
||||
<p className="lyrics-paragraph">{section.lines.join('\n')}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
})() : (
|
||||
<div className="lyrics-placeholder">
|
||||
{t('soundStudio.lyricsPlaceholder')}
|
||||
{selectedType === '배경음악' ? t('soundStudio.lyricsPlaceholderBGM') : t('soundStudio.lyricsPlaceholder')}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,8 +4,9 @@ import { searchAccommodation, AccommodationSearchItem, AutocompleteRequest } fro
|
|||
import { CrawlingResponse } from '../../types/api';
|
||||
import { useSearchHistory } from '../../components/SearchHistory/useSearchHistory';
|
||||
import SearchHistoryDropdown from '../../components/SearchHistory/SearchHistoryDropdown';
|
||||
import BusinessNameInputModal from '../../components/BusinessNameInputModal';
|
||||
|
||||
type SearchType = 'url' | 'name';
|
||||
type SearchType = 'url' | 'name' | 'manual';
|
||||
|
||||
// 환경변수에서 테스트 모드 확인
|
||||
const isTestPage = import.meta.env.VITE_IS_TESTPAGE === 'true';
|
||||
|
|
@ -13,11 +14,12 @@ const isTestPage = import.meta.env.VITE_IS_TESTPAGE === 'true';
|
|||
interface UrlInputContentProps {
|
||||
onAnalyze: (value: string, type?: SearchType) => void;
|
||||
onAutocomplete?: (data: AutocompleteRequest) => void;
|
||||
onManualInput?: (businessName: string, address: string) => void;
|
||||
onTestData?: (data: CrawlingResponse) => void;
|
||||
error: string | null;
|
||||
}
|
||||
|
||||
const UrlInputContent: React.FC<UrlInputContentProps> = ({ onAnalyze, onAutocomplete, onTestData, error }) => {
|
||||
const UrlInputContent: React.FC<UrlInputContentProps> = ({ onAnalyze, onAutocomplete, onManualInput, onTestData, error }) => {
|
||||
const { t, i18n } = useTranslation();
|
||||
const [inputValue, setInputValue] = useState('');
|
||||
const [searchType, setSearchType] = useState<SearchType>('name');
|
||||
|
|
@ -27,7 +29,8 @@ const UrlInputContent: React.FC<UrlInputContentProps> = ({ onAnalyze, onAutocomp
|
|||
const [showAutocomplete, setShowAutocomplete] = useState(false);
|
||||
const [selectedItem, setSelectedItem] = useState<AccommodationSearchItem | null>(null);
|
||||
const [isLoadingTest, setIsLoadingTest] = useState(false);
|
||||
const { filteredHistory, showHistory, openHistory, closeHistory, hideOnInput, deleteItem } = useSearchHistory(searchType);
|
||||
const [isManualModalOpen, setIsManualModalOpen] = useState(false);
|
||||
const { filteredHistory, showHistory, openHistory, closeHistory, hideOnInput, deleteItem } = useSearchHistory(searchType === 'manual' ? 'name' : searchType);
|
||||
|
||||
const handleSelectHistory = (item: { type: 'url' | 'name'; value: string; address?: string; roadAddress?: string }) => {
|
||||
closeHistory();
|
||||
|
|
@ -67,6 +70,7 @@ const UrlInputContent: React.FC<UrlInputContentProps> = ({ onAnalyze, onAutocomp
|
|||
const searchTypeOptions = [
|
||||
{ value: 'url' as SearchType, label: 'URL' },
|
||||
{ value: 'name' as SearchType, label: t('urlInput.searchTypeBusinessName') },
|
||||
// { value: 'manual' as SearchType, label: t('urlInput.searchTypeManual') },
|
||||
];
|
||||
|
||||
const getPlaceholder = () => {
|
||||
|
|
@ -160,14 +164,16 @@ const UrlInputContent: React.FC<UrlInputContentProps> = ({ onAnalyze, onAutocomp
|
|||
const handleAnalyzeClick = () => {
|
||||
if (!inputValue.trim()) return;
|
||||
|
||||
if (searchType === 'name' && selectedItem && onAutocomplete) {
|
||||
// 업체명 검색인 경우 autocomplete API 호출
|
||||
const request: AutocompleteRequest = {
|
||||
address: selectedItem.address,
|
||||
roadAddress: selectedItem.roadAddress,
|
||||
title: selectedItem.title,
|
||||
};
|
||||
onAutocomplete(request);
|
||||
if (searchType === 'name') {
|
||||
if (selectedItem && onAutocomplete) {
|
||||
const request: AutocompleteRequest = {
|
||||
address: selectedItem.address,
|
||||
roadAddress: selectedItem.roadAddress,
|
||||
title: selectedItem.title,
|
||||
};
|
||||
onAutocomplete(request);
|
||||
}
|
||||
// selectedItem 없으면 아무것도 하지 않음 (드롭다운에서 선택 필요)
|
||||
} else {
|
||||
// URL 검색인 경우 기존 로직
|
||||
onAnalyze(inputValue.trim(), searchType);
|
||||
|
|
@ -213,8 +219,13 @@ const UrlInputContent: React.FC<UrlInputContentProps> = ({ onAnalyze, onAutocomp
|
|||
type="button"
|
||||
className={`url-input-dropdown-item ${searchType === option.value ? 'active' : ''}`}
|
||||
onClick={() => {
|
||||
setSearchType(option.value);
|
||||
setIsDropdownOpen(false);
|
||||
if (option.value === 'manual') {
|
||||
setIsManualModalOpen(true);
|
||||
setIsDropdownOpen(false);
|
||||
} else {
|
||||
setSearchType(option.value);
|
||||
setIsDropdownOpen(false);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{option.label}
|
||||
|
|
@ -327,6 +338,13 @@ const UrlInputContent: React.FC<UrlInputContentProps> = ({ onAnalyze, onAutocomp
|
|||
{isLoadingTest ? t('urlInput.testDataLoading') : t('urlInput.testData')}
|
||||
</button>
|
||||
)}
|
||||
|
||||
{isManualModalOpen && (
|
||||
<BusinessNameInputModal
|
||||
onClose={() => setIsManualModalOpen(false)}
|
||||
onSubmit={(businessName, address) => { setIsManualModalOpen(false); onManualInput?.(businessName, address); }}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -11,9 +11,9 @@ const DisplaySection: React.FC<DisplaySectionProps> = ({ onStartClick }) => {
|
|||
const { t } = useTranslation();
|
||||
// YouTube Shorts 영상 ID들
|
||||
const videos = [
|
||||
{ id: 1, videoId: 'trnN0SQBTiI' },
|
||||
{ id: 2, videoId: '96HO497HsQI' },
|
||||
{ id: 3, videoId: 'XziImxVICIk' },
|
||||
{ id: 1, videoId: 'M3iuPZ59X1I' },
|
||||
{ id: 2, videoId: 'JxWQxELDHSs' },
|
||||
{ id: 3, videoId: 'c2ZdwhaB7S4' },
|
||||
];
|
||||
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -8,8 +8,9 @@ import { TUTORIAL_KEYS } from '../../components/Tutorial/tutorialSteps';
|
|||
import TutorialOverlay from '../../components/Tutorial/TutorialOverlay';
|
||||
import { useSearchHistory } from '../../components/SearchHistory/useSearchHistory';
|
||||
import SearchHistoryDropdown from '../../components/SearchHistory/SearchHistoryDropdown';
|
||||
import BusinessNameInputModal from '../../components/BusinessNameInputModal';
|
||||
|
||||
type SearchType = 'url' | 'name';
|
||||
type SearchType = 'url' | 'name' | 'manual';
|
||||
|
||||
// 환경변수에서 테스트 모드 확인
|
||||
const isTestPage = import.meta.env.VITE_IS_TESTPAGE === 'true';
|
||||
|
|
@ -17,6 +18,7 @@ const isTestPage = import.meta.env.VITE_IS_TESTPAGE === 'true';
|
|||
interface HeroSectionProps {
|
||||
onAnalyze?: (value: string, type?: SearchType) => void;
|
||||
onAutocomplete?: (data: AutocompleteRequest) => void;
|
||||
onManualInput?: (businessName: string, address: string) => void;
|
||||
onTestData?: (data: CrawlingResponse) => void;
|
||||
onNext?: () => void;
|
||||
error?: string | null;
|
||||
|
|
@ -62,11 +64,12 @@ const orbConfigs: OrbConfig[] = [
|
|||
{ id: 'orb-6', size: 450, initialX: 65, initialY: 70, color: 'radial-gradient(circle, rgba(180, 255, 235, 0.95) 15%, rgba(200, 160, 255, 0.8) 50%, rgba(94, 235, 195, 0.45) 100%)', minX: 45, maxX: 110, minY: 55, maxY: 110 },
|
||||
];
|
||||
|
||||
const HeroSection: React.FC<HeroSectionProps> = ({ onAnalyze, onAutocomplete, onTestData, onNext, error: externalError, scrollProgress = 0 }) => {
|
||||
const HeroSection: React.FC<HeroSectionProps> = ({ onAnalyze, onAutocomplete, onManualInput, onTestData, onNext, error: externalError, scrollProgress = 0 }) => {
|
||||
const { t, i18n } = useTranslation();
|
||||
const [inputValue, setInputValue] = useState('');
|
||||
const [searchType, setSearchType] = useState<SearchType>('name');
|
||||
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
|
||||
const [isManualModalOpen, setIsManualModalOpen] = useState(false);
|
||||
const [localError, setLocalError] = useState('');
|
||||
const [isLoadingTest, setIsLoadingTest] = useState(false);
|
||||
|
||||
|
|
@ -86,7 +89,7 @@ const HeroSection: React.FC<HeroSectionProps> = ({ onAnalyze, onAutocomplete, on
|
|||
setIsLoadingTest(false);
|
||||
}
|
||||
};
|
||||
const { filteredHistory, showHistory, openHistory, closeHistory, hideOnInput, deleteItem } = useSearchHistory(searchType);
|
||||
const { filteredHistory, showHistory, openHistory, closeHistory, hideOnInput, deleteItem } = useSearchHistory(searchType === 'manual' ? 'name' : searchType);
|
||||
const [isFocused, setIsFocused] = useState(false);
|
||||
const [autocompleteResults, setAutocompleteResults] = useState<AccommodationSearchItem[]>([]);
|
||||
const [isAutocompleteLoading, setIsAutocompleteLoading] = useState(false);
|
||||
|
|
@ -113,6 +116,7 @@ const HeroSection: React.FC<HeroSectionProps> = ({ onAnalyze, onAutocomplete, on
|
|||
const searchTypeOptions = [
|
||||
{ value: 'url' as SearchType, label: 'URL' },
|
||||
{ value: 'name' as SearchType, label: t('landing.hero.searchTypeBusinessName') },
|
||||
// { value: 'manual' as SearchType, label: t('landing.hero.searchTypeManual') },
|
||||
];
|
||||
|
||||
// 드롭다운 외부 클릭 감지
|
||||
|
|
@ -377,8 +381,13 @@ const HeroSection: React.FC<HeroSectionProps> = ({ onAnalyze, onAutocomplete, on
|
|||
type="button"
|
||||
className={`hero-dropdown-item ${searchType === option.value ? 'active' : ''}`}
|
||||
onClick={() => {
|
||||
setSearchType(option.value);
|
||||
setIsDropdownOpen(false);
|
||||
if (option.value === 'manual') {
|
||||
setIsManualModalOpen(true);
|
||||
setIsDropdownOpen(false);
|
||||
} else {
|
||||
setSearchType(option.value);
|
||||
setIsDropdownOpen(false);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{option.label}
|
||||
|
|
@ -555,6 +564,13 @@ const HeroSection: React.FC<HeroSectionProps> = ({ onAnalyze, onAutocomplete, on
|
|||
groupProgress={tutorial.groupProgress}
|
||||
/>
|
||||
)}
|
||||
|
||||
{isManualModalOpen && (
|
||||
<BusinessNameInputModal
|
||||
onClose={() => setIsManualModalOpen(false)}
|
||||
onSubmit={(businessName, address) => { setIsManualModalOpen(false); onManualInput?.(businessName, address); }}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -68,6 +68,7 @@ export interface LyricGenerateRequest {
|
|||
region: string;
|
||||
task_id: string;
|
||||
orientation?: 'vertical' | 'horizontal';
|
||||
instrumental?: boolean;
|
||||
}
|
||||
|
||||
// 가사 생성 응답
|
||||
|
|
@ -103,8 +104,9 @@ export interface LyricDetailResponse {
|
|||
// 노래 생성 요청
|
||||
export interface SongGenerateRequest {
|
||||
genre: string;
|
||||
language: string;
|
||||
lyrics: string;
|
||||
language?: string;
|
||||
lyrics?: string;
|
||||
instrumental?: boolean;
|
||||
}
|
||||
|
||||
// 노래 생성 응답
|
||||
|
|
@ -141,6 +143,13 @@ export interface SongDownloadResponse {
|
|||
}
|
||||
|
||||
// 영상 생성 응답
|
||||
// 자막 상태 확인 응답
|
||||
export interface SubtitleStatusResponse {
|
||||
task_id: string;
|
||||
status: string; // 'pending' | 'processing' | 'completed' | 'failed' | 'error'
|
||||
message: string;
|
||||
}
|
||||
|
||||
export interface VideoGenerateResponse {
|
||||
success: boolean;
|
||||
task_id: string;
|
||||
|
|
@ -258,14 +267,29 @@ export interface UserCreditsResponse {
|
|||
credits: number;
|
||||
}
|
||||
|
||||
// 비디오 목록 아이템
|
||||
// 비디오 목록 아이템 (갤러리용)
|
||||
export interface VideoListItem {
|
||||
video_id: number;
|
||||
store_name: string;
|
||||
region: string;
|
||||
task_id: string;
|
||||
result_movie_url: string;
|
||||
thumbnail_url?: string;
|
||||
created_at: string;
|
||||
like_count: number;
|
||||
comment_count: number;
|
||||
is_liked_by_me?: boolean;
|
||||
}
|
||||
|
||||
// 비디오 상세 아이템
|
||||
export interface VideoDetailItem {
|
||||
video_id: number;
|
||||
result_movie_url: string;
|
||||
store_name: string;
|
||||
region: string;
|
||||
created_at: string;
|
||||
like_count: number;
|
||||
is_liked_by_me: boolean;
|
||||
}
|
||||
|
||||
// 비디오 목록 응답
|
||||
|
|
@ -279,6 +303,45 @@ export interface VideosListResponse {
|
|||
has_prev: boolean;
|
||||
}
|
||||
|
||||
// 댓글 대댓글
|
||||
export interface CommentReply {
|
||||
id: number;
|
||||
nickname: string;
|
||||
content: string | null;
|
||||
is_deleted: boolean;
|
||||
is_mine: boolean;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
// 댓글 아이템
|
||||
export interface CommentItem {
|
||||
id: number;
|
||||
nickname: string;
|
||||
content: string | null;
|
||||
is_deleted: boolean;
|
||||
is_mine: boolean;
|
||||
created_at: string;
|
||||
replies: CommentReply[];
|
||||
}
|
||||
|
||||
// 댓글 목록 응답
|
||||
export interface CommentsResponse {
|
||||
items: CommentItem[];
|
||||
total: number;
|
||||
page: number;
|
||||
page_size: number;
|
||||
total_pages: number;
|
||||
has_next: boolean;
|
||||
has_prev: boolean;
|
||||
}
|
||||
|
||||
// 좋아요 토글 응답
|
||||
export interface LikeToggleResponse {
|
||||
video_id: number;
|
||||
is_liked: boolean;
|
||||
like_count: number;
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// Social OAuth Types
|
||||
// ============================================
|
||||
|
|
|
|||
192
src/utils/api.ts
192
src/utils/api.ts
|
|
@ -8,6 +8,7 @@ import {
|
|||
SongGenerateResponse,
|
||||
SongStatusResponse,
|
||||
SongDownloadResponse,
|
||||
SubtitleStatusResponse,
|
||||
VideoGenerateResponse,
|
||||
VideoStatusResponse,
|
||||
VideoDownloadResponse,
|
||||
|
|
@ -29,6 +30,10 @@ import {
|
|||
YTAutoSeoRequest,
|
||||
YTAutoSeoResponse,
|
||||
UserCreditsResponse,
|
||||
VideoDetailItem,
|
||||
CommentsResponse,
|
||||
CommentItem,
|
||||
LikeToggleResponse,
|
||||
} from '../types/api';
|
||||
|
||||
export const API_URL = import.meta.env.VITE_API_URL || 'http://40.82.133.44';
|
||||
|
|
@ -162,6 +167,8 @@ export async function generateSong(taskId: string, request: SongGenerateRequest)
|
|||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const errorBody = await response.json().catch(() => null);
|
||||
console.error('[generateSong] 422 detail:', JSON.stringify(errorBody));
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
|
|
@ -243,6 +250,52 @@ export async function waitForSongComplete(
|
|||
return poll();
|
||||
}
|
||||
|
||||
// 자막 상태 확인 API
|
||||
export async function getSubtitleStatus(taskId: string): Promise<SubtitleStatusResponse> {
|
||||
const response = await authenticatedFetch(`${API_URL}/lyric/subtitle/status/${taskId}`, {
|
||||
method: 'GET',
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
return response.json();
|
||||
}
|
||||
|
||||
// 자막 완료까지 폴링 (5초 간격, 10분 타임아웃)
|
||||
const SUBTITLE_POLL_INTERVAL = 5000;
|
||||
const SUBTITLE_POLL_TIMEOUT = 5 * 60 * 1000;
|
||||
|
||||
export async function waitForSubtitleComplete(
|
||||
taskId: string,
|
||||
onStatusChange?: (status: string) => void
|
||||
): Promise<SubtitleStatusResponse> {
|
||||
const startTime = Date.now();
|
||||
|
||||
const poll = async (): Promise<SubtitleStatusResponse> => {
|
||||
if (Date.now() - startTime > SUBTITLE_POLL_TIMEOUT) {
|
||||
throw new Error('TIMEOUT');
|
||||
}
|
||||
|
||||
const response = await getSubtitleStatus(taskId);
|
||||
onStatusChange?.(response.status);
|
||||
|
||||
if (response.status === 'completed') {
|
||||
return response;
|
||||
}
|
||||
|
||||
if (response.status === 'failed' || response.status === 'error') {
|
||||
throw new Error(response.message || '자막 생성에 실패했습니다.');
|
||||
}
|
||||
|
||||
await new Promise(resolve => setTimeout(resolve, SUBTITLE_POLL_INTERVAL));
|
||||
return poll();
|
||||
};
|
||||
|
||||
return poll();
|
||||
}
|
||||
|
||||
// 영상 생성 API
|
||||
export async function generateVideo(taskId: string, orientation: 'vertical' | 'horizontal' = 'vertical'): Promise<VideoGenerateResponse> {
|
||||
const response = await authenticatedFetch(`${API_URL}/video/generate/${taskId}?orientation=${orientation}`, {
|
||||
|
|
@ -324,6 +377,99 @@ export async function deleteVideo(videoId: number): Promise<void> {
|
|||
}
|
||||
}
|
||||
|
||||
// 전체 사용자 영상 목록 조회 API (ADO2 콘텐츠 갤러리용)
|
||||
export async function getAllVideos(
|
||||
page: number = 1,
|
||||
pageSize: number = 20,
|
||||
sortBy: 'created_at' | 'like_count' | 'comment_count' = 'created_at',
|
||||
storeName: string = '',
|
||||
order: 'desc' | 'asc' = 'desc',
|
||||
region: string = '',
|
||||
): Promise<VideosListResponse> {
|
||||
const params = new URLSearchParams({
|
||||
page: String(page),
|
||||
page_size: String(pageSize),
|
||||
sort_by: sortBy,
|
||||
order,
|
||||
});
|
||||
if (storeName.trim()) params.set('store_name', storeName.trim());
|
||||
if (region.trim()) params.set('region', region.trim());
|
||||
const response = await authenticatedFetch(`${API_URL}/video/all?${params.toString()}`, {
|
||||
method: 'GET',
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
return response.json();
|
||||
}
|
||||
|
||||
// 단일 영상 상세 조회 API
|
||||
export async function getVideoById(videoId: string): Promise<VideoDetailItem> {
|
||||
const response = await authenticatedFetch(`${API_URL}/video/${videoId}`, {
|
||||
method: 'GET',
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
return response.json();
|
||||
}
|
||||
|
||||
// 댓글 목록 조회
|
||||
export async function getVideoComments(videoId: string, page: number = 1, pageSize: number = 20): Promise<CommentsResponse> {
|
||||
const response = await authenticatedFetch(`${API_URL}/comment/video/${videoId}?page=${page}&page_size=${pageSize}`, {
|
||||
method: 'GET',
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
return response.json();
|
||||
}
|
||||
|
||||
// 댓글 작성
|
||||
export async function postVideoComment(videoId: string, content: string, nickname?: string, parentId?: number): Promise<CommentItem> {
|
||||
const response = await authenticatedFetch(`${API_URL}/comment/video/${videoId}`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ content, nickname: nickname || '익명', parent_id: parentId ?? null }),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
return response.json();
|
||||
}
|
||||
|
||||
// 댓글 삭제
|
||||
export async function deleteComment(commentId: number): Promise<void> {
|
||||
const response = await authenticatedFetch(`${API_URL}/comment/${commentId}`, {
|
||||
method: 'DELETE',
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
}
|
||||
|
||||
// 좋아요 토글
|
||||
export async function toggleVideoLike(videoId: string): Promise<LikeToggleResponse> {
|
||||
const response = await authenticatedFetch(`${API_URL}/video/${videoId}/like`, {
|
||||
method: 'POST',
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
return response.json();
|
||||
}
|
||||
|
||||
// 이미지 업로드 API (multipart/form-data)
|
||||
// 타임아웃: 5분 (많은 이미지 업로드 시 시간이 오래 걸릴 수 있음)
|
||||
const IMAGE_UPLOAD_TIMEOUT = 5 * 60 * 1000;
|
||||
|
|
@ -477,14 +623,20 @@ export async function authenticatedFetch(
|
|||
|
||||
let response = await fetch(url, { ...options, headers });
|
||||
|
||||
// 401 에러 시 토큰 갱신 시도
|
||||
// 401 에러 시 에러 코드에 따라 처리
|
||||
if (response.status === 401) {
|
||||
const errorBody = await response.json().catch(() => null);
|
||||
const errorCode = errorBody?.detail?.code;
|
||||
|
||||
if (errorCode !== 'TOKEN_EXPIRED') {
|
||||
// INVALID_TOKEN 등 갱신으로 해결 불가한 경우 즉시 로그인 이동
|
||||
redirectToLogin();
|
||||
throw new Error(errorCode ?? 'Unauthorized');
|
||||
}
|
||||
|
||||
try {
|
||||
// 이미 갱신 중이면 기존 Promise 재사용 (중복 요청 방지)
|
||||
// refreshPromise가 존재하면 재사용, 없으면 새로 생성
|
||||
if (!refreshPromise) {
|
||||
refreshPromise = refreshAccessToken().finally(() => {
|
||||
// 성공/실패 상관없이 Promise 초기화 (다음 갱신을 위해)
|
||||
refreshPromise = null;
|
||||
});
|
||||
}
|
||||
|
|
@ -501,7 +653,6 @@ export async function authenticatedFetch(
|
|||
response = await fetch(url, { ...options, headers: newHeaders });
|
||||
} catch (refreshError) {
|
||||
console.error('Token refresh failed:', refreshError);
|
||||
// 토큰 갱신 실패 시 로그인 페이지로 리다이렉트
|
||||
redirectToLogin();
|
||||
throw refreshError;
|
||||
}
|
||||
|
|
@ -749,6 +900,37 @@ export async function autocomplete(request: AutocompleteRequest): Promise<Crawli
|
|||
}
|
||||
}
|
||||
|
||||
// 업체명·주소 직접 입력으로 마케팅 분석
|
||||
export async function marketingAnalysis(storeName: string, address: string): Promise<CrawlingResponse> {
|
||||
const controller = new AbortController();
|
||||
const timeoutId = setTimeout(() => controller.abort(), CRAWL_TIMEOUT);
|
||||
|
||||
try {
|
||||
const response = await authenticatedFetch(`${API_URL}/marketing`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ store_name: storeName, address }),
|
||||
signal: controller.signal,
|
||||
});
|
||||
|
||||
clearTimeout(timeoutId);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
return response.json();
|
||||
} catch (error) {
|
||||
clearTimeout(timeoutId);
|
||||
if (error instanceof Error && error.name === 'AbortError') {
|
||||
throw new Error('요청 시간이 초과되었습니다. 다시 시도해주세요.');
|
||||
}
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// Social OAuth TOKEN_EXPIRED 처리
|
||||
// ============================================
|
||||
|
|
|
|||
Loading…
Reference in New Issue