@tipp/ui 2.3.9 → 2.3.10

package/dist/molecules/index.js

@@ -1,140 +1,144 @@
 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";
+} from "../chunk-AE37PV3K.js";
+import "../chunk-KTXRU3WQ.js";
+import "../chunk-RDCEN45M.js";
+import "../chunk-OVYSIME4.js";
+import "../chunk-OJOTDNKG.js";
+import "../chunk-66XH3MAB.js";
+import "../chunk-CC5RCOSM.js";
+import "../chunk-ODYLHCQD.js";
+import "../chunk-PLXD7ZKF.js";
+import "../chunk-SAEPW5JF.js";
+import "../chunk-VK6INFSB.js";
+import "../chunk-H3X6UQVC.js";
+import "../chunk-COKJ53M5.js";
+import "../chunk-W747CDDK.js";
+import "../chunk-GNTZY4DG.js";
+import "../chunk-GMKRNFH5.js";
+import "../chunk-QGKQ3IX7.js";
 import {
   CurriculumSidebar
-} from "../chunk-EDDPJB52.js";
-import "../chunk-SZA3RAKD.js";
-import "../chunk-WS7IOHVK.js";
-import "../chunk-6L4OTKID.js";
-import "../chunk-SDEDXT7A.js";
+} from "../chunk-FV4BQOCL.js";
+import "../chunk-4HDV26QV.js";
 import "../chunk-4TST4UK5.js";
-import "../chunk-LHKGSKKG.js";
-import "../chunk-43FK4CS3.js";
-import "../chunk-ZDMAVBNK.js";
-import "../chunk-JNYTH4BZ.js";
-import "../chunk-W3TY3SYU.js";
-import "../chunk-QIRUYN3K.js";
-import "../chunk-BUZDDAS6.js";
-import "../chunk-BZJSMPS7.js";
-import "../chunk-QDTII3D4.js";
-import "../chunk-ZE3LSQUW.js";
-import "../chunk-VREM33BW.js";
-import "../chunk-AQVIQODP.js";
-import "../chunk-WHZZKXOD.js";
-import "../chunk-YT4LGWIY.js";
-import "../chunk-PYGTM7ML.js";
-import "../chunk-GMKRNFH5.js";
-import "../chunk-QGKQ3IX7.js";
+import "../chunk-WS7IOHVK.js";
+import "../chunk-KCC3DAOY.js";
+import "../chunk-MJMHPIYX.js";
+import {
+  ExpandTable,
+  createColumnHelper
+} from "../chunk-CRPH7YI5.js";
+import "../chunk-JCG2AUFJ.js";
+import "../chunk-7N6VN2FK.js";
+import {
+  DatePickerButton
+} from "../chunk-5ZIFEE7H.js";
+import {
+  DatePicker
+} from "../chunk-IG2TTPNN.js";
 import {
   CurriculumSubNav
-} from "../chunk-OUJ7TDIH.js";
+} from "../chunk-XUSCUT5R.js";
 import {
   CurriculumProvider,
   useCurriculumContext
 } from "../chunk-IYQJIEVM.js";
 import {
   CurriculumV2Layout
-} from "../chunk-CQSM6JCO.js";
-import {
-  DatePickerButton
-} from "../chunk-I46J2XHG.js";
-import {
-  DatePicker
-} from "../chunk-FVTBDVT4.js";
+} from "../chunk-K3Q4XLCN.js";
 import "../chunk-JF7JAMOQ.js";
