@tipp/ui 2.3.39 → 2.3.41

package/dist/app/platform/session-card.js

@@ -39,7 +39,6 @@ import "../../chunk-K3Q4XLCN.js";
 import "../../chunk-Q7KT3UPO.js";
 import "../../chunk-OE2AVQED.js";
 import "../../chunk-2ISIAPFS.js";
-import "../../chunk-JRT6KTBG.js";
 import "../../chunk-LE6CNJWH.js";
 import "../../chunk-CSKNBWPB.js";
 import "../../chunk-QNJ2H7J4.js";
@@ -50,26 +49,27 @@ import "../../chunk-NWJSLIQ3.js";
 import "../../chunk-BXX3B3E4.js";
 import "../../chunk-NRPDVI76.js";
 import "../../chunk-2BPFXK4L.js";
-import "../../chunk-MLAQDU6U.js";
-import "../../chunk-YC5XSFKC.js";
+import "../../chunk-XLKJYRFY.js";
+import "../../chunk-OYJ7HJIE.js";
 import "../../chunk-77H5BUYO.js";
 import "../../chunk-K7LTEKQS.js";
 import "../../chunk-EWFZXCMV.js";
 import "../../chunk-5JQOU3IR.js";
 import "../../chunk-SACH3XVV.js";
 import "../../chunk-7FKRQQYK.js";
-import "../../chunk-HYMODLGE.js";
-import "../../chunk-ADAQSPUA.js";
+import "../../chunk-JRT6KTBG.js";
 import "../../chunk-IJOOKMKQ.js";
 import "../../chunk-OHNBVT52.js";
 import "../../chunk-2REWQIZJ.js";
 import "../../chunk-6UXCNYVO.js";
-import "../../chunk-Z7WNKARH.js";
 import "../../chunk-MIATMZDP.js";
 import "../../chunk-JRSZNGFD.js";
 import "../../chunk-KCAOUZCT.js";
 import "../../chunk-MPZJH3PI.js";
+import "../../chunk-Z7WNKARH.js";
 import "../../chunk-LSDD4TAP.js";
+import "../../chunk-HYMODLGE.js";
+import "../../chunk-ADAQSPUA.js";
 import "../../chunk-4U6DFH7Z.js";
 import "../../chunk-HBF6IIVZ.js";
 import "../../chunk-QDC3LFHS.js";

package/dist/{chunk-YC5XSFKC.js → chunk-OYJ7HJIE.js}

