@tipp/ui 1.6.32 → 1.6.34

package/dist/{chunk-PCWEW2UL.js → chunk-KBTV24Y4.js}

@@ -1,6 +1,6 @@
 import {
   Collapse
-} from "./chunk-LZJR77Q2.js";
+} from "./chunk-E2X4TL7Q.js";
 import {
   __spreadValues
 } from "./chunk-N552FDTV.js";
@@ -9,16 +9,16 @@ import {
 import {
   flexRender
 } from "@tanstack/react-table";
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useMemo, useState, memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-function Row(props) {
+var Row = memo(function Row2(props) {
   const { row, ExpandComp, gridTemplateColumns, getRowStyle, getCellStyle } = props;
   const [open, setOpen] = useState(false);
   const onClickRow = useCallback(() => {
     var _a;
     (_a = props.onRowClick) == null ? void 0 : _a.call(props, row.original);
     setOpen((prev) => !prev);
-  }, [props, row.original]);
+  }, [props.onRowClick, row.original]);
   const rowClassName = useMemo(() => {
     const baseCls = ["tr-wrapper"];
     if (ExpandComp) {
@@ -29,52 +29,52 @@ function Row(props) {
     }
     return baseCls.join(" ");
   }, [ExpandComp, props.onRowClick]);
+  const visibleCells = useMemo(() => row.getVisibleCells(), [row]);
+  const rowStyle = useMemo(
+    () => __spreadValues({
+      gridTemplateColumns
+    }, (getRowStyle == null ? void 0 : getRowStyle(row.original)) || {}),
+    [gridTemplateColumns, getRowStyle, row.original]
+  );
   return /* @__PURE__ */ jsxs("div", { className: rowClassName, children: [
     /* @__PURE__ */ jsx(
       "button",
       {
         className: "tr",
         onClick: onClickRow,
-        style: __spreadValues({
-          gridTemplateColumns
-        }, (getRowStyle == null ? void 0 : getRowStyle(row.original)) || {}),
+        style: rowStyle,
         type: "button",
-        children: row.getVisibleCells().map((cell) => {
+        children: visibleCells.map((cell) => {
           var _a, _b, _c;
           const autoSize = (_a = cell.column.columnDef.meta) == null ? void 0 : _a.autoSize;
           const justifyContent = ((_b = cell.column.columnDef.meta) == null ? void 0 : _b.align) || props.defaultAlign;
-          return /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: "td",
-              style: __spreadValues({
-                // width: autoSize ? undefined : cell.column.getSize(),
-                flexGrow: autoSize ? 1 : void 0,
-                justifyContent
-              }, (getCellStyle == null ? void 0 : getCellStyle(row.original)) || {}),
-              children: [
-                flexRender(cell.column.columnDef.cell, cell.getContext()),
-                ((_c = cell.column.columnDef.meta) == null ? void 0 : _c.OpenBtn) ? /* @__PURE__ */ jsx(
-                  cell.column.columnDef.meta.OpenBtn,
-                  {
-                    data: row.original,
-                    open,
-                    setIsOpen: setOpen
-                  }
-                ) : null
-              ]
-            },
-            cell.id
+          const cellStyle = useMemo(
+            () => __spreadValues({
+              flexGrow: autoSize ? 1 : void 0,
+              justifyContent
+            }, (getCellStyle == null ? void 0 : getCellStyle(row.original)) || {}),
+            [autoSize, justifyContent, getCellStyle, row.original]
           );
+          return /* @__PURE__ */ jsxs("div", { className: "td", style: cellStyle, children: [
+            flexRender(cell.column.columnDef.cell, cell.getContext()),
+            ((_c = cell.column.columnDef.meta) == null ? void 0 : _c.OpenBtn) ? /* @__PURE__ */ jsx(
+              cell.column.columnDef.meta.OpenBtn,
+              {
+                data: row.original,
+                open,
+                setIsOpen: setOpen
+              }
+            ) : null
+          ] }, cell.id);
         })
       },
       `tr_${row.id}`
     ),
     ExpandComp ? /* @__PURE__ */ jsx(Collapse, { open, children: /* @__PURE__ */ jsx("div", { className: "expand-comp-wrapper", children: /* @__PURE__ */ jsx(ExpandComp, { row }) }) }) : null
   ] }, `tr-wrapper_${row.id}`);
-}
+});
 
 export {
   Row
 };
-//# sourceMappingURL=chunk-PCWEW2UL.js.map
+//# sourceMappingURL=chunk-KBTV24Y4.js.map

package/dist/chunk-KBTV24Y4.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/molecules/expand-table/row.tsx"],"sourcesContent":["import {\n  type Row as TanstackRow,\n  type RowData,\n  flexRender,\n} from '@tanstack/react-table';\nimport React, { useCallback, useMemo, useState, memo } from 'react';\nimport { Collapse } from '../../atoms';\nimport type { CellAlign } from '../../utils/get-cell-align';\n\nexport type ExpandComp<Datum> = React.FC<{ row: TanstackRow<Datum> }>;\nexport type OnRowClick<Datum> = (data: Datum) => void;\n\ninterface RowProps<Datum extends RowData> {\n  row: TanstackRow<Datum>;\n  ExpandComp?: ExpandComp<Datum>;\n  onRowClick?: OnRowClick<Datum>;\n  gridTemplateColumns: string;\n  getRowStyle?: (data: Datum) => React.CSSProperties;\n  getCellStyle?: (data: Datum) => React.CSSProperties;\n  defaultAlign: CellAlign;\n}\n\nexport const Row = memo(function Row<Datum extends RowData>(\n  props: RowProps<Datum>\n): React.ReactElement {\n  const { row, ExpandComp, gridTemplateColumns, getRowStyle, getCellStyle } =\n    props;\n  const [open, setOpen] = useState(false);\n\n  const onClickRow = useCallback(() => {\n    props.onRowClick?.(row.original);\n    setOpen((prev) => !prev);\n  }, [props.onRowClick, row.original]);\n\n  const rowClassName = useMemo(() => {\n    const baseCls = ['tr-wrapper'];\n    if (ExpandComp) {\n      baseCls.push('expandable');\n    }\n    if (props.onRowClick) {\n      baseCls.push('clickable');\n    }\n    return baseCls.join(' ');\n  }, [ExpandComp, props.onRowClick]);\n\n  const visibleCells = useMemo(() => row.getVisibleCells(), [row]);\n\n  const rowStyle = useMemo(\n    () => ({\n      gridTemplateColumns,\n      ...(getRowStyle?.(row.original) || {}),\n    }),\n    [gridTemplateColumns, getRowStyle, row.original]\n  );\n\n  return (\n    <div className={rowClassName} key={`tr-wrapper_${row.id}`}>\n      <button\n        className=\"tr\"\n        key={`tr_${row.id}`}\n        onClick={onClickRow}\n        style={rowStyle}\n        type=\"button\"\n      >\n        {visibleCells.map((cell) => {\n          const autoSize = cell.column.columnDef.meta?.autoSize;\n          const justifyContent =\n            cell.column.columnDef.meta?.align || props.defaultAlign;\n\n          const cellStyle = useMemo(\n            () => ({\n              flexGrow: autoSize ? 1 : undefined,\n              justifyContent,\n              ...(getCellStyle?.(row.original) || {}),\n            }),\n            [autoSize, justifyContent, getCellStyle, row.original]\n          );\n\n          return (\n            <div className=\"td\" key={cell.id} style={cellStyle}>\n              {flexRender(cell.column.columnDef.cell, cell.getContext())}\n              {cell.column.columnDef.meta?.OpenBtn ? (\n                <cell.column.columnDef.meta.OpenBtn\n                  data={row.original}\n                  open={open}\n                  setIsOpen={setOpen}\n                />\n              ) : null}\n            </div>\n          );\n        })}\n      </button>\n      {ExpandComp ? (\n        <Collapse open={open}>\n          <div className=\"expand-comp-wrapper\">\n            <ExpandComp row={row} />\n          </div>\n        </Collapse>\n      ) : null}\n    </div>\n  );\n});\n"],"mappings":";;;;;;;;AAAA;AAAA,EAGE;AAAA,OACK;AACP,SAAgB,aAAa,SAAS,UAAU,YAAY;AA0EhD,SAGI,KAHJ;AAzDL,IAAM,MAAM,KAAK,SAASA,KAC/B,OACoB;AACpB,QAAM,EAAE,KAAK,YAAY,qBAAqB,aAAa,aAAa,IACtE;AACF,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AAEtC,QAAM,aAAa,YAAY,MAAM;AA7BvC;AA8BI,gBAAM,eAAN,+BAAmB,IAAI;AACvB,YAAQ,CAAC,SAAS,CAAC,IAAI;AAAA,EACzB,GAAG,CAAC,MAAM,YAAY,IAAI,QAAQ,CAAC;AAEnC,QAAM,eAAe,QAAQ,MAAM;AACjC,UAAM,UAAU,CAAC,YAAY;AAC7B,QAAI,YAAY;AACd,cAAQ,KAAK,YAAY;AAAA,IAC3B;AACA,QAAI,MAAM,YAAY;AACpB,cAAQ,KAAK,WAAW;AAAA,IAC1B;AACA,WAAO,QAAQ,KAAK,GAAG;AAAA,EACzB,GAAG,CAAC,YAAY,MAAM,UAAU,CAAC;AAEjC,QAAM,eAAe,QAAQ,MAAM,IAAI,gBAAgB,GAAG,CAAC,GAAG,CAAC;AAE/D,QAAM,WAAW;AAAA,IACf,MAAO;AAAA,MACL;AAAA,QACI,2CAAc,IAAI,cAAa,CAAC;AAAA,IAEtC,CAAC,qBAAqB,aAAa,IAAI,QAAQ;AAAA,EACjD;AAEA,SACE,qBAAC,SAAI,WAAW,cACd;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QAEV,SAAS;AAAA,QACT,OAAO;AAAA,QACP,MAAK;AAAA,QAEJ,uBAAa,IAAI,CAAC,SAAS;AAhEpC;AAiEU,gBAAM,YAAW,UAAK,OAAO,UAAU,SAAtB,mBAA4B;AAC7C,gBAAM,mBACJ,UAAK,OAAO,UAAU,SAAtB,mBAA4B,UAAS,MAAM;AAE7C,gBAAM,YAAY;AAAA,YAChB,MAAO;AAAA,cACL,UAAU,WAAW,IAAI;AAAA,cACzB;AAAA,gBACI,6CAAe,IAAI,cAAa,CAAC;AAAA,YAEvC,CAAC,UAAU,gBAAgB,cAAc,IAAI,QAAQ;AAAA,UACvD;AAEA,iBACE,qBAAC,SAAI,WAAU,MAAmB,OAAO,WACtC;AAAA,uBAAW,KAAK,OAAO,UAAU,MAAM,KAAK,WAAW,CAAC;AAAA,cACxD,UAAK,OAAO,UAAU,SAAtB,mBAA4B,WAC3B;AAAA,cAAC,KAAK,OAAO,UAAU,KAAK;AAAA,cAA3B;AAAA,gBACC,MAAM,IAAI;AAAA,gBACV;AAAA,gBACA,WAAW;AAAA;AAAA,YACb,IACE;AAAA,eARmB,KAAK,EAS9B;AAAA,QAEJ,CAAC;AAAA;AAAA,MA/BI,MAAM,IAAI,EAAE;AAAA,IAgCnB;AAAA,IACC,aACC,oBAAC,YAAS,MACR,8BAAC,SAAI,WAAU,uBACb,8BAAC,cAAW,KAAU,GACxB,GACF,IACE;AAAA,OA1C6B,cAAc,IAAI,EAAE,EA2CvD;AAEJ,CAAC;","names":["Row"]}

package/dist/{chunk-NNE23OE4.js → chunk-KGA3ZCJ5.js}

@@ -1,15 +1,12 @@
+import {
+  Grid
+} from "./chunk-EGEQY3KT.js";
 import {
   Heading
 } from "./chunk-HJB3AASV.js";
 import {
   Separator
 } from "./chunk-HYITAA4J.js";
-import {
-  Grid
-} from "./chunk-EGEQY3KT.js";
-import {
-  Badge
-} from "./chunk-EWD4AO5N.js";
 import {
   Box
 } from "./chunk-4Y5BEXVN.js";
@@ -19,6 +16,9 @@ import {
 import {
   Flex
 } from "./chunk-25HMMI7R.js";
+import {
+  Badge
+} from "./chunk-EWD4AO5N.js";
 import {
   ArrowRightIcon,
   TimerIcon
@@ -96,4 +96,4 @@ function CurriculumCard(props) {
 export {
   CurriculumCard
 };
-//# sourceMappingURL=chunk-NNE23OE4.js.map
+//# sourceMappingURL=chunk-KGA3ZCJ5.js.map

package/dist/{chunk-BBEZXZQH.js → chunk-QJ6K6ITU.js}

@@ -14,6 +14,9 @@ import {
 import {
   Form
 } from "./chunk-4JBL5FRI.js";
+import {
+  toast
+} from "./chunk-CYYWMYE7.js";
 import {
   Inset
 } from "./chunk-XQOL7UBI.js";
@@ -23,9 +26,6 @@ import {
 import {
   Heading
 } from "./chunk-HJB3AASV.js";
-import {
-  toast
-} from "./chunk-CYYWMYE7.js";
 import {
   Box
 } from "./chunk-4Y5BEXVN.js";
@@ -44,13 +44,13 @@ import {
 import {
   Card
 } from "./chunk-2ZQK7NTN.js";
+import {
+  Badge
+} from "./chunk-EWD4AO5N.js";
 import {
   ArrowRightIcon,
   Cross1Icon
 } from "./chunk-HLFG5ZTU.js";
-import {
-  Badge
-} from "./chunk-EWD4AO5N.js";
 import {
   __spreadProps,
   __spreadValues
@@ -281,4 +281,4 @@ function ReservationCard(props) {
 export {
   ReservationCard
 };
-//# sourceMappingURL=chunk-BBEZXZQH.js.map
+//# sourceMappingURL=chunk-QJ6K6ITU.js.map

package/dist/{chunk-LCGALXZI.js → chunk-QUEDUGJF.js}

@@ -1,12 +1,12 @@
 import {
   Row
-} from "./chunk-PCWEW2UL.js";
+} from "./chunk-KBTV24Y4.js";
 import {
   Spinner
 } from "./chunk-FR2GDOU2.js";
 import {
   Pagination
-} from "./chunk-DONK6DLV.js";
+} from "./chunk-GFP2V4TL.js";
 import {
   Typo
 } from "./chunk-52MVZ6AN.js";
@@ -15,7 +15,7 @@ import {
 } from "./chunk-25HMMI7R.js";
 import {
   TriangleArrowUpIcon
-} from "./chunk-NDUKDKGB.js";
+} from "./chunk-CO3KW264.js";
 import {
   TriangleArrowDownIcon
 } from "./chunk-BSTJBBEX.js";
@@ -29,9 +29,9 @@ import {
   createColumnHelper,
   getPaginationRowModel
 } from "@tanstack/react-table";
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useMemo, useState, memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-function ExpandTable(props) {
+var ExpandTable = memo(function ExpandTable2(props) {
   const {
     data,
     columns,
@@ -39,7 +39,7 @@ function ExpandTable(props) {
     placeholder,
     onRowClick,
     tableStyle,
-    showPagination,
+    showPagination = true,
     isLoading,
     pageIndex = 0,
     pageSize = 10,
@@ -53,19 +53,6 @@ function ExpandTable(props) {
     pageSize: pageSize || 9999
   });
   const [sorting, setSorting] = useState([]);
-  const { getRowModel, getHeaderGroups, setPageIndex } = useReactTable({
-    data: data || [],
-    columns,
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    state: {
-      sorting,
-      pagination
-    },
-    onSortingChange: setSorting,
-    getPaginationRowModel: getPaginationRowModel(),
-    onPaginationChange: setPagination
-  });
   const gridTemplateColumns = useMemo(() => {
     return columns.map((col) => {
       var _a;
@@ -74,7 +61,22 @@ function ExpandTable(props) {
       return `${col.size || 150}px`;
     }).join(" ");
   }, [columns]);
-  const rowModels = getRowModel();
+  const tableInstance = useMemo(() => {
+    return useReactTable({
+      data: data || [],
+      columns,
+      getCoreRowModel: getCoreRowModel(),
+      getSortedRowModel: getSortedRowModel(),
+      state: {
+        sorting,
+        pagination
+      },
+      onSortingChange: setSorting,
+      getPaginationRowModel: getPaginationRowModel(),
+      onPaginationChange: setPagination
+    });
+  }, [data, columns, sorting, pagination]);
+  const { getRowModel, getHeaderGroups, setPageIndex } = tableInstance;
   const onChangePagination = useCallback(
     (page) => {
       setPageIndex(page - 1);
@@ -108,8 +110,10 @@ function ExpandTable(props) {
       return 0;
     return Math.ceil(data.length / pageSize);
   }, [data, pageSize]);
+  const rowModels = useMemo(() => getRowModel(), [getRowModel]);
+  const headerGroups = useMemo(() => getHeaderGroups(), [getHeaderGroups]);
   return /* @__PURE__ */ jsxs("div", { className: "expand-table", style: tableStyle, children: [
-    /* @__PURE__ */ jsx("div", { className: "thead", children: getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: "thead", children: headerGroups.map((headerGroup) => /* @__PURE__ */ jsx(
       "div",
       {
         className: "tr",
@@ -183,10 +187,10 @@ function ExpandTable(props) {
       }
     ) }) : null
   ] });
-}
+});
 
 export {
   createColumnHelper,
   ExpandTable
 };
-//# sourceMappingURL=chunk-LCGALXZI.js.map
+//# sourceMappingURL=chunk-QUEDUGJF.js.map

package/dist/chunk-QUEDUGJF.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/molecules/expand-table/index.tsx"],"sourcesContent":["import type {\n  ColumnDef,\n  SortingState,\n  RowData,\n  Row as RowType,\n  PaginationState,\n} from '@tanstack/react-table';\nimport type { CSSProperties } from 'react';\nimport {\n  flexRender,\n  getCoreRowModel,\n  useReactTable,\n  getSortedRowModel,\n  createColumnHelper,\n  getPaginationRowModel,\n} from '@tanstack/react-table';\nimport React, { useCallback, useMemo, useState, memo } from 'react';\nimport { Flex, Pagination, Spinner, Typo } from '../../atoms';\nimport { TriangleArrowDownIcon } from '../../icons/down';\nimport { TriangleArrowUpIcon } from '../../icons/up';\nimport { Row, type ExpandComp, type OnRowClick } from './row';\n\nexport type { ExpandComp, OnRowClick, ColumnDef, RowType as Row };\nexport { createColumnHelper };\n\nexport interface ExpandTableProps<Datum extends RowData> {\n  /** 렌더할 데이터 배열  */\n  data?: Datum[];\n  /** 테이블 컬럼의 메타 데이터 */\n  columns: ColumnDef<Datum>[];\n  /** Row의 open이 true인 경우 하단의 collapse에 렌더할 컴포넌트 */\n  ExpandComp?: ExpandComp<Datum>;\n  /** 데이테가 없을 시 화면에 표시할 컴포넌트 */\n  placeholder?: React.ReactNode;\n  /** 행 클릭 시 실행할 콜백 */\n  onRowClick?: OnRowClick<Datum>;\n  getRowStyle?: (data: Datum) => CSSProperties;\n  getCellStyle?: (data: Datum) => CSSProperties;\n  tableStyle?: CSSProperties;\n  isLoading?: boolean;\n\n  /** pagination - 표시 유무, 기본값 true */\n  showPagination?: boolean;\n  /** pagination - 현재 선택된 페이지, 0부터 시작 */\n  pageIndex?: number;\n  /** pagination - 한 페이지에 표시될 컬럼 개수, 기본값 10 */\n  pageSize?: number;\n  /** pagination -  */\n  siblingCount?: number;\n}\n\nexport const ExpandTable = memo(function ExpandTable<Datum extends RowData>(\n  props: ExpandTableProps<Datum>\n): React.ReactElement {\n  const {\n    data,\n    columns,\n    ExpandComp,\n    placeholder,\n    onRowClick,\n    tableStyle,\n    showPagination = true,\n    isLoading,\n    pageIndex = 0,\n    pageSize = 10,\n    siblingCount = 2,\n    getRowStyle,\n    getCellStyle,\n  } = props;\n  const defaultAlign = 'left';\n  const [pagination, setPagination] = useState<PaginationState>({\n    pageIndex: pageIndex || 0,\n    pageSize: pageSize || 9999,\n  });\n\n  const [sorting, setSorting] = useState<SortingState>([]);\n  const gridTemplateColumns = useMemo<string>(() => {\n    return columns\n      .map((col) => {\n        if (col.meta?.autoSize) return '1fr';\n        return `${col.size || 150}px`;\n      })\n      .join(' ');\n  }, [columns]);\n\n  const tableInstance = useMemo(() => {\n    return useReactTable({\n      data: data || [],\n      columns,\n      getCoreRowModel: getCoreRowModel(),\n      getSortedRowModel: getSortedRowModel(),\n      state: {\n        sorting,\n        pagination,\n      },\n      onSortingChange: setSorting,\n      getPaginationRowModel: getPaginationRowModel(),\n      onPaginationChange: setPagination,\n    });\n  }, [data, columns, sorting, pagination]);\n\n  const { getRowModel, getHeaderGroups, setPageIndex } = tableInstance;\n\n  const onChangePagination = useCallback(\n    (page: number) => {\n      setPageIndex(page - 1);\n    },\n    [setPageIndex]\n  );\n\n  const helpCompRender = useCallback(\n    (rowLength: number) => {\n      if (isLoading) {\n        return (\n          <Flex\n            align=\"center\"\n            height=\"100%\"\n            justify=\"center\"\n            p=\"5\"\n            width=\"100%\"\n          >\n            <Spinner />\n          </Flex>\n        );\n      }\n      if (rowLength === 0) {\n        return (\n          <div className=\"tr\" key=\"expand_placeholder\">\n            <Flex align=\"center\" justify=\"center\">\n              {placeholder || (\n                <Typo color=\"gray\" mb=\"6\" mt=\"6\" variant=\"body\">\n                  데이터가 없습니다\n                </Typo>\n              )}\n            </Flex>\n          </div>\n        );\n      }\n      return null;\n    },\n    [isLoading, placeholder]\n  );\n\n  const pageCount = useMemo(() => {\n    if (!data) return 0;\n    return Math.ceil(data.length / pageSize);\n  }, [data, pageSize]);\n\n  const rowModels = useMemo(() => getRowModel(), [getRowModel]);\n  const headerGroups = useMemo(() => getHeaderGroups(), [getHeaderGroups]);\n\n  return (\n    <div className=\"expand-table\" style={tableStyle}>\n      <div className=\"thead\">\n        {headerGroups.map((headerGroup) => (\n          <div\n            className=\"tr\"\n            key={headerGroup.id}\n            style={{ gridTemplateColumns }}\n          >\n            {headerGroup.headers.map((header) => {\n              const sortable = header.column.getCanSort();\n              const sortedState = header.column.getIsSorted();\n              const justifyContent =\n                header.column.columnDef.meta?.align || defaultAlign;\n\n              return (\n                <div className={`${justifyContent} th`} key={header.id}>\n                  <button\n                    onClick={header.column.getToggleSortingHandler()}\n                    style={\n                      sortable ? { cursor: 'pointer' } : { cursor: 'default' }\n                    }\n                    type=\"button\"\n                  >\n                    <Typo as=\"div\" variant=\"body\">\n                      {flexRender(\n                        header.column.columnDef.header,\n                        header.getContext()\n                      )}\n                    </Typo>\n                    {sortable ? (\n                      <Flex\n                        direction=\"column\"\n                        style={{ marginLeft: 'var(--space-2)' }}\n                      >\n                        <TriangleArrowUpIcon\n                          color={\n                            sortedState === 'asc'\n                              ? 'var(--iris-10)'\n                              : 'var(--iris-6)'\n                          }\n                        />\n                        <TriangleArrowDownIcon\n                          color={\n                            sortedState === 'desc'\n                              ? 'var(--iris-10)'\n                              : 'var(--iris-6)'\n                          }\n                        />\n                      </Flex>\n                    ) : null}\n                  </button>\n                </div>\n              );\n            })}\n          </div>\n        ))}\n      </div>\n      <div className=\"tbody\">\n        {/* 조건에 따라 placeholder 또는 loading 렌더*/}\n        {helpCompRender(rowModels.rows.length) ||\n          rowModels.rows.map((row) => {\n            return (\n              <Row\n                ExpandComp={ExpandComp}\n                defaultAlign={defaultAlign}\n                getCellStyle={getCellStyle}\n                getRowStyle={getRowStyle}\n                gridTemplateColumns={gridTemplateColumns}\n                key={`row_${row.id}`}\n                onRowClick={onRowClick}\n                row={row}\n              />\n            );\n          })}\n      </div>\n\n      {showPagination ? (\n        <Flex justify=\"end\" pt=\"3\" width=\"100%\">\n          <Pagination\n            count={pageCount}\n            onChange={onChangePagination}\n            page={pagination.pageIndex + 1}\n            siblingCount={siblingCount}\n          />\n        </Flex>\n      ) : null}\n    </div>\n  );\n});\n"],"mappings":"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","names":["ExpandTable"]}

package/dist/chunk-THHUFQEU.js

@@ -0,0 +1,97 @@
+import {
+  ClosePanelArrowIcon
+} from "./chunk-UNTA4JJU.js";
+import {
+  Separator
+} from "./chunk-HYITAA4J.js";
+import {
+  usePortalContainer
+} from "./chunk-TD45ZF7D.js";
+import {
+  IconButton
+} from "./chunk-O3DNDMV3.js";
+import {
+  Flex
+} from "./chunk-25HMMI7R.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-N552FDTV.js";
+
+// src/atoms/drawer.tsx
+import * as Dialog from "@radix-ui/react-dialog";
+import { Grid, Theme } from "@radix-ui/themes";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Root2(props) {
+  return /* @__PURE__ */ jsx(Dialog.Root, __spreadValues({}, props));
+}
+var preventDefault = (e) => {
+  e.preventDefault();
+};
+function Content2(props) {
+  const _a = props, {
+    position = "right",
+    className,
+    children,
+    HeaderContent
+  } = _a, rest = __objRest(_a, [
+    "position",
+    "className",
+    "children",
+    "HeaderContent"
+  ]);
+  const mobileHeaderSize = 48;
+  const desktopHeaderSize = 64;
+  const separatorSize = 1;
+  const { drawerContainerRef } = usePortalContainer();
+  return /* @__PURE__ */ jsx(Dialog.Portal, { container: drawerContainerRef.current, children: /* @__PURE__ */ jsxs(Theme, { children: [
+    /* @__PURE__ */ jsx(Dialog.Overlay, { className: "DrawerOverlay" }),
+    /* @__PURE__ */ jsx(
+      Dialog.Content,
+      __spreadProps(__spreadValues({
+        className: `DrawerContent ${position} ${className || ""}`,
+        onPointerDownOutside: preventDefault
+      }, rest), {
+        children: /* @__PURE__ */ jsxs(
+          Grid,
+          {
+            height: "100%",
+            overflow: "hidden",
+            rows: {
+              initial: `${mobileHeaderSize}px ${separatorSize}px calc(100% - ${mobileHeaderSize + separatorSize}px)`,
+              sm: `${desktopHeaderSize}px ${separatorSize}px calc(100% - ${desktopHeaderSize + separatorSize}px)`
+            },
+            children: [
+              /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "3", px: { initial: "4", md: "6" }, children: [
+                /* @__PURE__ */ jsx(Dialog.Close, { asChild: true, children: /* @__PURE__ */ jsx(IconButton, { color: "gray", variant: "outline", children: /* @__PURE__ */ jsx(ClosePanelArrowIcon, {}) }) }),
+                HeaderContent
+              ] }),
+              /* @__PURE__ */ jsx(Separator, { orientation: "horizontal", size: "4" }),
+              children
+            ]
+          }
+        )
+      })
+    )
+  ] }) });
+}
+function Trigger2(props) {
+  return /* @__PURE__ */ jsx(Dialog.Trigger, __spreadValues({ asChild: true }, props));
+}
+var Drawer = {
+  Root: Dialog.Root,
+  Trigger: Trigger2,
+  Content: Content2,
+  Close: Dialog.Close,
+  Title: Dialog.Title,
+  Description: Dialog.Description
+};
+
+export {
+  Root2 as Root,
+  Content2 as Content,
+  Trigger2 as Trigger,
+  Drawer
+};
+//# sourceMappingURL=chunk-THHUFQEU.js.map

package/dist/chunk-THHUFQEU.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/atoms/drawer.tsx"],"sourcesContent":["import React from 'react';\nimport * as Dialog from '@radix-ui/react-dialog';\nimport { Grid, Theme } from '@radix-ui/themes';\nimport { usePortalContainer } from '@/theme/portal-provider';\nimport { ClosePanelArrowIcon } from '../icons/close-panel-arrow';\nimport { Flex } from './flex';\nimport { Separator } from './separator';\nimport { IconButton } from './icon-button';\n\nexport function Root(props: Dialog.DialogProps): React.ReactElement {\n  return <Dialog.Root {...props} />;\n}\n\ntype ContentProps = Dialog.DialogContentProps & {\n  /** Drawer가 붙는 위치, 기본값 right */\n  position?: 'left' | 'right' | 'bottom' | 'top';\n  HeaderContent?: React.ReactNode;\n};\n\nconst preventDefault: Dialog.DialogContentProps['onPointerDownOutside'] = (\n  e\n) => {\n  e.preventDefault();\n};\n\nexport function Content(props: ContentProps): React.ReactElement {\n  const {\n    position = 'right',\n    className,\n    children,\n    HeaderContent,\n    ...rest\n  } = props;\n\n  const mobileHeaderSize = 48;\n  const desktopHeaderSize = 64;\n  const separatorSize = 1;\n  const { drawerContainerRef } = usePortalContainer();\n\n  return (\n    <Dialog.Portal container={drawerContainerRef.current}>\n      <Theme>\n        <Dialog.Overlay className=\"DrawerOverlay\" />\n        <Dialog.Content\n          className={`DrawerContent ${position} ${className || ''}`}\n          onPointerDownOutside={preventDefault}\n          {...rest}\n        >\n          <Grid\n            height=\"100%\"\n            overflow=\"hidden\"\n            rows={{\n              initial: `${mobileHeaderSize}px ${separatorSize}px calc(100% - ${mobileHeaderSize + separatorSize}px)`,\n              sm: `${desktopHeaderSize}px ${separatorSize}px calc(100% - ${desktopHeaderSize + separatorSize}px)`,\n            }}\n          >\n            <Flex align=\"center\" gap=\"3\" px={{ initial: '4', md: '6' }}>\n              <Dialog.Close asChild>\n                <IconButton color=\"gray\" variant=\"outline\">\n                  <ClosePanelArrowIcon />\n                </IconButton>\n              </Dialog.Close>\n              {HeaderContent}\n            </Flex>\n            <Separator orientation=\"horizontal\" size=\"4\" />\n            {children}\n          </Grid>\n        </Dialog.Content>\n      </Theme>\n    </Dialog.Portal>\n  );\n}\n\nexport function Trigger(props: Dialog.DialogTriggerProps): React.ReactElement {\n  return <Dialog.Trigger asChild {...props} />;\n}\n\nexport const Drawer = {\n  Root: Dialog.Root,\n  Trigger,\n  Content,\n  Close: Dialog.Close,\n  Title: Dialog.Title,\n  Description: Dialog.Description,\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AACA,YAAY,YAAY;AACxB,SAAS,MAAM,aAAa;AAQnB,cA8CG,YA9CH;AADF,SAASA,MAAK,OAA+C;AAClE,SAAO,oBAAQ,aAAP,mBAAgB,MAAO;AACjC;AAQA,IAAM,iBAAoE,CACxE,MACG;AACH,IAAE,eAAe;AACnB;AAEO,SAASC,SAAQ,OAAyC;AAC/D,QAMI,YALF;AAAA,eAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,EA9BJ,IAgCM,IADC,iBACD,IADC;AAAA,IAJH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAIF,QAAM,mBAAmB;AACzB,QAAM,oBAAoB;AAC1B,QAAM,gBAAgB;AACtB,QAAM,EAAE,mBAAmB,IAAI,mBAAmB;AAElD,SACE,oBAAQ,eAAP,EAAc,WAAW,mBAAmB,SAC3C,+BAAC,SACC;AAAA,wBAAQ,gBAAP,EAAe,WAAU,iBAAgB;AAAA,IAC1C;AAAA,MAAQ;AAAA,MAAP;AAAA,QACC,WAAW,iBAAiB,QAAQ,IAAI,aAAa,EAAE;AAAA,QACvD,sBAAsB;AAAA,SAClB,OAHL;AAAA,QAKC;AAAA,UAAC;AAAA;AAAA,YACC,QAAO;AAAA,YACP,UAAS;AAAA,YACT,MAAM;AAAA,cACJ,SAAS,GAAG,gBAAgB,MAAM,aAAa,kBAAkB,mBAAmB,aAAa;AAAA,cACjG,IAAI,GAAG,iBAAiB,MAAM,aAAa,kBAAkB,oBAAoB,aAAa;AAAA,YAChG;AAAA,YAEA;AAAA,mCAAC,QAAK,OAAM,UAAS,KAAI,KAAI,IAAI,EAAE,SAAS,KAAK,IAAI,IAAI,GACvD;AAAA,oCAAQ,cAAP,EAAa,SAAO,MACnB,8BAAC,cAAW,OAAM,QAAO,SAAQ,WAC/B,8BAAC,uBAAoB,GACvB,GACF;AAAA,gBACC;AAAA,iBACH;AAAA,cACA,oBAAC,aAAU,aAAY,cAAa,MAAK,KAAI;AAAA,cAC5C;AAAA;AAAA;AAAA,QACH;AAAA;AAAA,IACF;AAAA,KACF,GACF;AAEJ;AAEO,SAASC,SAAQ,OAAsD;AAC5E,SAAO,oBAAQ,gBAAP,iBAAe,SAAO,QAAK,MAAO;AAC5C;AAEO,IAAM,SAAS;AAAA,EACpB,MAAa;AAAA,EACb,SAAAA;AAAA,EACA,SAAAD;AAAA,EACA,OAAc;AAAA,EACd,OAAc;AAAA,EACd,aAAoB;AACtB;","names":["Root","Content","Trigger"]}

package/dist/{chunk-KNK5RG7Y.js → chunk-XWUFK43Q.js}

@@ -1,24 +1,24 @@
 import {
   Row
-} from "./chunk-PCWEW2UL.js";
+} from "./chunk-KBTV24Y4.js";
 import {
   Spinner
 } from "./chunk-FR2GDOU2.js";
 import {
   Pagination
-} from "./chunk-DONK6DLV.js";
+} from "./chunk-GFP2V4TL.js";
 import {
   Typo
 } from "./chunk-52MVZ6AN.js";
 import {
   Flex
 } from "./chunk-25HMMI7R.js";
+import {
+  TriangleArrowUpIcon
+} from "./chunk-CO3KW264.js";
 import {
   TriangleArrowDownIcon
 } from "./chunk-BSTJBBEX.js";
-import {
-  TriangleArrowUpIcon
-} from "./chunk-NDUKDKGB.js";
 
 // src/molecules/expand-table/index.tsx
 import {
@@ -189,4 +189,4 @@ export {
   createColumnHelper,
   ExpandTable
 };
-//# sourceMappingURL=chunk-KNK5RG7Y.js.map
+//# sourceMappingURL=chunk-XWUFK43Q.js.map

package/dist/chunk-XWUFK43Q.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/molecules/expand-table/index.tsx"],"sourcesContent":["import type {\n  ColumnDef,\n  SortingState,\n  RowData,\n  Row as RowType,\n  PaginationState,\n} from '@tanstack/react-table';\nimport type { CSSProperties } from 'react';\nimport {\n  flexRender,\n  getCoreRowModel,\n  useReactTable,\n  getSortedRowModel,\n  createColumnHelper,\n  getPaginationRowModel,\n} from '@tanstack/react-table';\nimport React, { useCallback, useMemo, useState } from 'react';\nimport { Flex, Pagination, Spinner, Typo } from '../../atoms';\nimport { TriangleArrowDownIcon } from '../../icons/down';\nimport { TriangleArrowUpIcon } from '../../icons/up';\nimport { Row, type ExpandComp, type OnRowClick } from './row';\n\nexport type { ExpandComp, OnRowClick, ColumnDef, RowType as Row };\nexport { createColumnHelper };\n\nexport interface ExpandTableProps<Datum extends RowData> {\n  /** 렌더할 데이터 배열  */\n  data?: Datum[];\n  /** 테이블 컬럼의 메타 데이터 */\n  columns: ColumnDef<Datum>[];\n  /** Row의 open이 true인 경우 하단의 collapse에 렌더할 컴포넌트 */\n  ExpandComp?: ExpandComp<Datum>;\n  /** 데이테가 없을 시 화면에 표시할 컴포넌트 */\n  placeholder?: React.ReactNode;\n  /** 행 클릭 시 실행할 콜백 */\n  onRowClick?: OnRowClick<Datum>;\n  getRowStyle?: (data: Datum) => CSSProperties;\n  getCellStyle?: (data: Datum) => CSSProperties;\n  tableStyle?: CSSProperties;\n  isLoading?: boolean;\n\n  /** pagination - 표시 유무, 기본값 true */\n  showPagination?: boolean;\n  /** pagination - 현재 선택된 페이지, 0부터 시작 */\n  pageIndex?: number;\n  /** pagination - 한 페이지에 표시될 컬럼 개수, 기본값 10 */\n  pageSize?: number;\n  /** pagination -  */\n  siblingCount?: number;\n}\n\nexport function ExpandTable<Datum extends RowData>(\n  props: ExpandTableProps<Datum>\n): React.ReactElement {\n  const {\n    data,\n    columns,\n    ExpandComp,\n    placeholder,\n    onRowClick,\n    tableStyle,\n    showPagination = true,\n    isLoading,\n    pageIndex = 0,\n    pageSize = 10,\n    siblingCount = 2,\n    getRowStyle,\n    getCellStyle,\n  } = props;\n  const defaultAlign = 'left';\n  const [pagination, setPagination] = useState<PaginationState>({\n    pageIndex: pageIndex || 0,\n    pageSize: pageSize || 9999,\n  });\n\n  const [sorting, setSorting] = useState<SortingState>([]);\n  const { getRowModel, getHeaderGroups, setPageIndex } = useReactTable({\n    data: data || [],\n    columns,\n    getCoreRowModel: getCoreRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    state: {\n      sorting,\n      pagination,\n    },\n    onSortingChange: setSorting,\n    getPaginationRowModel: getPaginationRowModel(),\n    onPaginationChange: setPagination,\n  });\n\n  const gridTemplateColumns = useMemo<string>(() => {\n    return columns\n      .map((col) => {\n        if (col.meta?.autoSize) return '1fr';\n        return `${col.size || 150}px`;\n      })\n      .join(' ');\n  }, [columns]);\n\n  const rowModels = getRowModel();\n\n  const onChangePagination = useCallback(\n    (page: number) => {\n      setPageIndex(page - 1);\n    },\n    [setPageIndex]\n  );\n\n  const helpCompRender = useCallback(\n    (rowLength: number) => {\n      if (isLoading) {\n        return (\n          <Flex\n            align=\"center\"\n            height=\"100%\"\n            justify=\"center\"\n            p=\"5\"\n            width=\"100%\"\n          >\n            <Spinner />\n          </Flex>\n        );\n      }\n      if (rowLength === 0) {\n        return (\n          <div className=\"tr\" key=\"expand_placeholder\">\n            <Flex align=\"center\" justify=\"center\">\n              {placeholder || (\n                <Typo color=\"gray\" mb=\"6\" mt=\"6\" variant=\"body\">\n                  데이터가 없습니다\n                </Typo>\n              )}\n            </Flex>\n          </div>\n        );\n      }\n      return null;\n    },\n    [isLoading, placeholder]\n  );\n\n  const pageCount = useMemo(() => {\n    if (!data) return 0;\n    return Math.ceil(data.length / pageSize);\n  }, [data, pageSize]);\n\n  return (\n    <div className=\"expand-table\" style={tableStyle}>\n      <div className=\"thead\">\n        {getHeaderGroups().map((headerGroup) => (\n          <div\n            className=\"tr\"\n            key={headerGroup.id}\n            style={{ gridTemplateColumns }}\n          >\n            {headerGroup.headers.map((header) => {\n              const sortable = header.column.getCanSort();\n              const sortedState = header.column.getIsSorted();\n              const justifyContent =\n                header.column.columnDef.meta?.align || defaultAlign;\n\n              return (\n                <div className={`${justifyContent} th`} key={header.id}>\n                  <button\n                    onClick={header.column.getToggleSortingHandler()}\n                    style={\n                      sortable ? { cursor: 'pointer' } : { cursor: 'default' }\n                    }\n                    type=\"button\"\n                  >\n                    <Typo as=\"div\" variant=\"body\">\n                      {flexRender(\n                        header.column.columnDef.header,\n                        header.getContext()\n                      )}\n                    </Typo>\n                    {sortable ? (\n                      <Flex\n                        direction=\"column\"\n                        style={{ marginLeft: 'var(--space-2)' }}\n                      >\n                        <TriangleArrowUpIcon\n                          color={\n                            sortedState === 'asc'\n                              ? 'var(--iris-10)'\n                              : 'var(--iris-6)'\n                          }\n                        />\n                        <TriangleArrowDownIcon\n                          color={\n                            sortedState === 'desc'\n                              ? 'var(--iris-10)'\n                              : 'var(--iris-6)'\n                          }\n                        />\n                      </Flex>\n                    ) : null}\n                  </button>\n                </div>\n              );\n            })}\n          </div>\n        ))}\n      </div>\n      <div className=\"tbody\">\n        {/* 조건에 따라 placeholder 또는 loading 렌더*/}\n        {helpCompRender(rowModels.rows.length) ||\n          rowModels.rows.map((row) => {\n            return (\n              <Row\n                ExpandComp={ExpandComp}\n                defaultAlign={defaultAlign}\n                getCellStyle={getCellStyle}\n                getRowStyle={getRowStyle}\n                gridTemplateColumns={gridTemplateColumns}\n                key={`row_${row.id}`}\n                onRowClick={onRowClick}\n                row={row}\n              />\n            );\n          })}\n      </div>\n\n      {showPagination ? (\n        <Flex justify=\"end\" pt=\"3\" width=\"100%\">\n          <Pagination\n            count={pageCount}\n            onChange={onChangePagination}\n            page={pagination.pageIndex + 1}\n            siblingCount={siblingCount}\n          />\n        </Flex>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/{chunk-QIBROLOP.js → chunk-ZWVC35OM.js}

@@ -1,9 +1,9 @@
-import {
-  Flex
-} from "./chunk-25HMMI7R.js";
 import {
   Typo
 } from "./chunk-52MVZ6AN.js";
+import {
+  Flex
+} from "./chunk-25HMMI7R.js";
 import {
   Avatar
 } from "./chunk-JYJA2PMG.js";
@@ -166,4 +166,4 @@ var Stepper = {
 export {
   Stepper
 };
-//# sourceMappingURL=chunk-QIBROLOP.js.map
+//# sourceMappingURL=chunk-ZWVC35OM.js.map

package/dist/icon.js

@@ -57,6 +57,9 @@ import "./chunk-7WVKYXIG.js";
 import {
   TriangleArrowUpIcon
 } from "./chunk-NDUKDKGB.js";
+import {
+  CameraDisabledIcon
+} from "./chunk-T6CF4F7J.js";
 import {
   CameraIcon
 } from "./chunk-A75U32HT.js";
@@ -72,9 +75,6 @@ import {
 import {
   PhoneRingIcon
 } from "./chunk-UFYNSPJQ.js";
-import {
-  CameraDisabledIcon
-} from "./chunk-T6CF4F7J.js";
 import "./chunk-N552FDTV.js";
 export {
   ArchiveIcon,

package/dist/icons/index.js

@@ -2,6 +2,9 @@ import "../chunk-7WVKYXIG.js";
 import {
   TriangleArrowUpIcon
 } from "../chunk-NDUKDKGB.js";
+import {
+  CameraDisabledIcon
+} from "../chunk-T6CF4F7J.js";
 import {
   CameraIcon
 } from "../chunk-A75U32HT.js";
@@ -17,9 +20,6 @@ import {
 import {
   PhoneRingIcon
 } from "../chunk-UFYNSPJQ.js";
-import {
-  CameraDisabledIcon
-} from "../chunk-T6CF4F7J.js";
 import "../chunk-N552FDTV.js";
 export {
   CameraDisabledIcon,

package/dist/index.cjs

@@ -1371,7 +1371,17 @@ var preventDefault2 = (e) => {
   e.preventDefault();
 };
 function Content6(props) {
-  const _a = props, { position = "right", className, children } = _a, rest = __objRest(_a, ["position", "className", "children"]);
+  const _a = props, {
+    position = "right",
+    className,
+    children,
+    HeaderContent
+  } = _a, rest = __objRest(_a, [
+    "position",
+    "className",
+    "children",
+    "HeaderContent"
+  ]);
   const mobileHeaderSize = 48;
   const desktopHeaderSize = 64;
   const separatorSize = 1;
@@ -1394,7 +1404,10 @@ function Content6(props) {
               sm: `${desktopHeaderSize}px ${separatorSize}px calc(100% - ${desktopHeaderSize + separatorSize}px)`
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_themes22.Flex, { align: "center", px: { initial: "4", md: "6" }, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Dialog2.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_themes18.IconButton, { color: "gray", variant: "outline", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ClosePanelArrowIcon, {}) }) }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_themes22.Flex, { align: "center", gap: "3", px: { initial: "4", md: "6" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Dialog2.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_themes18.IconButton, { color: "gray", variant: "outline", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ClosePanelArrowIcon, {}) }) }),
+                HeaderContent
+              ] }),
               /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_themes39.Separator, { orientation: "horizontal", size: "4" }),
               children
             ]