279 lines
17 KiB
HTML
279 lines
17 KiB
HTML
<!DOCTYPE html>
|
|
<html class="dark" lang="ko"><head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
<title>트래픽 라우팅 규칙 관리</title>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
"primary": "#135bec",
|
|
"background-light": "#f6f6f8",
|
|
"background-dark": "#0a0f18",
|
|
"sidebar-dark": "#111318",
|
|
"card-dark": "#1e232e"
|
|
},
|
|
fontFamily: {
|
|
"display": ["Inter", "sans-serif"]
|
|
},
|
|
borderRadius: { "DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px" },
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style type="text/tailwindcss">
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
}
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background: #0a0f18;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: #282e39;
|
|
border-radius: 4px;
|
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #374151;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-background-light dark:bg-background-dark min-h-screen flex text-gray-900 dark:text-white overflow-hidden">
|
|
<aside class="w-64 flex-shrink-0 bg-white dark:bg-sidebar-dark border-r border-gray-200 dark:border-[#282e39] hidden md:flex flex-col h-screen sticky top-0">
|
|
<div class="p-6 flex items-center gap-3">
|
|
<div class="size-8 text-primary flex items-center justify-center bg-primary/10 rounded-lg">
|
|
<span class="material-symbols-outlined text-2xl">traffic</span>
|
|
</div>
|
|
<h1 class="text-xl font-bold tracking-tight">TrafficRules</h1>
|
|
</div>
|
|
<nav class="flex-1 px-4 space-y-1">
|
|
<a class="flex items-center gap-3 px-3 py-2.5 text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-white/5 rounded-lg transition-colors group" href="#">
|
|
<span class="material-symbols-outlined text-[22px]">web</span>
|
|
<span class="font-medium text-sm">랜딩 페이지</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-3 py-2.5 text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-white/5 rounded-lg transition-colors group" href="#">
|
|
<span class="material-symbols-outlined text-[22px]">bar_chart</span>
|
|
<span class="font-medium text-sm">통계 및 분석</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-3 py-2.5 bg-primary/10 text-primary rounded-lg transition-colors group" href="#">
|
|
<span class="material-symbols-outlined text-[22px]">rule</span>
|
|
<span class="font-medium text-sm">라우팅 규칙</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-3 py-2.5 text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-white/5 rounded-lg transition-colors group" href="#">
|
|
<span class="material-symbols-outlined text-[22px]">group</span>
|
|
<span class="font-medium text-sm">리드 관리</span>
|
|
</a>
|
|
</nav>
|
|
<div class="p-4 border-t border-gray-200 dark:border-[#282e39]">
|
|
<a class="flex items-center gap-3 px-3 py-2.5 text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-white/5 rounded-lg transition-colors" href="#">
|
|
<span class="material-symbols-outlined text-[22px]">settings</span>
|
|
<span class="font-medium text-sm">설정</span>
|
|
</a>
|
|
<div class="mt-4 flex items-center gap-3 px-3 py-2">
|
|
<div class="size-8 rounded-full bg-cover bg-center border border-gray-200 dark:border-gray-700" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuDY3-B2CEYbpeGjCh25jHS9zMbVYIHA_hev8C4G9rI32sb_q2Tul9d7Ko7Ut18mp17nHr45WAG8r1oIj8UkD5YyIwUOgH2lQJmRaX0WZGCMX001QNge0gUpNUjjGVWFjcXlQwy2f4MVGEHPj7eoHcFFcpAX2AZu-Cpn07LQKXixkLVasw70K8BVeYL-Q87_O6bU4c-SQpNmdmSqocR1S8_wWyPiiCW1OYp1KBBM0QlpFUbubiLMi44LqKCtmcpXbL3mbWSHyhXjW8TB");'></div>
|
|
<div class="flex-1 min-w-0">
|
|
<p class="text-xs font-bold truncate">운영자 계정</p>
|
|
<p class="text-[10px] text-gray-500 truncate">admin@example.com</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
<div class="flex-1 flex flex-col h-screen overflow-y-auto">
|
|
<header class="flex items-center justify-between px-8 py-4 bg-white/50 dark:bg-background-dark/50 backdrop-blur-md sticky top-0 z-30">
|
|
<div class="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
|
|
<span>설정</span>
|
|
<span class="material-symbols-outlined text-xs">chevron_right</span>
|
|
<span class="text-gray-900 dark:text-white font-medium">트래픽 라우팅 규칙</span>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<button class="p-2 text-gray-500 hover:text-primary transition-colors">
|
|
<span class="material-symbols-outlined">notifications</span>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
<main class="flex-1 py-8 px-8">
|
|
<div class="max-w-5xl mx-auto flex flex-col gap-8">
|
|
<div class="flex flex-col md:flex-row md:items-end justify-between gap-6">
|
|
<div class="flex flex-col gap-2">
|
|
<h1 class="text-3xl font-black tracking-tight text-gray-900 dark:text-white">트래픽 라우팅 규칙</h1>
|
|
<p class="text-gray-500 dark:text-[#9da6b9] text-base font-normal max-w-2xl">
|
|
유입되는 트래픽이 각 랜딩 페이지 버전으로 배분되는 우선순위와 규칙을 정의합니다.
|
|
규칙은 상단에서 하단 순서로 처리됩니다.
|
|
</p>
|
|
</div>
|
|
<button class="flex shrink-0 items-center justify-center gap-2 rounded-lg bg-primary hover:bg-blue-600 text-white px-5 py-2.5 text-sm font-bold shadow-lg shadow-primary/20 transition-all">
|
|
<span class="material-symbols-outlined text-[20px]">add</span>
|
|
<span>새 규칙 추가</span>
|
|
</button>
|
|
</div>
|
|
<div class="flex flex-col gap-4">
|
|
<div class="grid grid-cols-12 gap-4 px-4 pb-2 text-[11px] font-bold uppercase tracking-widest text-gray-400 dark:text-[#64748b] pl-16">
|
|
<div class="col-span-12 md:col-span-5">조건 (Conditions)</div>
|
|
<div class="col-span-6 md:col-span-4">대상 페이지 (Target Variant)</div>
|
|
<div class="col-span-6 md:col-span-3 text-right">상태 및 작업</div>
|
|
</div>
|
|
<div class="group relative flex flex-col md:grid md:grid-cols-12 gap-4 items-center bg-white dark:bg-card-dark border border-gray-200 dark:border-[#282e39] rounded-xl p-4 shadow-sm hover:shadow-md hover:border-primary/50 transition-all">
|
|
<div class="absolute left-0 top-0 bottom-0 w-12 flex flex-col items-center justify-center border-r border-gray-100 dark:border-[#282e39] bg-gray-50 dark:bg-[#161b22] rounded-l-xl cursor-grab active:cursor-grabbing">
|
|
<span class="text-xs font-bold text-gray-400 mb-1">1</span>
|
|
<span class="material-symbols-outlined text-gray-400 group-hover:text-primary">drag_indicator</span>
|
|
</div>
|
|
<div class="col-span-12 md:col-span-5 pl-10 md:pl-0 flex flex-col gap-2">
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-sm font-bold text-gray-900 dark:text-white">고가치 트래픽 유입</span>
|
|
</div>
|
|
<div class="flex flex-wrap gap-2">
|
|
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md text-[11px] font-bold bg-blue-50 text-blue-700 dark:bg-blue-500/10 dark:text-blue-400 border border-blue-100 dark:border-blue-500/20">
|
|
<span class="material-symbols-outlined text-[14px]">public</span> 유입 경로: Facebook Ads
|
|
</span>
|
|
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md text-[11px] font-bold bg-purple-50 text-purple-700 dark:bg-purple-500/10 dark:text-purple-400 border border-purple-100 dark:border-purple-500/20">
|
|
<span class="material-symbols-outlined text-[14px]">smartphone</span> 기기: 모바일
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-6 md:col-span-4 pl-10 md:pl-0 flex items-center gap-4">
|
|
<span class="material-symbols-outlined text-gray-400">arrow_forward</span>
|
|
<div class="flex items-center gap-3">
|
|
<div class="size-9 rounded-lg bg-primary/20 text-primary flex items-center justify-center font-black text-sm">B</div>
|
|
<div class="flex flex-col">
|
|
<span class="text-sm font-bold text-gray-900 dark:text-white">페이지 B</span>
|
|
<span class="text-[11px] text-gray-500 dark:text-gray-400">바이럴 캠페인 V2</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-6 md:col-span-3 flex items-center justify-end gap-4">
|
|
<label class="relative inline-flex items-center cursor-pointer">
|
|
<input checked="" class="sr-only peer" type="checkbox" value=""/>
|
|
<div class="w-10 h-5 bg-gray-200 peer-focus:outline-none rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-gray-600 peer-checked:bg-primary"></div>
|
|
</label>
|
|
<button class="text-gray-400 hover:text-white p-1 rounded-lg hover:bg-gray-100 dark:hover:bg-[#282e39] transition-colors">
|
|
<span class="material-symbols-outlined">more_vert</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="group relative flex flex-col md:grid md:grid-cols-12 gap-4 items-center bg-white dark:bg-card-dark border border-gray-200 dark:border-[#282e39] rounded-xl p-4 shadow-sm hover:shadow-md hover:border-primary/50 transition-all">
|
|
<div class="absolute left-0 top-0 bottom-0 w-12 flex flex-col items-center justify-center border-r border-gray-100 dark:border-[#282e39] bg-gray-50 dark:bg-[#161b22] rounded-l-xl cursor-grab active:cursor-grabbing">
|
|
<span class="text-xs font-bold text-gray-400 mb-1">2</span>
|
|
<span class="material-symbols-outlined text-gray-400 group-hover:text-primary">drag_indicator</span>
|
|
</div>
|
|
<div class="col-span-12 md:col-span-5 pl-10 md:pl-0 flex flex-col gap-2">
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-sm font-bold text-gray-900 dark:text-white">영업 시간 B2B 대응</span>
|
|
</div>
|
|
<div class="flex flex-wrap gap-2">
|
|
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md text-[11px] font-bold bg-orange-50 text-orange-700 dark:bg-orange-500/10 dark:text-orange-400 border border-orange-100 dark:border-orange-500/20">
|
|
<span class="material-symbols-outlined text-[14px]">schedule</span> 09:00 - 18:00
|
|
</span>
|
|
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md text-[11px] font-bold bg-emerald-50 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-400 border border-emerald-100 dark:border-emerald-500/20">
|
|
<span class="material-symbols-outlined text-[14px]">calendar_today</span> 평일
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-6 md:col-span-4 pl-10 md:pl-0 flex items-center gap-4">
|
|
<span class="material-symbols-outlined text-gray-400">arrow_forward</span>
|
|
<div class="flex items-center gap-3">
|
|
<div class="size-9 rounded-lg bg-primary/20 text-primary flex items-center justify-center font-black text-sm">C</div>
|
|
<div class="flex flex-col">
|
|
<span class="text-sm font-bold text-gray-900 dark:text-white">페이지 C</span>
|
|
<span class="text-[11px] text-gray-500 dark:text-gray-400">엔터프라이즈 전용</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-6 md:col-span-3 flex items-center justify-end gap-4">
|
|
<label class="relative inline-flex items-center cursor-pointer">
|
|
<input checked="" class="sr-only peer" type="checkbox" value=""/>
|
|
<div class="w-10 h-5 bg-gray-200 peer-focus:outline-none rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-gray-600 peer-checked:bg-primary"></div>
|
|
</label>
|
|
<button class="text-gray-400 hover:text-white p-1 rounded-lg hover:bg-gray-100 dark:hover:bg-[#282e39] transition-colors">
|
|
<span class="material-symbols-outlined">more_vert</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="group relative flex flex-col md:grid md:grid-cols-12 gap-4 items-center bg-gray-50/50 dark:bg-[#161b22] border border-gray-200 dark:border-[#282e39] rounded-xl p-4 opacity-70 hover:opacity-100 transition-all">
|
|
<div class="absolute left-0 top-0 bottom-0 w-12 flex flex-col items-center justify-center border-r border-gray-100 dark:border-[#282e39] bg-transparent rounded-l-xl cursor-grab active:cursor-grabbing">
|
|
<span class="text-xs font-bold text-gray-500 mb-1">3</span>
|
|
<span class="material-symbols-outlined text-gray-500">drag_indicator</span>
|
|
</div>
|
|
<div class="col-span-12 md:col-span-5 pl-10 md:pl-0 flex flex-col gap-2">
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-sm font-bold text-gray-700 dark:text-gray-400">주말 특별 프로모션</span>
|
|
<span class="px-1.5 py-0.5 rounded text-[9px] font-black bg-gray-200 text-gray-600 dark:bg-gray-700 dark:text-gray-400 uppercase">비활성화</span>
|
|
</div>
|
|
<div class="flex flex-wrap gap-2">
|
|
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md text-[11px] font-bold bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-500 border border-gray-200 dark:border-gray-700">
|
|
<span class="material-symbols-outlined text-[14px]">calendar_month</span> 주말
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-6 md:col-span-4 pl-10 md:pl-0 flex items-center gap-4 opacity-50 grayscale">
|
|
<span class="material-symbols-outlined text-gray-400">arrow_forward</span>
|
|
<div class="flex items-center gap-3">
|
|
<div class="size-9 rounded-lg bg-gray-200 dark:bg-gray-700 text-gray-500 dark:text-gray-400 flex items-center justify-center font-black text-sm">B</div>
|
|
<div class="flex flex-col">
|
|
<span class="text-sm font-bold text-gray-700 dark:text-gray-400">페이지 B</span>
|
|
<span class="text-[11px] text-gray-500 dark:text-gray-500">바이럴 캠페인 V2</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-6 md:col-span-3 flex items-center justify-end gap-4">
|
|
<label class="relative inline-flex items-center cursor-pointer">
|
|
<input class="sr-only peer" type="checkbox" value=""/>
|
|
<div class="w-10 h-5 bg-gray-200 peer-focus:outline-none rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-gray-600 peer-checked:bg-primary"></div>
|
|
</label>
|
|
<button class="text-gray-400 hover:text-white p-1 rounded-lg hover:bg-gray-100 dark:hover:bg-[#282e39] transition-colors">
|
|
<span class="material-symbols-outlined">more_vert</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="relative mt-2 flex flex-col md:grid md:grid-cols-12 gap-4 items-center bg-gray-100/30 dark:bg-sidebar-dark/50 border border-dashed border-gray-300 dark:border-[#282e39] rounded-xl p-4">
|
|
<div class="absolute left-0 top-0 bottom-0 w-12 flex flex-col items-center justify-center border-r border-transparent">
|
|
<span class="material-symbols-outlined text-gray-400 dark:text-gray-600">lock</span>
|
|
</div>
|
|
<div class="col-span-12 md:col-span-5 pl-10 md:pl-0 flex flex-col gap-1">
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-sm font-bold text-gray-400 dark:text-gray-500 italic">기본 대체 규칙 (Fallback)</span>
|
|
</div>
|
|
<div class="text-[11px] text-gray-400 dark:text-gray-500">
|
|
매칭되는 상위 규칙이 없을 때 적용됩니다.
|
|
</div>
|
|
</div>
|
|
<div class="col-span-6 md:col-span-4 pl-10 md:pl-0 flex items-center gap-4">
|
|
<span class="material-symbols-outlined text-gray-400">arrow_forward</span>
|
|
<div class="flex items-center gap-3">
|
|
<div class="size-9 rounded-lg bg-gray-200 dark:bg-[#282e39] text-gray-500 dark:text-gray-400 flex items-center justify-center font-black text-sm">A</div>
|
|
<div class="flex flex-col">
|
|
<span class="text-sm font-bold text-gray-600 dark:text-gray-400">페이지 A</span>
|
|
<span class="text-[11px] text-gray-400 dark:text-gray-500">오리지널 / 대조군</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-6 md:col-span-3 flex items-center justify-end gap-4 opacity-50">
|
|
<div class="text-[11px] font-bold text-gray-400 dark:text-gray-600 uppercase">항상 활성</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
<div class="fixed bottom-8 left-1/2 md:left-[calc(50%+128px)] transform -translate-x-1/2 z-50">
|
|
<div class="flex items-center gap-6 bg-white dark:bg-card-dark border border-gray-200 dark:border-[#282e39] rounded-full shadow-2xl px-6 py-3.5 ring-1 ring-black/5 dark:ring-white/5">
|
|
<div class="flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-primary text-[20px]">info</span>
|
|
<span class="text-sm text-gray-700 dark:text-gray-300 font-bold whitespace-nowrap">저장되지 않은 변경사항이 있습니다.</span>
|
|
</div>
|
|
<div class="h-4 w-px bg-gray-300 dark:bg-gray-600"></div>
|
|
<div class="flex items-center gap-3">
|
|
<button class="text-sm text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white font-bold transition-colors">초기화</button>
|
|
<button class="text-sm bg-primary hover:bg-blue-600 text-white px-5 py-2 rounded-full font-black transition-colors shadow-lg shadow-primary/25">순서 저장</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</body></html> |