@tipp/ui 2.3.9 → 2.3.11

package/dist/molecules/index.js

@@ -1,25 +1,10 @@
 import "../chunk-QDXZVPRR.js";
-import {
-  ExpandTable,
-  createColumnHelper
-} from "../chunk-LAZUFZRZ.js";
-import "../chunk-JCG2AUFJ.js";
 import "../chunk-AS7ID74X.js";
 import {
   CurriculumBody
-} from "../chunk-27MOXAR2.js";
-import {
-  CurriculumSidebar
-} from "../chunk-EDDPJB52.js";
-import "../chunk-SZA3RAKD.js";
-import "../chunk-WS7IOHVK.js";
-import "../chunk-6L4OTKID.js";
-import "../chunk-SDEDXT7A.js";
-import "../chunk-4TST4UK5.js";
-import "../chunk-LHKGSKKG.js";
-import "../chunk-43FK4CS3.js";
-import "../chunk-ZDMAVBNK.js";
-import "../chunk-JNYTH4BZ.js";
+} from "../chunk-6V47NXW5.js";
+import "../chunk-GFBHPXDF.js";
+import "../chunk-OX3N37YY.js";
 import "../chunk-W3TY3SYU.js";
 import "../chunk-QIRUYN3K.js";
 import "../chunk-BUZDDAS6.js";
@@ -31,8 +16,29 @@ import "../chunk-AQVIQODP.js";
 import "../chunk-WHZZKXOD.js";
 import "../chunk-YT4LGWIY.js";
 import "../chunk-PYGTM7ML.js";
+import "../chunk-JNYTH4BZ.js";
 import "../chunk-GMKRNFH5.js";
 import "../chunk-QGKQ3IX7.js";
+import {
+  CurriculumSidebar
+} from "../chunk-Y724ZBAT.js";
+import "../chunk-KTUCYAG7.js";
+import "../chunk-4TST4UK5.js";
+import "../chunk-WS7IOHVK.js";
+import "../chunk-6L4OTKID.js";
+import "../chunk-SDEDXT7A.js";
+import {
+  ExpandTable,
+  createColumnHelper
+} from "../chunk-ZBZ7IGBT.js";
+import "../chunk-JCG2AUFJ.js";
+import "../chunk-LHKGSKKG.js";
+import {
+  DatePickerButton
+} from "../chunk-I46J2XHG.js";
+import {
+  DatePicker
+} from "../chunk-FVTBDVT4.js";
 import {
   CurriculumSubNav
 } from "../chunk-OUJ7TDIH.js";
