1. AvatarBasic

AvatarBasic 컴포넌트는 사용자의 아바타를 표시할 수 있는 컴포넌트입니다. 이미지 또는 사용자의 이름 이니셜을 아바타로 표시할 수 있으며, 크기와 이니셜을 설정할 수 있습니다.

1.1. Import

import AvatarBasic from '@components/Avatar/AvatarBasic';

1.2. Usage

기본 사용 예제는 아래와 같습니다:

1) 이미지가 있는 경우

import AvatarBasic from '@components/Avatar/AvatarBasic';

function ExampleWithImage() {
  return (
    <AvatarBasic
      src="/images/avatar1.svg"
      alt="User Avatar"
      size={80}
    />
  );
}

export default ExampleWithImage;

2) 이미지가 없는 경우 (이니셜 사용)

import AvatarBasic from '@components/Avatar/AvatarBasic';

function ExampleWithInitial() {
  return <AvatarBasic initial="JD" size={80} />;
}

export default ExampleWithInitial;

1.3. Props

AvatarBasic 컴포넌트는 아래와 같은 Props를 가집니다:

Prop	Description	Type	Default
`src`	아바타로 사용할 이미지의 URL.	`string`	`undefined`
`alt`	이미지의 대체 텍스트.	`string`	`undefined`
`initial`	이미지가 없을 때 표시할 이니셜 텍스트 (최대 5자 권장).	`string`	`""`
`size`	아바타의 크기를 픽셀 단위로 설정.	`number`	`100`

1.4. Full Example

import { useState } from "react";

interface AvatarBasicProps {
  src?: string;
  alt?: string;
  initial?: string;
  size?: number;
}

const AvatarBasic = ({ src, alt, initial, size = 100 }: AvatarBasicProps) => {
  return (
    <div
      className="m-2 flex flex-shrink-0 items-center justify-center rounded-full bg-Basic font-bold uppercase text-white"
      style={{
        width: `${size}px`,
        height: `${size}px`,
        backgroundImage: src ? `url(${src})` : "",
        backgroundSize: "cover",
        backgroundPosition: "center",
        fontSize: `${size * 0.2}px`,
      }}
    >
      {!src && initial}
    </div>
  );
};

export default AvatarBasic;

2. AvatarLabel

AvatarLabel 컴포넌트는 사용자의 아바타와 함께 라벨을 표시할 수 있는 컴포넌트입니다. 이미지 또는 사용자의 이름 이니셜을 아바타로 표시할 수 있으며, 크기와 라벨을 설정할 수 있습니다.

2.1. Import

import AvatarLabel from '@components/Avatar/AvatarLabel';

2.2. Usage

기본 사용 예제는 아래와 같습니다:

Com_Que

import AvatarLabel from '@components/Avatar/AvatarLabel';

function Example() {
  return <AvatarLabel initial="JD" size={80} label="John Doe" />;
}

export default Example;

2.3. Props

AvatarLabel 컴포넌트는 아래와 같은 Props를 가집니다:

Prop	Description	Type	Default
`src`	아바타로 사용할 이미지의 URL.	`string`	`undefined`
`alt`	이미지의 대체 텍스트.	`string`	`undefined`
`initial`	이미지가 없을 때 표시할 이니셜 텍스트 (최대 5자 권장).	`string`	`""`
`size`	아바타의 크기를 픽셀 단위로 설정.	`number`	`50`
`label`	아바타 옆에 표시될 라벨 텍스트.	`string`	`""`

2.4. Full Example

interface AvatarLabelProps {
  src?: string;
  alt?: string;
  initial?: string;
  size?: number;
  label: string;
}

const AvatarLabel = ({
  src,
  alt,
  initial,
  size = 50,
  label,
}: AvatarLabelProps) => {
  return (
    <div
      className="flex items-center justify-center rounded-full bg-Basic font-bold uppercase text-white"
      style={{
        width: `${size}px`,
        height: `${size}px`,
        backgroundImage: src ? `url(${src})` : "",
        backgroundSize: "cover",
        backgroundPosition: "center",
        fontSize: `${sWize * 0.2}px`,
      }}
    >
      {!src && initial}
      <span>{label}</span>W
    </div>
  );
};

export default AvatarLabel;