-import {
-  RadioButtonCard
-} from "../chunk-CSKNBWPB.js";
 import {
   Stepper
-} from "../chunk-IPEAJLS3.js";
+} from "../chunk-GROWIYD2.js";
 import {
   TagSelector
-} from "../chunk-LTGEHFFG.js";
+} from "../chunk-ZS44RD54.js";
 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 {
-  DynamicFormResponseItem
-} from "../chunk-QTQKJ4A2.js";
+import "../chunk-BXX3B3E4.js";
 import {
   DynamicForm,
   createYupValidation
-} from "../chunk-PBWH6CMJ.js";
+} from "../chunk-UMBRV35P.js";
 import {
   ForceRefresh
-} from "../chunk-GGLDVUYU.js";
+} from "../chunk-EWFZXCMV.js";
 import {
   GhostPost
-} from "../chunk-UH6Q3TEK.js";
+} from "../chunk-5JQOU3IR.js";
 import {
   LearningPost
-} from "../chunk-IEYBSZA3.js";
+} from "../chunk-F7JSPN5P.js";
 import "../chunk-7FKRQQYK.js";
 import {
   Navigation
-} from "../chunk-WMWXF44S.js";
+} from "../chunk-JRT6KTBG.js";
 import {
   OneOnOneGuideList,
   oneOnOneNoteTextReplacer
-} from "../chunk-O5MYSBA3.js";
+} from "../chunk-FVNXDLRU.js";
+import {
+  RadioButtonCard
+} from "../chunk-CSKNBWPB.js";
 import {
   DotNavigation
 } from "../chunk-IJOOKMKQ.js";
 import {
   DownloadCard
-} from "../chunk-G7NEBNHU.js";
+} from "../chunk-OHNBVT52.js";
 import {
   DynamicFormField
-} from "../chunk-T4HTYL5M.js";
-import "../chunk-FR2GDOU2.js";
+} from "../chunk-N45T3WWG.js";
+import {
+  DynamicFormResponseItem
+} from "../chunk-QTQKJ4A2.js";
+import "../chunk-PB4O3U6O.js";
+import "../chunk-2OMSNCRH.js";
 import "../chunk-5ZITU5L7.js";
 import "../chunk-5XYPLDI5.js";
 import "../chunk-6NPTJBFE.js";
-import "../chunk-6IVCARWS.js";
-import "../chunk-6DJOIRMF.js";
-import "../chunk-FPD73OHW.js";
 import "../chunk-MUPK4L3U.js";
 import "../chunk-X2GMDZ7M.js";
 import "../chunk-HYITAA4J.js";
-import "../chunk-TULWX7D6.js";
-import "../chunk-DHZVOXFM.js";
-import "../chunk-WV2HN6H4.js";
-import "../chunk-JAMNT4FG.js";
+import "../chunk-FR2GDOU2.js";
+import "../chunk-JIJLOKVN.js";
+import "../chunk-FG3WT6OL.js";
 import "../chunk-5AVBYDPB.js";
 import "../chunk-365QMK4D.js";
+import "../chunk-6IVCARWS.js";
+import "../chunk-6DJOIRMF.js";
+import "../chunk-FPD73OHW.js";
 import "../chunk-EGEQY3KT.js";
-import "../chunk-OHMOP5PV.js";
-import "../chunk-NFDQJVFA.js";
-import "../chunk-JQ7VQ5SB.js";
+import "../chunk-TULWX7D6.js";
+import "../chunk-DHZVOXFM.js";
+import "../chunk-AH4A53SZ.js";
+import "../chunk-BESTU2AY.js";
 import "../chunk-U7N2PWMO.js";
 import "../chunk-XK6VEVOK.js";
 import "../chunk-HF6GNDPV.js";
-import "../chunk-25HMMI7R.js";
-import "../chunk-ZVDAEY5Q.js";
-import "../chunk-LQY4RKWI.js";
 import "../chunk-B6XJN6EC.js";
 import "../chunk-RP2RGCAW.js";
 import "../chunk-W7X7KSJP.js";
 import "../chunk-VYCYVN3L.js";
-import "../chunk-EAXUQEO5.js";
+import "../chunk-OHMOP5PV.js";
+import "../chunk-NFDQJVFA.js";
 import "../chunk-6SYFG6YY.js";
 import "../chunk-K36TPMKL.js";
 import "../chunk-U3BQT7ZO.js";
 import "../chunk-4Y5BEXVN.js";
+import "../chunk-PMJIFLDT.js";
+import "../chunk-LDBWASUA.js";
+import "../chunk-25HMMI7R.js";
+import "../chunk-ZVDAEY5Q.js";
+import "../chunk-LQY4RKWI.js";
 import "../chunk-W5TPOFOO.js";
 import "../chunk-WJ34ZHTU.js";
 import "../chunk-ZQE7SP6P.js";
@@ -150,11 +154,7 @@ import "../chunk-YSYJCYHY.js";
 import "../chunk-5OM2H6RI.js";
 import "../chunk-ZUYCXCPW.js";
 import "../chunk-YVFNJE4E.js";
