@tipp/ui 2.3.17 → 2.3.18

package/dist/chunk-ENVZEWF6.js

@@ -0,0 +1,98 @@
+import {
+  sidebar_item_default
+} from "./chunk-64JB2NO2.js";
+import {
+  useCurriculumContext
+} from "./chunk-Y7SJF3Y3.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"
+  }
+];
+var TABS_LIST_STYLE = {
+  padding: "0 var(--space-3)"
+};
+var TABS_CONTENT_STYLE = {
+  position: "absolute",
+  height: "100%",
+  width: "100%"
+};
+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: TABS_LIST_STYLE, children: tabList.map((tab) => /* @__PURE__ */ jsx(Tabs.Trigger, { value: tab.value, children: tab.label }, tab.value)) }),
+    /* @__PURE__ */ jsxs(
+      Box,
+      {
+        height: "100%",
+        overflowY: "auto",
+        position: "relative",
+        ref: scrollAreaRef,
+        width: "100%",
+        children: [
+          /* @__PURE__ */ jsxs(
+            Tabs.Content,
+            {
+              style: TABS_CONTENT_STYLE,
+              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" })
+              ]
+            },
+            TAB_LIST[0].value
+          ),
+          customTabs == null ? void 0 : customTabs.map((tab) => /* @__PURE__ */ jsx(
+            Tabs.Content,
+            {
+              style: TABS_CONTENT_STYLE,
+              value: tab.value,
+              children: tab.content
+            },
+            tab.value
+          ))
+        ]
+      }
+    )
+  ] }) });
+}
+
+export {
+  CurriculumSidebar
+};
+//# sourceMappingURL=chunk-ENVZEWF6.js.map

