@tipp/ui 2.3.11 → 2.3.12

package/dist/chunk-NMGLSEZ3.js

@@ -0,0 +1,152 @@
+// src/molecules/curriculumV2/curriculum-context.tsx
+import {
+  createContext,
+  useContext,
+  useState,
+  useMemo,
+  useCallback,
+  useRef,
+  useEffect
+} from "react";
+import { jsx } from "react/jsx-runtime";
+var CurriculumContext = createContext(
+  void 0
+);
+function CurriculumProvider(props) {
+  const {
+    children,
+    curriculum,
+    onReviewSubmit,
+    onReviewValueChange,
+    curriculumReviewAnswers,
+    tempCurriculumReviewAnswers,
+    curriculumCompleteMap,
+    onChangeSelectedContent,
+    onActionButtonClick,
+    initialSelectedIndex
+  } = props;
+  const sidebarRef = useRef(null);
+  const scrollNavItem = useCallback((index) => {
+    var _a;
+    const element = (_a = sidebarRef.current) == null ? void 0 : _a.querySelector(
+      `[data-curriculum-item-index="${index}"]`
+    );
+    if (element) {
+      element.scrollIntoView({ behavior: "smooth", block: "start" });
+    }
+  }, []);
+  const list = curriculum.contents.list;
+  const selectableIndexes = useMemo(
+    () => list.map((item, i) => item.type !== "sectionTitle" ? i : null).filter((i) => i !== null),
+    [list]
+  );
+  const [selectedIndexState, setSelectedIndexState] = useState(
+    initialSelectedIndex != null ? initialSelectedIndex : selectableIndexes[0]
+  );
+  const setSelectedIndex = useCallback(
+    (idx) => {
+      if (selectableIndexes.includes(idx)) {
+        setSelectedIndexState(idx);
+      } else {
+        const next = selectableIndexes.find((i) => i > idx);
+        const prev = [...selectableIndexes].reverse().find((i) => i < idx);
+        if (next !== void 0) setSelectedIndexState(next);
+        else if (prev !== void 0) setSelectedIndexState(prev);
+      }
+    },
+    [selectableIndexes]
+  );
+  const selectablePos = useMemo(
+    () => selectableIndexes.indexOf(selectedIndexState),
+    [selectableIndexes, selectedIndexState]
+  );
+  const hasPrev = selectablePos > 0;
+  const hasNext = selectablePos < selectableIndexes.length - 1;
+  const selectPrev = useCallback(
+    (cb) => {
+      setSelectedIndexState((cur) => {
+        let prevIndex = cur;
+        const pos = selectableIndexes.indexOf(cur);
+        if (pos > 0) {
+          prevIndex = selectableIndexes[pos - 1];
+        }
+        if (cb) cb(prevIndex);
+        return prevIndex;
+      });
+    },
+    [selectableIndexes]
+  );
+  const selectNext = useCallback(
+    (cb) => {
+      setSelectedIndexState((cur) => {
+        let nextIndex = cur;
+        const pos = selectableIndexes.indexOf(cur);
+        if (pos < selectableIndexes.length - 1) {
+          nextIndex = selectableIndexes[pos + 1];
+        }
+        if (cb) cb(nextIndex);
+        return nextIndex;
+      });
+    },
+    [selectableIndexes]
+  );
+  const selectedId = useMemo(
+    () => {
+      var _a, _b;
+      return (_b = (_a = list[selectedIndexState]) == null ? void 0 : _a.uuid) != null ? _b : "";
+    },
+    [list, selectedIndexState]
+  );
+  const selectedItem = useMemo(() => {
+    return list[selectedIndexState];
+  }, [list, selectedIndexState]);
+  const selectedSectionTitle = useMemo(() => {
+    var _a;
+    const prevItems = list.slice(0, selectedIndexState).reverse();
+    return (_a = prevItems.find((item) => item.type === "sectionTitle")) != null ? _a : null;
+  }, [list, selectedIndexState]);
+  useEffect(() => {
+    onChangeSelectedContent == null ? void 0 : onChangeSelectedContent(selectedItem);
+  }, [selectedItem]);
+  return /* @__PURE__ */ jsx(
+    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
+    }
+  );
+}
+function useCurriculumContext() {
+  const ctx = useContext(CurriculumContext);
+  if (!ctx)
+    throw new Error(
+      "useCurriculumContext must be used within CurriculumProvider"
+    );
+  return ctx;
+}
+
+export {
+  CurriculumProvider,
+  useCurriculumContext
+};
+//# sourceMappingURL=chunk-NMGLSEZ3.js.map

