Notification

알림 컴포넌트입니다.

import { Notification } from 'sud-ui';

사용할 때

메세지보다 복잡한 알림을 표시할 때

애플리케이션에서 알림을 푸시할 때

사전 설정

Notification을 사용하기 위해서는 Root Layout에 "<NotificationRoot />"를 포함해야 합니다.

# 1. Using SoonUIDesign Component
## The SoonUIDesign.jsx component file is written as follows.
## You can use theme system, Toast, and Notification all at once without adding them separately.
"use client";

import { ThemeProvider } from "../theme/ThemeContext";
import { ToastRoot } from "./feedback/ToastRoot";
import { NotificationRoot } from "./feedback/NotificationRoot";

export const SoonUIDesign = ({ children, theme, darkTheme, isDarkMode }) => {
  return (
    <ThemeProvider theme={theme} darkTheme={darkTheme} isDarkMode={isDarkMode}>
      {children}
      <ToastRoot />
      <NotificationRoot />
    </ThemeProvider>
  );
};

## Include the SoonUIDesign component in your Root Layout as follows:
"use client";

import { SoonUIDesign } from "sud-ui";

export default function ClientLayout({ children }) {
  return (
    <SoonUIDesign>
      {children}
    </SoonUIDesign>
  );
}

################################################

# 2. Adding Only NotificationRoot
"use client";

import { NotificationRoot } from "sud-ui";

export default function ClientLayout({ children }) {
  return (
    <>
      {children}
      <NotificationRoot />
    </>
  );
}

사용예제

Basic Usage

기본적인 사용방법입니다.

Duration Setting

지속 시간을 설정한 알림입니다. duration을 false로 설정하면 자동으로 닫히지 않으며, 표시되는 닫기 버튼으로 직접 닫을 수 있습니다.

import { notification, Button } from "sud-ui";

export default function Example() {
  const handleOpen = () => {
    notification.open({
      title: "Notification",
      message: "This is a notification",
      duration: 500 // 0.5초 후 자동으로 닫힘
    });
  };

  return (
    <Button colorType="primary" onClick={handleOpen}>
      Open Duration Notification
    </Button>
  );
}

Style Customization

스타일을 커스텀할 수 있습니다.

import { notification, Button, Input } from "sud-ui";
import { useState } from "react";

export default function Example() {
  const [color, setColor] = useState("");

  const handleOpen = () => {
    notification.open({
      title: "Notification",
      message: "This is a notification",
      duration: false,
      colorType: color
    });
  };

  return (
    <div className="flex flex-col gap-[20px]">
      <Input
        value={color}
        onChange={(e) => setColor(e.target.value)}
        placeholder="Enter color type"
      />
      <div>
        <Button colorType="primary" onClick={handleOpen}>
          Open Style Customization Notification
        </Button>
      </div>
    </div>
  );
}

With Footer

푸터를 포함한 알림입니다.

import { notification, Button } from "sud-ui";

export default function Example() {
  const handleOpen = () => {
    notification.open({
      title: "Notification",
      message: "This is a notification",
      footer: <Button colorType="primary">Click me</Button>
    });
  };

  return (
    <Button colorType="primary" onClick={handleOpen}>
      Open Footer Notification
    </Button>
  );
}

Set Position

위치를 설정한 알림입니다.

import { notification, Button } from "sud-ui";
import { TriangleUp, TriangleDown } from "sud-icons";

export default function Example() {
  const position = [
    {
      title: "Top Left",
      position: "top-left",
      icon: <TriangleUp size="16" style={{ transform: "rotate(-45deg)" }} />
    },
    {
      title: "Top Center",
      position: "top-center",
      icon: <TriangleUp size="16" style={{ transform: "rotate(0deg)" }} />
    },
    {
      title: "Top Right",
      position: "top-right",
      icon: <TriangleUp size="16" style={{ transform: "rotate(45deg)" }} />
    },
    {
      title: "Bottom Left",
      position: "bottom-left",
      icon: <TriangleDown size="16" style={{ transform: "rotate(45deg)" }} />
    },
    {
      title: "Bottom Center",
      position: "bottom-center",
      icon: <TriangleDown size="16" style={{ transform: "rotate(0deg)" }} />
    },
    {
      title: "Bottom Right",
      position: "bottom-right",
      icon: <TriangleDown size="16" style={{ transform: "rotate(-45deg)" }} />
    }
  ];

  const handleOpen = (position) => {
    notification.open({
      title: "Notification",
      message: "This is a notification",
      position
    });
  };

  return (
    <div className="grid grid-cols-3 gap-[20px]">
      {position.map((item) => (
        <Button
          colorType="primary"
          key={item.position}
          icon={item.icon}
          onClick={() => handleOpen(item.position)}
        >
          {item.title}
        </Button>
      ))}
    </div>
  );
}

사용 방법

컴포넌트의 props를 설정하는 방법입니다.

title

알림 제목 (ReactNode)

ReactNode

-

message

알림 메시지 (ReactNode)

ReactNode

-

footer

알림 푸터 (ReactNode)

ReactNode

-

duration

알림 지속 시간(ms)입니다. false면 자동으로 닫히지 않고 닫기 버튼으로 직접 닫습니다.

number | false

3000

position

알림 위치 (NotificationPosition)

top-left

|

top-center

|

top-right

|

bottom-left

|

bottom-center

|

bottom-right

"top-right"

onClose

알림이 닫힐 때 실행될 콜백 함수 (() => void)

() => void

-

width

알림 너비 (number | string)

number | string

-

colorType

색상 타입 (defaultColorType)

default

|

primary

|

success

|

warning

|

danger

|

info

|

red

|

rose

|

coral

|

orange

|

volcano

|

apricot

|

yellow

|

gold

|

amber

|

green

|

lime

|

mint

|

blue

|

sky

|

cerulean

|

indigo

|

cobalt

|

navy

|

purple

|

plum

|

orchid

|

forest

|

sage

|

warm-gray

|

cool-gray

|

neutral

|

text

|

ghost

default

color

텍스트 색상(palette값 또는 HEX code)

string

-

background

배경 색상(palette값 또는 HEX code)

string

-

border

테두리 표시 여부

boolean

false

borderType

테두리 스타일 (borderType)

solid

|

dashed

|

dotted

|

double

|

groove

|

ridge

|

inset

|

outset

|

none

solid

borderColor

테두리 색상(palette값 또는 HEX code)

string

-

borderWeight

테두리 두께

number

1

shape

모서리 형태 (shapeType)

square

|

circle

|

rounded

|

capsule

rounded

shadow

그림자 크기 (shadowType)

none

|

sm

|

md

|

lg

md

Soon UI Design

Notification

사용할 때

사전 설정

사용예제

사용 방법

개인정보 처리방침

서비스 약관