알림

알림 (Notification)

뷰포트의 네 모서리 어디에서나 알림 메시지를 띄울 수 있는 컴포넌트예요. 복잡한 내용이나 사용자 상호작용에 따른 피드백을 화면 구석에 표시해요.

출처: 문서

본문

언제 사용하나요 (When To Use)

뷰포트의 네 모서리 어디에서나 알림 메시지를 표시할 때 사용해요. 보통 다음과 같은 경우에 써요.

복잡한 내용을 담은 알림
사용자 상호작용에 따른 피드백을 제공하거나, 사용자가 따라야 할 다음 단계에 대한 세부 정보를 보여 주는 알림
애플리케이션에서 자체적으로 밀어 올리는(push) 알림

예시 (Examples)

훅 사용 (권장)

notification.useNotification을 사용하면 컨텍스트에 접근할 수 있는 contextHolder를 얻을 수 있어요. 참고로, 정적 메서드 대신 최상위 등록 방식을 권장해요. 정적 메서드는 컨텍스트를 사용하지 못하고 ConfigProvider의 데이터도 적용되지 않기 때문이에요.

import React, { useMemo } from 'react';
import {
  RadiusBottomleftOutlined,
  RadiusBottomrightOutlined,
  RadiusUpleftOutlined,
  RadiusUprightOutlined,
} from '@ant-design/icons';
import { Button, Divider, notification, Space } from 'antd';
import type { NotificationArgsProps } from 'antd';

type NotificationPlacement = NotificationArgsProps['placement'];

const Context = React.createContext({ name: 'Default' });

const App: React.FC = () => {
  const [api, contextHolder] = notification.useNotification();

  const openNotification = (placement: NotificationPlacement) => {
    api.info({
      title: `Notification ${placement}`,
      description: <Context.Consumer>{({ name }) => `Hello, ${name}!`}</Context.Consumer>,
      placement,
    });
  };

  const contextValue = useMemo(() => ({ name: 'Ant Design' }), []);

  return (
    <Context.Provider value={contextValue}>
      {contextHolder}
      <Space>
        <Button
          type="primary"
          onClick={() => openNotification('topLeft')}
          icon={<RadiusUpleftOutlined />}
        >
          topLeft
        </Button>
        <Button
          type="primary"
          onClick={() => openNotification('topRight')}
          icon={<RadiusUprightOutlined />}
        >
          topRight
        </Button>
      </Space>
      <Divider />
      <Space>
        <Button
          type="primary"
          onClick={() => openNotification('bottomLeft')}
          icon={<RadiusBottomleftOutlined />}
        >
          bottomLeft
        </Button>
        <Button
          type="primary"
          onClick={() => openNotification('bottomRight')}
          icon={<RadiusBottomrightOutlined />}
        >
          bottomRight
        </Button>
      </Space>
    </Context.Provider>
  );
};

export default App;

알림이 표시되는 시간 (Duration)

Duration으로 알림이 열려 있는 시간을 지정할 수 있어요. 설정한 시간이 지나면 알림은 자동으로 닫혀요. 지정하지 않으면 기본값은 4.5초예요. 값을 0으로 설정하면 알림 상자가 자동으로 절대 닫히지 않아요.

import React from 'react';
import { Button, notification } from 'antd';

const App: React.FC = () => {
  const [api, contextHolder] = notification.useNotification();

  const openNotification = () => {
    api.open({
      title: 'Notification Title',
      description:
        'I will never close automatically. This is a purposely very very long description that has many many characters and words.',
      duration: 0,
    });
  };

  return (
    <>
      {contextHolder}
      <Button type="primary" onClick={openNotification}>
        Open the notification box
      </Button>
    </>
  );
};

export default App;

아이콘이 있는 알림

왼쪽에 아이콘이 함께 표시되는 알림 상자예요.

import React from 'react';
import { Button, Flex, notification } from 'antd';

type NotificationType = 'success' | 'info' | 'warning' | 'error';