package/dist/chunk-ENVZEWF6.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\nconst TABS_LIST_STYLE: React.CSSProperties = {\n  padding: '0 var(--space-3)',\n};\n\nconst TABS_CONTENT_STYLE: React.CSSProperties = {\n  position: 'absolute',\n  height: '100%',\n  width: '100%',\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={TABS_LIST_STYLE}>\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            key={TAB_LIST[0].value}\n            style={TABS_CONTENT_STYLE}\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          {customTabs?.map((tab) => (\n            <Tabs.Content\n              key={tab.value}\n              style={TABS_CONTENT_STYLE}\n              value={tab.value}\n            >\n              {tab.content}\n            </Tabs.Content>\n          ))}\n        </Box>\n      </Grid>\n    </Tabs.Root>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA,SAAgB,eAAe;AA6CnB,cAYF,YAZE;AAtCZ,IAAM,WAAW;AAAA,EACf;AAAA,IACE,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AACF;AAEA,IAAM,kBAAuC;AAAA,EAC3C,SAAS;AACX;AAEA,IAAM,qBAA0C;AAAA,EAC9C,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,OAAO;AACT;AAGO,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,iBACf,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;AAAA,YAAC,KAAK;AAAA,YAAL;AAAA,cAEC,OAAO;AAAA,cACP,OAAO,SAAS,CAAC,EAAE;AAAA,cAElB;AAAA,qBAAK,IAAI,CAAC,MAAM,UACf;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAM,sBAAsB,KAAK,IAAI;AAAA,oBACrC;AAAA,oBACA;AAAA,oBAEA;AAAA,oBACA;AAAA;AAAA,kBAFK,KAAK;AAAA,gBAGZ,CACD;AAAA,gBACD,oBAAC,OAAI,QAAO,SAAQ;AAAA;AAAA;AAAA,YAdf,SAAS,CAAC,EAAE;AAAA,UAenB;AAAA,UACC,yCAAY,IAAI,CAAC,QAChB;AAAA,YAAC,KAAK;AAAA,YAAL;AAAA,cAEC,OAAO;AAAA,cACP,OAAO,IAAI;AAAA,cAEV,cAAI;AAAA;AAAA,YAJA,IAAI;AAAA,UAKX;AAAA;AAAA;AAAA,IAEJ;AAAA,KACF,GACF;AAEJ;","names":[]}

package/dist/chunk-FSJP6HQY.js

@@ -0,0 +1,49 @@
+import {
+  ReviewQuestionContentHeader
+} from "./chunk-BWWSZLTV.js";
+import {
+  TextArea
+} from "./chunk-5XYPLDI5.js";
+import {
+  Grid
+} from "./chunk-EGEQY3KT.js";
+import {
+  Card
+} from "./chunk-RP2RGCAW.js";
+
+// src/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-question-satisfaction-text.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function ReviewQuestionSatisfisText(props) {
+  var _a, _b;
+  const { question, answer, onChange } = props;
+  return /* @__PURE__ */ jsx(Card, { size: "2", style: { height: "100%", width: "100%" }, children: /* @__PURE__ */ jsxs(Grid, { height: "100%", rows: "auto 1fr", children: [
+    /* @__PURE__ */ jsx(
+      ReviewQuestionContentHeader,
+      {
+        icon: question.icon,
+        question: (_a = question.question) != null ? _a : "\uC774\uBC88 \uD559\uC2B5\uC5D0 \uB300\uD574 \uCD94\uAC00\uB85C \uB0A8\uAE38 \uC758\uACAC\uC774 \uC788\uB2E4\uBA74 \uACF5\uC720\uD574\uC8FC\uC138\uC694.",
+        title: (_b = question.title) != null ? _b : "\uB9CC\uC871\uB3C4 \uC870\uC0AC",
+        type: question.type
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      TextArea,
+      {
+        mt: "2",
+        onChange: (e) => {
+          onChange(e.target.value);
+        },
+        placeholder: question.placeholder,
+        style: {
+          height: "100%"
+        },
+        value: answer
+      }
+    )
+  ] }) });
+}
+
+export {
+  ReviewQuestionSatisfisText
+};
+//# sourceMappingURL=chunk-FSJP6HQY.js.map

package/dist/chunk-FSJP6HQY.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-question-satisfaction-text.tsx"],"sourcesContent":["import React from 'react';\nimport { type CurriculumReviewQuestionSatisfactionText } from '@/types/curriculumContents.type';\nimport { Card } from '@/atoms/card';\nimport { Grid } from '@/atoms/grid';\nimport { TextArea } from '@/atoms/text-area';\nimport { ReviewQuestionContentHeader } from './review-comp';\n\ninterface ReviewQuestionSatisfactionTextProps {\n  question: CurriculumReviewQuestionSatisfactionText;\n  answer: string;\n  error?: string;\n  onChange: (value: string) => void;\n}\n\nexport default function ReviewQuestionSatisfisText(\n  props: ReviewQuestionSatisfactionTextProps\n): React.ReactNode {\n  const { question, answer, onChange } = props;\n\n  return (\n    <Card size=\"2\" style={{ height: '100%', width: '100%' }}>\n      <Grid height=\"100%\" rows=\"auto 1fr\">\n        <ReviewQuestionContentHeader\n          icon={question.icon}\n          question={\n            question.question ??\n            '이번 학습에 대해 추가로 남길 의견이 있다면 공유해주세요.'\n          }\n          title={question.title ?? '만족도 조사'}\n          type={question.type}\n        />\n        <TextArea\n          mt=\"2\"\n          onChange={(e) => {\n            onChange(e.target.value);\n          }}\n          placeholder={question.placeholder}\n          style={{\n            height: '100%',\n          }}\n          value={answer}\n        />\n      </Grid>\n    </Card>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;AAqBM,SACE,KADF;AAPS,SAAR,2BACL,OACiB;AAhBnB;AAiBE,QAAM,EAAE,UAAU,QAAQ,SAAS,IAAI;AAEvC,SACE,oBAAC,QAAK,MAAK,KAAI,OAAO,EAAE,QAAQ,QAAQ,OAAO,OAAO,GACpD,+BAAC,QAAK,QAAO,QAAO,MAAK,YACvB;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAM,SAAS;AAAA,QACf,WACE,cAAS,aAAT,YACA;AAAA,QAEF,QAAO,cAAS,UAAT,YAAkB;AAAA,QACzB,MAAM,SAAS;AAAA;AAAA,IACjB;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,IAAG;AAAA,QACH,UAAU,CAAC,MAAM;AACf,mBAAS,EAAE,OAAO,KAAK;AAAA,QACzB;AAAA,QACA,aAAa,SAAS;AAAA,QACtB,OAAO;AAAA,UACL,QAAQ;AAAA,QACV;AAAA,QACA,OAAO;AAAA;AAAA,IACT;AAAA,KACF,GACF;AAEJ;","names":[]}

package/dist/chunk-FVAZZ46M.js

@@ -0,0 +1,69 @@
+import {
+  curriculum_review_default
+} from "./chunk-7QDV6YRH.js";
+import {
+  curriculum_video_default
+} from "./chunk-QGKQ3IX7.js";
+import {
+  curriculum_ai_traning_default
+} from "./chunk-Q7AMZ7ES.js";
+import {
+  curriculum_file_download_default
+} from "./chunk-5ZA5HGOV.js";
+import {
+  useCurriculumContext
+} from "./chunk-Y7SJF3Y3.js";
+import {
+  Typo
+} from "./chunk-PMJIFLDT.js";
+import {
+  Flex
+} from "./chunk-25HMMI7R.js";
+import {
+  InfoCircledIcon
+} from "./chunk-W5TPOFOO.js";
+
+// src/molecules/curriculumV2/CurriculumContents/index.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function CurriculumBody() {
+  const { selectedItem, selectedSectionTitle } = useCurriculumContext();
+  switch (selectedItem.type) {
+    case "video":
+      return /* @__PURE__ */ jsx(curriculum_video_default, { item: selectedItem });
+    case "review":
+      return /* @__PURE__ */ jsx(
+        curriculum_review_default,
+        {
+          item: selectedItem,
+          sectionTitle: selectedSectionTitle == null ? void 0 : selectedSectionTitle.title
+        }
+      );
+    case "aiTraining":
+      return /* @__PURE__ */ jsx(curriculum_ai_traning_default, { item: selectedItem });
+    case "fileDownload":
+      return /* @__PURE__ */ jsx(curriculum_file_download_default, { item: selectedItem });
+    default:
+      return /* @__PURE__ */ jsxs(
+        Flex,
+        {
+          align: "center",
+          direction: "column",
+          gap: "2",
+          height: "100%",
+          justify: "center",
+          width: "100%",
+          children: [
+            /* @__PURE__ */ jsx(InfoCircledIcon, { height: 24, width: 24 }),
+            /* @__PURE__ */ jsx(Typo, { children: "\uCEE8\uD150\uCE20\uB97C \uB85C\uB529 \uD560 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4" }),
+            /* @__PURE__ */ jsx(Typo, { align: "center", color: "gray", variant: "caption", children: `[debug info]
+            ${JSON.stringify(selectedItem)}` })
+          ]
+        }
+      );
+  }
+}
+
+export {
+  CurriculumBody
+};
+//# sourceMappingURL=chunk-FVAZZ46M.js.map

package/dist/chunk-FVAZZ46M.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/molecules/curriculumV2/CurriculumContents/index.tsx"],"sourcesContent":["import React from 'react';\nimport { Flex } from '@/atoms/flex';\nimport { Typo } from '@/atoms/typo';\nimport { InfoCircledIcon } from '@/icon';\nimport { useCurriculumContext } from '../curriculum-context';\nimport CurriculumVideo from './curriculum-video';\nimport CurriculumReview from './curriculum-review';\nimport CurriculumAiTraning from './curriculum-ai-traning';\nimport CurriculumFileDownload from './curriculum-file-download';\n\nexport function CurriculumBody(): React.ReactNode {\n  const { selectedItem, selectedSectionTitle } = useCurriculumContext();\n\n  switch (selectedItem.type) {\n    case 'video':\n      return <CurriculumVideo item={selectedItem} />;\n    case 'review':\n      return (\n        <CurriculumReview\n          item={selectedItem}\n          sectionTitle={selectedSectionTitle?.title}\n        />\n      );\n    case 'aiTraining':\n      return <CurriculumAiTraning item={selectedItem} />;\n    case 'fileDownload':\n      return <CurriculumFileDownload item={selectedItem} />;\n    default:\n      return (\n        <Flex\n          align=\"center\"\n          direction=\"column\"\n          gap=\"2\"\n          height=\"100%\"\n          justify=\"center\"\n          width=\"100%\"\n        >\n          <InfoCircledIcon height={24} width={24} />\n          <Typo>컨텐츠를 로딩 할 수 없습니다</Typo>\n          <Typo align=\"center\" color=\"gray\" variant=\"caption\">\n            {`[debug info]\n            ${JSON.stringify(selectedItem)}`}\n          </Typo>\n        </Flex>\n      );\n  }\n} "],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAea,cAcL,YAdK;AALN,SAAS,iBAAkC;AAChD,QAAM,EAAE,cAAc,qBAAqB,IAAI,qBAAqB;AAEpE,UAAQ,aAAa,MAAM;AAAA,IACzB,KAAK;AACH,aAAO,oBAAC,4BAAgB,MAAM,cAAc;AAAA,IAC9C,KAAK;AACH,aACE;AAAA,QAAC;AAAA;AAAA,UACC,MAAM;AAAA,UACN,cAAc,6DAAsB;AAAA;AAAA,MACtC;AAAA,IAEJ,KAAK;AACH,aAAO,oBAAC,iCAAoB,MAAM,cAAc;AAAA,IAClD,KAAK;AACH,aAAO,oBAAC,oCAAuB,MAAM,cAAc;AAAA,IACrD;AACE,aACE;AAAA,QAAC;AAAA;AAAA,UACC,OAAM;AAAA,UACN,WAAU;AAAA,UACV,KAAI;AAAA,UACJ,QAAO;AAAA,UACP,SAAQ;AAAA,UACR,OAAM;AAAA,UAEN;AAAA,gCAAC,mBAAgB,QAAQ,IAAI,OAAO,IAAI;AAAA,YACxC,oBAAC,QAAK,0FAAgB;AAAA,YACtB,oBAAC,QAAK,OAAM,UAAS,OAAM,QAAO,SAAQ,WACvC;AAAA,cACC,KAAK,UAAU,YAAY,CAAC,IAChC;AAAA;AAAA;AAAA,MACF;AAAA,EAEN;AACF;","names":[]}

package/dist/chunk-H6UISOMV.js

@@ -0,0 +1,50 @@
+import {
+  Dialog
+} from "./chunk-AH4A53SZ.js";
+import {
+  Flex
+} from "./chunk-25HMMI7R.js";
+import {
+  Button
+} from "./chunk-ZVDAEY5Q.js";
+
+// src/molecules/training-info-guideline.tsx
+import { FileTextIcon, VideoIcon } from "@radix-ui/react-icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+function TrainingInfoGuideline({
+  values,
+  onClickFileDownload
+}) {
+  return /* @__PURE__ */ jsx(Flex, { direction: "column", gap: "4", children: values.map((value) => /* @__PURE__ */ jsx(TrainingInfoGuidelineItem, { onClickFileDownload, value }, getItemKey(value))) });
+}
+function getItemKey(value) {
+  return value.url;
+}
+function TrainingInfoGuidelineItem({
+  value,
+  onClickFileDownload
+}) {
+  if (value.type === "file") {
+    return /* @__PURE__ */ jsxs(Button, { onClick: () => {
+      onClickFileDownload({ url: value.url, filename: value.filename });
+    }, children: [
+      /* @__PURE__ */ jsx(FileTextIcon, {}),
+      value.downloadButtonName
+    ] });
+  }
+  if (value.type === "video") {
+    return /* @__PURE__ */ jsxs(Dialog.Root, { children: [
+      /* @__PURE__ */ jsx(Dialog.Trigger, { children: /* @__PURE__ */ jsxs(Button, { children: [
+        /* @__PURE__ */ jsx(VideoIcon, {}),
+        value.videoTitle
+      ] }) }),
+      /* @__PURE__ */ jsx(Dialog.Content, { title: value.videoTitle, children: /* @__PURE__ */ jsx("video", { src: value.url }) })
+    ] });
+  }
+  return null;
+}
+
+export {
+  TrainingInfoGuideline
+};
+//# sourceMappingURL=chunk-H6UISOMV.js.map

package/dist/chunk-H6UISOMV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/molecules/training-info-guideline.tsx"],"sourcesContent":["import React from 'react';\nimport { FileTextIcon, VideoIcon } from '@radix-ui/react-icons';\nimport { Button } from '@/atoms/button';\nimport type { TrainingInfoGuidelineContents } from '@/types/training-info-guideline-schema-generated';\nimport { Dialog } from '@/atoms/dialog';\nimport { Flex } from '../atoms/flex';\n\nexport interface TrainingInfoGuidelineProps {\n  values: TrainingInfoGuidelineContents['values'];\n  onClickFileDownload: (args: { url: string; filename: string }) => void;\n}\n\nexport function TrainingInfoGuideline({\n  values,\n  onClickFileDownload,\n}: TrainingInfoGuidelineProps): React.ReactElement {\n  return (\n    <Flex direction=\"column\" gap=\"4\">\n      {values.map((value) => (\n        <TrainingInfoGuidelineItem key={getItemKey(value)} onClickFileDownload={onClickFileDownload} value={value} />\n      ))}\n    </Flex>\n  );\n}\n\ntype TrainingInfoGuidelineValue =\n  TrainingInfoGuidelineContents['values'][number];\n\nfunction getItemKey(value: TrainingInfoGuidelineValue): string {\n  return value.url;\n}\n\ninterface TrainingInfoGuidelineItemProps {\n  value: TrainingInfoGuidelineValue;\n  onClickFileDownload: TrainingInfoGuidelineProps['onClickFileDownload'];\n}\n\nfunction TrainingInfoGuidelineItem({\n  value,\n  onClickFileDownload,\n}: TrainingInfoGuidelineItemProps): React.ReactElement | null {\n  if (value.type === 'file') {\n    return (\n      <Button onClick={() => { onClickFileDownload({ url: value.url, filename: value.filename }); }}>\n        <FileTextIcon />\n        {value.downloadButtonName}\n      </Button>\n    );\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- 차후 다른 타입 추가 시 사용\n  if (value.type === 'video') {\n    return (\n      <Dialog.Root>\n        <Dialog.Trigger>\n          <Button>\n            <VideoIcon />\n            {value.videoTitle}\n          </Button>\n        </Dialog.Trigger>\n        <Dialog.Content title={value.videoTitle}>\n          <video src={value.url} />\n        </Dialog.Content>\n      </Dialog.Root>\n    );\n  }\n  return null;\n}\n"],"mappings":";;;;;;;;;;;AACA,SAAS,cAAc,iBAAiB;AAkBhC,cAwBF,YAxBE;AAPD,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA;AACF,GAAmD;AACjD,SACE,oBAAC,QAAK,WAAU,UAAS,KAAI,KAC1B,iBAAO,IAAI,CAAC,UACX,oBAAC,6BAAkD,qBAA0C,SAA7D,WAAW,KAAK,CAA2D,CAC5G,GACH;AAEJ;AAKA,SAAS,WAAW,OAA2C;AAC7D,SAAO,MAAM;AACf;AAOA,SAAS,0BAA0B;AAAA,EACjC;AAAA,EACA;AACF,GAA8D;AAC5D,MAAI,MAAM,SAAS,QAAQ;AACzB,WACE,qBAAC,UAAO,SAAS,MAAM;AAAE,0BAAoB,EAAE,KAAK,MAAM,KAAK,UAAU,MAAM,SAAS,CAAC;AAAA,IAAG,GAC1F;AAAA,0BAAC,gBAAa;AAAA,MACb,MAAM;AAAA,OACT;AAAA,EAEJ;AAGA,MAAI,MAAM,SAAS,SAAS;AAC1B,WACE,qBAAC,OAAO,MAAP,EACC;AAAA,0BAAC,OAAO,SAAP,EACC,+BAAC,UACC;AAAA,4BAAC,aAAU;AAAA,QACV,MAAM;AAAA,SACT,GACF;AAAA,MACA,oBAAC,OAAO,SAAP,EAAe,OAAO,MAAM,YAC3B,8BAAC,WAAM,KAAK,MAAM,KAAK,GACzB;AAAA,OACF;AAAA,EAEJ;AACA,SAAO;AACT;","names":[]}

package/dist/chunk-HZ5LNRVL.js

@@ -0,0 +1,101 @@
+import {
+  ReviewQuestionContentHeader
+} from "./chunk-BWWSZLTV.js";
+import {
+  RadioButtonCard
+} from "./chunk-CSKNBWPB.js";
+import {
+  Grid
+} from "./chunk-EGEQY3KT.js";
+import {
+  Box
+} from "./chunk-4Y5BEXVN.js";
+import {
+  Typo
+} from "./chunk-PMJIFLDT.js";
+import {
+  Flex
+} from "./chunk-25HMMI7R.js";
+import {
+  Button
+} from "./chunk-ZVDAEY5Q.js";
+import {
+  Card
+} from "./chunk-RP2RGCAW.js";
+
+// src/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-question-radio.tsx
+import { useCallback, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var correctAnswerStyle = {
+  backgroundColor: "var(--green-a2)"
+};
+function ReviewQuestionRadio(props) {
+  const { question, answer, onChange } = props;
+  const [isCheckAnswer, setIsCheckAnswer] = useState(false);
+  const checkAnswer = useCallback(() => {
+    setIsCheckAnswer(true);
+  }, []);
+  const isCorrect = isCheckAnswer && Number(answer) === question.correctAnswer;
+  const isWrong = isCheckAnswer && Number(answer) !== question.correctAnswer;
+  const radioColor = useMemo(() => {
+    if (isCorrect) return "green";
+    if (isWrong) return "red";
+    return void 0;
+  }, [isCorrect, isWrong]);
+  return /* @__PURE__ */ jsxs(Grid, { height: "100%", rows: "auto 1fr", width: "100%", children: [
+    /* @__PURE__ */ jsx(Card, { mb: "4", size: "2", children: /* @__PURE__ */ jsx(
+      ReviewQuestionContentHeader,
+      {
+        icon: question.icon,
+        question: question.question,
+        title: question.title,
+        type: question.type
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(Grid, { height: "100%", rows: "1fr auto", width: "100%", children: [
+      /* @__PURE__ */ jsx(Box, { position: "relative", children: /* @__PURE__ */ jsx(
+        RadioButtonCard.Root,
+        {
+          color: radioColor,
+          onValueChange: onChange,
+          style: {
+            width: "100%",
+            height: "100%",
+            overflowY: "auto",
+            position: "absolute"
+          },
+          value: answer,
+          children: /* @__PURE__ */ jsx(Flex, { direction: "column", gap: "2", width: "100%", children: question.options.map((option, i) => {
+            const isThisOptionCorrect = isCheckAnswer && i === question.correctAnswer;
+            const isThisOptionSelected = isCheckAnswer && i === Number(answer);
+            const isThisOptionWrong = isCheckAnswer && isThisOptionSelected && i !== question.correctAnswer;
+            const style = (() => {
+              if (isThisOptionCorrect) return correctAnswerStyle;
+              return {};
+            })();
+            return /* @__PURE__ */ jsx(
+              RadioButtonCard.Item,
+              {
+                style,
+                value: i.toString(),
+                children: /* @__PURE__ */ jsxs(Box, { children: [
+                  /* @__PURE__ */ jsx(Typo, { as: "p", children: option.label }),
+                  isThisOptionCorrect ? /* @__PURE__ */ jsx(Typo, { color: "green", children: "\uC815\uB2F5\uC785\uB2C8\uB2E4" }) : null,
+                  isThisOptionWrong ? /* @__PURE__ */ jsx(Typo, { color: "red", children: "\uC815\uB2F5\uC774 \uC544\uB2D9\uB2C8\uB2E4" }) : null
+                ] })
+              },
+              `${option.label}-${i}`
+            );
+          }) })
+        }
+      ) }),
+      /* @__PURE__ */ jsx(Flex, { justify: "end", mt: "2", children: /* @__PURE__ */ jsx(Button, { onClick: checkAnswer, children: "\uC815\uB2F5 \uD655\uC778" }) })
+    ] })
+  ] });
+}
+var review_question_radio_default = ReviewQuestionRadio;
+
+export {
+  review_question_radio_default
+};
+//# sourceMappingURL=chunk-HZ5LNRVL.js.map

package/dist/chunk-HZ5LNRVL.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-question-radio.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useState } from 'react';\nimport { Box } from '@/atoms/box';\nimport { Button } from '@/atoms/button';\nimport { Card } from '@/atoms/card';\nimport { Flex } from '@/atoms/flex';\nimport { Grid } from '@/atoms/grid';\nimport { Typo } from '@/atoms/typo';\nimport { type CurriculumReviewQuestionRadio } from '@/types/curriculumContents.type'; \nimport { RadioButtonCard } from \"../../../../radio-button-card\";\nimport { ReviewQuestionContentHeader } from './review-comp';\n\ninterface ReviewQuestionRadioProps {\n  question: CurriculumReviewQuestionRadio;\n  answer: string;\n  error?: string;\n  onChange: (value: string) => void;\n}\n\nconst correctAnswerStyle: React.CSSProperties = {\n  backgroundColor: 'var(--green-a2)',\n};\n\nfunction ReviewQuestionRadio(props: ReviewQuestionRadioProps): React.ReactNode {\n  const { question, answer, onChange } = props;\n  const [isCheckAnswer, setIsCheckAnswer] = useState(false);\n\n  const checkAnswer = useCallback(() => {\n    setIsCheckAnswer(true);\n  }, []);\n\n  const isCorrect = isCheckAnswer && Number(answer) === question.correctAnswer;\n  const isWrong = isCheckAnswer && Number(answer) !== question.correctAnswer;\n  const radioColor = useMemo(() => {\n    if (isCorrect) return 'green';\n    if (isWrong) return 'red';\n    return undefined;\n  }, [isCorrect, isWrong]);\n\n  return (\n    <Grid height=\"100%\" rows=\"auto 1fr\" width=\"100%\">\n      <Card mb=\"4\" size=\"2\">\n        <ReviewQuestionContentHeader\n          icon={question.icon}\n          question={question.question}\n          title={question.title}\n          type={question.type}\n        />\n      </Card>\n\n      <Grid height=\"100%\" rows=\"1fr auto\" width=\"100%\">\n        <Box position=\"relative\">\n          <RadioButtonCard.Root\n            color={radioColor}\n            onValueChange={onChange}\n            style={{\n              width: '100%',\n              height: '100%',\n              overflowY: 'auto',\n              position: 'absolute',\n            }}\n            value={answer}\n          >\n            <Flex direction=\"column\" gap=\"2\" width=\"100%\">\n              {question.options.map((option, i) => {\n                const isThisOptionCorrect =\n                  isCheckAnswer && i === question.correctAnswer;\n                const isThisOptionSelected =\n                  isCheckAnswer && i === Number(answer);\n                const isThisOptionWrong =\n                  isCheckAnswer &&\n                  isThisOptionSelected &&\n                  i !== question.correctAnswer;\n                const style = (() => {\n                  if (isThisOptionCorrect) return correctAnswerStyle;\n                  return {};\n                })();\n\n                return (\n                  <RadioButtonCard.Item\n                    // eslint-disable-next-line react/no-array-index-key -- 조합 키로 중복 회피\n                    key={`${option.label}-${i}`}\n                    style={style}\n                    value={i.toString()}\n                  >\n                    <Box>\n                      <Typo as=\"p\">{option.label}</Typo>\n                      {isThisOptionCorrect ? (\n                        <Typo color=\"green\">정답입니다</Typo>\n                      ) : null}\n                      {isThisOptionWrong ? (\n                        <Typo color=\"red\">정답이 아닙니다</Typo>\n                      ) : null}\n                    </Box>\n                  </RadioButtonCard.Item>\n                );\n              })}\n            </Flex>\n          </RadioButtonCard.Root>\n        </Box>\n        <Flex justify=\"end\" mt=\"2\">\n          <Button onClick={checkAnswer}>정답 확인</Button>\n        </Flex>\n      </Grid>\n    </Grid>\n  );\n}\n\nexport default ReviewQuestionRadio;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,SAAgB,aAAa,SAAS,gBAAgB;AAyC9C,cA2CY,YA3CZ;AAvBR,IAAM,qBAA0C;AAAA,EAC9C,iBAAiB;AACnB;AAEA,SAAS,oBAAoB,OAAkD;AAC7E,QAAM,EAAE,UAAU,QAAQ,SAAS,IAAI;AACvC,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,KAAK;AAExD,QAAM,cAAc,YAAY,MAAM;AACpC,qBAAiB,IAAI;AAAA,EACvB,GAAG,CAAC,CAAC;AAEL,QAAM,YAAY,iBAAiB,OAAO,MAAM,MAAM,SAAS;AAC/D,QAAM,UAAU,iBAAiB,OAAO,MAAM,MAAM,SAAS;AAC7D,QAAM,aAAa,QAAQ,MAAM;AAC/B,QAAI,UAAW,QAAO;AACtB,QAAI,QAAS,QAAO;AACpB,WAAO;AAAA,EACT,GAAG,CAAC,WAAW,OAAO,CAAC;AAEvB,SACE,qBAAC,QAAK,QAAO,QAAO,MAAK,YAAW,OAAM,QACxC;AAAA,wBAAC,QAAK,IAAG,KAAI,MAAK,KAChB;AAAA,MAAC;AAAA;AAAA,QACC,MAAM,SAAS;AAAA,QACf,UAAU,SAAS;AAAA,QACnB,OAAO,SAAS;AAAA,QAChB,MAAM,SAAS;AAAA;AAAA,IACjB,GACF;AAAA,IAEA,qBAAC,QAAK,QAAO,QAAO,MAAK,YAAW,OAAM,QACxC;AAAA,0BAAC,OAAI,UAAS,YACZ;AAAA,QAAC,gBAAgB;AAAA,QAAhB;AAAA,UACC,OAAO;AAAA,UACP,eAAe;AAAA,UACf,OAAO;AAAA,YACL,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,WAAW;AAAA,YACX,UAAU;AAAA,UACZ;AAAA,UACA,OAAO;AAAA,UAEP,8BAAC,QAAK,WAAU,UAAS,KAAI,KAAI,OAAM,QACpC,mBAAS,QAAQ,IAAI,CAAC,QAAQ,MAAM;AACnC,kBAAM,sBACJ,iBAAiB,MAAM,SAAS;AAClC,kBAAM,uBACJ,iBAAiB,MAAM,OAAO,MAAM;AACtC,kBAAM,oBACJ,iBACA,wBACA,MAAM,SAAS;AACjB,kBAAM,SAAS,MAAM;AACnB,kBAAI,oBAAqB,QAAO;AAChC,qBAAO,CAAC;AAAA,YACV,GAAG;AAEH,mBACE;AAAA,cAAC,gBAAgB;AAAA,cAAhB;AAAA,gBAGC;AAAA,gBACA,OAAO,EAAE,SAAS;AAAA,gBAElB,+BAAC,OACC;AAAA,sCAAC,QAAK,IAAG,KAAK,iBAAO,OAAM;AAAA,kBAC1B,sBACC,oBAAC,QAAK,OAAM,SAAQ,4CAAK,IACvB;AAAA,kBACH,oBACC,oBAAC,QAAK,OAAM,OAAM,yDAAQ,IACxB;AAAA,mBACN;AAAA;AAAA,cAZK,GAAG,OAAO,KAAK,IAAI,CAAC;AAAA,YAa3B;AAAA,UAEJ,CAAC,GACH;AAAA;AAAA,MACF,GACF;AAAA,MACA,oBAAC,QAAK,SAAQ,OAAM,IAAG,KACrB,8BAAC,UAAO,SAAS,aAAa,uCAAK,GACrC;AAAA,OACF;AAAA,KACF;AAEJ;AAEA,IAAO,gCAAQ;","names":[]}

package/dist/chunk-I25D6CHU.js

@@ -0,0 +1,50 @@
+import {
+  Dialog
+} from "./chunk-AH4A53SZ.js";
+import {
+  Flex
+} from "./chunk-25HMMI7R.js";
+import {
+  Button
+} from "./chunk-ZVDAEY5Q.js";
+
+// src/molecules/training-info-guideline.tsx
+import { FileTextIcon, VideoIcon } from "@radix-ui/react-icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+function TrainingInfoGuideline({
+  values,
+  onClickFileDownload
+}) {
+  return /* @__PURE__ */ jsx(Flex, { direction: "column", gap: "4", children: values.map((value) => /* @__PURE__ */ jsx(TrainingInfoGuidelineItem, { onClickFileDownload, value }, getItemKey(value))) });
+}
+function getItemKey(value) {
+  return value.url;
+}
+function TrainingInfoGuidelineItem({
+  value,
+  onClickFileDownload
+}) {
+  if (value.type === "file") {
+    return /* @__PURE__ */ jsxs(Button, { onClick: () => {
+      onClickFileDownload({ url: value.url, filename: value.filename });
+    }, variant: "surface", children: [
+      /* @__PURE__ */ jsx(FileTextIcon, {}),
+      value.downloadButtonName
+    ] });
+  }
+  if (value.type === "video") {
+    return /* @__PURE__ */ jsxs(Dialog.Root, { children: [
+      /* @__PURE__ */ jsx(Dialog.Trigger, { children: /* @__PURE__ */ jsxs(Button, { variant: "surface", children: [
+        /* @__PURE__ */ jsx(VideoIcon, {}),
+        value.videoTitle
+      ] }) }),
+      /* @__PURE__ */ jsx(Dialog.Content, { title: value.videoTitle, children: /* @__PURE__ */ jsx("video", { controls: true, src: value.url, style: { maxWidth: "500px", maxHeight: "500px", width: "100%", height: "100%" }, children: /* @__PURE__ */ jsx("track", { kind: "captions", label: "Korean captions", srcLang: "ko" }) }) })
+    ] });
+  }
+  return null;
+}
+
+export {
+  TrainingInfoGuideline
+};
+//# sourceMappingURL=chunk-I25D6CHU.js.map

package/dist/chunk-I25D6CHU.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/molecules/training-info-guideline.tsx"],"sourcesContent":["import React from 'react';\nimport { FileTextIcon, VideoIcon } from '@radix-ui/react-icons';\nimport { Button } from '@/atoms/button';\nimport type { TrainingInfoGuidelineContents } from '@/types/training-info-guideline-schema-generated';\nimport { Dialog } from '@/atoms/dialog';\nimport { Flex } from '../atoms/flex';\n\nexport interface TrainingInfoGuidelineProps {\n  values: TrainingInfoGuidelineContents['values'];\n  onClickFileDownload: (args: { url: string; filename: string }) => void;\n}\n\nexport function TrainingInfoGuideline({\n  values,\n  onClickFileDownload,\n}: TrainingInfoGuidelineProps): React.ReactElement {\n  return (\n    <Flex direction=\"column\" gap=\"4\">\n      {values.map((value) => (\n        <TrainingInfoGuidelineItem key={getItemKey(value)} onClickFileDownload={onClickFileDownload} value={value} />\n      ))}\n    </Flex>\n  );\n}\n\ntype TrainingInfoGuidelineValue =\n  TrainingInfoGuidelineContents['values'][number];\n\nfunction getItemKey(value: TrainingInfoGuidelineValue): string {\n  return value.url;\n}\n\ninterface TrainingInfoGuidelineItemProps {\n  value: TrainingInfoGuidelineValue;\n  onClickFileDownload: TrainingInfoGuidelineProps['onClickFileDownload'];\n}\n\nfunction TrainingInfoGuidelineItem({\n  value,\n  onClickFileDownload,\n}: TrainingInfoGuidelineItemProps): React.ReactElement | null {\n  if (value.type === 'file') {\n    return (\n      <Button onClick={() => { onClickFileDownload({ url: value.url, filename: value.filename }); }} variant=\"surface\">\n        <FileTextIcon />\n        {value.downloadButtonName}\n      </Button>\n    );\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- 차후 다른 타입 추가 시 사용\n  if (value.type === 'video') {\n    return (\n      <Dialog.Root>\n        <Dialog.Trigger>\n          <Button variant=\"surface\">\n            <VideoIcon />\n            {value.videoTitle}\n          </Button>\n        </Dialog.Trigger>\n        <Dialog.Content title={value.videoTitle}>\n          <video controls src={value.url} style={{maxWidth:'500px', maxHeight:'500px', width:'100%', height:'100%'}}>\n            <track kind=\"captions\" label=\"Korean captions\" srcLang=\"ko\" />\n          </video>\n        </Dialog.Content>\n      </Dialog.Root>\n    );\n  }\n  return null;\n}\n"],"mappings":";;;;;;;;;;;AACA,SAAS,cAAc,iBAAiB;AAkBhC,cAwBF,YAxBE;AAPD,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA;AACF,GAAmD;AACjD,SACE,oBAAC,QAAK,WAAU,UAAS,KAAI,KAC1B,iBAAO,IAAI,CAAC,UACX,oBAAC,6BAAkD,qBAA0C,SAA7D,WAAW,KAAK,CAA2D,CAC5G,GACH;AAEJ;AAKA,SAAS,WAAW,OAA2C;AAC7D,SAAO,MAAM;AACf;AAOA,SAAS,0BAA0B;AAAA,EACjC;AAAA,EACA;AACF,GAA8D;AAC5D,MAAI,MAAM,SAAS,QAAQ;AACzB,WACE,qBAAC,UAAO,SAAS,MAAM;AAAE,0BAAoB,EAAE,KAAK,MAAM,KAAK,UAAU,MAAM,SAAS,CAAC;AAAA,IAAG,GAAG,SAAQ,WACrG;AAAA,0BAAC,gBAAa;AAAA,MACb,MAAM;AAAA,OACT;AAAA,EAEJ;AAGA,MAAI,MAAM,SAAS,SAAS;AAC1B,WACE,qBAAC,OAAO,MAAP,EACC;AAAA,0BAAC,OAAO,SAAP,EACC,+BAAC,UAAO,SAAQ,WACd;AAAA,4BAAC,aAAU;AAAA,QACV,MAAM;AAAA,SACT,GACF;AAAA,MACA,oBAAC,OAAO,SAAP,EAAe,OAAO,MAAM,YAC3B,8BAAC,WAAM,UAAQ,MAAC,KAAK,MAAM,KAAK,OAAO,EAAC,UAAS,SAAS,WAAU,SAAS,OAAM,QAAQ,QAAO,OAAM,GACtG,8BAAC,WAAM,MAAK,YAAW,OAAM,mBAAkB,SAAQ,MAAK,GAC9D,GACF;AAAA,OACF;AAAA,EAEJ;AACA,SAAO;AACT;","names":[]}

package/dist/chunk-IF4Q5NV4.js

@@ -0,0 +1,129 @@
+import {
+  Spinner
+} from "./chunk-FR2GDOU2.js";
+import {
+  Dialog
+} from "./chunk-JQ7VQ5SB.js";
+import {
+  Flex
+} from "./chunk-25HMMI7R.js";
+import {
+  Button
+} from "./chunk-ZVDAEY5Q.js";
+import {
+  AspectRatio
+} from "./chunk-EAXUQEO5.js";
+
+// src/molecules/training-info-guideline.tsx
+import { useState } from "react";
+import { FileTextIcon, VideoIcon } from "@radix-ui/react-icons";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function TrainingInfoGuideline({
+  values,
+  onClickFileDownload
+}) {
+  return /* @__PURE__ */ jsx(Fragment, { children: values.map((value) => /* @__PURE__ */ jsx(
+    TrainingInfoGuidelineItem,
+    {
+      onClickFileDownload,
+      value
+    },
+    getItemKey(value)
+  )) });
+}
+function getItemKey(value) {
+  return value.url;
+}
+function TrainingInfoGuidelineItem({
+  value,
+  onClickFileDownload
+}) {
+  const [isLoading, setIsLoading] = useState(true);
+  if (value.type === "file") {
+    return /* @__PURE__ */ jsxs(
+      Button,
+      {
+        onClick: () => {
+          onClickFileDownload({ url: value.url, filename: value.filename });
+        },
+        variant: "surface",
+        children: [
+          /* @__PURE__ */ jsx(FileTextIcon, {}),
+          value.downloadButtonName
+        ]
+      }
+    );
+  }
+  if (value.type === "video") {
+    return /* @__PURE__ */ jsxs(Dialog.Root, { children: [
+      /* @__PURE__ */ jsx(Dialog.Trigger, { children: /* @__PURE__ */ jsxs(Button, { variant: "surface", children: [
+        /* @__PURE__ */ jsx(VideoIcon, {}),
+        value.videoTitle
+      ] }) }),
+      /* @__PURE__ */ jsx(
+        Dialog.Content,
+        {
+          height: "100%",
+          maxHeight: "500px",
+          maxWidth: "800px",
+          title: value.videoTitle,
+          width: "100%",
+          children: /* @__PURE__ */ jsx(AspectRatio, { ratio: 16 / 9, style: { width: "100%" }, children: /* @__PURE__ */ jsxs(
+            Flex,
+            {
+              align: "center",
+              justify: "center",
+              style: {
+                width: "100%",
+                height: "100%",
+                backgroundColor: "black",
+                position: "relative"
+              },
+              children: [
+                isLoading ? /* @__PURE__ */ jsx(
+                  Flex,
+                  {
+                    align: "center",
+                    height: "100%",
+                    justify: "center",
+                    position: "absolute",
+                    style: {
+                      position: "absolute",
+                      top: 0,
+                      left: 0,
+                      zIndex: 1,
+                      color: "white"
+                    },
+                    width: "100%",
+                    children: /* @__PURE__ */ jsx(Spinner, { size: "3", style: { width: 48, height: 48 } })
+                  }
+                ) : null,
+                /* @__PURE__ */ jsx(
+                  "iframe",
+                  {
+                    allowFullScreen: true,
+                    onError: () => {
+                      setIsLoading(false);
+                    },
+                    onLoad: () => {
+                      setIsLoading(false);
+                    },
+                    src: `${value.url}?theme=light`,
+                    style: { width: "100%", height: "100%", border: "none" },
+                    title: "Curriculum Video"
+                  }
+                )
+              ]
+            }
+          ) })
+        }
+      )
+    ] });
+  }
+  return null;
+}
+
+export {
+  TrainingInfoGuideline
+};
+//# sourceMappingURL=chunk-IF4Q5NV4.js.map

package/dist/chunk-IF4Q5NV4.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/molecules/training-info-guideline.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { FileTextIcon, VideoIcon } from '@radix-ui/react-icons';\nimport { AspectRatio } from '@/atoms/aspect-ratio';\nimport { Button } from '@/atoms/button';\nimport type { TrainingInfoGuidelineContents } from '@/types/training-info-guideline-schema-generated';\nimport { Dialog } from '@/atoms/dialog';\nimport { Spinner } from '@/atoms/spinner';\nimport { Flex } from '../atoms/flex';\n\nexport interface TrainingInfoGuidelineProps {\n  values: TrainingInfoGuidelineContents['values'];\n  onClickFileDownload: (args: { url: string; filename: string }) => void;\n}\n\nexport function TrainingInfoGuideline({\n  values,\n  onClickFileDownload,\n}: TrainingInfoGuidelineProps): React.ReactElement {\n  return (\n    <>\n      {values.map((value) => (\n        <TrainingInfoGuidelineItem\n          key={getItemKey(value)}\n          onClickFileDownload={onClickFileDownload}\n          value={value}\n        />\n      ))}\n    </>\n  );\n}\n\ntype TrainingInfoGuidelineValue =\n  TrainingInfoGuidelineContents['values'][number];\n\nfunction getItemKey(value: TrainingInfoGuidelineValue): string {\n  return value.url;\n}\n\ninterface TrainingInfoGuidelineItemProps {\n  value: TrainingInfoGuidelineValue;\n  onClickFileDownload: TrainingInfoGuidelineProps['onClickFileDownload'];\n}\n\nfunction TrainingInfoGuidelineItem({\n  value,\n  onClickFileDownload,\n}: TrainingInfoGuidelineItemProps): React.ReactElement | null {\n  const [isLoading, setIsLoading] = useState(true);\n\n  if (value.type === 'file') {\n    return (\n      <Button\n        onClick={() => {\n          onClickFileDownload({ url: value.url, filename: value.filename });\n        }}\n        variant=\"surface\"\n      >\n        <FileTextIcon />\n        {value.downloadButtonName}\n      </Button>\n    );\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- 차후 다른 타입 추가 시 사용\n  if (value.type === 'video') {\n    return (\n      <Dialog.Root>\n        <Dialog.Trigger>\n          <Button variant=\"surface\">\n            <VideoIcon />\n            {value.videoTitle}\n          </Button>\n        </Dialog.Trigger>\n        <Dialog.Content\n          height=\"100%\"\n          maxHeight=\"500px\"\n          maxWidth=\"800px\"\n          title={value.videoTitle}\n          width=\"100%\"\n        >\n          <AspectRatio ratio={16 / 9} style={{ width: '100%' }}>\n            <Flex\n              align=\"center\"\n              justify=\"center\"\n              style={{\n                width: '100%',\n                height: '100%',\n                backgroundColor: 'black',\n                position: 'relative',\n              }}\n            >\n              {isLoading ? (\n                <Flex\n                  align=\"center\"\n                  height=\"100%\"\n                  justify=\"center\"\n                  position=\"absolute\"\n                  style={{\n                    position: 'absolute',\n                    top: 0,\n                    left: 0,\n                    zIndex: 1,\n                    color: 'white',\n                  }}\n                  width=\"100%\"\n                >\n                  <Spinner size=\"3\" style={{ width: 48, height: 48 }} />\n                </Flex>\n              ) : null}\n\n              <iframe\n                allowFullScreen\n                onError={() => {\n                  setIsLoading(false);\n                }} // 필요시 에러 메시지로 대체\n                onLoad={() => {\n                  setIsLoading(false);\n                }}\n                src={`${value.url}?theme=light`}\n                style={{ width: '100%', height: '100%', border: 'none' }}\n                title=\"Curriculum Video\"\n              />\n            </Flex>\n          </AspectRatio>\n        </Dialog.Content>\n      </Dialog.Root>\n    );\n  }\n  return null;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA,SAAgB,gBAAgB;AAChC,SAAS,cAAc,iBAAiB;AAkBpC,mBAEI,KA8BF,YAhCF;AALG,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA;AACF,GAAmD;AACjD,SACE,gCACG,iBAAO,IAAI,CAAC,UACX;AAAA,IAAC;AAAA;AAAA,MAEC;AAAA,MACA;AAAA;AAAA,IAFK,WAAW,KAAK;AAAA,EAGvB,CACD,GACH;AAEJ;AAKA,SAAS,WAAW,OAA2C;AAC7D,SAAO,MAAM;AACf;AAOA,SAAS,0BAA0B;AAAA,EACjC;AAAA,EACA;AACF,GAA8D;AAC5D,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,IAAI;AAE/C,MAAI,MAAM,SAAS,QAAQ;AACzB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,SAAS,MAAM;AACb,8BAAoB,EAAE,KAAK,MAAM,KAAK,UAAU,MAAM,SAAS,CAAC;AAAA,QAClE;AAAA,QACA,SAAQ;AAAA,QAER;AAAA,8BAAC,gBAAa;AAAA,UACb,MAAM;AAAA;AAAA;AAAA,IACT;AAAA,EAEJ;AAGA,MAAI,MAAM,SAAS,SAAS;AAC1B,WACE,qBAAC,OAAO,MAAP,EACC;AAAA,0BAAC,OAAO,SAAP,EACC,+BAAC,UAAO,SAAQ,WACd;AAAA,4BAAC,aAAU;AAAA,QACV,MAAM;AAAA,SACT,GACF;AAAA,MACA;AAAA,QAAC,OAAO;AAAA,QAAP;AAAA,UACC,QAAO;AAAA,UACP,WAAU;AAAA,UACV,UAAS;AAAA,UACT,OAAO,MAAM;AAAA,UACb,OAAM;AAAA,UAEN,8BAAC,eAAY,OAAO,KAAK,GAAG,OAAO,EAAE,OAAO,OAAO,GACjD;AAAA,YAAC;AAAA;AAAA,cACC,OAAM;AAAA,cACN,SAAQ;AAAA,cACR,OAAO;AAAA,gBACL,OAAO;AAAA,gBACP,QAAQ;AAAA,gBACR,iBAAiB;AAAA,gBACjB,UAAU;AAAA,cACZ;AAAA,cAEC;AAAA,4BACC;AAAA,kBAAC;AAAA;AAAA,oBACC,OAAM;AAAA,oBACN,QAAO;AAAA,oBACP,SAAQ;AAAA,oBACR,UAAS;AAAA,oBACT,OAAO;AAAA,sBACL,UAAU;AAAA,sBACV,KAAK;AAAA,sBACL,MAAM;AAAA,sBACN,QAAQ;AAAA,sBACR,OAAO;AAAA,oBACT;AAAA,oBACA,OAAM;AAAA,oBAEN,8BAAC,WAAQ,MAAK,KAAI,OAAO,EAAE,OAAO,IAAI,QAAQ,GAAG,GAAG;AAAA;AAAA,gBACtD,IACE;AAAA,gBAEJ;AAAA,kBAAC;AAAA;AAAA,oBACC,iBAAe;AAAA,oBACf,SAAS,MAAM;AACb,mCAAa,KAAK;AAAA,oBACpB;AAAA,oBACA,QAAQ,MAAM;AACZ,mCAAa,KAAK;AAAA,oBACpB;AAAA,oBACA,KAAK,GAAG,MAAM,GAAG;AAAA,oBACjB,OAAO,EAAE,OAAO,QAAQ,QAAQ,QAAQ,QAAQ,OAAO;AAAA,oBACvD,OAAM;AAAA;AAAA,gBACR;AAAA;AAAA;AAAA,UACF,GACF;AAAA;AAAA,MACF;AAAA,OACF;AAAA,EAEJ;AACA,SAAO;AACT;","names":[]}