diff options
Diffstat (limited to 'hooks')
| -rw-r--r-- | hooks/use-local-storage.ts | 48 | ||||
| -rw-r--r-- | hooks/useAutoSizeColumns.ts | 40 |
2 files changed, 79 insertions, 9 deletions
diff --git a/hooks/use-local-storage.ts b/hooks/use-local-storage.ts new file mode 100644 index 00000000..f24c80db --- /dev/null +++ b/hooks/use-local-storage.ts @@ -0,0 +1,48 @@ +"use client" + +import { useState, useEffect } from 'react' + +export function useLocalStorage<T>( + key: string, + initialValue: T +): [T, (value: T) => void] { + // State to store our value + const [storedValue, setStoredValue] = useState<T>(initialValue) + + // Initialize with stored value or initial value + useEffect(() => { + try { + // Get from local storage by key + if (typeof window !== 'undefined') { + const item = window.localStorage.getItem(key) + // Parse stored json or if none return initialValue + setStoredValue(item ? JSON.parse(item) : initialValue) + } + } catch (error) { + // If error also return initialValue + console.error('Error reading from localStorage:', error) + setStoredValue(initialValue) + } + }, [key, initialValue]) + + // Return a wrapped version of useState's setter function that + // persists the new value to localStorage. + const setValue = (value: T) => { + try { + // Allow value to be a function so we have same API as useState + const valueToStore = + value instanceof Function ? value(storedValue) : value + // Save state + setStoredValue(valueToStore) + // Save to local storage + if (typeof window !== 'undefined') { + window.localStorage.setItem(key, JSON.stringify(valueToStore)) + } + } catch (error) { + // A more advanced implementation would handle the error case + console.error('Error writing to localStorage:', error) + } + } + + return [storedValue, setValue] +}
\ No newline at end of file diff --git a/hooks/useAutoSizeColumns.ts b/hooks/useAutoSizeColumns.ts index 3750de97..6e9cc7dc 100644 --- a/hooks/useAutoSizeColumns.ts +++ b/hooks/useAutoSizeColumns.ts @@ -1,6 +1,13 @@ -// hooks/useAutoSizeColumns.ts import { useEffect, useRef } from "react" -import { Table } from "@tanstack/react-table" +import { Table, ColumnDef } from "@tanstack/react-table" + +// 커스텀 메타 타입 정의 +declare module '@tanstack/react-table' { + interface ColumnMeta<TData, TValue> { + paddingFactor?: number; + excelHeader?: string; + } +} export function useAutoSizeColumns<T>( table: Table<T>, @@ -29,7 +36,7 @@ export function useAutoSizeColumns<T>( const columnId = column.id // Get column-specific padding from meta if available - const paddingFactor = column.columnDef.meta?.paddingFactor as number || 1 + const paddingFactor = column.columnDef.meta?.paddingFactor || 1 const extraPadding = paddingFactor * defaultPadding // Get all cells for this column @@ -41,15 +48,30 @@ export function useAutoSizeColumns<T>( measureElement.style.position = 'absolute' measureElement.style.visibility = 'hidden' measureElement.style.whiteSpace = 'nowrap' - measureElement.style.font = headerElement - ? window.getComputedStyle(headerElement).font + measureElement.style.font = headerElement + ? window.getComputedStyle(headerElement).font : window.getComputedStyle(document.body).font document.body.appendChild(measureElement) - // Measure header - const headerText = headerElement?.textContent || "" - measureElement.textContent = headerText - let maxWidth = measureElement.getBoundingClientRect().width + // Measure header - 헤더 요소 자체의 너비를 직접 측정 + let headerWidth = 0 + if (headerElement) { + // 1. 먼저 텍스트 콘텐츠 측정 + const headerText = headerElement.textContent || "" + measureElement.textContent = headerText + headerWidth = measureElement.getBoundingClientRect().width + + // 2. 헤더에 아이콘이나 다른 요소가 있을 경우를 고려 + // 헤더 요소의 실제 너비 확인 (텍스트외 요소 포함) + const headerClientWidth = headerElement.querySelector('div')?.clientWidth || + headerElement.clientWidth || 0 + + // 텍스트 너비와 실제 요소 너비 중 큰 값 선택 + headerWidth = Math.max(headerWidth, headerClientWidth) + } + + // 초기 최대 너비를 헤더 너비로 설정 + let maxWidth = headerWidth // Measure cells (limit to first 20 for performance) Array.from(cells).slice(0, 20).forEach(cell => { |