@noraent/nora-datagrid 0.0.1

package/lib/cjs/types/dataGridProps.d.ts

@@ -0,0 +1,148 @@
+import { EditStatus } from "./dataGridCoreEnum";
+import { CellRangeDef, CellRangeTempDef, DataGridColumns, DataGridDataSource, DataGridPrivateDataSourceModel, DeepOmitStartsWith } from "./dataGridCoreProps";
+export default DataGridBasicProps;
+/**
+ * DataGrid를 구성하는 Props 입니다.
+ * 데이터 그리드에서 사용되는 모든 속성 및 구성 요소를 관리합니다
+ * @version 0.0.1
+ * @public
+ * @namespace NoraDataGrid.DataGridBasicProps
+ */
+export type DataGridBasicProps = DeepOmitStartsWith<Pick<DataGridBasicPropsModel, "columns" | "dataSource">, "__"> & Partial<DataGridOptionPropsModel>;
+export type DataGridBasicPropsModelDef = DataGridBasicPropsModel;
+/**
+ * DataGrid를 구성하는 기본 소모품 구조 입니다.
+ * 데이터 그리드에서 사용되는 기본적인 속성을 관리합니다
+ * @private
+ * @namespace NoraDataGrid.DataGridBasicPropsModel
+ */
+export interface DataGridBasicPropsModel {
+    columns: DataGridColumns;
+    dataSource: DataGridDataSource;
+}
+/**
+ * DataGrid를 구성하는 부가적인 소모품 구조 입니다.
+ * 데이터 그리드에서 사용되는 부가적인 속성을 관리합니다.
+ * @private
+ * @namespace NoraDataGrid.DataGridOptionPropsModel
+ */
+export interface DataGridOptionPropsModel {
+    gridRef: React.MutableRefObject<GirdApiCommon<DataGridPublicApi> | null> | null;
+    /**
+     * 포커스된 셀 정보를 담고 있습니다.
+     * [ariaRowIndex, ariaColIndex]
+     */
+    cellFocus: Array<number | undefined>;
+    /**
+     * 현재 렌더링된 행의 범위 시작과 끝을 나타냅니다.
+     * [startRowIndex, endRowIndex]
+     */
+    renderedRowStartEnd: Array<number> | null;
+    /**
+     * 현재 포커스된 셀의 수정 상태를 담고 있습니다.
+     */
+    editStatus: EditStatus;
+}
+/**
+ * 데이터 그리드 내부에서 사용되는 속성을 관리합니다
+ * @private
+ * @namespace NoraDataGrid.DataGridBasicStorePropsModel
+ */
+interface DataGridBasicStorePropsModel {
+    gridContainer: React.RefObject<HTMLDivElement>;
+    __cellRange: Array<CellRangeDef>;
+    __cellRangeTemp: CellRangeTempDef;
+}
+/**
+ * DataGrid를 구성하는 내부 메소드들을 관리 합니다.
+ * @private
+ * @namespace NoraDataGrid.DataGridPrivateApi
+ */
+export type DataGridPrivateApi = DataGridPrivateApiModel;
+export type DataGridPublicApi = DataGridPublicApiModel;
+/**
+ * 데이터 그리드 개발을 위해 사용되는 내부 API를 관리 합니다.
+ * @private
+ * @namespace NoraDataGrid.DataGridPrivateApiModel
+ */
+export interface DataGridPrivateApiModel {
+    setText: () => void;
+    /**
+     *
+     * @private
+     * @param ref
+     * @namespace NoraDataGrid.DataGridPrivateApiModel.setGridContainer
+     */
+    setGridContainer: (ref: React.RefObject<HTMLDivElement>) => void;
+    /**
+     * 스토어 공간을 생성합니다.
+     * @private
+     * @param props DataGridBasicProps
+     * @namespace NoraDataGrid.DataGridPrivateApiModel.setInitialStore
+     */
+    setInitialStore: (props: DataGridBasicProps) => any;
+    /**
+     * 데이터 그리드에서 사용되는 기본적인 속성을 설정합니다.
+     * @private
+     * @namespace NoraDataGrid.DataGridPrivateApiModel.setBasicProps
+     */
+    setBasicProps: (props: DataGridBasicProps) => DataGridStoreDef["state"];
+    /**
+     * 특정 행(row)의 위치로 스크롤을 이동합니다.
+     * @private
+     * @namespace NoraDataGrid.DataGridPrivateApiModel.scrollToRowIndex
+     */
+    scrollToRowIndex: (rowIndex: number) => void;
+    /**
+     * 선택할 셀의 범위를 추가하는동안 임시 공간에 추가합니다.
+     * @param cellRange
+     * @returns
+     */
+    addCellRangeTemp: (cellRange: CellRangeTempDef) => void;
+    /**
+     * 셀 포커스를 지정합니다.
+     * @returns
+     */
+    setCellFocus: (rowIndex: number | undefined, colIndex: number | undefined) => Promise<DataGridStoreDef["state"]["cellFocus"]>;
+    /**
+     * 셀 포커스를 가져옵니다.
+     */
+    getCellFocus: () => DataGridStoreDef["state"]["cellFocus"];
+    /**
+     * 셀 모드를 변경합니다.
+     */
+    setEditStatus: (editStatus: DataGridStoreDef["state"]["editStatus"]) => Promise<DataGridStoreDef["state"]["editStatus"]>;
+    cellByRowIndex: (rowIndex: number, fieldId: keyof DataGridPrivateDataSourceModel, value: string | number | undefined) => Promise<DataGridStoreDef["state"]["dataSource"]>;
+}
+export interface DataGridPublicApiModel {
+    setTextPublic: (data: any) => void;
+    /**
+     * 선택할 셀의 범위를 추가합니다.
+     * @param cellRange
+     * @returns
+     */
+    addCellRange: (cellRange: CellRangeDef) => void;
+    forceUpdate: () => void;
+}
+export type CommonApi = React.MutableRefObject<DataGridPrivateApi | null>;
+export interface GirdApiCommon<DataGridPrivateApi> extends DataGridPrivateApiModel {
+    register: <V extends Visibility, T extends V extends "public" ? Partial<DataGridPublicApi> : Partial<DataGridPrivateApi>>(visibility: V, methods: T) => void;
+    getPublicApi: () => DataGridPublicApi;
+    store: DataGridStoreDef;
+}
+export declare class Store<T> {
+    private state;
+    private listeners;
+    constructor(initialState: T);
+    getState(): T;
+    setState<K extends keyof T>(path: K | [K, ...string[]], value: any, isUpdate?: boolean): void;
+    subscribe(path: string[], callback: Function): () => void;
+    private notify;
+    private updateNestedState;
+    private isPathAffected;
+}
+export interface DataGridStoreDef extends DataGridBasicStorePropsModel {
+    original: DataGridBasicPropsModel & DataGridOptionPropsModel;
+    state: DataGridBasicPropsModel & DataGridOptionPropsModel;
+}
+export type Visibility = "public" | "private";