package/dist/chunk-NMGLSEZ3.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/molecules/curriculumV2/curriculum-context.tsx"],"sourcesContent":["import React, {\n  createContext,\n  useContext,\n  useState,\n  useMemo,\n  useCallback,\n  useRef,\n  useEffect,\n} from 'react';\nimport { type CurriculumSectionTitleContents } from '@/types/curriculumContents.type';\nimport type {\n  Curriculum,\n  CurriculumListContents,\n} from '@/types/curriculum.type';\n\nexport interface CurriculumContextValue {\n  curriculum: Curriculum;\n  selectedIndex: number;\n  setSelectedIndex: (idx: number) => void;\n  selectedId: string;\n  hasPrev: boolean;\n  hasNext: boolean;\n  selectPrev: (cb?: (moveIndex: number) => void) => void;\n  selectNext: (cb?: (moveIndex: number) => void) => void;\n  selectedItem: CurriculumListContents;\n  /** 선택된 아이템의 이전 아이템 중 가장 가까운 섹션 타이틀 */\n  selectedSectionTitle: CurriculumSectionTitleContents | null;\n  /** 컨텐츠 목록 스크롤 이동 함수 */\n  scrollNavItem: (uuid: string) => void;\n  /** 스크롤 영역 참조 */\n  scrollAreaRef: React.RefObject<HTMLDivElement | null>;\n  /** 리뷰 제출 함수 */\n  onReviewSubmit: ({\n    reviewId,\n    answer,\n  }: {\n    reviewId: string;\n    answer: Record<string, string>;\n  }) => Promise<boolean>;\n  /** 리뷰 응답 값 변경 시 호출 */\n  onReviewValueChange: ({\n    reviewId,\n    answer,\n  }: {\n    reviewId: string;\n    answer: Record<string, string>;\n  }) => void;\n  /** 과제 완료 후 저장된 값 */\n  curriculumReviewAnswers: Record<string, string>;\n  /** 과제 완료 전 임시 저장된 값 */\n  tempCurriculumReviewAnswers: Record<string, string>;\n  /** 항목 수강 완료 여부 */\n  curriculumCompleteMap: Record<string, boolean>;\n  /** action Button 클릭시 호출 */\n  onActionButtonClick: (item: CurriculumListContents) => void;\n  /** 초기 선택 인덱스 */\n  initialSelectedIndex?: number;\n  /** 커스텀 탭 주입값 */\n  customTabs?: {\n    content: React.ReactElement;\n    label: string;\n    value: string;\n  }[];\n}\n\nconst CurriculumContext = createContext<CurriculumContextValue | undefined>(\n  undefined\n);\n\nexport interface CurriculumProviderProps\n  extends Pick<\n    CurriculumContextValue,\n    | 'customTabs'\n    | 'curriculum'\n    | 'onReviewSubmit'\n    | 'onReviewValueChange'\n    | 'curriculumReviewAnswers'\n    | 'tempCurriculumReviewAnswers'\n    | 'curriculumCompleteMap'\n    | 'onActionButtonClick'\n    | 'initialSelectedIndex'\n  > {\n  children: React.ReactNode;\n  onReviewValueChange: ({\n    reviewId,\n    answer,\n  }: {\n    reviewId: string;\n    answer: Record<string, string>;\n  }) => void;\n\n  /** 현재 화면에 표시 중인 컨텐츠 인덱스 변경 시 호출 */\n  onChangeSelectedContent?: (item: CurriculumListContents) => void;\n}\n\nexport function CurriculumProvider(\n  props: CurriculumProviderProps\n): React.ReactElement {\n  const {\n    children,\n    curriculum,\n    onReviewSubmit,\n    onReviewValueChange,\n    curriculumReviewAnswers,\n    tempCurriculumReviewAnswers,\n    curriculumCompleteMap,\n    onChangeSelectedContent,\n    onActionButtonClick,\n    initialSelectedIndex,\n  } = props;\n  const sidebarRef = useRef<HTMLDivElement>(null);\n\n  const scrollNavItem = useCallback((index: string) => {\n    const element = sidebarRef.current?.querySelector(\n      `[data-curriculum-item-index=\"${index}\"]`\n    );\n    if (element) {\n      element.scrollIntoView({ behavior: 'smooth', block: 'start' });\n    }\n  }, []);\n\n  const list = curriculum.contents.list;\n  // 선택 가능한 인덱스만 추출\n  const selectableIndexes = useMemo(\n    () =>\n      list\n        .map((item, i) => (item.type !== 'sectionTitle' ? i : null))\n        .filter((i): i is number => i !== null),\n    [list]\n  );\n  // 최초 선택값: 첫 번째 선택 가능한 인덱스\n  const [selectedIndexState, setSelectedIndexState] = useState<number>(\n    initialSelectedIndex ?? selectableIndexes[0]\n  );\n\n  // 선택 인덱스 보정 함수\n  const setSelectedIndex = useCallback(\n    (idx: number) => {\n      if (selectableIndexes.includes(idx)) {\n        setSelectedIndexState(idx);\n      } else {\n        // idx가 선택 불가면, selectableIndexes에서 가장 가까운 다음 인덱스 선택\n        const next = selectableIndexes.find((i) => i > idx);\n        const prev = [...selectableIndexes].reverse().find((i) => i < idx);\n        if (next !== undefined) setSelectedIndexState(next);\n        else if (prev !== undefined) setSelectedIndexState(prev);\n      }\n    },\n    [selectableIndexes]\n  );\n\n  // 현재 선택 인덱스가 selectableIndexes 내 몇 번째인지\n  const selectablePos = useMemo(\n    () => selectableIndexes.indexOf(selectedIndexState),\n    [selectableIndexes, selectedIndexState]\n  );\n  const hasPrev = selectablePos > 0;\n  const hasNext = selectablePos < selectableIndexes.length - 1;\n\n  const selectPrev = useCallback(\n    (cb?: (moveIndex: number) => void) => {\n      setSelectedIndexState((cur) => {\n        let prevIndex = cur;\n        const pos = selectableIndexes.indexOf(cur);\n        if (pos > 0) {\n          prevIndex = selectableIndexes[pos - 1];\n        }\n        if (cb) cb(prevIndex);\n        return prevIndex;\n      });\n    },\n    [selectableIndexes]\n  );\n  const selectNext = useCallback(\n    (cb?: (moveIndex: number) => void) => {\n      setSelectedIndexState((cur) => {\n        let nextIndex = cur;\n        const pos = selectableIndexes.indexOf(cur);\n        if (pos < selectableIndexes.length - 1) {\n          nextIndex = selectableIndexes[pos + 1];\n        }\n        if (cb) cb(nextIndex);\n        return nextIndex;\n      });\n    },\n    [selectableIndexes]\n  );\n\n  const selectedId = useMemo(\n    () => list[selectedIndexState]?.uuid ?? '',\n    [list, selectedIndexState]\n  );\n\n  const selectedItem = useMemo(() => {\n    return list[selectedIndexState];\n  }, [list, selectedIndexState]);\n\n  const selectedSectionTitle = useMemo(() => {\n    // selectedIndexState 이전 인덱스 중 가장 가까운 섹션 타이틀 찾기\n    const prevItems = list.slice(0, selectedIndexState).reverse();\n    return prevItems.find((item) => item.type === 'sectionTitle') ?? null;\n  }, [list, selectedIndexState]);\n\n  useEffect(() => {\n    onChangeSelectedContent?.(selectedItem);\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- 트리거 최소화\n  }, [selectedItem]);\n\n  return (\n    <CurriculumContext.Provider\n      value={{\n        curriculum,\n        scrollNavItem,\n        selectedIndex: selectedIndexState,\n        setSelectedIndex,\n        selectedId,\n        hasPrev,\n        hasNext,\n        selectPrev,\n        selectNext,\n        selectedSectionTitle,\n        selectedItem,\n        scrollAreaRef: sidebarRef,\n        onReviewSubmit,\n        onReviewValueChange,\n        curriculumReviewAnswers,\n        tempCurriculumReviewAnswers,\n        curriculumCompleteMap,\n        onActionButtonClick,\n        customTabs,\n      }}\n    >\n      {children}\n    </CurriculumContext.Provider>\n  );\n}\n\nexport function useCurriculumContext(): CurriculumContextValue {\n  const ctx = useContext(CurriculumContext);\n  if (!ctx)\n    throw new Error(\n      'useCurriculumContext must be used within CurriculumProvider'\n    );\n  return ctx;\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-NMKIFFKE.js

@@ -0,0 +1,63 @@
+import {
+  review_question_body_default
+} from "./chunk-J5IKAPJM.js";
+import {
+  review_question_footer_default
+} from "./chunk-PLXD7ZKF.js";
+import {
+  review_question_header_default
+} from "./chunk-SAEPW5JF.js";
+import {
+  review_question_layout_default
+} from "./chunk-VK6INFSB.js";
+
+// src/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/index.tsx
+import { jsx } from "react/jsx-runtime";
+function ReviewQuestion({
+  question,
+  index,
+  total,
+  answer,
+  error,
+  onChange,
+  onNext,
+  onPrev,
+  isLast,
+  isNextDisabled,
+  onSubmit,
+  isLoading
+}) {
+  return /* @__PURE__ */ jsx(
+    review_question_layout_default,
+    {
+      Body: /* @__PURE__ */ jsx(
+        review_question_body_default,
+        {
+          answer,
+          error,
+          onChange,
+          question
+        }
+      ),
+      Footer: /* @__PURE__ */ jsx(
+        review_question_footer_default,
+        {
+          index,
+          isLast,
+          isLoading,
+          isNextButtonDisabled: isNextDisabled,
+          onNext,
+          onPrev,
+          onSubmit
+        }
+      ),
+      Header: /* @__PURE__ */ jsx(review_question_header_default, { index, total })
+    }
+  );
+}
+var ReviewQuestion_default = ReviewQuestion;
+
+export {
+  ReviewQuestion_default
+};
+//# sourceMappingURL=chunk-NMKIFFKE.js.map

package/dist/chunk-NMKIFFKE.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/index.tsx"],"sourcesContent":["import React from 'react';\nimport type { ReviewQuestionElement } from '@/types/curriculum.type';\nimport ReviewQuestionLayout from './review-question-layout';\nimport ReviewQuestionHeader from './review-question-header';\nimport ReviewQuestionFooter from './review-question-footer';\nimport ReviewQuestionBody from './review-question-body';\n\ninterface ReviewQuestionProps {\n  question: ReviewQuestionElement;\n  index: number;\n  total: number;\n  answer: string;\n  error?: string;\n  onChange: (value: string) => void;\n  onNext: () => void;\n  onPrev: () => void;\n  isLast: boolean;\n  isNextDisabled?: boolean;\n  onSubmit: () => void;\n  isLoading?: boolean;\n}\n\nfunction ReviewQuestion({\n  question,\n  index,\n  total,\n  answer,\n  error,\n  onChange,\n  onNext,\n  onPrev,\n  isLast,\n  isNextDisabled,\n  onSubmit,\n  isLoading,\n}: ReviewQuestionProps): React.ReactElement {\n  \n  return (\n    <ReviewQuestionLayout\n      Body={\n        <ReviewQuestionBody\n          answer={answer}\n          error={error}\n          onChange={onChange}\n          question={question}\n        />\n      }\n      Footer={\n        <ReviewQuestionFooter\n          index={index}\n          isLast={isLast}\n          isLoading={isLoading}\n          isNextButtonDisabled={isNextDisabled}\n          onNext={onNext}\n          onPrev={onPrev}\n          onSubmit={onSubmit}\n        />\n      }\n      Header={<ReviewQuestionHeader index={index} total={total} />}\n    />\n  );\n}\n\nexport default ReviewQuestion;\n"],"mappings":";;;;;;;;;;;;;;AAwCQ;AAlBR,SAAS,eAAe;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA4C;AAE1C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MACE;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA;AAAA,MACF;AAAA,MAEF,QACE;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA,sBAAsB;AAAA,UACtB;AAAA,UACA;AAAA,UACA;AAAA;AAAA,MACF;AAAA,MAEF,QAAQ,oBAAC,kCAAqB,OAAc,OAAc;AAAA;AAAA,EAC5D;AAEJ;AAEA,IAAO,yBAAQ;","names":[]}

package/dist/chunk-OX4OPOPI.js

@@ -0,0 +1,82 @@
+import {
+  sidebar_item_default
+} from "./chunk-4HDV26QV.js";
+import {
+  useCurriculumContext
+} from "./chunk-3OCAVV5Z.js";
+import {
+  Tabs
+} from "./chunk-5ZITU5L7.js";
+import {
+  Grid
+} from "./chunk-EGEQY3KT.js";
+import {
+  Box
+} from "./chunk-4Y5BEXVN.js";
+
+// src/molecules/curriculumV2/CurriculumSidebar/index.tsx
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var TAB_LIST = [
+  {
+    label: "\uAC15\uC758 \uBAA9\uCC28",
+    value: "curriculum"
+  }
+];
+function CurriculumSidebar() {
+  const {
+    curriculum,
+    selectedIndex,
+    setSelectedIndex,
+    scrollAreaRef,
+    curriculumCompleteMap,
+    customTabs
+  } = useCurriculumContext();
+  const list = curriculum.contents.list;
+  const tabList = useMemo(() => {
+    return [...TAB_LIST, ...customTabs != null ? customTabs : []];
+  }, [customTabs]);
+  return /* @__PURE__ */ jsx(Tabs.Root, { asChild: true, defaultValue: TAB_LIST[0].value, children: /* @__PURE__ */ jsxs(Grid, { height: "100%", overflowY: "auto", rows: "auto 1fr ", width: "100%", children: [
+    /* @__PURE__ */ jsx(Tabs.List, { style: { padding: "0 var(--space-3)" }, children: tabList.map((tab) => /* @__PURE__ */ jsx(Tabs.Trigger, { value: tab.value, children: tab.label }, tab.value)) }),
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        height: "100%",
+        overflowY: "auto",
+        position: "relative",
+        ref: scrollAreaRef,
+        width: "100%",
+        children: /* @__PURE__ */ jsxs(
+          Tabs.Content,
+          {
+            style: {
+              position: "absolute",
+              height: "100%",
+              width: "100%"
+            },
+            value: TAB_LIST[0].value,
+            children: [
+              list.map((item, index) => /* @__PURE__ */ jsx(
+                sidebar_item_default,
+                {
+                  done: curriculumCompleteMap[item.uuid],
+                  index,
+                  item,
+                  selectedIndex,
+                  setSelectedIndex
+                },
+                item.uuid
+              )),
+              /* @__PURE__ */ jsx(Box, { height: "150px" })
+            ]
+          }
+        )
+      }
+    )
+  ] }) });
+}
+
+export {
+  CurriculumSidebar
+};
+//# sourceMappingURL=chunk-OX4OPOPI.js.map

