React에서 블루프린트 UI로 팝오버, 알림 및 토스트 만들기

Blueprint UI는 현대적인 웹 애플리케이션 개발을 위한 재사용 가능한 컴포넌트와 스타일을 제공하는 널리 사용되는 React UI 툴킷입니다. Blueprint UI의 핵심 기능 중 하나는 사용자에게 정보와 피드백을 효과적으로 전달하는 데 필수적인 팝오버, 알림, 그리고 토스트를 손쉽게 생성할 수 있도록 지원한다는 점입니다.

블루프린트 UI 설치

Blueprint UI를 사용하기 위해서는 먼저 해당 라이브러리를 설치해야 합니다. 이는 선호하는 패키지 관리자를 통해 간단하게 처리할 수 있습니다.

npm(Node.js 패키지 관리자)을 사용하여 설치하려면 터미널에서 다음 명령어를 실행하세요.

 npm install @blueprintjs/core

Blueprint UI 설치 후, 라이브러리에서 CSS 파일을 프로젝트에 불러와야 합니다.

 @import "normalize.css";
@import "@blueprintjs/core/lib/css/blueprint.css";
@import "@blueprintjs/icons/lib/css/blueprint-icons.css";

이 CSS 파일들을 임포트함으로써 Blueprint UI가 제공하는 컴포넌트와 스타일을 통합하여 일관성 있는 디자인을 유지할 수 있습니다.

블루프린트 UI를 활용한 팝오버 생성

팝오버는 사용자가 특정 요소 위로 마우스를 가져가거나 클릭할 때 나타나는 정보 툴팁과 유사합니다. 이를 통해 사용자에게 추가 정보나 옵션을 제공할 수 있습니다.

React 애플리케이션에서 Blueprint UI를 사용하여 팝오버를 구현하려면, 먼저 Blueprint UI Popover2 컴포넌트 패키지를 설치해야 합니다.

터미널에서 다음 명령어를 실행하여 설치합니다.

 npm install --save @blueprintjs/popover2

다음으로, CSS 파일에서 해당 패키지의 스타일시트를 임포트합니다.

 @import "@blueprintjs/popover2/lib/css/blueprint-popover2.css";

스타일시트 임포트가 완료되면, Popover2 컴포넌트를 사용하여 애플리케이션 내에서 팝오버 기능을 구현할 수 있습니다.

아래 코드는 그 예시입니다.

 import React from "react";
import { Button } from "@blueprintjs/core";
import { Popover2 } from "@blueprintjs/popover2";function App() {
  const popoverContent = (
    <div>
      <h3>팝오버 제목</h3>
      <p>이것은 팝오버 안에 표시되는 내용입니다.</p>
    </div>
  );
  return (
    <div>
      <Popover2 content={popoverContent}>
        <Button intent="success" text="클릭하세요" />
      </Popover2>
    </div>
  );
}
export default App;

이 코드는 Popover2 컴포넌트를 사용하여 팝오버를 생성합니다. 또한, 팝오버 내부에 표시될 JSX 코드를 포함하는 `popoverContent` 변수를 정의했습니다.

Popover2 컴포넌트는 `content` prop의 값으로 `popoverContent`를 받아 표시할 콘텐츠를 설정합니다. 여기서, Popover2 컴포넌트는 Button 컴포넌트를 감싸고 있으며, 버튼 클릭 시 팝오버가 나타나도록 설정되어 있습니다.

팝오버의 기본적인 형태는 다음과 같습니다.

팝오버 콘텐츠의 스타일을 변경하려면 `className` prop을 `popoverContent` JSX 코드에 추가할 수 있습니다.

 const popoverContent = (
  <div className="popover">
    <h3>팝오버 제목</h3>
    <p>이것은 팝오버 안에 표시되는 내용입니다.</p>
  </div>
);

그리고 해당 CSS 클래스를 CSS 파일에 정의합니다.

 .popover {
  padding: 1rem;
  background-color: #e2e2e2;
  font-family: cursive;
}

이제 팝오버가 조금 더 보기 좋아졌을 것입니다.

Popover2 컴포넌트는 다양한 설정 옵션을 제공하는 여러 prop들을 제공합니다. 주요 prop으로는 `popoverClassName`, `onInteraction`, `isOpen`, `minimal`, 그리고 `placement` 등이 있습니다.

`placement` prop은 대상 요소를 기준으로 팝오버의 기본 위치를 결정합니다. 사용 가능한 값은 다음과 같습니다.

auto
auto-start
auto-end
top
top-start
top-end
bottom
bottom-start
bottom-end
right
right-start
right-end
left
left-start
left-end

`popoverClassName`을 사용하여 팝오버 요소에 대한 CSS 클래스 이름을 설정할 수 있습니다. 이를 사용하기 위해 먼저 CSS 파일에 해당 클래스를 생성합니다.

예를 들면 다음과 같습니다.

 .custom-popover {
  background-color: #e2e2e2;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
  border-radius: 12px;
  padding: 1rem;
}

CSS 클래스가 정의되면 `popoverClassName` prop을 사용하여 사용자 정의 스타일을 Popover2 컴포넌트에 적용할 수 있습니다.

 <Popover2
content={popoverContent}
placement="bottom-end"
popoverClassName="custom-popover"
minimal={true}
>
<Button intent="success" text="클릭하세요" />
</Popover2>

`minimal` prop은 팝오버의 스타일을 제어하며, 불리언 값을 받습니다. `true`로 설정하면 팝오버 스타일이 최소화되어 화살표가 사라지고 단순한 박스 형태가 됩니다.

