feat: Implements change color, line-width, pen-mode function (#39)

* feat: Update canvas store about pensetting 'mode, color, lineWidth'

* feat: Update MainCanvas with penSetting

* feat: Create DrawingComponent and CanvasToolbar

* feat: Implements change color and line-width and pen-mode

* style: Change DrawingComponent to DrawingArea and Use button instead div for clickable element

* style: Renaming DrawingComponent to DrawingArea

client/src/components/canvas/CanvasToolbar.tsx

@@ -0,0 +1,53 @@
+import { ChangeEvent } from 'react';
+import { LINEWIDTH_VARIABLE, PENMODE } from '@/constants/canvasConstants';
+import { useCanvasStore } from '@/stores/useCanvasStore';
+import { CanvasStore, PenModeType } from '@/types/canvas.types';
+
+const CV = ['#000', '#f257c9', '#e2f724', '#4eb4c2', '#d9d9d9'];
+//임시 색상 코드
+
+const CanvasToolBar = () => {
+  const lineWidth = useCanvasStore((state: CanvasStore) => state.penSetting.lineWidth);
+  const setPenSetting = useCanvasStore((state: CanvasStore) => state.action.setPenSetting);
+  const setPenMode = useCanvasStore((state: CanvasStore) => state.action.setPenMode);
+
+  const handleChangeToolColor = (colorNum: number) => {
+    setPenSetting({ colorNum });
+  };
+  const handleChangeLineWidth = (lineWidth: string) => {
+    setPenSetting({ lineWidth: Number(lineWidth) });
+  };
+  const handleChangeToolMode = (modeNum: PenModeType) => {
+    setPenMode(modeNum);
+  };
+
+  return (
+    <section>
+      <section>
+        {CV.map((color, i) => {
+          return (
+            <button key={i} className={`bg-canvas-${i} h-16 w-16`} onClick={() => handleChangeToolColor(i)}>
+              {color}
+            </button>
+          );
+        })}
+      </section>
+      <section>
+        <input
+          type="range"
+          min={LINEWIDTH_VARIABLE.MIN_WIDTH}
+          max={LINEWIDTH_VARIABLE.MAX_WIDTH}
+          step={LINEWIDTH_VARIABLE.STEP_WIDTH}
+          value={lineWidth}
+          onChange={(e: ChangeEvent<HTMLInputElement>) => handleChangeLineWidth(e.target.value)}
+        />
+      </section>
+      <section>
+        <button onClick={() => handleChangeToolMode(PENMODE.PEN)}>펜</button>
+        <button onClick={() => handleChangeToolMode(PENMODE.PAINTER)}>페인팅</button>
+      </section>
+    </section>
+  );
+};
+
+export default CanvasToolBar;

client/src/components/canvas/DrawingArea.tsx

@@ -0,0 +1,13 @@
+import CanvasToolBar from './CanvasToolbar';
+import MainCanvas from './MainCanvas';
+
+const DrawingArea = () => {
+  return (
+    <section>
+      <MainCanvas />
+      <CanvasToolBar />
+    </section>
+  );
+};
+
+export default DrawingArea;

client/src/components/canvas/MainCanvas.tsx

@@ -1,10 +1,14 @@
 import { useRef, TouchEvent as ReactTouchEvent, MouseEvent as ReactMouseEvent } from 'react';
+import { PENMODE } from '@/constants/canvasConstants';
 import { useCanvasStore } from '@/stores/useCanvasStore';
 import { CanvasStore } from '@/types/canvas.types';
 
 const CANVAS_SIZE_WIDTH = 640; //임시 사이즈
 const CANVAS_SIZE_HEIGHT = 420;
 
+const CV = ['#000', '#f257c9', '#e2f724', '#4eb4c2', '#d9d9d9'];
+//임시 색상 배열
+
 const getTouchPoint = (canvas: HTMLCanvasElement, e: TouchEvent) => {
   const { clientX, clientY } = e.touches[0]; //뷰포트 기준
   const { top, left } = canvas.getBoundingClientRect(); // 캔버스의 뷰포트 기준 위치
@@ -22,15 +26,19 @@ const getDrawPoint = (
   else throw new Error('mouse 혹은 touch 이벤트가 아닙니다.');
 };
 
-export const MainCanvas = () => {
+const MainCanvas = () => {
   const mainCanvasRef = useRef<HTMLCanvasElement>(null);
   const canDrawing = useCanvasStore((state: CanvasStore) => state.canDrawing);
   const setCanDrawing = useCanvasStore((state: CanvasStore) => state.action.setCanDrawing);
+  const penSetting = useCanvasStore((state: CanvasStore) => state.penSetting);
 
   const drawStartPath = (ctx: CanvasRenderingContext2D, drawX: number, drawY: number) => {
     ctx.beginPath();
+    ctx.fillStyle = CV[penSetting.colorNum];
+    ctx.strokeStyle = CV[penSetting.colorNum];
+    ctx.lineWidth = penSetting.lineWidth;
 
-    ctx.arc(drawX, drawY, 2, 0, Math.PI * 2);
+    ctx.arc(drawX, drawY, penSetting.lineWidth / 2, 0, Math.PI * 2);
     ctx.fill();
 
     ctx.beginPath();
@@ -56,7 +64,7 @@ export const MainCanvas = () => {
   };
 
   const handleDrawingEvent = (e: ReactTouchEvent<HTMLCanvasElement> | ReactMouseEvent<HTMLCanvasElement>) => {
-    if (!canDrawing) return;
+    if (!canDrawing || penSetting.mode === PENMODE.PAINTER) return;
     if (!mainCanvasRef.current) return;
 
     const canvas = mainCanvasRef.current;
@@ -97,3 +105,5 @@ export const MainCanvas = () => {
     </section>
   );
 };
+
+export default MainCanvas;

client/src/constants/canvasConstants.ts

@@ -0,0 +1,10 @@
+export const PENMODE = {
+  PEN: 0,
+  PAINTER: 1,
+};
+
+export const LINEWIDTH_VARIABLE = {
+  MIN_WIDTH: 2,
+  MAX_WIDTH: 10,
+  STEP_WIDTH: 2,
+};

client/src/stores/useCanvasStore.ts

@@ -1,5 +1,5 @@
 import { create } from 'zustand';
-import { CanvasStore } from '@/types/canvas.types';
+import { CanvasStore, SelectingPenOptions } from '@/types/canvas.types';
 
 const canvasDefaultConfig = {
   inkRemaining: 500,
@@ -17,5 +17,17 @@ export const useCanvasStore = create<CanvasStore>((set) => ({
     setCanDrawing: (canDrawing: boolean) => {
       set(() => ({ canDrawing }));
     },
+    setPenSetting: (penSetting: SelectingPenOptions) => {
+      set((state) => {
+        const newPenSettingState = { ...state.penSetting, ...penSetting };
+        return { ...state, penSetting: newPenSettingState };
+      });
+    },
+    setPenMode: (mode: number) => {
+      set((state) => {
+        const newPenSettingState = { ...state.penSetting, mode };
+        return { ...state, penSetting: newPenSettingState };
+      });
+    },
   },
 }));

client/src/types/canvas.types.ts

@@ -1,6 +1,21 @@
+import { PENMODE } from '@/constants/canvasConstants';
+
+interface PenOptions {
+  mode: number;
+  colorNum: number;
+  lineWidth: number; //짝수 단위가 좋음
+}
+
+export type SelectingPenOptions = Partial<PenOptions>;
+
+export type PenModeType = (typeof PENMODE)[keyof typeof PENMODE];
+
 export interface CanvasStore {
   canDrawing: boolean;
+  penSetting: PenOptions;
   action: {
     setCanDrawing: (canDrawing: boolean) => void;
+    setPenSetting: (penSetting: SelectingPenOptions) => void;
+    setPenMode: (penMode: PenModeType) => void;
   };
 }