refactor :: args 변수명 변경 & onClick 추가 #15

packages/components/src/ui/PageIndicator/DodamPageIndicator.stories.ts

@@ -14,6 +14,7 @@ type Story = StoryObj<typeof meta>;
 export const PageIndicator: Story = {
   args: {
     num: 3,
-    buttonSize: "Large",
+    size: "Large",
+    onClick: (idx) => console.log(idx),
   },
 };

packages/components/src/ui/PageIndicator/DodamPageIndicator.tsx

@@ -4,21 +4,23 @@ import { PageIndicatorProps } from "./type";
 
 export const DodamPageIndicator = ({
   num,
-  buttonSize = "Large",
+  size = "Large",
+  onClick,
 }: PageIndicatorProps) => {
   const [activeIdx, setActiveIdx] = useState<number>(0);
   const handleButtonClick = (idx: number) => {
     setActiveIdx(idx);
+    onClick(idx);
   };
 
   return (
-    <S.PageIndicatorWrap buttonSize={buttonSize}>
+    <S.PageIndicatorWrap size={size}>
       {Array.from({ length: num }).map((_, idx) => (
         <S.IndicatorBtn
           key={idx}
           idx={idx}
+          size={size}
           activeIdx={activeIdx}
-          buttonSize={buttonSize}
           onClick={() => handleButtonClick(idx)}></S.IndicatorBtn>
       ))}
     </S.PageIndicatorWrap>

packages/components/src/ui/PageIndicator/style.ts

@@ -2,20 +2,20 @@ import styled, { css } from "styled-components";
 import { ButtonSize } from "./type";
 import { DodamLightTheme } from "@dds-web/styles/src/DodamTheme/DodamTheme";
 
-export const PageIndicatorWrap = styled.div<{ buttonSize: ButtonSize }>`
+export const PageIndicatorWrap = styled.div<{ size: ButtonSize }>`
   width: auto;
   height: auto;
-  gap: ${({ buttonSize }) => (buttonSize === "Small" ? "5px" : "10px")};
+  gap: ${({ size }) => (size === "Small" ? "5px" : "10px")};
   display: flex;
 `;
 
 export const IndicatorBtn = styled.div<{
   idx: number;
+  size: ButtonSize;
   activeIdx: number;
-  buttonSize: ButtonSize;
 }>`
-  ${({ buttonSize }) =>
-    buttonSize === "Small"
+  ${({ size }) =>
+    size === "Small"
       ? css`
           width: 5px;
           height: 5px;

packages/components/src/ui/PageIndicator/type.ts

@@ -1,6 +1,7 @@
-export type ButtonSize = "Small" | "Large"
+export type ButtonSize = "Small" | "Large";
 
 export interface PageIndicatorProps {
   num: number;
-  buttonSize: ButtonSize;
+  size?: ButtonSize;
+  onClick: (idx: number) => void;
 }