// 튜브픽 v2 — 공통 레이아웃: Header, Footer, 글로벌 스타일
const { useState, useEffect, useRef } = React;
const T = window.TP2_THEME;
const D2 = window.TP2_DATA;
const F2 = window.TP2_FORMAT;
// 글로벌 CSS 인젝트
if (typeof document !== 'undefined' && !document.getElementById('tp2-globals')) {
const s = document.createElement('style');
s.id = 'tp2-globals';
s.textContent = `
html, body { margin:0; padding:0; background:${T.bg}; color:${T.ink}; font-family:${T.sans}; }
* { box-sizing: border-box; }
a { color: inherit; text-decoration: none; }
button { font-family: ${T.sans}; }
.tp2-link { color: ${T.sub}; transition: color .15s; }
.tp2-link:hover { color: ${T.ink}; }
.tp2-active { color: ${T.ink} !important; font-weight: 700; }
@keyframes tp2-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes tp2-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@keyframes tp2-fadeup { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
img, svg, video { max-width: 100%; }
/* === 관리자 편집 가능 텍스트(rich)에서 사용하는 클래스 === */
.hot { color: ${T.hot}; }
.tp2-rich-ink strong { color: ${T.ink}; font-weight: 700; }
.tp2-rich-dark strong { color: #fff; font-weight: 700; }
.tp2-rich-ink .hot, .tp2-rich-dark .hot { color: ${T.hot}; }
/* === TABLET (≤1100px) === */
@media (max-width: 1100px) {
main [style*="grid-template-columns: repeat(4, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
main [style*="grid-template-columns: 1.3fr 1fr"],
main [style*="grid-template-columns: 1.2fr 1fr"],
main [style*="grid-template-columns: 1.1fr 1fr"] { grid-template-columns: 1fr !important; }
main [style*="font-size: 116px"] { font-size: 84px !important; letter-spacing: -2.5px !important; }
}
/* === MOBILE (≤768px) === */
@media (max-width: 768px) {
/* Header */
header { padding: 12px 16px !important; flex-wrap: wrap !important; gap: 8px !important; }
header > nav { order: 3 !important; width: 100% !important; flex-wrap: wrap !important; gap: 6px 14px !important; font-size: 12px !important; justify-content: flex-start !important; }
header > div:last-child { gap: 6px !important; }
header a[style*="padding: 10px 18px"] { padding: 8px 12px !important; font-size: 12px !important; }
header a[style*="padding: 10px 16px"] { padding: 8px 12px !important; font-size: 12px !important; }
/* Sections — collapse horizontal padding & tame vertical */
main > section {
padding-top: 56px !important;
padding-bottom: 56px !important;
padding-left: 16px !important;
padding-right: 16px !important;
}
main > section:first-child { padding-top: 48px !important; }
/* Footer */
footer { padding: 48px 16px 24px !important; }
footer > div:first-child { gap: 24px !important; margin-bottom: 32px !important; }
footer [style*="display: flex"][style*="justify-content: space-between"] { flex-direction: column !important; gap: 8px !important; align-items: flex-start !important; }
/* Headings (catch-all) */
main h1 { font-size: 40px !important; line-height: 1.05 !important; letter-spacing: -1.2px !important; }
main h2 { font-size: 28px !important; line-height: 1.1 !important; letter-spacing: -0.8px !important; }
main h3 { font-size: 20px !important; line-height: 1.25 !important; letter-spacing: -0.3px !important; }
/* Specific large fonts (decorative numbers, hero h1, big stats) */
[style*="font-size: 220px"] { font-size: 80px !important; right: -8px !important; top: 8px !important; letter-spacing: -3px !important; }
[style*="font-size: 140px"] { font-size: 64px !important; }
[style*="font-size: 116px"] { font-size: 44px !important; letter-spacing: -1.5px !important; line-height: 1.05 !important; }
[style*="font-size: 96px"] { font-size: 56px !important; letter-spacing: -1.5px !important; }
[style*="font-size: 84px"] { font-size: 40px !important; letter-spacing: -1.2px !important; line-height: 1.05 !important; }
[style*="font-size: 80px"] { font-size: 40px !important; }
[style*="font-size: 76px"] { font-size: 36px !important; letter-spacing: -1px !important; line-height: 1.05 !important; }
[style*="font-size: 64px"] { font-size: 30px !important; letter-spacing: -1px !important; }
[style*="font-size: 56px"] { font-size: 28px !important; letter-spacing: -0.8px !important; }
[style*="font-size: 52px"] { font-size: 28px !important; letter-spacing: -0.8px !important; }
[style*="font-size: 48px"] { font-size: 26px !important; letter-spacing: -0.8px !important; }
[style*="font-size: 36px"] { font-size: 22px !important; }
[style*="font-size: 28px"] { font-size: 22px !important; }
[style*="font-size: 21px"] { font-size: 15px !important; }
[style*="font-size: 19px"] { font-size: 15px !important; }
[style*="font-size: 17px"] { font-size: 14px !important; }
/* Grids → 1 col (catch-all) */
main [style*="grid-template-columns"], footer [style*="grid-template-columns"] {
grid-template-columns: 1fr !important;
gap: 12px !important;
}
/* Exception: 4-col grids → 2x2 */
main [style*="grid-template-columns: repeat(4, 1fr)"] {
grid-template-columns: repeat(2, 1fr) !important;
gap: 0 !important;
}
/* Exception: footer top → 2x2 */
footer [style*="grid-template-columns: 1.5fr 1fr 1fr 1fr"] {
grid-template-columns: 1fr 1fr !important;
gap: 24px !important;
}
/* Compare table — left-align stacked */
main [style*="grid-template-columns: 1.4fr 1fr 1fr"] > div { text-align: left !important; justify-content: flex-start !important; }
main [style*="grid-template-columns: 1.4fr 1fr 1fr"] > div:first-child:empty { display: none !important; }
/* CTA banner inner card */
[style*="padding: 72px 56px"] { padding: 40px 22px !important; }
/* Numbers / counter cells */
[style*="padding: 36px 28px"] { padding: 22px 16px !important; }
[style*="padding: 36px 32px"] { padding: 22px 18px !important; }
/* Big rounded cards */
[style*="padding: 48px"][style*="border-radius: 24px"] { padding: 28px !important; }
[style*="padding: 40px"][style*="border-radius: 24px"] { padding: 24px !important; }
[style*="padding: 36px"][style*="border-radius"] { padding: 24px !important; }
[style*="padding: 28px"][style*="border-radius"] { padding: 20px !important; }
/* Pricing toggle (channels) → vertical pill */
main [style*="display: inline-flex"][style*="border-radius: 999"][style*="padding: 4px"] {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
max-width: 320px !important;
margin-left: auto !important;
margin-right: auto !important;
}
main [style*="border-radius: 999"][style*="padding: 9px 18px"] { width: 100% !important; text-align: center !important; }
/* CTA pill / heading buttons compress */
main a[style*="padding: 16px 32px"], main a[style*="padding: 16px 28px"], main button[style*="padding: 16px"] {
padding: 13px 20px !important; font-size: 14px !important;
}
main a[style*="padding: 14px 28px"] { padding: 12px 18px !important; font-size: 13px !important; }
main [style*="padding: 14px 20px"] { padding: 10px 14px !important; }
/* Risk hero book */
[style*="rotate(-4deg)"] { width: 240px !important; height: 320px !important; padding: 22px !important; }
/* Mini stat row gaps */
main [style*="gap: 56px"] { gap: 14px !important; font-size: 12px !important; }
main [style*="gap: 48"] { gap: 24px !important; }
/* Seller-story image height */
img[style*="max-height: 420px"] { max-height: 240px !important; }
/* Hero halos / radial bg — keep inside */
main section { overflow: hidden; }
/* FAQ search input */
[style*="padding: 6px 6px 6px 24px"] { padding: 4px 4px 4px 16px !important; }
[style*="padding: 12px 0"] { padding: 10px 0 !important; }
/* Compare row padding */
main [style*="padding: 20px 28px"] { padding: 14px 18px !important; }
main [style*="padding: 20px 28px"][style*="grid-template"] > div + div { margin-top: 4px !important; }
}
/* === SMALL (≤420px) — extreme phones === */
@media (max-width: 420px) {
main h1 { font-size: 34px !important; }
main h2 { font-size: 24px !important; }
[style*="font-size: 116px"] { font-size: 38px !important; }
[style*="font-size: 84px"] { font-size: 34px !important; }
[style*="font-size: 76px"] { font-size: 32px !important; }
header > nav { font-size: 11px !important; gap: 4px 12px !important; }
}
`;
document.head.appendChild(s);
}
// HEADER (모든 페이지 공통)
function TP2Header({ active }) {
return (
);
}
// FOOTER (모든 페이지 공통)
function TP2Footer() {
return (
);
}
// PAGE WRAP
function TP2Page({ active, children }) {
return (
<>
{children}
);
}
// 줄무늬 placeholder
function TP2Placeholder({ label, w, h, bg = T.bg, stripe = 'rgba(91,71,224,.12)', fg = T.accent, radius = 12, style = {} }) {
return (
{label}
);
}
// 카운터 (뷰포트 진입)
function TP2Counter({ to, suffix = '', duration = 1400, style = {} }) {
const [n, setN] = useState(0);
const ref = useRef(null);
const started = useRef(false);
useEffect(() => {
const el = ref.current;
if (!el) return;
const io = new IntersectionObserver((entries) => {
entries.forEach((e) => {
if (e.isIntersecting && !started.current) {
started.current = true;
const start = performance.now();
const tick = (t) => {
const p = Math.min(1, (t - start) / duration);
const eased = 1 - Math.pow(1 - p, 3);
setN(Math.floor(eased * to));
if (p < 1) requestAnimationFrame(tick);
else setN(to);
};
requestAnimationFrame(tick);
}
});
}, { threshold: 0.4 });
io.observe(el);
return () => io.disconnect();
}, [to, duration]);
return {n.toLocaleString()}{suffix};
}
// 가격 티어 토글
function TP2Toggle({ tiers, value, onChange }) {
return (
{tiers.map((t) => {
const active = t.id === value;
return (
);
})}
);
}
// FAQ 아코디언
function TP2FAQ({ items, defaultOpen = -1 }) {
const [open, setOpen] = useState(defaultOpen);
return (
{items.map((it, i) => {
const isOpen = open === i;
return (
);
})}
{t('eyebrow', '━━ WHY TUBEPICK')}
걱정되는 두 가지를 해결해 드립니다!')}
/>
직구나 검증되지 않은 곳에서 구매한 채널은 늘 이 두 가지 리스크를 안고 있습니다.')}
/>
{/* 두 리스크 카드 */}
{t('risk01.tag', 'RISK 01')}
{t('risk01.title', '"이 채널, 난 아직 업로드도 안했는데 수창 정지???!!"')}
채널이 만들어진 과정까지 들여다본 뒤, 현재 트렌드에서 살아남는 수익화 채널만 엄선합니다. 5개국 도매 매니저가 1차로 엄선한 채널을, 튜브픽이 한 번 더 자체 검증·재선별하여 두 단계를 통과한 채널만 판매합니다.')}
/>
{t('risk02.tag', 'RISK 02')}
{t('risk02.title', '"조회수가 안 나오면 어떡하지?"')}
한 달 토탈 AS 케어로 보장합니다. 정상 영상 5개를 한 달 안에 업로드 후 모두 500회 미만이면 조회수 AS, 구독자가 1,000명 이하로 떨어지면 구독자 AS, 그래도 해결되지 않으면 한 달 무제한 채널 교체.')}
/>
{/* 솔직한 이야기 — 엑셀 이미지 + 카피 */}
{t('story.chip', '● 판매자의 솔직한 이야기')}
10개 이상의 채널을 날렸습니다."')}
/>
일상적으로 발생합니다.')}
/>
그 리스크를 저희가 먼저 안고 최대한 품질 좋은 채널을 골라드리는 데에 집중합니다. 품질이 나쁘면 저희도 손해가 나는 구조라, 현재 판매되는 채널들은 최대한 꼼꼼히 챙겨서 고르고 있습니다.')}
/>
{t('stat1.v', '10+')}
{t('stat1.l', '날아간 채널')}
{t('stat2.v', '120+')}
{t('stat2.l', '현재 검증 채널')}
{t('stat3.v', '5개국')}
{t('stat3.l', '도매 매니저 협력')}
EVIDENCE · LOST CHANNELS LOG
● ACTUAL RECORD
);
}
Object.assign(window, {
TP2Header, TP2Footer, TP2Page, TP2Placeholder,
TP2Counter, TP2Toggle, TP2FAQ, TP2CTABanner,
TP2TrustSection,
});