diff --git a/src/core/filterHandler.ts b/src/core/filterHandler.ts index 3dbb8ec..8d18954 100644 --- a/src/core/filterHandler.ts +++ b/src/core/filterHandler.ts @@ -52,7 +52,7 @@ export function renderFilterBar(container: HTMLElement, options: FilterOptions) }; container.innerHTML = ` -
+ @@ -108,6 +108,12 @@ export function renderFilterBar(container: HTMLElement, options: FilterOptions) +
+ +
+ 0개 +
+
${getActionButtonsHTML()} `; diff --git a/src/styles/common.css b/src/styles/common.css index 449bd6c..321415a 100644 --- a/src/styles/common.css +++ b/src/styles/common.css @@ -640,3 +640,28 @@ input:checked + .role-slider:before { letter-spacing: -0.02em; } +/* --- Filter Bar Unified Layout Refactoring --- */ +.search-item.keyword-search { + flex: 0 0 320px; +} + +.search-item.result-count-item { + justify-content: flex-end; +} + +.result-count-box { + height: clamp(34px, 4.5vmin, 44px); + display: flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + min-width: 60px; +} + +.result-count-text { + white-space: nowrap; + color: var(--color-blue); + font-size: var(--fs-sm); + font-weight: 700; +} + diff --git a/src/views/List/ListFactory.ts b/src/views/List/ListFactory.ts index 65ad759..2fa5b2b 100644 --- a/src/views/List/ListFactory.ts +++ b/src/views/List/ListFactory.ts @@ -667,6 +667,11 @@ export function createListView(container: HTMLElement, config: ListViewConfig) { let filtered = applyCommonFilters(fullList, currentFilters, config.searchKeys as any[]); if (sortState.key) filtered = dynamicSort(filtered, sortState.key, sortState.direction); + const totalCountEl = filterBar.querySelector('#filter-total-count'); + if (totalCountEl) { + totalCountEl.textContent = `${filtered.length}개`; + } + thead.innerHTML = `${config.columns.map(col => { const isDateCol = col.header.includes('일') || col.header.includes('날짜') || col.header.includes('연월'); const alignmentClass = col.align ? `text-${col.align}` : (isDateCol ? 'text-center' : ''); @@ -693,7 +698,7 @@ export function createListView(container: HTMLElement, config: ListViewConfig) { `; } - return `${displayContent}`; + return `${displayContent}`; }).join('')}`).join(''); tbody.querySelectorAll('.asset-row').forEach((tr, idx) => { tr.addEventListener('click', () => config.onRowClick && config.onRowClick(filtered[idx])); }); @@ -735,6 +740,11 @@ export function createListView(container: HTMLElement, config: ListViewConfig) { e.stopPropagation(); e.preventDefault(); + // Freeze all columns at their current pixel width before dragging + headers.forEach(header => { + header.style.width = `${header.offsetWidth}px`; + }); + startX = e.clientX; startWidth = th.offsetWidth; diff --git a/src/views/List/PcPartListView.ts b/src/views/List/PcPartListView.ts index dd621d9..4224e30 100644 --- a/src/views/List/PcPartListView.ts +++ b/src/views/List/PcPartListView.ts @@ -24,7 +24,6 @@ export function renderPcPartList(container: HTMLElement) { render: a => `${a[ASSET_SCHEMA.HW_STATUS.key] || '보관중'}` }, { header: ASSET_SCHEMA.ASSET_TYPE.ui, sortKey: ASSET_SCHEMA.ASSET_TYPE.key, align: 'center', width: '10%', render: a => a[ASSET_SCHEMA.ASSET_TYPE.key] || '-' }, - { header: ASSET_SCHEMA.ASSET_MFR.ui, sortKey: ASSET_SCHEMA.ASSET_MFR.key, align: 'center', render: a => a[ASSET_SCHEMA.ASSET_MFR.key] || '' }, { header: ASSET_SCHEMA.MODEL_NAME.ui, sortKey: ASSET_SCHEMA.MODEL_NAME.key, render: a => formatInline(a[ASSET_SCHEMA.MODEL_NAME.key] || '-') }, { header: ASSET_SCHEMA.VOLUME.ui, sortKey: ASSET_SCHEMA.VOLUME.key, align: 'center', render: a => a[ASSET_SCHEMA.VOLUME.key] || '-' }, { header: ASSET_SCHEMA.MONITOR_INCH.ui, sortKey: ASSET_SCHEMA.MONITOR_INCH.key, align: 'center', render: a => a[ASSET_SCHEMA.MONITOR_INCH.key] || '-' }, diff --git a/src/views/List/table.css b/src/views/List/table.css index dfda2b1..41d8f2f 100644 --- a/src/views/List/table.css +++ b/src/views/List/table.css @@ -39,9 +39,11 @@ table { width: 100%; + min-width: 100%; + max-width: none; border-collapse: separate; border-spacing: 0; - table-layout: fixed; /* Force fixed layout to prevent horizontal scroll */ + table-layout: fixed; } th, td {