1. Spinner

Spinner 컴포넌트는 로딩 상태를 시각적으로 나타내기 위해 사용되는 컴포넌트입니다. 크기, 색상, 회전 속도를 커스터마이즈할 수 있습니다.

1.1. Import

import { Spinner } from '@componique/react';

1.2. Usage

아래는 Spinner 컴포넌트의 기본 사용 예제입니다:

import { Spinner } from '@components/Spinner';

function Example() {
  return <Spinner />;
}

export default Example;

1.3. Changing the Size of the Spinner

Spinner 컴포넌트는 다양한 크기로 제공됩니다. 기본 크기는 medium입니다:

xs: 아주 작은 크기
small: 작은 크기
medium: 중간 크기 (기본값)
large: 큰 크기
xl: 아주 큰 크기

import { Spinner } from '@components/Spinner';

function Example() {
  return (
    <>
      <Spinner size="xs" />
      <Spinner size="small" />
      <Spinner size="medium" />
      <Spinner size="large" />
      <Spinner size="xl" />
    </>
  );
}

export default Example;

1.4. Changing the Color of the Spinner

Spinner 컴포넌트는 다양한 색상으로 제공됩니다. 기본 색상은 Primary입니다:

Basic: 기본 색상
Primary: 주요 색상
gray: 회색
Secondary: 보조 색상
Success: 성공 색상
Warning: 경고 색상
Danger: 위험 색상
White: 흰색

import { Spinner } from '@components/Spinner';

function Example() {
  return (
    <>
      <Spinner color="Basic" />
      <Spinner color="Primary" />
      <Spinner color="gray" />
      <Spinner color="Secondary" />
      <Spinner color="Success" />
      <Spinner color="Warning" />
      <Spinner color="Danger" />
      <Spinner color="White" />
    </>
  );
}

export default Example;

1.5. Changing the Speed of the Spinner

Spinner 컴포넌트는 다양한 회전 속도로 제공됩니다. 기본 속도는 medium입니다:

slow: 느린 회전 속도
medium: 중간 회전 속도 (기본값)
fast: 빠른 회전 속도

import { Spinner } from '@components/Spinner';

function Example() {
  return (
    <>
      <Spinner speed="slow" />
      <Spinner speed="medium" />
      <Spinner speed="fast" />
    </>
  );
}

export default Example;

1.6. Props

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

Prop	Description	Type	Default
`size`	스피너의 크기를 설정합니다.	`"xs" \| "small" \| "medium" \| "large" \| "xl"`	`"medium"`
`color`	스피너의 색상을 설정합니다.	`"Basic" \| "Primary" \| "gray" \| "Secondary" \| "Success" \| "Warning" \| "Danger" \| "White"`	`"Primary"`
`speed`	스피너의 회전 속도를 설정합니다.	`"slow" \| "medium" \| "fast"`	`"medium"`

1.7. Full Example

import { Spinner } from '@components/Spinner';

function Example() {
  return (
    <div>
      <Spinner size="large" color="Success" speed="fast" />
    </div>
  );
}

export default Example;

2. BarsSpinner

BarsSpinner 컴포넌트는 로딩 상태를 시각적으로 나타내기 위해 사용되는 컴포넌트입니다. 크기와 색상을 커스터마이즈할 수 있습니다.

2.1. Import

import { BarsSpinner } from '@componique/react';

2.2. Usage

아래는 BarsSpinner 컴포넌트의 기본 사용 예제입니다:

import { BarsSpinner } from '@components/Spinners/BarsSpinner';

function Example() {
  return <BarsSpinner />;
}

export default Example;

2.3. Changing the Size of the BarsSpinner

BarsSpinner 컴포넌트는 다양한 크기로 제공됩니다. 기본 크기는 medium입니다:

xs: 아주 작은 크기
small: 작은 크기
medium: 중간 크기 (기본값)
large: 큰 크기
xl: 아주 큰 크기

