Web - ReactionButton

Definition

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

Principle

리액션 버튼은 이용자들이 콘텐츠에 대한 반응을 나타낼 때 사용하는 버튼입니다.
크게 좋아요, 싫어요, 댓글 3가지 유형이 있습니다.

‌

ThumbsUp, ThumbsDown 버튼

콘텐츠에 대한 평가를 좋아요 또는 싫어요로 나타낼 수 있는 버튼입니다.
- 좋아요의 경우, 아이콘의 형태가 다를 수 있습니다. (spec 참고)
클릭 시, 선택 되었다는 액션을 명시적으로 나타냅니다. (primary color로 바뀜)

Comment 버튼

댓글의 개수를 보여주는 버튼입니다.
클릭 시, 선택 되었다는 액션을 제공하지 않습니다.

Spec

Guide

Size, Property

종류

Height

text

icon

radius

XSmall

32px

Web - TextLabel 참고

styleTheme : body2Bold
singleLineMode : use

size : 20
fillType : fill
iconName
- 좋아요
  - ic_thumb_up
  - ic_heart
- 싫어요 : ic_thumb_down
- 댓글 : ic_reply

(hover시) 8px

Color 구성

‌

Text와 Icon은 컬러를 함께 가져갑니다.

기본 상태 (default)
- 시스템 컬러를 적용합니다.
선택 시 (selected)
- 브랜드 컬러에 맞춰 Text 및 Icon 컬러를 적용합니다. (primary)

Color Key

		textColor	iconColor
Thumbs up, thumbs down	default	TextLabel colorTheme : sysTextSecondary	`ui_cpnt_button_icon_default`
Thumbs up, thumbs down	selected	TextLabel colorTheme : usrTextBrandPrimary	`ui_cpnt_button_icon_primary`
Comment	default	TextLabel colorTheme : sysTextSecondary	`ui_cpnt_button_icon_default`
Comment	selected	N/A	N/A
hover	`ui_cpnt_reactionbutton_base_01`
pressed	`ui_cpnt_reactionbutton_base_02`

colorTheme : dark

		textColor	iconColor
Thumbs up, thumbs down	default	`ui_cpnt_button_text_darktheme_default`	`ui_cpnt_button_icon_darktheme_default`
Thumbs up, thumbs down	selected	`ui_cpnt_button_text_darktheme_primary`	`ui_cpnt_button_icon_darktheme_primary`
Comment	default	`ui_cpnt_button_text_darktheme_default`	`ui_cpnt_button_icon_darktheme_default`
Comment	selected	N/A	N/A

Properties

textCountMode (Deprecated in 1.2)

Deprecated in 1.2

~~보여주는 정보에 대한 형태를 결정합니다.~~

~~기획 지시사항~~

~~기획서 상 작성 방법 : Enum Values 중 하나를 사용함~~

Type	`enum`
Default	`'count'`

Enum Values Description

'count'

~~숫자만 가능~~

~~Format (1,000개 미만) : ###~~
~~Format (1,000개 이상) : 심볼 표시(K,M)~~
~~ex : 3.7k, 45k, 12M~~

'text'

~~텍스트 값을 보여줍니다.~~

text

표시할 텍스트 값을 텍스트로 넣으면 해당 텍스트가 그대로 표시됩니다.

따로 텍스트 값을 넣지 않고 number로 부여 한다면 숫자의 크기에 따라 포맷이 다르게 표시됩니다.

Format (1,000개 미만) : ###
Format (1,000개 이상) : 심볼 표시(K,M,B,T)
ex : 3.7k, 45k, 12M

기획 지시사항

기획서 상 작성 방법 : 텍스트만 기술 | 숫자에 대한 조건을 기술

Type	`number \| string \| object \| Array<string \| object> \| undefined \| null`
Default	-

iconName

아이콘 이름을 의미합니다.

사용할 수 있는 아이콘은 미리 정해져있습니다.

