87 lines
4.9 KiB
HTML
87 lines
4.9 KiB
HTML
{{ template "base.html" . }}
|
|
|
|
{{ define "sidebar" }}{{ end }}
|
|
|
|
{{ define "content" }}
|
|
<div class="space-y-4">
|
|
|
|
<!-- 헤더 + 필터 바 -->
|
|
<div class="flex flex-wrap items-center gap-3">
|
|
<h1 class="text-xl font-bold text-gray-800 flex items-center gap-2">
|
|
<span class="text-purple-500">📊</span> 테마 분석
|
|
</h1>
|
|
|
|
<!-- 날짜 구간 탭 -->
|
|
<div class="flex rounded-lg border border-gray-200 overflow-hidden text-xs font-medium">
|
|
<button data-date="1" class="date-tab px-3 py-1.5 bg-blue-500 text-white">1일</button>
|
|
<button data-date="5" class="date-tab px-3 py-1.5 bg-white text-gray-600 hover:bg-gray-50 border-l border-gray-200">5일</button>
|
|
<button data-date="20" class="date-tab px-3 py-1.5 bg-white text-gray-600 hover:bg-gray-50 border-l border-gray-200">20일</button>
|
|
</div>
|
|
|
|
<!-- 정렬 탭 -->
|
|
<div class="flex rounded-lg border border-gray-200 overflow-hidden text-xs font-medium">
|
|
<button data-sort="3" class="sort-tab px-3 py-1.5 bg-blue-500 text-white">등락률순</button>
|
|
<button data-sort="1" class="sort-tab px-3 py-1.5 bg-white text-gray-600 hover:bg-gray-50 border-l border-gray-200">기간수익률순</button>
|
|
</div>
|
|
|
|
<!-- 테마 검색 -->
|
|
<input id="themeSearch" type="text" placeholder="테마명 검색..."
|
|
class="text-xs px-3 py-1.5 border border-gray-200 rounded-lg focus:outline-none focus:ring-1 focus:ring-blue-400 w-36">
|
|
|
|
<span id="themeCount" class="text-xs text-gray-400 ml-auto"></span>
|
|
</div>
|
|
|
|
<!-- 2열 레이아웃: 테마 목록 + 구성종목 패널 -->
|
|
<div class="flex gap-5 items-start">
|
|
|
|
<!-- 좌: 테마 목록 -->
|
|
<div class="flex-1 min-w-0">
|
|
<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
|
|
<!-- 테이블 헤더 -->
|
|
<div class="grid grid-cols-[2fr_1fr_80px_80px_80px_80px] gap-0 text-xs font-semibold text-gray-500 bg-gray-50 border-b border-gray-100 px-4 py-2.5">
|
|
<span data-col="name" class="theme-col-sort cursor-pointer select-none hover:text-blue-500 transition-colors">테마명 <span class="sort-arrow"></span></span>
|
|
<span>주력종목</span>
|
|
<span data-col="fluRt" class="theme-col-sort text-right cursor-pointer select-none hover:text-blue-500 transition-colors">등락률 <span class="sort-arrow"></span></span>
|
|
<span data-col="periodRt" class="theme-col-sort text-right cursor-pointer select-none hover:text-blue-500 transition-colors">기간수익률 <span class="sort-arrow"></span></span>
|
|
<span data-col="stockCount" class="theme-col-sort text-center cursor-pointer select-none hover:text-blue-500 transition-colors">종목수 <span class="sort-arrow"></span></span>
|
|
<span data-col="risingCount" class="theme-col-sort text-center cursor-pointer select-none hover:text-blue-500 transition-colors">상승/하락 <span class="sort-arrow"></span></span>
|
|
</div>
|
|
<!-- 테마 목록 -->
|
|
<div id="themeList" class="divide-y divide-gray-50">
|
|
<div class="px-4 py-10 text-center text-sm text-gray-400">데이터를 불러오는 중...</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 우: 구성종목 패널 (sticky) -->
|
|
<div id="themeDetailPanel"
|
|
class="w-80 shrink-0 sticky top-20 self-start bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
|
|
<!-- 초기 안내 -->
|
|
<div id="themeDetailEmpty" class="px-6 py-12 text-center text-sm text-gray-400">
|
|
<p class="text-2xl mb-2">👈</p>
|
|
<p>테마를 클릭하면<br>구성종목을 확인할 수 있습니다.</p>
|
|
</div>
|
|
<!-- 구성종목 내용 (로드 후 표시) -->
|
|
<div id="themeDetailContent" class="hidden">
|
|
<div class="px-4 py-3 border-b border-gray-100 bg-gray-50">
|
|
<p id="detailThemeName" class="font-bold text-gray-800 text-sm truncate"></p>
|
|
<div class="flex items-center gap-3 mt-1 text-xs">
|
|
<span>등락률 <span id="detailFluRt" class="font-semibold"></span></span>
|
|
<span>기간수익률 <span id="detailPeriodRt" class="font-semibold text-purple-600"></span></span>
|
|
</div>
|
|
</div>
|
|
<div id="detailStockList" class="divide-y divide-gray-50 max-h-[70vh] overflow-y-auto"></div>
|
|
</div>
|
|
<div id="themeDetailLoading" class="hidden px-6 py-10 text-center text-sm text-gray-400">
|
|
<div class="animate-pulse">조회 중...</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
{{ end }}
|
|
|
|
{{ define "scripts" }}
|
|
<script src="/static/js/theme.js"></script>
|
|
{{ end }}
|