gahusb
19fb7a0892
- 전체 디자인 시스템 개편: 딥 네이비 (#04102b) + 로열 블루 (#1a56db) 팔레트 - 홈 대시보드: 가운데 정렬, 서비스별 고유 카드 디자인 (로또/주식/프롬프트/자동화) - 서비스 페이지 4종: 각 서비스 테마 색상 + 장식 요소 + 가운데 정렬 레이아웃 - 외주 개발 페이지: 라이브 카운터 (진행중/상담중/납품완료), 수직 타임라인 - ContactModal 컴포넌트: 서비스별 모달 문의폼 + 체크리스트 (페이지 이동 없이 문의) - CookieRun 폰트 적용 (Regular/Bold/Black, 상업적 이용 가능 라이선스) - 실명 '박재오' → '쟁토리' 전체 변경, 7년차 강조 홈 페이지에만 표시 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
265 lines
16 KiB
TypeScript
265 lines
16 KiB
TypeScript
'use client';
|
||
|
||
import { useState } from 'react';
|
||
import Link from 'next/link';
|
||
import ContactModal from '../../components/ContactModal';
|
||
|
||
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: '99,000원',
|
||
monthlyPrice: '29,000원',
|
||
desc: '1개 종목 자동 매매',
|
||
features: ['1개 종목 모니터링', '텔레그램 매매 알림', '기본 기술적 분석 전략', '손절/익절 자동 설정', '월간 손익 리포트'],
|
||
highlight: false,
|
||
},
|
||
{
|
||
name: '프로',
|
||
installPrice: '199,000원',
|
||
monthlyPrice: '49,000원',
|
||
desc: '최대 5개 종목 + 전략 커스터마이징',
|
||
features: ['최대 5개 종목 동시 운영', '전략 파라미터 커스터마이징', '다중 기술적 지표 조합', '실시간 포트폴리오 현황', '주간 성과 분석 리포트', '1개월 무상 기술 지원'],
|
||
highlight: true,
|
||
},
|
||
{
|
||
name: '엔터프라이즈',
|
||
installPrice: '협의',
|
||
monthlyPrice: '협의',
|
||
desc: '무제한 종목 + 맞춤 전략 개발',
|
||
features: ['종목 제한 없음', '완전 맞춤 전략 개발', '백테스팅 리포트 제공', '전용 서버 구성 가능', '24시간 모니터링', '전담 유지보수 계약'],
|
||
highlight: false,
|
||
},
|
||
];
|
||
|
||
const faqs = [
|
||
{ q: '어떤 증권사와 연동되나요?', a: '키움증권 Open API, 한국투자증권 API 등 주요 증권사 API를 지원합니다. 사용하시는 증권사를 미리 알려주시면 호환성을 확인해드립니다.' },
|
||
{ q: '원금 손실 위험은 없나요?', a: '주식 투자는 원금 손실 가능성이 있습니다. 자동 매매 프로그램은 매매를 보조하는 도구이며, 투자 결과에 대한 책임은 투자자 본인에게 있습니다. 반드시 여유 자금으로만 운용하세요.' },
|
||
{ q: '프로그램은 PC에 설치해야 하나요?', a: '네, 기본적으로 증권사 API 연동을 위해 Windows PC 환경에 설치합니다. 별도 서버가 필요하신 경우 NAS 또는 클라우드 서버 구성도 가능합니다.' },
|
||
{ q: '전략 수정이나 추가 요청이 가능한가요?', a: '프로 플랜 이상에서 전략 파라미터 조정이 가능합니다. 완전히 새로운 전략 개발은 별도 비용으로 진행됩니다.' },
|
||
];
|
||
|
||
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>
|
||
<button
|
||
onClick={() => openModal(`주식 자동 매매 - ${plan.name}`)}
|
||
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]'
|
||
}`}
|
||
>
|
||
도입 문의
|
||
</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>
|
||
);
|
||
}
|