1. ImageUpload

ImageUpload 컴포넌트는 사용자가 이미지를 업로드하거나 선택할 수 있는 기능을 제공합니다.

다양한 크기, 색상, 모양, 텍스트, 스타일 변형 및 기타 옵션을 통해 이미지 업로드 컴포넌트를 커스터마이징 할 수 있습니다.

1.1. Import

import ImageUpload from '@components/ImageUpload/Imageupload';

1.2. Usage

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

import ImageUpload from '@components/ImageUpload/Imageupload';

function Example() {
  return (
    <ImageUpload />
  );
}

export default Example;

2. Size

size prop을 이용하여 ImageUpload 컴포넌트의 크기를 설정할 수 있습니다.

기본 값은 medium이고, 가능한 값은 small, medium, large 입니다.

import ImageUpload from '@components/ImageUpload/Imageupload';

function Example() {
  return (
    <>
      <ImageUpload size="small" />
      <ImageUpload size="medium" />
      <ImageUpload size="large" />
    </>
  );
}

export default Example;

3. Color

color prop을 이용하여 ImageUpload 컴포넌트의 배경 색상을 설정할 수 있습니다.

기본 값은 basic이고, 가능한 값은 primary, secondary, success, warning, danger, red, orange, yellow, green, blue, purple, pink, basic, white, gray, black 입니다.

import ImageUpload from '@components/ImageUpload/Imageupload';

function Example() {
  return (
    <>
        <ImageUpload color="primary" />
        <ImageUpload color="secondary" />
        <ImageUpload color="success" />
        <ImageUpload color="warning" />
        <ImageUpload color="danger" />
        <ImageUpload color="red" />
        <ImageUpload color="orange" />
        <ImageUpload color="yellow" />
        <ImageUpload color="green" />
        <ImageUpload color="blue" />
        <ImageUpload color="purple" />
        <ImageUpload color="pink" />
        <ImageUpload color="basic" />
        <ImageUpload color="white" />
        <ImageUpload color="gray" />
        <ImageUpload color="black" />
    </>
  );
}

export default Example;

4. Shape

shape prop을 이용하여 ImageUpload 컴포넌트의 모양을 설정할 수 있습니다.

기본 값은 circle이고, 가능한 값은 rectangle, circle 입니다.

import ImageUpload from '@components/ImageUpload/Imageupload';

function Example() {
  return (
    <>
      <ImageUpload shape="rectangle" />
      <ImageUpload shape="circle" />
    </>
  );
}

export default Example;

5. Variant

variant prop을 이용하여 ImageUpload 컴포넌트의 스타일 변형을 설정할 수 있습니다.

기본 값은 solid이고, 가능한 값은 solid와 border 입니다.

import ImageUpload from '@components/ImageUpload/Imageupload';

function Example() {
  return (
    <>
      <ImageUpload variant="solid" color="primary" />
      <ImageUpload variant="border" color="secondary" />
    </>
  );
}

export default Example;

6. Variant Border의 Color

variant prop을 이용하여 ImageUpload 컴포넌트의 스타일 변형을 설정할 수 있습니다.

border 스타일은 ImageUpload 컴포넌트의 테두리만 색상이 적용되고 이미지가 업로드되지 않은 상태에서 테두리 색상이 강조되서 시각적으로 구분할 수 있습니다.

import { ImageUpload } from '@components/ImageUpload/Imageupload';

function Example() {
  return (
    <>
        <ImageUpload color="primary" variant="border" />
        <ImageUpload color="secondary" variant="border" />
        <ImageUpload color="success" variant="border" />
        <ImageUpload color="warning" variant="border" />
        <ImageUpload color="danger" variant="border" />
        <ImageUpload color="red" variant="border" />
        <ImageUpload color="orange" variant="border" />
        <ImageUpload color="yellow" variant="border" />
        <ImageUpload color="green" variant="border" />
        <ImageUpload color="blue" variant="border" />
        <ImageUpload color="purple" variant="border" />
        <ImageUpload color="pink" variant="border" />
        <ImageUpload color="basic" variant="border" />
        <ImageUpload color="white" variant="border" />
        <ImageUpload color="gray" variant="border" />
        <ImageUpload color="black" variant="border" />
    </>
  );
}

export default Example;

7. Text

text prop을 이용하여 ImageUpload 컴포넌트에 표시되는 텍스트를 설정할 수 있습니다.

기본 값은 + upload 입니다.

Add Image

Upload Here

import ImageUpload from '@components/ImageUpload/Imageupload';

function Example() {
  return (
    <>
      <ImageUpload text="Add Image" />
      <ImageUpload text="Upload Here" />
    </>
  );
}

export default Example;

8. ClassName

className prop을 사용하여 ImageUpload 컴포넌트의 스타일을 커스터마이징할 수 있습니다.

import ImageUpload from '@components/ImageUpload/Imageupload';

function Example() {
  return (
    <ImageUpload className="bg-red-600 text-white" />
  );
}

export default Example;

9. OnImageSelect