기획 지시사항

기획서 상 작성 방법 : Enum Values 중 하나를 사용함

Type	`enum`
Default	`'ic_thumb_up'`

Enum Values Description
`'ic_thumb_up'`	좋아요 (엄지모양)
`'ic_heart'`	좋아요 (하트모양)
`'ic_thumb_down'`	싫어요
`'ic_reply'`	댓글

status

선택된 상태인지를 판별합니다.

기획 지시사항

기획서 상 작성 방법 : Enum Values 중 하나를 사용함

Type	`enum`
Default	`'default'`

Enum Values Description
`'default'`	기본 상태 입니다.
`'select'`	선택된 상태입니다.

colorTheme

컬러의 프리셋 테마입니다.

기획 지시사항

기획서 상 작성 방법 : Enum Values 중 하나를 사용함

Type	`enum`
Default	`'none'`

Enum Values Description

'none'

기본값을 따릅니다.

'dark'

*톤 설정과 상관없이 어두운 배경에 올라갈 때 사용합니다.

(spec 기술 참고)

displayType

Added in 1.6

표시 레이아웃 방식을 결정합니다.

기획 지시사항

기획서 상 작성 방법 : Enum Values 중 하나를 사용함

Type	`enum`
Default	`'icon_text'`

Enum Values Description
`'icon_text'`	아이콘과 텍스트 결합
`'icon_only'`	아이콘만 있음

onClick

Added in 1.2

클릭이 된 시점에 이벤트를 부여합니다.

기획 지시사항

기획서 상 작성 방법 : 기획자가 직접 prop을 기술하지 않음

Type	`(e: React.MouseEvent<HTMLButtonElement>) => void;`
Default	-

onMouseDown

Added in 1.2

클릭이 된 시점에 이벤트를 부여합니다.

onClick보다 빠른 시점에 발현됩니다.

기획 지시사항

기획서 상 작성 방법 : 기획자가 직접 prop을 기술하지 않음

Type	`(e: React.MouseEvent<HTMLButtonElement>) => void;`
Default	-

문서 작성 정보

소유자 / 관리자

김혜진, 박윤규

변경 이력

2022/11/25 : displayType prop 추가 - 안은수
2022/11/24 : text 필수에서 필수가 아니도록 변경 - 안은수
2022/09/29 : onClick과onMouseDown type 변경 - 안은수
2022/06/08 : spec 내 이미지 수정 - 김혜진
2022/06/08 : spec 수정(아이콘 크기 16px에서 20px로 수정, hover시 border-radius 8px 부여) - 안은수
2022/05/31 : spec 수정(사이즈, hover시 추가) - 김혜진
2022/04/01 : Property 기술방법 변경, 코드에만 있던 prop추가 - 안은수
2022/02/25 : 개발 코드 배포여부 추가 - 안은수
2022/01/26 : textCountMode를 삭제, text라는 prop에서 string을 부여하느냐, number를 부여하느냐에 따라 분기되어 표시되도록 수정 - 김혜진
2022/01/03 : 좋아요 아이콘 형태 spec 추가, value 추가 / textCountMode, colorTheme에 대한 prop 추가 - 김혜진
2021/11/17 : style을 styleTheme로 수정 - 김혜진
2021/11/16 : icon에 대한 fillType spec 내 설명 추가 - 김혜진
2021/11/11 : Text에 행간에 대한 설명 문구 추가 - 김혜진
2021/10/26 : 텍스트 부분 TextLabel 값으로 수정 - 김혜진
2021/09/29 : Principle, Spec 내용 추가 - 김혜진
2021/09/10 : Property 및 ValueDescription 업데이트 - 박윤규
2021/09/08 : Principle 내용 추가 - 김혜진
2021/09/08 : Property 및 Constant, Definition 초안 작성 - 박윤규
2021/09/07 : 최초 작성 - 김혜원