@tipp/ui 2.3.11 → 2.3.12

package/dist/molecules/index.js

@@ -1,10 +1,24 @@
 import "../chunk-QDXZVPRR.js";
+import {
+  ExpandTable,
+  createColumnHelper
+} from "../chunk-ZBZ7IGBT.js";
+import "../chunk-JCG2AUFJ.js";
 import "../chunk-AS7ID74X.js";
 import {
   CurriculumBody
-} from "../chunk-6V47NXW5.js";
-import "../chunk-GFBHPXDF.js";
-import "../chunk-OX3N37YY.js";
+} from "../chunk-I5NKMQOT.js";
+import "../chunk-XU7H43IG.js";
+import "../chunk-QGKQ3IX7.js";
+import {
+  CurriculumSidebar
+} from "../chunk-R7NTFLYB.js";
+import "../chunk-KTUCYAG7.js";
+import "../chunk-4TST4UK5.js";
+import "../chunk-WS7IOHVK.js";
+import "../chunk-6L4OTKID.js";
+import "../chunk-SDEDXT7A.js";
+import "../chunk-4SSWZQPC.js";
 import "../chunk-W3TY3SYU.js";
 import "../chunk-QIRUYN3K.js";
 import "../chunk-BUZDDAS6.js";
@@ -15,44 +29,27 @@ import "../chunk-VREM33BW.js";
 import "../chunk-AQVIQODP.js";
 import "../chunk-WHZZKXOD.js";
 import "../chunk-YT4LGWIY.js";
-import "../chunk-PYGTM7ML.js";
 import "../chunk-JNYTH4BZ.js";
+import "../chunk-PYGTM7ML.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 "../chunk-RAK5LEBO.js";
 import {
   CurriculumSubNav
-} from "../chunk-OUJ7TDIH.js";
+} from "../chunk-2QFLNAGL.js";
 import {
   CurriculumProvider,
   useCurriculumContext
-} from "../chunk-IYQJIEVM.js";
+} from "../chunk-ZFWZAZPG.js";
 import {
   CurriculumV2Layout
 } from "../chunk-CQSM6JCO.js";
-import "../chunk-JF7JAMOQ.js";
 import {
-  RadioButtonCard
-} from "../chunk-CSKNBWPB.js";
+  DatePickerButton
+} from "../chunk-I46J2XHG.js";
+import {
+  DatePicker
+} from "../chunk-FVTBDVT4.js";
+import "../chunk-JF7JAMOQ.js";
 import {
   Stepper
 } from "../chunk-IPEAJLS3.js";
@@ -67,9 +64,6 @@ import "../chunk-NRPDVI76.js";
 import "../chunk-2BPFXK4L.js";
 import "../chunk-NWJSLIQ3.js";
 import "../chunk-BXX3B3E4.js";
