카테고리 버튼 만들기

회사에서 카테고리를 만들다가

좀 더 효율적인 코드가 없을까 고민고민하다가 

만들었다.

 

import tmpProduct from "@/public/cake.png";

import Image from "next/image";
import { useState } from "react";

import styles from "@/styles/pages/pointUse/main.module.scss";
import classNames from "classnames/bind";
const cn = classNames.bind(styles);

const pointUsePage = () => {
  const [buttons, setButtons] = useState([
    { id: 1, name: "카페/베이커리", clicked: false },
    { id: 2, name: "푸드", clicked: false },
    { id: 3, name: "편의점", clicked: false },
    { id: 4, name: "뷰티", clicked: false },
    -- 필요에 따라 추가 --
  ]);

  const handleClick = (buttonId: number) => {
    setButtons((prevButtons) => {
      return prevButtons.map((button) => {
        if (button.id === buttonId) {
          return {
            ...button,
            clicked: true,
          };
        }
        return {
          ...button,
          clicked: false,
        };
      });
    });
  };

  return (
  
      <div className={cn("categoryBtn_box")}>
        {buttons.map((button) => (
          <button
            key={button.id}
            className={cn("button", { click: button.clicked })}
            onClick={() => handleClick(button.id)}
          >
            {button.name}
          </button>
        ))}
      </div>
      
    </div>
  );
};

export default pointUsePage;

 

 

흠,.

뭔가 맘에 안든다.

 

const handleClick = (buttonId: number) => {
    setButtons((prevButtons) =>
      prevButtons.map((button) =>
        button.id === buttonId ? { ...button, clicked: true } : { ...button, clicked: false },
      ),
    );
  };

Nice