~20250428 작업사항

1 files changed, 94 insertions, 6 deletions

diff --git a/components/data-table/data-table-advanced-toolbar.tsx b/components/data-table/data-table-advanced-toolbar.tsx
index 7c126c51..256dc125 100644
--- a/components/data-table/data-table-advanced-toolbar.tsx
+++ b/components/data-table/data-table-advanced-toolbar.tsx
@@ -3,6 +3,8 @@
 import * as React from "react"
 import type { DataTableAdvancedFilterField } from "@/types/table"
 import { type Table } from "@tanstack/react-table"
+import { LayoutGrid, TableIcon } from "lucide-react" 
+import { Button } from "@/components/ui/button"
 
 import { cn } from "@/lib/utils"
 import { DataTableFilterList } from "@/components/data-table/data-table-filter-list"
@@ -14,6 +16,36 @@ import { PinRightButton } from "./data-table-pin-right"
 import { DataTableGlobalFilter } from "./data-table-grobal-filter"
 import { DataTableGroupList } from "./data-table-group-list"
 
+// 로컬 스토리지 사용을 위한 훅
+const useLocalStorage = <T,>(key: string, initialValue: T): [T, (value: T | ((val: T) => T)) => void] => {
+  const [storedValue, setStoredValue] = React.useState<T>(() => {
+    if (typeof window === "undefined") {
+      return initialValue
+    }
+    try {
+      const item = window.localStorage.getItem(key)
+      return item ? JSON.parse(item) : initialValue
+    } catch (error) {
+      console.error(error)
+      return initialValue
+    }
+  })
+
+  const setValue = (value: T | ((val: T) => T)) => {
+    try {
+      const valueToStore = value instanceof Function ? value(storedValue) : value
+      setStoredValue(valueToStore)
+      if (typeof window !== "undefined") {
+        window.localStorage.setItem(key, JSON.stringify(valueToStore))
+      }
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
+  return [storedValue, setValue]
+}
+
 interface DataTableAdvancedToolbarProps<TData>
   extends React.HTMLAttributes<HTMLDivElement> {
   /**
@@ -58,6 +90,29 @@ interface DataTableAdvancedToolbarProps<TData>
    * @default true
    */
   shallow?: boolean
+
+  /**
+   * 컴팩트 모드를 사용할지 여부 (토글 버튼을 숨기려면 null)
+   * @default true
+   */
+  enableCompactToggle?: boolean | null
+
+  /**
+   * 초기 컴팩트 모드 상태
+   * @default false
+   */
+  initialCompact?: boolean
+
+  /**
+   * 컴팩트 모드가 변경될 때 호출될 콜백 함수
+   */
+  onCompactChange?: (isCompact: boolean) => void
+
+  /**
+   * 컴팩트 모드 상태를 저장할 로컬 스토리지 키
+   * @default "dataTableCompact"
+   */
+  compactStorageKey?: string
 }
 
 export function DataTableAdvancedToolbar<TData>({
@@ -65,10 +120,30 @@ export function DataTableAdvancedToolbar<TData>({
   filterFields = [],
   debounceMs = 300,
   shallow = true,
+  enableCompactToggle = true,
+  initialCompact = false,
+  onCompactChange,
+  compactStorageKey = "dataTableCompact",
   children,
   className,
   ...props
 }: DataTableAdvancedToolbarProps<TData>) {
+  // 컴팩트 모드 상태 관리
+  const [isCompact, setIsCompact] = useLocalStorage<boolean>(
+    compactStorageKey,
+    initialCompact
+  )
+
+  // 컴팩트 모드 변경 시 콜백 호출
+  React.useEffect(() => {
+    onCompactChange?.(isCompact)
+  }, [isCompact, onCompactChange])
+
+  // 컴팩트 모드 토글 핸들러
+  const handleToggleCompact = React.useCallback(() => {
+    setIsCompact(prev => !prev)
+  }, [setIsCompact])
+
   return (
     <div
       className={cn(
@@ -78,7 +153,19 @@ export function DataTableAdvancedToolbar<TData>({
       {...props}
     >
       <div className="flex items-center gap-2">
-      <DataTableViewOptions table={table} />
+      {enableCompactToggle && (
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={handleToggleCompact}
+            title={isCompact ? "확장 보기로 전환" : "컴팩트 보기로 전환"}
+            className="h-8 px-2"
+          >
+            {isCompact ? <LayoutGrid size={16} /> : <TableIcon size={16} />}
+            {/* <span className="ml-2 text-xs">{isCompact ? "확장 보기" : "컴팩트 보기"}</span> */}
+          </Button>
+        )}
+        <DataTableViewOptions table={table} />
         <DataTableFilterList
           table={table}
           filterFields={filterFields}
@@ -90,15 +177,16 @@ export function DataTableAdvancedToolbar<TData>({
           debounceMs={debounceMs}
           shallow={shallow}
         />
-        <DataTableGroupList table={table}  debounceMs={debounceMs}/>
-        <PinLeftButton table={table}/>
-        <PinRightButton table={table}/>
+        <DataTableGroupList table={table} debounceMs={debounceMs} />
+        <PinLeftButton table={table} />
+        <PinRightButton table={table} />
         <DataTableGlobalFilter />
       </div>
       <div className="flex items-center gap-2">
-        {children}
+        {/* 컴팩트 모드 토글 버튼 */}
 
+        {children}
       </div>
     </div>
   )
-}
+}
\ No newline at end of file