@tipp/ui 2.3.16 → 2.3.18

package/src/molecules/curriculumV2/CurriculumContents/curriculum-file-download.tsx

@@ -0,0 +1,84 @@
+import React, { useMemo } from 'react';
+import { Button } from '@/atoms/button';
+import { Flex } from '@/atoms/flex';
+import { Typo } from '@/atoms/typo';
+import type {
+  CurriculumFileDownloadContents,
+  CurriculumFileDownloadFile,
+} from '@/types/curriculumContents.type';
+import { useCurriculumContext } from '../curriculum-context';
+
+interface CurriculumFileDownloadProps {
+  item: CurriculumFileDownloadContents;
+}
+
+function CurriculumFileDownload(
+  props: CurriculumFileDownloadProps
+): React.ReactNode {
+  const { item } = props;
+  const { title, description, files } = item;
+  const { onClickfileDownload } = useCurriculumContext();
+
+  const isCallbackReady = useMemo((): boolean => {
+    return typeof onClickfileDownload === 'function';
+  }, [onClickfileDownload]);
+
+  const handleClickFile = (file: CurriculumFileDownloadFile): void => {
+    if (!onClickfileDownload) {
+      return;
+    }
+    onClickfileDownload(item, file);
+  };
+
+  return (
+    <Flex
+      align="center"
+      direction="column"
+      height="100%"
+      justify="center"
+      px="3"
+      py="3"
+      width="100%"
+    >
+      <Typo color="gray" weight="bold">
+        {title}
+      </Typo>
+      {description ? (
+        <Typo align="center" as="p" color="gray">
+          {description}
+        </Typo>
+      ) : null}
+
+      <Flex
+        direction="column"
+        gap="2"
+        mt="4"
+        style={{ width: '100%', maxWidth: 520 }}
+      >
+        {files.map((file) => {
+          return (
+            <Button
+              disabled={!isCallbackReady}
+              key={file.url}
+              onClick={() => {
+                handleClickFile(file);
+              }}
+              variant="outline"
+            >
+              <Typo truncate>{file.name}</Typo>
+            </Button>
+          );
+        })}
+      </Flex>
+
+      {!isCallbackReady ? (
+        <Typo align="center" color="gray" mt="3" variant="caption">
+          파일 다운로드 기능이 설정되지 않았습니다.
+        </Typo>
+      ) : null}
+    </Flex>
+  );
+}
+
+export default CurriculumFileDownload;
+

package/src/molecules/curriculumV2/CurriculumContents/index.tsx

@@ -6,6 +6,7 @@ import { useCurriculumContext } from '../curriculum-context';
 import CurriculumVideo from './curriculum-video';
 import CurriculumReview from './curriculum-review';
 import CurriculumAiTraning from './curriculum-ai-traning';
