Merge pull request #158 from Byeonjin/feature/231128-eraser

�Feature(#92): 지우개 모드 기능 구현
boostcampwm2023 · Nov 29, 2023 · 24e7688 · 24e7688
2 parents 2a5ba5f + 201ddf5
commit 24e7688
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 33 deletions.
diff --git a/frontend/src/assets/svgs/eraserMouseCursor.svg b/frontend/src/assets/svgs/eraserMouseCursor.svg
diff --git a/frontend/src/pages/Test/components/ColorPanel.tsx b/frontend/src/pages/Test/components/ColorPanel.tsx
@@ -1,4 +1,4 @@
-import CheckSVG from "@/assets/svgs/check.svg?react";
+import CheckIcon from "@/assets/svgs/check.svg?react";
 import { useRecoilValue } from "recoil";
 import { useEffect, useState } from "react";
 import { fabric } from "fabric";
@@ -36,7 +36,7 @@ const ColorPanel = ({ className }: { className: string }) => {
           setPenColor("red");
         }}
       >
-        <CheckSVG className={`${penColor === "red" ? "" : "hidden"}`} />
+        <CheckIcon className={`${penColor === "red" ? "" : "hidden"}`} />
       </button>
       <button
         className="w-6 h-6  rounded-[0.625rem] bg-pen-yellow border border-pen-border-yellow flex justify-center items-center"
@@ -46,7 +46,7 @@ const ColorPanel = ({ className }: { className: string }) => {
           setPenColor("yellow");
         }}
       >
-        <CheckSVG className={`${penColor === "yellow" ? "" : "hidden"}`} />
+        <CheckIcon className={`${penColor === "yellow" ? "" : "hidden"}`} />
       </button>
       <button
         className="w-6 h-6  rounded-[0.625rem] bg-pen-forsythia border border-pen-border-forsythia flex justify-center items-center"
@@ -56,7 +56,7 @@ const ColorPanel = ({ className }: { className: string }) => {
           setPenColor("forsythia");
         }}
       >
-        <CheckSVG className={`${penColor === "forsythia" ? "" : "hidden"}`} />
+        <CheckIcon className={`${penColor === "forsythia" ? "" : "hidden"}`} />
       </button>
       <button
         className="w-6 h-6  rounded-[0.625rem] bg-pen-lightgreen border border-pen-border-lightgreen flex justify-center items-center"
@@ -66,7 +66,7 @@ const ColorPanel = ({ className }: { className: string }) => {
           setPenColor("lightGreen");
         }}
       >
-        <CheckSVG className={`${penColor === "lightGreen" ? "" : "hidden"}`} />
+        <CheckIcon className={`${penColor === "lightGreen" ? "" : "hidden"}`} />
       </button>
       <button
         className="w-6 h-6  rounded-[0.625rem] bg-pen-blue border border-pen-border-blue flex justify-center items-center"
@@ -76,7 +76,7 @@ const ColorPanel = ({ className }: { className: string }) => {
           setPenColor("blue");
         }}
       >
-        <CheckSVG className={`${penColor === "blue" ? "" : "hidden"}`} />
+        <CheckIcon className={`${penColor === "blue" ? "" : "hidden"}`} />
       </button>
       <button
         className="w-6 h-6  rounded-[0.625rem] bg-grayscale-black border border-grayscale-black  flex justify-center items-center"
@@ -86,7 +86,7 @@ const ColorPanel = ({ className }: { className: string }) => {
           setPenColor("black");
         }}
       >
-        <CheckSVG className={`${penColor === "black" ? "" : "hidden"}`} />
+        <CheckIcon className={`${penColor === "black" ? "" : "hidden"}`} />
       </button>
     </div>
   );

diff --git a/frontend/src/pages/Test/components/StickyNoteColorPanel.tsx b/frontend/src/pages/Test/components/StickyNoteColorPanel.tsx
@@ -1,4 +1,4 @@
-import CheckSVG from "@/assets/svgs/check.svg?react";
+import CheckIcon from "@/assets/svgs/check.svg?react";
 import { useRecoilValue } from "recoil";
 import { useState, useEffect } from "react";
 
@@ -74,7 +74,7 @@ const StickyNoteColorPanel = () => {
           handleColorButtonClick("red");
         }}
       >
-        {stickyNoteColor === "red" && <CheckSVG />}
+        {stickyNoteColor === "red" && <CheckIcon />}
       </button>
       <button
         type="button"
@@ -84,7 +84,7 @@ const StickyNoteColorPanel = () => {
           handleColorButtonClick("yellow");
         }}
       >
