From 4e7c4e2972440f12cb3f0c1d513f0fb3ddf53ab3 Mon Sep 17 00:00:00 2001
From: Claude Haiku <b18206.tdc.hanmacgroup@gmail.com>
Date: Mon, 19 Oct 2026 15:31:00 +0900
Subject: [PATCH] =?UTF-8?q?=EC=9A=B0=EC=B8=A1=20=ED=8C=A8=EB=84=90=20?=
 =?UTF-8?q?=EC=9E=AC=EC=84=A4=EA=B3=84=20-=20=EB=AA=85=ED=99=95=ED=95=9C?=
 =?UTF-8?q?=20=EC=A0=95=EB=B3=B4=20=EA=B5=AC=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

개선사항:
- 패널 너비 축소 (450→350px)
- 명확한 섹션 구분
- 부재 구성 상세 정보 추가
- 조작 가이드 명시화
- 색상 범례 개선

역할:
• 📈 부재 수량: 전체 통계
• 🏗️ 부재 구성: 각 타입별 상세 정보
• 🎨 범례: 색상 의미
• ⌨️ 조작: 마우스/화면 사용 방법
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
---
 out/viewer-correct.html | 136 ++++++++++++++++++++++++++++------------
 1 file changed, 95 insertions(+), 41 deletions(-)

diff --git a/out/viewer-correct.html b/out/viewer-correct.html
index 0c86857..2eebc8f 100644
--- a/out/viewer-correct.html
+++ b/out/viewer-correct.html
@@ -31,32 +31,43 @@
         }
 
         .panel {
-            width: 450px;
+            width: 350px;
             background: #1a1f2e;
-            padding: 25px;
+            padding: 20px;
             overflow-y: auto;
             border-left: 1px solid #2d3748;
             display: flex;
             flex-direction: column;
+            font-size: 12px;
         }
 
         .panel h2 {
-            color: #4caf50;
-            font-size: 18px;
-            margin-bottom: 20px;
-            padding-bottom: 12px;
-            border-bottom: 2px solid #4caf50;
+            color: #10b981;
+            font-size: 14px;
+            margin-bottom: 15px;
+            padding-bottom: 8px;
+            border-bottom: 2px solid #10b981;
+            font-weight: 700;
+        }
+
+        .panel h3 {
+            color: #cbd5e0;
+            font-size: 11px;
+            margin-bottom: 10px;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
         }
 
         .badge {
             display: inline-block;
             background: #10b981;
-            color: #fff;
-            padding: 6px 14px;
-            border-radius: 20px;
-            font-size: 11px;
+            color: #1a1f2e;
+            padding: 4px 10px;
+            border-radius: 16px;
+            font-size: 10px;
             font-weight: 700;
-            margin-bottom: 15px;
+            margin-bottom: 12px;
+            width: fit-content;
         }
 
         .loading {
@@ -190,47 +201,90 @@
     <div class="container">
         <canvas id="canvas"></canvas>
         <div class="panel">
-            <h2>🏗️ 가시설 3D</h2>
+            <h2>📊 모델 정보</h2>
+
+            <span class="badge">가시설 계획도 3D</span>
 
             <div id="loadingMsg" class="loading">
-                ⏳ 로드 중...
+                ⏳ 모델 로드 중...
             </div>
 
+            <!-- 통계 섹션 -->
+            <div class="section" style="margin-top: 10px;">
+                <h3>📈 부재 수량</h3>
+                <div class="stat-row">
+                    <span class="stat-label">총 부재:</span>
+                    <span class="stat-value" id="totalParts">-</span>
+                </div>
+                <div class="stat-row">
+                    <span class="stat-label">총 부피:</span>
+                    <span class="stat-value" id="totalVolume">-</span>
+                </div>
+            </div>
+
+            <!-- 부재 구성 섹션 -->
             <div class="section">
-                <h3>통계</h3>
-                <div class="stat-row">
-                    <span class="stat-label">부재:</span>
-                    <span class="stat-value" id="totalParts">562개</span>
-                </div>
-                <div class="stat-row">
-                    <span class="stat-label">부피:</span>
-                    <span class="stat-value" id="totalVolume">214,872 m³</span>
+                <h3>🏗️ 부재 구성</h3>
+                <div style="font-size: 11px; line-height: 1.6; color: #cbd5e0;">
+                    <div style="margin-bottom: 8px;">
+                        <strong style="color: #ff6b6b;">가시설4</strong> (H-빔)<br>
+                        <span style="color: #a0aec0;">52개</span>
+                    </div>
+                    <div style="margin-bottom: 8px;">
+                        <strong style="color: #7ed321;">h-pile2</strong> (기초파일)<br>
+                        <span style="color: #a0aec0;">244개, H-400×400×8000mm</span>
+                    </div>
+                    <div style="margin-bottom: 8px;">
+                        <strong style="color: #4a90e2;">토류판</strong> (흙막이판)<br>
+                        <span style="color: #a0aec0;">240개, PL-700×360×14mm</span>
+                    </div>
+                    <div style="margin-bottom: 8px;">
+                        <strong style="color: #7ed321;">H-PILE</strong> (파일)<br>
+                        <span style="color: #a0aec0;">26개</span>
+                    </div>
+                    <div>
+                        <strong style="color: #f5a623;">스터럿</strong> (버팀목)<br>
+                        <span style="color: #a0aec0;">26개</span>
+                    </div>
                 </div>
             </div>
 
-            <div class="legend">
-                <div class="legend-item">
-                    <div class="legend-color" style="background: #ff6b6b;"></div>
-                    <span>H-빔</span>
-                </div>
-                <div class="legend-item">
-                    <div class="legend-color" style="background: #7ed321;"></div>
-                    <span>파일</span>
-                </div>
-                <div class="legend-item">
-                    <div class="legend-color" style="background: #4a90e2;"></div>
-                    <span>판재</span>
-                </div>
-                <div class="legend-item">
-                    <div class="legend-color" style="background: #f5a623;"></div>
-                    <span>버팀목</span>
+            <!-- 범례 섹션 -->
+            <div class="section">
+                <h3>🎨 범례</h3>
+                <div class="legend" style="grid-template-columns: 1fr 1fr; gap: 8px;">
+                    <div class="legend-item">
+                        <div class="legend-color" style="background: #ff6b6b;"></div>
+                        <span>H-빔</span>
+                    </div>
+                    <div class="legend-item">
+                        <div class="legend-color" style="background: #7ed321;"></div>
+                        <span>파일</span>
+                    </div>
+                    <div class="legend-item">
+                        <div class="legend-color" style="background: #4a90e2;"></div>
+                        <span>판재</span>
+                    </div>
+                    <div class="legend-item">
+                        <div class="legend-color" style="background: #f5a623;"></div>
+                        <span>버팀목</span>
+                    </div>
                 </div>
             </div>
 
+            <!-- 조작 가이드 -->
             <div class="controls">
-                <strong>조작</strong><br>
-                드래그: 회전<br>
-                휠: 확대/축소
+                <h3>⌨️ 조작</h3>
+                <div style="font-size: 11px; color: #cbd5e0; line-height: 1.8;">
+                    <strong>마우스:</strong><br>
+                    • 좌클릭 드래그 = 회전<br>
+                    • 휠 스크롤 = 확대/축소<br>
+                    <br>
+                    <strong>화면:</strong><br>
+                    • 3D 배치 확인<br>
+                    • 부재 형상 검증<br>
+                    • 구조 파악
+                </div>
             </div>
         </div>
     </div>