package/dist/chunk-OX4OPOPI.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/molecules/curriculumV2/CurriculumSidebar/index.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { Box } from '@/atoms/box';\nimport { Grid } from '@/atoms/grid';\nimport { Tabs } from '@/atoms/tabs';\nimport { useCurriculumContext } from '../curriculum-context';\nimport SidebarItem from './sidebar-item';\n\nconst TAB_LIST = [\n  {\n    label: '강의 목차',\n    value: 'curriculum',\n  },\n];\n\nexport function CurriculumSidebar(): React.ReactNode {\n  const {\n    curriculum,\n    selectedIndex,\n    setSelectedIndex,\n    scrollAreaRef,\n    curriculumCompleteMap,\n    customTabs,\n  } = useCurriculumContext();\n  const list = curriculum.contents.list;\n\n  const tabList = useMemo(() => {\n    return [...TAB_LIST, ...(customTabs ?? [])];\n  }, [customTabs]);\n\n  return (\n    <Tabs.Root asChild defaultValue={TAB_LIST[0].value}>\n      <Grid height=\"100%\" overflowY=\"auto\" rows=\"auto 1fr \" width=\"100%\">\n        <Tabs.List style={{ padding: '0 var(--space-3)' }}>\n          {tabList.map((tab) => (\n            <Tabs.Trigger key={tab.value} value={tab.value}>\n              {tab.label}\n            </Tabs.Trigger>\n          ))}\n        </Tabs.List>\n        <Box\n          height=\"100%\"\n          overflowY=\"auto\"\n          position=\"relative\"\n          ref={scrollAreaRef}\n          width=\"100%\"\n        >\n          <Tabs.Content\n            style={{\n              position: 'absolute',\n              height: '100%',\n              width: '100%',\n            }}\n            value={TAB_LIST[0].value}\n          >\n            {list.map((item, index) => (\n              <SidebarItem\n                done={curriculumCompleteMap[item.uuid]}\n                index={index}\n                item={item}\n                key={item.uuid}\n                selectedIndex={selectedIndex}\n                setSelectedIndex={setSelectedIndex}\n              />\n            ))}\n            <Box height=\"150px\" />\n          </Tabs.Content>\n        </Box>\n      </Grid>\n    </Tabs.Root>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA,SAAgB,eAAe;AAkCnB,cAYF,YAZE;AA3BZ,IAAM,WAAW;AAAA,EACf;AAAA,IACE,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AACF;AAEO,SAAS,oBAAqC;AACnD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,qBAAqB;AACzB,QAAM,OAAO,WAAW,SAAS;AAEjC,QAAM,UAAU,QAAQ,MAAM;AAC5B,WAAO,CAAC,GAAG,UAAU,GAAI,kCAAc,CAAC,CAAE;AAAA,EAC5C,GAAG,CAAC,UAAU,CAAC;AAEf,SACE,oBAAC,KAAK,MAAL,EAAU,SAAO,MAAC,cAAc,SAAS,CAAC,EAAE,OAC3C,+BAAC,QAAK,QAAO,QAAO,WAAU,QAAO,MAAK,aAAY,OAAM,QAC1D;AAAA,wBAAC,KAAK,MAAL,EAAU,OAAO,EAAE,SAAS,mBAAmB,GAC7C,kBAAQ,IAAI,CAAC,QACZ,oBAAC,KAAK,SAAL,EAA6B,OAAO,IAAI,OACtC,cAAI,SADY,IAAI,KAEvB,CACD,GACH;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,QAAO;AAAA,QACP,WAAU;AAAA,QACV,UAAS;AAAA,QACT,KAAK;AAAA,QACL,OAAM;AAAA,QAEN;AAAA,UAAC,KAAK;AAAA,UAAL;AAAA,YACC,OAAO;AAAA,cACL,UAAU;AAAA,cACV,QAAQ;AAAA,cACR,OAAO;AAAA,YACT;AAAA,YACA,OAAO,SAAS,CAAC,EAAE;AAAA,YAElB;AAAA,mBAAK,IAAI,CAAC,MAAM,UACf;AAAA,gBAAC;AAAA;AAAA,kBACC,MAAM,sBAAsB,KAAK,IAAI;AAAA,kBACrC;AAAA,kBACA;AAAA,kBAEA;AAAA,kBACA;AAAA;AAAA,gBAFK,KAAK;AAAA,cAGZ,CACD;AAAA,cACD,oBAAC,OAAI,QAAO,SAAQ;AAAA;AAAA;AAAA,QACtB;AAAA;AAAA,IACF;AAAA,KACF,GACF;AAEJ;","names":[]}

package/dist/chunk-POFUBAXM.js

@@ -0,0 +1,77 @@
+import {
+  sidebar_item_default
+} from "./chunk-4HDV26QV.js";
+import {
+  useCurriculumContext
+} from "./chunk-IYQJIEVM.js";
+import {
+  Tabs
+} from "./chunk-5ZITU5L7.js";
+import {
+  Grid
+} from "./chunk-EGEQY3KT.js";
+import {
+  Box
+} from "./chunk-4Y5BEXVN.js";
+
+// src/molecules/curriculumV2/CurriculumSidebar/index.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var TAB_LIST = [
+  {
+    label: "\uAC15\uC758 \uBAA9\uCC28",
+    value: "curriculum"
+  }
+];
+function CurriculumSidebar(props) {
+  const {
+    curriculum,
+    selectedIndex,
+    setSelectedIndex,
+    scrollAreaRef,
+    curriculumCompleteMap
+  } = useCurriculumContext();
+  const list = curriculum.contents.list;
+  return /* @__PURE__ */ jsx(Tabs.Root, { asChild: true, defaultValue: TAB_LIST[0].value, children: /* @__PURE__ */ jsxs(Grid, { height: "100%", overflowY: "auto", rows: "auto 1fr ", width: "100%", children: [
+    /* @__PURE__ */ jsx(Tabs.List, { style: { padding: "0 var(--space-3)" }, children: TAB_LIST.map((tab) => /* @__PURE__ */ jsx(Tabs.Trigger, { value: tab.value, children: tab.label }, tab.value)) }),
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        height: "100%",
+        overflowY: "auto",
+        position: "relative",
+        ref: scrollAreaRef,
+        width: "100%",
+        children: /* @__PURE__ */ jsxs(
+          Tabs.Content,
+          {
+            style: {
+              position: "absolute",
+              height: "100%",
+              width: "100%"
+            },
+            value: TAB_LIST[0].value,
+            children: [
+              list.map((item, index) => /* @__PURE__ */ jsx(
+                sidebar_item_default,
+                {
+                  done: curriculumCompleteMap[item.uuid],
+                  index,
+                  item,
+                  selectedIndex,
+                  setSelectedIndex
+                },
+                item.uuid
+              )),
+              /* @__PURE__ */ jsx(Box, { height: "150px" })
+            ]
+          }
+        )
+      }
+    )
+  ] }) });
+}
+
+export {
+  CurriculumSidebar
+};
+//# sourceMappingURL=chunk-POFUBAXM.js.map