package/lib/cjs/types/dataGridProps.js

@@ -0,0 +1,54 @@
+export class Store {
+    constructor(initialState) {
+        Object.defineProperty(this, "state", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "listeners", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
+        this.state = initialState;
+    }
+    getState() {
+        return this.state;
+    }
+    setState(path, value, isUpdate) {
+        const fullPath = Array.isArray(path) ? path.map(String) : [String(path)];
+        this.state = this.updateNestedState(this.state, fullPath, value);
+        this.notify(fullPath, isUpdate);
+    }
+    subscribe(path, callback) {
+        const listener = { path, callback };
+        this.listeners.push(listener);
+        return () => {
+            this.listeners = this.listeners.filter((l) => l !== listener);
+        };
+    }
+    notify(changedPath, isUpdate) {
+        this.listeners.forEach(({ path, callback }) => {
+            if (this.isPathAffected(path, changedPath)) {
+                if (isUpdate === undefined || isUpdate)
+                    callback();
+            }
+        });
+    }
+    updateNestedState(obj, path, value) {
+        if (path.length === 0)
+            return value;
+        const [key, ...rest] = path;
+        return Object.assign(Object.assign({}, obj), { [key]: rest.length > 0 ? this.updateNestedState(obj[key], rest, value) : value });
+    }
+    // 경로 비교 로직 개선
+    isPathAffected(listenerPath, changedPath) {
+        // 전체 경로가 정확히 일치하는 경우에만 true 반환
+        if (listenerPath.length !== changedPath.length) {
+            return false;
+        }
+        return listenerPath.every((segment, index) => segment === changedPath[index]);
+    }
+}

package/lib/esm/App.d.ts

@@ -0,0 +1,10 @@
+declare function App(): import("react/jsx-runtime").JSX.Element;
+export declare const initialItemsData: () => {
+    id: number;
+    columns: {
+        id: string;
+        width: number;
+        content: string;
+    }[];
+}[];
+export default App;

package/lib/esm/App.js

@@ -0,0 +1,142 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { DataGrid } from "./DataGrid";
+function App() {
+    const ref = React.useRef(null);
+    return (_jsxs("div", { style: { width: "1200px", height: "500px" }, children: [_jsx("button", { children: "dd" }), _jsx("button", { children: "dd" }), _jsx(DataGrid, { gridRef: ref, columns: [
+                    {
+                        fieldId: "firstName",
+                        fieldName: "코드",
+                    },
+                    {
+                        fieldId: "lastName",
+                        fieldName: "이름",
+                        width: "120",
+                    },
+                    {
+                        fieldId: "currency",
+                        fieldName: "성명",
+                        width: "120",
+                    },
+                    {
+                        fieldId: "currency4",
+                        fieldName: "국가",
+                        width: "140",
+                    },
+                    {
+                        fieldId: "currency5",
+                        fieldName: "구매링크",
+                        width: "120",
+                    },
+                    {
+                        fieldId: "currency6",
+                        fieldName: "카드",
+                        width: "130",
+                    },
+                    {
+                        fieldId: "currency7",
+                        fieldName: "카드번호",
+                        width: "120",
+                    },
+                    {
+                        fieldId: "currency8",
+                        fieldName: "currency8",
+                        width: "140",
+                    },
+                    {
+                        fieldId: "currency9",
+                        fieldName: "currency9",
+                        width: "120",
+                    },
+                    {
+                        fieldId: "currency10",
+                        fieldName: "currency10",
+                        width: "130",
+                    },
+                    {
+                        fieldId: "currency11",
+                        fieldName: "currency11",
+                        width: "120",
+                    },
+                    {
+                        fieldId: "currency12",
+                        fieldName: "currency12",
+                        width: "120",
+                    },
+                    {
+                        fieldId: "currency13",
+                        fieldName: "Currency13",
+                        width: "120",
+                    },
+                    {
+                        fieldId: "currency14",
+                        fieldName: "currency14",
+                        width: "120",
+                    },
+                    {
+                        fieldId: "currency15",
+                        fieldName: "currency15",
+                        width: "120",
+                    },
+                    {
+                        fieldId: "currency16",
+                        fieldName: "Currency16",
+                        width: "120",
+                    },
+                    {
+                        fieldId: "currency17",
+                        fieldName: "currency17",
+                        width: "120",
+                    },
+                    {
+                        fieldId: "currency18",
+                        fieldName: "currency18",
+                        width: "120",
+                    },
+                    {
+                        fieldId: "currency19",
+                        fieldName: "currency19",
+                        width: "120",
+                    },
+                    {
+                        fieldId: "currency19",
+                        fieldName: "Currency19",
+                        width: "120",
+                    },
+                    {
+                        fieldId: "currency20",
+                        fieldName: "currency20",
+                        width: "120",
+                    },
+                    {
+                        fieldId: "currency21",
+                        fieldName: "currency21",
+                        width: "120",
+                    },
+                ], dataSource: Array.from({ length: 100 }, (_, i) => {
+                    return {
+                        id: i,
+                        firstName: `test-${i}`,
+                        lastName: `lastName-${i}`,
+                        currency: `currency-${i}`,
+                        currency14: `currency14-${i}`,
+                        currency15: `currency15-${i}`,
+                        __uuid: "",
+                        // height: 30,
+                        // height: Math.floor(Math.random() * 20) + 20,
+                    };
+                }) }), _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,
+            content: `Cell ${i}-${j}-`,
+        })),
+    };
+});
+export default App;

