#53 feat: onClick 연결

Team-Tiki · Jul 9, 2024 · 361e484 · 361e484
1 parent 4c2378a
commit 361e484
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 5 deletions.
diff --git a/src/page/showcase/component/CategoryChip/CategoryChip.style.ts b/src/page/showcase/component/CategoryChip/CategoryChip.style.ts
@@ -12,7 +12,7 @@ export const buttonStyle = (isClicked: boolean) =>
 
     ...theme.text.body04,
     color: `${isClicked ? theme.colors.blue_900 : theme.colors.gray_800}`,
-    fontWeight: isClicked ? 600 : 500,
+    fontWeight: 500,
 
     cursor: 'pointer',
   });
diff --git a/src/page/showcase/component/CategoryChip/CategoryChip.tsx b/src/page/showcase/component/CategoryChip/CategoryChip.tsx
@@ -1,15 +1,23 @@
 import { buttonStyle } from '@/page/showcase/component/CategoryChip/CategoryChip.style';
 
-import { ButtonHTMLAttributes } from 'react';
+import { ButtonHTMLAttributes, useState } from 'react';
 
 interface CategoryChipProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   onClick?: () => void;
-  isClicked?: boolean;
 }
 
-const CategoryChip = ({ children, isClicked = false, ...props }: CategoryChipProps) => {
+const CategoryChip = ({ children, onClick, ...props }: CategoryChipProps) => {
+  const [isClicked, setIsClicked] = useState(false);
+
+  const handleClick = () => {
+    if (onClick) {
+      onClick();
+    }
+    setIsClicked((prev) => !prev);
+  };
+
   return (
-    <button css={buttonStyle(isClicked)} {...props}>
+    <button css={buttonStyle(isClicked)} onClick={handleClick} {...props}>
       {children}
     </button>
   );