React와 Typescript를 사용하여 처음부터 파일 관리자를 만들어 봅시다. 4장: FileManager 구성 요소 만들기

이제 정말 감탄하지 않는 부분으로 가 보겠습니다. UI로 작업하고 FileManager 구성 요소를 생성해 보겠습니다. 먼저 허용되는 소품을 정의해 보겠습니다.

For encapsulation behavior, i'll add the FileManager types file inside the component directory.

file-manager/components/FileManager 디렉토리를 만든 다음 그 안에 FileManager.types.ts를 만듭니다.

// file-manager/components/FileManager/FileManager.types.ts
import { Node } from "../../types/FileManager.types";

export type FileManagerProps = {
  /**
   * Open State for the file manager
   */
  open: boolean;
  /**
   * Callback for when the file manager is closed
   */
  onClose: () => void;
  /**
   * Root path to open in the file manager
   *
   * @default "/"
   */
  rootPath?: string;
  /**
   * Callback for when a file/directory is selected
   */
  onSelect?: (node: Node) => void;
  /**
   * Callback for when a file/directory is double clicked
   */
  onDoubleClick?: (node: Node) => void;
  /**
   * Callback for when a file/directory is right clicked
   */
  onRightClick?: (node: Node) => void;
  /**
   * Callback for when a file/directory is copied
   */
  onCopy?: (node: Node) => void;
  /**
   * Callback for when a file/directory is cut
   */
  onCut?: (node: Node) => void;
  /**
   * Callback for when a file/directory is pasted
   * The old node will contain the old path 
   * and the new node will contain the new path
   */
  onPaste?: (node: Node, oldNode: Node) => void;
  /**
   * Callback for when a file/directory is deleted
   */
  onDelete?: (node: Node) => void;
  /**
   * Callback for when a file/directory is renamed
   * The old node will contain the old path/name 
   * and the new node will contain the new path/name
   */
  onRename?: (node: Node, oldNode: Node) => void;
  /**
   * Callback for when a directory is created
   */
  onCreateDirectory?: (directory: Node) => void;
  /**
   * Callback for when file(s) is uploaded
   */
  onUpload?: (files: Node[]) => void;
  /**
   * Callback for when a file is downloaded
   */
  onDownload?: (node: Node) => void;
};

wooohoo, 놀라지 마세요. 저는 단지 여러분이 큰 그림을 상상하게 하려고 노력하고 있습니다. 구성 요소 소품과 각 소품 위의 설명을 천천히 주의 깊게 읽으십시오.

당분간은 유일한 필수 소품인 open와 onClose 두 개의 소품만 필요합니다.

// file-manager/components/FileManager/FileManager.types.ts
export type FileManagerProps = {
  /**
   * Open State for the file manager
   */
  open: boolean;
  /**
   * Root path to open in the file manager
   *
   * @default "/"
   */
  rootPath?: string;
  /**
   * Callback for when the file manager is closed
   */
  onClose: () => void;
};

이 두 가지 소품은 파일 관리자를 열고 닫는 역할을 합니다. 우리는 파일 관리자를 모달에서 열 것입니다.

이제 FileManager 구성 요소를 생성해 보겠습니다.

// file-manager/components/FileManager/FileManager.ts
import { FileManagerProps } from "./FileManager.types";

export default function FileManager({ open, onClose }: FileManagerProps) {
  return <div>FileManager</div>;
}

다음 단계로 진행하기 전에 index 파일을 생성하여 이 파일에서 직접 가져오는 파일을 캡슐화합니다.

// file-manager/components/FileManager/index.ts
export { default } from "./FileManager";
export * from "./FileManager.types";

이제 HomePage로 이동하여 새로 만든 구성 요소인 FileManager를 호출합니다.

Small modification, we'll also create a component file HomePage for the home page rather than sitting it in the index file, then we'll export it from the index as we did in the file manager.

// home/components/HomePage/HomePage.tsx
import Helmet from "@mongez/react-helmet";
import FileManager from "app/file-manager/components/FileManager";
import { useState } from "react";

export default function HomePage() {
  const [openFileManager, setOpenFileManager] = useState(false);

  return (
    <>
      <Helmet title="home" appendAppName={false} />
      <h1>Welcome To Home Page</h1>
      <FileManager
        open={openFileManager}
        onClose={() => setOpenFileManager(false)}
      />
    </>
  );
}

