웹페이지 제작 소개 페이지 생성 & 사주 분석 고도화

app/services/website/samples/dashboard/page.tsx

@@ -0,0 +1,339 @@
+'use client';
+
+import Link from 'next/link';
+import { useState } from 'react';
+
+export default function DashboardSample() {
+  const [activeMenu, setActiveMenu] = useState('overview');
+
+  const kpis = [
+    { label: '월 활성 사용자', value: '124,832', change: '+12.4%', up: true, icon: '👤', color: '#3b82f6' },
+    { label: '월 매출', value: '₩284M', change: '+8.7%', up: true, icon: '💰', color: '#10b981' },
+    { label: '전환율', value: '3.62%', change: '-0.3%', up: false, icon: '📈', color: '#f59e0b' },
+    { label: '고객 만족도', value: '4.8 / 5', change: '+0.2', up: true, icon: '⭐', color: '#8b5cf6' },
+  ];
+
+  const chartData = [
+    { month: 'Jan', value: 65 },
+    { month: 'Feb', value: 78 },
+    { month: 'Mar', value: 72 },
+    { month: 'Apr', value: 89 },
+    { month: 'May', value: 95 },
+    { month: 'Jun', value: 82 },
+    { month: 'Jul', value: 110 },
+    { month: 'Aug', value: 128 },
+  ];
+
+  const maxVal = Math.max(...chartData.map((d) => d.value));
+
+  const activities = [
+    { user: 'lee@company.com', action: '프리미엄 플랜 구독', time: '2분 전', status: 'success' },
+    { user: 'park@startup.io', action: 'API 한도 초과 경고', time: '14분 전', status: 'warning' },
+    { user: 'kim@corp.kr', action: '팀 멤버 5명 초대', time: '31분 전', status: 'info' },
+    { user: 'choi@brand.com', action: '결제 실패 (카드 만료)', time: '1시간 전', status: 'error' },
+    { user: 'jung@agency.co', action: '새 워크스페이스 생성', time: '2시간 전', status: 'success' },
+  ];
+
+  const menus = [
+    { id: 'overview', icon: '⊞', label: 'Overview' },
+    { id: 'analytics', icon: '◈', label: 'Analytics' },
+    { id: 'users', icon: '◉', label: 'Users' },
+    { id: 'revenue', icon: '◆', label: 'Revenue' },
+    { id: 'reports', icon: '▣', label: 'Reports' },
+    { id: 'settings', icon: '◎', label: 'Settings' },
+  ];
+
+  const statusColor = { success: '#10b981', warning: '#f59e0b', error: '#ef4444', info: '#3b82f6' };
+
+  return (
+    <div style={{ background: '#0a0f1e', minHeight: '100vh', color: 'white', fontFamily: 'system-ui, sans-serif' }}>
+      <style>{`
+        @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&family=DM+Mono:wght@400;500&display=swap');
+        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
+        @keyframes barGrow { from { height: 0; } to { height: var(--h); } }
+        .dash-menu-item:hover { background: rgba(255,255,255,0.05) !important; }
+        .dash-menu-item { transition: background 0.15s; }
+        .dash-kpi:hover { border-color: rgba(255,255,255,0.12) !important; transform: translateY(-2px); }
+        .dash-kpi { transition: border-color 0.2s, transform 0.2s; }
+        .dash-row:hover { background: rgba(255,255,255,0.03) !important; }
+        .dash-row { transition: background 0.15s; }
+      `}</style>
+
+      {/* Back Banner */}
+      <div style={{
+        background: 'linear-gradient(135deg, #1e1b4b, #312e81)',
+        padding: '10px 24px', display: 'flex', alignItems: 'center', gap: 12,
+        position: 'relative', zIndex: 200,
+      }}>
+        <Link href="/services/website" style={{
+          color: '#a5b4fc', fontSize: 13, textDecoration: 'none',
+          fontFamily: 'DM Sans, sans-serif',
+        }}>
+          ← 홈페이지 제작 서비스로 돌아가기
+        </Link>
+        <span style={{ color: '#4c1d95', fontSize: 13 }}>|</span>
+        <span style={{ color: '#38bdf8', fontSize: 12, fontFamily: 'DM Mono, monospace', fontWeight: 500 }}>
+          SAMPLE · 관리자 대시보드
+        </span>
+      </div>
+
+      <div style={{ display: 'flex', height: 'calc(100vh - 40px)' }}>
+        {/* Sidebar */}
+        <aside style={{
+          width: 220, background: '#060b18',
+          borderRight: '1px solid rgba(255,255,255,0.05)',
+          display: 'flex', flexDirection: 'column', flexShrink: 0,
+        }}>
+          {/* Logo */}
+          <div style={{ padding: '20px 20px 16px', borderBottom: '1px solid rgba(255,255,255,0.05)' }}>
+            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+              <div style={{
+                width: 32, height: 32, borderRadius: 8,
+                background: 'linear-gradient(135deg, #3b82f6, #06b6d4)',
+                display: 'flex', alignItems: 'center', justifyContent: 'center',
+                fontSize: 14, fontWeight: 700, fontFamily: 'DM Mono, monospace',
+              }}>DF</div>
+              <div>
+                <div style={{ fontSize: 14, fontWeight: 700, color: 'white', fontFamily: 'DM Sans, sans-serif' }}>DataFlow</div>
+                <div style={{ fontSize: 10, color: '#334155', fontFamily: 'DM Mono, monospace' }}>v2.4.1 · PRO</div>
+              </div>
+            </div>
+          </div>
+
+          {/* Nav */}
+          <nav style={{ flex: 1, padding: '12px 10px', overflowY: 'auto' }}>
+            <div style={{ fontSize: 9, color: '#1e3a5f', fontFamily: 'DM Mono, monospace', letterSpacing: '0.15em', padding: '8px 10px 4px', textTransform: 'uppercase' }}>
+              MAIN
+            </div>
+            {menus.map((m) => (
+              <button
+                key={m.id}
+                className="dash-menu-item"
+                onClick={() => setActiveMenu(m.id)}
+                style={{
+                  width: '100%', textAlign: 'left',
+                  padding: '9px 12px', borderRadius: 8, border: 'none', cursor: 'pointer',
+                  display: 'flex', alignItems: 'center', gap: 10, marginBottom: 2,
+                  background: activeMenu === m.id ? 'rgba(59,130,246,0.15)' : 'transparent',
+                  color: activeMenu === m.id ? '#60a5fa' : '#475569',
+                }}
+              >
+                <span style={{ fontSize: 14 }}>{m.icon}</span>
+                <span style={{ fontSize: 13, fontWeight: activeMenu === m.id ? 600 : 400, fontFamily: 'DM Sans, sans-serif' }}>
+                  {m.label}
+                </span>
+                {activeMenu === m.id && (
+                  <div style={{ marginLeft: 'auto', width: 4, height: 4, borderRadius: '50%', background: '#3b82f6' }} />
+                )}
+              </button>
+            ))}
+          </nav>
+
+          {/* User */}
+          <div style={{ padding: '12px 14px', borderTop: '1px solid rgba(255,255,255,0.05)' }}>
+            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+              <div style={{
+                width: 32, height: 32, borderRadius: '50%',
+                background: 'linear-gradient(135deg, #6366f1, #8b5cf6)',
+                display: 'flex', alignItems: 'center', justifyContent: 'center',
+                fontSize: 13, fontWeight: 700,
+              }}>A</div>
+              <div style={{ flex: 1, minWidth: 0 }}>
+                <div style={{ fontSize: 12, fontWeight: 600, color: '#e2e8f0', fontFamily: 'DM Sans, sans-serif', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+                  Admin
+                </div>
+                <div style={{ fontSize: 10, color: '#334155', fontFamily: 'DM Mono, monospace' }}>Super Admin</div>
+              </div>
+              <div style={{ width: 6, height: 6, borderRadius: '50%', background: '#10b981', flexShrink: 0 }} />
+            </div>
+          </div>
+        </aside>
+
+        {/* Main */}
+        <main style={{ flex: 1, overflowY: 'auto', padding: '24px 28px', animation: 'fadeIn 0.4s ease' }}>
+          {/* Header */}
+          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 24 }}>
+            <div>
+              <h1 style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 22, fontWeight: 700, color: 'white', marginBottom: 2 }}>
+                Overview
+              </h1>
+              <div style={{ fontSize: 12, color: '#334155', fontFamily: 'DM Mono, monospace' }}>
+                2024.08.14 · 오전 10:32 업데이트
+              </div>
+            </div>
+            <div style={{ display: 'flex', gap: 10 }}>
+              <select style={{
+                background: '#0f172a', border: '1px solid rgba(255,255,255,0.07)',
+                color: '#94a3b8', padding: '8px 14px', borderRadius: 8, fontSize: 12,
+                fontFamily: 'DM Sans, sans-serif', cursor: 'pointer',
+              }}>
+                <option>최근 30일</option>
+              </select>
+              <button style={{
+                background: '#3b82f6', border: 'none', color: 'white',
+                padding: '8px 18px', borderRadius: 8, fontSize: 12, fontWeight: 600,
+                cursor: 'pointer', fontFamily: 'DM Sans, sans-serif',
+              }}>
+                리포트 내보내기
+              </button>
+            </div>
+          </div>
+
+          {/* KPI Cards */}
+          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: 16, marginBottom: 24 }}>
+            {kpis.map((kpi) => (
+              <div key={kpi.label} className="dash-kpi" style={{
+                padding: '18px 20px', borderRadius: 14,
+                background: '#0f172a', border: '1px solid rgba(255,255,255,0.06)',
+              }}>
+                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 12 }}>
+                  <div style={{ fontSize: 11, color: '#475569', fontFamily: 'DM Sans, sans-serif', fontWeight: 500 }}>{kpi.label}</div>
+                  <span style={{ fontSize: 18 }}>{kpi.icon}</span>
+                </div>
+                <div style={{ fontSize: 26, fontWeight: 700, color: 'white', fontFamily: 'DM Sans, sans-serif', marginBottom: 6 }}>
+                  {kpi.value}
+                </div>
+                <div style={{
+                  display: 'inline-flex', alignItems: 'center', gap: 4,
+                  background: kpi.up ? 'rgba(16,185,129,0.12)' : 'rgba(239,68,68,0.12)',
+                  borderRadius: 6, padding: '2px 8px',
+                  fontSize: 11, fontWeight: 700,
+                  color: kpi.up ? '#10b981' : '#ef4444',
+                  fontFamily: 'DM Mono, monospace',
+                }}>
+                  {kpi.up ? '↑' : '↓'} {kpi.change}
+                </div>
+              </div>
+            ))}
+          </div>
+
+          {/* Chart + Progress */}
+          <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 16, marginBottom: 24 }}>
+            {/* Bar Chart */}
+            <div style={{
+              padding: '22px 24px', borderRadius: 14,
+              background: '#0f172a', border: '1px solid rgba(255,255,255,0.06)',
+            }}>
+              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 24 }}>
+                <div style={{ fontSize: 14, fontWeight: 700, color: 'white', fontFamily: 'DM Sans, sans-serif' }}>
+                  월별 매출 추이
+                </div>
+                <div style={{ display: 'flex', gap: 8 }}>
+                  {['1M', '3M', '6M', '1Y'].map((p) => (
+                    <button key={p} style={{
+                      background: p === '6M' ? '#1e3a5f' : 'transparent',
+                      border: 'none', color: p === '6M' ? '#60a5fa' : '#334155',
+                      padding: '3px 8px', borderRadius: 6, fontSize: 11, cursor: 'pointer',
+                      fontFamily: 'DM Mono, monospace',
+                    }}>{p}</button>
+                  ))}
+                </div>
+              </div>
+              <div style={{ display: 'flex', alignItems: 'flex-end', gap: 12, height: 140 }}>
+                {chartData.map((d, i) => (
+                  <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6, height: '100%', justifyContent: 'flex-end' }}>
+                    <div style={{
+                      width: '100%', borderRadius: '4px 4px 0 0',
+                      background: i === chartData.length - 1
+                        ? 'linear-gradient(180deg, #60a5fa, #3b82f6)'
+                        : 'rgba(59,130,246,0.25)',
+                      height: `${(d.value / maxVal) * 100}%`,
+                      transition: 'height 0.6s ease',
+                    }} />
+                    <div style={{ fontSize: 9, color: '#334155', fontFamily: 'DM Mono, monospace' }}>{d.month}</div>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            {/* Progress */}
+            <div style={{
+              padding: '22px 24px', borderRadius: 14,
+              background: '#0f172a', border: '1px solid rgba(255,255,255,0.06)',
+            }}>
+              <div style={{ fontSize: 14, fontWeight: 700, color: 'white', fontFamily: 'DM Sans, sans-serif', marginBottom: 20 }}>
+                채널별 전환율
+              </div>
+              {[
+                { label: 'Organic Search', val: 78, color: '#3b82f6' },
+                { label: 'Direct', val: 55, color: '#10b981' },
+                { label: 'Social Media', val: 42, color: '#a855f7' },
+                { label: 'Email', val: 34, color: '#f59e0b' },
+                { label: 'Referral', val: 20, color: '#ec4899' },
+              ].map((p) => (
+                <div key={p.label} style={{ marginBottom: 14 }}>
+                  <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 5 }}>
+                    <span style={{ fontSize: 12, color: '#94a3b8', fontFamily: 'DM Sans, sans-serif' }}>{p.label}</span>
+                    <span style={{ fontSize: 11, color: p.color, fontFamily: 'DM Mono, monospace', fontWeight: 500 }}>{p.val}%</span>
+                  </div>
+                  <div style={{ height: 4, background: '#1e293b', borderRadius: 2, overflow: 'hidden' }}>
+                    <div style={{
+                      height: '100%', borderRadius: 2, background: p.color,
+                      width: `${p.val}%`, opacity: 0.8,
+                    }} />
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Activity Table */}
+          <div style={{
+            borderRadius: 14, background: '#0f172a',
+            border: '1px solid rgba(255,255,255,0.06)', overflow: 'hidden',
+          }}>
+            <div style={{
+              padding: '16px 20px', borderBottom: '1px solid rgba(255,255,255,0.05)',
+              display: 'flex', justifyContent: 'space-between', alignItems: 'center',
+            }}>
+              <div style={{ fontSize: 14, fontWeight: 700, color: 'white', fontFamily: 'DM Sans, sans-serif' }}>
+                최근 활동
+              </div>
+              <button style={{
+                background: 'none', border: '1px solid rgba(255,255,255,0.08)',
+                color: '#475569', padding: '5px 12px', borderRadius: 6,
+                fontSize: 11, cursor: 'pointer', fontFamily: 'DM Sans, sans-serif',
+              }}>전체 보기</button>
+            </div>
+            <table style={{ width: '100%', borderCollapse: 'collapse' }}>
+              <thead>
+                <tr style={{ borderBottom: '1px solid rgba(255,255,255,0.04)' }}>
+                  {['사용자', '활동', '시간', '상태'].map((h) => (
+                    <th key={h} style={{
+                      padding: '10px 20px', textAlign: 'left',
+                      fontSize: 10, color: '#334155', fontFamily: 'DM Mono, monospace',
+                      letterSpacing: '0.1em', textTransform: 'uppercase', fontWeight: 500,
+                    }}>{h}</th>
+                  ))}
+                </tr>
+              </thead>
+              <tbody>
+                {activities.map((a, i) => (
+                  <tr key={i} className="dash-row" style={{ borderBottom: '1px solid rgba(255,255,255,0.03)' }}>
+                    <td style={{ padding: '12px 20px', fontFamily: 'DM Mono, monospace', fontSize: 12, color: '#60a5fa' }}>
+                      {a.user}
+                    </td>
+                    <td style={{ padding: '12px 20px', fontFamily: 'DM Sans, sans-serif', fontSize: 13, color: '#94a3b8' }}>
+                      {a.action}
+                    </td>
+                    <td style={{ padding: '12px 20px', fontFamily: 'DM Mono, monospace', fontSize: 11, color: '#334155' }}>
+                      {a.time}
+                    </td>
+                    <td style={{ padding: '12px 20px' }}>
+                      <span style={{
+                        display: 'inline-block',
+                        width: 6, height: 6, borderRadius: '50%',
+                        background: statusColor[a.status as keyof typeof statusColor],
+                        boxShadow: `0 0 6px ${statusColor[a.status as keyof typeof statusColor]}`,
+                      }} />
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </main>
+      </div>
+    </div>
+  );
+}