const App: React.FC = () => {
  const [api, contextHolder] = notification.useNotification();

  const openNotificationWithIcon = (type: NotificationType) => {
    api[type]({
      title: 'Notification Title',
      description:
        'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
    });
  };

  return (
    <>
      {contextHolder}
      <Flex gap={8} wrap="wrap">
        <Button
          color="green"
          variant="outlined"
          onClick={() => openNotificationWithIcon('success')}
        >
          Success
        </Button>
        <Button color="blue" variant="outlined" onClick={() => openNotificationWithIcon('info')}>
          Info
        </Button>
        <Button
          color="yellow"
          variant="outlined"
          onClick={() => openNotificationWithIcon('warning')}
        >
          Warning
        </Button>
        <Button color="red" variant="outlined" onClick={() => openNotificationWithIcon('error')}>
          Error
        </Button>
      </Flex>
    </>
  );
};

export default App;

닫기 버튼 커스터마이즈

닫기 버튼의 스타일이나 글꼴을 커스터마이즈할 수 있어요.

import React from 'react';
import { Button, notification, Space } from 'antd';

const close = () => {
  console.log(
    'Notification was closed. Either the close button was clicked or duration time elapsed.',
  );
};

const App: React.FC = () => {
  const [api, contextHolder] = notification.useNotification();

  const openNotification = () => {
    const key = `open${Date.now()}`;
    const btn = (
      <Space>
        <Button type="link" size="small" onClick={() => api.destroy()}>
          Destroy All
        </Button>
        <Button type="primary" size="small" onClick={() => api.destroy(key)}>
          Confirm
        </Button>
      </Space>
    );
    api.open({
      title: 'Notification Title',
      description:
        'A function will be be called after the notification is closed (automatically after the "duration" time of manually).',
      btn,
      key,
      onClose: close,
    });
  };

  return (
    <>
      {contextHolder}
      <Button type="primary" onClick={openNotification}>
        Open the notification box
      </Button>
    </>
  );
};

export default App;

아이콘 커스터마이즈

아이콘은 어떤 React 노드로도 커스터마이즈할 수 있어요.

import React from 'react';
import { SmileOutlined } from '@ant-design/icons';
import { Button, notification } from 'antd';

const App: React.FC = () => {
  const [api, contextHolder] = notification.useNotification();

  const openNotification = () => {
    api.open({
      title: 'Notification Title',
      description:
        'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
      icon: <SmileOutlined style={{ color: '#108ee9' }} />,
    });
  };

  return (
    <>
      {contextHolder}
      <Button type="primary" onClick={openNotification}>
        Open the notification box
      </Button>
    </>
  );
};

export default App;

위치 (Placement)

placement를 통해 알림 상자를 뷰포트의 top, bottom, topLeft, topRight, bottomLeft, bottomRight 어느 위치에든 나타나게 할 수 있어요.

import React from 'react';
import {
  BorderBottomOutlined,
  BorderTopOutlined,
  RadiusBottomleftOutlined,
  RadiusBottomrightOutlined,
  RadiusUpleftOutlined,
  RadiusUprightOutlined,
} from '@ant-design/icons';
import { Button, Divider, notification, Space } from 'antd';
import type { NotificationArgsProps } from 'antd';

type NotificationPlacement = NotificationArgsProps['placement'];

const App: React.FC = () => {
  const [api, contextHolder] = notification.useNotification();

  const openNotification = (placement: NotificationPlacement) => {
    api.info({
      title: `Notification ${placement}`,
      description:
        'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
      placement,
    });
  };

  return (
    <>
      {contextHolder}
      <Space>
        <Button type="primary" onClick={() => openNotification('top')} icon={<BorderTopOutlined />}>
          top
        </Button>
        <Button
          type="primary"
          onClick={() => openNotification('bottom')}
          icon={<BorderBottomOutlined />}
        >
          bottom
        </Button>
      </Space>
      <Divider />
      <Space>
        <Button
          type="primary"
          onClick={() => openNotification('topLeft')}
          icon={<RadiusUpleftOutlined />}
        >
          topLeft
        </Button>
        <Button
          type="primary"
          onClick={() => openNotification('topRight')}
          icon={<RadiusUprightOutlined />}
        >
          topRight
        </Button>
      </Space>
      <Divider />
      <Space>
        <Button
          type="primary"
          onClick={() => openNotification('bottomLeft')}
          icon={<RadiusBottomleftOutlined />}
        >
          bottomLeft
        </Button>
        <Button
          type="primary"
          onClick={() => openNotification('bottomRight')}
          icon={<RadiusBottomrightOutlined />}
        >
          bottomRight
        </Button>
      </Space>
    </>
  );
};

