Web - LocalizedButton

Added in 2.2

Definition

정의	LocalizedButton
최적화 대상	Desktop
기획 배포	완료
디자인 가이드 배포	완료
개발 코드 배포	완료

Principle

다국어 모달(LocalizedContentModal)을 여는 버튼입니다.

구성

원문을 입력하지 않으면 버튼을 비활성화 합니다. (state가 disabled)

원문을 입력하면 모달을 열 수 있게 활성화 됩니다. (state가 normal)

원문을 입력하고 모달에 값을 입력한 상태입니다.

Spec

Size, Property

종류

구성

내용

버튼

-

Web - IconButton

iconFillType : line
iconName: ic_translate
baseSize: small
shapeType: round
baseColorKey: ui_cpnt_button_fill_base_default
iconColorKey: 모달에 입력값이 있으면 ui_cpnt_button_icon_primary 없으면 ui_cpnt_icon_sys_grey_02
state: state prop에 따름
onClick: state가 normal이면 모달이 열림, 아니면 안열림

모달

-

버튼을 누르면 모달이 보여짐

PDS : Web - LocalizedContentModal (Added in 2.2)

그외 prop localizedContentModalConfig prop에 따름

Properties

state

버튼 상태입니다.

기획 지시사항

기획서 상 작성 방법 : type 작성

Type	`'normal' \| 'disabled'`
Default	`normal`

localizedContentModalConfig

LocalizedContentModal 설정 값입니다.

기획 지시사항

기획서 상 작성 방법 :
- LocalizedContentModal prop 참고
  - ex) E00003EventDetail - ageRated 항목
  - localizedContentModalConfig :
    - originalText: 원문 기입
    - visibleLanguages: 'ko','en','ja','zh','zh_HANT','fr','es'
    - textFieldLineType: multi
    - readOnly: true

Type

TYPESCRIPT

type LocalizedContentConfig = {
  size?: 'large' | 'medium' | 'small' | 'rlarge';
  textFieldLineType?: 'single' | 'multi' | 'auto' | 'tinyeditor';
  originalText?: string;
  initialValues?: { [key in LanguageCode]?: string };
  visibleLanguages?: LanguageCode[];
  readonly?: boolean;
  richEditorConfig?: RichEditorConfig;
  onApply?: (values: { [key in LanguageCode]?: string }) => void;
};

Default

-

문서 작성 정보

소유자 / 관리자	김혜진
변경 이력	2025/08/28 : 문서 최초 작성 - 이윤아