@@ -43,12 +49,6 @@ import {
 import {
   CurriculumV2Layout
 } from "../chunk-CQSM6JCO.js";
-import {
-  DatePickerButton
-} from "../chunk-I46J2XHG.js";
-import {
-  DatePicker
-} from "../chunk-FVTBDVT4.js";
 import "../chunk-JF7JAMOQ.js";
 import {
   RadioButtonCard
@@ -63,10 +63,10 @@ import {
   TimeSelect
 } from "../chunk-7PF6I4RN.js";
 import "../chunk-V2DF2GUE.js";
-import "../chunk-BXX3B3E4.js";
 import "../chunk-NRPDVI76.js";
 import "../chunk-2BPFXK4L.js";
 import "../chunk-NWJSLIQ3.js";
+import "../chunk-BXX3B3E4.js";
 import {
   DynamicFormResponseItem
 } from "../chunk-QTQKJ4A2.js";
@@ -113,7 +113,7 @@ import "../chunk-HYITAA4J.js";
 import "../chunk-TULWX7D6.js";
 import "../chunk-DHZVOXFM.js";
 import "../chunk-WV2HN6H4.js";
-import "../chunk-JAMNT4FG.js";
+import "../chunk-SBJOKO35.js";
 import "../chunk-5AVBYDPB.js";
 import "../chunk-365QMK4D.js";
 import "../chunk-EGEQY3KT.js";

package/dist/molecules/time-select.js

@@ -2,10 +2,10 @@ import {
   TimeSelect
 } from "../chunk-7PF6I4RN.js";
 import "../chunk-V2DF2GUE.js";
-import "../chunk-BXX3B3E4.js";
 import "../chunk-NRPDVI76.js";
 import "../chunk-2BPFXK4L.js";
 import "../chunk-NWJSLIQ3.js";
+import "../chunk-BXX3B3E4.js";
 import "../chunk-X2GMDZ7M.js";
 import "../chunk-25HMMI7R.js";
 import "../chunk-CRTRMMJ7.js";

package/dist/utils/index.js

@@ -1,7 +1,4 @@
 import "../chunk-V2DF2GUE.js";
-import {
-  scrollTo
-} from "../chunk-BXX3B3E4.js";
 import {
   getColumnMeta
 } from "../chunk-NRPDVI76.js";
@@ -13,6 +10,9 @@ import {
   getTimeOptions,
   parseTimeOption
 } from "../chunk-NWJSLIQ3.js";
+import {
+  scrollTo
+} from "../chunk-BXX3B3E4.js";
 import "../chunk-CRTRMMJ7.js";
 export {
   getCellAlign,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tipp/ui",
-  "version": "2.3.9",
+  "version": "2.3.11",
   "private": false,
   "type": "module",
   "exports": {

package/src/atoms/pagination.tsx

@@ -100,7 +100,7 @@ export function Pagination(props: PaginationProps): React.ReactNode {
   };
 
   return (
-    <Flex align="center" className="tipp-pagination" gap="4">
+    <Flex align="center" className="tipp-pagination">
       <IconButton
         disabled={!doublePrev}
         onClick={onClickDoublePrev}

package/src/molecules/expand-table/index.tsx

@@ -14,7 +14,7 @@ import {
   createColumnHelper,
   getPaginationRowModel,
 } from '@tanstack/react-table';
-import React, { useCallback, useMemo, useState } from 'react'; 
+import React, { useCallback, useMemo, useState } from 'react';
 import { Flex } from '@/atoms/flex';
 import { Pagination } from '@/atoms/pagination';
 import { Spinner } from '@/atoms/spinner';
@@ -22,10 +22,32 @@ import { Typo } from '@/atoms/typo';
 import { TriangleArrowDownIcon } from '../../icons/down';
 import { TriangleArrowUpIcon } from '../../icons/up';
 import { Row, type ExpandComp, type OnRowClick } from './row';
+import { ScrollArea } from '@radix-ui/themes';
 
 export type { ExpandComp, OnRowClick, ColumnDef, RowType as Row };
 export { createColumnHelper };
 
+type Variant = 'card' | 'sprite' | 'sprite-border';
+const sortButtonColorMapper: Record<
+  Variant,
+  { selected: string; unselected: string }
+> = {
+  card: {
+    selected: 'var(--iris-10)',
+    unselected: 'var(--iris-6)',
+  },
+  sprite: {
+    // selected: 'var(--gray-a12)',
+    // unselected: 'var(--gray-a6)',
+    selected: 'var(--iris-10)',
+    unselected: 'var(--iris-6)',
+  },
+  'sprite-border': {
+    selected: 'var(--iris-10)',
+    unselected: 'var(--iris-6)',
+  },
+};
+
 export interface ExpandTableProps<Datum extends RowData> {
   /** 렌더할 데이터 배열  */
   data?: Datum[];
@@ -50,6 +72,7 @@ export interface ExpandTableProps<Datum extends RowData> {
   pageSize?: number;
   /** pagination -  */
   siblingCount?: number;
+  variant?: Variant;
 }
 
 export function ExpandTable<Datum extends RowData>(
@@ -69,6 +92,7 @@ export function ExpandTable<Datum extends RowData>(
     siblingCount = 2,
     getRowStyle,
     getCellStyle,
+    variant = 'card',
   } = props;
   const defaultAlign = 'left';
   const [pagination, setPagination] = useState<PaginationState>({
@@ -148,62 +172,62 @@ export function ExpandTable<Datum extends RowData>(
   }, [data, pageSize]);
 
   return (
-    <div className="expand-table-wrapper">
-    <div className="expand-table" style={tableStyle}>
-      <div className="thead">
-        {getHeaderGroups().map((headerGroup) => (
-          <div
-            className="tr"
-            key={headerGroup.id}
-            style={{ gridTemplateColumns }}
-          >
-            {headerGroup.headers.map((header) => {
-              const sortable = header.column.getCanSort();
-              const sortedState = header.column.getIsSorted();
-              const justifyContent =
-                header.column.columnDef.meta?.align || defaultAlign;
+    <div className={`expand-table-wrapper ${variant}`}>
+      <div className="expand-table" style={tableStyle}>
+        <div className="thead">
+          {getHeaderGroups().map((headerGroup) => (
+            <div
+              className="tr"
+              key={headerGroup.id}
+              style={{ gridTemplateColumns }}
+            >
+              {headerGroup.headers.map((header) => {
+                const sortable = header.column.getCanSort();
+                const sortedState = header.column.getIsSorted();
+                const justifyContent =
+                  header.column.columnDef.meta?.align || defaultAlign;
 
-              if (sortable) {
-                return (
-                  <div className={`${justifyContent} th`} key={header.id}>
-                    <button
-                      onClick={header.column.getToggleSortingHandler()}
-                      style={{ cursor: 'pointer' }}
-                      type="button"
-                    >
-                      <Typo as="div" variant="body">
-                        {flexRender(
-                          header.column.columnDef.header,
-                          header.getContext()
-                        )}
-                      </Typo>
-                      <Flex
-                        direction="column"
-                        style={{ marginLeft: 'var(--space-2)' }}
+                if (sortable) {
+                  return (
+                    <div className={`${justifyContent} th`} key={header.id}>
+                      <button
+                        onClick={header.column.getToggleSortingHandler()}
+                        style={{ cursor: 'pointer' }}
+                        type="button"
                       >
-                        <TriangleArrowUpIcon
-                          color={
-                            sortedState === 'asc'
-                              ? 'var(--iris-10)'
-                              : 'var(--iris-6)'
-                          }
-                        />
-                        <TriangleArrowDownIcon
-                          color={
-                            sortedState === 'desc'
-                              ? 'var(--iris-10)'
-                              : 'var(--iris-6)'
-                          }
-                        />
-                      </Flex>
-                    </button>
-                  </div>
-                );
-              }
+                        <Typo as="div" variant="body">
+                          {flexRender(
+                            header.column.columnDef.header,
+                            header.getContext()
+                          )}
+                        </Typo>
+                        <Flex
+                          direction="column"
+                          style={{ marginLeft: 'var(--space-2)' }}
+                        >
+                          {sortedState === false && (
+                            <TriangleArrowDownIcon
+                              color={sortButtonColorMapper[variant].unselected}
+                            />
+                          )}
+                          {sortedState === 'asc' && (
+                            <TriangleArrowUpIcon
+                              color={sortButtonColorMapper[variant].selected}
+                            />
+                          )}
+                          {sortedState === 'desc' && (
+                            <TriangleArrowDownIcon
+                              color={sortButtonColorMapper[variant].selected}
+                            />
+                          )}
+                        </Flex>
+                      </button>
+                    </div>
+                  );
+                }
 
-              return (
-                <div className={`${justifyContent} th`} key={header.id}>
-                  <div style={{ cursor: 'default' }}>
+                return (
+                  <div className={`${justifyContent} th`} key={header.id}>
                     <Typo as="div" variant="body">
                       {flexRender(
                         header.column.columnDef.header,
@@ -211,41 +235,40 @@ export function ExpandTable<Datum extends RowData>(
                       )}
                     </Typo>
                   </div>
-                </div>
+                );
+              })}
+            </div>
+          ))}
+        </div>
+        <ScrollArea className="tbody">
+          {/* 조건에 따라 placeholder 또는 loading 렌더*/}
+          {helpCompRender(rowModels.rows.length) ||
+            rowModels.rows.map((row) => {
+              return (
+                <Row
+                  ExpandComp={ExpandComp}
+                  defaultAlign={defaultAlign}
+                  getCellStyle={getCellStyle}
+                  getRowStyle={getRowStyle}
+                  gridTemplateColumns={gridTemplateColumns}
+                  key={`row_${row.id}`}
+                  onRowClick={onRowClick}
+                  row={row}
+                />
               );
             })}
-          </div>
-        ))}
+        </ScrollArea>
       </div>
-      <div className="tbody">
-        {/* 조건에 따라 placeholder 또는 loading 렌더*/}
-        {helpCompRender(rowModels.rows.length) ||
-          rowModels.rows.map((row) => {
-            return (
-              <Row
-                ExpandComp={ExpandComp}
-                defaultAlign={defaultAlign}
-                getCellStyle={getCellStyle}
-                getRowStyle={getRowStyle}
-                gridTemplateColumns={gridTemplateColumns}
-                key={`row_${row.id}`}
-                onRowClick={onRowClick}
-                row={row}
-              />
-            );
-          })}
-      </div>
-    </div>
       {showPagination ? (
-          <Flex justify="end" pt="3" width="100%">
-            <Pagination
-              count={pageCount}
-              onChange={onChangePagination}
-              page={pagination.pageIndex + 1}
-              siblingCount={siblingCount}
-            />
-          </Flex>
-        ) : null}
+        <Flex justify="end" pt="4" width="100%">
+          <Pagination
+            count={pageCount}
+            onChange={onChangePagination}
+            page={pagination.pageIndex + 1}
+            siblingCount={siblingCount}
+          />
+        </Flex>
+      ) : null}
     </div>
   );
 }