기본적으로 false로 설정한 파일 관리자의 열기/닫기 상태를 관리하는 상태를 만든 다음 함수 반환에서 구성 요소를 호출했습니다.

이제 브라우저에 무엇이 표시되는지 봅시다. 다음과 같이 표시되어야 합니다.

Mantine 스타일 설정

여기에서 너무 오래 멈추지 않고 문서에서 말하는 대로 수행하고 Root 구성 요소에서 설정할 수 있는 애플리케이션 상단에 Mantine Theme Provider을 가져올 것입니다.
src/apps/front-office/design-system/layouts/Root.tsx로 이동하여 다음과 같이 업데이트합니다.

import { AppShell, MantineProvider } from "@mantine/core";
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>
        <AppShell>{children}</AppShell>
      </MantineProvider>
    </>
  );
}

우리가 한 모든 것은 말 그대로 전체 응용 프로그램인 자식을 래핑할 테마 공급자를 추가한 것입니다.

The AppShell Component will just make some paddings around the content, you can skip it if you like.

이제 다음과 같은 내용이 표시됩니다.

보너스 팁

colorScheme를 dark로 설정하여 Mantine의 색 구성표를 변경할 수 있습니다.

import { AppShell, MantineProvider } from "@mantine/core";
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
        theme={{
          colorScheme: "dark",
        }}
        withGlobalStyles
        withNormalizeCSS>
        <AppShell>{children}</AppShell>
      </MantineProvider>
    </>
  );
}

이제 다음과 같이 표시됩니다.



나 같은 사용자가 어두운 모드를 선호하고 Mongez Dom의 userPrefersDarkMode 유틸리티를 사용하여 자신의 장치에서 어두운 모드를 설정하는지 스마트하게 감지할 수 있습니다.

import { AppShell, MantineProvider } from "@mantine/core";
import { userPrefersDarkMode } from "@mongez/dom";
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
        theme={{
          colorScheme: userPrefersDarkMode() ? "dark" : "light",
        }}
        withGlobalStyles
        withNormalizeCSS>
        <AppShell>{children}</AppShell>
      </MantineProvider>
    </>
  );
}

이제 사용자의 장치 기본 테마 모드에 따라 나타납니다.

For the demo purpose, we'll stick to the light mode for now, maybe we change it later.

파일 관리자 구성 요소로 돌아갑니다.

모달의 파일 관리자

이제 파일 관리자 랩을 Modal에 추가하여 상위 구성 요소에서 열고 닫을 수 있습니다.

// FileManager.tsx
import { Modal } from "@mantine/core";
import { FileManagerProps } from "./FileManager.types";

export default function FileManager({ open, onClose }: FileManagerProps) {
  return (
    <>
      <Modal size="xl" opened={open} onClose={onClose}>
        <h1>File Manager</h1>
      </Modal>
    </>
  );
}

방금 File Manager 키워드로 표시되는 간단한 콘텐츠 주위에 모달을 추가하고 크기를 xl 로 설정했습니다.

이제 홈 페이지에 파일 관리자를 여는 버튼을 추가해 보겠습니다.

// HomePage.tsx
import { Button } from "@mantine/core";
import Helmet from "@mongez/react-helmet";
import FileManager from "app/file-manager/components/FileManager";
import { useState } from "react";

export default function HomePage() {
  const [openFileManager, setOpenFileManager] = useState(false);

  return (
    <>
      <Helmet title="home" appendAppName={false} />
      <h1>Welcome To Home Page</h1>
      <Button
        onClick={() => setOpenFileManager(true)}
        variant="gradient"
        gradient={{ from: "red", to: "orange" }}>
        Open File Manager
      </Button>
      <FileManager
        open={openFileManager}
        onClose={() => setOpenFileManager(false)}
      />
    </>
  );
}

나이스Gradient Button를 사용하여 파일 관리자를 열었습니다.

이제 브라우저에서 이것을 볼 수 있습니다.



그리고 버튼을 클릭하면 다음과 같이 표시됩니다.



이제 파일 관리자 skelton을 설정할 준비가 되었습니다. 이는 다음 튜토리얼에서 다루게 될 것입니다.

기사 저장소

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

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

살람.