339 lines
26 KiB
HTML
339 lines
26 KiB
HTML
{{ template "base.html" . }}
|
||
|
||
{{ define "sidebar" }}
|
||
<aside class="w-60 shrink-0 sticky top-20 self-start">
|
||
<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
|
||
<div class="px-4 py-3 bg-gray-50 border-b border-gray-100">
|
||
<h2 class="font-bold text-gray-800 text-sm">관심종목</h2>
|
||
</div>
|
||
|
||
<!-- 종목 추가 입력 -->
|
||
<div class="p-3 border-b border-gray-100">
|
||
<div class="flex gap-2">
|
||
<input id="watchlistInput" type="text" placeholder="종목코드 (예: 005930)"
|
||
maxlength="6"
|
||
class="flex-1 text-xs px-2 py-1.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-1 focus:ring-blue-400 font-mono">
|
||
<button id="watchlistAddBtn"
|
||
class="text-xs px-2.5 py-1.5 bg-blue-500 text-white rounded-lg hover:bg-blue-600 font-medium shrink-0">
|
||
추가
|
||
</button>
|
||
</div>
|
||
<p id="watchlistMsg" class="text-xs text-red-500 mt-1 hidden"></p>
|
||
</div>
|
||
|
||
<!-- 관심종목 목록 -->
|
||
<ul id="watchlistSidebar" class="divide-y divide-gray-50 max-h-[60vh] overflow-y-auto">
|
||
<li class="px-4 py-8 text-center text-xs text-gray-400" id="watchlistEmpty">
|
||
관심종목을 추가해주세요
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</aside>
|
||
{{ end }}
|
||
|
||
{{ define "content" }}
|
||
<div class="space-y-8">
|
||
|
||
<!-- 체결강도 상승 감지 -->
|
||
<section>
|
||
<h2 class="text-xl font-bold text-gray-800 mb-4 flex items-center gap-2">
|
||
<span class="text-orange-500">⚡</span> 체결강도 상승 감지
|
||
<span class="text-xs font-normal text-gray-400 ml-1">(거래량 상위 20 | 10초 갱신)</span>
|
||
<button id="signalGuideBtn"
|
||
class="w-5 h-5 rounded-full bg-gray-200 text-gray-500 text-xs font-bold hover:bg-orange-100 hover:text-orange-600 transition-colors flex items-center justify-center"
|
||
title="판단 기준 보기">?</button>
|
||
<button id="scannerToggleBtn"
|
||
class="text-xs px-2.5 py-1 rounded-full font-semibold border transition-colors bg-green-100 text-green-700 border-green-300"
|
||
title="스캐너 ON/OFF">● ON</button>
|
||
<span id="signalUpdatedAt" class="text-xs font-normal text-gray-400 ml-auto"></span>
|
||
</h2>
|
||
|
||
<!-- 시그널 판단 기준 모달 -->
|
||
<div id="signalGuideModal"
|
||
class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 hidden"
|
||
role="dialog" aria-modal="true">
|
||
<div class="bg-white rounded-2xl shadow-2xl w-full max-w-2xl mx-4 max-h-[90vh] overflow-y-auto">
|
||
<div class="flex items-center justify-between px-6 pt-5 pb-3 border-b border-gray-100 sticky top-0 bg-white">
|
||
<h3 class="text-base font-bold text-gray-800">⚡ 시그널 판단 기준</h3>
|
||
<button id="signalGuideClose" class="text-gray-400 hover:text-gray-600 text-xl font-bold leading-none">✕</button>
|
||
</div>
|
||
<div class="px-6 py-5 space-y-6 text-sm text-gray-700">
|
||
|
||
<!-- 스코어 설명 -->
|
||
<div>
|
||
<p class="font-semibold text-gray-800 mb-2">📊 상승 확률 스코어 (0~100점)</p>
|
||
<p class="text-xs text-gray-400 mb-3">4가지 복합 요소를 동시에 만족해야 진짜 상승 확률이 높습니다.</p>
|
||
<table class="w-full text-xs border-collapse">
|
||
<thead>
|
||
<tr class="bg-gray-50 text-gray-500">
|
||
<th class="text-left px-3 py-2 border border-gray-100 font-semibold">요소</th>
|
||
<th class="text-center px-3 py-2 border border-gray-100 font-semibold w-16">배점</th>
|
||
<th class="text-left px-3 py-2 border border-gray-100 font-semibold">핵심 로직</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td class="px-3 py-2 border border-gray-100 font-medium">A. 체결강도 레벨</td>
|
||
<td class="px-3 py-2 border border-gray-100 text-center text-gray-500">0~30</td>
|
||
<td class="px-3 py-2 border border-gray-100 text-gray-500">150+: 30점 · 130+: 22점 · 110+: 14점</td>
|
||
</tr>
|
||
<tr class="bg-gray-50">
|
||
<td class="px-3 py-2 border border-gray-100 font-medium">B. 연속 상승 횟수</td>
|
||
<td class="px-3 py-2 border border-gray-100 text-center text-gray-500">0~25</td>
|
||
<td class="px-3 py-2 border border-gray-100 text-gray-500">5회+: 25점 · 3회+: 14점 · 1회: 3점</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="px-3 py-2 border border-gray-100 font-medium">C. 가격 위치/캔들</td>
|
||
<td class="px-3 py-2 border border-gray-100 text-center text-gray-500">0~20</td>
|
||
<td class="px-3 py-2 border border-gray-100 text-gray-500">윗꼬리 10% 미만: +10점 · 60% 이상: −8점</td>
|
||
</tr>
|
||
<tr class="bg-gray-50">
|
||
<td class="px-3 py-2 border border-gray-100 font-medium">D. 거래량 건전성</td>
|
||
<td class="px-3 py-2 border border-gray-100 text-center text-gray-500">0~15</td>
|
||
<td class="px-3 py-2 border border-gray-100 text-gray-500">2~5배 증가: +15점 · 10배 이상: −5점</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="px-3 py-2 border border-gray-100 font-medium">E. 매도잔량 소화</td>
|
||
<td class="px-3 py-2 border border-gray-100 text-center text-gray-500">0~10</td>
|
||
<td class="px-3 py-2 border border-gray-100 text-gray-500">매수잔량 압도적: +10점 · 매도 우세: −3점</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<!-- 신호 유형 설명 -->
|
||
<div>
|
||
<p class="font-semibold text-gray-800 mb-2">🏷️ 신호 유형 분류</p>
|
||
<div class="space-y-2">
|
||
<div class="flex items-start gap-3 p-2.5 rounded-lg bg-red-50">
|
||
<span class="bg-red-600 text-white text-xs px-2 py-0.5 rounded font-bold shrink-0 mt-0.5">강한매수</span>
|
||
<span class="text-gray-600">체결강도 130+ · 3회 이상 연속 상승 · 윗꼬리 없음 · 매도잔량 소화 중 → 실매수 강하고 던지는 물량도 받아내는 패턴</span>
|
||
</div>
|
||
<div class="flex items-start gap-3 p-2.5 rounded-lg bg-orange-50">
|
||
<span class="bg-orange-400 text-white text-xs px-2 py-0.5 rounded font-bold shrink-0 mt-0.5">매수우세</span>
|
||
<span class="text-gray-600">기본 상승 패턴. 강한매수 조건 미충족이나 전반적으로 매수세가 우위</span>
|
||
</div>
|
||
<div class="flex items-start gap-3 p-2.5 rounded-lg bg-yellow-50">
|
||
<span class="bg-yellow-100 text-yellow-700 border border-yellow-300 text-xs px-2 py-0.5 rounded font-bold shrink-0 mt-0.5">물량소화</span>
|
||
<span class="text-gray-600">체결강도는 높은데 가격이 제자리 + 긴 윗꼬리 → 위에서 파는 물량을 받아내기만 하는 중. 돌파 여부 확인 필요</span>
|
||
</div>
|
||
<div class="flex items-start gap-3 p-2.5 rounded-lg bg-gray-100">
|
||
<span class="bg-gray-800 text-white text-xs px-2 py-0.5 rounded font-bold shrink-0 mt-0.5">추격위험</span>
|
||
<span class="text-gray-600">체결강도 170+ · 거래량 7배 이상 · 긴 윗꼬리 동시 출현 → 단타 추격매수 몰림 후 고점 물량털기 가능성 경계</span>
|
||
</div>
|
||
<div class="flex items-start gap-3 p-2.5 rounded-lg bg-gray-50">
|
||
<span class="bg-gray-100 text-gray-500 border border-gray-300 text-xs px-2 py-0.5 rounded font-bold shrink-0 mt-0.5">약한상승</span>
|
||
<span class="text-gray-600">거래량 증가 없음 · 체결강도 120 미만 → 얇은 호가에서 뜬 상승, 소량 매도에도 쉽게 꺾일 수 있음</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 지표별 상세 설명 -->
|
||
<div>
|
||
<p class="font-semibold text-gray-800 mb-3">🔍 카드 지표 상세 설명</p>
|
||
<div class="space-y-3">
|
||
|
||
<!-- 체결강도 -->
|
||
<div class="rounded-lg border border-gray-100 overflow-hidden">
|
||
<div class="px-3 py-2 bg-gray-50 flex items-center gap-2">
|
||
<span class="font-semibold text-gray-800 text-xs">체결강도</span>
|
||
<span class="text-xs text-gray-400">· 매수/매도 힘의 비율</span>
|
||
</div>
|
||
<div class="px-3 py-2.5 text-xs text-gray-600 space-y-1">
|
||
<p>10초마다 직전 체결강도와 비교해 <span class="font-semibold text-orange-500">연속으로 상승하는 종목</span>만 표시합니다.</p>
|
||
<p class="text-gray-400">100 = 매수·매도 균형 / 100 초과 = 매수 우위 / 100 미만 = 매도 우위</p>
|
||
<div class="flex flex-wrap gap-1.5 mt-1">
|
||
<span class="bg-red-50 text-red-500 px-2 py-0.5 rounded">150+ 강한 매수세</span>
|
||
<span class="bg-orange-50 text-orange-500 px-2 py-0.5 rounded">130~150 매수 우세</span>
|
||
<span class="bg-yellow-50 text-yellow-600 px-2 py-0.5 rounded">100~130 매수 경향</span>
|
||
<span class="bg-blue-50 text-blue-400 px-2 py-0.5 rounded">100 미만 매도 경향</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 연속 상승 뱃지 -->
|
||
<div class="rounded-lg border border-gray-100 overflow-hidden">
|
||
<div class="px-3 py-2 bg-gray-50 flex items-center gap-2">
|
||
<span class="font-semibold text-gray-800 text-xs">연속 상승 뱃지</span>
|
||
<span class="text-xs text-gray-400">· 10초 단위 체결강도 상승 횟수</span>
|
||
</div>
|
||
<div class="px-3 py-2.5 text-xs text-gray-600 space-y-1.5">
|
||
<p>직전 측정값 대비 체결강도가 <span class="font-semibold">끊기지 않고 몇 번 연속으로 올랐는지</span>를 나타냅니다.</p>
|
||
<div class="flex flex-wrap gap-1.5">
|
||
<span class="bg-red-500 text-white px-2 py-0.5 rounded font-bold">🔥N연속</span>
|
||
<span class="text-gray-500 self-center">4회 이상 — 강한 지속 매수세</span>
|
||
</div>
|
||
<div class="flex flex-wrap gap-1.5">
|
||
<span class="bg-orange-400 text-white px-2 py-0.5 rounded font-bold">▲N연속</span>
|
||
<span class="text-gray-500 self-center">2~3회 — 매수세 형성 중</span>
|
||
</div>
|
||
<div class="flex flex-wrap gap-1.5">
|
||
<span class="bg-yellow-100 text-yellow-700 px-2 py-0.5 rounded font-bold">↑상승</span>
|
||
<span class="text-gray-500 self-center">1회 — 초기 매수 감지</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 거래량 증가율 -->
|
||
<div class="rounded-lg border border-gray-100 overflow-hidden">
|
||
<div class="px-3 py-2 bg-gray-50 flex items-center gap-2">
|
||
<span class="font-semibold text-gray-800 text-xs">거래량 증가</span>
|
||
<span class="text-xs text-gray-400">· 직전 평균 대비 현재 구간 배수</span>
|
||
</div>
|
||
<div class="px-3 py-2.5 text-xs text-gray-600 space-y-1">
|
||
<p>직전 6회(1분) 구간 평균 거래량 대비 <span class="font-semibold">현재 10초 구간에서 얼마나 폭발적으로 거래됐는지</span>를 나타냅니다.</p>
|
||
<div class="flex flex-wrap gap-1.5 mt-1">
|
||
<span class="bg-green-50 text-green-600 font-semibold px-2 py-0.5 rounded">2~5배 최적</span>
|
||
<span class="bg-orange-50 text-orange-400 px-2 py-0.5 rounded">5~10배 과열 초입</span>
|
||
<span class="bg-gray-100 text-gray-400 px-2 py-0.5 rounded line-through">10배+ ⚠과열</span>
|
||
</div>
|
||
<p class="text-gray-400 mt-1">※ 10배 이상은 고점 물량털기 가능성이 높아 스코어가 감점됩니다.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 매도/매수 잔량비 -->
|
||
<div class="rounded-lg border border-gray-100 overflow-hidden">
|
||
<div class="px-3 py-2 bg-gray-50 flex items-center gap-2">
|
||
<span class="font-semibold text-gray-800 text-xs">매도/매수 잔량</span>
|
||
<span class="text-xs text-gray-400">· 호가창 전체 잔량 비율</span>
|
||
</div>
|
||
<div class="px-3 py-2.5 text-xs text-gray-600 space-y-1">
|
||
<p>10단계 매도호가 총잔량 ÷ 10단계 매수호가 총잔량입니다. <span class="font-semibold">1보다 작을수록 매수 우위</span>, 클수록 위에 팔 물량이 많다는 의미입니다.</p>
|
||
<div class="flex flex-wrap gap-1.5 mt-1">
|
||
<span class="bg-green-50 text-green-600 font-semibold px-2 py-0.5 rounded">0.7 미만 — 매수 강세</span>
|
||
<span class="bg-green-50 text-green-500 px-2 py-0.5 rounded">0.7~1.0 — 매수 우세</span>
|
||
<span class="bg-gray-50 text-gray-500 px-2 py-0.5 rounded">1.0~1.5 — 균형</span>
|
||
<span class="bg-blue-50 text-blue-500 px-2 py-0.5 rounded">1.5+ — 매도 우세</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 가격 위치 -->
|
||
<div class="rounded-lg border border-gray-100 overflow-hidden">
|
||
<div class="px-3 py-2 bg-gray-50 flex items-center gap-2">
|
||
<span class="font-semibold text-gray-800 text-xs">가격 위치</span>
|
||
<span class="text-xs text-gray-400">· 장중 저가~고가 내 현재가 위치 %</span>
|
||
</div>
|
||
<div class="px-3 py-2.5 text-xs text-gray-600 space-y-1">
|
||
<p>오늘 장중 저가를 0%, 고가를 100%로 봤을 때 <span class="font-semibold">현재가가 어디에 있는지</span>를 나타냅니다.</p>
|
||
<div class="flex flex-wrap gap-1.5 mt-1">
|
||
<span class="bg-red-50 text-red-500 font-semibold px-2 py-0.5 rounded">80%+ 고가권 · 강한 매수</span>
|
||
<span class="bg-orange-50 text-orange-400 px-2 py-0.5 rounded">60~80% 상단부</span>
|
||
<span class="bg-gray-50 text-gray-500 px-2 py-0.5 rounded">30~60% 중간대</span>
|
||
<span class="bg-blue-50 text-blue-400 px-2 py-0.5 rounded">30% 미만 저가권</span>
|
||
</div>
|
||
<p class="text-gray-400 mt-1">※ 체결강도가 강한데 가격 위치가 낮으면 저점 반등 초기 신호일 수 있습니다.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- AI 감성 분석 -->
|
||
<div class="rounded-lg border border-gray-100 overflow-hidden">
|
||
<div class="px-3 py-2 bg-gray-50 flex items-center gap-2">
|
||
<span class="font-semibold text-gray-800 text-xs">AI 감성 분석</span>
|
||
<span class="text-xs text-gray-400">· 최신 뉴스 기반 호재/악재 판단</span>
|
||
</div>
|
||
<div class="px-3 py-2.5 text-xs text-gray-600 space-y-1.5">
|
||
<p>상승 확률 50점 이상 · 2회 이상 연속 상승 · 체결강도 100 이상 종목에 한해 AI가 최신 뉴스를 분석합니다.</p>
|
||
<div class="flex flex-wrap gap-1.5">
|
||
<span class="bg-green-100 text-green-700 border border-green-200 px-2 py-0.5 rounded font-semibold">호재</span>
|
||
<span class="text-gray-500 self-center">긍정적 뉴스·공시 감지</span>
|
||
</div>
|
||
<div class="flex flex-wrap gap-1.5">
|
||
<span class="bg-red-100 text-red-600 border border-red-200 px-2 py-0.5 rounded font-semibold">악재</span>
|
||
<span class="text-gray-500 self-center">부정적 뉴스·공시 감지</span>
|
||
</div>
|
||
<div class="flex flex-wrap gap-1.5">
|
||
<span class="bg-gray-100 text-gray-500 px-2 py-0.5 rounded font-semibold">중립</span>
|
||
<span class="text-gray-500 self-center">특이 뉴스 없음</span>
|
||
</div>
|
||
<p class="text-gray-400">※ 뱃지에 마우스를 올리면 AI가 판단한 근거 한 줄이 표시됩니다.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- AI 목표가 -->
|
||
<div class="rounded-lg border border-gray-100 overflow-hidden">
|
||
<div class="px-3 py-2 bg-gray-50 flex items-center gap-2">
|
||
<span class="font-semibold text-gray-800 text-xs">AI 목표가</span>
|
||
<span class="text-xs text-gray-400">· 단기 기술적 목표가 추론</span>
|
||
</div>
|
||
<div class="px-3 py-2.5 text-xs text-gray-600 space-y-1">
|
||
<p>현재가·고가·저가·체결강도·연속상승 횟수·AI 감성을 종합해 <span class="font-semibold text-purple-600">단기 목표가</span>를 추론합니다. 투자 조언이 아닌 참고용 수치입니다.</p>
|
||
<p class="text-gray-400">※ 뱃지에 마우스를 올리면 목표가 추론 근거가 표시됩니다.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 익일 추세 -->
|
||
<div class="rounded-lg border border-gray-100 overflow-hidden">
|
||
<div class="px-3 py-2 bg-gray-50 flex items-center gap-2">
|
||
<span class="font-semibold text-gray-800 text-xs">익일 추세</span>
|
||
<span class="text-xs text-gray-400">· 다음 거래일 방향성 예측</span>
|
||
</div>
|
||
<div class="px-3 py-2.5 text-xs text-gray-600 space-y-1.5">
|
||
<p>당일 기술 지표와 AI 감성 분석을 결합해 다음 거래일 방향성을 예측합니다. 신뢰도(높음/보통/낮음)를 함께 표시합니다.</p>
|
||
<div class="flex flex-wrap gap-1.5">
|
||
<span class="bg-red-50 text-red-500 border border-red-200 px-2 py-0.5 rounded font-bold">▲ 상승</span>
|
||
<span class="bg-blue-50 text-blue-500 border border-blue-200 px-2 py-0.5 rounded font-bold">▼ 하락</span>
|
||
<span class="bg-gray-50 text-gray-500 border border-gray-200 px-2 py-0.5 rounded font-bold">─ 횡보</span>
|
||
</div>
|
||
<p class="text-gray-400">※ AI 예측은 참고용이며, 실제 시장 상황에 따라 달라질 수 있습니다.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 체결강도 미니차트 -->
|
||
<div class="rounded-lg border border-gray-100 overflow-hidden">
|
||
<div class="px-3 py-2 bg-gray-50 flex items-center gap-2">
|
||
<span class="font-semibold text-gray-800 text-xs">체결강도 차트</span>
|
||
<span class="text-xs text-gray-400">· 카드 하단 주황색 라인</span>
|
||
</div>
|
||
<div class="px-3 py-2.5 text-xs text-gray-600">
|
||
<p>시그널 감지 이후 <span class="font-semibold text-orange-500">10초마다 수집된 체결강도 흐름</span>을 라인차트로 표시합니다. 우상향이면 매수세가 지속되는 중입니다. 최대 60포인트(10분) 유지됩니다.</p>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 한 줄 기준 -->
|
||
<div class="bg-orange-50 rounded-xl p-4 border border-orange-100">
|
||
<p class="font-semibold text-orange-700 mb-1">💡 진짜 상승 한 줄 기준</p>
|
||
<p class="text-orange-600">가격이 오르면서 · 거래량이 받쳐주고 · 체결강도가 유지되고 · 위 매도물량이 실제로 소화되는 흐름</p>
|
||
</div>
|
||
|
||
<!-- 면책 안내 -->
|
||
<div class="bg-gray-50 rounded-xl p-4 border border-gray-100">
|
||
<p class="font-semibold text-gray-600 mb-1">⚠️ 투자 유의사항</p>
|
||
<p class="text-gray-500 text-xs leading-relaxed">이 서비스의 모든 지표와 AI 분석은 <span class="font-semibold">참고용 정보</span>이며 투자 권유나 매매 신호가 아닙니다. 투자 결정은 본인의 판단과 책임 하에 이루어져야 하며, 모든 투자 손실에 대한 책임은 투자자 본인에게 있습니다.</p>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="signalGrid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||
<p class="col-span-3 text-gray-400 text-center py-6 text-sm" id="signalEmpty">
|
||
08:00 이후 거래량 상위 종목에서 체결강도 100 이상 + 상승 종목을 표시합니다.
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 관심종목 실시간 패널 -->
|
||
<section>
|
||
<h2 class="text-xl font-bold text-gray-800 mb-4 flex items-center gap-2">
|
||
<span class="text-yellow-500">★</span> 관심종목 실시간
|
||
<span class="text-xs font-normal text-gray-400 ml-1" id="wsStatus">연결 중...</span>
|
||
</h2>
|
||
<div id="watchlistPanel" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
|
||
<div id="watchlistPanelEmpty" class="col-span-3 text-center py-12 text-gray-400 text-sm bg-white rounded-xl border border-dashed border-gray-200">
|
||
좌측 메뉴에서 관심종목을 추가하면 실시간 시세가 표시됩니다.
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
</div>
|
||
|
||
{{ end }}
|
||
|
||
{{ define "scripts" }}
|
||
<script src="/static/js/signal.js"></script>
|
||
<script src="/static/js/watchlist.js"></script>
|
||
{{ end }}
|