package/lib/esm/DataGrid.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+import "./app.scss";
+export declare const DataGrid: React.MemoExoticComponent<React.ForwardRefExoticComponent<import("./types/dataGridCoreProps").DeepOmitStartsWith<Pick<import("./types/dataGridProps").DataGridBasicPropsModel, "columns" | "dataSource">, "__"> & Partial<import("./types/dataGridProps").DataGridOptionPropsModel> & React.RefAttributes<HTMLDivElement>>>;

package/lib/esm/DataGrid.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { useGridInitialization } from "./hooks/useGridInitialization";
+import { GridApiContext } from "./provider/GridApiContext";
+import { NoraDataGrid } from "./components/NoraDataGrid";
+import "./app.scss";
+import { TwoDimensionalVirtualizedList } from "./components/TwoDimensionalVirtualizedList";
+import { GridStoreContentProvider } from "./provider/GridStoreContent";
+const DataGridMaster = React.forwardRef((props, _ref) => {
+    const { gridRef } = props;
+    const apiRef = useGridInitialization(gridRef, props);
+    const containerRef = React.useRef(null);
+    const [isPending, startTransition] = React.useTransition();
+    React.useEffect(() => {
+        startTransition(() => {
+            apiRef.current.setGridContainer(containerRef);
+            apiRef.current.setInitialStore(props);
+            // setTimeout(() => {
+            //   setIsClient(true);
+            // }, 2200);
+        });
+    }, []);
+    // const [count, setCount] = React.useState(1);
+    // React.useEffect(() => {
+    //   const id = setInterval(() => {
+    //     // 타이머 숫자가 하나씩 줄어들도록
+    //     setCount((count) => count - 1);
+    //   }, 1000);
+    //   // 0이 되면 카운트가 멈춤
+    //   if (count === 0) {
+    //     clearInterval(id);
+    //   }
+    //   return () => clearInterval(id);
+    // }, [count]);
+    return (_jsx(_Fragment, { children: _jsx(GridApiContext.Provider, { value: apiRef, children: _jsxs(GridStoreContentProvider, { value: apiRef, children: [_jsx("button", { onClick: () => { }, children: "!!" }), _jsxs(NoraDataGrid, { ref: containerRef, children: [_jsx(NoraDataGrid.Title, { children: "\uC624\uBC84\uB77C\uC774\uB4DC \uD588\uC5B4\uC6A9" }), _jsx(NoraDataGrid.Body, { children: !isPending && apiRef.current.store && _jsx(TwoDimensionalVirtualizedList, {}) })] })] }) }) }));
+});
+export const DataGrid = React.memo(DataGridMaster);

