프론트엔드 추가 및 자동매매 로직 개선:

- Svelte 기반 프론트엔드 프로젝트 초기 설정 추가 (`vite`, `tailwindcss` 등 포함).
- "자동매매" 주요 상태 및 규칙 관리 페이지 구현.
- 1차/2차 손절 및 익절 조건 평가 로직 추가(`calcStopTargets`, `evalExitReason` 등).
- 포지션 상세 로그 및 WebSocket 기반 실시간 로그 스트림 추가.
- API 서비스 및 Frontend 간 Proxy 설정(Vite 서버).
- 세션 체크를 위한 `CheckSession` 핸들러 추가.

templates/pages/autotrade.html

@@ -220,11 +220,32 @@
                 <!-- 청산 조건 -->
                 <div class="border-t pt-4">
                     <p class="text-xs font-semibold text-gray-600 mb-3">청산 조건</p>
+
+                    <!-- 2중 손절 설명 -->
+                    <div class="mb-3 p-2.5 bg-orange-50 border border-orange-200 rounded-lg text-xs text-orange-700 leading-relaxed">
+                        <span class="font-semibold">2중 손절:</span>
+                        1차 손절가에 설정 횟수만큼 터치 시 매도,
+                        2차 손절가 도달 시 즉시 매도.
+                        1차 터치 횟수를 0으로 설정하면 단순 손절.
+                    </div>
+
                     <div class="grid grid-cols-2 gap-3">
+                        <!-- 1차 손절 -->
                         <div>
-                            <label class="block text-xs text-gray-700 mb-1">손절 (%)</label>
-                            <input id="fStopLoss" type="number" value="-3" step="0.5"
-                                class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400">
+                            <label class="block text-xs text-gray-700 mb-1">1차 손절 (%)</label>
+                            <input id="fStopLoss1" type="number" value="-2" step="0.5"
+                                class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-400">
+                        </div>
+                        <div>
+                            <label class="block text-xs text-gray-700 mb-1">1차 손절 터치 횟수</label>
+                            <input id="fStopLoss1Count" type="number" value="3" min="0" step="1"
+                                class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-400">
+                        </div>
+                        <!-- 2차 손절 / 익절 -->
+                        <div>
+                            <label class="block text-xs text-gray-700 mb-1">2차 손절 / 즉시 매도 (%)</label>
+                            <input id="fStopLoss" type="number" value="-4" step="0.5"
+                                class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-400">
                         </div>
                         <div>
                             <label class="block text-xs text-gray-700 mb-1">익절 (%)</label>

templates/pages/index.html

@@ -22,11 +22,22 @@
         </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">
+        <table class="w-full text-xs">
+            <thead>
+                <tr class="border-b border-gray-100 text-gray-400">
+                    <th class="px-3 py-2 text-left font-medium">종목</th>
+                    <th class="px-2 py-2 text-right font-medium">현재가</th>
+                    <th class="px-2 py-2 text-right font-medium">등락</th>
+                    <th class="px-2 py-2 text-right font-medium">강도</th>
+                    <th class="w-6"></th>
+                </tr>
+            </thead>
+        </table>
+        <div id="watchlistSidebar" class="max-h-[60vh] overflow-y-auto">
+            <div class="px-4 py-8 text-center text-xs text-gray-400" id="watchlistEmpty">
                 관심종목을 추가해주세요
-            </li>
-        </ul>
+            </div>
+        </div>
     </div>
 </aside>
 {{ end }}