components/ui/identity-placeholder.tsx /** * @title Identity Placeholder * @description 인물이나 사업자를 표현하는 이미지가 없을 때 보여주는 대체 시각 요소예요. */ import * as React from 'react'; import { cva, type VariantProps } from 'class-variance-authority'; import { cn } from '@/lib/utils'; // SEED Rootage spec: identity-placeholder.yaml // root.color = $color.palette.gray-500, image.color = $color.palette.static-white-alpha-800 const identityPlaceholderVariants = cva( 'relative box-border inline-flex size-full items-center justify-center overflow-hidden bg-palette-gray-500 align-top', { variants: { identity: { person: '', business: '', }, }, defaultVariants: { identity: 'person', }, }, ); function PersonSilhouette() { return ( <> <circle cx="320" cy="254" r="98" /> <path d="M142 468c36-52 106-82 178-82s142 30 178 82c-44 54-102 84-178 84s-134-30-178-84Z" /> </> ); } function BusinessSilhouette() { return ( <> {/* 차양 */} <path d="M196 148h248a32 32 0 0 1 29 19l35 89a47 47 0 0 1-94 0a47 47 0 0 1-94 0a47 47 0 0 1-94 0a47 47 0 0 1-94 0l35-89a32 32 0 0 1 29-19Z" /> {/* 건물 + 출입문 */} <path fillRule="evenodd" d="M168 334h304v108c0 27-22 48-48 48H216c-26 0-48-21-48-48V334Zm118 156v-66c0-10 8-18 18-18h32c10 0 18 8 18 18v66h-68Z" /> </> ); } export interface IdentityPlaceholderProps extends Omit<React.ComponentProps<'div'>, 'children'>, VariantProps<typeof identityPlaceholderVariants> {} function IdentityPlaceholder({ className, identity, ...props }: IdentityPlaceholderProps) { const resolved = identity ?? 'person'; return ( <div data-slot="identity-placeholder" data-identity={resolved} className={cn(identityPlaceholderVariants({ identity: resolved }), className)} {...props} > <svg data-slot="identity-placeholder-image" viewBox="0 0 640 640" xmlns="http://www.w3.org/2000/svg" role="img" aria-label={resolved === 'business' ? '사업자 기본 이미지' : '사용자 기본 이미지'} className="block size-full fill-palette-static-white-alpha-800" > {resolved === 'business' ? <BusinessSilhouette /> : <PersonSilhouette />} </svg> </div> ); } export { IdentityPlaceholder, identityPlaceholderVariants };