@tipp/ui 2.3.15 → 2.3.17

package/src/icons/index.ts

@@ -10,4 +10,5 @@ export * from './circle-pencil';
 export * from './circle-check';
 export * from './circle-satisfaction';
 export * from './circle-quote';
-export * from './circle-chat';
+export * from './circle-chat';
+export * from './circle-file';

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/dynamic-field.tsx

@@ -1,4 +1,6 @@
 
+import { Flex } from '@/atoms/flex';
+import { Typo } from '@/atoms/typo';
 import { useDynamicForm } from '../context/dynamic-form-context';
 import { TextField } from '../atoms/text-field';
 import { TextArea } from '../atoms/text-area';
@@ -61,16 +63,16 @@ export function DynamicFormField({
         />
       );
     case 'long_text':
-      return <TextArea {...commonProps} placeholder={field.placeholder} rows={4} />;
+      return <TextArea rows={4} {...commonProps} placeholder={field.placeholder}  />;
 
     case 'dropdown':
       return (
         <Select.Root
+          disabled={readonly}
           onValueChange={readonly ? undefined : (newValue: string) => {
             void setFieldValue(name, newValue);
           }}
           value={value as string}
-          disabled={readonly}
         >
           <Select.Trigger placeholder={field.placeholder} />
           <Select.Content>
@@ -86,12 +88,12 @@ export function DynamicFormField({
     case 'choice':
       return (
         <RadioGroup.Root
+          disabled={readonly}
           onValueChange={readonly ? undefined : (newValue: string) => {
             void setFieldValue(name, newValue);
           }}
           orientation={field.orientation}
           value={String(value || '')}
-          disabled={readonly}
         >
           {field.options.map((option) => (
             <RadioGroup.Item key={option.value} value={String(option.value)}>
@@ -104,12 +106,12 @@ export function DynamicFormField({
     case 'choices':
       return (
         <CheckboxGroup.Root
+          disabled={readonly}
           onValueChange={readonly ? undefined : (newValue: string[]) => {
             void setFieldValue(name, newValue);
           }}
           orientation={field.orientation}
           value={Array.isArray(value) ? value.map(String) : []}
-          disabled={readonly}
         >
           {field.options.map((option) => (
             <CheckboxGroup.Item key={option.value} value={String(option.value)}>
@@ -121,20 +123,20 @@ export function DynamicFormField({
 
     case 'yes_no':
       return (
-        <div style={{ display: 'flex', alignItems: 'flex-start', gap: '8px' }}>
+        <Flex gap="2">
           <Checkbox
             checked={Boolean(value)}
+            disabled={readonly}
             onCheckedChange={readonly ? undefined : (checked: boolean) => {
               void setFieldValue(name, checked);
             }}
-            disabled={readonly}
           />
           {field.description ? (
-            <div style={{ fontSize: '14px', color: '#666', lineHeight: '1.4' }}>
+            <Typo color="gray" variant="caption">
               {field.description}
-            </div>
+            </Typo>
           ) : null}
-        </div>
+        </Flex>
       );
 
     default:

package/src/molecules/dynamic-form.tsx

@@ -163,7 +163,7 @@ function DynamicFormFieldList({
               required={field.required}
             >
               <DynamicFormField field={field} />
-              {field.description ? <Typo>{field.description}</Typo> : null}
+              {field.description && field.type !== 'yes_no' ? <Typo color="gray" variant="caption">{field.description}</Typo> : null}
             </Form.FormItem>
           </Box>
         );

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;

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 '';
   }