From 4522f19d40f50261125e024a5ccde4971a9436cd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EA=B3=A4?=
 <lightone2017@codebridge-x.com>
Date: Sun, 8 Mar 2026 19:47:47 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20[rd]=20=EB=B0=A9=ED=99=94=EC=85=94?=
 =?UTF-8?q?=ED=84=B0=203D=20=ED=83=AD=20=EC=BB=A8=ED=8A=B8=EB=A1=A4=20?=
 =?UTF-8?q?=ED=8C=A8=EB=84=90=20=EC=95=95=EC=B6=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 부품 표시 2열 grid로 변경 (7항목이 4행으로 압축)
- 배경색 선택 인라인 소형 버튼 (20px)으로 변경
- 조명 프리셋 한 줄 인라인 배치
- 토글 스위치 크기 축소 (2.5rem→2rem)
- 슬라이더 라벨 인라인화, 전체 여백 축소
---
 .../rd/fire-shutter-drawing/index.blade.php   | 87 +++++++++++--------
 1 file changed, 50 insertions(+), 37 deletions(-)

diff --git a/resources/views/rd/fire-shutter-drawing/index.blade.php b/resources/views/rd/fire-shutter-drawing/index.blade.php
index cbdfef0d..c01cb089 100644
--- a/resources/views/rd/fire-shutter-drawing/index.blade.php
+++ b/resources/views/rd/fire-shutter-drawing/index.blade.php
@@ -18,10 +18,10 @@
 .fs-label { display: block; color: #94a3b8; font-size: 0.75rem; font-weight: 700; margin-bottom: 0.25rem; }
 .fs-section { background: rgba(15,23,42,0.5); border-radius: 1.5rem; padding: 1.5rem; border: 1px solid #1e293b; }
 .fs-badge { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 0.75rem; font-size: 0.625rem; font-weight: 900; color: white; }
-.fs-toggle { position: relative; width: 2.5rem; height: 1.25rem; background: #334155; border-radius: 9999px; cursor: pointer; transition: background 0.2s; }
+.fs-toggle { position: relative; width: 2rem; height: 1rem; background: #334155; border-radius: 9999px; cursor: pointer; transition: background 0.2s; flex-shrink: 0; }
 .fs-toggle.active { background: #3b82f6; }
-.fs-toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 1rem; height: 1rem; background: white; border-radius: 9999px; transition: transform 0.2s; }
-.fs-toggle.active::after { transform: translateX(1.25rem); }
+.fs-toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 0.75rem; height: 0.75rem; background: white; border-radius: 9999px; transition: transform 0.2s; }
+.fs-toggle.active::after { transform: translateX(1rem); }
 .fs-select { width: 100%; background: rgba(2,6,23,0.8); border: 1px solid #334155; border-radius: 0.75rem; padding: 0.5rem 0.75rem; color: #f8fafc; font-size: 0.875rem; font-weight: 700; outline: none; }
 .fs-btn { padding: 0.5rem 1rem; border-radius: 0.75rem; font-size: 0.75rem; font-weight: 900; cursor: pointer; transition: all 0.2s; border: none; }
 .fs-btn-primary { background: #3b82f6; color: white; }
@@ -267,50 +267,63 @@
 
                 <!-- ========== 3D TAB CONTROLS ========== -->
                 <div id="ctrl3D" class="hidden">
-                    <section class="fs-section space-y-5">
-                        <h2 class="text-lg font-black text-white flex items-center gap-3">
-                            <span class="fs-badge bg-cyan-600">3D</span>
-                            3D 렌더링 설정
+                    <section class="fs-section space-y-3">
+                        <h2 class="text-sm font-black text-white flex items-center gap-2">
+                            <span class="fs-badge bg-cyan-600" style="width:1.25rem;height:1.25rem;font-size:0.5rem;">3D</span>
+                            3D 설정
                         </h2>
 
                         <div>
-                            <label class="fs-label">셔터 개폐율 (<span id="shutterPosLabel">100</span>%)</label>
-                            <input type="range" id="shutterPos" min="0" max="100" value="100" class="w-full accent-blue-500" oninput="fs3dShutterPos(this.value)">
-                            <div class="flex justify-between text-[10px] text-slate-500 mt-1"><span>전개 0%</span><span>전폐 100%</span></div>
+                            <div class="flex items-center justify-between mb-1">
+                                <label class="text-[11px] text-slate-400 font-bold">개폐율</label>
+                                <span id="shutterPosLabel" class="text-[11px] text-blue-400 font-black">100%</span>
+                            </div>
+                            <input type="range" id="shutterPos" min="0" max="100" value="100" class="w-full accent-blue-500" style="height:4px;" oninput="fs3dShutterPos(this.value)">
                         </div>
 
                         <div>
-                            <label class="fs-label">케이스 투명도 (<span id="opacityLabel">30</span>%)</label>
-                            <input type="range" id="caseOpacity" min="0" max="100" value="30" class="w-full accent-blue-500" oninput="fs3dOpacity(this.value)">
+                            <div class="flex items-center justify-between mb-1">
+                                <label class="text-[11px] text-slate-400 font-bold">투명도</label>
+                                <span id="opacityLabel" class="text-[11px] text-blue-400 font-black">30%</span>
+                            </div>
+                            <input type="range" id="caseOpacity" min="0" max="100" value="30" class="w-full accent-blue-500" style="height:4px;" oninput="fs3dOpacity(this.value)">
                         </div>
 
-                        <h2 class="text-sm font-black text-slate-400 mt-2">부품 표시</h2>
-                        <div class="space-y-2">
-                            <div class="flex items-center justify-between"><span class="text-xs text-slate-400">셔터박스</span><div class="fs-toggle active" onclick="fsToggle3d(this,'case')"></div></div>
-                            <div class="flex items-center justify-between"><span class="text-xs text-slate-400">샤프트</span><div class="fs-toggle active" onclick="fsToggle3d(this,'shaft')"></div></div>
-                            <div class="flex items-center justify-between"><span class="text-xs text-slate-400">모터</span><div class="fs-toggle active" onclick="fsToggle3d(this,'motor')"></div></div>
-                            <div class="flex items-center justify-between"><span class="text-xs text-slate-400">가이드레일</span><div class="fs-toggle active" onclick="fsToggle3d(this,'rails')"></div></div>
-                            <div class="flex items-center justify-between"><span class="text-xs text-slate-400">슬랫 커튼</span><div class="fs-toggle active" onclick="fsToggle3d(this,'slats')"></div></div>
-                            <div class="flex items-center justify-between"><span class="text-xs text-slate-400">하장바</span><div class="fs-toggle active" onclick="fsToggle3d(this,'bottomBar')"></div></div>
-                            <div class="flex items-center justify-between"><span class="text-xs text-slate-400">방화벽</span><div class="fs-toggle active" onclick="fsToggle3d(this,'wall')"></div></div>
+                        <div class="border-t border-slate-800 pt-2">
+                            <label class="text-[11px] text-slate-500 font-bold mb-1.5 block">부품</label>
+                            <div class="grid grid-cols-2 gap-x-3 gap-y-1">
+                                <div class="flex items-center justify-between"><span class="text-[11px] text-slate-400">박스</span><div class="fs-toggle active" onclick="fsToggle3d(this,'case')"></div></div>
+                                <div class="flex items-center justify-between"><span class="text-[11px] text-slate-400">샤프트</span><div class="fs-toggle active" onclick="fsToggle3d(this,'shaft')"></div></div>
+                                <div class="flex items-center justify-between"><span class="text-[11px] text-slate-400">모터</span><div class="fs-toggle active" onclick="fsToggle3d(this,'motor')"></div></div>
+                                <div class="flex items-center justify-between"><span class="text-[11px] text-slate-400">레일</span><div class="fs-toggle active" onclick="fsToggle3d(this,'rails')"></div></div>
+                                <div class="flex items-center justify-between"><span class="text-[11px] text-slate-400">슬랫</span><div class="fs-toggle active" onclick="fsToggle3d(this,'slats')"></div></div>
+                                <div class="flex items-center justify-between"><span class="text-[11px] text-slate-400">하장바</span><div class="fs-toggle active" onclick="fsToggle3d(this,'bottomBar')"></div></div>
+                                <div class="flex items-center justify-between"><span class="text-[11px] text-slate-400">벽</span><div class="fs-toggle active" onclick="fsToggle3d(this,'wall')"></div></div>
+                            </div>
                         </div>
 
-                        <h2 class="text-sm font-black text-slate-400 mt-2">조명 프리셋</h2>
-                        <div class="grid grid-cols-3 gap-2">
-                            <button class="fs-btn fs-btn-ghost active" data-light="default" onclick="fs3dLight('default')">기본</button>
-                            <button class="fs-btn fs-btn-ghost" data-light="studio" onclick="fs3dLight('studio')">스튜디오</button>
-                            <button class="fs-btn fs-btn-ghost" data-light="outdoor" onclick="fs3dLight('outdoor')">야외</button>
+                        <div class="border-t border-slate-800 pt-2">
+                            <div class="flex items-center gap-2">
+                                <label class="text-[11px] text-slate-500 font-bold shrink-0">조명</label>
+                                <div class="flex gap-1 flex-1">
+                                    <button class="fs-btn fs-btn-ghost active flex-1" style="padding:0.25rem 0.5rem;font-size:0.625rem;" data-light="default" onclick="fs3dLight('default')">기본</button>
+                                    <button class="fs-btn fs-btn-ghost flex-1" style="padding:0.25rem 0.5rem;font-size:0.625rem;" data-light="studio" onclick="fs3dLight('studio')">스튜디오</button>
+                                    <button class="fs-btn fs-btn-ghost flex-1" style="padding:0.25rem 0.5rem;font-size:0.625rem;" data-light="outdoor" onclick="fs3dLight('outdoor')">야외</button>
+                                </div>
+                            </div>
                         </div>
 
-                        <div>
-                            <label class="fs-label">배경색</label>
-                            <div class="grid grid-cols-6 gap-1.5 mt-1">
-                                <button onclick="fs3dBg('#ffffff')" class="w-full aspect-square rounded border-2 border-slate-600 hover:border-blue-400" style="background:#ffffff"></button>
-                                <button onclick="fs3dBg('#f0f0f0')" class="w-full aspect-square rounded border-2 border-slate-600 hover:border-blue-400" style="background:#f0f0f0"></button>
-                                <button onclick="fs3dBg('#808080')" class="w-full aspect-square rounded border-2 border-slate-600 hover:border-blue-400" style="background:#808080"></button>
-                                <button onclick="fs3dBg('#303030')" class="w-full aspect-square rounded border-2 border-slate-600 hover:border-blue-400" style="background:#303030"></button>
-                                <button onclick="fs3dBg('#1a1a2e')" class="w-full aspect-square rounded border-2 border-slate-600 hover:border-blue-400" style="background:#1a1a2e"></button>
-                                <button onclick="fs3dBg('#000000')" class="w-full aspect-square rounded border-2 border-slate-600 hover:border-blue-400" style="background:#000000"></button>
+                        <div class="border-t border-slate-800 pt-2">
+                            <div class="flex items-center gap-2">
+                                <label class="text-[11px] text-slate-500 font-bold shrink-0">배경</label>
+                                <div class="flex gap-1 flex-1">
+                                    <button onclick="fs3dBg('#ffffff')" class="w-5 h-5 rounded border border-slate-600 hover:border-blue-400 shrink-0" style="background:#fff"></button>
+                                    <button onclick="fs3dBg('#f0f0f0')" class="w-5 h-5 rounded border border-slate-600 hover:border-blue-400 shrink-0" style="background:#f0f0f0"></button>
+                                    <button onclick="fs3dBg('#808080')" class="w-5 h-5 rounded border border-slate-600 hover:border-blue-400 shrink-0" style="background:#808080"></button>
+                                    <button onclick="fs3dBg('#303030')" class="w-5 h-5 rounded border border-slate-600 hover:border-blue-400 shrink-0" style="background:#303030"></button>
+                                    <button onclick="fs3dBg('#1a1a2e')" class="w-5 h-5 rounded border border-slate-600 hover:border-blue-400 shrink-0" style="background:#1a1a2e"></button>
+                                    <button onclick="fs3dBg('#000000')" class="w-5 h-5 rounded border border-slate-600 hover:border-blue-400 shrink-0" style="background:#000"></button>
+                                </div>
                             </div>
                         </div>
                     </section>
@@ -1126,12 +1139,12 @@ function fs3dBuild() {
     // 3D Controls
     window.fs3dShutterPos = function(v) {
         S.td.shutterPos = Number(v);
-        $('shutterPosLabel').textContent = v;
+        $('shutterPosLabel').textContent = v + '%';
         fs3dBuild();
     };
     window.fs3dOpacity = function(v) {
         S.td.caseOpacity = Number(v) / 100;
-        $('opacityLabel').textContent = v;
+        $('opacityLabel').textContent = v + '%';
         if (meshes.case) meshes.case.material.opacity = S.td.caseOpacity;
     };
     window.fsToggle3d = function(el, key) {