import { BarsSpinner } from '@components/Spinners/BarsSpinner';

function Example() {
  return (
    <>
      <BarsSpinner size="xs" />
      <BarsSpinner size="small" />
      <BarsSpinner size="medium" />
      <BarsSpinner size="large" />
      <BarsSpinner size="xl" />
    </>
  );
}

export default Example;

2.4. Changing the Color of the BarsSpinner

BarsSpinner 컴포넌트는 다양한 색상으로 제공됩니다. 기본 색상은 Basic입니다:

Basic: 기본 색상
Primary: 주요 색상
gray: 회색
Secondary: 보조 색상
Success: 성공 색상
Warning: 경고 색상
Danger: 위험 색상
White: 흰색

import { BarsSpinner } from '@components/Spinners/BarsSpinner';

function Example() {
  return (
    <>
      <BarsSpinner color="Basic" />
      <BarsSpinner color="Primary" />
      <BarsSpinner color="gray" />
      <BarsSpinner color="Secondary" />
      <BarsSpinner color="Success" />
      <BarsSpinner color="Warning" />
      <BarsSpinner color="Danger" />
      <BarsSpinner color="White" />
    </>
  );
}

export default Example;

2.5. Props

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

Prop	Description	Type	Default
`size`	스피너의 크기를 설정합니다.	`"xs" \| "small" \| "medium" \| "large" \| "xl"`	`"medium"`
`color`	스피너의 색상을 설정합니다.	`"Basic" \| "Primary" \| "gray" \| "Secondary" \| "Success" \| "Warning" \| "Danger" \| "White"`	`"Basic"`

2.6. Full Example

import { BarsSpinner } from '@components/Spinners/BarsSpinner';

function Example() {
  return (
    <div>
      <BarsSpinner size="large" color="Primary" />
    </div>
  );
}

export default Example;

3. SquareSpinner

SquareSpinner 컴포넌트는 로딩 상태를 시각적으로 나타내기 위해 사용되는 컴포넌트입니다. 크기, 색상, 속도를 커스터마이즈할 수 있습니다.

3.1. Import

import { SquareSpinner } from '@componique/react';

3.2. Usage

아래는 SquareSpinner 컴포넌트의 기본 사용 예제입니다:

import { SquareSpinner } from '@components/Spinners/SquareSpinner';

function Example() {
  return <SquareSpinner />;
}

export default Example;

3.3. Changing the Size of the SquareSpinner

SquareSpinner 컴포넌트는 다양한 크기로 제공됩니다. 기본 크기는 medium입니다:

xs: 아주 작은 크기
small: 작은 크기
medium: 중간 크기 (기본값)
large: 큰 크기
xl: 아주 큰 크기

import { SquareSpinner } from '@components/Spinners/SquareSpinner';

function Example() {
  return (
    <>
      <SquareSpinner size="xs" />
      <SquareSpinner size="small" />
      <SquareSpinner size="medium" />
      <SquareSpinner size="large" />
      <SquareSpinner size="xl" />
    </>
  );
}

export default Example;

3.4. Changing the Color of the SquareSpinner

SquareSpinner 컴포넌트는 다양한 색상으로 제공됩니다. 기본 색상은 Primary입니다:

Basic: 기본 색상
Primary: 주요 색상
gray: 회색
Secondary: 보조 색상
Success: 성공 색상
Warning: 경고 색상
Danger: 위험 색상
White: 흰색

import { SquareSpinner } from '@components/Spinners/SquareSpinner';

function Example() {
  return (
    <>
      <SquareSpinner color="Basic" />
      <SquareSpinner color="Primary" />
      <SquareSpinner color="gray" />
      <SquareSpinner color="Secondary" />
      <SquareSpinner color="Success" />
      <SquareSpinner color="Warning" />
      <SquareSpinner color="Danger" />
      <SquareSpinner color="White" />
    </>
  );
}

export default Example;

3.5. Changing the Speed of the SquareSpinner

