feat(web-ui): SetupTab — YouTube 자동화 구성 허브
This commit is contained in:
148
src/pages/music/components/SetupTab.jsx
Normal file
148
src/pages/music/components/SetupTab.jsx
Normal file
@@ -0,0 +1,148 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import {
|
||||
getMusicSetup, updateMusicSetup,
|
||||
getYoutubeAuthUrl, getYoutubeStatus, disconnectYoutube,
|
||||
} from '../../../api';
|
||||
|
||||
export default function SetupTab() {
|
||||
const [setup, setSetup] = useState(null);
|
||||
const [yt, setYt] = useState(null);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
Promise.all([getMusicSetup(), getYoutubeStatus()])
|
||||
.then(([s, y]) => { setSetup(s); setYt(y); })
|
||||
.catch(e => setError(String(e)));
|
||||
}, []);
|
||||
|
||||
if (!setup) return <p className="ms-loading">Loading…</p>;
|
||||
|
||||
const save = async (patch) => {
|
||||
setSaving(true);
|
||||
try {
|
||||
const next = await updateMusicSetup(patch);
|
||||
setSetup(next);
|
||||
} catch (e) { setError(String(e)); }
|
||||
finally { setSaving(false); }
|
||||
};
|
||||
|
||||
const connectYoutube = async () => {
|
||||
const { url } = await getYoutubeAuthUrl();
|
||||
window.location.href = url;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="setup-container">
|
||||
{error && <div className="ms-error">{error}</div>}
|
||||
|
||||
<section className="setup-card">
|
||||
<h3>YouTube 채널 연동</h3>
|
||||
{yt && yt.channel_id ? (
|
||||
<div className="setup-channel">
|
||||
{yt.avatar_url && <img src={yt.avatar_url} alt="" className="setup-avatar" />}
|
||||
<span>{yt.channel_title}</span>
|
||||
<button onClick={async () => { await disconnectYoutube(); setYt({}); }}>
|
||||
연결 해제
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<button className="button primary" onClick={connectYoutube}>
|
||||
Google 계정 연결
|
||||
</button>
|
||||
)}
|
||||
</section>
|
||||
|
||||
<section className="setup-card">
|
||||
<h3>메타데이터 템플릿</h3>
|
||||
<label>제목 패턴
|
||||
<input
|
||||
value={setup.metadata_template.title}
|
||||
onChange={e => setSetup(s => ({...s, metadata_template: {...s.metadata_template, title: e.target.value}}))}
|
||||
/>
|
||||
</label>
|
||||
<label>설명 템플릿
|
||||
<textarea
|
||||
rows={6}
|
||||
value={setup.metadata_template.description}
|
||||
onChange={e => setSetup(s => ({...s, metadata_template: {...s.metadata_template, description: e.target.value}}))}
|
||||
/>
|
||||
</label>
|
||||
<label>기본 태그 (쉼표 구분)
|
||||
<input
|
||||
value={(setup.metadata_template.tags || []).join(', ')}
|
||||
onChange={e => setSetup(s => ({...s, metadata_template: {...s.metadata_template,
|
||||
tags: e.target.value.split(',').map(t => t.trim()).filter(Boolean)}}))}
|
||||
/>
|
||||
</label>
|
||||
<button onClick={() => save({ metadata_template: setup.metadata_template })}>저장</button>
|
||||
</section>
|
||||
|
||||
<section className="setup-card">
|
||||
<h3>AI 커버 prompt (장르별)</h3>
|
||||
{Object.entries(setup.cover_prompts).map(([g, p]) => (
|
||||
<div key={g} className="setup-prompt-row">
|
||||
<span className="setup-prompt-genre">{g}</span>
|
||||
<input
|
||||
value={p}
|
||||
onChange={e => setSetup(s => ({...s, cover_prompts: {...s.cover_prompts, [g]: e.target.value}}))}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
<button onClick={() => save({ cover_prompts: setup.cover_prompts })}>저장</button>
|
||||
</section>
|
||||
|
||||
<section className="setup-card">
|
||||
<h3>AI 최종 검토 기준</h3>
|
||||
{['meta','policy','viewer','trend'].map(k => (
|
||||
<label key={k}>
|
||||
{k} 가중치 ({setup.review_weights[k]})
|
||||
<input type="range" min="0" max="100"
|
||||
value={setup.review_weights[k]}
|
||||
onChange={e => setSetup(s => ({...s, review_weights: {...s.review_weights, [k]: parseInt(e.target.value)}}))}
|
||||
/>
|
||||
</label>
|
||||
))}
|
||||
<label>임계값 ({setup.review_threshold})
|
||||
<input type="range" min="0" max="100" value={setup.review_threshold}
|
||||
onChange={e => setSetup(s => ({...s, review_threshold: parseInt(e.target.value)}))}
|
||||
/>
|
||||
</label>
|
||||
<button onClick={() => save({ review_weights: setup.review_weights, review_threshold: setup.review_threshold })}>저장</button>
|
||||
</section>
|
||||
|
||||
<section className="setup-card">
|
||||
<h3>영상 비주얼 기본값</h3>
|
||||
<label>해상도
|
||||
<select value={setup.visual_defaults.resolution}
|
||||
onChange={e => setSetup(s => ({...s, visual_defaults: {...s.visual_defaults, resolution: e.target.value}}))}>
|
||||
<option value="1920x1080">1920×1080 (가로)</option>
|
||||
<option value="1080x1920">1080×1920 (세로/Shorts)</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>스타일
|
||||
<select value={setup.visual_defaults.style}
|
||||
onChange={e => setSetup(s => ({...s, visual_defaults: {...s.visual_defaults, style: e.target.value}}))}>
|
||||
<option value="visualizer">Visualizer (파형)</option>
|
||||
</select>
|
||||
</label>
|
||||
<button onClick={() => save({ visual_defaults: setup.visual_defaults })}>저장</button>
|
||||
</section>
|
||||
|
||||
<section className="setup-card">
|
||||
<h3>발행 정책</h3>
|
||||
<label>privacy
|
||||
<select value={setup.publish_policy.privacy}
|
||||
onChange={e => setSetup(s => ({...s, publish_policy: {...s.publish_policy, privacy: e.target.value}}))}>
|
||||
<option value="private">Private (비공개)</option>
|
||||
<option value="unlisted">Unlisted</option>
|
||||
<option value="public">Public</option>
|
||||
</select>
|
||||
</label>
|
||||
<button onClick={() => save({ publish_policy: setup.publish_policy })}>저장</button>
|
||||
</section>
|
||||
|
||||
{saving && <div className="setup-saving">저장 중...</div>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user