From a9b53a3327ab550d49c4f0d15055f79fa59c8c44 Mon Sep 17 00:00:00 2001 From: gahusb Date: Wed, 15 Apr 2026 02:18:30 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20PublicShell=20+=20TopNav=20+=20?= =?UTF-8?q?=ED=99=88=20v6=20(ai=5Fmusic=5Fcreator=20=EC=B0=B8=EC=A1=B0)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 사이드바 대시보드는 /admin, /mypage 에서만 사용 - 공개 페이지는 상단 TopNav + 다크 footer(PublicShell) - 홈 v6: Hero + Evidence + Before/After + Toolkit + 3-Step + Other Products Co-Authored-By: Claude Opus 4.6 --- app/components/DashboardShell.tsx | 7 + app/components/PublicShell.tsx | 51 +++ app/components/TopNav.tsx | 152 ++++++++ app/page.tsx | 554 ++++++++++++++++++------------ 4 files changed, 552 insertions(+), 212 deletions(-) create mode 100644 app/components/PublicShell.tsx create mode 100644 app/components/TopNav.tsx diff --git a/app/components/DashboardShell.tsx b/app/components/DashboardShell.tsx index 0629b10..0ebe865 100644 --- a/app/components/DashboardShell.tsx +++ b/app/components/DashboardShell.tsx @@ -3,19 +3,26 @@ import { useState } from 'react'; import { usePathname } from 'next/navigation'; import Sidebar from './Sidebar'; +import PublicShell from './PublicShell'; const STANDALONE_PATHS = ['/login', '/signup', '/admin']; +const SIDEBAR_PATHS = ['/mypage']; export default function DashboardShell({ children }: { children: React.ReactNode }) { const [sidebarOpen, setSidebarOpen] = useState(false); const pathname = usePathname(); const isStandalone = STANDALONE_PATHS.some((p) => pathname.startsWith(p)); + const useSidebar = SIDEBAR_PATHS.some((p) => pathname.startsWith(p)); if (isStandalone) { return <>{children}; } + if (!useSidebar) { + return {children}; + } + return (
setSidebarOpen(false)} /> diff --git a/app/components/PublicShell.tsx b/app/components/PublicShell.tsx new file mode 100644 index 0000000..35cff75 --- /dev/null +++ b/app/components/PublicShell.tsx @@ -0,0 +1,51 @@ +import TopNav from './TopNav'; +import Link from 'next/link'; + +export default function PublicShell({ children }: { children: React.ReactNode }) { + return ( + <> + +
+ {children} +
+
+
+
+

쟁승메이드

+

+ AI 음악·블로그 자동화·사주 분석까지. 현직 엔지니어가 직접 설계·운영하는 AI 크리에이티브 스토어. +

+
+
+ 이용약관 + 개인정보처리방침 + 환불 정책 +
+
+
+ 대표자: 박재오 + 사업자등록번호: 267-53-00822 + 주소: 서울시 동작구 여의대방로22아길 22, 1동 109호 + 전화: 010-3907-1392 + 이메일: bgg8988@gmail.com +
+

© 2026 쟁승메이드. All rights reserved.

+
+
+
+ + ); +} diff --git a/app/components/TopNav.tsx b/app/components/TopNav.tsx new file mode 100644 index 0000000..de9a375 --- /dev/null +++ b/app/components/TopNav.tsx @@ -0,0 +1,152 @@ +'use client'; + +import Link from 'next/link'; +import { usePathname } from 'next/navigation'; +import { useState, useEffect } from 'react'; + +const LINKS = [ + { href: '/', label: 'Home' }, + { href: '/services/music', label: 'AI 음악' }, + { href: '/services/blog', label: '블로그 팩' }, + { href: '/saju', label: 'AI 사주' }, + { href: '/legal/refund', label: '환불정책' }, +]; + +export default function TopNav() { + const pathname = usePathname(); + const [open, setOpen] = useState(false); + const [scrolled, setScrolled] = useState(false); + + useEffect(() => { + const onScroll = () => setScrolled(window.scrollY > 8); + onScroll(); + window.addEventListener('scroll', onScroll, { passive: true }); + return () => window.removeEventListener('scroll', onScroll); + }, []); + + useEffect(() => { setOpen(false); }, [pathname]); + + const isActive = (href: string) => + href === '/' ? pathname === '/' : pathname.startsWith(href); + + return ( + <> + + + {/* 모바일 오버레이 */} + {open && ( +
+
+ 쟁승메이드 + +
+
+ {LINKS.map((l) => ( + + {l.label} + + ))} +
+ + 로그인 + + + 시작하기 + +
+
+
+ )} + + ); +} diff --git a/app/page.tsx b/app/page.tsx index 77f2a0c..fcd432f 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -6,52 +6,38 @@ import ContactModal from './components/ContactModal'; import { trackCTAClick } from '../lib/gtag'; /* ═══════════════════════════════════════════════════ - 쟁승메이드 홈 — v5 (Kinetic Ether Dashboard) - 상단 라우터 페이지를 워크스페이스형 대시보드로 재구성. + 쟁승메이드 홈 v6 — AI Music Creator Landing + 참조: Downloads/stitch_ai_mv/ai_music_creator_landing_page ═══════════════════════════════════════════════════ */ -interface Tile { - href: string; - label: string; - title: string; - desc: string; - tag: string; - tagColor: string; - onClick?: () => void; -} +const TOOLKIT = [ + { accent: 'var(--kx-primary)', icon: '🎛', title: 'Suno 프롬프트 레시피', desc: '원하는 장르와 감성을 완벽하게 구현하는 검증된 프롬프트 조합 모음.' }, + { accent: 'var(--kx-secondary)', icon: '✍', title: '작사 치트키 템플릿', desc: '주제만 넣으면 감성적인 가사를 뽑아내는 AI 라이팅 가이드.' }, + { accent: '#ff86c3', icon: '🎬', title: '뮤직비디오 워크플로우', desc: '음악 비트에 맞춰 자동으로 영상을 생성·편집하는 원스톱 프로세스.' }, + { accent: '#c284ff', icon: '⚖', title: '저작권 세이프 가이드', desc: 'AI 생성물의 상업적 이용과 저작권 등록을 위한 체크리스트.' }, + { accent: 'var(--kx-secondary-dim)', icon: '📄', title: 'PDF 기획 템플릿', desc: '채널 브랜딩부터 콘텐츠 기획까지 한번에 끝내는 실행 가이드북.' }, + { accent: '#ffffff', icon: '📦', title: '성공 사례 샘플 프로젝트', desc: '조회수 100만 이상을 기록한 프로젝트의 실제 파일 구조 분석.' }, +]; + +const BEFORE = [ + '작곡 공부에만 최소 6개월 소요', + '영상 편집 프로그램 학습의 높은 장벽', + '항상 불안한 저작권 위반 위험', + '곡 하나 완성에 드는 수백만 원의 외주비', +]; + +const AFTER = [ + '단 1시간 만에 프로급 음원 & 영상 완성', + '드래그 앤 드롭 수준의 직관적인 워크플로우', + '가이드대로 따라하면 완벽한 저작권 해결', + '커피 한 잔 가격으로 무한대 콘텐츠 생산', +]; export default function Home() { const [modalOpen, setModalOpen] = useState(false); - const tiles: Tile[] = [ - { - href: '/services/music', - label: 'FLAGSHIP', - title: 'AI 음악 마스터', - desc: '네 사연을 노래로. 쇼츠까지 한 번에. Suno·Runway·유튜브 SEO를 묶은 4단계 공정 팩.', - tag: '₩39k~149k', - tagColor: 'var(--kx-primary)', - }, - { - href: '/services/blog', - label: 'DIGITAL PACK', - title: '블로그 자동화 팩', - desc: '프롬프트 조합법 + 템플릿 PDF + 샘플. 쿠팡파트너스·애드포스트 수익화 루틴.', - tag: '₩29,000', - tagColor: 'var(--kx-secondary)', - }, - { - href: '/saju', - label: 'FREE TOOL', - title: 'AI 사주 분석', - desc: '사주팔자 자동 산출 + Gemini 기반 해석. 검증된 계산 엔진.', - tag: 'FREE', - tagColor: '#40ceed', - }, - ]; - return ( -
+
setModalOpen(false)} @@ -59,194 +45,338 @@ export default function Home() { checklist={['연락처/이메일', '원하는 작업 범위', '희망 일정']} /> - {/* 배경 오브 */} -
-
-
- - {/* 워크스페이스 헤더 */} -
-
-
- WORKSPACE / JAENGSEUNG.MAKE -

- Creative Studio Overview -

+ {/* 1. Hero */} +
+
+ AI MUSIC CREATOR TOOLKIT · 2026 +

+ AI로 음악 + 뮤직비디오까지 +
1시간 만에 완성 +

+

+ 조회수 터지는 콘텐츠 제작 시스템. 음악 이론을 몰라도 누구나 프로 수준의 결과물을 만듭니다. +

+
+ trackCTAClick('home_v6_hero_primary')} + className="kx-btn-primary px-8 py-4 rounded-full text-base inline-flex items-center justify-center gap-2" + > + 지금 바로 제작 시작하기 + + + 샘플 결과 보기 +
-
- - - SYSTEM ONLINE - - v2026.04 + + {/* Demo Showcase Card */} +
+
+ {/* 배경 그라디언트 + 그리드 */} +
+ + + + + + + + {[...Array(40)].map((_, i) => ( + + ))} + + +
+ + + +
+ +
+ DEMO SHOWCASE +

+ 쟁승메이드로 제작된 K-POP 스타일 MV 샘플 +

+
+
-
+ -
- {/* Hero: Launch Panel */} -
-
- {/* 좌측: 카피 */} -
- FLAGSHIP RELEASE · 2026 -

- 네 사연을 노래로. -
- 쇼츠까지 한 번에. -

-

- AI로 음악을 뽑는 게 아니라,{' '} - 고품질 결과물을 빠르게 뽑는 법을 팝니다. - 컨셉 → 음악 → 비주얼 → 퍼블리싱, 4단계 공정을 구조화한 마스터 팩. -

-
- trackCTAClick('home_hero_music')} - className="kx-btn-primary inline-flex items-center gap-2 px-6 py-3.5 rounded-xl text-sm" - > - AI 음악 팩 보기 → - - - 전체 상품 보기 - -
-
- {/* 우측: 엔진 상태 모니터 */} -
-
-
- ENGINE STATUS - REAL-TIME -
-
- - - - -
-
-
- DELIVERED - 47 projects -
-
-
-
-
-
- - {/* 서비스 타일 */} -
-
-
- PRODUCTS -

Launch Pads

-
- - {tiles.length} modules active - -
-
- {tiles.map((t) => ( - trackCTAClick(`home_tile_${t.href}`)} - className="kx-folder group relative transition-all hover:-translate-y-1" - style={{ textDecoration: 'none' }} + {/* 2. Evidence */} +
+
+

+ 결과 먼저 보여주기 +

+
+ {[ + { hue: 'from-violet-600 to-fuchsia-500', views: '조회수 1.2M', comments: '댓글 4.5K' }, + { hue: 'from-sky-600 to-cyan-500', views: '조회수 850K', comments: '댓글 2.1K' }, + { hue: 'from-pink-600 to-rose-500', views: '조회수 2.4M', comments: '댓글 12K' }, + ].map((c, i) => ( +
-
- {t.label} - - {t.tag} - +
+
+ + {[...Array(30)].map((_, j) => ( + + ))} +
-

{t.title}

-

{t.desc}

-
- 열기 - → +
+ 👁 {c.views} + 💬 {c.comments}
- +
))}
-
+
+
- {/* Stats Monitor */} -
-
-
- CREDIBILITY MONITOR -

왜 쟁승메이드인가

+ {/* 3. Before / After */} +
+
+

+ 압도적인 제작 효율의 차이 +

+
+
+ MANUAL PROCESS +

+ ⚠ Before +

+
    + {BEFORE.map((t) => ( +
  • + ✗ + {t} +
    • + ))} +
+
+
+ AI POWERED +

+ ⚡ After +

+
    + {AFTER.map((t) => ( +
  • + ✓ + {t} +
    • + ))} +
-
- - - - +
+
+ + {/* 4. Toolkit */} +
+
+
+ TOOLKIT +

+ The Toolkit Assets +

+

+ 성공적인 AI 뮤직 크리에이터를 위한 모든 필수 자산. +

-
+
+ {TOOLKIT.map((t) => ( +
+
+ {t.icon} +
+

{t.title}

+

{t.desc}

+
+ ))} +
+
+
- {/* Final CTA */} -
- NEXT STEP -

프로젝트 문의가 있으신가요?

-

- 맞춤 개발·컨설팅·협업 제안 모두 환영합니다. 24시간 이내 회신 드립니다. -

- -
-
-
- ); -} - -function EngineRow({ label, value, pct }: { label: string; value: string; pct: number }) { - return ( -
-
- {label} - {value} -
-
-
-
-
- ); -} - -function Stat({ num, label, sub }: { num: string; label: string; sub: string }) { - return ( -
-
{num}
-
{label}
-
{sub}
+ NEXT STEP +

+ 프로젝트 문의가 있으신가요? +

+

+ 맞춤 개발·컨설팅·협업 제안 모두 환영합니다. 24시간 이내 회신. +

+ +
+
+
); }