본문으로 건너뛰기
TDSMoring 디자인 시스템

Avatar

사용자의 사진, 또는 닉네임 첫 글자를 브랜드 그라데이션 원 위에 보여 준다. NameLine은 닉네임, 공식 배지, @아이디를 한 줄로 놓는다.

이 페이지의 목차
분류
데이터 표시
가져오기
import { Avatar, NameLine } from '@/ui/community/Avatar'
코드 위치
apps/mobile/src/ui/community/Avatar.tsx:10

미리보기#

실제 컴포넌트를 화면에 그린 것이다. 화면 아래의 서비스 색 선택기로 색을 바꿔 볼 수 있다. 버튼과 입력 칸은 직접 눌러 볼 수 있다.

김LM
첫 글자 · 공식 · 크기 64
김모링@moring_kim
NameLine

언제 쓰는가#

쓴다

  • 커뮤니티의 글쓴이, 프로필 화면에 쓴다.
  • 공식 계정은 official로 오른쪽 아래에 파란 체크 배지를 붙인다.
  • 이름 줄은 NameLine으로 쓴다. 긴 @아이디가 먼저 …으로 줄어든다.

쓰지 않는다

  • 사진이 없는데 빈 회색 원을 쓰지 않는다. 첫 글자 원이 자동으로 나온다.
  • 공식 배지를 일반 사용자에게 붙이지 않는다.

종류#

Avatar 종류
이름설명
사진uri 또는 path가 있으면 사진.
첫 글자사진이 없으면 gradient 원에 닉네임 첫 글자(영문은 대문자). 글자 크기는 지름의 0.42.
official배지 크기는 max(14, 지름 × 0.36).

크기#

Avatar 크기
이름값설명
기본지름 40size로 바꾼다.

상태#

김L
기본
Avatar 상태
상태모습과 동작
기본기본 모습이다.

사용 방법#

기본

기본
import { Avatar, NameLine } from '@/ui/community/Avatar';

<Avatar name={profile.nickname} path={profile.avatarPath} official={profile.official} />
<NameLine nickname={profile.nickname} handle={profile.handle} official={profile.official} />

속성(props)#

Avatar

Avatar 속성
이름타입기본값필수설명
pathstring | null—선택저장소에 있는 사진 경로.
uristring | null—선택사진 주소. path보다 우선한다.
namestring—필수닉네임. 첫 글자 원과 접근성에 쓰인다.
sizenumber40선택지름(px). 기본 40.
officialboolean—선택true이면 공식 배지를 붙인다.

NameLine

NameLine 속성
이름타입기본값필수설명
nicknamestring—필수닉네임(굵게, 한 줄).
handlestring—선택@아이디. 없으면 생략.
officialboolean—선택true이면 닉네임 옆에 공식 배지.
size'body' | 'small''body'선택"body"(기본) 또는 "small".

치수와 토큰#

Avatar
지름 40, 원, 사진은 photo 바탕. 첫 글자 원은 gradient(대각선), 글자 white Bold
배지
BadgeCheck, 채움 primary, 아이콘 white, 위치 오른쪽 아래 -2, 흰 원 배경
NameLine
닉네임 bodyStrong(최대 66%), 배지 15, @아이디 small textTertiary, 사이 4

접근성#

  • 사진은 accessibilityIgnoresInvertColors(색 반전에서 제외).
  • 이름은 닉네임 글자로 읽힌다.

글자 색 대비

글자 크기별 기준: 작은 글자는 4.5:1 이상, 큰 글자(굵은 18.66px 이상)는 3:1 이상이다. 값은 선택한 서비스와 모드의 토큰으로 계산했다.

Avatar 글자 색 대비
쓰임글자색바탕대비기준
첫 글자 (17px 굵게)onPrimaryStronggradient (양 끝 중 낮은 값)3.08:1 미달3.08:1 미달4.60:1 통과5.48:1 통과4.5:1 (작은 글자)

잘한 예와 잘못한 예#

김
잘한 예사진이 없으면 첫 글자 원이 나온다.
이름이 아주 긴 사용자@very_long_handle
잘못한 예닉네임이 길면 NameLine은 @아이디부터 줄인다. 닉네임을 두 줄로 늘이지 않는다.
  • BrandMark: Mordy의 심벌(웃는 얼굴이 복습 화살표로 이어지는 모양)을 브랜드 타일 위에 그린 이미지다.
  • WellRow: 패널 안의 목록 한 줄이다. 옅은 홈(well)에 앞 아이콘 타일, 제목, 보조 줄, 뒤 요소가 놓인다.