export default App;

메시지 내용 업데이트

고유한 key로 내용을 업데이트할 수 있어요.

import React from 'react';
import { Button, notification } from 'antd';

const key = 'updatable';

const App: React.FC = () => {
  const [api, contextHolder] = notification.useNotification();
  const openNotification = () => {
    api.open({
      key,
      title: 'Notification Title',
      description: 'description.',
    });

    setTimeout(() => {
      api.open({
        key,
        title: 'New Title',
        description: 'New description.',
      });
    }, 1000);
  };

  return (
    <>
      {contextHolder}
      <Button type="primary" onClick={openNotification}>
        Open the notification box
      </Button>
    </>
  );
};

export default App;

스택 (Stack)

기본적으로 활성화되는 스택 설정이에요. 알림 수가 threshold를 넘으면 알림이 스택으로 쌓여요. 접힌 스택에는 최대 3개의 알림이 표시돼요.

import React, { useMemo } from 'react';
import { Button, Divider, InputNumber, notification, Space, Switch } from 'antd';

const Context = React.createContext({ name: 'Default' });

const App: React.FC = () => {
  const [enabled, setEnabled] = React.useState(true);
  const [threshold, setThreshold] = React.useState(3);
  const [api, contextHolder] = notification.useNotification({
    stack: enabled
      ? {
          threshold,
        }
      : false,
  });

  const openNotification = () => {
    api.open({
      title: 'Notification Title',
      description: `${Array.from(
        { length: Math.round(Math.random() * 5) + 1 },
        () => 'This is the content of the notification.',
      ).join('\n')}`,
      duration: false,
    });
  };

  const contextValue = useMemo(() => ({ name: 'Ant Design' }), []);

  return (
    <Context.Provider value={contextValue}>
      {contextHolder}
      <div>
        <Space size="large">
          <Space style={{ width: '100%' }}>
            <span>Enabled: </span>
            <Switch checked={enabled} onChange={(v) => setEnabled(v)} />
          </Space>
          <Space style={{ width: '100%' }}>
            <span>Threshold: </span>
            <InputNumber
              disabled={!enabled}
              value={threshold}
              step={1}
              min={1}
              max={10}
              onChange={(v) => setThreshold(v || 0)}
            />
          </Space>
        </Space>
        <Divider />
        <Button type="primary" onClick={openNotification}>
          Open the notification box
        </Button>
      </div>
    </Context.Provider>
  );
};

export default App;

진행률 표시

자동으로 닫히는 알림에 진행률 막대를 표시할 수 있어요.

import React from 'react';
import { Button, notification, Space } from 'antd';

const App: React.FC = () => {
  const [api, contextHolder] = notification.useNotification();

  const openNotification = (pauseOnHover: boolean) => () => {
    api.open({
      title: 'Notification Title',
      description:
        'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
      showProgress: true,
      pauseOnHover,
    });
  };

  return (
    <>
      {contextHolder}
      <Space>
        <Button type="primary" onClick={openNotification(true)}>
          Pause on hover
        </Button>
        <Button type="primary" onClick={openNotification(false)}>
          Don&apos;t pause on hover
        </Button>
      </Space>
    </>
  );
};

export default App;

정적 메서드 (비권장)

정적 메서드는 ConfigProvider가 제공하는 Context를 사용할 수 없어요. layer를 활성화하면 스타일 오류가 발생할 수도 있어요. hooks 버전이나 App에서 제공하는 인스턴스를 우선 사용해 주세요.

import React from 'react';
import { Button, notification } from 'antd';

const openNotification = () => {
  notification.open({
    title: 'Notification Title',
    description:
      'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
    onClick: () => {
      console.log('Notification Clicked!');
    },
  });
};
const App: React.FC = () => (
  <Button type="primary" onClick={openNotification}>
    Open the notification box
  </Button>
);