@@ -4,6 +4,12 @@ import {
 import {
   DynamicFormEditorFieldListPanel
 } from "./chunk-6UXCNYVO.js";
+import {
+  DynamicFormEditorIssuesPanel
+} from "./chunk-MIATMZDP.js";
+import {
+  DynamicFormEditorPreviewPanel
+} from "./chunk-JRSZNGFD.js";
 import {
   createDefaultField,
   createUniqueFieldName,
@@ -16,12 +22,6 @@ import {
   updateSchemaFields,
   validateDynamicFormSchema
 } from "./chunk-Z7WNKARH.js";
-import {
-  DynamicFormEditorIssuesPanel
-} from "./chunk-MIATMZDP.js";
-import {
-  DynamicFormEditorPreviewPanel
-} from "./chunk-JRSZNGFD.js";
 import {
   Flex
 } from "./chunk-25HMMI7R.js";
@@ -227,4 +227,4 @@ function DynamicFormEditor(props) {
 export {
   DynamicFormEditor
 };
-//# sourceMappingURL=chunk-YC5XSFKC.js.map
+//# sourceMappingURL=chunk-OYJ7HJIE.js.map

package/dist/{chunk-BXRTYDSY.js → chunk-VY4J3FLW.js}

@@ -54,25 +54,25 @@ var ContentsCard = forwardRef(
           height: "100%",
           width: "100%",
           display: "grid",
-          cursor: "pointer",
-          maxHeight: "450px"
+          cursor: "pointer"
         },
         children: [
           /* @__PURE__ */ jsx(Inset, { clip: "padding-box", pb: "0", side: "top", children: /* @__PURE__ */ jsx(Skeleton, { loading: isLoading, children: /* @__PURE__ */ jsx(
             Box,
             {
-              height: "210px",
               style: {
+                aspectRatio: "704 / 407",
                 backgroundImage: `url(${imageSrc})`,
                 backgroundSize: "cover",
-                backgroundPosition: "center"
+                backgroundPosition: "center",
+                backgroundRepeat: "no-repeat"
               },
               width: "100%"
             }
           ) }) }),
-          /* @__PURE__ */ jsxs(Flex, { direction: "column", p: "4", pb: "3", children: [
+          /* @__PURE__ */ jsxs(Flex, { direction: "column", pb: "4", px: "3", py: "4", children: [
             /* @__PURE__ */ jsxs(Box, { children: [
-              /* @__PURE__ */ jsx(Skeleton, { loading: isLoading, children: /* @__PURE__ */ jsx(Heading, { mb: "3", variant: "heading5", children: title }) }),
+              /* @__PURE__ */ jsx(Skeleton, { loading: isLoading, children: /* @__PURE__ */ jsx(Heading, { variant: "heading5", children: title }) }),
               /* @__PURE__ */ jsx(Skeleton, { loading: isLoading, children: /* @__PURE__ */ jsx(Typo, { as: "p", variant: "caption", children: description }) })
             ] }),
             /* @__PURE__ */ jsxs(
@@ -81,7 +81,7 @@ var ContentsCard = forwardRef(
                 align: "center",
                 columns: "1fr auto",
                 justify: "between",
-                pt: "2",
+                pt: "4",
                 style: { marginTop: "auto" },
                 width: "100%",
                 children: [
@@ -114,4 +114,4 @@ ContentsCard.displayName = "ContentsCard";
 export {
   ContentsCard
 };
-//# sourceMappingURL=chunk-BXRTYDSY.js.map
+//# sourceMappingURL=chunk-VY4J3FLW.js.map

package/dist/chunk-VY4J3FLW.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/app/platform/contents-card.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { Heading } from '@/atoms/heading';\nimport { Button } from '@/atoms/button';\nimport { DropdownMenu } from '@/atoms/dropdown-menu';\nimport { Box } from '@/atoms/box';\nimport { Flex } from '@/atoms/flex';\nimport { Grid } from '@/atoms/grid';\nimport { Skeleton } from '@/atoms/skeleton';\nimport { Typo } from '@/atoms/typo';\nimport { DotsVerticalIcon } from '@/icon';\nimport { Card, Inset } from '@/atoms';\n\nexport interface ContentsCardProps {\n  title?: React.ReactNode;\n  description?: string;\n  id?: string;\n  imageSrc?: string | null;\n  imageAlt?: string;\n  footer?: React.ReactNode;\n  dropdownItems?: {\n    label: string;\n    onClick: () => void;\n  }[];\n  onClickCard?: () => void;\n  isLoading?: boolean;\n}\n\nexport const ContentsCard = forwardRef<HTMLDivElement, ContentsCardProps>(\n  (\n    {\n      title,\n      description,\n      imageSrc,\n      footer,\n      dropdownItems,\n      onClickCard,\n      isLoading = false,\n    },\n    ref\n  ): React.ReactNode => {\n    return (\n      <Card\n        onClick={onClickCard}\n        ref={ref}\n        style={{\n          height: '100%',\n          width: '100%',\n          display: 'grid',\n          cursor: 'pointer',\n        }}\n      >\n        {/* 섬네일 */}\n        <Inset clip=\"padding-box\" pb=\"0\" side=\"top\">\n          <Skeleton loading={isLoading}>\n            <Box\n              style={{\n                aspectRatio: '704 / 407',\n                backgroundImage: `url(${imageSrc})`,\n                backgroundSize: 'cover',\n                backgroundPosition: 'center',\n                backgroundRepeat: 'no-repeat',\n              }}\n              width=\"100%\"\n            />\n          </Skeleton>\n        </Inset>\n        {/* 제목, 설명 */}\n        <Flex direction=\"column\" pb=\"4\" px=\"3\" py=\"4\">\n          <Box>\n            <Skeleton loading={isLoading}>\n              <Heading variant=\"heading5\">\n                {title}\n              </Heading>\n            </Skeleton>\n            <Skeleton loading={isLoading}>\n              <Typo as=\"p\" variant=\"caption\">\n                {description}\n              </Typo>\n            </Skeleton>\n          </Box>\n          <Grid\n            align=\"center\"\n            columns=\"1fr auto\"\n            justify=\"between\"\n            pt=\"4\"\n            style={{ marginTop: 'auto' }}\n            width=\"100%\"\n          >\n            <Skeleton loading={isLoading}>\n              <Flex gap=\"3\" overflow=\"hidden\">\n                {footer}\n              </Flex>\n            </Skeleton>\n            {Boolean(dropdownItems?.length) && (\n              <DropdownMenu.Root>\n                <DropdownMenu.Trigger>\n                  <Button size=\"large\" variant=\"transparent\">\n                    <DotsVerticalIcon color=\"gray\" height=\"20px\" width=\"20px\" />\n                  </Button>\n                </DropdownMenu.Trigger>\n                <DropdownMenu.Content>\n                  {dropdownItems?.map((item) => (\n                    <DropdownMenu.Item\n                      key={item.label}\n                      onClick={(e) => {\n                        e.stopPropagation();\n                        item.onClick();\n                      }}\n                    >\n                      {item.label}\n                    </DropdownMenu.Item>\n                  ))}\n                </DropdownMenu.Content>\n              </DropdownMenu.Root>\n            )}\n          </Grid>\n        </Flex>\n      </Card>\n    );\n  }\n);\nContentsCard.displayName = 'ContentsCard';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,SAAgB,kBAAkB;AAsDtB,cAcF,YAdE;AA3BL,IAAM,eAAe;AAAA,EAC1B,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,EACd,GACA,QACoB;AACpB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT;AAAA,QACA,OAAO;AAAA,UACL,QAAQ;AAAA,UACR,OAAO;AAAA,UACP,SAAS;AAAA,UACT,QAAQ;AAAA,QACV;AAAA,QAGA;AAAA,8BAAC,SAAM,MAAK,eAAc,IAAG,KAAI,MAAK,OACpC,8BAAC,YAAS,SAAS,WACjB;AAAA,YAAC;AAAA;AAAA,cACC,OAAO;AAAA,gBACL,aAAa;AAAA,gBACb,iBAAiB,OAAO,QAAQ;AAAA,gBAChC,gBAAgB;AAAA,gBAChB,oBAAoB;AAAA,gBACpB,kBAAkB;AAAA,cACpB;AAAA,cACA,OAAM;AAAA;AAAA,UACR,GACF,GACF;AAAA,UAEA,qBAAC,QAAK,WAAU,UAAS,IAAG,KAAI,IAAG,KAAI,IAAG,KACxC;AAAA,iCAAC,OACC;AAAA,kCAAC,YAAS,SAAS,WACjB,8BAAC,WAAQ,SAAQ,YACd,iBACH,GACF;AAAA,cACA,oBAAC,YAAS,SAAS,WACjB,8BAAC,QAAK,IAAG,KAAI,SAAQ,WAClB,uBACH,GACF;AAAA,eACF;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,OAAM;AAAA,gBACN,SAAQ;AAAA,gBACR,SAAQ;AAAA,gBACR,IAAG;AAAA,gBACH,OAAO,EAAE,WAAW,OAAO;AAAA,gBAC3B,OAAM;AAAA,gBAEN;AAAA,sCAAC,YAAS,SAAS,WACjB,8BAAC,QAAK,KAAI,KAAI,UAAS,UACpB,kBACH,GACF;AAAA,kBACC,QAAQ,+CAAe,MAAM,KAC5B,qBAAC,aAAa,MAAb,EACC;AAAA,wCAAC,aAAa,SAAb,EACC,8BAAC,UAAO,MAAK,SAAQ,SAAQ,eAC3B,8BAAC,oBAAiB,OAAM,QAAO,QAAO,QAAO,OAAM,QAAO,GAC5D,GACF;AAAA,oBACA,oBAAC,aAAa,SAAb,EACE,yDAAe,IAAI,CAAC,SACnB;AAAA,sBAAC,aAAa;AAAA,sBAAb;AAAA,wBAEC,SAAS,CAAC,MAAM;AACd,4BAAE,gBAAgB;AAClB,+BAAK,QAAQ;AAAA,wBACf;AAAA,wBAEC,eAAK;AAAA;AAAA,sBAND,KAAK;AAAA,oBAOZ,IAEJ;AAAA,qBACF;AAAA;AAAA;AAAA,YAEJ;AAAA,aACF;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AACA,aAAa,cAAc;","names":[]}

package/dist/{chunk-MLAQDU6U.js → chunk-XLKJYRFY.js}

@@ -156,14 +156,44 @@ function TrainingInfoGuidelineButton({
     Button,
     {
       onClick,
-      style: { width: "100%", height: "48px", textAlign: "left" },
+      style: {
+        width: "100%",
+        height: "auto",
+        minHeight: "48px",
+        textAlign: "left",
+        paddingTop: 8,
+        paddingBottom: 8
+      },
       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
+        /* @__PURE__ */ jsx(Flex, { align: "center", flexShrink: "0", children: icon }),
+        /* @__PURE__ */ jsx(Separator, { orientation: "vertical", size: "2", style: { flexShrink: 0 } }),
+        /* @__PURE__ */ jsxs(Box, { flexGrow: "1", style: { minWidth: 0 }, children: [
+          /* @__PURE__ */ jsx(
+            Typo,
+            {
+              as: "div",
+              style: {
+                whiteSpace: "normal",
+                wordBreak: "break-word",
+                overflowWrap: "anywhere"
+              },
+              children: title
+            }
+          ),
+          typeof description === "string" && description !== "" ? /* @__PURE__ */ jsx(
+            Typo,
+            {
+              style: {
+                display: "block",
+                whiteSpace: "normal",
+                wordBreak: "break-word",
+                overflowWrap: "anywhere"
+              },
+              variant: "caption",
+              children: description
+            }
+          ) : null
         ] })
       ] })
     }
@@ -173,4 +203,4 @@ function TrainingInfoGuidelineButton({
 export {
   TrainingInfoGuideline
 };
-//# sourceMappingURL=chunk-MLAQDU6U.js.map
+//# sourceMappingURL=chunk-XLKJYRFY.js.map

package/dist/{chunk-MLAQDU6U.js.map → chunk-XLKJYRFY.js.map}

@@ -1 +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=\"파일 다운로드\"\n        icon={<FileTextIcon />}\n        onClick={() => {\n          onClickFileDownload({ url: value.url, filename: value.filename });\n        }}\n        title={value.downloadButtonName}\n      />\n    );\n  }\n\n  if (value.type === 'youtube-shorts') {\n    return (\n      <TrainingInfoGuidelineButton\n        description=\"TIPP 쇼츠 보기\"\n        icon={<VideoIcon />}\n        onClick={() => {\n          window.open(value.url, '_blank');\n        }}\n        title={value.title}\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        \n      </Flex>\n    </Button>\n  );\n}\n"],"mappings":"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","names":[]}
+{"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=\"파일 다운로드\"\n        icon={<FileTextIcon />}\n        onClick={() => {\n          onClickFileDownload({ url: value.url, filename: value.filename });\n        }}\n        title={value.downloadButtonName}\n      />\n    );\n  }\n\n  if (value.type === 'youtube-shorts') {\n    return (\n      <TrainingInfoGuidelineButton\n        description=\"TIPP 쇼츠 보기\"\n        icon={<VideoIcon />}\n        onClick={() => {\n          window.open(value.url, '_blank');\n        }}\n        title={value.title}\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={{\n        width: '100%',\n        height: 'auto',\n        minHeight: '48px',\n        textAlign: 'left',\n        paddingTop: 8,\n        paddingBottom: 8,\n      }}\n      variant=\"outline\"\n    >\n      <Flex align=\"center\" gap=\"2\" width=\"100%\">\n        <Flex align=\"center\" flexShrink=\"0\">{icon}</Flex>\n        <Separator orientation=\"vertical\" size=\"2\" style={{ flexShrink: 0 }} />\n        <Box flexGrow=\"1\" style={{ minWidth: 0 }}>\n          <Typo\n            as=\"div\"\n            style={{\n              whiteSpace: 'normal',\n              wordBreak: 'break-word',\n              overflowWrap: 'anywhere',\n            }}\n          >\n            {title}\n          </Typo>\n          {typeof description === 'string' && description !== '' ? (\n            <Typo\n              style={{\n                display: 'block',\n                whiteSpace: 'normal',\n                wordBreak: 'break-word',\n                overflowWrap: 'anywhere',\n              }}\n              variant=\"caption\"\n            >\n              {description}\n            </Typo>\n          ) : null}\n        </Box>\n      </Flex>\n    </Button>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/index.cjs

@@ -6527,14 +6527,44 @@ function TrainingInfoGuidelineButton({
     Button,
     {
       onClick,
-      style: { width: "100%", height: "48px", textAlign: "left" },
+      style: {
+        width: "100%",
+        height: "auto",
+        minHeight: "48px",
+        textAlign: "left",
+        paddingTop: 8,
+        paddingBottom: 8
+      },
       variant: "outline",
       children: /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)(import_themes22.Flex, { align: "center", gap: "2", width: "100%", children: [
-        icon,
-        /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(import_themes39.Separator, { orientation: "vertical", size: "2" }),
-        /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)(import_themes6.Box, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(Typo, { as: "div", children: title }),
-          typeof description === "string" && description !== "" ? /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(Typo, { variant: "caption", children: description }) : null
+        /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(import_themes22.Flex, { align: "center", flexShrink: "0", children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(import_themes39.Separator, { orientation: "vertical", size: "2", style: { flexShrink: 0 } }),
+        /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)(import_themes6.Box, { flexGrow: "1", style: { minWidth: 0 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
+            Typo,
+            {
+              as: "div",
+              style: {
+                whiteSpace: "normal",
+                wordBreak: "break-word",
+                overflowWrap: "anywhere"
+              },
+              children: title
+            }
+          ),
+          typeof description === "string" && description !== "" ? /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
+            Typo,
+            {
+              style: {
+                display: "block",
+                whiteSpace: "normal",
+                wordBreak: "break-word",
+                overflowWrap: "anywhere"
+              },
+              variant: "caption",
+              children: description
+            }
+          ) : null
         ] })
       ] })
     }
@@ -9281,25 +9311,25 @@ var ContentsCard = (0, import_react59.forwardRef)(
           height: "100%",
           width: "100%",
           display: "grid",
-          cursor: "pointer",
-          maxHeight: "450px"
+          cursor: "pointer"
         },
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(import_themes25.Inset, { clip: "padding-box", pb: "0", side: "top", children: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(import_themes40.Skeleton, { loading: isLoading, children: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
             import_themes6.Box,
             {
-              height: "210px",
               style: {
+                aspectRatio: "704 / 407",
                 backgroundImage: `url(${imageSrc})`,
                 backgroundSize: "cover",
-                backgroundPosition: "center"
+                backgroundPosition: "center",
+                backgroundRepeat: "no-repeat"
               },
               width: "100%"
             }
           ) }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)(import_themes22.Flex, { direction: "column", p: "4", pb: "3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)(import_themes22.Flex, { direction: "column", pb: "4", px: "3", py: "4", children: [
             /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)(import_themes6.Box, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(import_themes40.Skeleton, { loading: isLoading, children: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(Heading2, { mb: "3", variant: "heading5", children: title }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(import_themes40.Skeleton, { loading: isLoading, children: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(Heading2, { variant: "heading5", children: title }) }),
               /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(import_themes40.Skeleton, { loading: isLoading, children: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(Typo, { as: "p", variant: "caption", children: description }) })
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)(
@@ -9308,7 +9338,7 @@ var ContentsCard = (0, import_react59.forwardRef)(
                 align: "center",
                 columns: "1fr auto",
                 justify: "between",
-                pt: "2",
+                pt: "4",
                 style: { marginTop: "auto" },
                 width: "100%",
                 children: [