@tipp/ui 2.3.18 → 2.3.20

package/dist/molecules/training-info-guideline.js

@@ -1,17 +1,20 @@
 import {
   TrainingInfoGuideline
-} from "../chunk-IF4Q5NV4.js";
+} from "../chunk-DGOKT7ZK.js";
+import "../chunk-HYITAA4J.js";
 import "../chunk-FR2GDOU2.js";
-import "../chunk-JQ7VQ5SB.js";
+import "../chunk-AH4A53SZ.js";
+import "../chunk-BESTU2AY.js";
 import "../chunk-U7N2PWMO.js";
 import "../chunk-XK6VEVOK.js";
 import "../chunk-HF6GNDPV.js";
+import "../chunk-4Y5BEXVN.js";
+import "../chunk-PMJIFLDT.js";
+import "../chunk-LDBWASUA.js";
 import "../chunk-25HMMI7R.js";
 import "../chunk-ZVDAEY5Q.js";
 import "../chunk-LQY4RKWI.js";
 import "../chunk-EAXUQEO5.js";
-import "../chunk-BESTU2AY.js";
-import "../chunk-LDBWASUA.js";
 import "../chunk-CRTRMMJ7.js";
 export {
   TrainingInfoGuideline

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tipp/ui",
-  "version": "2.3.18",
+  "version": "2.3.20",
   "private": false,
   "type": "module",
   "exports": {

package/src/molecules/training-info-guideline.tsx

@@ -5,6 +5,9 @@ import { Button } from '@/atoms/button';
 import type { TrainingInfoGuidelineContents } from '@/types/training-info-guideline-schema-generated';
 import { Dialog } from '@/atoms/dialog';
 import { Spinner } from '@/atoms/spinner';
+import { Box } from '@/atoms/box';
+import { Separator } from '@/atoms/separator';
+import { Typo } from '@/atoms/typo';
 import { Flex } from '../atoms/flex';
 
 export interface TrainingInfoGuidelineProps {
@@ -49,15 +52,14 @@ function TrainingInfoGuidelineItem({
 
   if (value.type === 'file') {
     return (
-      <Button
+      <TrainingInfoGuidelineButton
+        description="파일 다운로드"
+        icon={<FileTextIcon />}
         onClick={() => {
           onClickFileDownload({ url: value.url, filename: value.filename });
         }}
-        variant="surface"
-      >
-        <FileTextIcon />
-        {value.downloadButtonName}
-      </Button>
+        title={value.downloadButtonName}
+      />
     );
   }
 
@@ -66,10 +68,11 @@ function TrainingInfoGuidelineItem({
     return (
       <Dialog.Root>
         <Dialog.Trigger>
-          <Button variant="surface">
-            <VideoIcon />
-            {value.videoTitle}
-          </Button>
+          <TrainingInfoGuidelineButton
+            description="영상 자료"
+            icon={<VideoIcon />}
+            title={value.videoTitle}
+          />
         </Dialog.Trigger>
         <Dialog.Content
           height="100%"
@@ -128,3 +131,41 @@ function TrainingInfoGuidelineItem({
   }
   return null;
 }
+
+interface TrainingInfoGuidelineButtonProps {
+  icon: React.ReactNode;
+  title: string;
+  description?: string;
+  onClick?: () => void;
+}
+
+function TrainingInfoGuidelineButton({
+  icon,
+  title,
+  description,
+  onClick,
+}: TrainingInfoGuidelineButtonProps): React.ReactElement {
+  return (
+    <Button
+      onClick={onClick}
+      style={{ width: '100%', height: '48px' , textAlign: 'left'}}
+      variant="outline"
+    >
+      <Flex align="center" gap="2" width="100%">
+        {icon}
+        <Separator orientation="vertical" size="2" />
+        <Box>
+          <Typo as="div">
+            {title}
+          </Typo>
+          {typeof description === 'string' && description !== '' ? (
+            <Typo variant="caption" >
+              {description}
+            </Typo>
+          ) : null}
+        </Box>
+        
+      </Flex>
+    </Button>
+  );
+}