package/lib/esm/buildPackage.json

@@ -0,0 +1,59 @@
+{
+  "name": "@noraent/nora-datagrid",
+  "version": "0.0.1",
+  "module": "./lib/esm/index.js",
+  "main": "./lib/cjs/index.js",
+  "private": false,
+  "files": [
+    "lib/"
+  ],
+  "type": "module",
+  "scripts": {
+    "start": "vite --mode on-local",
+    "build:local": "tsc -b && vite build --mode on-local",
+    "build:dev": "tsc -b && vite build --mode dev",
+    "build:production": "tsc -b && vite build --mode production",
+    "clean": "pnpm run clean:build && rimraf ./node_modules",
+    "clean:build": "rimraf ./dist",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "test": "jest",
+    "tsc-build": "tsc -p tsconfig-esm.json && tsc -p tsconfig-cjs.json",
+    "publish:npm": "rm -rf dist && mkdir dist && babel src -d dist --copy-files && 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"
+  },
+  "dependencies": {
+    "@emotion/css": "^11.13.4",
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
+    "@noraent/nora-datagrid": "file:",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "rimraf": "^6.0.1",
+    "sass-embedded": "^1.79.4",
+    "vite-plugin-svgr": "^4.2.0"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.26.4",
+    "@babel/preset-react": "^7.26.3",
+    "@eslint/js": "^9.9.0",
+    "@types/lodash": "^4.17.16",
+    "@types/node": "^22.5.4",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "eslint": "^9.9.0",
+    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
+    "eslint-plugin-react-refresh": "^0.4.9",
+    "globals": "^15.9.0",
+    "typescript": "^5.5.3",
+    "typescript-eslint": "^8.0.1",
+    "vite": "^5.4.1"
+  },
+  "babel": {
+    "presets": [
+      "@babel/preset-env",
+      "@babel/preset-react"
+    ]
+  }
+}

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