SquareSpinner 컴포넌트는 다양한 속도로 제공됩니다. 기본 속도는 medium입니다:

slow: 느린 속도
medium: 중간 속도 (기본값)
fast: 빠른 속도

import { SquareSpinner } from '@components/Spinners/SquareSpinner';

function Example() {
  return (
    <>
      <SquareSpinner speed="slow" />
      <SquareSpinner speed="medium" />
      <SquareSpinner speed="fast" />
    </>
  );
}

export default Example;

3.6. Props

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

Prop	Description	Type	Default
`size`	스피너의 크기를 설정합니다.	`"xs" \| "small" \| "medium" \| "large" \| "xl"`	`"medium"`
`color`	스피너의 색상을 설정합니다.	`"Basic" \| "Primary" \| "gray" \| "Secondary" \| "Success" \| "Warning" \| "Danger" \| "White"`	`"Primary"`
`speed`	스피너의 애니메이션 속도를 설정합니다.	`"slow" \| "medium" \| "fast"`	`"medium"`

3.7. Full Example

import { SquareSpinner } from '@components/Spinners/SquareSpinner';

function Example() {
  return (
    <div>
      <SquareSpinner size="large" color="Primary" speed="fast" />
    </div>
  );
}

export default Example;

4. PacManSpinner

PacManSpinner 컴포넌트는 로딩 상태를 시각적으로 나타내기 위해 사용되는 컴포넌트입니다. 크기, 색상, 속도를 커스터마이즈할 수 있습니다.

4.1. Import

import { PacManSpinner } from '@componique/react';

4.2. Usage

아래는 PacManSpinner 컴포넌트의 기본 사용 예제입니다:

import { PacManSpinner } from '@components/Spinners/PacManSpinner';

function Example() {
  return <PacManSpinner />;
}

export default Example;

4.3. Changing the Size of the PacManSpinner

PacManSpinner 컴포넌트는 다양한 크기로 제공됩니다. 기본 크기는 small입니다:

small: 작은 크기
medium: 중간 크기
large: 큰 크기

import { PacManSpinner } from '@components/Spinners/PacManSpinner';

function Example() {
  return (
    <>
      <PacManSpinner size="small" />
      <PacManSpinner size="medium" />
      <PacManSpinner size="large" />
    </>
  );
}

export default Example;

4.4. Changing the Color of the PacManSpinner

PacManSpinner 컴포넌트는 다양한 색상으로 제공됩니다. 기본 색상은 Basic입니다:

Basic: 기본 색상
Primary: 주요 색상
gray: 회색
Secondary: 보조 색상
Success: 성공 색상
Warning: 경고 색상
Danger: 위험 색상
White: 흰색

import { PacManSpinner } from '@components/Spinners/PacManSpinner';

function Example() {
  return (
    <>
      <PacManSpinner color="Basic" />
      <PacManSpinner color="Primary" />
      <PacManSpinner color="gray" />
      <PacManSpinner color="Secondary" />
      <PacManSpinner color="Success" />
      <PacManSpinner color="Warning" />
      <PacManSpinner color="Danger" />
      <PacManSpinner color="White" />
    </>
  );
}

export default Example;

4.5. Changing the Speed of the PacManSpinner

PacManSpinner 컴포넌트는 다양한 속도로 제공됩니다. 기본 속도는 medium입니다:

slow: 느린 속도
medium: 중간 속도 (기본값)
fast: 빠른 속도

import { PacManSpinner } from '@components/Spinners/PacManSpinner';

function Example() {
  return (
    <>
      <PacManSpinner speed="slow" />
      <PacManSpinner speed="medium" />
      <PacManSpinner speed="fast" />
    </>
  );
}

export default Example;

4.6. Props

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

