[DAY61]TIL

그림판에 팔레트 추가하기
어제 했던 그림판에서 색깔과 브러쉬 크기를 조절할 수 있도록 하고싶었다.
drawLine 함수에 색깔과 브러쉬 크기를 변경해주면 될듯?
따라서 일단 팔레트 컴포넌트를 만들어준다.

import React from "react";

interface PaletteProps {
  selectedColor: string;
  onColorSelect(color: string): void;
  setSelectPen: React.Dispatch<React.SetStateAction<boolean>>;
}

const Palette = ({
  selectedColor,
  onColorSelect,
  setSelectPen,
}: PaletteProps) => {

  // 컬러 팔레트에 사용할 색상 배열
  const colorPalette = [
    "#fed400e2", // 노랑
    "#f67269", // 빨강
    "#d67dcc", // 분홍
    "#787bca", // 보라
    "#5dc0ed", // 파랑
    "#3ac66d", // 초록
    "#000000", // 검정
    "white", // 흰색
  ];

  return (
    <div>
      <div style={{ display: "flex" }}>
        {colorPalette.map((color) => (
          <div
            key={color}
            style={{
              backgroundColor: color,
              width: "50px",
              height: "50px",
              cursor: "pointer",
              marginRight: "10px",
              borderRadius: "50%",
              border: color === selectedColor ? "2px solid grey" : "none", // 선택된 색상에는 테두리있도록 표시
            }}
            onClick={() => {
              onColorSelect(color);
              setSelectPen(false);
            }}
          />
        ))}
      </div>
    </div>
  );
};

export default Palette;

해당 팔레트 컴포넌트에 selectedColor,onColorSelect,setSelectPen를 props로 보내준 후에 drawLine 함수를 변경한다.

  const [selectedColor, setSelectedColor] = useState<string>("#000000"); // 기본값 검정
  const selectColorHandler = (color: string) => {
    setSelectedColor(color);
    setMode("pen");
  };
  const [selectPen, setSelectPen] = useState<boolean>(false);

// return 이하
 				 <Palette
                      selectedColor={selectedColor}
                      onColorSelect={selectColorHandler}
                      setSelectPen={setSelectPen}
                    />

drawLine 함수의 선 굵기, 색깔 부분을 받아온 props로 변경해주면 된다.

      context.strokeStyle = `${color}`;
      context.lineJoin = "round";
      context.lineWidth = penSize;

이렇게 하면 붓 색깔과 굵기를 조절해줄 수 있는 그림판 완성!