-        {stickyNoteColor === "yellow" && <CheckSVG />}
+        {stickyNoteColor === "yellow" && <CheckIcon />}
       </button>
       <button
         type="button"
@@ -94,7 +94,7 @@ const StickyNoteColorPanel = () => {
           handleColorButtonClick("forsythia");
         }}
       >
-        {stickyNoteColor === "forsythia" && <CheckSVG />}
+        {stickyNoteColor === "forsythia" && <CheckIcon />}
       </button>
       <button
         type="button"
@@ -104,7 +104,7 @@ const StickyNoteColorPanel = () => {
           handleColorButtonClick("lightgreen");
         }}
       >
-        {stickyNoteColor === "lightgreen" && <CheckSVG />}
+        {stickyNoteColor === "lightgreen" && <CheckIcon />}
       </button>
       <button
         type="button"
@@ -114,7 +114,7 @@ const StickyNoteColorPanel = () => {
           handleColorButtonClick("blue");
         }}
       >
-        {stickyNoteColor === "blue" && <CheckSVG />}
+        {stickyNoteColor === "blue" && <CheckIcon />}
       </button>
     </div>
   );

diff --git a/frontend/src/pages/Test/components/StickyNoteEditPanel.tsx b/frontend/src/pages/Test/components/StickyNoteEditPanel.tsx
@@ -1,12 +1,12 @@
-import SSVG from "@/assets/svgs/S.svg?react";
-import MSVG from "@/assets/svgs/M.svg?react";
-import LSVG from "@/assets/svgs/L.svg?react";
-import XLSVG from "@/assets/svgs/XL.svg?react";
-import AlignLeftSVG from "@/assets/svgs/formatAlignLeft.svg?react";
-import AlignCenterSVG from "@/assets/svgs/formatAlignCenter.svg?react";
-import AlignRightSVG from "@/assets/svgs/formatAlignRight.svg?react";
-import PalletteSVG from "@/assets/svgs/palette.svg?react";
-import DeleteMemoSVG from "@/assets/svgs/deleteMemo.svg?react";
+import SIcon from "@/assets/svgs/S.svg?react";
+import MIcon from "@/assets/svgs/M.svg?react";
+import LIcon from "@/assets/svgs/L.svg?react";
+import XLIcon from "@/assets/svgs/XL.svg?react";
+import AlignLeftIcon from "@/assets/svgs/formatAlignLeft.svg?react";
+import AlignCenterIcon from "@/assets/svgs/formatAlignCenter.svg?react";
+import AlignRightIcon from "@/assets/svgs/formatAlignRight.svg?react";
+import PalletteIcon from "@/assets/svgs/palette.svg?react";
+import DeleteMemoIcon from "@/assets/svgs/deleteMemo.svg?react";
 
 import { fabricObjectWithItem } from "./stateStickyNoteInstance";
 
@@ -128,7 +128,7 @@ const StickyNoteEditPanel = () => {
               handleFontSizeButtonClick("s");
             }}
           >
-            <SSVG style={fontSize === "s" ? { fill: ACTIVE_COLOR } : undefined} />
+            <SIcon style={fontSize === "s" ? { fill: ACTIVE_COLOR } : undefined} />
           </button>
           <button
             type="button"
@@ -139,7 +139,7 @@ const StickyNoteEditPanel = () => {
               handleFontSizeButtonClick("m");
             }}
           >
-            <MSVG style={fontSize === "m" ? { fill: ACTIVE_COLOR } : undefined} />
+            <MIcon style={fontSize === "m" ? { fill: ACTIVE_COLOR } : undefined} />
           </button>
           <button
             type="button"
@@ -150,7 +150,7 @@ const StickyNoteEditPanel = () => {
               handleFontSizeButtonClick("l");
             }}
           >
-            <LSVG style={fontSize === "l" ? { fill: ACTIVE_COLOR } : undefined} />
+            <LIcon style={fontSize === "l" ? { fill: ACTIVE_COLOR } : undefined} />
           </button>
           <button
             type="button"
@@ -161,7 +161,7 @@ const StickyNoteEditPanel = () => {
               handleFontSizeButtonClick("xl");
             }}
           >
-            <XLSVG style={fontSize === "xl" ? { fill: ACTIVE_COLOR } : undefined} />
+            <XLIcon style={fontSize === "xl" ? { fill: ACTIVE_COLOR } : undefined} />
           </button>
         </div>
         <div className="flex items-center mx-3 gap-2">