@@ -0,0 +1,4 @@
+export declare const defaultProps: {
+    height: number;
+    width: number;
+};

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

@@ -0,0 +1,4 @@
+export const defaultProps = {
+    height: 32,
+    width: 20,
+};

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

@@ -0,0 +1 @@
+export * from "./defaultProps";

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

@@ -0,0 +1 @@
+export * from "./defaultProps";

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

@@ -0,0 +1,31 @@
+export declare const GUIDE_PATH: {
+    path: string;
+    GUIDE: {
+        path: string;
+        GETTING_STARTED: {
+            pathname: string;
+            path: string;
+        };
+        VALIDATION: {
+            pathname: string;
+            path: string;
+            icon: string;
+            REACT_HOOK_FORM_VALIDATION: {
+                pathname: string;
+                path: string;
+            };
+            REACT_HOOK_FORM_AND_ZOD_VALIDATION: {
+                pathname: string;
+                path: string;
+            };
+        };
+    };
+};
+export declare const buildGuidePath: (...paths: string[]) => string;
+export declare const buildFullPath: (path: string) => string;
+export interface PathNode {
+    path: string;
+    pathname?: string;
+    icon?: string;
+    [key: string]: PathNode | string | undefined;
+}

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

@@ -0,0 +1,45 @@
+export const GUIDE_PATH = {
+    path: "/",
+    GUIDE: {
+        path: "guide",
+        GETTING_STARTED: {
+            pathname: "시작하기",
+            path: "getting-started",
+        },
+        VALIDATION: {
+            pathname: "유요성 검증 가이드",
+            path: "validation",
+            icon: "🚀",
+            REACT_HOOK_FORM_VALIDATION: {
+                pathname: "react-hook-form을 통한 유효성 검증",
+                path: "react-hook-form",
+            },
+            REACT_HOOK_FORM_AND_ZOD_VALIDATION: {
+                pathname: "ZOD를 통한 유효성 검증",
+                path: "zod",
+            },
+        },
+    },
+};
+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;
+            }
+        }
+        return "";
+    };
+    // 전체 경로를 반환
+    return "/" + tracePath(GUIDE_PATH);
+};

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

@@ -0,0 +1 @@
+"use strict";

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

@@ -0,0 +1,4 @@
+import * as $scale from "./scale";
+export declare const foundation: {
+    $scale: typeof $scale;
+};

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

