진행률 표시줄 만들기

소개

이것은 UI Kit with React, TypeScript, Storybook and Tailwind의 일부입니다. 혼란스러운 점이 있으면 시리즈의 이전 항목을 확인했는지 확인하세요.

이 시리즈에서는 기본 진행률 표시줄을 구현하고 Storybook 와 통합하는 것을 목표로 합니다.

이것은 우리가 이전에 만든 것에 비해 간단한 구성 요소가 될 것입니다.

완성된 제품은 다음과 같습니다.

진행률 표시줄

프로젝트에서 두 개의 파일을 만듭니다.

src/components/ProgressBar/ProgressBar.tsx

src/stories/ProgressBar/ProgressBar.stories.tsx

이 구성 요소는 매우 간단하여 중간 단계를 수행하지 않고도 한 번에 모두 작성할 수 있으므로 그렇게 합시다.

// ProgressBar.tsx

export type ProgressBarProps = {
  progress: number;
  progressText?: string;
};

const ProgressBar = ({ progress, progressText = "" }: ProgressBarProps) => {
  // Make sure our value stays between 0 and 100.
  const _progress = Math.min(Math.max(0, progress), 100);
  return (
    <div className="flex flex-col items-center justify-center">
      <div className="w-full border-2 border-indigo-700 h-6 rounded-md">
        <div
          className="bg-indigo-500 h-full transition-all duration-250"
          style={{ width: `${_progress}%` }}
        ></div>
      </div>
      <span>{progressText}</span>
    </div>
  );
};

export default ProgressBar;

이 구성 요소에는 멋진 일이 없습니다. 기본적으로 가장 바깥쪽div을 사용하여 원하는 위치에 선택 사항progressText을 배치할 수 있습니다. 진행률 표시줄 개요에 대한 래퍼도 있고 진행률(0에서 100까지)에 따라 너비를 조정하는 진행률 표시줄div 자체가 있습니다.

스토리 추가하기

이전에 만든 파일src/stories/ProgressBar/ProgressBar.stories.tsx에 다음을 배치합니다.

import { ComponentMeta, Story } from "@storybook/react";
import ProgressBar, {
  ProgressBarProps,
} from "../../components/ProgressBar/ProgressBar";

export default {
  title: "Progress Bar",
  component: ProgressBar,
} as ComponentMeta<typeof ProgressBar>;

const Template: Story<ProgressBarProps> = (args) => (
  <div className="w-56">
    <ProgressBar {...args} />
  </div>
);

export const WithLoadingText = Template.bind({});
WithLoadingText.args = {
  progressText: "Loading...",
  progress: 23,
};

export const WithoutLoadingText = Template.bind({});
WithoutLoadingText.args = {
  progress: 50,
};

이것은 이 시리즈의 이전 항목에 대한 이야기보다 훨씬 간단하며 변경을 위해 더 간단한 작업을 수행하는 것이 좋습니다. 이것이 우리가 필요로 하는 전부이며 이제 두 개의 미리 정의된 스토리가 있습니다. 하나는 텍스트가 있고 다른 하나는 텍스트가 없습니다.

러닝 스토리북

이것이 실제로 어떻게 보이는지 보려면 Storybook 를 실행하여 yarn storybook 를 시작해야 합니다.
Storybook를 실행하고 http://localhost:6006을 방문하면 사이드바에서 ProgressBar 구성 요소를 찾을 수 있습니다.

문제 해결

실행할 수 없거나 다른 문제가 있는 경우 내 저장소에서 확인하고 작동하는지 확인하십시오.

https://github.com/simon-nystrom/newcurrent-react-ui/tree/progressbar


시리즈의 다음 항목을 기대해 주세요 😊. 다음에 보고 싶은 구성 요소는 무엇입니까?