@tipp/ui 2.3.18 → 2.3.19

package/dist/chunk-3A3VE6SX.js

@@ -0,0 +1,160 @@
+import {
+  Separator
+} from "./chunk-HYITAA4J.js";
+import {
+  Spinner
+} from "./chunk-FR2GDOU2.js";
+import {
+  Dialog
+} from "./chunk-AH4A53SZ.js";
+import {
+  Typo
+} from "./chunk-PMJIFLDT.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__ */ jsx(
+      TrainingInfoGuidelineButton,
+      {
+        description: value.filename,
+        icon: /* @__PURE__ */ jsx(FileTextIcon, {}),
+        onClick: () => {
+          onClickFileDownload({ url: value.url, filename: value.filename });
+        },
+        title: value.downloadButtonName
+      }
+    );
+  }
+  if (value.type === "video") {
+    return /* @__PURE__ */ jsxs(Dialog.Root, { children: [
+      /* @__PURE__ */ jsx(Dialog.Trigger, { children: /* @__PURE__ */ jsx(
+        TrainingInfoGuidelineButton,
+        {
+          description: "\uC601\uC0C1",
+          icon: /* @__PURE__ */ jsx(VideoIcon, {}),
+          title: 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;
+}
+function TrainingInfoGuidelineButton({
+  icon,
+  title,
+  description,
+  onClick
+}) {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      onClick,
+      style: { width: "100%", height: "48px" },
+      variant: "outline",
+      children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "2", width: "100%", children: [
+        icon,
+        /* @__PURE__ */ jsx(Separator, { orientation: "vertical", size: "2" }),
+        /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "1", justify: "start", children: [
+          /* @__PURE__ */ jsx(Typo, { children: title }),
+          typeof description === "string" && description !== "" ? /* @__PURE__ */ jsx(Typo, { variant: "caption", children: description }) : null
+        ] })
+      ] })
+    }
+  );
+}
+
+export {
+  TrainingInfoGuideline
+};
+//# sourceMappingURL=chunk-3A3VE6SX.js.map

package/dist/chunk-3A3VE6SX.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 { Separator, Typo } from '@/atoms';\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      <TrainingInfoGuidelineButton\n        description={value.filename}\n        icon={<FileTextIcon />}\n        onClick={() => {\n          onClickFileDownload({ url: value.url, filename: value.filename });\n        }}\n        title={value.downloadButtonName}\n      />\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          <TrainingInfoGuidelineButton\n            description=\"영상\"\n            icon={<VideoIcon />}\n            title={value.videoTitle}\n          />\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\ninterface TrainingInfoGuidelineButtonProps {\n  icon: React.ReactNode;\n  title: string;\n  description?: string;\n  onClick?: () => void;\n}\n\nfunction TrainingInfoGuidelineButton({\n  icon,\n  title,\n  description,\n  onClick,\n}: TrainingInfoGuidelineButtonProps): React.ReactElement {\n  return (\n    <Button\n      onClick={onClick}\n      style={{ width: '100%', height: '48px' }}\n      variant=\"outline\"\n    >\n      <Flex align=\"center\" gap=\"2\" width=\"100%\">\n        {icon}\n        <Separator orientation=\"vertical\" size=\"2\" />\n        <Flex direction=\"column\" gap=\"1\" justify=\"start\">\n          <Typo>{title}</Typo>\n          {typeof description === 'string' && description !== '' ? (\n            <Typo variant=\"caption\">{description}</Typo>\n          ) : null}\n        </Flex>\n      </Flex>\n    </Button>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-3LEW5RYJ.js

@@ -0,0 +1,163 @@
+import {
+  Separator
+} from "./chunk-HYITAA4J.js";
+import {
+  Spinner
+} from "./chunk-FR2GDOU2.js";
+import {
+  Dialog
+} from "./chunk-AH4A53SZ.js";
+import {
+  Typo
+} from "./chunk-PMJIFLDT.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__ */ jsx(
+      TrainingInfoGuidelineButton,
+      {
+        description: value.filename,
+        icon: /* @__PURE__ */ jsx(FileTextIcon, {}),
+        title: value.downloadButtonName,
+        onClick: () => {
+          onClickFileDownload({ url: value.url, filename: value.filename });
+        }
+      }
+    );
+  }
+  if (value.type === "video") {
+    return /* @__PURE__ */ jsxs(Dialog.Root, { children: [
+      /* @__PURE__ */ jsx(Dialog.Trigger, { children: /* @__PURE__ */ jsx(Button, { size: "large", style: { width: "100%" }, variant: "outline", children: /* @__PURE__ */ jsx(
+        TrainingInfoGuidelineButton,
+        {
+          description: "\uC601\uC0C1",
+          icon: /* @__PURE__ */ jsx(VideoIcon, {}),
+          title: value.videoTitle,
+          onClick: () => {
+            onClickFileDownload({ url: value.url, filename: value.filename });
+          }
+        }
+      ) }) }),
+      /* @__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;
+}
+function TrainingInfoGuidelineButton({
+  icon,
+  title,
+  description,
+  onClick
+}) {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      onClick,
+      style: { width: "100%" },
+      variant: "outline",
+      children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "2", width: "100%", children: [
+        icon,
+        /* @__PURE__ */ jsx(Separator, { orientation: "vertical", size: "2" }),
+        /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "1", children: [
+          /* @__PURE__ */ jsx(Typo, { children: title }),
+          typeof description === "string" && description !== "" ? /* @__PURE__ */ jsx(Typo, { variant: "caption", children: description }) : null
+        ] })
+      ] })
+    }
+  );
+}
+
+export {
+  TrainingInfoGuideline
+};
+//# sourceMappingURL=chunk-3LEW5RYJ.js.map