export default App;

진행률 막대 색상 커스터마이즈

컴포넌트 토큰을 설정해 진행률 막대 색상을 커스터마이즈할 수 있어요.

import React from 'react';
import { Button, ConfigProvider, notification } from 'antd';
import { createStyles } from 'antd-style';

const COLOR_BG = 'linear-gradient(135deg,#6253e1, #04befe)';

const useStyle = createStyles(({ cssVar, prefixCls, css }) => ({
  linearGradientButton: css`
    &.${prefixCls}-btn-primary:not([disabled]):not(.${prefixCls}-btn-dangerous) {
      > span {
        position: relative;
      }

      &::before {
        content: '';
        background: ${COLOR_BG};
        position: absolute;
        inset: -1px;
        opacity: 1;
        transition: all ${cssVar.motionDurationSlow};
        border-radius: inherit;
      }

      &:hover::before {
        opacity: 0;
      }
    }
  `,
}));

const App: React.FC = () => {
  const { styles } = useStyle();
  const [api, contextHolder] = notification.useNotification();

  const openNotification = () => {
    api.open({
      title: 'Customize progress bar color',
      description: 'You can use component token to customize the progress bar color',
      showProgress: true,
      duration: 20,
    });
  };

  return (
    <ConfigProvider
      button={{
        className: styles.linearGradientButton,
      }}
      theme={{
        components: {
          Notification: {
            progressBg: COLOR_BG,
          },
        },
      }}
    >
      {contextHolder}
      <Button type="primary" onClick={openNotification}>
        Show custom progress color
      </Button>
    </ConfigProvider>
  );
};

export default App;

시맨틱 스타일 커스터마이즈

classNames와 styles로 Notification의 시맨틱 DOM 스타일을 커스터마이즈할 수 있어요.

import React from 'react';
import { Button, notification, Space } from 'antd';
import type { GetProp, NotificationArgsProps } from 'antd';

const defaultStyles: GetProp<NotificationArgsProps, 'styles', 'Return'> = {
  root: {
    backgroundColor: '#f6ffed',
    border: '2px solid #95de64',
    borderRadius: 16,
    boxShadow: '4px 4px 0 #d9f7be',
  },
  icon: {
    color: '#237804',
  },
  title: {
    color: '#237804',
    fontWeight: 600,
  },
  description: {
    color: '#3f6600',
  },
};

const styleFn: NotificationArgsProps['styles'] = ({
  props,
}): GetProp<NotificationArgsProps, 'styles', 'Return'> => {
  if (props.type === 'error') {
    return {
      ...defaultStyles,
      root: {
        ...defaultStyles.root,
        backgroundColor: '#fff2f0',
        borderColor: '#ffccc7',
        boxShadow: '4px 4px 0 #ffccc7',
      },
      icon: {
        color: '#cf1322',
      },
      title: {
        color: '#cf1322',
      },
      description: {
        color: '#5c0011',
      },
    };
  }
  return defaultStyles;
};

const App: React.FC = () => {
  const [api, contextHolder] = notification.useNotification();

  const sharedProps: NotificationArgsProps = {
    title: 'Notification Title',
    description: 'This is a notification description.',
    duration: false,
  };

  const openDefault = () => {
    api.info({
      ...sharedProps,
      styles: defaultStyles,
    });
  };

  const openError = () => {
    api.error({
      ...sharedProps,
      type: 'error',
      styles: styleFn,
    });
  };

  return (
    <>
      {contextHolder}
      <Space>
        <Button type="primary" onClick={openDefault}>
          Default Notification
        </Button>
        <Button onClick={openError}>Error Notification</Button>
      </Space>
    </>
  );
};

export default App;

API

공통 props 참조: Common props

notification.success(config)
notification.error(config)
notification.info(config)
notification.warning(config)
notification.open(config)
notification.destroy(key?: String)

config의 속성은 다음과 같아요.