package/dist/chunk-POFUBAXM.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/molecules/curriculumV2/CurriculumSidebar/index.tsx"],"sourcesContent":["import React from 'react';\nimport { Box } from '@/atoms/box';\nimport { Grid } from '@/atoms/grid';\nimport { Tabs } from '@/atoms/tabs';\nimport { useCurriculumContext } from '../curriculum-context';\nimport SidebarItem from './sidebar-item';\n\nconst TAB_LIST = [\n  {\n    label: '강의 목차',\n    value: 'curriculum',\n  },\n];\n\nexport function CurriculumSidebar(props: {\n  customTab?: {\n    content: React.ReactElement;\n    label: string;\n    value: string;\n  }[];\n}): React.ReactNode {\n  const {\n    curriculum,\n    selectedIndex,\n    setSelectedIndex,\n    scrollAreaRef,\n    curriculumCompleteMap,\n  } = useCurriculumContext();\n  const list = curriculum.contents.list;\n\n  return (\n    <Tabs.Root asChild defaultValue={TAB_LIST[0].value}>\n      <Grid height=\"100%\" overflowY=\"auto\" rows=\"auto 1fr \" width=\"100%\">\n        <Tabs.List style={{ padding: '0 var(--space-3)' }}>\n          {TAB_LIST.map((tab) => (\n            <Tabs.Trigger key={tab.value} value={tab.value}>\n              {tab.label}\n            </Tabs.Trigger>\n          ))}\n        </Tabs.List>\n        <Box\n          height=\"100%\"\n          overflowY=\"auto\"\n          position=\"relative\"\n          ref={scrollAreaRef}\n          width=\"100%\"\n        >\n          <Tabs.Content\n            style={{\n              position: 'absolute',\n              height: '100%',\n              width: '100%',\n            }}\n            value={TAB_LIST[0].value}\n          >\n            {list.map((item, index) => (\n              <SidebarItem\n                done={curriculumCompleteMap[item.uuid]}\n                index={index}\n                item={item}\n                key={item.uuid}\n                selectedIndex={selectedIndex}\n                setSelectedIndex={setSelectedIndex}\n              />\n            ))}\n            <Box height=\"150px\" />\n          </Tabs.Content>\n        </Box>\n      </Grid>\n    </Tabs.Root>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAmCY,cAYF,YAZE;AA5BZ,IAAM,WAAW;AAAA,EACf;AAAA,IACE,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AACF;AAEO,SAAS,kBAAkB,OAMd;AAClB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,qBAAqB;AACzB,QAAM,OAAO,WAAW,SAAS;AAEjC,SACE,oBAAC,KAAK,MAAL,EAAU,SAAO,MAAC,cAAc,SAAS,CAAC,EAAE,OAC3C,+BAAC,QAAK,QAAO,QAAO,WAAU,QAAO,MAAK,aAAY,OAAM,QAC1D;AAAA,wBAAC,KAAK,MAAL,EAAU,OAAO,EAAE,SAAS,mBAAmB,GAC7C,mBAAS,IAAI,CAAC,QACb,oBAAC,KAAK,SAAL,EAA6B,OAAO,IAAI,OACtC,cAAI,SADY,IAAI,KAEvB,CACD,GACH;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,QAAO;AAAA,QACP,WAAU;AAAA,QACV,UAAS;AAAA,QACT,KAAK;AAAA,QACL,OAAM;AAAA,QAEN;AAAA,UAAC,KAAK;AAAA,UAAL;AAAA,YACC,OAAO;AAAA,cACL,UAAU;AAAA,cACV,QAAQ;AAAA,cACR,OAAO;AAAA,YACT;AAAA,YACA,OAAO,SAAS,CAAC,EAAE;AAAA,YAElB;AAAA,mBAAK,IAAI,CAAC,MAAM,UACf;AAAA,gBAAC;AAAA;AAAA,kBACC,MAAM,sBAAsB,KAAK,IAAI;AAAA,kBACrC;AAAA,kBACA;AAAA,kBAEA;AAAA,kBACA;AAAA;AAAA,gBAFK,KAAK;AAAA,cAGZ,CACD;AAAA,cACD,oBAAC,OAAI,QAAO,SAAQ;AAAA;AAAA;AAAA,QACtB;AAAA;AAAA,IACF;AAAA,KACF,GACF;AAEJ;","names":[]}

package/dist/chunk-QBBF5V24.js

@@ -0,0 +1,70 @@
+import {
+  useCurriculumContext
+} from "./chunk-3OCAVV5Z.js";
+import {
+  Typo
+} from "./chunk-PMJIFLDT.js";
+import {
+  Flex
+} from "./chunk-25HMMI7R.js";
+import {
+  Button
+} from "./chunk-ZVDAEY5Q.js";
+import {
+  ResetIcon
+} from "./chunk-W5TPOFOO.js";
+
+// src/molecules/curriculumV2/CurriculumContents/curriculum-ai-traning.tsx
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function CurriculumAiTraning({
+  item
+}) {
+  const { title, description, buttonTitle } = item;
+  const { curriculumCompleteMap, onActionButtonClick } = useCurriculumContext();
+  const done = useMemo(() => {
+    return Boolean(curriculumCompleteMap[item.uuid]);
+  }, [curriculumCompleteMap, item.uuid]);
+  const bgColor = done ? "var(--color-panel-solid)" : void 0;
+  return /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      align: "center",
+      direction: "column",
+      height: "100%",
+      justify: "center",
+      style: {
+        backgroundImage: `url(https://tipp-coaching-live.s3.ap-northeast-2.amazonaws.com/images/curriculum_ai_bg.png)`,
+        backgroundPosition: "center",
+        backgroundSize: "cover",
+        backgroundRepeat: "no-repeat"
+      },
+      width: "100%",
+      children: [
+        /* @__PURE__ */ jsx(Typo, { color: "gray", weight: "bold", children: title }),
+        /* @__PURE__ */ jsx(Typo, { align: "center", as: "p", color: "gray", children: description }),
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            mt: "3",
+            onClick: () => {
+              onActionButtonClick(item);
+            },
+            style: { minWidth: 232, backgroundColor: bgColor },
+            variant: done ? "outline" : "solid",
+            children: [
+              done ? "\uB2E4\uC2DC \uC5F0\uC2B5\uD558\uAE30" : buttonTitle || "\uC2DC\uC791\uD558\uAE30",
+              done ? /* @__PURE__ */ jsx(ResetIcon, {}) : null
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+var curriculum_ai_traning_default = CurriculumAiTraning;
+
+export {
+  curriculum_ai_traning_default
+};
+//# sourceMappingURL=chunk-QBBF5V24.js.map

package/dist/chunk-QBBF5V24.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/molecules/curriculumV2/CurriculumContents/curriculum-ai-traning.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport type { CurriculumAiTrainingContents } from '@/types/curriculumContents.type';\nimport { Button } from '@/atoms/button';\nimport { Flex } from '@/atoms/flex';\nimport { Typo } from '@/atoms/typo';\nimport { ResetIcon } from '@/icon';\nimport { useCurriculumContext } from '../curriculum-context';\n\ninterface CurriculumAiTraningProps {\n  item: CurriculumAiTrainingContents;\n}\n\nfunction CurriculumAiTraning({\n  item,\n}: CurriculumAiTraningProps): React.ReactNode {\n  const { title, description, buttonTitle } = item;\n  const { curriculumCompleteMap, onActionButtonClick } = useCurriculumContext();\n\n  const done = useMemo(() => {\n    return Boolean(curriculumCompleteMap[item.uuid]);\n  }, [curriculumCompleteMap, item.uuid]);\n\n  const bgColor=  done ? 'var(--color-panel-solid)' : undefined;\n\n  return (\n    <Flex\n      align=\"center\"\n      direction=\"column\"\n      height=\"100%\"\n      justify=\"center\"\n      style={{\n        backgroundImage: `url(https://tipp-coaching-live.s3.ap-northeast-2.amazonaws.com/images/curriculum_ai_bg.png)`,\n        backgroundPosition: 'center',\n        backgroundSize: 'cover',\n        backgroundRepeat: 'no-repeat',\n      }}\n      width=\"100%\"\n    >\n      <Typo color=\"gray\" weight=\"bold\">\n        {title}\n      </Typo>\n      <Typo align=\"center\" as=\"p\" color=\"gray\">\n        {description}\n      </Typo>\n\n      <Button\n        mt=\"3\"\n        onClick={() => { onActionButtonClick(item); }}\n        style={{ minWidth: 232, backgroundColor: bgColor }}\n        variant={done ? 'outline' : 'solid'}\n      >\n        {done ? '다시 연습하기' : buttonTitle || '시작하기'}\n        {done ? <ResetIcon/> : null}\n      </Button>\n \n    </Flex>\n  );\n}\n\nexport default CurriculumAiTraning;\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA,SAAgB,eAAe;AAsCzB,cAOA,YAPA;AA1BN,SAAS,oBAAoB;AAAA,EAC3B;AACF,GAA8C;AAC5C,QAAM,EAAE,OAAO,aAAa,YAAY,IAAI;AAC5C,QAAM,EAAE,uBAAuB,oBAAoB,IAAI,qBAAqB;AAE5E,QAAM,OAAO,QAAQ,MAAM;AACzB,WAAO,QAAQ,sBAAsB,KAAK,IAAI,CAAC;AAAA,EACjD,GAAG,CAAC,uBAAuB,KAAK,IAAI,CAAC;AAErC,QAAM,UAAU,OAAO,6BAA6B;AAEpD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAM;AAAA,MACN,WAAU;AAAA,MACV,QAAO;AAAA,MACP,SAAQ;AAAA,MACR,OAAO;AAAA,QACL,iBAAiB;AAAA,QACjB,oBAAoB;AAAA,QACpB,gBAAgB;AAAA,QAChB,kBAAkB;AAAA,MACpB;AAAA,MACA,OAAM;AAAA,MAEN;AAAA,4BAAC,QAAK,OAAM,QAAO,QAAO,QACvB,iBACH;AAAA,QACA,oBAAC,QAAK,OAAM,UAAS,IAAG,KAAI,OAAM,QAC/B,uBACH;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACH,SAAS,MAAM;AAAE,kCAAoB,IAAI;AAAA,YAAG;AAAA,YAC5C,OAAO,EAAE,UAAU,KAAK,iBAAiB,QAAQ;AAAA,YACjD,SAAS,OAAO,YAAY;AAAA,YAE3B;AAAA,qBAAO,0CAAY,eAAe;AAAA,cAClC,OAAO,oBAAC,aAAS,IAAK;AAAA;AAAA;AAAA,QACzB;AAAA;AAAA;AAAA,EAEF;AAEJ;AAEA,IAAO,gCAAQ;","names":[]}

package/dist/chunk-QPTWBPAQ.js

@@ -0,0 +1,87 @@
+import {
+  ReviewQuestionContentHeader
+} from "./chunk-7UUHYDMJ.js";
+import {
+  TextArea
+} from "./chunk-5XYPLDI5.js";
+import {
+  Grid
+} from "./chunk-EGEQY3KT.js";
+import {
+  Box
+} from "./chunk-4Y5BEXVN.js";
+import {
+  Typo
+} from "./chunk-PMJIFLDT.js";
+import {
+  Callout
+} from "./chunk-B6XJN6EC.js";
+import {
+  Card
+} from "./chunk-RP2RGCAW.js";
+import {
+  BellIcon
+} from "./chunk-W5TPOFOO.js";
+
+// src/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-question-text.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function ReviewQuestionText(props) {
+  const { question, answer, onChange } = props;
+  const minLengthNotMet = question.minLength && answer.length < question.minLength;
+  const remainingLength = question.minLength && answer.length < question.minLength ? question.minLength - answer.length : 0;
+  return /* @__PURE__ */ jsx(
+    Card,
+    {
+      size: "2",
+      style: {
+        width: "100%",
+        height: "100%"
+      },
+      children: /* @__PURE__ */ jsxs(Grid, { height: "100%", rows: "1fr auto", children: [
+        /* @__PURE__ */ jsxs(Grid, { height: "100%", rows: "auto 1fr", width: "100%", children: [
+          /* @__PURE__ */ jsx(
+            ReviewQuestionContentHeader,
+            {
+              icon: question.icon,
+              question: question.question,
+              title: question.title,
+              type: question.type
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            TextArea,
+            {
+              mt: "2",
+              onChange: (e) => {
+                onChange(e.target.value);
+              },
+              placeholder: question.placeholder,
+              value: answer
+            }
+          )
+        ] }),
+        minLengthNotMet ? /* @__PURE__ */ jsxs(Box, { mt: "2", children: [
+          /* @__PURE__ */ jsx(Typo, { align: "right", as: "p", color: "red", variant: "caption", children: `${remainingLength}\uC790 \uB354 \uC791\uC131\uD574\uC8FC\uC138\uC694.` }),
+          question.minLengthInfoMessage ? /* @__PURE__ */ jsxs(
+            Callout.Root,
+            {
+              color: "iris",
+              mt: "2",
+              style: { alignItems: "center" },
+              children: [
+                /* @__PURE__ */ jsx(Callout.Icon, { children: /* @__PURE__ */ jsx(BellIcon, {}) }),
+                /* @__PURE__ */ jsx(Callout.Text, { children: /* @__PURE__ */ jsx(Typo, { as: "p", variant: "caption", children: question.minLengthInfoMessage }) })
+              ]
+            }
+          ) : null
+        ] }) : null
+      ] })
+    }
+  );
+}
+var review_question_text_default = ReviewQuestionText;
+
+export {
+  review_question_text_default
+};
+//# sourceMappingURL=chunk-QPTWBPAQ.js.map

package/dist/chunk-QPTWBPAQ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-question-text.tsx"],"sourcesContent":["import React from 'react';\nimport { Box } from '@/atoms/box';\nimport { Card } from '@/atoms/card';\nimport { Grid } from '@/atoms/grid';\nimport { TextArea } from '@/atoms/text-area';\nimport { Typo } from '@/atoms/typo';\nimport { BellIcon } from '@/icon';\nimport { type CurriculumReviewQuestionText } from '@/types/curriculumContents.type';\nimport { Callout } from '@/atoms/call-out';\nimport { ReviewQuestionContentHeader } from './review-comp';\n\ninterface ReviewQuestionTextProps {\n  question: CurriculumReviewQuestionText;\n  answer: string;\n  error?: string;\n  onChange: (value: string) => void;\n}\n\nfunction ReviewQuestionText(props: ReviewQuestionTextProps): React.ReactNode {\n  const { question, answer, onChange } = props;\n\n  const minLengthNotMet =\n    question.minLength && answer.length < question.minLength;\n\n  const remainingLength =\n    question.minLength && answer.length < question.minLength\n      ? question.minLength - answer.length\n      : 0;\n\n  return (\n    <Card\n      size=\"2\"\n      style={{\n        width: '100%',\n        height: '100%',\n      }}\n    >\n      <Grid height=\"100%\" rows=\"1fr auto\">\n        <Grid height=\"100%\" rows=\"auto 1fr\" width=\"100%\">\n          <ReviewQuestionContentHeader\n            icon={question.icon}\n            question={question.question}\n            title={question.title}\n            type={question.type}\n          />\n\n          <TextArea\n            mt=\"2\"\n            onChange={(e) => {\n              onChange(e.target.value);\n            }}\n            placeholder={question.placeholder}\n            value={answer}\n          />\n        </Grid>\n        {minLengthNotMet ? (\n          <Box mt=\"2\">\n            <Typo align=\"right\" as=\"p\" color=\"red\" variant=\"caption\">\n              {`${remainingLength}자 더 작성해주세요.`}\n            </Typo>\n            {question.minLengthInfoMessage ? (\n              <Callout.Root\n                color=\"iris\"\n                mt=\"2\"\n                style={{ alignItems: 'center' }}\n              >\n                <Callout.Icon>\n                  <BellIcon />\n                </Callout.Icon>\n                <Callout.Text>\n                  <Typo as=\"p\" variant=\"caption\">\n                    {question.minLengthInfoMessage}\n                  </Typo>\n                </Callout.Text>\n              </Callout.Root>\n            ) : null}\n          </Box>\n        ) : null}\n      </Grid>\n    </Card>\n  );\n}\n\nexport default ReviewQuestionText;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAsCQ,SACE,KADF;AApBR,SAAS,mBAAmB,OAAiD;AAC3E,QAAM,EAAE,UAAU,QAAQ,SAAS,IAAI;AAEvC,QAAM,kBACJ,SAAS,aAAa,OAAO,SAAS,SAAS;AAEjD,QAAM,kBACJ,SAAS,aAAa,OAAO,SAAS,SAAS,YAC3C,SAAS,YAAY,OAAO,SAC5B;AAEN,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,OAAO;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,MACV;AAAA,MAEA,+BAAC,QAAK,QAAO,QAAO,MAAK,YACvB;AAAA,6BAAC,QAAK,QAAO,QAAO,MAAK,YAAW,OAAM,QACxC;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,MAAM,SAAS;AAAA,cACf,UAAU,SAAS;AAAA,cACnB,OAAO,SAAS;AAAA,cAChB,MAAM,SAAS;AAAA;AAAA,UACjB;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACC,IAAG;AAAA,cACH,UAAU,CAAC,MAAM;AACf,yBAAS,EAAE,OAAO,KAAK;AAAA,cACzB;AAAA,cACA,aAAa,SAAS;AAAA,cACtB,OAAO;AAAA;AAAA,UACT;AAAA,WACF;AAAA,QACC,kBACC,qBAAC,OAAI,IAAG,KACN;AAAA,8BAAC,QAAK,OAAM,SAAQ,IAAG,KAAI,OAAM,OAAM,SAAQ,WAC5C,aAAG,eAAe,uDACrB;AAAA,UACC,SAAS,uBACR;AAAA,YAAC,QAAQ;AAAA,YAAR;AAAA,cACC,OAAM;AAAA,cACN,IAAG;AAAA,cACH,OAAO,EAAE,YAAY,SAAS;AAAA,cAE9B;AAAA,oCAAC,QAAQ,MAAR,EACC,8BAAC,YAAS,GACZ;AAAA,gBACA,oBAAC,QAAQ,MAAR,EACC,8BAAC,QAAK,IAAG,KAAI,SAAQ,WAClB,mBAAS,sBACZ,GACF;AAAA;AAAA;AAAA,UACF,IACE;AAAA,WACN,IACE;AAAA,SACN;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,+BAAQ;","names":[]}