1. Toast

Toast 컴포넌트는 사용자에게 알림 메시지를 표시할 때 사용됩니다. 다양한 위치, 크기, 색상, 변형 스타일을 지원하고 진행 바와 닫기 버튼을 포함할 수 있습니다.

1.1. Import

import Toast from "@components/Toast/Toast";

1.2. Usage

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

아래 예제에서는 버튼을 클릭하면 Toast가 렌더링됩니다.

"use client";
import Button from "@components/Button/Button";
import Toast from "@components/Toast/Toast";
import { useState } from "react";

const ToastExample = () => {
  const [isToastOpen, setIsToastOpen] = useState(true);
  const onclickToastHandler = (open: boolean) => () => {
    setIsToastOpen(open);
  };
  return (
    <>
      <Toast
        isOpen={isToastOpen}
        onClose={onclickToastHandler(false)}
      >
        Toast 알림입니다.
      </Toast>
      <Button onClick={onclickToastHandler(true)}>Toast Open Button</Button>
    </>
  );
};
export default ToastExample;

2. Position

position prop을 이용하여 Toast의 위치를 설정할 수 있습니다.

기본 값은 leftBottom 이고, 가능한 값은 leftTop, leftBottom, rightTop, rightBottom, centerTop, centerBottom, left, center, right 입니다.

"use client";
import Button from "@components/Button/Button";
import Toast from "@components/Toast/Toast";
import { useState } from "react";

const ToastExample = () => {
  const [isToastOpen, setIsToastOpen] = useState(true);
  const onclickToastHandler = (open: boolean) => () => {
    setIsToastOpen(open);
  };
  return (
    <>
      <Toast
        isOpen={isToastOpen}
        onClose={onclickToastHandler(false)}
        position="rightBottom"
      >
        오른쪽 하단에 표시됩니다.
      </Toast>
      <Button onClick={onclickToastHandler(true)}>Toast Open Button</Button>
    </>
  );
};
export default ToastExample;

3. Color

color prop을 이용하여 Toast의 배경 색상을 설정할 수 있습니다.

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

"use client";
import Button from "@components/Button/Button";
import Toast from "@components/Toast/Toast";
import { useState } from "react";

const ToastExample = () => {
  const [isToastOpen, setIsToastOpen] = useState(true);
  const onclickToastHandler = (open: boolean) => () => {
    setIsToastOpen(open);
  };
  return (
    <>
      <Toast
        isOpen={isToastOpen}
        onClose={onclickToastHandler(false)}
        color="orange"
      >
        오렌지색 알림입니다.
      </Toast>
      <Button onClick={onclickToastHandler(true)}>Toast Open Button</Button>
    </>
  );
};
export default ToastExample;

4. Variant

variant prop을 이용하여 Toast의 스타일 변형을 설정할 수 있습니다.

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

"use client";
import Button from "@components/Button/Button";
import Toast from "@components/Toast/Toast";
import { useState } from "react";

const ToastExample = () => {
  const [isToastOpen, setIsToastOpen] = useState(true);
  const onclickToastHandler = (open: boolean) => () => {
    setIsToastOpen(open);
  };
  return (
    <>
      <Toast
        isOpen={isToastOpen}
        onClose={onclickToastHandler(false)}
        variant="border"
      >
        border 스타일의 알림입니다.
      </Toast>
      <Button onClick={onclickToastHandler(true)}>Toast Open Button</Button>
    </>
  );
};
export default ToastExample;

5. Time

time prop을 이용하여 Toast가 자동으로 닫히기 전까지의 시간을 설정할 수 있습니다. 시간은 초 단위로 설정합니다.

"use client";
import Button from "@components/Button/Button";
import Toast from "@components/Toast/Toast";
import { useState } from "react";

const ToastExample = () => {
  const [isToastOpen, setIsToastOpen] = useState(true);
  const onclickToastHandler = (open: boolean) => () => {
    setIsToastOpen(open);
  };
  return (
    <>
      <Toast
        isOpen={isToastOpen}
        onClose={onclickToastHandler(false)}
        time="5"
      >
        5초 후에 자동으로 닫힙니다.
      </Toast>
      <Button onClick={onclickToastHandler(true)}>Toast Open Button</Button>
    </>
  );
};
export default ToastExample;

