refactor: 생성 완료 화면을 CompletionView 로 통일
This commit is contained in:
parent
3701490728
commit
b9fd77fb51
201
src/components/CompletionView.tsx
Normal file
201
src/components/CompletionView.tsx
Normal file
@ -0,0 +1,201 @@
|
||||
import React from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
/**
|
||||
* 생성 완료 화면의 공용 레이아웃 (ADO2 영상 · 썰박스 공통).
|
||||
*
|
||||
* **순수 표현 컴포넌트다** — 생성·폴링·다운로드 로직은 전혀 갖지 않는다.
|
||||
* `CompletionContent`(ADO2)는 영상 생성과 자막 폴링까지 직접 수행하는 컨테이너라
|
||||
* 그대로 재사용할 수 없었고, 그래서 화면만 여기로 분리했다.
|
||||
*
|
||||
* 양쪽의 차이는 정보 패널뿐이다:
|
||||
* - ADO2 : 장르 · 해상도 → 가사 전문
|
||||
* - 썰박스 : 시나리오 · 생성일시 → 시나리오 설명
|
||||
* 그 차이를 `metaLines`/`detail` 슬롯으로 받는다.
|
||||
*
|
||||
* 마크업과 클래스명(`comp2-*`)은 기존 ADO2 완료 화면 그대로다. 클래스를 새로
|
||||
* 만들지 않아야 [generation-flow.css](../styles/generation-flow.css) 의 반응형·
|
||||
* 다크 팔레트가 두 화면에 동일하게 적용된다.
|
||||
*/
|
||||
|
||||
/** 영상 영역이 무엇을 그릴지 */
|
||||
export type CompletionVideoState =
|
||||
/** 생성/렌더 진행 중 — 스피너 + 진행률 */
|
||||
| 'loading'
|
||||
/** 실패 — 메시지 + (있으면) 재시도 버튼 */
|
||||
| 'error'
|
||||
/** 재생 가능 */
|
||||
| 'ready'
|
||||
/** URL 을 아직 못 받았지만 진행 중도 실패도 아님 — 빈 자리만 유지 */
|
||||
| 'empty';
|
||||
|
||||
interface CompletionViewProps {
|
||||
videoState: CompletionVideoState;
|
||||
videoUrl?: string | null;
|
||||
|
||||
/** `videoState === 'loading'` 일 때만 쓰인다 */
|
||||
loadingText?: string;
|
||||
/** 0~100. 표시용 값이며 크리핑 보간은 호출부 책임이다 */
|
||||
progress?: number;
|
||||
|
||||
/** `videoState === 'error'` 일 때만 쓰인다 */
|
||||
errorMessage?: string | null;
|
||||
/** 없으면 재시도 버튼을 그리지 않는다 (썰박스는 이 화면에서 재시도가 없다) */
|
||||
onRetry?: () => void;
|
||||
|
||||
/** 정보 패널 상단 파일명 */
|
||||
fileName: string;
|
||||
/** 메타 줄. 줄 사이에 구분선이 들어간다 */
|
||||
metaLines: React.ReactNode[];
|
||||
/** 메타 아래 상세 영역의 제목 */
|
||||
detailLabel: string;
|
||||
/** 상세 본문 (ADO2=가사 단락, 썰박스=시나리오 설명) */
|
||||
detail: React.ReactNode;
|
||||
|
||||
onDownload: () => void;
|
||||
downloadDisabled?: boolean;
|
||||
/** 진행 중에는 '다운로드 중...' 처럼 바뀌므로 호출부가 문구를 정한다 */
|
||||
downloadLabel: string;
|
||||
|
||||
onUpload: () => void;
|
||||
uploadDisabled?: boolean;
|
||||
|
||||
/**
|
||||
* 이 화면에 딸린 오버레이(SNS 업로드 모달 등).
|
||||
*
|
||||
* `.comp2-page` 안에 그려지므로 오버레이 쪽에서 타이포그래피 상속을
|
||||
* 끊어야 한다 — `.social-posting-overlay` 의 `text-align` 참조.
|
||||
*/
|
||||
children?: React.ReactNode;
|
||||
}
|
||||
|
||||
const CompletionView: React.FC<CompletionViewProps> = ({
|
||||
videoState,
|
||||
videoUrl,
|
||||
loadingText,
|
||||
progress = 0,
|
||||
errorMessage,
|
||||
onRetry,
|
||||
fileName,
|
||||
metaLines,
|
||||
detailLabel,
|
||||
detail,
|
||||
onDownload,
|
||||
downloadDisabled,
|
||||
downloadLabel,
|
||||
onUpload,
|
||||
uploadDisabled,
|
||||
children,
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<main className="comp2-page">
|
||||
<div className="comp2-title-row">
|
||||
<h1 className="comp2-page-title">{t('completion.contentComplete')}</h1>
|
||||
<p className="comp2-page-subtitle">{t('completion.contentCompleteDesc')}</p>
|
||||
</div>
|
||||
|
||||
<div className="comp2-container">
|
||||
<div className="comp2-grid">
|
||||
{/* 왼쪽: 영상 */}
|
||||
<div className="comp2-video-section">
|
||||
<div className="comp2-video-wrapper">
|
||||
{videoState === 'loading' ? (
|
||||
<div className="comp2-video-loading">
|
||||
<div className="loading-spinner">
|
||||
<div className="loading-ring"></div>
|
||||
<div className="loading-dot">
|
||||
<div className="loading-dot-inner"></div>
|
||||
</div>
|
||||
</div>
|
||||
<p className="comp2-loading-text">{loadingText}</p>
|
||||
<div className="loading-progress-wrapper">
|
||||
<div className="loading-progress-bar">
|
||||
<div
|
||||
className="loading-progress-fill"
|
||||
style={{ width: `${progress}%` }}
|
||||
/>
|
||||
</div>
|
||||
<span className="loading-progress-text">{Math.floor(progress)}%</span>
|
||||
</div>
|
||||
</div>
|
||||
) : videoState === 'error' ? (
|
||||
<div className="comp2-video-error">
|
||||
<svg
|
||||
className="comp2-error-icon"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
>
|
||||
<circle cx="12" cy="12" r="10" />
|
||||
<path d="M12 8v4M12 16h.01" />
|
||||
</svg>
|
||||
<p className="comp2-error-text">{errorMessage}</p>
|
||||
{onRetry && (
|
||||
<button onClick={onRetry} className="comp2-retry-btn">
|
||||
{t('completion.retry')}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
) : videoState === 'ready' && videoUrl ? (
|
||||
<video src={videoUrl} className="comp2-video-player" controls playsInline />
|
||||
) : (
|
||||
<div className="comp2-video-placeholder"></div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 오른쪽: 콘텐츠 정보 */}
|
||||
<div className="comp2-info-section">
|
||||
<div className="comp2-info-header">
|
||||
<span className="comp2-info-label">{t('completion.contentInfo')}</span>
|
||||
</div>
|
||||
<div className="comp2-file-info">
|
||||
<h3 className="comp2-filename">{fileName}</h3>
|
||||
</div>
|
||||
<div className="comp2-info-content">
|
||||
<div className="comp2-meta-grid">
|
||||
{metaLines.map((line, i) => (
|
||||
<React.Fragment key={i}>
|
||||
<div className="comp2-meta-item">
|
||||
<span className="comp2-meta-label">{line}</span>
|
||||
</div>
|
||||
<div className="comp2-meta-divider"></div>
|
||||
</React.Fragment>
|
||||
))}
|
||||
<div className="comp2-lyrics-section">
|
||||
<span className="comp2-meta-label">{detailLabel}</span>
|
||||
{detail}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 하단 버튼 */}
|
||||
<div className="comp2-buttons">
|
||||
<button
|
||||
onClick={onDownload}
|
||||
disabled={downloadDisabled}
|
||||
className="comp2-btn comp2-btn-secondary"
|
||||
>
|
||||
{downloadLabel}
|
||||
</button>
|
||||
<button
|
||||
onClick={onUpload}
|
||||
disabled={uploadDisabled}
|
||||
className="comp2-btn comp2-btn-primary"
|
||||
>
|
||||
{t('completion.uploadToSocial')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{children}
|
||||
</main>
|
||||
);
|
||||
};
|
||||
|
||||
export default CompletionView;
|
||||
@ -3,9 +3,7 @@ import React, { useState, useEffect, useRef } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { generateVideo, waitForVideoComplete, getSubtitleStatus, waitForSubtitleComplete, trackFirstVideoCreated } from '../../utils/api';
|
||||
import SocialPostingModal from '../../components/SocialPostingModal';
|
||||
import { useTutorial } from '../../components/Tutorial/useTutorial';
|
||||
import { TUTORIAL_KEYS } from '../../components/Tutorial/tutorialSteps';
|
||||
import TutorialOverlay from '../../components/Tutorial/TutorialOverlay';
|
||||
import CompletionView from '../../components/CompletionView';
|
||||
|
||||
interface CompletionContentProps {
|
||||
onBack: () => void;
|
||||
@ -46,22 +44,6 @@ const CompletionContent: React.FC<CompletionContentProps> = ({
|
||||
const hasStartedGeneration = useRef(false);
|
||||
const displayIntervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
|
||||
|
||||
const tutorial = useTutorial();
|
||||
const tutorialIsActiveRef = useRef(tutorial.isActive);
|
||||
tutorialIsActiveRef.current = tutorial.isActive;
|
||||
|
||||
// 영상 생성 중 튜토리얼 트리거 (생성 상태 안내 -> 콘텐츠 정보 -> 내 정보 이동)
|
||||
useEffect(() => {
|
||||
const isComplete = videoStatus === 'complete';
|
||||
const isProcessing = videoStatus === 'generating' || videoStatus === 'polling';
|
||||
|
||||
if (isProcessing && !tutorialIsActiveRef.current && !tutorial.hasSeen(TUTORIAL_KEYS.GENERATING)) {
|
||||
tutorial.startTutorial(TUTORIAL_KEYS.GENERATING);
|
||||
} else if (isComplete && !tutorialIsActiveRef.current && !tutorial.hasSeen(TUTORIAL_KEYS.COMPLETION)) {
|
||||
tutorial.startTutorial(TUTORIAL_KEYS.COMPLETION);
|
||||
}
|
||||
}, [videoStatus]);
|
||||
|
||||
// 소셜 미디어 포스팅 모달
|
||||
const [showSocialModal, setShowSocialModal] = useState(false);
|
||||
const [videoDbId, setVideoDbId] = useState<number | null>(null);
|
||||
@ -410,175 +392,97 @@ const CompletionContent: React.FC<CompletionContentProps> = ({
|
||||
return `${businessName}.mp4`;
|
||||
};
|
||||
|
||||
/**
|
||||
* 가사 단락 파싱.
|
||||
*
|
||||
* `[Verse]` 처럼 대괄호만 있는 줄을 섹션 머리로 보고, 뒤따르는 줄들을 그 섹션에
|
||||
* 묶는다. 태그 없이 시작하는 가사도 있어 첫 섹션은 태그 없이 열릴 수 있다.
|
||||
*/
|
||||
const renderLyrics = () => {
|
||||
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 sections: { tag: string | null; lines: string[] }[] = [];
|
||||
lines.forEach((line: string) => {
|
||||
const tagMatch = line.trim().match(/^\[(.+)\]$/);
|
||||
if (tagMatch) {
|
||||
sections.push({ tag: `[${tagMatch[1]}]`, lines: [] });
|
||||
} else if (sections.length === 0) {
|
||||
sections.push({ tag: null, lines: [line] });
|
||||
} else {
|
||||
sections[sections.length - 1].lines.push(line);
|
||||
}
|
||||
});
|
||||
return (
|
||||
<div className="comp2-lyrics-paragraphs">
|
||||
{sections
|
||||
.filter((s) => s.lines.length > 0)
|
||||
.map((section, i) => (
|
||||
<div key={i} className="comp2-lyrics-para-section">
|
||||
{section.tag && <span className="comp2-lyrics-tag">{section.tag}</span>}
|
||||
<p className="comp2-lyrics-text">{section.lines.join('\n')}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<main className="comp2-page">
|
||||
{/* <div className="comp2-header">
|
||||
<button onClick={onBack} className="comp2-back-btn">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<path d="M15 18l-6-6 6-6" />
|
||||
</svg>
|
||||
<span>{t('completion.back')}</span>
|
||||
</button>
|
||||
</div> */}
|
||||
|
||||
<div className="comp2-title-row">
|
||||
<h1 className="comp2-page-title">{t('completion.contentComplete')}</h1>
|
||||
<p className="comp2-page-subtitle">{t('completion.contentCompleteDesc')}</p>
|
||||
</div>
|
||||
|
||||
<div className="comp2-container">
|
||||
<div className="comp2-grid">
|
||||
{/* 왼쪽: 영상 */}
|
||||
<div className="comp2-video-section">
|
||||
<div className="comp2-video-wrapper">
|
||||
{isLoading ? (
|
||||
<div className="comp2-video-loading">
|
||||
<div className="loading-spinner">
|
||||
<div className="loading-ring"></div>
|
||||
<div className="loading-dot">
|
||||
<div className="loading-dot-inner"></div>
|
||||
</div>
|
||||
</div>
|
||||
<p className="comp2-loading-text">{statusMessage}</p>
|
||||
<div className="loading-progress-wrapper">
|
||||
<div className="loading-progress-bar">
|
||||
<div
|
||||
className="loading-progress-fill"
|
||||
style={{ width: `${displayProgress}%` }}
|
||||
/>
|
||||
</div>
|
||||
<span className="loading-progress-text">{Math.floor(displayProgress)}%</span>
|
||||
</div>
|
||||
</div>
|
||||
) : videoStatus === 'error' ? (
|
||||
<div className="comp2-video-error">
|
||||
<svg className="comp2-error-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<circle cx="12" cy="12" r="10" />
|
||||
<path d="M12 8v4M12 16h.01" />
|
||||
</svg>
|
||||
<p className="comp2-error-text">{errorMessage}</p>
|
||||
<button onClick={handleRetry} className="comp2-retry-btn">
|
||||
{t('completion.retry')}
|
||||
</button>
|
||||
</div>
|
||||
) : videoUrl ? (
|
||||
<video
|
||||
src={videoUrl}
|
||||
className="comp2-video-player"
|
||||
controls
|
||||
playsInline
|
||||
/>
|
||||
) : (
|
||||
<div className="comp2-video-placeholder"></div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 오른쪽: 콘텐츠 정보 */}
|
||||
<div className="comp2-info-section">
|
||||
<div className="comp2-info-header">
|
||||
<span className="comp2-info-label">{t('completion.contentInfo')}</span>
|
||||
</div>
|
||||
<div className="comp2-file-info">
|
||||
<h3 className="comp2-filename">{getFileName()}</h3>
|
||||
{/* <p className="comp2-filesize">19.6MB</p> */}
|
||||
</div>
|
||||
<div className="comp2-info-content">
|
||||
<div className="comp2-meta-grid">
|
||||
<div className="comp2-meta-item">
|
||||
<span className="comp2-meta-label">{t('completion.genre')} : {songCompletionData?.genre || 'K-POP'}</span>
|
||||
</div>
|
||||
<div className="comp2-meta-divider"></div>
|
||||
<div className="comp2-meta-item">
|
||||
<span className="comp2-meta-label">{t('completion.resolution')} : {getVideoResolution()}</span>
|
||||
</div>
|
||||
<div className="comp2-meta-divider"></div>
|
||||
<div className="comp2-lyrics-section">
|
||||
<span className="comp2-meta-label">{t('completion.lyrics')}</span>
|
||||
{(() => {
|
||||
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 sections: { tag: string | null; lines: string[] }[] = [];
|
||||
lines.forEach((line: string) => {
|
||||
const tagMatch = line.trim().match(/^\[(.+)\]$/);
|
||||
if (tagMatch) {
|
||||
sections.push({ tag: `[${tagMatch[1]}]`, lines: [] });
|
||||
} else if (sections.length === 0) {
|
||||
sections.push({ tag: null, lines: [line] });
|
||||
} else {
|
||||
sections[sections.length - 1].lines.push(line);
|
||||
}
|
||||
});
|
||||
return (
|
||||
<div className="comp2-lyrics-paragraphs">
|
||||
{sections.filter(s => s.lines.length > 0).map((section, i) => (
|
||||
<div key={i} className="comp2-lyrics-para-section">
|
||||
{section.tag && <span className="comp2-lyrics-tag">{section.tag}</span>}
|
||||
<p className="comp2-lyrics-text">{section.lines.join('\n')}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
})()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* 하단 버튼 */}
|
||||
<div className="comp2-buttons">
|
||||
<button
|
||||
onClick={handleDownload}
|
||||
disabled={videoStatus !== 'complete' || !videoUrl || isDownloading}
|
||||
className="comp2-btn comp2-btn-secondary"
|
||||
>
|
||||
{isDownloading ? t('completion.downloading') : t('completion.download')}
|
||||
</button>
|
||||
<button
|
||||
onClick={handleOpenSocialConnect}
|
||||
disabled={videoStatus !== 'complete' || !videoDbId}
|
||||
className="comp2-btn comp2-btn-primary"
|
||||
>
|
||||
{t('completion.uploadToSocial')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 소셜 미디어 포스팅 모달 (기존 SocialPostingModal 컴포넌트 사용) */}
|
||||
<SocialPostingModal
|
||||
isOpen={showSocialModal}
|
||||
onClose={handleCloseSocialConnect}
|
||||
onGoToCalendar={onGoToCalendar}
|
||||
video={videoUrl && videoDbId ? {
|
||||
// ADO2 파이프라인 완료 화면이므로 항상 영상이다
|
||||
type: 'video',
|
||||
video_id: videoDbId,
|
||||
store_name: songCompletionData?.businessName || '',
|
||||
region: '',
|
||||
task_id: songTaskId || '',
|
||||
result_movie_url: videoUrl,
|
||||
created_at: new Date().toISOString(),
|
||||
like_count: 0,
|
||||
comment_count: 0,
|
||||
} : null}
|
||||
/>
|
||||
|
||||
{tutorial.isActive && (
|
||||
<TutorialOverlay
|
||||
hints={tutorial.hints}
|
||||
currentIndex={tutorial.currentHintIndex}
|
||||
onNext={tutorial.nextHint}
|
||||
onPrev={tutorial.prevHint}
|
||||
onSkip={tutorial.skipTutorial}
|
||||
groupProgress={tutorial.groupProgress}
|
||||
/>
|
||||
)}
|
||||
</main>
|
||||
<CompletionView
|
||||
videoState={
|
||||
isLoading
|
||||
? 'loading'
|
||||
: videoStatus === 'error'
|
||||
? 'error'
|
||||
: videoUrl
|
||||
? 'ready'
|
||||
: 'empty'
|
||||
}
|
||||
videoUrl={videoUrl}
|
||||
loadingText={statusMessage}
|
||||
progress={displayProgress}
|
||||
errorMessage={errorMessage}
|
||||
onRetry={handleRetry}
|
||||
fileName={getFileName()}
|
||||
metaLines={[
|
||||
`${t('completion.genre')} : ${songCompletionData?.genre || 'K-POP'}`,
|
||||
`${t('completion.resolution')} : ${getVideoResolution()}`,
|
||||
]}
|
||||
detailLabel={t('completion.lyrics')}
|
||||
detail={renderLyrics()}
|
||||
onDownload={handleDownload}
|
||||
downloadDisabled={videoStatus !== 'complete' || !videoUrl || isDownloading}
|
||||
downloadLabel={isDownloading ? t('completion.downloading') : t('completion.download')}
|
||||
onUpload={handleOpenSocialConnect}
|
||||
uploadDisabled={videoStatus !== 'complete' || !videoDbId}
|
||||
>
|
||||
{/* 소셜 미디어 포스팅 모달 (기존 SocialPostingModal 컴포넌트 사용) */}
|
||||
<SocialPostingModal
|
||||
isOpen={showSocialModal}
|
||||
onClose={handleCloseSocialConnect}
|
||||
onGoToCalendar={onGoToCalendar}
|
||||
video={
|
||||
videoUrl && videoDbId
|
||||
? {
|
||||
// ADO2 파이프라인 완료 화면이므로 항상 영상이다
|
||||
type: 'video',
|
||||
video_id: videoDbId,
|
||||
store_name: songCompletionData?.businessName || '',
|
||||
region: '',
|
||||
task_id: songTaskId || '',
|
||||
result_movie_url: videoUrl,
|
||||
created_at: new Date().toISOString(),
|
||||
like_count: 0,
|
||||
comment_count: 0,
|
||||
}
|
||||
: null
|
||||
}
|
||||
/>
|
||||
</CompletionView>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -1,8 +1,10 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { SsulTaskStatus, getSsulTask } from '../../utils/api';
|
||||
import { SCEN, Scen, scenName } from './ssulData';
|
||||
import { IcDownload } from './ssulIcons';
|
||||
import { VideoListItem } from '../../types/api';
|
||||
import SocialPostingModal from '../../components/SocialPostingModal';
|
||||
import CompletionView from '../../components/CompletionView';
|
||||
import { Scen, scenDesc, scenName } from './ssulData';
|
||||
|
||||
interface SsulResultContentProps {
|
||||
taskId: number;
|
||||
@ -12,9 +14,18 @@ interface SsulResultContentProps {
|
||||
/**
|
||||
* 썰박스 생성 완료 화면.
|
||||
*
|
||||
* 완성된 영상을 재생하고 다운로드할 수 있다.
|
||||
* SNS 업로드는 castad `SocialPostingModal` 재사용을 먼저 시도해야 하므로
|
||||
* 통합 목록 작업(Phase 8)과 함께 붙인다.
|
||||
* **화면은 ADO2 완료 화면과 같은 `CompletionView` 를 쓴다**(2026-08-10 통일).
|
||||
* 이전에는 `.ssul-scope` 안의 중앙 1단 레이아웃이었는데, 같은 제품 안에서
|
||||
* 완료 화면이 둘로 갈리는 것이 혼란스러웠고 영상 로딩·에러 처리도 없었다.
|
||||
* 정보 패널만 썰박스 재료(시나리오·생성일시·시나리오 설명)로 채운다.
|
||||
*
|
||||
* `.ssul-scope` 를 벗어나면서 부수 효과가 하나 있다: 예전에는 상위의
|
||||
* `text-align: center` 가 SNS 업로드 모달 라벨까지 가운데로 끌어당겼는데
|
||||
* 그 경로가 사라졌다. 다만 오버레이 쪽 방어(`.social-posting-overlay` 의
|
||||
* `text-align`)는 다른 마운트 지점을 위해 그대로 둔다.
|
||||
*
|
||||
* 업로드는 castad `SocialPostingModal` 을 그대로 쓴다 — social_upload 병합으로
|
||||
* 모달이 `content_type` 을 함께 보내므로 종류 분기가 모달 내부에서 끝난다.
|
||||
*/
|
||||
const SsulResultContent: React.FC<SsulResultContentProps> = ({ taskId, scenario }) => {
|
||||
const { t } = useTranslation();
|
||||
@ -22,6 +33,7 @@ const SsulResultContent: React.FC<SsulResultContentProps> = ({ taskId, scenario
|
||||
const [loadError, setLoadError] = useState(false);
|
||||
// 영상 전체를 받아오는 동안 시간이 걸린다 — 중복 클릭을 막고 진행을 알린다
|
||||
const [downloading, setDownloading] = useState(false);
|
||||
const [showSocialModal, setShowSocialModal] = useState(false);
|
||||
|
||||
// 폴링이 끝난 뒤 최종 상태(video_url 포함)를 한 번 더 읽는다.
|
||||
// 진행 중에는 video_url 이 비어 있으므로 완료 후 조회가 필요하다.
|
||||
@ -35,7 +47,8 @@ const SsulResultContent: React.FC<SsulResultContentProps> = ({ taskId, scenario
|
||||
};
|
||||
}, [taskId]);
|
||||
|
||||
const palette = SCEN[scenario];
|
||||
// 파일명은 프론트가 정한다(백엔드는 title 을 갖지 않는다)
|
||||
const fileName = `ssulbox-${scenario}-${taskId}.mp4`;
|
||||
|
||||
/**
|
||||
* 영상 다운로드.
|
||||
@ -51,8 +64,6 @@ const SsulResultContent: React.FC<SsulResultContentProps> = ({ taskId, scenario
|
||||
*/
|
||||
const handleDownload = async () => {
|
||||
if (!task?.video_url || downloading) return;
|
||||
// 파일명은 프론트가 정한다(백엔드는 title 을 갖지 않는다)
|
||||
const fileName = `ssulbox-${scenario}-${taskId}.mp4`;
|
||||
setDownloading(true);
|
||||
try {
|
||||
const response = await fetch(task.video_url);
|
||||
@ -79,54 +90,55 @@ const SsulResultContent: React.FC<SsulResultContentProps> = ({ taskId, scenario
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="ssul-scope ssul-result">
|
||||
<span className="ssul-result__scenario" style={{ color: palette.hex }}>
|
||||
<span aria-hidden="true">{palette.emoji}</span> {t(scenName(scenario))}
|
||||
</span>
|
||||
|
||||
<h3 className="ssul-result__title">{t('ssulbox.result.title')}</h3>
|
||||
|
||||
{loadError ? (
|
||||
<div className="ssul-hint warn">{t('ssulbox.result.loadFailed')}</div>
|
||||
) : task?.video_url ? (
|
||||
<video
|
||||
className="ssul-result__video"
|
||||
src={task.video_url}
|
||||
controls
|
||||
playsInline
|
||||
preload="metadata"
|
||||
/>
|
||||
) : (
|
||||
<div className="ssul-result__video-skeleton" />
|
||||
)}
|
||||
|
||||
<div className="ssul-result__actions">
|
||||
<button
|
||||
type="button"
|
||||
className="ssul-result__btn primary"
|
||||
onClick={handleDownload}
|
||||
disabled={!task?.video_url || downloading}
|
||||
>
|
||||
<IcDownload />
|
||||
{downloading
|
||||
? t('ssulbox.result.downloading')
|
||||
: t('ssulbox.result.download')}
|
||||
</button>
|
||||
|
||||
{/*
|
||||
TODO(Phase 8): SNS 업로드 버튼 자리.
|
||||
castad `SocialPostingModal` 을 그대로 쓸 수 없다 — `VideoListItem` 을 받아
|
||||
`video_id` 로 업로드 API 를 호출하는데, 그 API 는 `video` 테이블을 조회하고
|
||||
`social_upload.video_id`(NOT NULL FK)에 쓴다. 썰박스에는 video_id 가 없고,
|
||||
taskId 를 넘기면 **id 가 겹치는 남의 ADO2 영상이 업로드된다**
|
||||
(ssul_content.id 와 video.id 가 둘 다 1부터 시작한다).
|
||||
→ `/ssul/upload/*` 백엔드와 모달 분기가 선행되어야 한다.
|
||||
|
||||
'새로 만들기' 버튼은 제거했다. 사이드바 '새 프로젝트 만들기'가 같은 일을
|
||||
하고, ADO2 완료 화면도 재생성 버튼을 두지 않는다.
|
||||
*/}
|
||||
</div>
|
||||
</div>
|
||||
<CompletionView
|
||||
// 여기에 도달했다는 것은 생성이 이미 끝났다는 뜻이라 'loading' 은 쓰지 않는다.
|
||||
// 남는 실패 경우는 최종 상태 조회 실패뿐이며, 재시도 버튼은 두지 않는다
|
||||
// (생성을 다시 돌리는 것이 아니라 조회만 실패한 것이므로 새로고침이 맞다).
|
||||
videoState={loadError ? 'error' : task?.video_url ? 'ready' : 'empty'}
|
||||
videoUrl={task?.video_url}
|
||||
errorMessage={t('ssulbox.result.loadFailed')}
|
||||
fileName={fileName}
|
||||
metaLines={[
|
||||
`${t('ssulbox.result.scenarioLabel')} : ${t(scenName(scenario))}`,
|
||||
`${t('ssulbox.result.createdLabel')} : ${
|
||||
task?.created_at ? new Date(task.created_at).toLocaleString('ko-KR') : '-'
|
||||
}`,
|
||||
]}
|
||||
// ADO2 의 가사 자리. 썰박스는 대본이 영상 안에 그려지므로 내려받을 텍스트가
|
||||
// 없고, 대신 어떤 이야기인지 알려주는 시나리오 설명을 넣는다.
|
||||
detailLabel={t('ssulbox.result.scenarioLabel')}
|
||||
detail={<p className="comp2-lyrics-text">{t(scenDesc(scenario))}</p>}
|
||||
onDownload={handleDownload}
|
||||
downloadDisabled={!task?.video_url || downloading}
|
||||
downloadLabel={
|
||||
downloading ? t('ssulbox.result.downloading') : t('ssulbox.result.download')
|
||||
}
|
||||
onUpload={() => setShowSocialModal(true)}
|
||||
uploadDisabled={!task?.video_url}
|
||||
>
|
||||
{/* castad 모달 재사용 — VideoListItem 형태로 매핑해 넘긴다.
|
||||
type='ssul' 이 핵심이다: 모달이 content_type 으로 보내므로
|
||||
id 가 겹치는 ADO2 영상이 업로드되는 사고가 없다. */}
|
||||
<SocialPostingModal
|
||||
isOpen={showSocialModal}
|
||||
onClose={() => setShowSocialModal(false)}
|
||||
video={
|
||||
task?.video_url
|
||||
? ({
|
||||
type: 'ssul',
|
||||
video_id: taskId,
|
||||
store_name: t(scenName(scenario)),
|
||||
region: '',
|
||||
task_id: '',
|
||||
result_movie_url: task.video_url,
|
||||
created_at: task.created_at,
|
||||
like_count: 0,
|
||||
comment_count: 0,
|
||||
} as VideoListItem)
|
||||
: null
|
||||
}
|
||||
/>
|
||||
</CompletionView>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -13,8 +13,7 @@
|
||||
선택 카드의 링(테두리 바깥 1px)이 좌우에서 잘리고, 버튼 hover 글로우도 잘린다.
|
||||
생성물 파일은 직접 고치지 않으므로 여기서 되돌린다(0,2,0 이라 이긴다). */
|
||||
.ssul-scope.ssul-create,
|
||||
.ssul-scope.ssul-making,
|
||||
.ssul-scope.ssul-result {
|
||||
.ssul-scope.ssul-making {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
@ -133,8 +132,10 @@
|
||||
color: var(--color-text-gray-400);
|
||||
}
|
||||
|
||||
/* ── 업장 검색 ───────────────────────────────────── */
|
||||
/* ── 업장 검색 (ADO2 식 자동완성) ─────────────────── */
|
||||
/* position: relative 는 드롭다운(.ssul-places)의 기준점이다 */
|
||||
.ssul-create__search {
|
||||
position: relative;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
@ -181,14 +182,23 @@
|
||||
}
|
||||
|
||||
/* ── 검색 결과 / 선택 / 안내 ─────────────────────── */
|
||||
/* 입력창 아래로 겹쳐 뜨는 자동완성 드롭다운.
|
||||
문서 흐름에 넣으면 타이핑할 때마다 아래 요소(비용·버튼)가 밀려 흔들린다. */
|
||||
.ssul-places {
|
||||
width: 100%;
|
||||
margin: 0 0 14px;
|
||||
position: absolute;
|
||||
top: calc(100% + 6px);
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 20;
|
||||
max-height: 260px;
|
||||
overflow-y: auto;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
border: 1px solid var(--color-border-white-10);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
background: var(--color-bg-card);
|
||||
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
|
||||
.ssul-places li + li {
|
||||
@ -359,7 +369,11 @@
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
max-width: 420px;
|
||||
margin: 0 auto;
|
||||
/* 부모(.wizard-page-container)가 height:100% flex column 이다.
|
||||
`0 auto` 면 수평만 중앙이라 스텝퍼 바로 아래에 붙고 세로 여백이 전부
|
||||
아래로 몰린다. `auto` 는 상하 여백도 균등 분배해 스텝퍼~바닥 사이
|
||||
중앙에 놓인다. */
|
||||
margin: auto;
|
||||
padding: 48px 20px;
|
||||
text-align: center;
|
||||
color: var(--color-text-white);
|
||||
@ -492,96 +506,5 @@
|
||||
SsulViewerModal 이 castad `video-detail-*` 클래스를 그대로 재사용해
|
||||
통합 목록에서 어떤 카드를 열든 같은 모양이 나오게 했다. */
|
||||
|
||||
/* ── 결과 화면 ───────────────────────────────────── */
|
||||
.ssul-scope.ssul-result {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
max-width: 420px;
|
||||
margin: 0 auto;
|
||||
padding: 32px 20px 48px;
|
||||
text-align: center;
|
||||
color: var(--color-text-white);
|
||||
}
|
||||
|
||||
.ssul-result__scenario {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.ssul-result__title {
|
||||
margin: 0 0 22px;
|
||||
font-size: 19px;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.015em;
|
||||
}
|
||||
|
||||
/* 세로 쇼츠 비율 */
|
||||
.ssul-result__video,
|
||||
.ssul-result__video-skeleton {
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
aspect-ratio: 9 / 16;
|
||||
border-radius: 14px;
|
||||
background: #000;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.ssul-result__video-skeleton {
|
||||
background: var(--color-bg-card);
|
||||
border: 1px solid var(--color-border-white-10);
|
||||
}
|
||||
|
||||
.ssul-result__actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.ssul-result__btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
height: 46px;
|
||||
border: 1px solid var(--color-border-white-10);
|
||||
border-radius: 999px;
|
||||
background: var(--color-bg-card);
|
||||
color: var(--color-text-white);
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: border-color var(--transition-normal), filter var(--transition-normal);
|
||||
}
|
||||
|
||||
.ssul-result__btn svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.ssul-result__btn:hover:not(:disabled) {
|
||||
border-color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.ssul-result__btn.primary {
|
||||
border: none;
|
||||
background: linear-gradient(90deg, #ff8a5c, var(--color-ssul-accent));
|
||||
color: #1a1200;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.ssul-result__btn.primary:hover:not(:disabled) {
|
||||
filter: brightness(1.08);
|
||||
}
|
||||
|
||||
.ssul-result__btn:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: default;
|
||||
}
|
||||
/* 결과 화면 스타일은 없다 — SsulResultContent 가 ADO2 완료 화면과 같은
|
||||
`CompletionView`(comp2-* 클래스)를 쓴다(2026-08-10 통일). */
|
||||
|
||||
Loading…
Reference in New Issue
Block a user