SamProject/sam-manage
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: [bim] 하단 툴바 2행 시 스크롤바 제거 및 컴팩트화

Browse Source 
- 컨테이너 padding/gap 축소 (px-4 py-2 gap-3 → px-3 py-1 gap-1.5)
- 버튼 padding 축소 (py-1.5 → py-1, px-2/3 → px-1.5/2)
- 버튼 내부 gap 축소 (gap-1 → gap-0.5)
- 구분선 높이 축소 (h-6 → h-5)
- overflow-hidden 추가로 스크롤바 방지
This commit is contained in:
김보곤
2026-03-13 08:00:27 +09:00
parent 0de0e59ba3
commit d1489427bc
1 changed files with 23 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
resources/views/juil/bim-viewer.blade.php
View File

@@ -1027,68 +1027,68 @@ function BimToolbar({ onView, visibility, onToggle, wireframe, onWireframe, mode
const handleFile = (e) => { const f = e.target.files?.[0]; if (f) onUpload(f); e.target.value = ''; };
return (
<div className="shrink-0 bg-white/95 backdrop-blur border-t border-gray-200 px-4 py-2 flex items-center gap-3 text-xs z-10 flex-wrap">
<div className="shrink-0 bg-white/95 backdrop-blur border-t border-gray-200 px-3 py-1 flex items-center gap-1.5 text-xs z-10 flex-wrap overflow-hidden">
{/* IFC 업로드 */}
<div className="flex items-center gap-1">
<input ref={fileRef} type="file" accept=".ifc" className="hidden" onChange={handleFile} />
<button onClick={() => fileRef.current?.click()}
className="flex items-center gap-1 px-3 py-1.5 rounded bg-blue-600 text-white hover:bg-blue-700 transition font-semibold">
<i className="ri-upload-2-line text-sm"></i> IFC 업로드
className="flex items-center gap-1 px-2 py-1 rounded bg-blue-600 text-white hover:bg-blue-700 transition font-semibold">
<i className="ri-upload-2-line"></i> IFC 업로드
</button>
{mode === 'ifc' && (
<button onClick={onSwitchDemo} className="flex items-center gap-1 px-2 py-1.5 rounded bg-gray-200 text-gray-700 hover:bg-gray-300 transition">
<i className="ri-building-line text-sm"></i> 데모 모델
<button onClick={onSwitchDemo} className="flex items-center gap-1 px-2 py-1 rounded bg-gray-200 text-gray-700 hover:bg-gray-300 transition">
<i className="ri-building-line"></i> 데모 모델
</button>
)}
</div>
<div className="w-px h-6 bg-gray-300"></div>
<div className="w-px h-5 bg-gray-300"></div>
{/* 시점 */}
<div className="flex items-center gap-1">
<div className="flex items-center gap-0.5">
<span className="text-gray-500 font-semibold mr-1">시점</span>
{views.map(v => (
<button key={v.id} onClick={() => onView(v.id)}
className="flex items-center gap-1 px-2 py-1.5 rounded hover:bg-blue-50 hover:text-blue-700 text-gray-600 transition" title={v.label}>
<i className={`${v.icon} text-sm`}></i><span className="hidden xl:inline">{v.label}</span>
className="flex items-center gap-0.5 px-1.5 py-1 rounded hover:bg-blue-50 hover:text-blue-700 text-gray-600 transition" title={v.label}>
<i className={v.icon}></i><span className="hidden xl:inline">{v.label}</span>
</button>
))}
</div>
{mode === 'demo' && (<>
<div className="w-px h-6 bg-gray-300"></div>
<div className="flex items-center gap-1">
<div className="w-px h-5 bg-gray-300"></div>
<div className="flex items-center gap-0.5">
<span className="text-gray-500 font-semibold mr-1">요소</span>
{toggles.map(t => (
<button key={t} onClick={() => onToggle(t)}
className={`flex items-center gap-1 px-2 py-1.5 rounded transition ${visibility[t] !== false ? 'bg-gray-100 text-gray-700' : 'bg-gray-50 text-gray-300 line-through'}`} title={TYPE_LABEL[t]}>
<i className={`${TYPE_ICONS[t] || 'ri-checkbox-blank-line'} text-sm`}></i><span className="hidden xl:inline">{TYPE_LABEL[t]}</span>
className={`flex items-center gap-0.5 px-1.5 py-1 rounded transition ${visibility[t] !== false ? 'bg-gray-100 text-gray-700' : 'bg-gray-50 text-gray-300 line-through'}`} title={TYPE_LABEL[t]}>
<i className={TYPE_ICONS[t] || 'ri-checkbox-blank-line'}></i><span className="hidden xl:inline">{TYPE_LABEL[t]}</span>
</button>
))}
</div>
</>)}
<div className="w-px h-6 bg-gray-300"></div>
<div className="w-px h-5 bg-gray-300"></div>
<button onClick={onWireframe}
className={`flex items-center gap-1 px-2 py-1.5 rounded transition ${wireframe ? 'bg-blue-100 text-blue-700' : 'text-gray-600 hover:bg-gray-100'}`}>
<i className="ri-pencil-ruler-2-line text-sm"></i><span className="hidden xl:inline">와이어프레임</span>
className={`flex items-center gap-0.5 px-1.5 py-1 rounded transition ${wireframe ? 'bg-blue-100 text-blue-700' : 'text-gray-600 hover:bg-gray-100'}`}>
<i className="ri-pencil-ruler-2-line"></i><span className="hidden xl:inline">와이어프레임</span>
</button>
<div className="w-px h-6 bg-gray-300"></div>
<div className="w-px h-5 bg-gray-300"></div>
<button onClick={onExportIFC}
className="flex items-center gap-1 px-3 py-1.5 rounded bg-green-600 text-white hover:bg-green-700 transition font-semibold">
<i className="ri-download-2-line text-sm"></i> IFC 다운로드
className="flex items-center gap-1 px-2 py-1 rounded bg-green-600 text-white hover:bg-green-700 transition font-semibold">
<i className="ri-download-2-line"></i> IFC 다운로드
</button>
<div className="w-px h-6 bg-gray-300"></div>
<div className="w-px h-5 bg-gray-300"></div>
<div className="flex items-center gap-1">
<select value={effectId} onChange={e => onEffectChange(Number(e.target.value))}
className="px-2 py-1.5 rounded border border-gray-300 bg-white text-gray-700 text-xs focus:ring-1 focus:ring-blue-500 outline-none">
className="px-1.5 py-1 rounded border border-gray-300 bg-white text-gray-700 text-xs focus:ring-1 focus:ring-blue-500 outline-none">
{SHOW_EFFECTS.map(e => <option key={e.id} value={e.id}>{e.id}. {e.name}</option>)}
</select>
<button onClick={onPlayEffect}
className="flex items-center gap-1 px-3 py-1.5 rounded bg-gradient-to-r from-blue-600 to-indigo-600 text-white hover:from-blue-700 hover:to-indigo-700 transition font-semibold shadow-sm">
<i className="ri-play-line text-sm"></i> 실행
className="flex items-center gap-1 px-2 py-1 rounded bg-gradient-to-r from-blue-600 to-indigo-600 text-white hover:from-blue-700 hover:to-indigo-700 transition font-semibold shadow-sm">
<i className="ri-play-line"></i> 실행
</button>
</div>
</div>