Web - LocalizedContentModal (Added in 2.2)

정의

LocalizedContentModal

최적화 대상

Desktop

기획 배포

완료

디자인 가이드 배포

완료

개발 코드 배포

완료

Header

• 필수입니다.

• 모달의 타이틀이 들어가는 영역입니다.

• 스크롤 시, 고정되는 영역입니다.

Body

• 필수입니다.

• 모달의 내용이 들어가는 영역입니다.

• 길어질 경우, 스크롤이 되는 영역입니다.

• 원문이 표시되는 영역이 존재합니다. (BodyTextGroup)

• 다국어를 입력할 수 있는 영역이 존재합니다. (BasicFormGroup)

• Body 영역에 여백이 존재합니다.

Footer

• 2개 들어갑니다.

  • 우측에 최대 2개 가능

• 버튼의 순서는 가장 우측부터 좌측으로 갑니다.

  • 우측에서 1번째는 해당 모달에 대한 액션(적용)을 보여주고, 우측에서 2번째는 모달을 닫는 액션(취소)을 보여줍니다.

모달

-

https://publ.atlassian.net/wiki/x/zBaFqg

• titleText : str_multilingual_settings

• btnMode: readonly일 때 mbtn_amount1 그 외 mbtn_amount2

• mBtn1Text: readonly일 때 str_confirm 그 외 str_apply

• mBtn2Text: str_cancel

• size: size prop에 따름

• onClickMBtn1: -

• onClickMBtn2: -

원문

-

Web - TextLabel

• text : originalText prop에 따름

• wordBreak: keep_all

• styleTheme : body2Regular

• colorTheme: sysTextPrimary

구분선

-

Web - Divider

• body 영역 내 다른 컴포넌트와 너비 맞춤

입력란

-

visibleLanguages prop의 LanguageCode에 맞춰서 보여짐

• Web - TextLabel (title)

  • text :

    • ko : str_multilingual_ko

    • en : str_multilingual_en

    • ja : str_multilingual_ja

    • zh : str_multilingual_zh_cn

    • 'zh-Hant': : str_multilingual_zh_tw

    • fr : str_multilingual_fr

    • es : str_multilingual_es

  • styleTheme: subTitleBold

  • colorTheme: sysTextPrimary

• Web - TextLabel (desc)

  • text :

    • ko : str_9064

    • en : str_9065

    • ja : str_9066

    • zh : str_9067

    • zh-hant:str_9068

    • fr : str_9069

    • es : str_9070

  • styleTheme : caption1Regular

  • colorTheme : sysTextSecondary

textFieldLineType prop이 single, multi, auto 일 때 보여짐

• Web - TextField

  • responsiveMode : use

  • multiRows: multi 일때 5, 그외 기본값

  • autoMaxRows : auto 일때 5, 그외 기본값

  • autoMinRows: auto 일때 1, 그외 기본값

  • hintText: str_9071

  • placeholder : Input Text

  • textLineType : textFieldLineType에 따름

  • state: readonly 일 때 disabled 그외 normal

textFieldLineType prop이 tinyeditor 일 때 보여짐

• RichTextEidtor (문서없음)

  • toolbar :

    CODE

    [
      'blocks',
      'bold italic underline strikethrough',
      'alignleft aligncenter alignright alignjustify',
      'outdent indent',
      'forecolor backcolor numlist bullist blockquote',
      'link insertfile image media',
      'undo redo',
      'code'
    ]
    

  • 그외 prop richEditorConfig prop에 따름

textFieldLineType prop이 tinyeditor 이면서 readonly 일때 보여짐

• Web - AnnotationSheet Panel

  • width : 100%

  • height: 240px

  • backgroundColorTheme : base3

  • shapeType: round

  • radius: 16

  • paddingTop : spacing_d

  • paddingRight : spacing_d

  • paddingBottom : spacing_d

  • paddingLeft: spacing_d

• ImageView

'large' | 'medium' | 'small' | 'rlarge';

medium

'single' | 'multi' | 'auto' | 'tinyeditor' | 'imageView';

single

string

-

object

-

Array<LanguageCode>

type LanguageCode =
  | 'en'
  | 'ko'
  | 'ja'
  | 'zh'
  | 'zh-Hant'
  | 'fr'
  | 'de'
  | 'es'
  | 'it'
  | 'pt'
  | 'ru'
  | 'vi'
  | 'th'
  | 'id'
  | 'ms'
  | 'ar'
  | 'tr'
  | 'pl'
  | 'nl'
  | 'sv'
  | 'fi'
  | 'no'
  | 'da'
  | 'he'
  | 'hi'
  | 'bn'
  | 'ta'
  | 'el'
  | 'cs'
  | 'ro';

-

true | false

false

RichEditorConfig - RichTextEditor의 Prop 참고

() => void;

-

(values: { [key in LanguageCode]?: string }) => void;

-

김혜진

• 2025/08/28 : MultilingualModal → LocalizedContentModal - 이윤아

• 2025/06/24 : 문서 최초 작성 - 김혜진