Project __ WhiteBoard

S1. Icon-Btn

"어떻게 하면, 재사용 가능한 IconBtn Component를 만들 수 있을 까? "

P1. Code

import React from 'react';
import { toolTypes } from '../constant';
import rectangleSrc from '../resources/icons/rectangle.svg';
import { useDispatch, useSelector } from 'react-redux';
import { setToolType } from './whiteboardSlice';

const IconBtn = ({ src, type }) => {
  const dispatch = useDispatch();
  const selectedToolType = useSelector((state) => state.whiteboard.tool);

  const handleClick = () => {
    dispatch(setToolType(type));
  };

  return (
    <button
      onClick={handleClick}
      className={
        selectedToolType === 'null' ? 'menu_button' : 'menu_button_active '
      }
    >
      <img src={src} width="80%" height="80%" />
    </button>
  );
};

export default function Menu() {
  return (
    <div className="menu_container">
      <IconBtn src={rectangleSrc} type={toolTypes.RECTANGLE} />
    </div>
  );
}