@noraent/nora-datagrid 0.0.68 → 0.0.69

package/lib/cjs/buildPackage.json

@@ -1,6 +1,6 @@
 {
   "name": "@noraent/nora-datagrid",
-  "version": "0.0.68",
+  "version": "0.0.69",
   "module": "./lib/esm/index.js",
   "main": "./lib/cjs/index.js",
   "private": false,
@@ -19,8 +19,9 @@
     "lint": "eslint .",
     "preview": "vite preview",
     "test": "jest",
-    "tsc-build": "tsc -p tsconfig-esm.json && tsc -p tsconfig-cjs.json && npm run copy-scss",
-    "publish:npm": "rm -rf dist && mkdir dist && babel src -d dist --copy-files && npm run copy-package ",
+    "tsc-build": "tsc -p tsconfig-esm.json && tsc -p tsconfig-cjs.json && npm run vite-build && npm run copy-scss",
+    "vite-build": "vite build",
+    "publish:npm": "rm -rf dist && mkdir dist && npm run vite-build && npm run copy-package",
     "copy-package": "cp package.json dist/buildPackage.json && cp package.json lib/cjs/buildPackage.json&& cp package.json lib/esm/buildPackage.json",
     "copy-scss": "cpx \"src/**/*.scss\" lib/cjs && cpx \"src/**/*.scss\" lib/esm"
   },

package/lib/esm/App.js