속성	설명	타입	기본값	버전	전역 설정
actions	커스터마이즈된 버튼 그룹	ReactNode	-	5.24.0	×
~~btn~~	커스터마이즈된 닫기 버튼 그룹, `actions`를 대신 사용하세요	ReactNode	-	-	×
className	커스터마이즈된 CSS 클래스	string	-	-	5.7.0
classNames	컴포넌트 내 각 시맨틱 구조에 대한 클래스를 커스터마이즈. 객체 또는 함수를 지원	Record<SemanticDOM, string> \| (info: { props })=> Record<SemanticDOM, string>	-		6.0.0
closable	닫기 버튼 표시 여부	boolean \| ClosableType	true	-	×
closeIcon	커스텀 닫기 아이콘	ReactNode	true	5.7.0: null 또는 false로 설정하면 닫기 버튼이 숨겨짐	5.14.0
description	알림 상자의 내용 (필수)	ReactNode	-	-	×
duration	Notification이 닫히기까지의 시간(초). `0` 또는 `false`로 설정하면 자동으로 닫히지 않음	number \| false	4.5	-	×
showProgress	자동으로 닫히는 알림에 진행률 막대 표시	boolean		5.18.0	×
pauseOnHover	호버 시 타이머를 계속 실행할지 여부	boolean	true	5.18.0	×
icon	커스터마이즈된 아이콘	ReactNode	-	-	×
key	Notification의 고유 식별자	string	-	-	×
title	알림 상자의 제목	ReactNode	-	6.0.0	×
~~message~~	알림 상자의 제목 (비권장), `title`을 대신 사용하세요	ReactNode	-	-	×
placement	Notification 위치, `top` \| `topLeft` \| `topRight` \| `bottom` \| `bottomLeft` \| `bottomRight` 중 하나	string	`topRight`	-	×
role	스크린 리더가 인식하는 알림 내용의 시맨틱. 기본값은 `alert`	`alert \| status`	`alert`	5.6.0	×
style	커스터마이즈된 인라인 스타일	CSSProperties	-	-	5.7.0
styles	컴포넌트 내 각 시맨틱 구조에 대한 인라인 스타일을 커스터마이즈. 객체 또는 함수를 지원	Record<SemanticDOM, CSSProperties> \| (info: { props })=> Record<SemanticDOM, CSSProperties>	-		6.0.0
onClick	알림이 클릭되었을 때 호출되는 함수를 지정	function	-	-	×
onClose	알림이 닫힐 때 트리거	function	-	-	×
props	`data-`, `aria-`, `role` props를 담을 수 있는 객체로, 알림 `div`에 적용. TypeScript에서는 `data-*` 대신 `data-testid`만 허용. https://github.com/microsoft/TypeScript/issues/28960 참고	Object	-	-	×

notification.useNotification(config)

config의 속성은 다음과 같아요.

속성	설명	타입	기본값	버전	전역 설정
bottom	`placement`가 `bottom` `bottomRight` `bottomLeft`일 때 뷰포트 아래에서부터의 거리(픽셀)	number	24		×
closeIcon	커스텀 닫기 아이콘	ReactNode	true	5.7.0: null 또는 false로 설정하면 닫기 버튼이 숨겨짐	5.14.0
getContainer	Notification의 마운트 노드를 반환	() => HTMLNode	() => document.body		×
placement	Notification 위치, `top` \| `topLeft` \| `topRight` \| `bottom` \| `bottomLeft` \| `bottomRight` 중 하나	string	`topRight`		×
showProgress	자동으로 닫히는 알림에 진행률 막대 표시	boolean		5.18.0	×
pauseOnHover	호버 시 타이머를 계속 실행할지 여부	boolean	true	5.18.0	×
rtl	RTL 모드 활성화 여부	boolean	false		×
stack	알림 수가 threshold를 넘으면 스택으로 쌓음	boolean \| `{ threshold: number }`	`{ threshold: 3 }`	5.10.0	×
top	`placement`가 `top` `topRight` `topLeft`일 때 뷰포트 위에서부터의 거리(픽셀)	number	24		×
maxCount	최대 표시 Notification 수, 한도를 초과하면 가장 오래된 것을 버림	number	-	4.17.0	×

notification은 기본 옵션을 지정하는 데 쓰는 전역 config() 메서드도 제공해요. 이 메서드를 사용하면 이후 표시되는 모든 알림 상자가 이 전역 옵션을 반영해요.