-import {
-  DynamicFormResponseItem
-} from "../chunk-QTQKJ4A2.js";
 import {
   DynamicForm,
   createYupValidation
@@ -91,6 +85,9 @@ import {
   OneOnOneGuideList,
   oneOnOneNoteTextReplacer
 } from "../chunk-O5MYSBA3.js";
+import {
+  RadioButtonCard
+} from "../chunk-CSKNBWPB.js";
 import {
   DotNavigation
 } from "../chunk-IJOOKMKQ.js";
@@ -100,6 +97,9 @@ import {
 import {
   DynamicFormField
 } from "../chunk-T4HTYL5M.js";
+import {
+  DynamicFormResponseItem
+} from "../chunk-QTQKJ4A2.js";
 import "../chunk-FR2GDOU2.js";
 import "../chunk-5ZITU5L7.js";
 import "../chunk-5XYPLDI5.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tipp/ui",
-  "version": "2.3.11",
+  "version": "2.3.12",
   "private": false,
   "type": "module",
   "exports": {
@@ -58,8 +58,8 @@
     "ts-node": "^10.9.2",
     "tsup": "^8.0.2",
     "typescript": "^5.0.0",
-    "@tipp/eslint-config": "1.1.2",
-    "@tipp/typescript-config": "1.0.1"
+    "@tipp/typescript-config": "1.0.1",
+    "@tipp/eslint-config": "1.1.2"
   },
   "peerDependencies": {
     "@types/react": "*",

package/src/molecules/curriculumV2/CurriculumSidebar/index.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { Box } from '@/atoms/box';
 import { Grid } from '@/atoms/grid';
 import { Tabs } from '@/atoms/tabs';
-import { useCurriculumContext } from '../curriculum-context'; 
+import { useCurriculumContext } from '../curriculum-context';
 import SidebarItem from './sidebar-item';
 
 const TAB_LIST = [
@@ -11,17 +11,38 @@ const TAB_LIST = [
     value: 'curriculum',
   },
 ];
+
+const TABS_LIST_STYLE: React.CSSProperties = {
+  padding: '0 var(--space-3)',
+};
+
+const TABS_CONTENT_STYLE: React.CSSProperties = {
+  position: 'absolute',
+  height: '100%',
+  width: '100%',
+};
+
+
 export function CurriculumSidebar(): React.ReactNode {
-  const { curriculum, selectedIndex, setSelectedIndex, scrollAreaRef, curriculumCompleteMap } =
-    useCurriculumContext();
+  const {
+    curriculum,
+    selectedIndex,
+    setSelectedIndex,
+    scrollAreaRef,
+    curriculumCompleteMap,
+    customTabs,
+  } = useCurriculumContext();
   const list = curriculum.contents.list;
- 
+
+  const tabList = useMemo(() => {
+    return [...TAB_LIST, ...(customTabs ?? [])];
+  }, [customTabs]);
 
   return (
     <Tabs.Root asChild defaultValue={TAB_LIST[0].value}>
       <Grid height="100%" overflowY="auto" rows="auto 1fr " width="100%">
-        <Tabs.List style={{ padding: '0 var(--space-3)' }}>
-          {TAB_LIST.map((tab) => (
+        <Tabs.List style={TABS_LIST_STYLE}>
+          {tabList.map((tab) => (
             <Tabs.Trigger key={tab.value} value={tab.value}>
               {tab.label}
             </Tabs.Trigger>
@@ -35,18 +56,31 @@ export function CurriculumSidebar(): React.ReactNode {
           width="100%"
         >
           <Tabs.Content
-            style={{
-              position: 'absolute',
-              height: '100%',
-              width: '100%',
-            }}
+            key={TAB_LIST[0].value}
+            style={TABS_CONTENT_STYLE}
             value={TAB_LIST[0].value}
           >
             {list.map((item, index) => (
-              <SidebarItem done={curriculumCompleteMap[item.uuid]} index={index} item={item} key={item.uuid} selectedIndex={selectedIndex} setSelectedIndex={setSelectedIndex} />
+              <SidebarItem
+                done={curriculumCompleteMap[item.uuid]}
+                index={index}
+                item={item}
+                key={item.uuid}
+                selectedIndex={selectedIndex}
+                setSelectedIndex={setSelectedIndex}
+              />
             ))}
             <Box height="150px" />
           </Tabs.Content>
+          {customTabs?.map((tab) => (
+            <Tabs.Content
+              key={tab.value}
+              style={TABS_CONTENT_STYLE}
+              value={tab.value}
+            >
+              {tab.content}
+            </Tabs.Content>
+          ))}
         </Box>
       </Grid>
     </Tabs.Root>

package/src/molecules/curriculumV2/curriculum-context.tsx

@@ -7,11 +7,11 @@ import React, {
   useRef,
   useEffect,
 } from 'react';
-import {  
-  type CurriculumSectionTitleContents,
-} from '@/types/curriculumContents.type';
-import type { Curriculum, CurriculumListContents } from '@/types/curriculum.type';
-
+import { type CurriculumSectionTitleContents } from '@/types/curriculumContents.type';
+import type {
+  Curriculum,
+  CurriculumListContents,
+} from '@/types/curriculum.type';
 
 export interface CurriculumContextValue {
   curriculum: Curriculum;
@@ -48,45 +48,66 @@ export interface CurriculumContextValue {
   /** 과제 완료 후 저장된 값 */
   curriculumReviewAnswers: Record<string, string>;
   /** 과제 완료 전 임시 저장된 값 */
-  tempCurriculumReviewAnswers: Record<string, string>; 
+  tempCurriculumReviewAnswers: Record<string, string>;
   /** 항목 수강 완료 여부 */
   curriculumCompleteMap: Record<string, boolean>;
   /** action Button 클릭시 호출 */
   onActionButtonClick: (item: CurriculumListContents) => void;
   /** 초기 선택 인덱스 */
   initialSelectedIndex?: number;
+  /** 커스텀 탭 주입값 */
+  customTabs?: {
+    content: React.ReactElement;
+    label: string;
+    value: string;
+  }[];
 }
 
 const CurriculumContext = createContext<CurriculumContextValue | undefined>(
   undefined
 );
 
-export interface CurriculumProviderProps extends Pick<CurriculumContextValue, 'curriculum' | 'onReviewSubmit' | 'onReviewValueChange' | 'curriculumReviewAnswers' | 'tempCurriculumReviewAnswers' | 'curriculumCompleteMap' | 'onActionButtonClick' | 'initialSelectedIndex'> {
-  children: React.ReactNode; 
+export interface CurriculumProviderProps
+  extends Pick<
+    CurriculumContextValue,
+    | 'customTabs'
+    | 'curriculum'
+    | 'onReviewSubmit'
+    | 'onReviewValueChange'
+    | 'curriculumReviewAnswers'
+    | 'tempCurriculumReviewAnswers'
+    | 'curriculumCompleteMap'
+    | 'onActionButtonClick'
+    | 'initialSelectedIndex'
+  > {
+  children: React.ReactNode;
   onReviewValueChange: ({
     reviewId,
     answer,
   }: {
     reviewId: string;
     answer: Record<string, string>;
-  }) => void; 
+  }) => void;
 
   /** 현재 화면에 표시 중인 컨텐츠 인덱스 변경 시 호출 */
   onChangeSelectedContent?: (item: CurriculumListContents) => void;
 }
 
-export function CurriculumProvider(props: CurriculumProviderProps): React.ReactElement {
+export function CurriculumProvider(
+  props: CurriculumProviderProps
+): React.ReactElement {
   const {
     children,
     curriculum,
-    onReviewSubmit, 
+    onReviewSubmit,
     onReviewValueChange,
     curriculumReviewAnswers,
-    tempCurriculumReviewAnswers, 
+    tempCurriculumReviewAnswers,
     curriculumCompleteMap,
     onChangeSelectedContent,
     onActionButtonClick,
-    initialSelectedIndex
+    initialSelectedIndex,
+    customTabs,
   } = props;
   const sidebarRef = useRef<HTMLDivElement>(null);
 
@@ -171,43 +192,45 @@ export function CurriculumProvider(props: CurriculumProviderProps): React.ReactE
     [list, selectedIndexState]
   );
 
-  const selectedItem = useMemo(()=>{
+  const selectedItem = useMemo(() => {
     return list[selectedIndexState];
-  },[list,selectedIndexState])
+  }, [list, selectedIndexState]);
 
   const selectedSectionTitle = useMemo(() => {
     // selectedIndexState 이전 인덱스 중 가장 가까운 섹션 타이틀 찾기
     const prevItems = list.slice(0, selectedIndexState).reverse();
     return prevItems.find((item) => item.type === 'sectionTitle') ?? null;
   }, [list, selectedIndexState]);
- 
 
-  useEffect(()=>{ 
+  useEffect(() => {
     onChangeSelectedContent?.(selectedItem);
-  // eslint-disable-next-line react-hooks/exhaustive-deps -- 트리거 최소화
-  },[selectedItem])
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- 트리거 최소화
+  }, [selectedItem]);
 
   return (
-    <CurriculumContext.Provider value={{
-      curriculum,
-      scrollNavItem,
-      selectedIndex: selectedIndexState,
-      setSelectedIndex,
-      selectedId,
-      hasPrev,
-      hasNext,
-      selectPrev,
-      selectNext,
-      selectedSectionTitle,
-      selectedItem,
-      scrollAreaRef: sidebarRef,
-      onReviewSubmit, 
-      onReviewValueChange,
-      curriculumReviewAnswers,
-      tempCurriculumReviewAnswers, 
-      curriculumCompleteMap,
-      onActionButtonClick
-    }}>
+    <CurriculumContext.Provider
+      value={{
+        curriculum,
+        scrollNavItem,
+        selectedIndex: selectedIndexState,
+        setSelectedIndex,
+        selectedId,
+        hasPrev,
+        hasNext,
+        selectPrev,
+        selectNext,
+        selectedSectionTitle,
+        selectedItem,
+        scrollAreaRef: sidebarRef,
+        onReviewSubmit,
+        onReviewValueChange,
+        curriculumReviewAnswers,
+        tempCurriculumReviewAnswers,
+        curriculumCompleteMap,
+        onActionButtonClick,
+        customTabs,
+      }}
+    >
       {children}
     </CurriculumContext.Provider>
   );