@@ -12,8 +12,6 @@ import { useEffect, useState } from "react";
 import { DataGrid } from "./DataGrid";
 import { useGridApiRef } from "./hooks/useGridApiRef";
 const RenderCell = (params) => {
-    // const [value, setValue] = useState(0);
-    // const test = useDeferredValue(value);
     useEffect(() => {
         const tt = () => __awaiter(void 0, void 0, void 0, function* () {
             let tt = 0;
@@ -28,12 +26,8 @@ const RenderCell = (params) => {
                     note: `note-${i}`,
                     date: new Date(),
                     currency4: `test-${i}`,
-                    // height: 30,
-                    // height: 20,
-                    // height: Math.floor(Math.random() * 20) + 20,
                 };
             });
-            // setValue(tt);
         });
         requestIdleCallback(() => {
             tt();
@@ -162,7 +156,6 @@ const columns = [
     },
 ];
 function App() {
-    // const ref = React.useRef<GirdApi>(null);
     const ref = useGridApiRef();
     const [dataSource, setDataSource] = useState([]);
     const handleDataSource = () => {
@@ -174,9 +167,6 @@ function App() {
                 note: `note-${i}`,
                 date: new Date(),
                 currency4: `test=${i}`,
-                // height: 30,
-                // height: 20,
-                // height: Math.floor(Math.random() * 20) + 20,
             };
         });
         requestIdleCallback(() => {
@@ -193,14 +183,11 @@ function App() {
                 }, children: "1000000 \uC774\uB3D9" }), _jsx("button", { onClick: () => {
                     handleDataSource();
                 }, children: "\uB370\uC774\uD130 set" }), _jsx("button", { onClick: () => {
-                    // const data = ref.current.getData();
                 }, children: "\uD558" }), _jsx("div", { style: { width: "1200px", height: "600px" }, children: _jsx(DataGrid, { gridRef: ref, columns: columns, dataSource: dataSource }) }), _jsx("button", { children: "dd" })] }));
 }
 export const initialItemsData = () => Array.from({ length: 10 }, (_, i) => {
     return {
         id: i,
-        // height: 36,
-        // height: Math.floor(Math.random() * 20) + 20,
         columns: Array.from({ length: 20 }, (_, j) => ({
             id: `${i}-${j}`,
             width: 150,

package/lib/esm/DataGrid.js

@@ -36,7 +36,6 @@ const DataGridMaster = React.forwardRef((props, _ref) => {
             apiRef.current.initHeightCache();
         });
     }, []);
-    // 변경 된 부분만 반영
     const prevProps = React.useRef(null);
     useUpdateEffect(() => {
         startTransition(() => {

package/lib/esm/buildPackage.json

@@ -1,6 +1,6 @@
 {
   "name": "@noraent/nora-datagrid",
-  "version": "0.0.68",
+  "version": "0.0.69",
   "module": "./lib/esm/index.js",
   "main": "./lib/cjs/index.js",
   "private": false,
@@ -19,8 +19,9 @@
     "lint": "eslint .",
     "preview": "vite preview",
     "test": "jest",
-    "tsc-build": "tsc -p tsconfig-esm.json && tsc -p tsconfig-cjs.json && npm run copy-scss",
-    "publish:npm": "rm -rf dist && mkdir dist && babel src -d dist --copy-files && npm run copy-package ",
+    "tsc-build": "tsc -p tsconfig-esm.json && tsc -p tsconfig-cjs.json && npm run vite-build && npm run copy-scss",
+    "vite-build": "vite build",
+    "publish:npm": "rm -rf dist && mkdir dist && npm run vite-build && npm run copy-package",
     "copy-package": "cp package.json dist/buildPackage.json && cp package.json lib/cjs/buildPackage.json&& cp package.json lib/esm/buildPackage.json",
     "copy-scss": "cpx \"src/**/*.scss\" lib/cjs && cpx \"src/**/*.scss\" lib/esm"
   },

package/lib/esm/common/constants/path.js

@@ -24,15 +24,12 @@ export const GUIDE_PATH = {
 export const buildGuidePath = (...paths) => `/${paths.join("/")}`;
 export const buildFullPath = (path) => {
     const tracePath = (target, currentPath = "") => {
-        // 현재 객체에서 path가 있는 경우
         for (const key in target) {
             if (target[key] && typeof target[key] === "object") {
                 const newPath = currentPath ? `${currentPath}/${target[key].path}` : target[key].path;
-                // 하위 객체 탐색
                 if (target[key].path === path) {
                     return newPath;
                 }
-                // 재귀적으로 하위 경로를 추적
                 const nestedPath = tracePath(target[key], newPath);
                 if (nestedPath)
                     return nestedPath;
@@ -40,6 +37,5 @@ export const buildFullPath = (path) => {
         }
         return "";
     };
-    // 전체 경로를 반환
     return "/" + tracePath(GUIDE_PATH);
 };

package/lib/esm/common/constants/useEventCallback.d.ts

@@ -1,6 +1,3 @@
-/**
- * 항상 최신 상태를 유지 해야할떄 사용
- */
 declare function useEventCallback<Fn extends (...args: any[]) => any = (...args: unknown[]) => unknown>(fn: Fn): Fn;
 declare function useEventCallback<Args extends unknown[], Return>(fn: (...args: Args) => Return): (...args: Args) => Return;
 export default useEventCallback;

package/lib/esm/common/constants/useEventCallback.js

@@ -5,8 +5,6 @@ function useEventCallback(fn) {
     useEnhancedEffect(() => {
         ref.current = fn;
     });
-    return React.useRef((...args) => 
-    // @ts-expect-error hide `this`
-    (0, ref.current)(...args)).current;
+    return React.useRef((...args) => (0, ref.current)(...args)).current;
 }
 export default useEventCallback;

package/lib/esm/common/constants/utils.d.ts

@@ -1,24 +1,5 @@
 import React from "react";
-/**
- * 첫 마운트시 실행 되지 않습니다.
- * 업데이트시 실행하고 싶다면 사용해주세요.
- * @param callback
- * @param deps
- */
 declare function useUpdateEffect(callback: React.EffectCallback, deps: React.DependencyList): void;
-/**
- * Array<Object> 경우 변경 감지하기 힘들기 때문에 별도 hook 구성함
- * 깊은 비교를 통해 종속성 배열의 변경을 감지하는 커스텀 훅
- * @param callback 실행할 효과 함수
- * @param dependencies 종속성 배열
- */
 export declare function useDeepCompareEffect<T>(callback: () => void | (() => void), dependencies: T[]): void;
-/**
- * Array<Object> 경우 변경 감지하기 힘들기 때문에 별도 hook 구성함
- * 깊은 비교와 팩토리 함수를 사용하는 메모이제이션 훅
- * @param factory 계산을 수행하는 팩토리 함수
- * @param deps 의존성 배열
- * @returns 메모이제이션된 계산 결과
- */
 export declare function useDeepCompareMemo<T>(factory: () => T, deps: any[]): T;
 export default useUpdateEffect;

package/lib/esm/common/constants/utils.js

@@ -1,15 +1,8 @@
 import React from "react";
 import _ from "lodash";
-/**
- * 첫 마운트시 실행 되지 않습니다.
- * 업데이트시 실행하고 싶다면 사용해주세요.
- * @param callback
- * @param deps
- */
 function useUpdateEffect(callback, deps) {
     const hasMounted = React.useRef(false);
     React.useEffect(() => {
-        // 첫 번째 렌더링 후 실행되지 않도록 처리
         if (hasMounted.current) {
             callback();
         }
@@ -18,22 +11,6 @@ function useUpdateEffect(callback, deps) {
         }
     }, deps);
 }
-/**
- * Array<Object> 경우 변경 감지하기 힘들기 때문에 별도 hook 구성함
- * 깊은 비교를 통해 종속성 배열의 변경을 감지하는 커스텀 훅
- * @param callback 실행할 효과 함수
- * @param dependencies 종속성 배열
- */
-// export function useDeepCompareEffect<T>(callback: () => void | (() => void), dependencies: T[]): void {
-//   const previousDependenciesRef = React.useRef<T[] | undefined>();
-//   React.useEffect(() => {
-//     const isSame = _.isEqual(previousDependenciesRef.current, dependencies);
-//     if (!isSame) {
-//       previousDependenciesRef.current = _.cloneDeep(dependencies);
-//       return callback();
-//     }
-//   }, [callback, JSON.stringify(dependencies)]);
-// }
 export function useDeepCompareEffect(callback, dependencies) {
     const previousDependenciesRef = React.useRef();
     React.useEffect(() => {
@@ -41,36 +18,11 @@ export function useDeepCompareEffect(callback, dependencies) {
             previousDependenciesRef.current = _.cloneDeep(dependencies);
             return callback();
         }
-    }, [callback]); // dependencies를 직접 참조하여 비교하므로 의존성 배열에서 제거
+    }, [callback]);
 }
-/**
- * Array<Object> 경우 변경 감지하기 힘들기 때문에 별도 hook 구성함
- * 깊은 비교와 팩토리 함수를 사용하는 메모이제이션 훅
- * @param factory 계산을 수행하는 팩토리 함수
- * @param deps 의존성 배열
- * @returns 메모이제이션된 계산 결과
- */
-// // 성능 문제로 비활성화
-// // export function useDeepCompareMemo<T>(factory: () => T, deps: any[]): T {
-// //   // 의존성 배열을 위한 ref
-// //   const depsRef = React.useRef<any[]>();
-// //   // 현재 값을 저장하기 위한 ref
-// //   const valueRef = React.useRef<T>();
-// //   // 의존성의 깊은 비교 수행
-// //   const depsChanged = !_.isEqual(depsRef.current, deps);
-// //   // 의존성이 변경되었을 때만 값 재계산
-// //   if (depsChanged || valueRef.current === undefined) {
-// //     valueRef.current = factory();
-// //     depsRef.current = _.cloneDeep(deps);
-// //   }
-// //   // deps 배열의 얕은 비교를 위한 문자열화
-// //   // 이는 React의 렌더링 시스템과 함께 작동하기 위함
-// //   return React.useMemo(() => valueRef.current as T, [JSON.stringify(deps)]);
-// // }
 export function useDeepCompareMemo(factory, deps) {
     const depsRef = React.useRef();
     const valueRef = React.useRef();
-    // 의존성 배열을 깊은 비교하여 변경 여부 확인
     if (!_.isEqual(depsRef.current, deps)) {
         valueRef.current = factory();
         depsRef.current = _.cloneDeep(deps);

package/lib/esm/common/foundation/scale/color/color.js

@@ -1,7 +1,5 @@
-// 디자이너와 협의 후 수정해주세요.
 export const white = "#FFFFFF";
 export const black = "#000000";
-/* Colors= */
 export const primary0 = "#";
 export const primary5 = "#";
 export const primary10 = "#";
@@ -29,18 +27,18 @@ export const gray10 = "#191919";
 export const gray15 = "#252626";
 export const gray20 = "#323233";
 export const gray25 = "#3F3F40";
-export const gray30 = "#555353"; // nora (@Leokim 기반컬러... 나머지 컬럴값 정의 필요)
+export const gray30 = "#555353";
 export const gray35 = "#58595A";
 export const gray40 = "#646567";
 export const gray45 = "#717274";
 export const gray50 = "#7E7F80";
 export const gray55 = "#8A8B8D";
-export const gray60 = "#8b99a6"; // nora (@Leokim 기반컬러... 나머지 컬럴값 정의 필요)
+export const gray60 = "#8b99a6";
 export const gray65 = "#A3A5A7";
 export const gray70 = "#B0B2B4";
 export const gray75 = "#BDBEC1";
 export const gray80 = "#C9CBCE";
-export const gray85 = "#D7DBE0"; // nora (@Leokim 기반컬러... 나머지 컬럴값 정의 필요)
-export const gray90 = "#DBE1EA"; // nora (@Leokim 기반컬러... 나머지 컬럴값 정의 필요)
-export const gray95 = "#eef3fa"; // nora (@Leokim 기반컬러... 나머지 컬럴값 정의 필요)
-export const gray100 = "#FAFBFD"; // nora (@Leokim 기반컬러... 나머지 컬럴값 정의 필요)
+export const gray85 = "#D7DBE0";
+export const gray90 = "#DBE1EA";
+export const gray95 = "#eef3fa";
+export const gray100 = "#FAFBFD";

package/lib/esm/common/foundation/scale/layout/breakpoints.js

@@ -1,5 +1,3 @@
-// Reference https://gs.statcounter.com/screen-resolution-stats/desktop/worldwide
-// Reference https://mui.com/material-ui/customization/breakpoints/
 export const xl = "1536px";
 export const lg = "1200px";
 export const md = "900px";

package/lib/esm/common/styled/index.d.ts

@@ -1,11 +1,4 @@
 import { foundation } from "../foundation";
-/**
- * 💡 알림
- * 본 섹션은 가이드의 가독성을 높이기 위해 추가되었습니다.
- * 기능 개발에만 집중할 수 있도록 작성된 문서이며, UI 관련 가이드는 따로 제공되지 않습니다.
- * 가이드가 아니므로 참고용으로만 활용해 주세요.
- * 디자인 시스템을 개발할경우 색상이나 사이즈 처리 등 가이드로 사용하기에는 다소 부족한 부분이 있을 수 있습니다. 부득이하게 개발이 필요한 경우 해당부분을 고려하여 개발 해주세요.
- */
 export declare const StyledButton: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
@@ -27,9 +20,6 @@ interface TypographyProps {
     color?: colorType;
 }
 type colorType = keyof typeof foundation.$scale.color;
-/**
- * 정리 필요
- */
 type variantType = keyof typeof variantMapping;
 declare const variantMapping: {
     KR_TITLE_H1: {

package/lib/esm/common/styled/index.js

@@ -2,13 +2,6 @@ import styled from "@emotion/styled";
 import { foundation } from "../foundation";
 import { initialWindowHeight } from "../../components/TwoDimensionalVirtualizedList";
 import { keyframes } from "@emotion/css";
-/**
- * 💡 알림
- * 본 섹션은 가이드의 가독성을 높이기 위해 추가되었습니다.
- * 기능 개발에만 집중할 수 있도록 작성된 문서이며, UI 관련 가이드는 따로 제공되지 않습니다.
- * 가이드가 아니므로 참고용으로만 활용해 주세요.
- * 디자인 시스템을 개발할경우 색상이나 사이즈 처리 등 가이드로 사용하기에는 다소 부족한 부분이 있을 수 있습니다. 부득이하게 개발이 필요한 경우 해당부분을 고려하여 개발 해주세요.
- */
 export const StyledButton = styled("button")(() => ({
     minWidth: "190px",
     display: "flex",
@@ -57,7 +50,6 @@ const variantMapping = {
         fontWeight: 400,
     },
 };
-// spinner
 export const Spinner = styled("div")(() => ({
     border: "5px solid #27c382",
     borderRadius: "50%",

package/lib/esm/components/GridBasicRows.js

@@ -2,12 +2,12 @@ import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 const containerHeight = 250;
 const overscanCount = 3;
-const scrollThreshold = 40; // 스크롤 이벤트를 처리할 임계값 (여기서는 200px)
+const scrollThreshold = 40;
 function GridBasicRows(props) {
     const { children } = props;
     const parentRef = React.useRef(null);
     const ticking = React.useRef(false);
-    const prevScrollTop = React.useRef(0); // 이전 스크롤 위치를 저장하는 Ref
+    const prevScrollTop = React.useRef(0);
     const [visibleRange, setVisibleRange] = React.useState({ start: 0, end: 0 });
     const [itemsData, _setItemsData] = React.useState([]);
     const visibleItems = React.useMemo(() => itemsData.slice(visibleRange.start, visibleRange.end + 1), [itemsData, visibleRange]);

package/lib/esm/components/NoraDataGrid.js

@@ -20,7 +20,6 @@ const NoraDataGridBody = React.forwardRef((props, ref) => {
             if (gridContainerRef.current && gridContainerRef.current.contains(event.target)) {
             }
             else {
-                // body 바깥 클릭 감지
                 if (gridRef === null || gridRef === void 0 ? void 0 : gridRef.current) {
                     gridRef.current.setCellFocus(undefined, undefined).then((res) => {
                         store.setState(["state", "cellFocus"], res);

package/lib/esm/components/TwoDimensionalVirtualizedList.js

@@ -33,16 +33,12 @@ const DynamicVirtualScroll = React.memo(({ children }) => {
         var _a;
         const store = gridRef.current.store;
         const parentElement = (_a = store === null || store === void 0 ? void 0 : store.gridContainer.current) === null || _a === void 0 ? void 0 : _a.parentElement;
-        // ResizeObserver 인스턴스 생성: 부모 요소의 크기 변화를 감지함
         const observer = new ResizeObserver((entries) => {
             for (let entry of entries) {
-                // 감지된 요소의 현재 너비를 가져옴
                 const parentWidth = entry.contentRect.width;
                 const parentHeight = entry.contentRect.height;
-                // 새로운 자식 요소의 크기 계산
                 const newWidth = parentWidth;
                 const newHeight = parentHeight;
-                // // 자식 요소의 현재 크기와 새 크기가 다른 경우, 크기를 업데이트
                 if (parentElement.style.height || parentElement.style.maxHeight) {
                     setWindowSize({
                         width: newWidth,
@@ -57,7 +53,6 @@ const DynamicVirtualScroll = React.memo(({ children }) => {
                 }
             }
         });
-        // 부모 요소에 대한 참조가 있을 경우, 감지 시작
         if (parentElement) {
             observer.observe(parentElement);
         }
@@ -71,18 +66,6 @@ const DynamicVirtualScroll = React.memo(({ children }) => {
         columns: store.state.columns,
         cumulativeHeights: store.cumulativeHeights,
     }));
-    // const { dataSource } = useSelector<DataGridStoreDef, Pick<DataGridBasicPropsModelDef, "dataSource">>((store) => ({
-    //   dataSource: store.state.dataSource,
-    // }));
-    // const { __randomDataSourceKey } = useSelector<DataGridStoreDef, Pick<DataGridStoreDef, "__randomDataSourceKey">>((store) => ({
-    //   __randomDataSourceKey: store.__randomDataSourceKey,
-    // }));
-    // const { cumulativeHeights } = useSelector<DataGridStoreDef, Pick<DataGridStoreDef, "cumulativeHeights">>((store) => ({
-    //   cumulativeHeights: store.cumulativeHeights,
-    // }));
-    // 높이 계산 로직인데 dataSource깊은 복사를 통해 변경을 감지하여 다시 계산하기에는 성능 이슈가 발생할수있어. 수정 필요
-    //
-    // const totalHeight = useDeepCompareMemo(() => dataSource.reduce((sum, item) => sum + item.height!, 0), [dataSource]);
     const totalHeight = useDeepCompareMemo(() => {
         var _a, _b;
         const heights = (_b = (_a = gridRef.current) === null || _a === void 0 ? void 0 : _a.store) === null || _b === void 0 ? void 0 : _b.cumulativeHeights;
@@ -91,7 +74,6 @@ const DynamicVirtualScroll = React.memo(({ children }) => {
         return heights[heights.length - 1];
     }, [cumulativeHeights]);
     const totalWidth = useDeepCompareMemo(() => columns.reduce((sum, column) => sum + Number(column.width), 0) || 0, [columns]);
-    // const totalWidth = useMemo(() => columns.reduce((sum, column) => sum + Number(column.width), 0) || 0, [columns]);
     const binarySearchIndex = useCallback((items, target) => {
         let low = 0;
         let high = items.length - 1;
@@ -141,17 +123,15 @@ const DynamicVirtualScroll = React.memo(({ children }) => {
         const dataSource = gridRef.current.store.state.dataSource;
         const result = [];
         const rowIndex = gridRef.current.getCellFocus()[0];
-        // 포함 안되어있으면 추가
         if (rowIndex && rowIndex <= start) {
-            result.push(dataSource[rowIndex - 1]); // fixedIndex가 범위에 포함되지 않으면 첫 번째에 추가
+            result.push(dataSource[rowIndex - 1]);
         }
         for (let i = start; i < end; i++) {
             result.push(dataSource[i]);
         }
-        // 포함 안되어있으면 추가
         if (rowIndex && rowIndex >= end) {
             if (result[result.length - 1].__ariaRowindex !== dataSource[rowIndex - 1].__ariaRowindex)
-                result.push(dataSource[rowIndex - 1]); // fixedIndex가 범위에 포함되지 않으면 첫 번째에 추가
+                result.push(dataSource[rowIndex - 1]);
         }
         return result;
     }, [cumulativeHeights, start, end]);
@@ -294,14 +274,12 @@ const VirtualItem = React.memo(({ column, row, isFocus, editStatus, rowIndex, })
     return (_jsx(TableCell, { "aria-colindex": column.__ariaColindex, tabIndex: isFocus ? 0 : -1, style: cellStyle, className: cellClassName, children: deferredValue && _jsx(CellMode, { column: column, value: deferredValue, editStatus: editStatus, rowIndex: rowIndex }) }, column.__uuid));
 });
 export const TwoDimensionalVirtualizedList = React.memo(() => {
-    // 마우스 다운 시작지점점
     const gridRef = useGridApiContext();
     useAddApi(gridRef);
     const mouseDownStartPointRef = useRef(0);
     const mouseDownStartWidthRef = useRef(0);
     const colIndexRef = useRef(0);
     const mouseDownRef = useRef(false);
-    // 클릭시 타임 측정
     const clickTimer = useRef(null);
     const [imeDefaultValue, setImeDefaultValue] = React.useState("");
     const handleMousedown = useCallback((e) => {
@@ -321,7 +299,6 @@ export const TwoDimensionalVirtualizedList = React.memo(() => {
                     colIndexRef.current = Number(colindex) - 1;
                 }
             }
-            // 셀 포커스 지정
             if (e.button !== 0)
                 return;
             if (e.target) {
@@ -329,11 +306,10 @@ export const TwoDimensionalVirtualizedList = React.memo(() => {
                 const cell = divElement.closest(`.${classes.TableClasses.body.row.cell.root}`);
                 const row = divElement.closest(`.${classes.TableClasses.body.row.root}`);
                 if (cell && row) {
-                    // e.preventDefault();
                     const colIndex = Number(cell.getAttribute("aria-colindex"));
                     const rowIndex = Number(row.getAttribute("aria-rowindex"));
                     if (clickTimer.current) {
-                        clearTimeout(clickTimer.current); // 더블 클릭 발생 시 실행 취소
+                        clearTimeout(clickTimer.current);
                     }
                     gridRef.current.setEditStatus(EditStatus.NON_EDITABLE).then((editState) => {
                         store.setState(["state", "editStatus"], editState);
@@ -343,19 +319,18 @@ export const TwoDimensionalVirtualizedList = React.memo(() => {
                             gridRef.current.setEditStatus(EditStatus.NON_EDITABLE).then((editState) => {
                                 var _a;
                                 store.setState(["state", "editStatus"], editState);
-                                (_a = textAreaRef.current) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true }); // ime 활성화
+                                (_a = textAreaRef.current) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true });
                                 gridRef.current.setCellFocus(rowIndex, colIndex).then((res) => {
                                     store.setState(["state", "cellFocus"], res);
                                 });
                             });
                         }
-                    }, 200); // 더블 클릭 판별 시간 (기본적으로 200ms 정도 사용)
+                    }, 200);
                     gridRef.current.setCellFocus(rowIndex, colIndex).then((res) => {
                         store.setState(["state", "cellFocus"], res);
                     });
                 }
             }
-            // ime position init
             if (!textAreaRef.current)
                 return;
             textAreaRef.current.style.top = `-${32000}px`;
@@ -398,7 +373,6 @@ export const TwoDimensionalVirtualizedList = React.memo(() => {
             e.key === "Shift" ||
             e.ctrlKey ||
             (e.ctrlKey && e.key === "c")) {
-            // e.preventDefault();
             return;
         }
         if (e.key === "Enter") {
@@ -416,46 +390,6 @@ export const TwoDimensionalVirtualizedList = React.memo(() => {
             }
             return;
         }
-        // if (e.key === "Escape") {
-        //   gridRef.current.setEditStatus(EditStatus.IME_EDITING).then((editState) => {
-        //     store.setState(["state", "editStatus"], editState);
-        //     // gridRef.current.scrollToRowIndex(
-        //     //   gridRef.current.store.state.cellFocus[0]
-        //     // );
-        //     //
-        //     // const parent = gridRef.current.store.gridContainer.current;
-        //     // const test = gridRef.current.store.gridContainer.current
-        //     //   ?.querySelector(`.${classes.TableClasses.body.scroll.root}`)
-        //     //   ?.querySelector(
-        //     //     `[aria-rowindex="${gridRef.current.store.state.cellFocus[0]}"]`
-        //     //   );
-        //     // const observer = new IntersectionObserver(
-        //     //   (entries) => {
-        //     //     const visible = entries;
-        //     //     entries.forEach((entry) => {
-        //     //       if (!entry.isIntersecting) {
-        //     //         // gridRef.current.scrollToRowIndex(
-        //     //         //   gridRef.current.store.state.cellFocus[0]
-        //     //         // );
-        //     //         e.preventDefault();
-        //     //       }
-        //     //     });
-        //     //   },
-        //     //   {
-        //     //     root: parent,
-        //     //     threshold: 0.1, // 요소가 10% 이상 보일 때 트리거
-        //     //   }
-        //     // );
-        //     // if (test) observer.observe(test);
-        //     //
-        //     // e.preventDefault();
-        //   });
-        //   return;
-        // }
-        // if (gridRef.current.store.state.editStatus === EditStatus.EDITING) return;
-        // gridRef.current.setEditStatus(EditStatus.EDITING).then((editState) => {
-        //   store.setState(["state", "editStatus"], editState);
-        // });
     }, []);
     const handleArrowKey = React.useCallback((e) => {
         var _a;
@@ -471,7 +405,6 @@ export const TwoDimensionalVirtualizedList = React.memo(() => {
         if (!cellFocus || (key !== "ArrowRight" && key !== "ArrowLeft" && key !== "ArrowDown" && key !== "ArrowUp" && key !== "Tab")) {
             return;
         }
-        // e.preventDefault();
         const direction = (key === "Tab" && !e.shiftKey) || ["ArrowRight", "ArrowDown"].includes(key) ? 1 : -1;
         if (!cellFocus[1])
             return;
@@ -481,20 +414,20 @@ export const TwoDimensionalVirtualizedList = React.memo(() => {
         let newRowIndex = cellFocus[0] + direction;
         let isRowIndex = false;
         let isColIndex = false;
-        const widths = new Array(columns.length + 1).fill(0); // 초기 크기 설정
+        const widths = new Array(columns.length + 1).fill(0);
         const sumWidths = new Array(columns.length + 1).fill(0);
         const dataSourceEnd = renderedRowStartEnd ? Math.min(renderedRowStartEnd[1] + 100, dataSource.length) : dataSource.length;
-        const heights = new Array(dataSourceEnd + 1).fill(0); // 초기 크기 설정
+        const heights = new Array(dataSourceEnd + 1).fill(0);
         const sumHeights = gridRef.current.store.cumulativeHeights;
         for (let i = 0; i < columns.length; i++) {
-            const width = Number(columns[i].width); // 변환 1회만 수행
+            const width = Number(columns[i].width);
             widths[i + 1] = width;
-            sumWidths[i + 1] = sumWidths[i] + width; // 이전 합계를 변수로 사용
+            sumWidths[i + 1] = sumWidths[i] + width;
         }
         for (let i = 0; i < dataSourceEnd; i++) {
-            const height = Number(dataSource[i].height); // 변환 1회만 수행
+            const height = Number(dataSource[i].height);
             heights[i + 1] = height;
-            sumHeights[i + 1] = sumHeights[i] + height; // 이전 합계를 변수로 사용
+            sumHeights[i + 1] = sumHeights[i] + height;
         }
         switch (key) {
             case "ArrowLeft":
@@ -511,7 +444,6 @@ export const TwoDimensionalVirtualizedList = React.memo(() => {
         const maxColIndex = gridRef.current.store.state.columns.length;
         const bodyElement = (_a = gridContainer.current) === null || _a === void 0 ? void 0 : _a.querySelector(`.${classes.TableClasses.body.scroll.root}`);
         if (gridRef.current.store.state.editStatus === EditStatus.IME_EDITING) {
-            // IME 입력중일때 Tab 비활성화 (입력중인 내용이 다음 텝에 반영 되는 문제 방지)
             return;
         }
         if (rowIndex > 0 && colIndex > 0 && colIndex <= maxColIndex) {
@@ -545,7 +477,7 @@ export const TwoDimensionalVirtualizedList = React.memo(() => {
                         }
                     });
                 });
-            }, 0); // Tab시 한글 두번 입력되는 문제로 인해 넣음
+            }, 0);
         }
     }, []);
     const handleKeydown = useCallback((e) => {
@@ -561,7 +493,7 @@ export const TwoDimensionalVirtualizedList = React.memo(() => {
             store.setState(["state", "editStatus"], editState);
         });
         if (clickTimer.current) {
-            clearTimeout(clickTimer.current); // 더블 클릭 발생 시 mousedown 실행 방지
+            clearTimeout(clickTimer.current);
         }
     }, []);
     useEffect(() => {

package/lib/esm/components/body/_styled/index.js

@@ -13,7 +13,7 @@ export const NoDataContent = styled("div")(() => ({
 export const NoDataTitle = styled("h2")(() => ({
     fontSize: "14px",
     fontWeight: "500",
-    color: "#5e5e5e", // 색상정의 필요 디자인 토큰 없는 관계로 하드 코딩
+    color: "#5e5e5e",
 }));
 export const ErrorIconBox = styled("div")(() => ({
     display: "flex",

package/lib/esm/components/ime/IMEComponent.js

@@ -72,7 +72,6 @@ const IMEComponent = React.forwardRef((props, ref) => {
                 return;
             const event = e.target;
             const currentRef = ref;
-            // 셀위치 가져오기
             const containerElement = gridRef.current.store.gridContainer.current;
             if (containerElement) {
                 const rowElement = containerElement.querySelector(`.${classes.TableClasses.body.row.root}[aria-rowindex="${rowIndex}"]`);
@@ -106,9 +105,6 @@ const IMEComponent = React.forwardRef((props, ref) => {
     React.useEffect(() => {
         setImeValue("");
     }, [cellFocus]);
-    return (_jsx("textarea", { 
-        // 그리드에 포커스 중일때만 활성화하기
-        // autoFocus
-        className: "ime-input", ref: ref, style: { position: "absolute", resize: "none", overflow: "hidden", background: "red", top: `-${32000}px`, left: `-${32000}px` }, value: imeValue, onChange: handleValueChange, onKeyDown: handleKeyDown }));
+    return (_jsx("textarea", { className: "ime-input", ref: ref, style: { position: "absolute", resize: "none", overflow: "hidden", background: "red", top: `-${32000}px`, left: `-${32000}px` }, value: imeValue, onChange: handleValueChange, onKeyDown: handleKeyDown }));
 });
 export default React.memo(IMEComponent);