React File Manager를 만들어 봅시다. 5장: FileManager 구성 요소 Skelton 만들기

FileManager 구성 요소를 만든 후 이제 구성 요소 뼈대를 만들겠습니다.

파일매니저 스켈톤

표지 이미지에서 볼 수 있듯이 파일 관리자에는 toolbar 섹션과 body 섹션이라는 두 개의 큰 섹션이 있습니다.
Body 섹션에는 디렉토리 목록을 표시하는 sidebar 섹션과 현재 디렉토리 폴더 및 파일을 표시하는 content 섹션의 두 부분도 포함됩니다.

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

export default function FileManager({ open, onClose }: FileManagerProps) {
  return (
    <>
      <Modal size="xl" opened={open} onClose={onClose}>
        <Toolbar />
        <Grid>
          <Grid.Col span={3}>
            <Sidebar />
          </Grid.Col>
          <Grid.Col>
            <Content />
          </Grid.Col>
        </Grid>
      </Modal>
    </>
  );
}

Toolbar 구성요소를 Grid 과 함께 추가하여 본문을 두 부분으로 나누었습니다. 첫 번째 부분은 Sidebar 으로 3 spans (전체 너비의 25%)만 차지하고 두 번째 부분은 Content 이 됩니다.

이제 3개의 구성 요소를 생성하겠습니다. 각 구성 요소에는 자체 디렉터리가 있으므로 나중에 확장하고 더 작은 구성 요소로 분할할 수 있습니다.

디렉토리 구조는 다음과 같습니다.



이제 FileManager 구성 요소에 다음 코드가 포함됩니다.

import { Grid, Modal } from "@mantine/core";
import Content from "./Content";
import { FileManagerProps } from "./FileManager.types";
import Sidebar from "./Sidebar";
import Toolbar from "./Toolbar";

export default function FileManager({ open, onClose }: FileManagerProps) {
  return (
    <>
      <Modal size="xl" opened={open} onClose={onClose}>
        <Toolbar />
        <Grid>
          <Grid.Col span={3}>
            <Sidebar />
          </Grid.Col>
          <Grid.Col span={9}>
            <Content />
          </Grid.Col>
        </Grid>
      </Modal>
    </>
  );
}

이제 파일 관리자를 열면 이것을 볼 수 있습니다.



약간의 UI 향상을 위해 세 가지 구성 요소를 Card으로 래핑하여 멋진 그림자를 만들 것입니다.

// Toolbar.tsx
import { Card } from "@mantine/core";

export default function Toolbar() {
  return (
    <>
      <Card shadow="sm">
        <div>Toolbar</div>
      </Card>
    </>
  );
}

나머지( Content 및 Sidebar )도 따릅니다.

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



그리드 주위에 BodyWrapper 을 추가하여 약간의 여백을 주고 FileManager.styles.ts 옆에 FileManager.tsx 파일을 만듭니다.

import styled from "@emotion/styled";

export const BodyWrapper = styled.div`
  label: BodyWrapper;
  margin-top: 1rem;
`;

Bonus Tip: Adding label to your styled component will append it in the class name, this will help us identify which element in the dom belongs to what styled components when you inspect elements.

이제 FileManager 구성 요소로 가져오겠습니다.

import { Grid, Modal } from "@mantine/core";
import Content from "./Content";
import { BodyWrapper } from "./FileManager.styles";
import { FileManagerProps } from "./FileManager.types";
import Sidebar from "./Sidebar";
import Toolbar from "./Toolbar";

export default function FileManager({ open, onClose }: FileManagerProps) {
  return (
    <>
      <Modal size="xl" opened={open} onClose={onClose}>
        <Toolbar />
        <BodyWrapper>
          <Grid>
            <Grid.Col span={3}>
              <Sidebar />
            </Grid.Col>
            <Grid.Col span={9}>
              <Content />
            </Grid.Col>
          </Grid>
        </BodyWrapper>
      </Modal>
    </>
  );
}

훨씬 낫다!



다음 항목에서는 구성 요소에 논리를 추가하고 FileManager 클래스도 사용하기 시작하므로 실제 작업을 시작할 것입니다.

기사 저장소

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

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

살람.