김성경
f36fd5a3cb
- index.html에 Meta Pixel 스크립트 및 noscript 폴백 추가 (PageView 자동 추적) - 전환 추적 유틸 추가 (trackViewContent, trackCompleteRegistration, trackFirstVideoCreated) — 서버 CAPI와 동일 event_id로 픽셀 발화해 중복제거 - 랜딩 진입 시 UTM 파라미터 first-touch 캡처 (localStorage 보존, 가입 전환 시 서버로 전달 후 제거) - 카카오 로그인 콜백에서 is_new_user 판정 시 CompleteRegistration 발화 (토큰 리다이렉트 경로 + code 콜백 경로 모두 처리) - 영상 생성 완료 시 FirstVideoCreated 발화 - KakaoCallbackResponse 타입을 백엔드 LoginResponse 구조에 맞게 수정 (user 객체 제거, is_new_user 평탄화) - logout이 refresh_token을 body로 전달하도록 수정, 실패해도 로컬 데이터는 항상 삭제되도록 try/finally 처리 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
189 lines
6.6 KiB
HTML
Executable File
189 lines
6.6 KiB
HTML
Executable File
|
|
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
<title>ADO2</title>
|
|
<!-- ① 페이지 설명 -->
|
|
<meta name="description" content="ADO2는 ㈜에이아이오투오의 AI 기반 마케팅 자동화 플랫폼입니다. 콘텐츠 제작부터 채널 배포까지 자동으로 처리합니다." />
|
|
<!-- ② Open Graph 제목 -->
|
|
<meta property="og:title" content="ADO2 - AI 마케팅 자동화 플랫폼" />
|
|
<!-- ③ Open Graph 설명 -->
|
|
<meta property="og:description" content="ADO2는 ㈜에이아이오투오의 AI 기반 마케팅 자동화 플랫폼입니다. 콘텐츠 제작부터 채널 배포까지 자동으로 처리합니다." />
|
|
<meta property="og:url" content="https://ado2.o2osolution.ai" />
|
|
<meta property="og:type" content="website" />
|
|
<link rel="icon" type="image/svg+xml" href="/favicon_32.svg" sizes="32x32">
|
|
<link rel="icon" type="image/svg+xml" href="/favicon_48.svg" sizes="48x48">
|
|
<!-- Meta Pixel Code -->
|
|
<script>
|
|
!function(f,b,e,v,n,t,s)
|
|
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
|
|
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
|
|
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
|
|
n.queue=[];t=b.createElement(e);t.async=!0;
|
|
t.src=v;s=b.getElementsByTagName(e)[0];
|
|
s.parentNode.insertBefore(t,s)}(window, document,'script',
|
|
'https://connect.facebook.net/en_US/fbevents.js');
|
|
fbq('init', '1572679738203392');
|
|
fbq('track', 'PageView');
|
|
</script>
|
|
<!-- End Meta Pixel Code -->
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
brand: {
|
|
bg: '#011c1e',
|
|
card: '#083336',
|
|
cardHover: '#0b3f42',
|
|
accent: '#94FBE0',
|
|
purple: '#a855f7',
|
|
purpleHover: '#9333ea',
|
|
text: '#e2e8f0',
|
|
muted: '#94a3b8'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<script src="https://t1.kakaocdn.net/kakao_js_sdk/2.7.4/kakao.min.js" crossorigin="anonymous"></script>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&family=Playfair+Display:ital,wght@0,700;1,700&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--app-height: 100%;
|
|
}
|
|
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #121a1d;
|
|
}
|
|
body {
|
|
font-family: 'Noto Sans KR', sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
.font-serif-logo {
|
|
font-family: 'Playfair Display', serif;
|
|
}
|
|
/* Full-page snap scroll container */
|
|
.snap-container {
|
|
height: 100dvh;
|
|
width: 100%;
|
|
overflow-y: auto;
|
|
scroll-snap-type: y mandatory;
|
|
scroll-behavior: smooth;
|
|
-webkit-overflow-scrolling: touch;
|
|
scrollbar-width: none;
|
|
}
|
|
.snap-container::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.snap-section {
|
|
height: 100dvh;
|
|
width: 100%;
|
|
scroll-snap-align: start;
|
|
scroll-snap-stop: always;
|
|
position: relative;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
/* Utility to ensure content fits without vertical overflow */
|
|
.content-safe-area {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 2rem 1rem;
|
|
width: 100%;
|
|
max-width: 1280px;
|
|
margin: 0 auto;
|
|
}
|
|
/* Floating heart animation */
|
|
@keyframes floatUp {
|
|
0% { transform: translateY(0) scale(0.5) translateX(0); opacity: 1; }
|
|
100% { transform: translateY(-160px) scale(1.6) translateX(var(--tx, 20px)); opacity: 0; }
|
|
}
|
|
.floating-heart {
|
|
position: absolute;
|
|
pointer-events: none;
|
|
animation: floatUp 2s ease-out forwards;
|
|
color: #ff4d4d;
|
|
font-size: 24px;
|
|
z-index: 50;
|
|
}
|
|
/* Custom scrollbar styling */
|
|
.custom-scrollbar {
|
|
overflow-y: auto;
|
|
scrollbar-width: thin;
|
|
scrollbar-color: rgba(166, 255, 234, 0.3) transparent;
|
|
}
|
|
.custom-scrollbar::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
.custom-scrollbar::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
.custom-scrollbar::-webkit-scrollbar-thumb {
|
|
background-color: rgba(166, 255, 234, 0.3);
|
|
border-radius: 3px;
|
|
}
|
|
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
|
background-color: rgba(166, 255, 234, 0.5);
|
|
}
|
|
/* No scrollbar utility */
|
|
.no-scrollbar {
|
|
scrollbar-width: none;
|
|
-ms-overflow-style: none;
|
|
}
|
|
.no-scrollbar::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
/* Slide in animation - 오른쪽에서 왼쪽으로 */
|
|
@keyframes slideInFromRight {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateX(100px);
|
|
max-width: 0;
|
|
}
|
|
50% {
|
|
max-width: 500px;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
max-width: 600px;
|
|
}
|
|
}
|
|
.animate-slide-in {
|
|
animation: slideInFromRight 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
|
|
}
|
|
</style>
|
|
<script type="importmap">
|
|
{
|
|
"imports": {
|
|
"react/": "https://esm.sh/react@^19.2.3/",
|
|
"react": "https://esm.sh/react@^19.2.3",
|
|
"react-dom/": "https://esm.sh/react-dom@^19.2.3/"
|
|
}
|
|
}
|
|
</script>
|
|
</head>
|
|
<body class="bg-[#121a1d]">
|
|
<!-- Meta Pixel noscript fallback (head의 noscript에는 img가 허용되지 않아 body에 위치) -->
|
|
<noscript><img height="1" width="1" style="display:none"
|
|
src="https://www.facebook.com/tr?id=1572679738203392&ev=PageView&noscript=1"
|
|
/></noscript>
|
|
<div id="root"></div>
|
|
<script type="module" src="/src/index.tsx"></script>
|
|
</body>
|
|
</html>
|