+import CurriculumFileDownload from './curriculum-file-download';
 
 export function CurriculumBody(): React.ReactNode {
   const { selectedItem, selectedSectionTitle } = useCurriculumContext();
@@ -20,8 +21,10 @@ export function CurriculumBody(): React.ReactNode {
           sectionTitle={selectedSectionTitle?.title}
         />
       );
-      case 'aiTraining':
-        return <CurriculumAiTraning item={selectedItem}/>
+    case 'aiTraining':
+      return <CurriculumAiTraning item={selectedItem} />;
+    case 'fileDownload':
+      return <CurriculumFileDownload item={selectedItem} />;
     default:
       return (
         <Flex

package/src/molecules/curriculumV2/curriculum-context.tsx

@@ -7,12 +7,42 @@ import React, {
   useRef,
   useEffect,
 } from 'react';
-import { type CurriculumSectionTitleContents } from '@/types/curriculumContents.type';
+import {
+  type CurriculumFileDownloadContents,
+  type CurriculumFileDownloadFile,
+  type CurriculumSectionTitleContents,
+} from '@/types/curriculumContents.type';
 import type {
   Curriculum,
   CurriculumListContents,
 } from '@/types/curriculum.type';
 
+const EMPTY_SELECTED_ITEM: CurriculumListContents = {
+  uuid: '',
+  type: 'sectionTitle',
+  title: '',
+};
+
+function getInitialSelectedIndex(args: {
+  initialSelectedIndex?: number;
+  selectableIndexes: number[];
+}): number {
+  const { initialSelectedIndex, selectableIndexes } = args;
+
+  if (
+    typeof initialSelectedIndex === 'number' &&
+    selectableIndexes.includes(initialSelectedIndex)
+  ) {
+    return initialSelectedIndex;
+  }
+
+  if (selectableIndexes.length > 0) {
+    return selectableIndexes[0];
+  }
+
+  return 0;
+}
+
 export interface CurriculumContextValue {
   curriculum: Curriculum;
   selectedIndex: number;
@@ -45,6 +75,11 @@ export interface CurriculumContextValue {
     reviewId: string;
     answer: Record<string, string>;
   }) => void;
+  /** 파일 다운로드 클릭 시 호출 */
+  onClickfileDownload?: (
+    item: CurriculumFileDownloadContents,
+    file: CurriculumFileDownloadFile
+  ) => void;
   /** 과제 완료 후 저장된 값 */
   curriculumReviewAnswers: Record<string, string>;
   /** 과제 완료 전 임시 저장된 값 */
@@ -74,6 +109,7 @@ export interface CurriculumProviderProps
     | 'curriculum'
     | 'onReviewSubmit'
     | 'onReviewValueChange'
+    | 'onClickfileDownload'
     | 'curriculumReviewAnswers'
     | 'tempCurriculumReviewAnswers'
     | 'curriculumCompleteMap'
@@ -101,6 +137,7 @@ export function CurriculumProvider(
     curriculum,
     onReviewSubmit,
     onReviewValueChange,
+    onClickfileDownload,
     curriculumReviewAnswers,
     tempCurriculumReviewAnswers,
     curriculumCompleteMap,
@@ -131,9 +168,23 @@ export function CurriculumProvider(
   );
   // 최초 선택값: 첫 번째 선택 가능한 인덱스
   const [selectedIndexState, setSelectedIndexState] = useState<number>(
-    initialSelectedIndex ?? selectableIndexes[0]
+    getInitialSelectedIndex({ initialSelectedIndex, selectableIndexes })
   );
 
+  // 리스트/선택 가능 인덱스가 변할 때 선택값을 자동 보정
+  useEffect(() => {
+    if (selectableIndexes.length === 0) {
+      if (selectedIndexState !== 0) {
+        setSelectedIndexState(0);
+      }
+      return;
+    }
+
+    if (!selectableIndexes.includes(selectedIndexState)) {
+      setSelectedIndexState(selectableIndexes[0]);
+    }
+  }, [selectableIndexes, selectedIndexState]);
+
   // 선택 인덱스 보정 함수
   const setSelectedIndex = useCallback(
     (idx: number) => {
@@ -188,12 +239,20 @@ export function CurriculumProvider(
   );
 
   const selectedId = useMemo(
-    () => list[selectedIndexState]?.uuid ?? '',
+    () => {
+      if (selectedIndexState < 0 || selectedIndexState >= list.length) {
+        return '';
+      }
+      return list[selectedIndexState]?.uuid ?? '';
+    },
     [list, selectedIndexState]
   );
 
   const selectedItem = useMemo(() => {
-    return list[selectedIndexState];
+    if (selectedIndexState < 0 || selectedIndexState >= list.length) {
+      return EMPTY_SELECTED_ITEM;
+    }
+    return list[selectedIndexState] ?? EMPTY_SELECTED_ITEM;
   }, [list, selectedIndexState]);
 
   const selectedSectionTitle = useMemo(() => {
@@ -203,9 +262,16 @@ export function CurriculumProvider(
   }, [list, selectedIndexState]);
 
   useEffect(() => {
-    onChangeSelectedContent?.(selectedItem);
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- 트리거 최소화
-  }, [selectedItem]);
+    const inBounds: boolean =
+      selectedIndexState >= 0 && selectedIndexState < list.length;
+    if (!inBounds) return;
+
+    const item: CurriculumListContents = list[selectedIndexState];
+    if (!item) return;
+    if (item.type === 'sectionTitle') return;
+
+    onChangeSelectedContent?.(item);
+  }, [list, onChangeSelectedContent, selectedIndexState]);
 
   return (
     <CurriculumContext.Provider
@@ -224,6 +290,7 @@ export function CurriculumProvider(
         scrollAreaRef: sidebarRef,
         onReviewSubmit,
         onReviewValueChange,
+        onClickfileDownload,
         curriculumReviewAnswers,
         tempCurriculumReviewAnswers,
         curriculumCompleteMap,

package/src/molecules/index.ts

@@ -16,4 +16,5 @@ export * from './dynamic-form';
 export * from './dynamic-field';
 export * from './dynamic-form-response-item';
 export * from './one-on-one-guide-list';
-export * from './description-json-render';
+export * from './description-json-render';
+export * from './training-info-guideline';

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

@@ -0,0 +1,130 @@
+import React, { useState } from 'react';
+import { FileTextIcon, VideoIcon } from '@radix-ui/react-icons';
+import { AspectRatio } from '@/atoms/aspect-ratio';
+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 { Flex } from '../atoms/flex';
+
+export interface TrainingInfoGuidelineProps {
+  values: TrainingInfoGuidelineContents['values'];
+  onClickFileDownload: (args: { url: string; filename: string }) => void;
+}
+
+export function TrainingInfoGuideline({
+  values,
+  onClickFileDownload,
+}: TrainingInfoGuidelineProps): React.ReactElement {
+  return (
+    <>
+      {values.map((value) => (
+        <TrainingInfoGuidelineItem
+          key={getItemKey(value)}
+          onClickFileDownload={onClickFileDownload}
+          value={value}
+        />
+      ))}
+    </>
+  );
+}
+
+type TrainingInfoGuidelineValue =
+  TrainingInfoGuidelineContents['values'][number];
+
+function getItemKey(value: TrainingInfoGuidelineValue): string {
+  return value.url;
+}
+
+interface TrainingInfoGuidelineItemProps {
+  value: TrainingInfoGuidelineValue;
+  onClickFileDownload: TrainingInfoGuidelineProps['onClickFileDownload'];
+}
+
+function TrainingInfoGuidelineItem({
+  value,
+  onClickFileDownload,
+}: TrainingInfoGuidelineItemProps): React.ReactElement | null {
+  const [isLoading, setIsLoading] = useState(true);
+
+  if (value.type === 'file') {
+    return (
+      <Button
+        onClick={() => {
+          onClickFileDownload({ url: value.url, filename: value.filename });
+        }}
+        variant="surface"
+      >
+        <FileTextIcon />
+        {value.downloadButtonName}
+      </Button>
+    );
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- 차후 다른 타입 추가 시 사용
+  if (value.type === 'video') {
+    return (
+      <Dialog.Root>
+        <Dialog.Trigger>
+          <Button variant="surface">
+            <VideoIcon />
+            {value.videoTitle}
+          </Button>
+        </Dialog.Trigger>
+        <Dialog.Content
+          height="100%"
+          maxHeight="500px"
+          maxWidth="800px"
+          title={value.videoTitle}
+          width="100%"
+        >
+          <AspectRatio ratio={16 / 9} style={{ width: '100%' }}>
+            <Flex
+              align="center"
+              justify="center"
+              style={{
+                width: '100%',
+                height: '100%',
+                backgroundColor: 'black',
+                position: 'relative',
+              }}
+            >
+              {isLoading ? (
+                <Flex
+                  align="center"
+                  height="100%"
+                  justify="center"
+                  position="absolute"
+                  style={{
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    zIndex: 1,
+                    color: 'white',
+                  }}
+                  width="100%"
+                >
+                  <Spinner size="3" style={{ width: 48, height: 48 }} />
+                </Flex>
+              ) : null}
+
+              <iframe
+                allowFullScreen
+                onError={() => {
+                  setIsLoading(false);
+                }} // 필요시 에러 메시지로 대체
+                onLoad={() => {
+                  setIsLoading(false);
+                }}
+                src={`${value.url}?theme=light`}
+                style={{ width: '100%', height: '100%', border: 'none' }}
+                title="Curriculum Video"
+              />
+            </Flex>
+          </AspectRatio>
+        </Dialog.Content>
+      </Dialog.Root>
+    );
+  }
+  return null;
+}

package/src/types/curriculumContents.type.ts

@@ -82,6 +82,13 @@ export type CurriculumAiTrainingContents = ContentBaseType & {
   buttonTitle?: string;
   [k: string]: unknown;
 };
+export type CurriculumFileDownloadContents = ContentBaseType & {
+  type?: "fileDownload";
+  title: string;
+  description?: string;
+  files: CurriculumFileDownloadFile[];
+  [k: string]: unknown;
+};
 
 export interface CurriculumContents {
   version: number;
@@ -90,6 +97,7 @@ export interface CurriculumContents {
     | CurriculumVideoContents
     | CurriculumReviewContents
     | CurriculumAiTrainingContents
+    | CurriculumFileDownloadContents
   )[];
   satisfactionOptionMeta?: SatisfactionOptionMeta;
   satisfactionTextMeta?: SatisfactionTextMeta;
@@ -113,6 +121,10 @@ export interface QuestionBaseType {
   icon?: string;
   [k: string]: unknown;
 }
+export interface CurriculumFileDownloadFile {
+  name: string;
+  url: string;
+}
 export interface SatisfactionOptionMeta {
   options?: {
     label?: string;
@@ -134,3 +146,4 @@ export interface SatisfactionTextMeta {
   icon?: string;
   [k: string]: unknown;
 }
+

package/src/types/dynamic-form-schema-generated.ts

@@ -101,3 +101,4 @@ export interface OrientationFieldCommon {
   orientation?: "horizontal" | "vertical";
   [k: string]: unknown;
 }
+

package/src/types/index.ts

@@ -1,3 +1,4 @@
 export * from './curriculumContents.type';
 export * from './curriculum.type';
 export * from './dynamic-form-schema-generated';
+export * from './training-info-guideline-schema-generated';

package/src/types/training-info-guideline-schema-generated.ts

@@ -0,0 +1,23 @@
+/* eslint-disable */
+/**
+ * This file was automatically generated by json-schema-to-typescript.
+ * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
+ * and run json-schema-to-typescript to regenerate this file.
+ */
+
+export interface TrainingInfoGuidelineContents {
+  version: 2;
+  values: (TrainingInfoGuidelineFileValue | TrainingInfoGuidelineVideoValue)[];
+}
+export interface TrainingInfoGuidelineFileValue {
+  type: "file";
+  url: string;
+  downloadButtonName: string;
+  filename: string;
+}
+export interface TrainingInfoGuidelineVideoValue {
+  type: "video";
+  url: string;
+  videoTitle: string;
+}
+

package/src/utils/curriculum.utils.ts

@@ -1,11 +1,12 @@
 import { 
   CircleChatIcon,
   CircleCheckIcon,
+  CircleFileIcon,
   CirclePencilIcon,
   CirclePlayIcon,
   CircleQuoteIcon,
-  CircleSatisfactionIcon
-} from '@/icon';
+  CircleSatisfactionIcon,
+  } from '@/icon';
 
 export const CurriculumListIcons = {
   pencil: CirclePencilIcon,
@@ -13,6 +14,7 @@ export const CurriculumListIcons = {
   quote: CircleQuoteIcon,
   check: CircleCheckIcon,
   star: CircleSatisfactionIcon,
+  file: CircleFileIcon,
 };
 
 export const getCurriculumIcon = ({
@@ -37,7 +39,9 @@ export const getCurriculumIcon = ({
     case 'question_satisfaction_text':
       return CircleSatisfactionIcon;
     case 'aiTraining':
-      return CircleChatIcon;
+      return CircleChatIcon; 
+    case 'fileDownload':
+      return CircleFileIcon;
     case 'review':
     default:
       return CirclePencilIcon;
@@ -89,7 +93,9 @@ export const getCurriculumContentSubTypeText = (type: string): string => {
     case 'review':
       return '리뷰';
     case 'aiTraining':
-      return 'AI 트레이닝';
+      return 'AI 롤플레이';
+    case 'fileDownload':
+      return '자료 다운로드';
     default:
       return '';
   }