1. ProgressBarBasic

ProgressBarBasic 컴포넌트는 작업의 진행 상태를 시각적으로 표시하는 기본 진행 바(Progress Bar) 컴포넌트입니다. 이 컴포넌트는 진행률을 백분율로 표시하며, 옵션으로 진행률 표시 및 작업 완료 여부를 아이콘으로 나타낼 수 있습니다.

1.1. Import

import ProgressBarBasic from '@components/ProgressBar/ProgressBarBasic';

1.2. Usage

기본 사용 예제는 아래와 같습니다:

70%

import ProgressBarBasic from '@components/ProgressBar/ProgressBarBasic';

function Example() {
  return <ProgressBarBasic percent={70} showPercent completed />;
}

export default Example;

1.3. Props

ProgressBarBasic 컴포넌트는 아래와 같은 Props를 가집니다:

Prop	Description	Type	Default
`percent`	진행 상태를 나타내는 백분율 값 (0-100)	`number`	`0`
`showPercent`	진행률을 텍스트로 표시할지 여부	`boolean`	`false`
`completed`	작업 완료 여부를 체크 아이콘으로 표시할지 여부	`boolean`	`false`

1.4. Full Example

import { useState, useEffect } from "react";

interface ProgressBarBasicProps {
  percent: number;
  showPercent?: boolean; // 진행률 표시 여부
  completed?: boolean; // 작업 완료 표시 여부
}

const ProgressBarBasic = ({
  percent,
  showPercent,
  completed,
}: ProgressBarBasicProps) => {
  const [progressBar, setProgressBar] = useState(percent);

  useEffect(() => {
    setProgressBar(percent);
  }, [percent]);

  return (
    <div className="flex w-10/12 items-center">
      <div className="relative h-4 w-full rounded-full bg-[#D9D9D9]">
        <div
          className="h-4 rounded-full bg-Basic transition-all duration-500 ease-in-out"
          style={{ width: `${progressBar}%` }}
        ></div>
      </div>
      {showPercent && <span className="ml-2">{`${progressBar}%`}</span>}
      {progressBar === 100 && completed && <span className="ml-2">✅</span>}
    </div>
  );
};

export default ProgressBarBasic;

2. ProgressBarCircle

ProgressBarCircle 컴포넌트는 원형 진행 바를 표시하는 컴포넌트로, 진행률과 완료 여부를 시각적으로 표현할 수 있습니다.

2.1. Import

import ProgressBarCircle from '@components/ProgressBar/ProgressBarCircle';

2.2. Usage

기본 사용 예제는 아래와 같습니다:

75%

import ProgressBarCircle from '@components/ProgressBar/ProgressBarCircle';

function Example() {
  return <ProgressBarCircle percent={75} showPercent={true} completed={false} />;
}

export default Example;

2.3. Props

ProgressBarCircle 컴포넌트는 아래와 같은 Props를 가집니다:

Prop	Description	Type	Default
`percent`	진행률을 나타내는 값 (0-100).	`number`	`0`
`showPercent`	진행률을 텍스트로 표시할지 여부.	`boolean`	`true`
`completed`	작업이 완료되었는지 여부. true일 경우 완료 표시 (체크 아이콘)가 나타납니다.	`boolean`	`false`

2.4. Full Example

import { useState, useEffect } from "react";

interface ProgressBarCircleProps {
  percent: number;
  showPercent?: boolean; // 진행률 표시 여부
  completed?: boolean; // 작업 완료 표시 여부
}

