BrandMark
Mordy의 심벌(웃는 얼굴이 복습 화살표로 이어지는 모양)을 브랜드 타일 위에 그린 이미지다.
- 분류
- 데이터 표시
- 가져오기
import { BrandMark } from '@/ui/BrandMark'- 코드 위치
apps/mobile/src/ui/BrandMark.tsx:5
미리보기#
실제 컴포넌트를 화면에 그린 것이다. 화면 아래의 서비스 색 선택기로 색을 바꿔 볼 수 있다. 버튼과 입력 칸은 직접 눌러 볼 수 있다.
언제 쓰는가#
쓴다
- Mordy 앱의 소개, 로그인, 정보 화면에서 앱을 나타낼 때 쓴다.
쓰지 않는다
- Morit 화면에 쓰지 않는다. 이 이미지는 Mordy의 로고이고 서비스 색을 따르지 않는다.
- 타일 바깥의 흰 심벌만 따로 쓰지 않는다. 흰 배경에서는 보이지 않는다. 항상 파란 타일 위에 둔다.
- 이미지 비율을 바꾸지 않는다.
종류#
종류가 없다.
크기#
| 이름 | 값 | 설명 |
|---|---|---|
| 기본 | 40 × 40 | size로 바꾼다. 원본은 384 × 384다. |
상태#
| 상태 | 모습과 동작 |
|---|---|
| 기본 | 기본 모습이다. |
사용 방법#
기본
기본
import { BrandMark } from '@/ui/BrandMark';
<BrandMark size={72} />속성(props)#
| 이름 | 타입 | 기본값 | 필수 | 설명 |
|---|---|---|---|---|
size | number | 40 | 선택 | 한 변의 길이(px). 기본 40. |
style | StyleProp<ImageStyle> | — | 선택 | 이미지에 적용할 추가 스타일. |
치수와 토큰#
- 원본
- apps/mobile/assets/brand/tile.png, 384 × 384, 투명 배경 PNG
- 접근성 이름
- "Mordy 로고"
- 색
- 고정(파란 그라데이션 타일). 서비스 색 토큰을 따르지 않는다.
접근성#
- 이미지 이름은 "Mordy 로고"다.
잘한 예와 잘못한 예#
