378 lines
10 KiB
TypeScript
378 lines
10 KiB
TypeScript
export interface TutorialHint {
|
|
targetSelector: string;
|
|
titleKey: string;
|
|
descriptionKey: string;
|
|
position: 'top' | 'bottom' | 'left' | 'right';
|
|
noteKey?: string;
|
|
variant?: 'bubble';
|
|
clickToAdvance?: boolean;
|
|
advanceSelector?: string;
|
|
noSpotlight?: boolean;
|
|
spotlightPadding?: number;
|
|
spotlightPaddingOverride?: { top?: number; right?: number; bottom?: number; left?: number };
|
|
}
|
|
|
|
export interface TutorialStepDef {
|
|
key: string;
|
|
hints: TutorialHint[];
|
|
}
|
|
|
|
export const TUTORIAL_KEYS = {
|
|
LANDING: 'landing',
|
|
ANALYSIS: 'analysis',
|
|
ASSET: 'asset',
|
|
SOUND: 'sound',
|
|
SOUND_LYRICS: 'soundLyrics',
|
|
SOUND_AUDIO: 'soundAudio',
|
|
GENERATING:'generating',
|
|
COMPLETION: 'completion',
|
|
MY_INFO: 'myInfo',
|
|
ADO2_CONTENTS: 'ado2Contents',
|
|
UPLOAD_MODAL: 'uploadModal',
|
|
UPLOAD_FORM: 'uploadForm',
|
|
DASHBOARD: 'dashboard',
|
|
CONTENT_CALENDAR: 'contentCalendar',
|
|
FEEDBACK: 'feedback',
|
|
} as const;
|
|
|
|
// 같은 페이지에 속하는 튜토리얼 키 그룹 — 진행 카운터를 합산해서 표시
|
|
export const TUTORIAL_PAGE_GROUPS: string[][] = [
|
|
[TUTORIAL_KEYS.SOUND, TUTORIAL_KEYS.SOUND_LYRICS, TUTORIAL_KEYS.SOUND_AUDIO],
|
|
[TUTORIAL_KEYS.GENERATING, TUTORIAL_KEYS.COMPLETION],
|
|
[TUTORIAL_KEYS.UPLOAD_MODAL, TUTORIAL_KEYS.UPLOAD_FORM],
|
|
];
|
|
|
|
export const tutorialSteps: TutorialStepDef[] = [
|
|
{
|
|
key: TUTORIAL_KEYS.LANDING,
|
|
hints: [
|
|
{
|
|
targetSelector: '.hero-dropdown-trigger',
|
|
titleKey: 'tutorial.landing.dropdown.title',
|
|
descriptionKey: 'tutorial.landing.dropdown.desc',
|
|
position: 'left',
|
|
clickToAdvance: false,
|
|
noSpotlight: true,
|
|
variant: 'bubble',
|
|
},
|
|
{
|
|
targetSelector: '.hero-input-wrapper',
|
|
titleKey: 'tutorial.landing.field.title',
|
|
descriptionKey: 'tutorial.landing.field.desc',
|
|
position: 'right',
|
|
clickToAdvance: false,
|
|
noSpotlight: true,
|
|
variant: 'bubble',
|
|
},
|
|
{
|
|
targetSelector: '.hero-button',
|
|
titleKey: 'tutorial.landing.button.title',
|
|
descriptionKey: 'tutorial.landing.button.desc',
|
|
position: 'right',
|
|
clickToAdvance: true,
|
|
noSpotlight: true,
|
|
variant: 'bubble',
|
|
},
|
|
],
|
|
},
|
|
{
|
|
key: TUTORIAL_KEYS.ASSET,
|
|
hints: [
|
|
{
|
|
targetSelector: '.asset-column.asset-column-left',
|
|
titleKey: 'tutorial.asset.image.title',
|
|
descriptionKey: 'tutorial.asset.image.desc',
|
|
position: 'left',
|
|
clickToAdvance: false,
|
|
},
|
|
{
|
|
targetSelector: '.asset-upload-zone',
|
|
titleKey: 'tutorial.asset.upload.title',
|
|
descriptionKey: 'tutorial.asset.upload.desc',
|
|
position: 'left',
|
|
clickToAdvance: false,
|
|
},
|
|
{
|
|
targetSelector: '.asset-ratio-section',
|
|
titleKey: 'tutorial.asset.ratio.title',
|
|
descriptionKey: 'tutorial.asset.ratio.desc',
|
|
position: 'left',
|
|
clickToAdvance: false,
|
|
},
|
|
{
|
|
targetSelector: '.asset-next-button',
|
|
titleKey: 'tutorial.asset.next.title',
|
|
descriptionKey: 'tutorial.asset.next.desc',
|
|
position: 'top',
|
|
clickToAdvance: true,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
key: TUTORIAL_KEYS.SOUND,
|
|
hints: [
|
|
{
|
|
targetSelector: '.genre-grid',
|
|
titleKey: 'tutorial.sound.genre.title',
|
|
descriptionKey: 'tutorial.sound.genre.desc',
|
|
position: 'top',
|
|
clickToAdvance: false,
|
|
},
|
|
{
|
|
targetSelector: '.language-grid',
|
|
titleKey: 'tutorial.sound.language.title',
|
|
descriptionKey: 'tutorial.sound.language.desc',
|
|
position: 'top',
|
|
clickToAdvance: false,
|
|
},
|
|
{
|
|
targetSelector: '.btn-generate-sound',
|
|
titleKey: 'tutorial.sound.generate.title',
|
|
descriptionKey: 'tutorial.sound.generate.desc',
|
|
position: 'right',
|
|
clickToAdvance: true,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
key: TUTORIAL_KEYS.SOUND_LYRICS,
|
|
hints: [
|
|
{
|
|
targetSelector: '.lyrics-display',
|
|
titleKey: 'tutorial.sound.lyrics.title',
|
|
descriptionKey: 'tutorial.sound.lyrics.desc',
|
|
position: 'left',
|
|
clickToAdvance: false,
|
|
},
|
|
{
|
|
targetSelector: '.status-message-new',
|
|
titleKey: 'tutorial.sound.lyricsWait.title',
|
|
descriptionKey: 'tutorial.sound.lyricsWait.desc',
|
|
position: 'right',
|
|
clickToAdvance: false,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
key: TUTORIAL_KEYS.SOUND_AUDIO,
|
|
hints: [
|
|
{
|
|
targetSelector: '.audio-player',
|
|
titleKey: 'tutorial.sound.audioPlayer.title',
|
|
descriptionKey: 'tutorial.sound.audioPlayer.desc',
|
|
position: 'left',
|
|
clickToAdvance: false,
|
|
},
|
|
{
|
|
targetSelector: '.btn-video-generate',
|
|
titleKey: 'tutorial.sound.video.title',
|
|
descriptionKey: 'tutorial.sound.video.desc',
|
|
position: 'top',
|
|
clickToAdvance: true,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
key: TUTORIAL_KEYS.MY_INFO,
|
|
hints: [
|
|
{
|
|
targetSelector: '.youtube-connect-section',
|
|
titleKey: 'tutorial.myInfo.myInfo.title',
|
|
descriptionKey: 'tutorial.myInfo.myInfo.desc',
|
|
position: 'top',
|
|
clickToAdvance: false,
|
|
},
|
|
{
|
|
targetSelector: '.myinfo-social-btn',
|
|
titleKey: 'tutorial.myInfo.connect.title',
|
|
descriptionKey: 'tutorial.myInfo.connect.desc',
|
|
noteKey: 'tutorial.myInfo.connect.note',
|
|
position: 'top',
|
|
clickToAdvance: true,
|
|
},
|
|
{
|
|
targetSelector: '.myinfo-connected-accounts',
|
|
titleKey: 'tutorial.myInfo.connected.title',
|
|
descriptionKey: 'tutorial.myInfo.connected.desc',
|
|
position: 'top',
|
|
clickToAdvance: false,
|
|
},
|
|
{
|
|
targetSelector: '#sidebar-ado2-contents',
|
|
titleKey: 'tutorial.myInfo.ado2.title',
|
|
descriptionKey: 'tutorial.myInfo.ado2.desc',
|
|
position: 'right',
|
|
clickToAdvance: true,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
key: TUTORIAL_KEYS.ADO2_CONTENTS,
|
|
hints: [
|
|
{
|
|
targetSelector: '.ado2-content-card',
|
|
titleKey: 'tutorial.ado2.list.title',
|
|
descriptionKey: 'tutorial.ado2.list.desc',
|
|
position: 'right',
|
|
clickToAdvance: false,
|
|
},
|
|
{
|
|
targetSelector: '.content-upload-btn',
|
|
titleKey: 'tutorial.ado2.download.title',
|
|
descriptionKey: 'tutorial.ado2.download.desc',
|
|
position: 'right',
|
|
clickToAdvance: false,
|
|
},
|
|
{
|
|
targetSelector: '.content-delete-btn',
|
|
titleKey: 'tutorial.ado2.delete.title',
|
|
descriptionKey: 'tutorial.ado2.delete.desc',
|
|
position: 'right',
|
|
clickToAdvance: false,
|
|
},
|
|
{
|
|
targetSelector: '.content-download-btn',
|
|
titleKey: 'tutorial.ado2.upload.title',
|
|
descriptionKey: 'tutorial.ado2.upload.desc',
|
|
position: 'right',
|
|
clickToAdvance: true,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
key: TUTORIAL_KEYS.GENERATING,
|
|
hints:[
|
|
{
|
|
targetSelector: '.comp2-info-section',
|
|
titleKey: 'tutorial.completion.contentInfo.title',
|
|
descriptionKey: 'tutorial.completion.contentInfo.desc',
|
|
position: 'left',
|
|
},
|
|
{
|
|
targetSelector: '.comp2-video-section',
|
|
titleKey: 'tutorial.completion.generating.title',
|
|
descriptionKey: 'tutorial.completion.generating.desc',
|
|
position: 'right',
|
|
}
|
|
]
|
|
},
|
|
{
|
|
key: TUTORIAL_KEYS.COMPLETION,
|
|
hints: [
|
|
{
|
|
targetSelector: '.comp2-video-section',
|
|
titleKey: 'tutorial.completion.completion.title',
|
|
descriptionKey: 'tutorial.completion.completion.desc',
|
|
position: 'right',
|
|
clickToAdvance: false,
|
|
},
|
|
{
|
|
targetSelector: '#sidebar-my-info',
|
|
titleKey: 'tutorial.completion.myInfo.title',
|
|
descriptionKey: 'tutorial.completion.myInfo.desc',
|
|
position: 'right',
|
|
clickToAdvance: true,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
key: TUTORIAL_KEYS.UPLOAD_MODAL,
|
|
hints: [
|
|
{
|
|
targetSelector: '.social-posting-content',
|
|
titleKey: 'tutorial.upload.seo.title',
|
|
descriptionKey: 'tutorial.upload.seo.desc',
|
|
position: 'right',
|
|
clickToAdvance: false,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
key: TUTORIAL_KEYS.UPLOAD_FORM,
|
|
hints: [
|
|
{
|
|
targetSelector: '.social-posting-form',
|
|
titleKey: 'tutorial.upload.required.title',
|
|
descriptionKey: 'tutorial.upload.required.desc',
|
|
position: 'left',
|
|
clickToAdvance: false,
|
|
},
|
|
{
|
|
targetSelector: '.social-posting-radio-group',
|
|
titleKey: 'tutorial.upload.schedule.title',
|
|
descriptionKey: 'tutorial.upload.schedule.desc',
|
|
position: 'left',
|
|
clickToAdvance: false,
|
|
},
|
|
{
|
|
targetSelector: '.social-posting-btn:not(.cancel)',
|
|
titleKey: 'tutorial.upload.submit.title',
|
|
descriptionKey: 'tutorial.upload.submit.desc',
|
|
position: 'top',
|
|
clickToAdvance: true,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
key: TUTORIAL_KEYS.DASHBOARD,
|
|
hints: [
|
|
{
|
|
targetSelector: '.stats-grid-8',
|
|
titleKey: 'tutorial.dashboard.metrics.title',
|
|
descriptionKey: 'tutorial.dashboard.metrics.desc',
|
|
position: 'bottom',
|
|
},
|
|
{
|
|
targetSelector: '.yoy-chart-card',
|
|
titleKey: 'tutorial.dashboard.chart.title',
|
|
descriptionKey: 'tutorial.dashboard.chart.desc',
|
|
position: 'right',
|
|
},
|
|
{
|
|
targetSelector: '.tutorial-center-anchor',
|
|
titleKey: 'tutorial.dashboard.more.title',
|
|
descriptionKey: 'tutorial.dashboard.more.desc',
|
|
position: 'bottom',
|
|
clickToAdvance: false,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
key: TUTORIAL_KEYS.CONTENT_CALENDAR,
|
|
hints: [
|
|
{
|
|
targetSelector: '.calendar-grid-area',
|
|
titleKey: 'tutorial.contentCalendar.grid.title',
|
|
descriptionKey: 'tutorial.contentCalendar.grid.desc',
|
|
position: 'top',
|
|
clickToAdvance: false,
|
|
},
|
|
{
|
|
targetSelector: '.calendar-side-panel',
|
|
titleKey: 'tutorial.contentCalendar.panel.title',
|
|
descriptionKey: 'tutorial.contentCalendar.panel.desc',
|
|
position: 'left',
|
|
clickToAdvance: false,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
key: TUTORIAL_KEYS.FEEDBACK,
|
|
hints: [
|
|
{
|
|
targetSelector: '.tutorial-center-anchor',
|
|
titleKey: 'tutorial.feedback.complete.title',
|
|
descriptionKey: 'tutorial.feedback.complete.desc',
|
|
position: 'bottom',
|
|
clickToAdvance: false,
|
|
},
|
|
{
|
|
targetSelector: '.sidebar-inquiry-btn',
|
|
titleKey: 'tutorial.feedback.title',
|
|
descriptionKey: 'tutorial.feedback.desc',
|
|
position: 'right',
|
|
},
|
|
],
|
|
},
|
|
];
|