Web - Card

Definition

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

Principle

카드는 관련있는 정보를 쉽게 볼 수 있어야 하고, 텍스트 및 이미지와 같은 요소는 계층을 명확하게 보여줘야 합니다.
콘텐츠를 명확하게 분리하여 보여줄 수 있고, 사용자는 그 콘텐츠를 쉽게 확인할 수 있습니다.

배경 위에 올라간 형태로 떠있는 느낌을 위해 그림자 처리를 하는데 Contents Layer에 소속되어 있으므로 elevation-2를 사용합니다.

구성

Note

지금은 select 기능만 있고 나중엔 클릭 시 전환 기능도 추가

기본 카드 형태 / 이미지 / 확장형?(콘텐츠 확장) / 버튼조합

Spec

Guide

Size, Property

구성	내용
width	기획 의도에 따라 결정 min-width : 144px
height	카드가 나열되어 있을 경우, 카드들끼리 같은 높이값을 유지할 수 있도록 합니다. *가장 내용이 긴 카드를 기준으로 맞추기 (이미지 참고)
image	Web - ImageView 참고 shapeType : rectangle width : responsive (카드 너비에 맞추기) ratio : 16_9 scaleType : cover
text	Web - TextLabel 참고 titleText styleTheme : body2Bold descText styleTheme : caption1Regular
base	radius : 16px
border	기본 : 1px 선택 시, 2px의 border 생성

Color 구성

Color Key

구성	내용
Text	TextLabel titleText colorTheme : sysTextPrimary descText colorTheme : sysTextSecondary
base color	`ui_cpnt_card_base`
border color	기본 : `ui_cpnt_card_border` 선택됨 : `ui_cpnt_card_selected_border`
shadow	Contents Layer에 소속, elevation-2를 적용합니다.

Properties

titleText

주요 텍스트입니다.

기획 지시사항

기획서 상 작성 방법 : 텍스트만 기술

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

descText

상세 설명 텍스트입니다.

기획 지시사항

기획서 상 작성 방법 : 텍스트만 기술

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

imageIconMode

이미지 또는 아이콘 사용 여부를 결정합니다.

기획 지시사항

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

Type	`enum`
Default	`'none'`

Enum Values Description
`'none'`	아무 것도 표시하지 않습니다.
`'image'`	이미지를 표시합니다.
`'icon'`	현재는 사용하지 않습니다. 아이콘을 표시합니다.

backgroundColor

현재는 사용하지 않습니다.

clickMode (Deprecated in 1.2)

Deprecated in 1.2

~~카드 클릭 시, 액션에 대한 상태를 결정합니다.~~

~~기획 지시사항~~

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

Type	~~enum~~
Default	~~'select'~~

Enum Values Description

~~select~~

~~여러 카드 중 하나를 선택하는 용도로 사용합니다.~~

~~action~~

~~카드 자체가 버튼처럼 눌렀을 때 화면 전환이 이뤄지는 경우 사용합니다.~~

*현재는 사용하지 않습니다.

selectState

Added in 1.2

상태를 결정합니다. *clickMode가 select인 경우 사용가능합니다.

기획 지시사항

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

Type	`enum`
Default	`'unselected'`

Enum Values Description
`'unselected'`	선택 안됨
`'selected'`	선택 됨

imageSrc

Added in 1.2

지정된 기본 값을 보여줘야 할 때 사용합니다.

기획 지시사항

기획서 상 작성 방법 : 텍스트만 기술

Type	`string`
Default	-

onClick

Added in 1.2

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

기획 지시사항

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

Type	`() => void`
Default	-

문서 작성 정보

소유자 / 관리자

김혜진

변경 이력

2022/03/24 : Property 기술방법 변경, 코드에만 있던 prop추가 - 안은수
2022/02/25 : 개발 코드 배포여부 추가 - 안은수
2022/02/19 : Property 기술방법 변경 - 박윤규
2022/02/08 : icon 관련 prop 삭제, clickMode 삭제, selectState prop 추가 - 김혜진
2021/11/26 : 기본 상태일 때 border 추가 관련 spec 추가 - 김혜진
2021/11/17 : style을 styleTheme로 수정 - 김혜진
2021/11/05 : prop 업데이트 - 김혜진
2021/11/03 : 내용 업데이트 - 김혜진
2021/11/02 : 최초 문서 작성 - 김혜진