// 원형 진행 바 컴포넌트 정의
const ProgressBarCircle = ({
  percent,
  showPercent = true, // showPercent 기본값을 true로 설정
  completed = false, // completed 기본값을 false로 설정
}: ProgressBarCircleProps) => {
  const [progressBar, setProgressBar] = useState(percent); // 진행률 상태를 관리하는 state

  // percent 값이 변경될 때마다 progressBar 상태를 업데이트
  useEffect(() => {
    setProgressBar(percent);
  }, [percent]);

  // 원형 진행 바의 크기와 둘레 계산
  const circleRadius = 50; // 원의 반지름 설정
  const circleCircumference = 2 * 3.14 * circleRadius; // 원의 둘레 계산
  const circleArea = ((100 - progressBar) / 100) * circleCircumference; // 진행률에 따라 원형이 채워질 부분 계산

  return (
    <div className="relative flex h-32 w-32 items-center justify-center">
      <div
        className="flex h-full w-full items-center justify-center rounded-full"
        style={{
          // 진행률에 따라 원형 진행 바의 색상이 채워짐
          background: `conic-gradient(#9AC5E5 ${progressBar * 3.6}deg, #d1d5db ${progressBar * 3.6}deg)`,
        }}
      >
        {/* 원형의 중앙에 흰색 원을 배치, 그 안에 진행률 텍스트나 체크 표시 */}
        <div className="flex h-20 w-20 items-center justify-center rounded-full bg-white">
          {/* showPercent가 true이면 진행률을 텍스트로 표시 */}
          {showPercent && (
            <span className="text-lg font-medium text-Basic">
              {`${progressBar}%`}
            </span>
          )}
          {/* 진행률이 100%이고 completed가 true이면 체크 표시를 보여줌 */}
          {completed && progressBar === 100 && (
            <span className="text-lg font-medium text-Basic">✅</span>
          )}
        </div>
      </div>
    </div>
  );
};

export default ProgressBarCircle;

3. ProgressBarSlider

ProgressBarSlider 컴포넌트는 슬라이더를 통해 진행률을 조정할 수 있는 컴포넌트입니다. 진행률에 따라 변화하는 프로그레스 바와, 옵션에 따라 진행률을 텍스트로 표시하거나 완료 여부를 체크할 수 있습니다.

3.1. Import

import ProgressBarSlider from '@components/ProgressBar/ProgressBarSlider';

3.2. Usage

기본 사용 예제는 아래와 같습니다:

import ProgressBarSlider from '@components/ProgressBar/ProgressBarSlider';

function Example() {
  return <ProgressBarSlider percent={50} showPercent={true} completed={true} />;
}

export default Example;

3.3. Props

ProgressBarSlider 컴포넌트는 아래와 같은 Props를 가집니다:

Prop	Description	Type	Default
`percent`	초기 진행률을 나타내는 값 (0-100).	`number`	`0`
`showPercent`	진행률을 텍스트로 표시할지 여부.	`boolean`	`true`
`completed`	작업이 완료되었을 때 체크 표시를 보여줄지 여부.	`boolean`	`true`

3.4. Full Example

import { useState, useEffect } from "react";

interface ProgressBarSliderProps {
  percent: number;
  showPercent?: boolean;
  completed?: boolean;
}

const ProgressBarSlider = ({
  percent,
  showPercent = true,
  completed = true,
}: ProgressBarSliderProps) => {
  const [progressBar, setProgressBar] = useState(percent);

  useEffect(() => {
    setProgressBar(percent);
  }, [percent]);

  const handleSliderChange = (event: any) => {
    setProgressBar(Number(event.target.value));
  };

  return (
    <div className="w-10/12">
      <div className="flex items-center">
        <div className="h-4 w-10/12 rounded-full bg-[#D9D9D9]">
          <div
            className="h-4 rounded-full bg-Basic transition-all"
            style={{ width: `${progressBar}%` }}
          />
        </div>
        {showPercent && <span className="ml-2">{`${progressBar}`}</span>}
        {progressBar === 100 && <span className="ml-2">✅</span>}
      </div>
      <div>
        <input
          type="range"
          min="0"
          max="100"
          value={progressBar}
          onChange={handleSliderChange}
          className="mt-4"
        />
      </div>
    </div>
  );
};
export default ProgressBarSlider;