-import "../chunk-PB4O3U6O.js";
-import "../chunk-2OMSNCRH.js";
-import "../chunk-BESTU2AY.js";
-import "../chunk-PMJIFLDT.js";
-import "../chunk-LDBWASUA.js";
+import "../chunk-EAXUQEO5.js";
 import "../chunk-CRTRMMJ7.js";
 export {
   CurriculumBody,

package/dist/molecules/learning-post.js

@@ -1,17 +1,17 @@
 import {
   LearningPost
-} from "../chunk-IEYBSZA3.js";
+} from "../chunk-F7JSPN5P.js";
 import "../chunk-7FKRQQYK.js";
 import "../chunk-EGEQY3KT.js";
-import "../chunk-25HMMI7R.js";
-import "../chunk-ZVDAEY5Q.js";
-import "../chunk-LQY4RKWI.js";
-import "../chunk-EAXUQEO5.js";
+import "../chunk-BESTU2AY.js";
 import "../chunk-U3BQT7ZO.js";
 import "../chunk-4Y5BEXVN.js";
-import "../chunk-BESTU2AY.js";
 import "../chunk-PMJIFLDT.js";
 import "../chunk-LDBWASUA.js";
+import "../chunk-25HMMI7R.js";
+import "../chunk-ZVDAEY5Q.js";
+import "../chunk-LQY4RKWI.js";
+import "../chunk-EAXUQEO5.js";
 import "../chunk-CRTRMMJ7.js";
 export {
   LearningPost

package/dist/molecules/navigation.js

@@ -1,11 +1,11 @@
 import {
   Navigation
-} from "../chunk-WMWXF44S.js";
+} from "../chunk-JRT6KTBG.js";
+import "../chunk-PMJIFLDT.js";
+import "../chunk-LDBWASUA.js";
 import "../chunk-25HMMI7R.js";
 import "../chunk-ZVDAEY5Q.js";
 import "../chunk-LQY4RKWI.js";
-import "../chunk-PMJIFLDT.js";
-import "../chunk-LDBWASUA.js";
 import "../chunk-CRTRMMJ7.js";
 export {
   Navigation

package/dist/molecules/one-on-one-guide-list.js

@@ -1,12 +1,12 @@
 import {
   OneOnOneGuideList,
   oneOnOneNoteTextReplacer
-} from "../chunk-O5MYSBA3.js";
-import "../chunk-WV2HN6H4.js";
-import "../chunk-25HMMI7R.js";
+} from "../chunk-FVNXDLRU.js";
+import "../chunk-JIJLOKVN.js";
 import "../chunk-BESTU2AY.js";
 import "../chunk-PMJIFLDT.js";
 import "../chunk-LDBWASUA.js";
+import "../chunk-25HMMI7R.js";
 import "../chunk-CRTRMMJ7.js";
 export {
   OneOnOneGuideList,

package/dist/molecules/stepper.js

@@ -1,8 +1,10 @@
 import {
   Stepper
-} from "../chunk-IPEAJLS3.js";
-import "../chunk-25HMMI7R.js";
+} from "../chunk-GROWIYD2.js";
 import "../chunk-K36TPMKL.js";
+import "../chunk-PMJIFLDT.js";
+import "../chunk-LDBWASUA.js";
+import "../chunk-25HMMI7R.js";
 import "../chunk-W5TPOFOO.js";
 import "../chunk-WJ34ZHTU.js";
 import "../chunk-ZQE7SP6P.js";
@@ -18,8 +20,6 @@ import "../chunk-YSYJCYHY.js";
 import "../chunk-5OM2H6RI.js";
 import "../chunk-ZUYCXCPW.js";
 import "../chunk-YVFNJE4E.js";
-import "../chunk-PMJIFLDT.js";
-import "../chunk-LDBWASUA.js";
 import "../chunk-CRTRMMJ7.js";
 export {
   Stepper

package/dist/molecules/tag-selector.js

@@ -1,14 +1,16 @@
 import {
   TagSelector
-} from "../chunk-LTGEHFFG.js";
+} from "../chunk-ZS44RD54.js";
 import "../chunk-MUPK4L3U.js";
 import "../chunk-5AVBYDPB.js";
 import "../chunk-EGEQY3KT.js";