onImageSelect prop은 사용자가 이미지를 선택했을 때 호출되는 콜백 함수입니다.

선택된 이미지의 Base64 데이터를 부모 컴포넌트로 전달하고, 이미지가 선택되지 않았을 경우 null을 전달합니다.

내부적으로 onChangeImageHandler 함수가 사용되고, 이 함수는 FileReader를 이용해 이미지를 Base64 형식으로 변환 후, 변환된 데이터를 previewImage 상태로 설정한 후 onImageSelect 콜백으로 전달합니다.

예를 들어, 아래와 같은 방식으로 onImageSelect를 구현할 수 있습니다.

"use client";
import ImageUpload from '@components/ImageUpload/Imageupload';
import { useState } from 'react';

function Example() {
  const [imageData, setImageData] = useState<string | null>(null);

  const onSelectImageHandler = (data: string | null) => {
    setImageData(data);
    console.log("Selected Image data =>", data);
  };

  return (
    <ImageUpload onImageSelect={onSelectImageHandler} />
  );
}

export default Example;

10. Icon

icon prop을 사용하여 ImageUpload 컴포넌트의 아이콘을 설정할 수 있습니다.

기본값은 "icon-plus" 입니다. Icon에 대한 자세한 정보는 Icon Docs를 참고 하시면 됩니다.

import ImageUpload from '@components/ImageUpload/Imageupload';

function Example() {
  return (
    <>
      <ImageUpload icon="icon-plus" />
      <ImageUpload icon="icon-image" />
    </>
  );
}

export default Example;

11. Icon Size

iconSize prop을 사용하여 아이콘의 크기를 설정할 수 있습니다. 기본값은 "medium"이고, 가능한 값은 "small", "medium", "large" 입니다.

import ImageUpload from '@components/ImageUpload/Imageupload';

function Example() {
  return (
    <>
      <ImageUpload iconSize="small" />
      <ImageUpload iconSize="medium" />
      <ImageUpload iconSize="large" />
    </>
  );
}

export default Example;

12. Icon Color

iconColor prop을 사용하여 아이콘의 색상을 설정할 수 있습니다. 기본값은 "currentColor" 입니다.

import ImageUpload from '@components/ImageUpload/Imageupload';

function Example() {
  return (
    <>
      <ImageUpload iconColor="red" />
      <ImageUpload iconColor="blue" />
    </>
  );
}

export default Example;

13. Icon Position

iconPosition prop을 사용하여 아이콘의 위치를 설정할 수 있습니다.

아이콘 위치는 text prop이 있을 때, text의 왼쪽(left), 오른쪽(right),위쪽(top),아래쪽(bottom)에 위치합니다.

text가 없는 경우 아이콘은 자동으로 컴포넌트의 정가운데에 배치됩니다. 기본값은 top입니다.

아래 예시는 icon-image 아이콘을 포함한 예시입니다.

left

right

top

bottom

import ImageUpload from '@components/ImageUpload/Imageupload';

function Example() {
  return (
    <>
        <ImageUpload icon="icon-image" iconPosition="left" text="left" />
        <ImageUpload icon="icon-image" iconPosition="right" text="right" />
        <ImageUpload icon="icon-image" iconPosition="top" text="top" />
        <ImageUpload icon="icon-image" iconPosition="bottom" text="bottom" />
    </>
  );
}

export default Example;

14. Props

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

Prop	Description	Type	Default
`shape`	ImageUpload 컴포넌트의 모양을 설정합니다.	`"rectangle" \| "circle"`	`"circle"`
`size`	ImageUpload 컴포넌트의 크기를 설정합니다.	`"small" \| "medium" \| "large"`	`"medium"`
`color`	ImageUpload 컴포넌트의 배경 색상을 설정합니다.	`"primary" \| "secondary" \| "success" \| "warning" \| "danger" \| "red" \| "orange" \| "yellow" \| "green" \| "blue" \| "purple" \| "pink" \| "basic" \| "white" \| "gray" \| "black"`	`"basic"`
`variant`	ImageUpload 컴포넌트의 스타일 변형을 설정합니다.	`"solid" \| "border"`	`"solid"`
`text`	ImageUpload 컴포넌트에 표시할 텍스트를 설정합니다. 설정하지 않으면 기본적으로 아이콘만 표시됩니다.	`string`	`""`
`className`	ImageUpload 컴포넌트의 추가적인 커스텀 스타일을 설정합니다.	`string`	`""`
`onImageSelect`	이미지 선택 시 호출되는 콜백 함수를 설정합니다.	`(data: string \| null) => void`	`undefined`
`icon`	ImageUpload 컴포넌트에 사용할 아이콘을 설정합니다.	`IconName`	`"icon-plus"`
`iconSize`	아이콘의 크기를 설정합니다.	`"small" \| "medium" \| "large"`	`"medium"`
`iconColor`	아이콘의 색상을 설정합니다.	`string`	`"currentColor"`
`iconPosition`	아이콘의 위치를 설정합니다.	`"left" \| "right" \| "top" \| "bottom"`	`"top"`