diff --git a/index.css b/index.css index d3ddffa..ca9fdd2 100644 --- a/index.css +++ b/index.css @@ -931,6 +931,56 @@ font-weight: 700; } +/* 모바일 전용 사이드바 튜토리얼 토글 */ +.sidebar-tutorial-btn { + display: none; +} + +@media (max-width: 767px) { + .sidebar-tutorial-btn { + display: flex; + align-items: center; + gap: 0.75rem; + width: 100%; + margin-top: 0.5rem; + padding: 0.75rem; + border-radius: var(--radius-lg); + color: var(--color-text-gray-400); + border: none; + background: none; + cursor: pointer; + font-size: var(--text-sm); + font-weight: 500; + transition: color var(--transition-normal), background-color var(--transition-normal); + } + + .sidebar-tutorial-btn:hover { + color: var(--color-text-white); + background-color: rgba(255, 255, 255, 0.05); + } + + .sidebar-tutorial-btn.active { + color: var(--color-mint); + } + + .sidebar-tutorial-label { + text-align: left; + } + + .sidebar-tutorial-badge { + font-size: 11px; + font-weight: 700; + } + + .sidebar-tutorial-badge.on { + color: var(--color-mint); + } + + .sidebar-tutorial-badge.off { + color: var(--color-text-gray-400); + } +} + /* Mobile Menu Button */ .mobile-menu-btn { position: fixed; @@ -12301,6 +12351,12 @@ border-color: rgba(166, 255, 234, 0.4); } +@media (max-width: 767px) { + .tutorial-toggle-fab { + display: none; + } +} + .tutorial-toggle-badge { font-size: 10px; font-weight: 700; diff --git a/public/terms.html b/public/terms.html index 8941c00..1bac51d 100644 --- a/public/terms.html +++ b/public/terms.html @@ -41,7 +41,7 @@

제 6 조 (외부 API 연동 및 데이터 활용)

-

서비스는 Google, YouTube, Naver 등의 제3자 API를 활용하여 마케팅 자동화 기능을 제공합니다. 특히 YouTube 서비스 연동을 위해 YouTube Data API(youtube.readonly, youtube.upload) 및 YouTube Analytics API(yt-analytics.readonly)를 사용하며, 이를 통해 수집·처리되는 데이터는 개인정보처리방침에 따라 관리됩니다. 회원은 각 외부 서비스의 이용약관 및 정책을 준수할 의무가 있으며, 외부 API 제공사의 정책 변경으로 인한 서비스 제한에 대해 회사는 면책됩니다.

+

서비스는 Google, YouTube, Naver 등의 제3자 API를 활용하여 마케팅 자동화 기능을 제공합니다. 특히 YouTube 서비스 연동을 위해 YouTube Data API 및 YouTube Analytics API를 사용하며, 이를 통해 수집·처리되는 데이터는 개인정보처리방침에 따라 관리됩니다. 회원은 각 외부 서비스의 이용약관 및 정책을 준수할 의무가 있으며, 외부 API 제공사의 정책 변경으로 인한 서비스 제한에 대해 회사는 면책됩니다.

YouTube API 서비스 이용과 관련하여 YouTube 이용약관Google 개인정보처리방침이 함께 적용됩니다.

제 7 조 (AI 생성 콘텐츠의 권리)

diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx index 1a1f0e1..4d3abd7 100755 --- a/src/components/Sidebar.tsx +++ b/src/components/Sidebar.tsx @@ -38,9 +38,12 @@ interface SidebarProps { userInfo?: UserMeResponse | null; onLogout?: () => void; credits?: number | null; + tutorialAvailable?: boolean; + tutorialEnabled?: boolean; + onToggleTutorial?: () => void; } -const Sidebar: React.FC = ({ activeItem, onNavigate, onHome, userInfo, onLogout, credits }) => { +const Sidebar: React.FC = ({ activeItem, onNavigate, onHome, userInfo, onLogout, credits, tutorialAvailable, tutorialEnabled, onToggleTutorial }) => { const { t } = useTranslation(); const [isCollapsed, setIsCollapsed] = useState(false); const [isMobileOpen, setIsMobileOpen] = useState(false); @@ -159,6 +162,24 @@ const Sidebar: React.FC = ({ activeItem, onNavigate, onHome, userI
+ {/* 모바일 전용 튜토리얼 토글 */} + {tutorialAvailable && ( + + )} +
diff --git a/src/pages/Dashboard/GenerationFlow.tsx b/src/pages/Dashboard/GenerationFlow.tsx index 2dc108a..2c5dc23 100755 --- a/src/pages/Dashboard/GenerationFlow.tsx +++ b/src/pages/Dashboard/GenerationFlow.tsx @@ -632,7 +632,7 @@ const GenerationFlow: React.FC = ({ return (
{showSidebar && ( - + tutorial.toggleTutorial(getCurrentTutorialKey())} /> )}
{renderContent()} @@ -645,7 +645,7 @@ const GenerationFlow: React.FC = ({ return (
{showSidebar && ( - + tutorial.toggleTutorial(getCurrentTutorialKey())} /> )} {tutorialUI}