+import "../chunk-6SYFG6YY.js";
+import "../chunk-U3BQT7ZO.js";
+import "../chunk-PMJIFLDT.js";
+import "../chunk-LDBWASUA.js";
 import "../chunk-25HMMI7R.js";
 import "../chunk-ZVDAEY5Q.js";
 import "../chunk-LQY4RKWI.js";
-import "../chunk-6SYFG6YY.js";
-import "../chunk-U3BQT7ZO.js";
 import "../chunk-W5TPOFOO.js";
 import "../chunk-WJ34ZHTU.js";
 import "../chunk-ZQE7SP6P.js";
@@ -24,8 +26,6 @@ import "../chunk-YSYJCYHY.js";
 import "../chunk-5OM2H6RI.js";
 import "../chunk-ZUYCXCPW.js";
 import "../chunk-YVFNJE4E.js";
-import "../chunk-PMJIFLDT.js";
-import "../chunk-LDBWASUA.js";
 import "../chunk-CRTRMMJ7.js";
 export {
   TagSelector

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.10",
   "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';
@@ -26,6 +26,25 @@ import { Row, type ExpandComp, type OnRowClick } from './row';
 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 +69,7 @@ export interface ExpandTableProps<Datum extends RowData> {
   pageSize?: number;
   /** pagination -  */
   siblingCount?: number;
+  variant?: Variant;
 }
 
 export function ExpandTable<Datum extends RowData>(
@@ -69,6 +89,7 @@ export function ExpandTable<Datum extends RowData>(
     siblingCount = 2,
     getRowStyle,
     getCellStyle,
+    variant = 'card',
   } = props;
   const defaultAlign = 'left';
   const [pagination, setPagination] = useState<PaginationState>({
@@ -148,104 +169,105 @@ 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)' }}
+                        >
+                          {sortedState === false && (
+                            <TriangleArrowDownIcon
+                              color={sortButtonColorMapper[variant].unselected}
+                            />
+                          )}
+                          {sortedState === 'asc' && (
+                            <TriangleArrowUpIcon
+                              color={sortButtonColorMapper[variant].selected}
+                            />
+                          )}
+                          {sortedState === 'desc' && (
+                            <TriangleArrowDownIcon
+                              color={sortButtonColorMapper[variant].selected}
+                            />
+                          )}
+                        </Flex>
+                      </button>
+                    </div>
+                  );
+                }
 
-              if (sortable) {
                 return (
                   <div className={`${justifyContent} th`} key={header.id}>
-                    <button
-                      onClick={header.column.getToggleSortingHandler()}
-                      style={{ cursor: 'pointer' }}
-                      type="button"
-                    >
+                    <div style={{ cursor: 'default' }}>
                       <Typo as="div" variant="body">
                         {flexRender(
                           header.column.columnDef.header,
                           header.getContext()
                         )}
                       </Typo>
-                      <Flex
-                        direction="column"
-                        style={{ marginLeft: 'var(--space-2)' }}
-                      >
-                        <TriangleArrowUpIcon
-                          color={
-                            sortedState === 'asc'
-                              ? 'var(--iris-10)'
-                              : 'var(--iris-6)'
-                          }
-                        />
-                        <TriangleArrowDownIcon
-                          color={
-                            sortedState === 'desc'
-                              ? 'var(--iris-10)'
-                              : 'var(--iris-6)'
-                          }
-                        />
-                      </Flex>
-                    </button>
+                    </div>
                   </div>
                 );
-              }
-
+              })}
+            </div>
+          ))}
+        </div>
+        <div className="tbody">
+          {/* 조건에 따라 placeholder 또는 loading 렌더*/}
+          {helpCompRender(rowModels.rows.length) ||
+            rowModels.rows.map((row) => {
               return (
-                <div className={`${justifyContent} th`} key={header.id}>
-                  <div style={{ cursor: 'default' }}>
-                    <Typo as="div" variant="body">
-                      {flexRender(
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
-                    </Typo>
-                  </div>
-                </div>
+                <Row
+                  ExpandComp={ExpandComp}
+                  defaultAlign={defaultAlign}
+                  getCellStyle={getCellStyle}
+                  getRowStyle={getRowStyle}
+                  gridTemplateColumns={gridTemplateColumns}
+                  key={`row_${row.id}`}
+                  onRowClick={onRowClick}
+                  row={row}
+                />
               );
             })}
-          </div>
-        ))}
+        </div>
       </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>
   );
 }