23- React 파일 관리자 23장: 건배를 합시다 🍞

이제 요청이 준비되고 성공했지만 요청이 전송되는 동안 로드 표시기를 표시하고 요청이 완료되면 성공 또는 오류 메시지도 표시해야 합니다.
Toast에 위치할 design-system/components/Toast 디렉토리를 생성하고 그 안에 Toast.tsx 파일을 생성해 봅시다.

Mantine Notifications 을 사용할 것입니다. 이미 설치했으므로 다시 설치할 필요가 없습니다.

먼저 루트 구성 요소에서 알림 공급자를 가져오겠습니다.

// src/design-system/components/layouts/Root.tsx
import { AppShell, MantineProvider } from "@mantine/core";
import { NotificationsProvider } from "@mantine/notifications";
import { BasicComponentProps } from "../../utils/types";

/**
 * The root should be used with react-router's configuration for rootComponent.
 * So it will wrap the entire app.
 * It can be useful for single operations as this component will only render once in the entire application life cycle.
 * You may for instance fetch settings from the server before loading the app or a Bearer token to work with the API.
 */
export default function Root({ children }: BasicComponentProps) {
  return (
    <>
      <MantineProvider withGlobalStyles withNormalizeCSS>
        <NotificationsProvider position="top-right">
          <AppShell>{children}</AppShell>
        </NotificationsProvider>
      </MantineProvider>
    </>
  );
}

이제 토스트를 만들어 봅시다.

우리의 토스트 개념

우리가 만들고 있는 토스트는 다음과 같이 간단합니다.

어떤 시점(예: 성공/오류 응답)까지 항상 표시되는 로딩 토스트를 만든 다음 해당 로딩 토스트의 업데이트로 메시지를 표시합니다.

따라서 error 및 success 메서드를 사용하여 객체로 반환하도록 건배해야 합니다.

문서에서 언급했듯이 showNotification 방법을 사용하여 토스트를 표시합니다.

따라서 로딩 제목과 메시지를 가져와 해당 로딩 토스트에 대한 고유 ID를 만들어야 합니다.

그런 다음 오류 및 성공 메시지를 표시하는 데 사용할 두 가지 메서드error 및 success가 있는 개체를 반환합니다.

// src/design-system/components/Toast/index.tsx
import {
  NotificationProps,
  showNotification,
  updateNotification,
} from "@mantine/notifications";
import { Random } from "@mongez/reinforcements";
import { IconCheck, IconX } from "@tabler/icons";
import React from "react";

export function toastLoading(title: React.ReactNode, message: React.ReactNode) {
  // 👇🏻 generate a unique id for the loading toast
  const id = Random.id();

showNotification({
    id,
    loading: true,
    title,
    message,
    autoClose: false,
    disallowClose: true,
  });

// 👇🏻 return an object with two methods to display success and error messages
  return {
    // 👇🏻 success method
    success: (
      title: React.ReactNode,
      message: React.ReactNode,
      notificationProps: Partial<NotificationProps> = {
        color: "green",
        autoClose: 5000,
      },
    ) => {
      updateNotification({
        id,
        title,
        message,
        icon: <IconCheck size={16} />,
        ...notificationProps,
      });
    },
    // 👇🏻 error method
    error: (
      title: React.ReactNode,
      message: React.ReactNode,
      notificationProps: Partial<NotificationProps> = {
        color: "red",
        autoClose: 5000,
      },
    ) => {
      updateNotification({
        id,
        title,
        message,
        icon: <IconX size={16} />,
        ...notificationProps,
      });
    },
  };
}

이제 시도해 보겠습니다. HomePage 구성 요소로 이동하여 사용해 보겠습니다.

// HomePage.tsx
import Helmet from "@mongez/react-helmet";
import FileManager from "app/file-manager";
import { toastLoading } from "design-system/components/Toast";
import { useEffect } from "react";

export default function HomePage() {
  useEffect(() => {
    const loader = toastLoading(
      "Loading",
      "Please wait while we are loading your files",
    );

    setTimeout(() => {
      loader.success("Success", "Your files are loaded successfully");
    }, 2000);
  }, []);
  return (
    <>
      <Helmet title="home" appendAppName={false} />

      <FileManager />
    </>
  );
}

이제 다음과 같은 것을 볼 수 있습니다.



그리고 2초 후



그게 다야❗️

다음 장

다음 장에서는 토스터를 사용하고 생성된 디렉토리를 사용해 볼 것입니다.

기사 저장소

Github Repository에서 챕터 파일을 볼 수 있습니다.

Don't forget the main branch has the latest updated code.

지금 어디 있는지 말해줘

이 시리즈를 저와 함께 후속 조치하는 경우 현재 위치와 어려움을 겪고 있는 부분을 알려주시면 최대한 도와드리겠습니다.

살람.