@@ -0,0 +1,4 @@
+import * as $scale from "./scale";
+export const foundation = {
+    $scale,
+};

package/lib/esm/common/foundation/scale/color/color.d.ts

@@ -0,0 +1,44 @@
+export declare const white = "#FFFFFF";
+export declare const black = "#000000";
+export declare const primary0 = "#1F0757";
+export declare const primary5 = "#250868";
+export declare const primary10 = "#2B0A7A";
+export declare const primary15 = "#310B8B";
+export declare const primary20 = "#370D9D";
+export declare const primary25 = "#3E0EAE";
+export declare const primary30 = "#4410C0";
+export declare const primary35 = "#4A11D1";
+export declare const primary40 = "#5013E3";
+export declare const primary45 = "#5715F5";
+export declare const primary50 = "#6528F5";
+export declare const primary55 = "#733CF6";
+export declare const primary60 = "#8150F7";
+export declare const primary65 = "#8F63F8";
+export declare const primary70 = "#9D77F9";
+export declare const primary75 = "#BA9FFB";
+export declare const primary80 = "#D6C6FD";
+export declare const primary85 = "#E4DAFE";
+export declare const primary90 = "#F3EEFF";
+export declare const primary95 = "#F6F2FF";
+export declare const primary100 = "#F9F7FF";
+export declare const gray0 = "#000000";
+export declare const gray5 = "#0C0C0C";
+export declare const gray10 = "#191919";
+export declare const gray15 = "#252626";
+export declare const gray20 = "#323233";
+export declare const gray25 = "#3F3F40";
+export declare const gray30 = "#555353";
+export declare const gray35 = "#58595A";
+export declare const gray40 = "#646567";
+export declare const gray45 = "#717274";
+export declare const gray50 = "#7E7F80";
+export declare const gray55 = "#8A8B8D";
+export declare const gray60 = "#8b99a6";
+export declare const gray65 = "#A3A5A7";
+export declare const gray70 = "#B0B2B4";
+export declare const gray75 = "#BDBEC1";
+export declare const gray80 = "#C9CBCE";
+export declare const gray85 = "#D7DBE0";
+export declare const gray90 = "#DBE1EA";
+export declare const gray95 = "#eef3fa";
+export declare const gray100 = "#FAFBFD";

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

@@ -0,0 +1,46 @@
+// 디자이너와 협의 후 수정해주세요.
+export const white = "#FFFFFF";
+export const black = "#000000";
+/* Colors= */
+export const primary0 = "#1F0757";
+export const primary5 = "#250868";
+export const primary10 = "#2B0A7A";
+export const primary15 = "#310B8B";
+export const primary20 = "#370D9D";
+export const primary25 = "#3E0EAE";
+export const primary30 = "#4410C0";
+export const primary35 = "#4A11D1";
+export const primary40 = "#5013E3";
+export const primary45 = "#5715F5";
+export const primary50 = "#6528F5";
+export const primary55 = "#733CF6";
+export const primary60 = "#8150F7";
+export const primary65 = "#8F63F8";
+export const primary70 = "#9D77F9";
+export const primary75 = "#BA9FFB";
+export const primary80 = "#D6C6FD";
+export const primary85 = "#E4DAFE";
+export const primary90 = "#F3EEFF";
+export const primary95 = "#F6F2FF";
+export const primary100 = "#F9F7FF";
+export const gray0 = "#000000";
+export const gray5 = "#0C0C0C";
+export const gray10 = "#191919";
+export const gray15 = "#252626";
+export const gray20 = "#323233";
+export const gray25 = "#3F3F40";
+export const gray30 = "#555353"; // nora (@Leokim 기반컬러... 나머지 컬럴값 정의 필요)
+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 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 기반컬러... 나머지 컬럴값 정의 필요)

package/lib/esm/common/foundation/scale/color/index.d.ts

@@ -0,0 +1 @@
+export * from "./color";

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

@@ -0,0 +1 @@
+export * from "./color";