1 files changed, 45 insertions, 26 deletions
diff --git a/lib/data-table.ts b/lib/data-table.ts
index 4fed7b9b..4ad57d76 100644
--- a/lib/data-table.ts
+++ b/lib/data-table.ts
@@ -17,41 +17,60 @@ import { FilterFn, Row  } from "@tanstack/react-table"
  * @param options.withBorder - Whether to show a box shadow between pinned and scrollable columns.
  * @returns A React.CSSProperties object containing the calculated styles.
  */
-export function getCommonPinningStyles<TData>({
+export function getCommonPinningStylesWithBorder<TData>({
   column,
-  withBorder = false,
+  withBorder = true,
 }: {
   column: Column<TData>
-  /**
-   * Show box shadow between pinned and scrollable columns.
-   * @default false
-   */
   withBorder?: boolean
 }): React.CSSProperties {
-  const isPinned = column.getIsPinned()
-  const isLastLeftPinnedColumn =
-    isPinned === "left" && column.getIsLastColumn("left")
-  const isFirstRightPinnedColumn =
-    isPinned === "right" && column.getIsFirstColumn("right")
-
-  return {
-    boxShadow: withBorder
-      ? isLastLeftPinnedColumn
-        ? "-4px 0 4px -4px hsl(var(--border)) inset"
-        : isFirstRightPinnedColumn
-          ? "4px 0 4px -4px hsl(var(--border)) inset"
-          : undefined
-      : undefined,
-    left: isPinned === "left" ? `${column.getStart("left")}px` : undefined,
-    right: isPinned === "right" ? `${column.getAfter("right")}px` : undefined,
-    opacity: isPinned ? 0.97 : 1,
-    position: isPinned ? "sticky" : "relative",
-    background: isPinned ? "hsl(var(--background))" : "hsl(var(--background))",
+  const pinnedSide = column.getIsPinned() as "left" | "right" | false
+     
+  // 안전한 방식으로 위치 확인
+  const isLastLeft = pinnedSide === "left" && column.getIsLastColumn?.("left")
+  const isFirstRight = pinnedSide === "right" && column.getIsFirstColumn?.("right")
+ 
+  const styles: React.CSSProperties = {
+    /* ▒▒ sticky 위치 ▒▒ */
+    position: pinnedSide ? "sticky" : "relative",
+    left: pinnedSide === "left" ? `${column.getStart("left")}px` : undefined,
+    right: pinnedSide === "right" ? `${column.getAfter("right")}px` : undefined,
+         
+    /* ▒▒ 기타 스타일 ▒▒ */
     width: column.getSize(),
-    zIndex: isPinned ? 1 : 0,
+    // 불투명한 배경색 설정 - 테이블의 배경색과 동일하게
+    background: pinnedSide ? "hsl(var(--background))" : "transparent",
+    zIndex: pinnedSide ? 1 : 0,
   }
+ 
+  // 구분선 및 그림자 추가 (선택사항)
+  // if (withBorder && pinnedSide) {
+  //   if (pinnedSide === "left" && isLastLeft) {
+  //     // 좌측 핀의 마지막 컬럼에만 우측 그림자 추가
+  //     styles.boxShadow = "2px 0 4px -2px rgba(0, 0, 0, 0.1)"
+  //     styles.borderRight = "1px solid hsl(var(--border))"
+  //   } else if (pinnedSide === "right" && isFirstRight) {
+  //     // 우측 핀의 첫 컬럼에만 좌측 그림자 추가
+  //     styles.boxShadow = "-2px 0 4px -2px rgba(0, 0, 0, 0.1)"
+  //     styles.borderLeft = "1px solid hsl(var(--border))"
+  //   }
+  // }
+ 
+  return styles
 }
 
+// 디버깅을 위한 헬퍼 함수
+export function debugPinningInfo<TData>(column: Column<TData>) {
+  console.log("Column Debug Info:", {
+    id: column.id,
+    isPinned: column.getIsPinned(),
+    start: column.getStart("left"),
+    after: column.getAfter("right"),
+    size: column.getSize(),
+    isLastLeft: column.getIsLastColumn?.("left"),
+    isFirstRight: column.getIsFirstColumn?.("right"),
+  })
+}
 /**
  * Determine the default filter operator for a given column type.
  *