package/dist/chunk-3LEW5RYJ.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 { Separator, Typo } from '@/atoms';\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      <TrainingInfoGuidelineButton\n        description={value.filename}\n        icon={<FileTextIcon />}\n        title={value.downloadButtonName}\n        onClick={() => {\n          onClickFileDownload({ url: value.url, filename: value.filename });\n        }}\n      />\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 size=\"large\" style={{ width: '100%' }} variant=\"outline\">\n            <TrainingInfoGuidelineButton\n              description=\"영상\"\n              icon={<VideoIcon />}\n              title={value.videoTitle}\n              onClick={() => {\n                onClickFileDownload({ url: value.url, filename: value.filename });\n              }}\n            />\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\ninterface TrainingInfoGuidelineButtonProps {\n  icon: React.ReactNode;\n  title: string;\n  description?: string;\n  onClick: () => void;\n}\n\nfunction TrainingInfoGuidelineButton({\n  icon,\n  title,\n  description,\n  onClick\n}: TrainingInfoGuidelineButtonProps): React.ReactElement {\n  return (\n    <Button\n      onClick={onClick}\n      style={{ width: '100%' }}\n      variant=\"outline\"\n    >\n      <Flex align=\"center\" gap=\"2\" width=\"100%\">\n        {icon}\n        <Separator orientation=\"vertical\" size=\"2\" />\n        <Flex direction=\"column\" gap=\"1\">\n          <Typo>{title}</Typo>\n          {typeof description === 'string' && description !== '' ? (\n            <Typo variant=\"caption\">{description}</Typo>\n          ) : null}\n        </Flex>\n      </Flex>\n    </Button>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA,SAAgB,gBAAgB;AAChC,SAAS,cAAc,iBAAiB;AAmBpC,mBAEI,KAiEI,YAnER;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,aAAa,MAAM;AAAA,QACnB,MAAM,oBAAC,gBAAa;AAAA,QACpB,OAAO,MAAM;AAAA,QACb,SAAS,MAAM;AACb,8BAAoB,EAAE,KAAK,MAAM,KAAK,UAAU,MAAM,SAAS,CAAC;AAAA,QAClE;AAAA;AAAA,IACF;AAAA,EAEJ;AAGA,MAAI,MAAM,SAAS,SAAS;AAC1B,WACE,qBAAC,OAAO,MAAP,EACC;AAAA,0BAAC,OAAO,SAAP,EACC,8BAAC,UAAO,MAAK,SAAQ,OAAO,EAAE,OAAO,OAAO,GAAG,SAAQ,WACrD;AAAA,QAAC;AAAA;AAAA,UACC,aAAY;AAAA,UACZ,MAAM,oBAAC,aAAU;AAAA,UACjB,OAAO,MAAM;AAAA,UACb,SAAS,MAAM;AACb,gCAAoB,EAAE,KAAK,MAAM,KAAK,UAAU,MAAM,SAAS,CAAC;AAAA,UAClE;AAAA;AAAA,MACF,GACF,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;AASA,SAAS,4BAA4B;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAyD;AACvD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,OAAO,EAAE,OAAO,OAAO;AAAA,MACvB,SAAQ;AAAA,MAER,+BAAC,QAAK,OAAM,UAAS,KAAI,KAAI,OAAM,QAChC;AAAA;AAAA,QACD,oBAAC,aAAU,aAAY,YAAW,MAAK,KAAI;AAAA,QAC3C,qBAAC,QAAK,WAAU,UAAS,KAAI,KAC3B;AAAA,8BAAC,QAAM,iBAAM;AAAA,UACZ,OAAO,gBAAgB,YAAY,gBAAgB,KAClD,oBAAC,QAAK,SAAQ,WAAW,uBAAY,IACnC;AAAA,WACN;AAAA,SACF;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/chunk-3MCSM3WD.js