@@ -174,7 +174,7 @@ const StickyNoteEditPanel = () => {
               handleFormatAlignButtonClick("left");
             }}
           >
-            <AlignLeftSVG style={formatAlign === "left" ? { fill: ACTIVE_COLOR } : undefined} />
+            <AlignLeftIcon style={formatAlign === "left" ? { fill: ACTIVE_COLOR } : undefined} />
           </button>
           <button
             type="button"
@@ -185,7 +185,7 @@ const StickyNoteEditPanel = () => {
               handleFormatAlignButtonClick("center");
             }}
           >
-            <AlignCenterSVG style={formatAlign === "center" ? { fill: ACTIVE_COLOR } : undefined} />
+            <AlignCenterIcon style={formatAlign === "center" ? { fill: ACTIVE_COLOR } : undefined} />
           </button>
           <button
             type="button"
@@ -196,7 +196,7 @@ const StickyNoteEditPanel = () => {
               handleFormatAlignButtonClick("right");
             }}
           >
-            <AlignRightSVG style={formatAlign === "right" ? { fill: ACTIVE_COLOR } : undefined} />
+            <AlignRightIcon style={formatAlign === "right" ? { fill: ACTIVE_COLOR } : undefined} />
           </button>
         </div>
         <div className="flex items-center gap-2 before:content-[''] before:block before:w-px before:h-[20px] before:bg-grayscale-gray">
@@ -210,7 +210,7 @@ const StickyNoteEditPanel = () => {
               handlePalletteButtonClick();
             }}
           >
-            <PalletteSVG style={isPalletteActive ? { fill: ACTIVE_COLOR } : undefined} />
+            <PalletteIcon style={isPalletteActive ? { fill: ACTIVE_COLOR } : undefined} />
           </button>
           <button
             type="button"
@@ -220,7 +220,7 @@ const StickyNoteEditPanel = () => {
               handleDeleteNote();
             }}
           >
-            <DeleteMemoSVG />
+            <DeleteMemoIcon />
           </button>
         </div>
       </div>

diff --git a/frontend/src/pages/Test/components/Toolbar.tsx b/frontend/src/pages/Test/components/Toolbar.tsx
@@ -4,7 +4,8 @@ import StickyNoteIcon from "@/assets/svgs/whiteboard/stickyNote.svg?react";
 import ImageIcon from "@/assets/svgs/whiteboard/image.svg?react";
 import EraserIcon from "@/assets/svgs/whiteboard/eraser.svg?react";
 import HandIcon from "@/assets/svgs/whiteboard/hand.svg?react";
-import AddStickyNoteCursorSVG from "@/assets/svgs/addStickyMemoCursor.svg";
+import AddStickyNoteCursor from "@/assets/svgs/addStickyMemoCursor.svg";
+import EraserCursor from "@/assets/svgs/eraserMouseCursor.svg";
 
 import { fabricObjectWithAddWithUpdate, fabricObjectWithItem } from "./stateStickyNoteInstance";
 
@@ -66,7 +67,7 @@ const Toolbar = () => {
   const handleStickyNoteTool = () => {
     if (!(canvas instanceof fabric.Canvas)) return;
 
-    canvas.defaultCursor = `url("${AddStickyNoteCursorSVG}"), auto`;
+    canvas.defaultCursor = `url("${AddStickyNoteCursor}"), auto`;
 
     canvas.on("mouse:down", ({ absolutePointer }: fabric.IEvent<MouseEvent>) => {
       if (!absolutePointer) return;
@@ -170,6 +171,28 @@ const Toolbar = () => {
     });
   };
 
+  const handleEraser = () => {
+    if (!(canvas instanceof fabric.Canvas)) return;
+
+    setIsObjectSelectable(true);
+    canvas.selection = true;
+
+    canvas.defaultCursor = `url("${EraserCursor}"), auto`;
+
+    canvas.on("mouse:up", ({ target }) => {
+      if (!target) return;
+      canvas.remove(target);
+    });
+
+    canvas.on("selection:created", ({ selected }) => {
+      console.log(selected);
+      if (activeTool === "eraser") {
+        selected?.forEach((object) => canvas.remove(object));
+      }
+      canvas.discardActiveObject().renderAll();
+    });
+  };
+
   const handleHand = () => {
     if (!(canvas instanceof fabric.Canvas)) return;
 
@@ -218,6 +241,7 @@ const Toolbar = () => {
         break;
 
       case "eraser":
+        handleEraser();
         break;
 
       case "hand":