91 lines
3.2 KiB
TypeScript
91 lines
3.2 KiB
TypeScript
import React from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { AutocompleteRequest } from '../../utils/api';
|
|
import SearchInputForm, { SearchType } from '../../components/SearchInputForm';
|
|
import PipelineTabs, { Pipeline } from '../../components/PipelineTabs';
|
|
import SsulCreateForm from '../Ssulbox/SsulCreateForm';
|
|
import { Scen } from '../Ssulbox/ssulData';
|
|
import PosterCreateForm from '../Poster/PosterCreateForm';
|
|
import StylingContent from '../Poster/StylingContent';
|
|
|
|
interface UrlInputContentProps {
|
|
/** 현재 선택된 파이프라인. 소유자는 GenerationFlow (분기·리셋 때문) */
|
|
pipeline: Pipeline;
|
|
onPipelineChange: (pipeline: Pipeline) => void;
|
|
onAnalyze: (value: string, type?: SearchType) => void;
|
|
onAutocomplete?: (data: AutocompleteRequest) => void;
|
|
onManualInput?: (businessName: string, address: string, category: string, officialSiteUrl?: string) => void;
|
|
error: string | null;
|
|
/** 썰박스 생성 요청 접수 시. 폴링 소유는 GenerationFlow */
|
|
onSsulJobStarted: (taskId: number, scenario: Scen) => void;
|
|
/** 포스터 영상(F1) 생성 요청 접수 시. 폴링 소유는 GenerationFlow */
|
|
onPosterJobStarted: (jobId: string) => void;
|
|
/** 크레딧 부족 시 충전 화면으로 */
|
|
onGoToPayment: () => void;
|
|
}
|
|
|
|
/**
|
|
* 대시보드 진입 화면.
|
|
*
|
|
* 탭바는 로고와 하위 폼 **사이에 형제로** 얹고 하위 폼만 교체한다.
|
|
*/
|
|
const UrlInputContent: React.FC<UrlInputContentProps> = ({
|
|
pipeline,
|
|
onPipelineChange,
|
|
onAnalyze,
|
|
onAutocomplete,
|
|
onManualInput,
|
|
error,
|
|
onSsulJobStarted,
|
|
onPosterJobStarted,
|
|
onGoToPayment,
|
|
}) => {
|
|
const { t } = useTranslation();
|
|
|
|
// 스타일링은 한 화면짜리 도구라 진입 폼보다 넓은 판이 필요하다 (generation-flow.css 참조)
|
|
const wide = pipeline === 'styling';
|
|
|
|
const renderForm = () => {
|
|
switch (pipeline) {
|
|
case 'ado2':
|
|
return (
|
|
<SearchInputForm
|
|
onAnalyze={onAnalyze}
|
|
onAutocomplete={onAutocomplete}
|
|
onManualInput={onManualInput}
|
|
error={error}
|
|
/>
|
|
);
|
|
case 'ssul':
|
|
return <SsulCreateForm onSubmitted={onSsulJobStarted} onNeedCredit={onGoToPayment} />;
|
|
case 'poster':
|
|
return <PosterCreateForm onSubmitted={onPosterJobStarted} />;
|
|
case 'styling':
|
|
// 스타일링은 위저드가 아니라 도구다 — 진입 화면 안에서 처음부터 끝까지 끝난다
|
|
return <StylingContent />;
|
|
default:
|
|
return null;
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="url-input-container">
|
|
<div className={`url-input-content${wide ? ' url-input-content--wide' : ''}`}>
|
|
<div className="url-input-logo">
|
|
<img src="/assets/images/ADO2_with Slogan_white.svg" alt="ADO2" />
|
|
</div>
|
|
|
|
<PipelineTabs value={pipeline} onChange={onPipelineChange} />
|
|
|
|
{/* 고른 기능이 무엇을 해주는지 한 줄. 탭 라벨(2~6자)만으로는 네 기능의 차이가
|
|
전달되지 않아 처음 온 사람이 아무거나 눌러본다. STEP 1 위에 둔다. */}
|
|
<p className="pipeline-desc">{t(`pipelineTabs.desc.${pipeline}`)}</p>
|
|
|
|
{renderForm()}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default UrlInputContent;
|