@@ -0,0 +1,163 @@
+import {
+  Separator
+} from "./chunk-HYITAA4J.js";
+import {
+  Spinner
+} from "./chunk-FR2GDOU2.js";
+import {
+  Dialog
+} from "./chunk-AH4A53SZ.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 {
+  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__ */ jsx(
+      TrainingInfoGuidelineButton,
+      {
+        description: value.filename,
+        icon: /* @__PURE__ */ jsx(FileTextIcon, {}),
+        onClick: () => {
+          onClickFileDownload({ url: value.url, filename: value.filename });
+        },
+        title: value.downloadButtonName
+      }
+    );
+  }
+  if (value.type === "video") {
+    return /* @__PURE__ */ jsxs(Dialog.Root, { children: [
+      /* @__PURE__ */ jsx(Dialog.Trigger, { children: /* @__PURE__ */ jsx(
+        TrainingInfoGuidelineButton,
+        {
+          description: "\uC601\uC0C1",
+          icon: /* @__PURE__ */ jsx(VideoIcon, {}),
+          title: 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;
+}
+function TrainingInfoGuidelineButton({
+  icon,
+  title,
+  description,
+  onClick
+}) {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      onClick,
+      style: { width: "100%", height: "48px", textAlign: "left" },
+      variant: "outline",
+      children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "2", width: "100%", children: [
+        icon,
+        /* @__PURE__ */ jsx(Separator, { orientation: "vertical", size: "2" }),
+        /* @__PURE__ */ jsxs(Box, { children: [
+          /* @__PURE__ */ jsx(Typo, { as: "div", children: title }),
+          typeof description === "string" && description !== "" ? /* @__PURE__ */ jsx(Typo, { variant: "caption", children: description }) : null
+        ] })
+      ] })
+    }
+  );
+}
+
+export {
+  TrainingInfoGuideline
+};
+//# sourceMappingURL=chunk-3MCSM3WD.js.map

package/dist/chunk-3MCSM3WD.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 { Box } from '@/atoms/box';\nimport { Separator } from '@/atoms/separator';\nimport { Typo } from '@/atoms/typo';\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      <TrainingInfoGuidelineButton\n        description={value.filename}\n        icon={<FileTextIcon />}\n        onClick={() => {\n          onClickFileDownload({ url: value.url, filename: value.filename });\n        }}\n        title={value.downloadButtonName}\n      />\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          <TrainingInfoGuidelineButton\n            description=\"영상\"\n            icon={<VideoIcon />}\n            title={value.videoTitle}\n          />\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\ninterface TrainingInfoGuidelineButtonProps {\n  icon: React.ReactNode;\n  title: string;\n  description?: string;\n  onClick?: () => void;\n}\n\nfunction TrainingInfoGuidelineButton({\n  icon,\n  title,\n  description,\n  onClick,\n}: TrainingInfoGuidelineButtonProps): React.ReactElement {\n  return (\n    <Button\n      onClick={onClick}\n      style={{ width: '100%', height: '48px' , textAlign: 'left'}}\n      variant=\"outline\"\n    >\n      <Flex align=\"center\" gap=\"2\" width=\"100%\">\n        {icon}\n        <Separator orientation=\"vertical\" size=\"2\" />\n        <Box>\n          <Typo as=\"div\">\n            {title}\n          </Typo>\n          {typeof description === 'string' && description !== '' ? (\n            <Typo variant=\"caption\" >\n              {description}\n            </Typo>\n          ) : null}\n        </Box>\n      </Flex>\n    </Button>\n  );\n}\n"],"mappings":"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","names":[]}