6. isClose

isClose prop을 사용하여 Toast에 닫기 버튼을 표시할지 여부를 설정할 수 있습니다. 기본 값은 false이고 true로 설정하면 Toast에 닫기 버튼이 표시되지 않습니다.

닫기 버튼에 대해 true로 설정하고, 위의 Time을 별도로 지정해주지 않으면 닫을수 없으니 꼭 Time을 추가하시길 권장합니다.

"use client";
import Button from "@components/Button/Button";
import Toast from "@components/Toast/Toast";
import { useState } from "react";

const ToastExample = () => {
  const [isToastOpen, setIsToastOpen] = useState(true);
  const onclickToastHandler = (open: boolean) => () => {
    setIsToastOpen(open);
  };
  return (
    <>
      <Toast
        isOpen={isToastOpen}
        onClose={onclickToastHandler(false)}
        isClose={true}
        time="5"
        color="secondary"
      >
        닫기 버튼이 없는 알림입니다.
      </Toast>
      <Button onClick={onclickToastHandler(true)}>Toast Open Button</Button>
    </>
  );
};
export default ToastExample;

7. Progress

isProgress prop을 이용하여 Toast에 진행 바를 표시할 수 있습니다.

Progress 바는 시간이 지남에 따라 비워집니다. 기본 값은 false이고 false일 경우 사라지고 true일 경우 Progress 바가 활성화됩니다.

Time이 지정되지 않으면 Progress 바가 회색이 되고 닫기 버튼을 클릭하지 않는 한 닫히지 않습니다.

"use client";
import Button from "@components/Button/Button";
import Toast from "@components/Toast/Toast";
import { useState } from "react";

const ToastExample = () => {
  const [isToastOpen, setIsToastOpen] = useState(true);
  const onclickToastHandler = (open: boolean) => () => {
    setIsToastOpen(open);
  };
  return (
    <>
      <Toast
        isOpen={isToastOpen}
        onClose={onclickToastHandler(false)}
        isProgress={true}
      >
        진행 바가 포함된 알림입니다.
      </Toast>
      <Button onClick={onclickToastHandler(true)}>Toast Open Button</Button>
    </>
  );
};
export default ToastExample;

8. Progress + Time

isProgress prop과 Time prop을 이용하여 사용자 경험을 향상시키는 Toast를 만들수 있습니다.

"use client";
import Button from "@components/Button/Button";
import Toast from "@components/Toast/Toast";
import { useState } from "react";

const ToastExample = () => {
  const [isToastOpen, setIsToastOpen] = useState(true);
  const onclickToastHandler = (open: boolean) => () => {
    setIsToastOpen(open);
  };
  return (
    <>
      <Toast
        isOpen={isToastOpen}
        onClose={onclickToastHandler(false)}
        isProgress={true}
        time="5"
        variant="border"
        color="secondary"
        >
          진행 바가 포함된 5초후에 사라지는 border 스타일의 Secondary 컬러의 알림입니다.
      </Toast>
      <Button onClick={onclickToastHandler(true)}>Toast Open Button</Button>
    </>
  );
};
export default ToastExample;

9. ClassName

className prop을 이용하여 Toast에 커스텀 스타일을 적용할 수 있습니다.

"use client";
import Button from "@components/Button/Button";
import Toast from "@components/Toast/Toast";
import { useState } from "react";

const ToastExample = () => {
  const [isToastOpen, setIsToastOpen] = useState(true);
  const onclickToastHandler = (open: boolean) => () => {
    setIsToastOpen(open);
  };
  return (
    <>
      <Toast
        isOpen={isToastOpen}
        onClose={onclickToastHandler(false)}
        className="bg-indigo-500 text-white p-5 rounded-lg"
      >
        커스텀 스타일이 적용된 알림입니다.
      </Toast>
      <Button onClick={onclickToastHandler(true)}>Toast Open Button</Button>
    </>
  );
};
export default ToastExample;

