Indicators

캐러셀 페이지 전환을 보조하는 Indicator 컴포넌트 모음입니다.

Indicator

현재 캐러셀 페이지 위치를 표시하고, 사용자가 인디케이터를 클릭해 캐러셀 페이지를 변경할 수 있습니다.

Preview

Usage

설치

Terminal

$ pnpm add @b1nd/dodam-design-system/components

@b1nd/dodam-design-system/components 패키지는 @dds-web의 iconography, typography, colors, shapes, themes 패키지에 의존합니다. 프로젝트에 해당 패키지들이 설치되어 있지 않다면, 함께 설치해주세요.

기본 사용법

tsx

"use client";

import { Indicator } from "@b1nd/dodam-design-system/components";
import { useState } from "react";

export default function Example() {
  const [page, setPage] = useState(0);

  return <Indicator total={5} current={page} onChangePage={setPage} />;
}

Props

Prop	Type	Default	Description
`total`	`number`	`0`	전체 캐러셀 페이지 수
`current`	`number`	`0`	현재 캐러셀 페이지 인덱스
`onChangePage`	`(page: number) => void`	`() => {}`	캐러셀 페이지 변경 콜백
`size`	`number`	`10`	점 크기
`color`	`string`	`colors.brand.primary`	활성화된 점 색상

Switcher

<Indicator /> 에 맞는 캐러셀 페이지를 렌더링하는 스위처 컴포넌트입니다. animated 속성을 통해 페이지가 변경될 때 애니메이션 효과를 제어할 수 있습니다.

Preview

Page 1

Usage

기본 사용법

tsx

"use client";

import { Switcher, Indicator } from "@b1nd/dodam-design-system/components";
import { useState } from "react";
import ComponentBlock from "@/shared/ui/ComponentBlock";

export default function Example() {
  const pages = [
    <ComponentBlock>Page 1</ComponentBlock>,
    <ComponentBlock>Page 2</ComponentBlock>,
    <ComponentBlock>Page 3</ComponentBlock>,
  ];
  const [page, setPage] = useState(0);

  return (
    <div>
      <Switcher pages={pages} current={page} animated />
      <Indicator total={pages.length} current={page} onChangePage={setPage} />
    </div>
  );
}

Props

Prop	Type	Default	Description
`pages`	`ReactNode[]`	`[]`	전환될 캐러셀 페이지 목록
`current`	`number`	`0`	현재 캐러셀 페이지 인덱스
`animated`	`boolean`	`false`	애니메이션 적용 여부

Notes

Switcher는 current 변경 시 자동으로 페이드 전환이 적용됩니다.