gahusb/jaengseung-made
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

hide: 로또·주식 서비스 비공개 처리 (토스페이먼츠 정책)

Browse Source 
- Sidebar navItems에서 로또·주식 제거
- 홈 PROOF_SERVICES·SUBSCRIPTION_SERVICES에서 제거
- /services/lotto, /services/stock → 홈으로 redirect
- 원본 페이지 코드는 git 기록에 보존

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
gahusb
2026-03-27 09:30:52 +09:00
parent d854ac2057
commit c0ff36b69d
5 changed files with 9 additions and 711 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
app/components/Sidebar.tsx
View File

@@ -48,27 +48,6 @@ const navItems = [
label: '프롬프트 엔지니어링',
desc: 'AI 최적화',
},
{
href: '/services/stock',
icon: (
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z" />
</svg>
),
label: '주식 자동 매매',
desc: '텔레그램 연동',
},
{
href: '/services/lotto',
icon: (
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
</svg>
),
label: '로또 번호 추천',
desc: '빅데이터 분석',
badge: 'HOT',
},
{
href: '/saju',
icon: (

44
app/page.tsx
View File

@@ -78,24 +78,6 @@ const TRUST_POINTS = [
];
const PROOF_SERVICES = [
{
name: '로또 번호 추천',
badge: '실운영 중',
desc: 'NAS 서버에서 24/7 운영. 1,100+회차 데이터 분석 엔진.',
href: '/services/lotto',
color: 'from-amber-500/20 to-amber-600/5',
dot: 'bg-amber-400',
tag: '구독형 · 월 900원~',
},
{
name: '주식 자동 매매',
badge: '실운영 중',
desc: 'RSI·MACD 기반 알고리즘 + 텔레그램 알림 연동.',
href: '/services/stock',
color: 'from-emerald-500/20 to-emerald-600/5',
dot: 'bg-emerald-400',
tag: '설치형 · 49,000원~',
},
{
name: '쟁승메이드 (이 사이트)',
badge: '지금 보시는 중',
@@ -134,32 +116,6 @@ const SUBSCRIPTION_SERVICES = [
badge: 'SALE',
badgeColor: 'bg-red-500',
},
{
id: 'stock',
href: '/services/stock',
color: '#059669',
bg: '#d1fae5',
border: '#a7f3d0',
label: 'ALGO TRADING',
title: '주식 자동 매매',
price: '설치 49,000원~',
type: '설치형',
badge: null,
badgeColor: '',
},
{
id: 'lotto',
href: '/services/lotto',
color: '#d97706',
bg: '#fef3c7',
border: '#fde68a',
label: 'LOTTO ANALYTICS',
title: '로또 번호 추천',
price: '월 900원~',
type: '구독형',
badge: null,
badgeColor: '',
},
];
const TECH_STACK = [

374
app/services/lotto/page.tsx
View File

@@ -1,374 +1,6 @@
'use client';
import { useState } from 'react';
import Link from 'next/link';
import ContactModal from '../../components/ContactModal';
import PaymentButton from '../../components/PaymentButton';
const CHECKLIST = [
'구독 플랜 선택 (골드 / 플래티넘 / 다이아)',
'번호 수신 방법 (이메일 / 텔레그램 중 선택)',
'로또 구매 후 직접 확인 필요 (자동 구매 아님)',
'당첨 보장 없음 — 과거 데이터 통계 기반 번호 선택 도구',
'구독 취소는 이메일로 언제든 가능',
];
const plans = [
{
name: '골드 플랜',
badge: '🥇',
price: '900원',
period: '/ 월',
desc: '매주 1회 번호 추천',
features: [
'매주 월요일 5개 번호 조합 제공',
'출현 빈도 통계 분석',
'이메일 발송',
],
highlight: false,
productId: 'lotto_gold',
},
{
name: '플래티넘 플랜',
badge: '💎',
price: '2,900원',
period: '/ 월',
desc: '매주 3회 + 상세 분석 보고서',
features: [
'매주 3회 번호 조합 제공',
'핫넘버 / 콜드넘버 분석',
'연속 번호 / 끝수 패턴 분석',
'번호 조합 백테스트 (과거 회차 검증)',
'이메일 + 텔레그램 알림',
],
highlight: true,
productId: 'lotto_platinum',
},
{
name: '다이아 플랜',
badge: '👑',
price: '9,900원',
period: '/ 월',
desc: '횟수 무제한 + 전체 기능',
features: [
'플래티넘 플랜 전체 기능',
'번호 생성 횟수 무제한',
'연간 번호 출현 통계 리포트',
'우선 고객 지원',
],
highlight: false,
productId: 'lotto_diamond',
},
];
const faqs = [
{
q: '로또 번호 추천이 실제로 효과가 있나요?',
a: '로또는 완전 무작위 추첨으로, 당첨을 보장하거나 확률을 높이는 서비스가 아닙니다. 다만 1,100+회차 과거 데이터의 번호 출현 빈도를 통계로 보여주고, 그 통계를 참고해 번호를 선택하고 싶은 분들을 위한 취미형 분석 도구입니다.',
},
{
q: '번호는 어떻게 받을 수 있나요?',
a: '결제 완료 후 이메일로 매주 정해진 요일에 발송됩니다. 프리미엄 플랜은 텔레그램 알림도 함께 제공됩니다.',
},
{
q: '구독 취소는 어떻게 하나요?',
a: '이메일(bgg8988@gmail.com)로 취소 요청 시 다음 결제일 전에 해지 처리해드립니다. 위약금은 없습니다.',
},
];
const analysisFeatures = [
{ label: '출현 빈도 분석', desc: '1회차~최신 회차까지 모든 번호의 출현 횟수와 비율 계산', stat: '1,100+', statLabel: '회차 데이터', accent: 'border-amber-300 bg-amber-50', statColor: 'text-amber-600' },
{ label: '핫/콜드 넘버', desc: '최근 20회차 기준 자주 나온 번호와 오래 안 나온 번호 구분', stat: '45', statLabel: '개 번호 분석', accent: 'border-orange-300 bg-orange-50', statColor: 'text-orange-600' },
{ label: '연속 번호 통계', desc: '역대 당첨 번호 중 연속 번호가 포함된 회차 비율 통계 제공', stat: '98%', statLabel: '연속 번호 포함 회차', accent: 'border-yellow-300 bg-yellow-50', statColor: 'text-yellow-600' },
{ label: '끝수 통계', desc: '끝자리 0~9 번호들의 출현 비율을 분석하여 분산 조합', stat: '10', statLabel: '끝수 구간', accent: 'border-amber-300 bg-amber-50', statColor: 'text-amber-600' },
{ label: '번호 조합 백테스트', desc: '선택한 번호로 과거 회차 대조 검증 — 몇 회나 일치했는지 확인', stat: '500+', statLabel: '회차 백테스트', accent: 'border-orange-300 bg-orange-50', statColor: 'text-orange-600' },
{ label: '정기 자동 발송', desc: '매주 정해진 요일에 이메일 및 텔레그램으로 번호 자동 발송', stat: '매주', statLabel: '자동 배송', accent: 'border-yellow-300 bg-yellow-50', statColor: 'text-yellow-600' },
];
import { redirect } from 'next/navigation';
// 토스페이먼츠 심사 정책상 판매 불가 상품으로 분류 — 비공개 처리
export default function LottoPage() {
const [modalOpen, setModalOpen] = useState(false);
const [modalService, setModalService] = useState('로또 번호 추천');
const openModal = (service: string) => {
setModalService(service);
setModalOpen(true);
};
return (
<div className="min-h-full bg-[#f0f5ff]">
<ContactModal
isOpen={modalOpen}
onClose={() => setModalOpen(false)}
service={modalService}
checklist={CHECKLIST}
accentColor="text-amber-400"
headerFrom="#1a0a00"
headerTo="#3d1a00"
/>
{/* ─── Hero ─── */}
<div className="relative overflow-hidden bg-gradient-to-br from-[#1a0a00] via-[#3d1a00] to-[#1a0a00] px-6 py-14 lg:px-12">
<div className="absolute inset-0 overflow-hidden pointer-events-none">
{[
{ n: '07', x: '8%', y: '15%', size: 'w-12 h-12', opacity: 'opacity-10' },
{ n: '23', x: '88%', y: '10%', size: 'w-16 h-16', opacity: 'opacity-10' },
{ n: '34', x: '92%', y: '60%', size: 'w-10 h-10', opacity: 'opacity-8' },
{ n: '12', x: '5%', y: '70%', size: 'w-14 h-14', opacity: 'opacity-10' },
{ n: '41', x: '78%', y: '85%', size: 'w-12 h-12', opacity: 'opacity-8' },
].map((ball) => (
<div
key={ball.n}
className={`absolute ${ball.size} ${ball.opacity} rounded-full border-2 border-amber-400 flex items-center justify-center`}
style={{ left: ball.x, top: ball.y }}
>
<span className="text-amber-300 font-bold text-sm">{ball.n}</span>
</div>
))}
</div>
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-96 h-96 rounded-full bg-amber-500/8 blur-3xl" />
<div className="relative max-w-3xl mx-auto text-center">
<Link href="/" className="inline-flex items-center gap-1.5 text-amber-300/60 hover:text-amber-300 text-sm mb-6 transition">
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
</svg>
홈으로
</Link>
<div className="w-16 h-16 mx-auto rounded-2xl bg-amber-400/20 border border-amber-400/30 flex items-center justify-center mb-5 shadow-lg shadow-amber-900/30">
<svg className="w-9 h-9 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
</svg>
</div>
<p className="text-amber-400/70 text-xs font-bold uppercase tracking-widest mb-2">LOTTO STATISTICS · 과거 회차 데이터 분석 도구</p>
<h1 className="text-4xl md:text-5xl font-extrabold text-white mb-4 tracking-tight leading-tight">
로또 번호<br />
<span className="text-transparent bg-clip-text bg-gradient-to-r from-amber-400 to-orange-400">통계 기반 선택</span>
</h1>
<p className="text-amber-100/60 text-base md:text-lg leading-relaxed max-w-xl mx-auto mb-6">
1회차부터 현재까지 1,100+회차 데이터를 분석하여 출현 빈도, 핫/콜드 번호,
연속 번호 통계를 보여주는 취미형 분석 도구입니다. 당첨 보장 서비스가 아닙니다.
</p>
<div className="flex items-center justify-center gap-2.5 mb-6">
{[7, 14, 23, 35, 41, 44].map((n, i) => (
<div key={n} className="w-11 h-11 rounded-full flex items-center justify-center font-extrabold text-sm shadow-lg border"
style={{ background: i < 2 ? '#fbbf24' : i < 4 ? '#3b82f6' : '#ef4444', borderColor: 'rgba(255,255,255,0.15)', color: '#fff' }}>
{n}
</div>
))}
</div>
<div className="inline-flex items-center gap-2 bg-amber-400/10 border border-amber-400/20 text-amber-300 text-xs font-medium px-4 py-2 rounded-full">
<span className="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse" />
NAS 서버에서 실제 운영 중
</div>
</div>
</div>
{/* ─── 구독자 전용 번호 추천 CTA ─── */}
<div className="px-6 pt-10 lg:px-12">
<div className="max-w-5xl mx-auto">
<div className="relative overflow-hidden rounded-2xl border border-amber-400/30 bg-gradient-to-r from-amber-950/60 via-orange-950/40 to-amber-950/60 p-6 flex flex-col sm:flex-row items-center gap-5">
{/* glow */}
<div className="absolute inset-0 pointer-events-none">
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-64 h-24 bg-amber-400/10 blur-3xl rounded-full" />
</div>
<div className="relative flex items-center gap-4 flex-1">
<div className="w-14 h-14 rounded-2xl bg-amber-400/15 border border-amber-400/30 flex items-center justify-center flex-shrink-0">
<svg className="w-8 h-8 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
</svg>
</div>
<div>
<div className="flex items-center gap-2 mb-0.5">
<span className="text-amber-400 font-extrabold text-sm">구독자 전용</span>
<span className="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse" />
</div>
<h3 className="text-white font-extrabold text-base leading-tight">
지금 바로 번호를 추천받으세요
</h3>
<p className="text-amber-200/45 text-xs mt-0.5">
몬테카를로 시뮬레이션으로 최대 5조합 즉시 생성
</p>
</div>
</div>
<Link
href="/services/lotto/recommend"
className="relative flex-shrink-0 inline-flex items-center gap-2 bg-amber-400 hover:bg-amber-300 text-[#78350f] px-6 py-3 rounded-xl font-extrabold text-sm transition-all shadow-lg shadow-amber-900/40 whitespace-nowrap"
>
번호 추천받기 →
</Link>
</div>
</div>
</div>
{/* ─── 분석 기능 ─── */}
<div className="px-6 py-12 lg:px-12">
<div className="max-w-5xl mx-auto">
<div className="text-center mb-8">
<p className="text-amber-600 text-xs font-bold uppercase tracking-widest mb-2">ANALYSIS ENGINE</p>
<h2 className="text-2xl md:text-3xl font-extrabold text-[#04102b]">6가지 통계 분석 엔진</h2>
<p className="text-slate-500 text-sm mt-2">1,100+회차 과거 데이터를 분석하여 보여주는 통계 — 당첨 보장 없음</p>
</div>
<div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
{analysisFeatures.map((f) => (
<div key={f.label} className={`bg-white rounded-2xl border-2 ${f.accent} p-5`}>
<div className={`text-2xl font-extrabold ${f.statColor} mb-0.5`}>{f.stat}</div>
<div className={`text-xs ${f.statColor} font-medium mb-3`}>{f.statLabel}</div>
<h3 className="font-bold text-[#04102b] text-sm mb-1.5">{f.label}</h3>
<p className="text-slate-500 text-xs leading-relaxed">{f.desc}</p>
</div>
))}
</div>
</div>
</div>
{/* ─── 기능 비교표 ─── */}
<div className="px-6 pb-12 lg:px-12">
<div className="max-w-5xl mx-auto">
<div className="text-center mb-8">
<p className="text-amber-600 text-xs font-bold uppercase tracking-widest mb-2">PLAN FEATURES</p>
<h2 className="text-2xl md:text-3xl font-extrabold text-[#04102b]">플랜별 기능 비교</h2>
<p className="text-slate-500 text-sm mt-2">내게 맞는 플랜을 선택하세요</p>
</div>
<div className="overflow-x-auto">
<table className="w-full border-collapse">
<thead>
<tr>
<th className="text-left py-3 px-4 text-slate-500 text-sm font-semibold">기능</th>
<th className="text-center py-3 px-4">
<div className="text-amber-600 font-bold text-sm">🥇 골드</div>
<div className="text-slate-400 text-xs font-normal">900원/월</div>
</th>
<th className="text-center py-3 px-4 bg-gradient-to-b from-amber-50 to-orange-50 rounded-t-xl">
<div className="text-orange-600 font-bold text-sm">💎 플래티넘</div>
<div className="text-slate-400 text-xs font-normal">2,900원/월</div>
<div className="text-orange-500 text-xs font-bold mt-1">추천</div>
</th>
<th className="text-center py-3 px-4">
<div className="text-blue-600 font-bold text-sm">👑 다이아</div>
<div className="text-slate-400 text-xs font-normal">9,900원/월</div>
</th>
</tr>
</thead>
<tbody>
{[
{ feature: '번호 생성 횟수', gold: '1세트/일', plat: '3세트/일', dia: '무제한' },
{ feature: '배치 생성 (동시)', gold: '—', plat: '—', dia: '5개 동시' },
{ feature: '전략 선택 (균형/고위험/안정)', gold: '✓', plat: '✓', dia: '✓' },
{ feature: '이번 주 공략 리포트', gold: '✓', plat: '✓', dia: '✓' },
{ feature: '핫/콜드 번호 분석', gold: '✓', plat: '✓', dia: '✓' },
{ feature: '구매 기록 관리', gold: '✓', plat: '✓', dia: '✓' },
{ feature: '내 패턴 AI 분석', gold: '—', plat: '✓', dia: '✓' },
{ feature: '연간 번호 출현 통계 리포트', gold: '—', plat: '—', dia: '✓' },
{ feature: '우선 고객 지원', gold: '—', plat: '—', dia: '✓' },
].map((row, i) => (
<tr key={row.feature} className={i % 2 === 0 ? 'bg-white' : 'bg-slate-50'}>
<td className="py-3 px-4 text-slate-700 text-sm font-medium">{row.feature}</td>
<td className="text-center py-3 px-4 text-sm">
<span className={row.gold === '—' ? 'text-slate-300' : 'text-emerald-600 font-bold'}>{row.gold}</span>
</td>
<td className="text-center py-3 px-4 text-sm bg-amber-50/50">
<span className={row.plat === '—' ? 'text-slate-300' : 'text-emerald-600 font-bold'}>{row.plat}</span>
</td>
<td className="text-center py-3 px-4 text-sm">
<span className={row.dia === '—' ? 'text-slate-300' : 'text-emerald-600 font-bold'}>{row.dia}</span>
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
</div>
{/* ─── 요금제 ─── */}
<div className="px-6 pb-12 lg:px-12">
<div className="max-w-5xl mx-auto">
<div className="text-center mb-8">
<p className="text-[#1a56db] text-xs font-bold uppercase tracking-widest mb-2">PRICING</p>
<h2 className="text-2xl md:text-3xl font-extrabold text-[#04102b]">요금제</h2>
</div>
<div className="grid sm:grid-cols-3 gap-5">
{plans.map((plan) => (
<div key={plan.name} className={`rounded-2xl border p-6 relative flex flex-col ${
plan.highlight
? 'bg-gradient-to-br from-[#04102b] to-[#0a2060] border-amber-400/40 shadow-2xl shadow-amber-900/20 scale-105'
: 'bg-white border-[#dbe8ff]'
}`}>
{plan.highlight && (
<div className="absolute -top-3.5 left-1/2 -translate-x-1/2 bg-amber-400 text-[#04102b] text-xs font-extrabold px-4 py-1 rounded-full tracking-wide">추천</div>
)}
<div className="flex items-center gap-1.5 mb-2">
<span className="text-base">{plan.badge}</span>
<span className={`text-xs font-bold tracking-wide ${plan.highlight ? 'text-amber-400' : 'text-slate-400'}`}>{plan.name.toUpperCase()}</span>
</div>
<div className="flex items-baseline gap-1 mb-1">
<span className={`text-3xl font-extrabold ${plan.highlight ? 'text-white' : 'text-[#04102b]'}`}>{plan.price}</span>
<span className={`text-sm ${plan.highlight ? 'text-amber-300/60' : 'text-slate-400'}`}>{plan.period}</span>
</div>
<p className={`text-xs mb-5 ${plan.highlight ? 'text-amber-300/60' : 'text-slate-400'}`}>{plan.desc}</p>
<ul className="space-y-2 mb-6 flex-1">
{plan.features.map((f) => (
<li key={f} className={`flex items-start gap-2 text-xs ${plan.highlight ? 'text-amber-100/80' : 'text-slate-600'}`}>
<div className={`w-4 h-4 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5 ${plan.highlight ? 'bg-amber-400/20 border border-amber-400/40' : 'bg-[#f0f5ff] border border-[#dbe8ff]'}`}>
<div className={`w-1.5 h-1.5 rounded-full ${plan.highlight ? 'bg-amber-400' : 'bg-[#1a56db]'}`} />
</div>
{f}
</li>
))}
</ul>
<PaymentButton
productId={plan.productId}
className={`block w-full text-center py-3 rounded-xl text-sm font-bold transition ${
plan.highlight ? 'bg-amber-400 text-[#04102b] hover:bg-amber-300' : 'bg-[#04102b] text-white hover:bg-[#0a1f5c]'
}`}
>
신청하기
</PaymentButton>
</div>
))}
</div>
</div>
</div>
{/* ─── FAQ ─── */}
<div className="px-6 pb-12 lg:px-12">
<div className="max-w-3xl mx-auto">
<div className="text-center mb-8">
<p className="text-[#1a56db] text-xs font-bold uppercase tracking-widest mb-2">FAQ</p>
<h2 className="text-2xl font-extrabold text-[#04102b]">자주 묻는 질문</h2>
</div>
<div className="space-y-3">
{faqs.map((faq, i) => (
<div key={faq.q} className="bg-white rounded-2xl border border-[#dbe8ff] p-6">
<div className="flex items-start gap-3">
<span className="text-amber-500 font-extrabold text-sm flex-shrink-0 mt-0.5">Q{i + 1}</span>
<div>
<h3 className="font-bold text-[#04102b] text-sm mb-2">{faq.q}</h3>
<p className="text-slate-500 text-sm leading-relaxed">{faq.a}</p>
</div>
</div>
</div>
))}
</div>
</div>
</div>
{/* ─── CTA ─── */}
<div className="px-6 pb-12 lg:px-12">
<div className="max-w-3xl mx-auto">
<div className="bg-gradient-to-r from-[#04102b] to-[#0a2060] rounded-2xl border border-[#1a3a7a] p-8 text-center">
<p className="text-amber-400 text-xs font-bold uppercase tracking-widest mb-2">GET STARTED</p>
<h3 className="text-white text-2xl font-extrabold mb-2">지금 바로 시작하세요</h3>
<p className="text-blue-200/50 text-sm mb-6">구독 첫 달 무료 체험 · 언제든 취소 가능</p>
<button
onClick={() => openModal('로또 번호 추천')}
className="inline-flex items-center gap-2 bg-amber-400 hover:bg-amber-300 text-[#04102b] px-8 py-3 rounded-xl font-extrabold text-sm transition-all shadow-lg shadow-amber-900/30"
>
구독 신청하기 →
</button>
</div>
</div>
</div>
</div>
);
redirect('/');
}

277
app/services/stock/page.tsx
View File

@@ -1,277 +1,6 @@
'use client';
import { useState } from 'react';
import Link from 'next/link';
import ContactModal from '../../components/ContactModal';
import PaymentButton from '../../components/PaymentButton';
const CHECKLIST = [
'사용 중인 증권사 확인 (키움증권 / 한국투자증권 권장)',
'증권사 API 사용 신청이 필요합니다 (무료)',
'Windows PC 또는 서버 환경 필요',
'투자 원금 손실 위험 인지 — 여유 자금 운용 권장',
'전략 커스터마이징은 프로 플랜 이상 가능',
];
const features = [
{ title: '실시간 시장 모니터링', desc: '주식 시장 데이터를 실시간으로 수집·분석하여 매매 신호를 감지합니다.', detail: '장 시작~종료 전 구간 모니터링' },
{ title: '텔레그램 즉시 알림', desc: '매수·매도 신호 발생 시 텔레그램으로 즉시 알림을 전송합니다.', detail: '1초 이내 신호 전달' },
{ title: '자동 매수/매도 실행', desc: '신호에 따라 증권사 API와 연동하여 자동으로 주문을 실행합니다.', detail: '키움증권 / 한국투자증권 API' },
{ title: '기술적 분석 전략', desc: 'RSI, MACD, 볼린저밴드 등 검증된 기술적 지표를 조합하여 신호를 생성합니다.', detail: '다중 지표 복합 전략' },
{ title: '손절/익절 자동화', desc: '사전 설정한 손절·익절 기준에 따라 자동으로 포지션을 청산합니다.', detail: '리스크 자동 관리' },
{ title: '매매 이력 리포트', desc: '일별·주별 매매 내역과 손익 현황을 텔레그램 및 이메일로 보고합니다.', detail: '일별 수익률 추적' },
];
const plans = [
{
name: '스타터',
installPrice: '49,000원',
monthlyPrice: '9,900원',
desc: '1개 종목 자동 매매',
features: ['1개 종목 모니터링', '텔레그램 매매 알림', '기본 기술적 분석 전략', '손절/익절 자동 설정', '월간 손익 리포트'],
highlight: false,
installProductId: 'stock_starter_install',
},
{
name: '프로',
installPrice: '99,000원',
monthlyPrice: '29,000원',
desc: '최대 5개 종목 + 전략 커스터마이징',
features: ['최대 5개 종목 동시 운영', '전략 파라미터 커스터마이징', '다중 기술적 지표 조합', '실시간 포트폴리오 현황', '주간 성과 분석 리포트', '1개월 무상 기술 지원'],
highlight: true,
installProductId: 'stock_pro_install',
},
{
name: '엔터프라이즈',
installPrice: '협의',
monthlyPrice: '협의',
desc: '무제한 종목 + 맞춤 전략 개발',
features: ['종목 제한 없음', '완전 맞춤 전략 개발', '백테스팅 리포트 제공', '전용 서버 구성 가능', '24시간 모니터링', '전담 유지보수 계약'],
highlight: false,
installProductId: null,
},
];
const faqs = [
{ q: '어떤 증권사와 연동되나요?', a: '키움증권 Open API, 한국투자증권 API 등 주요 증권사 API를 지원합니다. 사용하시는 증권사를 미리 알려주시면 호환성을 확인해드립니다.' },
{ q: '원금 손실 위험은 없나요?', a: '주식 투자는 원금 손실 가능성이 있습니다. 자동 매매 프로그램은 매매를 보조하는 도구이며, 투자 결과에 대한 책임은 투자자 본인에게 있습니다. 반드시 여유 자금으로만 운용하세요.' },
{ q: '프로그램은 PC에 설치해야 하나요?', a: '네, 기본적으로 증권사 API 연동을 위해 Windows PC 환경에 설치합니다. 별도 서버가 필요하신 경우 NAS 또는 클라우드 서버 구성도 가능합니다.' },
{ q: '전략 수정이나 추가 요청이 가능한가요?', a: '프로 플랜 이상에서 전략 파라미터 조정이 가능합니다. 완전히 새로운 전략 개발은 별도 비용으로 진행됩니다.' },
];
import { redirect } from 'next/navigation';
// 토스페이먼츠 심사 정책상 판매 불가 상품으로 분류 — 비공개 처리
export default function StockPage() {
const [modalOpen, setModalOpen] = useState(false);
const [modalService, setModalService] = useState('주식 자동 매매');
const openModal = (service: string) => {
setModalService(service);
setModalOpen(true);
};
return (
<div className="min-h-full bg-[#f0f5ff]">
<ContactModal
isOpen={modalOpen}
onClose={() => setModalOpen(false)}
service={modalService}
checklist={CHECKLIST}
accentColor="text-emerald-400"
headerFrom="#011225"
headerTo="#01204a"
/>
{/* ─── Hero ─── */}
<div className="relative overflow-hidden bg-gradient-to-br from-[#011225] via-[#01204a] to-[#011a35] px-6 py-14 lg:px-12">
<svg className="absolute bottom-0 left-0 right-0 w-full opacity-15" height="80" viewBox="0 0 600 80" preserveAspectRatio="none">
<polyline points="0,70 60,55 120,62 200,25 280,40 340,15 420,30 500,8 600,18" stroke="#22c55e" strokeWidth="2" fill="none" strokeLinejoin="round" />
</svg>
<div className="absolute right-10 top-8 opacity-10 hidden lg:flex gap-2 items-end">
{[60,80,45,90,70,55,85,65,95,72].map((h, i) => (
<div key={i} className="flex flex-col items-center gap-0.5">
<div className="w-0.5 bg-white/50" style={{ height: `${h * 0.3}px` }} />
<div className="w-3 rounded-sm" style={{ height: `${h * 0.4}px`, background: i % 2 === 0 ? '#22c55e' : '#ef4444' }} />
<div className="w-0.5 bg-white/50" style={{ height: `${h * 0.2}px` }} />
</div>
))}
</div>
<div className="relative max-w-3xl mx-auto text-center">
<Link href="/" className="inline-flex items-center gap-1.5 text-emerald-300/60 hover:text-emerald-300 text-sm mb-6 transition">
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" /></svg>
홈으로
</Link>
<div className="w-16 h-16 mx-auto rounded-2xl bg-emerald-400/15 border border-emerald-400/25 flex items-center justify-center mb-5">
<svg className="w-9 h-9 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z" />
</svg>
</div>
<p className="text-emerald-400/70 text-xs font-bold uppercase tracking-widest mb-2">ALGO TRADING · 텔레그램 연동</p>
<h1 className="text-4xl md:text-5xl font-extrabold text-white mb-4 tracking-tight leading-tight">
주식 자동 매매<br />
<span className="text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 to-cyan-400">알고트레이딩</span>
</h1>
<p className="text-emerald-100/50 text-base md:text-lg leading-relaxed max-w-xl mx-auto mb-6">
직접 개발하고 NAS 서버에서 운영 중인 주식 자동 매매 시스템.<br />
기술적 분석 신호를 텔레그램으로 받아 자동으로 매수·매도합니다.
</p>
<div className="flex flex-wrap gap-2 justify-center mb-4">
<div className="inline-flex items-center gap-2 bg-emerald-400/10 border border-emerald-400/20 text-emerald-300 text-xs font-medium px-4 py-2 rounded-full">
<span className="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse" />NAS 서버에서 실제 운영 중
</div>
<div className="inline-flex items-center gap-2 bg-white/5 border border-white/10 text-white/60 text-xs font-medium px-4 py-2 rounded-full">
키움증권 · 한국투자증권 API 연동
</div>
</div>
</div>
<div className="relative max-w-2xl mx-auto mt-2">
<div className="bg-black/40 border border-emerald-400/15 rounded-xl p-4 font-mono text-xs">
<div className="flex items-center gap-2 mb-3 pb-2 border-b border-white/10">
<div className="w-3 h-3 rounded-full bg-red-500/60" /><div className="w-3 h-3 rounded-full bg-yellow-500/60" /><div className="w-3 h-3 rounded-full bg-emerald-500/60" />
<span className="text-white/30 text-xs ml-2">algo_trader.py</span>
</div>
<div className="space-y-1.5">
<div><span className="text-emerald-400">✓</span><span className="text-white/40"> [09:01:23] </span><span className="text-white/70">KOSPI 모니터링 시작</span></div>
<div><span className="text-emerald-400">✓</span><span className="text-white/40"> [09:15:44] </span><span className="text-emerald-300">RSI(14) = 32.4 → 과매도 신호 감지</span></div>
<div><span className="text-amber-400">→</span><span className="text-white/40"> [09:15:44] </span><span className="text-amber-300">텔레그램 알림 전송: 삼성전자 매수 신호</span></div>
<div><span className="text-blue-400">✓</span><span className="text-white/40"> [09:15:45] </span><span className="text-blue-300">매수 주문 실행 완료 (5주 × 72,400원)</span></div>
</div>
</div>
</div>
</div>
{/* ─── 투자 유의 ─── */}
<div className="px-6 pt-8 lg:px-12">
<div className="max-w-5xl mx-auto">
<div className="bg-amber-50 border border-amber-200 rounded-xl px-5 py-3.5 flex items-start gap-3">
<svg className="w-5 h-5 text-amber-500 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
</svg>
<p className="text-amber-800 text-xs leading-relaxed">
<strong>투자 유의사항:</strong> 주식 자동 매매 프로그램은 투자 보조 도구입니다. 주식 투자는 원금 손실의 위험이 있으며, 투자 결과에 대한 책임은 투자자 본인에게 있습니다. 반드시 여유 자금으로만 운용하세요.
</p>
</div>
</div>
</div>
{/* ─── 주요 기능 ─── */}
<div className="px-6 py-12 lg:px-12">
<div className="max-w-5xl mx-auto">
<div className="text-center mb-8">
<p className="text-emerald-600 text-xs font-bold uppercase tracking-widest mb-2">FEATURES</p>
<h2 className="text-2xl md:text-3xl font-extrabold text-[#04102b]">주요 기능</h2>
</div>
<div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
{features.map((f) => (
<div key={f.title} className="bg-white rounded-2xl border border-[#dbe8ff] p-5 hover:border-emerald-200 transition-colors">
<div className="inline-block bg-emerald-50 border border-emerald-200 text-emerald-700 text-xs font-bold px-2 py-0.5 rounded-md mb-3">{f.detail}</div>
<h3 className="font-bold text-[#04102b] text-sm mb-2">{f.title}</h3>
<p className="text-slate-500 text-xs leading-relaxed">{f.desc}</p>
</div>
))}
</div>
</div>
</div>
{/* ─── 요금제 ─── */}
<div className="px-6 pb-12 lg:px-12">
<div className="max-w-5xl mx-auto">
<div className="text-center mb-2">
<p className="text-[#1a56db] text-xs font-bold uppercase tracking-widest mb-2">PRICING</p>
<h2 className="text-2xl md:text-3xl font-extrabold text-[#04102b]">요금제</h2>
</div>
<p className="text-center text-slate-400 text-sm mb-8">설치비(1회) + 월 유지비 구조입니다</p>
<div className="grid sm:grid-cols-3 gap-5">
{plans.map((plan) => (
<div key={plan.name} className={`rounded-2xl border p-6 relative flex flex-col ${
plan.highlight
? 'bg-gradient-to-br from-[#011225] to-[#01204a] border-emerald-400/30 shadow-2xl shadow-emerald-900/20 scale-105'
: 'bg-white border-[#dbe8ff]'
}`}>
{plan.highlight && (
<div className="absolute -top-3.5 left-1/2 -translate-x-1/2 bg-emerald-400 text-[#011225] text-xs font-extrabold px-4 py-1 rounded-full tracking-wide">인기</div>
)}
<div className={`text-xs font-bold mb-3 tracking-wide ${plan.highlight ? 'text-emerald-400' : 'text-slate-400'}`}>{plan.name.toUpperCase()}</div>
<div className="mb-4">
<div className={`text-xs mb-0.5 ${plan.highlight ? 'text-emerald-400/60' : 'text-slate-400'}`}>설치비 (1회)</div>
<div className={`text-2xl font-extrabold ${plan.highlight ? 'text-white' : 'text-[#04102b]'}`}>{plan.installPrice}</div>
</div>
<div className="mb-1">
<div className={`text-xs mb-0.5 ${plan.highlight ? 'text-emerald-400/60' : 'text-slate-400'}`}>월 유지비</div>
<div className={`text-xl font-bold ${plan.highlight ? 'text-white' : 'text-[#04102b]'}`}>{plan.monthlyPrice}</div>
</div>
<p className={`text-xs mt-2 mb-5 ${plan.highlight ? 'text-emerald-300/50' : 'text-slate-400'}`}>{plan.desc}</p>
<ul className="space-y-2 mb-6 flex-1">
{plan.features.map((f) => (
<li key={f} className={`flex items-start gap-2 text-xs ${plan.highlight ? 'text-emerald-100/80' : 'text-slate-600'}`}>
<div className={`w-4 h-4 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5 ${plan.highlight ? 'bg-emerald-400/20 border border-emerald-400/40' : 'bg-[#f0f5ff] border border-[#dbe8ff]'}`}>
<div className={`w-1.5 h-1.5 rounded-full ${plan.highlight ? 'bg-emerald-400' : 'bg-[#1a56db]'}`} />
</div>
{f}
</li>
))}
</ul>
{plan.installProductId ? (
<PaymentButton
productId={plan.installProductId}
className={`block w-full text-center py-3 rounded-xl text-sm font-bold transition ${
plan.highlight ? 'bg-emerald-400 text-[#011225] hover:bg-emerald-300' : 'bg-[#04102b] text-white hover:bg-[#0a1f5c]'
}`}
>
설치 결제하기
</PaymentButton>
) : (
<button
onClick={() => openModal(`주식 자동 매매 - ${plan.name}`)}
className="block w-full text-center py-3 rounded-xl text-sm font-bold transition bg-[#04102b] text-white hover:bg-[#0a1f5c]"
>
도입 문의
</button>
)}
</div>
))}
</div>
</div>
</div>
{/* ─── FAQ ─── */}
<div className="px-6 pb-12 lg:px-12">
<div className="max-w-3xl mx-auto">
<div className="text-center mb-8">
<p className="text-[#1a56db] text-xs font-bold uppercase tracking-widest mb-2">FAQ</p>
<h2 className="text-2xl font-extrabold text-[#04102b]">자주 묻는 질문</h2>
</div>
<div className="space-y-3">
{faqs.map((faq, i) => (
<div key={faq.q} className="bg-white rounded-2xl border border-[#dbe8ff] p-6">
<div className="flex items-start gap-3">
<span className="text-emerald-500 font-extrabold text-sm flex-shrink-0 mt-0.5">Q{i + 1}</span>
<div>
<h3 className="font-bold text-[#04102b] text-sm mb-2">{faq.q}</h3>
<p className="text-slate-500 text-sm leading-relaxed">{faq.a}</p>
</div>
</div>
</div>
))}
</div>
</div>
</div>
{/* ─── CTA ─── */}
<div className="px-6 pb-12 lg:px-12">
<div className="max-w-3xl mx-auto">
<div className="bg-gradient-to-r from-[#011225] to-[#01204a] rounded-2xl border border-emerald-400/20 p-8 text-center">
<p className="text-emerald-400 text-xs font-bold uppercase tracking-widest mb-2">START TRADING</p>
<h3 className="text-white text-2xl font-extrabold mb-2">지금 도입 상담 받아보세요</h3>
<p className="text-emerald-100/40 text-sm mb-6">계약서 먼저, 개발 나중 — 구두 약속 없음</p>
<button
onClick={() => openModal('주식 자동 매매')}
className="inline-flex items-center gap-2 bg-emerald-400 hover:bg-emerald-300 text-[#011225] px-8 py-3 rounded-xl font-extrabold text-sm transition-all shadow-lg shadow-emerald-900/30"
>
무료 상담 신청 →
</button>
</div>
</div>
</div>
</div>
);
redirect('/');
}