ClosableType

속성	설명	타입	기본값	버전
closeIcon	커스텀 닫기 아이콘	ReactNode	undefined	-
onClose	알림이 닫힐 때 트리거	Function	-	-

전역 설정 (Global configuration)

notification.config(options)

ConfigProvider로 전역 설정을 사용하면 시스템이 기본적으로 RTL 모드를 자동으로 켜요.(4.3.0+)

단독으로 사용하려면 다음 설정으로 RTL 모드를 켤 수 있어요.

notification.config

notification.config({
  placement: 'bottomRight',
  bottom: 50,
  duration: 3,
  rtl: true,
});

속성	설명	타입	기본값	버전
bottom	`placement`가 `bottom` `bottomRight` `bottomLeft`일 때 뷰포트 아래에서부터의 거리(픽셀)	number	24
closeIcon	커스텀 닫기 아이콘	ReactNode	true	5.7.0: null 또는 false로 설정하면 닫기 버튼이 숨겨짐
duration	Notification이 닫히기까지의 시간(초). 0 또는 null로 설정하면 자동으로 닫히지 않음	number	4.5
getContainer	Notification의 마운트 노드를 반환하지만, 여전히 전체 화면에 표시됨	() => HTMLNode	() => document.body
placement	Notification 위치, `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` 중 하나	string	`topRight`
showProgress	자동으로 닫히는 알림에 진행률 막대 표시	boolean		5.18.0
pauseOnHover	호버 시 타이머를 계속 실행할지 여부	boolean	true	5.18.0
rtl	RTL 모드 활성화 여부	boolean	false
top	`placement`가 `top` `topRight` `topLeft`일 때 뷰포트 위에서부터의 거리(픽셀)	number	24
maxCount	최대 표시 Notification 수, 한도를 초과하면 가장 오래된 것을 버림	number	-	4.17.0

Semantic DOM

https://ant.design/components/notification/semantic.md

Design Token

Component Token (Notification)