알림 생성

알림은 사용자에게 중요한 정보나 조치를 알리기 위해 화면에 나타나는 메시지입니다. 일반적으로 오류 메시지, 성공 메시지 또는 경고를 표시하는 데 사용됩니다.

Blueprint UI에서 알림을 만드는 방법은 Chakra UI를 사용하여 알림을 생성하는 것과 유사합니다. Blueprint UI에서는 `Alert` 컴포넌트를 사용하여 React 애플리케이션에서 알림을 생성합니다.

다음은 그 예시입니다.

 import React from "react";
import { Alert, Button } from "@blueprintjs/core";function App() {
  const [isOpen, setIsOpen] = React.useState(false);
  const handleOpen = () => {
    setIsOpen(true);
  };
  const handleClose = () => {
    setIsOpen(false);
  };
  return (
    <div>
      <Alert isOpen={isOpen} onClose={handleClose} confirmButtonText="닫기">
        <p>이것은 알림 메시지입니다.</p>
      </Alert>
      <Button text="클릭하세요" intent="success" onClick={handleOpen} />
    </div>
  );
}
export default App;

위 예시는 `@blueprintjs/core` 패키지에서 `Alert` 컴포넌트를 가져오는 방법을 보여줍니다. `Alert` 컴포넌트는 화면에 경고 메시지를 표시하며, `isOpen`, `onClose`, 그리고 `confirmButtonText`의 세 가지 prop을 필요로 합니다.

`isOpen` prop은 알림이 표시될지 여부를 결정합니다. 알림을 표시하려면 `true`로 설정하고, 숨기려면 `false`로 설정합니다. `onClose` prop은 사용자가 알림을 닫을 때 실행되는 콜백 함수입니다.

마지막으로, `confirmButtonText` prop은 확인 버튼에 표시될 텍스트를 지정합니다.

다음은 위의 예제 코드에서 생성된 알림입니다.

블루프린트 UI를 이용한 토스트 생성

토스트는 사용자에게 중요한 정보나 이벤트를 알리기 위해 화면에 나타나는 짧은 알림입니다. 알림과 유사하지만 일반적으로 화면을 방해하지 않고 빠르게 사라집니다.

React 애플리케이션에서 Blueprint UI를 사용하여 토스트를 생성하려면 `OverlayToaster` 컴포넌트를 사용합니다. `OverlayToaster` 컴포넌트는 개별 토스트를 생성하는 데 사용되는 Toaster 인스턴스를 생성합니다.

아래 코드는 토스트 생성의 예시입니다.

 import React from "react";
import { OverlayToaster, Button } from "@blueprintjs/core";const toasterInstance = OverlayToaster.create({ position: "top-right" });
function App() {
  const showToast = () => {
    toasterInstance.show({
      message: "이것은 토스트입니다.",
      intent: "primary",
      timeout: 3000,
      isCloseButtonShown: false,
      icon: "bookmark",
    });
  };
  return (
    <div>
      <Button text="클릭하세요" intent="success" onClick={showToast} />
    </div>
  );
}
export default App;

위 코드 블록은 `OverlayToaster.create` 메서드를 사용하여 토스터 인스턴스를 생성하고, `position` prop을 사용하여 위치를 지정하는 방법을 보여줍니다.

또한, 토스트를 표시하는 `showToast` 함수를 정의했습니다. 이 함수는 호출 시 `toasterInstance`의 `show` 메서드를 사용하여 토스트를 표시합니다. `show` 메서드는 `message`, `intent`, `timeout`, `isCloseButtonShown`, 그리고 `icon` prop을 포함하는 객체를 인자로 받습니다.

`message` prop은 토스트에 표시될 텍스트 내용을 지정하고, `intent` prop은 토스트의 유형을 지정합니다. 토스트의 스타일은 이 값에 따라 달라집니다.

`timeout` prop을 사용하여 토스트 알림이 표시되는 시간을 제어할 수 있습니다. `icon` prop은 토스트에 표시할 아이콘 요소를 지정합니다. `isCloseButtonShown` prop을 사용하여 토스트에 닫기 버튼을 표시할지 여부를 제어할 수 있습니다.

위의 코드 블록은 버튼을 클릭할 때 아래 이미지와 같이 토스트 알림을 생성합니다.

만약 React 애플리케이션에서 매력적인 토스트 알림을 생성하고 싶다면, Blueprint UI는 좋은 선택이 될 수 있습니다. Blueprint UI는 애플리케이션의 스타일과 일관성 있는 알림을 만드는 데 사용할 수 있는 다양한 사전 정의된 컴포넌트를 제공합니다.

하지만, Blueprint UI의 모든 기능이 필요하지 않은 작은 프로젝트를 진행하는 경우, React Toastify는 멋진 알림을 생성하면서도 가볍게 사용할 수 있는 대안이 될 수 있습니다.

토스트, 팝오버 및 알림으로 사용자 경험 향상

이제 Blueprint UI를 사용하여 React 애플리케이션에서 팝오버, 알림, 그리고 토스트를 만드는 방법을 알게 되었습니다. 이러한 컴포넌트들은 사용자에게 정보와 피드백을 제공하는 데 필수적이며, 애플리케이션의 사용자 경험을 크게 향상시킬 수 있습니다. 이러한 컴포넌트들을 최소한의 노력과 사용자 정의를 통해 쉽게 만들 수 있습니다.