메시지 활용하기

React Video Thumbnail Extractor는 다양한 상황에 유연하게 대응하기 위해 상태별 메시지 코드를 제공합니다. 문자열 대신 상태 코드를 전달하여 클라이언트에서 메시지를 쉽게 커스터마이징할 수 있으며, 상태 코드를 바탕으로 모듈 업데이트 없이 직접 다국어 처리가 가능합니다.

메시지 그대로 사용하기

컴포넌트에서 React Video Thumbnail Extractor의 메시지를 import 해서 사용하세요.

import { useState } from 'react';

import type {
  Thumbnail,
  ThumbnailValidationResult,
  VideoThumbnailExtractorMessagesType
} from '@devskyui/react-video-thumbnail-extractor';
import { VideoThumbnailExtractorMessages } from '@devskyui/react-video-thumbnail-extractor';

const messages: VideoThumbnailExtractorMessagesType['ko'] = VideoThumbnailExtractorMessages.ko;

console.log(messages.THUMBNAIL_ADD_SUCCESS) // 썸네일을 생성했어요.

메시지 코드로 다국어 대응하기

// ... import 생략
const messages: VideoThumbnailExtractorMessagesType['ko'] = VideoThumbnailExtractorMessages.ko;

const MY_CUSTOM_MESSAGE = {
  INVALID_THUMBNAIL_DUPLICATED: 'The same scene already exists. 🥲'
};

const handleError = (result: ThumbnailValidationResult) => {
  if (result?.code === 'INVALID_THUMBNAIL_DUPLICATED') {
    // 'The same scene already exists. 🥲' - 커스텀 메시지
    console.log(MY_CUSTOM_MESSAGE[result?.code]);
  } else {
    // '이미 추출한 장면이에요.' - 모듈에 있는 ko 기본 메시지
    console.log(messages[result.code]);
  }
};

@devskyui/react-video-thumbnail-extractor message.const.ts

import { VideoThumbnailExtractorMessagesType } from '@/types';

export const MSG: VideoThumbnailExtractorMessagesType = {
  ko: {
    REQUIRE_FILE: `파일을 선택해 주세요.`,
    INVALID_FILE: `파일 정보를 찾을 수 없어요. 올바른 파일을 선택해 주세요.`,
    INVAILD_FILE_NAME: `파일명 규칙이 올바르지 않아요. 파일명을 다시 확인해 주세요.`,
    INVALID_FILE_MAX_LENGTH: `첨부 개수를 초과했어요.`,
    INVALID_FILE_MAX_SIZE: `첨부 용량을 초과했어요.`,
    INVALID_FILE_EXTENSION: `지원하지 않는 파일이에요. 올바른 파일을 선택해 주세요.`,
    INVALID_FILE_IS_NOT_VIDEO: '동영상 파일만 선택할 수 있습니다.',
    INVALID_FILE_ALREADY_EXISTS: `이미 선택한 파일이에요.`,
    INVALID_THUMBNAIL_DUPLICATED: `이미 추출한 장면이에요.`,
    INVALID_THUMBNAIL_MAX_LENGTH: `썸네일 생성 개수를 초과했어요.`,
    THUMBNAIL_EXTRACT_ING: `썸네일을 추출하고 있어요. 잠시만 기다려 주세요.`,
    THUMBNAIL_EXTRACT_FAIL: `썸네일 추출 중 오류가 발생했어요.`,
    THUMBNAIL_EXTRACT_SUCCESS: `썸네일을 추출했어요.`,
    THUMBNAIL_ADD_SUCCESS: `썸네일을 생성했어요.`,
    THUMBNAIL_REMOVE_SUCCESS: `썸네일을 삭제했어요.`,
    FILE_IMPORT_SUCCESS: `파일을 불러왔어요.`
  }
} as const;