Prop	Description	Type	Default
`size`	스피너의 크기를 설정합니다.	`"small" \| "medium" \| "large"`	`"small"`
`color`	스피너의 색상을 설정합니다.	`"Basic" \| "Primary" \| "gray" \| "Secondary" \| "Success" \| "Warning" \| "Danger" \| "White"`	`"Basic"`
`speed`	스피너의 애니메이션 속도를 설정합니다.	`"slow" \| "medium" \| "fast"`	`"medium"`

4.7. Full Example

import { PacManSpinner } from '@components/Spinners/PacManSpinner';

function Example() {
  return (
    <div>
      <PacManSpinner size="large" color="Primary" speed="fast" />
    </div>
  );
}

export default Example;

5. FullScreenSpinner

FullScreenSpinner 컴포넌트는 전체 화면에 로딩 스피너를 표시하는 컴포넌트입니다. 모양(Shape)과 스피너의 종류를 커스터마이즈할 수 있습니다.

5.1. Import

import { FullScreenSpinner } from '@componique/react';

5.2. Usage

아래는 FullScreenSpinner 컴포넌트의 기본 사용 예제입니다:

import { FullScreenSpinner } from '@componique/react';
import { Button } from "@componique/react";

function Example() {
  const [spinning, setSpinning] = useState<{ [key: string]: boolean }>({});

  const showLoader = (key: string) => {
    setSpinning((prev) => ({ ...prev, [key]: true }));

    setTimeout(() => {
      setSpinning((prev) => ({ ...prev, [key]: false }));
    }, 1000); // 1초 동안 스피너를 표시한 후 숨김
  };

  return (
    <>
      <Button onClick={() => showLoader('spinner1')} variant="flat">
        Show Basic spinner
      </Button>
      <FullScreenSpinner spinning={spinning['spinner1']} shape="Basic" />
    </>
  );
}

export default Example;

5.3. Changing the Shape of the FullScreenSpinner

FullScreenSpinner 컴포넌트는 다양한 모양으로 제공됩니다. 기본 모양은 Basic입니다:

Basic: 기본 스피너
Square: 사각형 스피너
Bars: 바 스피너

import { FullScreenSpinner } from '@componique/react';
import { Button } from "@componique/react";

function Example() {
  const [spinning, setSpinning] = useState<{ [key: string]: boolean }>({});

  const showLoader = (key: string) => {
    setSpinning((prev) => ({ ...prev, [key]: true }));

    setTimeout(() => {
      setSpinning((prev) => ({ ...prev, [key]: false }));
    }, 3000); // 3초 동안 스피너를 표시한 후 숨김
  };

  return (
    <>
      <Button onClick={() => showLoader('spinner2')} variant="flat">
        Show Square spinner
      </Button>
      <FullScreenSpinner spinning={spinning['spinner2']} shape="Square" />
      <Button onClick={() => showLoader('spinner3')} variant="flat">
        Show Bars spinner
      </Button>
      <FullScreenSpinner spinning={spinning['spinner3']} shape="Bars" />
    </>
  );
}

export default Example;

5.4. Props

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

Prop	Description	Type	Default
`spinning`	스피너가 활성화될지 여부를 설정합니다.	`boolean`	`false`
`shape`	스피너의 모양을 설정합니다.	`"Basic" \| "Square" \| "Bars"`	`"Basic"`

5.5. Full Example

import { FullScreenSpinner } from '@componique/react';
        import { Button } from "@componique/react";
                
          function Example() {
            const [spinning, setSpinning] = useState<{ [key: string]: boolean }>({});
                
            const showLoader = (key: string) => {
              setSpinning((prev) => ({ ...prev, [key]: true }));
                
              etTimeout(() => {
              setSpinning((prev) => ({ ...prev, [key]: false }));
                }, 3000); // 3초 동안 스피너를 표시한 후 숨김
                  };
          return (
            <div>
            <Button onClick={() => showLoader('spinner3')} variant="border">
            Show Bars spinner
            </Button>
              <FullScreenSpinner spinning={true} shape="Square" />
            </div>
          );
        }
        
        export default Example;