10. Props

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

Prop	Description	Type	Default
`size`	Toast의 크기를 설정합니다.	`"small" \| "medium" \| "large"`	`"medium"`
`isOpen`	Toast의 열림 상태를 설정합니다.	`boolean`	`true`
`position`	Toast의 위치를 설정합니다.	`"leftTop" \| "leftBottom" \| "rightTop" \| "rightBottom" \| "centerTop" \| "centerBottom" \| "left" \| "center" \| "right"`	`"leftBottom"`
`color`	Toast의 배경 색상을 설정합니다.	`"primary" \| "secondary" \| "success" \| "warning" \| "danger" \| "red" \| "orange" \| "yellow" \| "green" \| "blue" \| "purple" \| "pink" \| "basic" \| "white" \| "gray" \| "black"`	`"basic"`
`variant`	Toast의 스타일 변형을 설정합니다.	`"solid" \| "border"`	`"solid"`
`isProgress`	Toast에 진행 바를 표시할지 여부를 설정합니다.	`boolean`	`false`
`text`	Toast 내 텍스트의 정렬을 설정합니다.	`"left" \| "center" \| "right"`	`"left"`
`time`	Toast가 자동으로 닫히기 전까지의 시간을 설정합니다.	`string`	`undefined`
`onClose`	Toast가 닫힐 때 호출되는 핸들러입니다.	`() => void`	`undefined`
`className`	Toast의 추가적인 커스텀 스타일을 적용할 때 사용합니다.	`string`	`""`

2. ToastGroup

ToastGroup 컴포넌트는 여러 개의 Toast를 그룹화하여 순차적으로 표시하는 기능을 제공합니다. 이 컴포넌트를 사용하면 다양한 알림 메시지를 시간차로 표시할 수 있습니다.

1.1. Import

import ToastGroup from "@components/Toast/ToastGroup";

1.2. Usage

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

아래 예제에서는 다양한 옵션을 가진 여러 개의 Toast가 순차적으로 표시됩니다.

"use client";
import ToastGroup from "@components/Toast/ToastGroup";
import { useState } from "react";
const ToastGroupExample = () => {
  const [showToastGroup, setShowToastGroup] = useState(true);
  const allToastsCloseHandler = () => {
    setShowToastGroup(false);
  };
  return (
    <>
      <ToastGroup
        position="rightTop"
        onAllClosed={allToastsCloseHandler}
        toasts={[
          {
            children: "가입이 완료되었습니다.",
            time: "5",
            color: "yellow",
            variant: "border",
            isProgress: true,
          },
          {
            children: "로그인으로 이동합니다.",
            time: "6",
            color: "success",
            size: "large",
            variant: "border",
            path: "/login",
            isProgress: true,
          },
          {
            children: "로그아웃 되었습니다.",
            time: "7",
            color: "blue",
            size: "medium",
            variant: "solid",
            isProgress: false,
          },
          {
            children: "종료 되었습니다.",
            time: "8",
            color: "red",
            size: "small",
            isProgress: true,
            variant: "border",
          },
        ]}
      />
    </>
  );
};
export default ToastGroupExample;

2. Position

position prop을 이용하여 Toast Group의 위치를 설정할 수 있습니다.

Toast Group에 한해서 개별 Toast의 위치는 따로 설정하실수 없습니다.

기본 값은 leftBottom 이고, 가능한 값은 leftTop, leftBottom, rightTop,rightBottom, centerTop,centerBottom, left, center,right 입니다.

3. Props

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

Prop	Description	Type	Default
`toasts`	표시할 Toast들의 배열입니다.	`ToastConfig[]`	`[]`
`position`	ToastGroup의 위치를 설정합니다.	`"leftTop" \| "leftBottom" \| "rightTop" \| "rightBottom" \| "centerTop" \| "centerBottom" \| "left" \| "right" \| "center"`	`"leftBottom"`
`onAllClosed`	모든 Toast가 닫혔을 때 호출되는 콜백 함수입니다.	`() => void`	`undefined`