토큰 이름	설명	타입	기본값
colorErrorBg	오류 알림 컨테이너의 배경색	string
colorInfoBg	정보 알림 컨테이너의 배경색	string
colorSuccessBg	성공 알림 컨테이너의 배경색	string
colorWarningBg	경고 알림 컨테이너의 배경색	string
progressBg	Notification 진행률 막대의 배경색	string	linear-gradient(90deg, #69b1ff, #1677ff)
width	Notification의 너비	string \| number	384
zIndexPopup	Notification의 z-index	number	2050

Global Token

토큰 이름	설명	타입
borderRadiusLG	LG 크기의 테두리 반경. Card, Modal 등 큰 테두리 반경 컴포넌트에서 사용	number
borderRadiusSM	SM 크기의 테두리 반경. Button, Input, Select 등 작은 크기 입력 컴포넌트에서 사용	number
boxShadow	요소의 박스 섀도 스타일 제어	string
colorBgElevated	팝업 레이어의 컨테이너 배경색. 다크 모드에서는 `colorBgContainer`보다 밝음. 예: modal, pop-up, menu 등	string
colorBgTextActive	활성 상태 텍스트의 배경색 제어	string
colorBgTextHover	호버 상태 텍스트의 배경색 제어	string
colorError	작업 실패를 나타내는 시각 요소. 예: error Button, error Result 컴포넌트 등	string
colorIcon	약한 동작. `allowClear`나 Alert 닫기 버튼 등	string
colorIconHover	약한 동작의 호버 색상. `allowClear`나 Alert 닫기 버튼 등	string
colorInfo	Token 시퀀스의 작업 정보를 나타내는 데 사용. Alert, Tag, Progress 등 컴포넌트가 이 map 토큰을 사용	string
colorPrimaryBorder	메인 색 그라데이션의 획 색상. Slider 등 컴포넌트의 획에 사용	string
colorSuccess	작업 성공의 토큰 시퀀스. Result, Progress 등 컴포넌트가 이 map 토큰을 사용	string
colorText	W3C 표준을 따르는 기본 텍스트 색상. 가장 어두운 중립 색	string
colorTextHeading	제목의 글꼴 색상 제어	string
colorWarning	경고 map 토큰. Notification, Alert 등. Alert 또는 제어 컴포넌트(예: Input)가 이 map 토큰을 사용	string
controlHeightLG	LG 컴포넌트 높이	number
fontFamily	Ant Design의 글꼴 패밀리는 시스템 기본 인터페이스 글꼴을 우선하며, 화면 표시에 적합한 대체 글꼴 라이브러리를 제공	string
fontSize	디자인 시스템에서 가장 널리 쓰이는 글꼴 크기. 텍스트 그라데이션이 여기서 파생됨	number
fontSizeLG	큰 글꼴 크기	number
lineHeight	텍스트의 줄 높이	number
lineHeightLG	큰 텍스트의 줄 높이	number
lineWidthFocus	컴포넌트가 포커스 상태일 때 라인의 너비 제어	number
margin	요소의 여백을 중간 크기로 제어	number
marginLG	요소의 여백을 큰 크기로 제어	number
marginSM	요소의 여백을 중간-작은 크기로 제어	number
marginXS	요소의 여백을 작은 크기로 제어	number
marginXXL	요소의 여백을 가장 큰 크기로 제어	number
motionDurationMid	중간 속도 모션. 중간 요소 애니메이션 상호작용에 사용	string
motionDurationSlow	느린 속도 모션. 큰 요소 애니메이션 상호작용에 사용	string
motionEaseInOut	사전 설정된 모션 커브	string
paddingContentHorizontalLG	콘텐츠 요소의 가로 패딩 제어, 대형 화면 장치에 적합	number
paddingLG	요소의 큰 패딩 제어	number
paddingMD	요소의 중간 패딩 제어	number

FAQ

notification에서 context, redux, ConfigProvider `locale/prefixCls/theme`에 접근할 수 없는 이유가 뭔가요? {#faq-context-redux}

notification 메서드를 호출하면 antd가 ReactDOM.render로 React 인스턴스를 동적으로 생성하는데, 이 인스턴스는 원래 코드와 다른 실행 컨텍스트에서 실행돼요.

(ConfigProvider context 같은) 컨텍스트 정보가 필요하다면 notification.useNotification을 사용해 api 인스턴스와 contextHolder 노드를 얻은 뒤 children에 넣어 주세요.

const [api, contextHolder] = notification.useNotification();

return (
  <Context1.Provider value="Ant">
    {/* contextHolder는 Context1 안에 있으므로 api는 Context1의 값을 얻게 됩니다 */}
    {contextHolder}
    <Context2.Provider value="Design">
      {/* contextHolder는 Context2 밖에 있으므로 api는 Context2의 값을 얻지 **못합니다** */}
    </Context2.Provider>
  </Context1.Provider>
);

참고: hooks를 사용한다면 contextHolder를 반드시 children에 넣어야 해요. 컨텍스트 연결이 필요 없다면 원래 메서드를 그대로 써도 돼요.

App wrapper 컴포넌트를 쓰면 useNotification 등 contextHolder를 수동으로 심어야 하는 메서드의 문제를 간단히 해결할 수 있어요.

정적 메서드의 prefixCls를 어떻게 설정하나요? {#faq-set-prefix-cls}

ConfigProvider.config로 설정할 수 있어요.

Notification에서 `style={{ width: 'max-content' }}`가 동작하지 않는 이유는 뭔가요? {#faq-notification-width}

Notification은 고정 너비 레이아웃을 사용해 스택 카드 스타일을 일관되게 유지해요. 그래서 외부 notification 노드에서는 max-content, min-content, fit-content(...) 같은 고유(intrinsic) 너비를 지원하지 않아요.

알림 너비를 커스터마이즈하려면 컴포넌트 토큰 width를 사용하세요.

<ConfigProvider
  theme={{
    components: {
      Notification: {
        width: 480,
      },
    },
  }}
>
  <App />
</ConfigProvider>

내용 자체가 크기에 맞게 조절되길 원한다면 title이나 description에 자신의 ReactNode를 렌더링하고, notification 루트 대신 내부 노드에 max-content를 적용하세요.

알림