브랜드

제품 로고와 소셜 로그인 아이콘입니다.

로고 에셋은 각 제품이 관리하고, BrandLogo 는 로고를 표시하는 방식만 정합니다. 소셜 로그인 아이콘은 모든 제품이 같은 것을 씁니다. 서체는 컴포넌트가 아니라 서체 진입점(@uyoolabs/ui/fonts/*)을 import 해서 불러옵니다.

쓰는 경우: 라이트 · 다크 테마에 맞춰 제품 로고를 표시할 때(BrandLogo), Google · GitHub 로그인 버튼을 만들 때(GoogleIcon · GitHubIcon) 씁니다.
쓰지 않는 경우: 로고 이미지를 저장소에 복사해 쓰지 않고 CDN URL 을 직접 참조합니다. 소셜 로그인 아이콘의 색과 형태를 바꾸지 않습니다. 슬라이드 · A4 의 머리 마크는 이 컴포넌트가 아니라 .uyoo-slide-mark · .uyoo-sheet-mark 안의 그림입니다.

import

import { BrandLogo, GoogleIcon, GitHubIcon } from "@uyoolabs/ui/brand";

BrandLogo

테마를 바꿔 보세요. 라이트 · 다크 로고를 CSS 로 전환하므로 하이드레이션 전에도 깜빡이지 않습니다.

다섯 제품의 로고와 아이콘 전체는 브랜드 자산에 있습니다. 화면 읽기 프로그램은 라이트 로고의 alt 만 읽고, 다크 로고는 숨깁니다.

GoogleIcon · GitHubIcon

소셜 로그인 버튼에 씁니다. 각 제공자의 공식 마크이므로 색과 형태를 바꾸지 않습니다.

서체 — PretendardFont · DocumentFonts 를 대신합니다

v2 에서 CDN 링크 컴포넌트(PretendardFont · DocumentFonts · NotoSerifKrFont)를 지웠습니다.

서체 파일은 앱의 번들러가 npm 서체 패키지에서 꺼내 앱 자신의 주소로 배포합니다(ADR 0002). 쓰는 표면의 진입점만 import 하고, 그 진입점의 서체 패키지만 설치합니다. 표면별 서체는 타이포그래피에, 바뀐 이름 전체는 docs/migration/v2-brand.md 에 있습니다.

// v1: import { DocumentFonts, PretendardFont } from "@uyoolabs/ui/brand";  ← v2 에서 없어졌다
// v2: 루트 layout(또는 Vite 진입 파일)에서 쓰는 표면의 서체만 import 한다
import "@uyoolabs/ui/fonts/app";     // UI 고딕 · 랜딩 · 덱 · A4
import "@uyoolabs/ui/fonts/app-ja";  // 일본어 화면
import "@uyoolabs/ui/fonts/doc-ko";  // 한국어 문서 명조(마루 부리 · 나눔명조)
import "@uyoolabs/ui/fonts/doc-ja";  // 일본어 문서 명조
import "@uyoolabs/ui/fonts/doc-en";  // 영어 문서 명조

props

소스의 타입과 JSDoc 에서 생성한 표입니다. 컴포넌트를 고치면 pnpm gen 으로 다시 만듭니다.

BrandLogo

prop	타입	기본값	설명
light필수	string	—	라이트 테마의 로고 주소
dark필수	string	—	다크 테마의 로고 주소
alt필수	string	—	로고의 접근성 이름(대개 제품 이름)
width필수	number	—	그리기 전에 자리를 잡는 가로(px). 로고 파일의 비율과 맞춘다
height필수	number	—	그리기 전에 자리를 잡는 세로(px)
className	string	—
priority	boolean	true	첫 화면의 로고는 먼저 받는다. 접힌 곳의 로고만 false 로 둔다