From 3c77272cdb1f27e0757801b122c9056fcc0ad7af Mon Sep 17 00:00:00 2001
From: Gyeongho Yang <chchch1213@naver.com>
Date: Wed, 6 Nov 2024 16:42:46 +0900
Subject: [PATCH] feat: delete used material

---
 .../src/pages/enhance/5-changes/changes.tsx     | 17 +++++++++++++----
 frontend/src/stores/userSlice.ts                | 12 ++++++++++++
 2 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/frontend/src/pages/enhance/5-changes/changes.tsx b/frontend/src/pages/enhance/5-changes/changes.tsx
index 690e027..9486767 100644
--- a/frontend/src/pages/enhance/5-changes/changes.tsx
+++ b/frontend/src/pages/enhance/5-changes/changes.tsx
@@ -10,10 +10,12 @@ import {
   useColorMode,
 } from "@chakra-ui/react";
 import ItemToolTip from "../common/itemTooltip";
-import { useAppSelector } from "../../../stores/hooks";
+import { useAppDispatch, useAppSelector } from "../../../stores/hooks";
 import RequiredText from "../../../components/content/requiredText";
 import { getMaterialIcon } from "../../../utils/icon";
 import { AnimatedCounter } from "react-animated-counter";
+import DeleteButton from "../../../components/action/deleteButton";
+import { deleteMaterial } from "../../../stores/userSlice";
 
 export default function Changes({
   inventoryIndex,
@@ -22,6 +24,8 @@ export default function Changes({
   inventoryIndex: number;
   showChanges: boolean;
 }) {
+  const dispatch = useAppDispatch();
+
   const dark = useColorMode().colorMode == "dark";
   const inventory = useAppSelector((state) => state.user.inventory);
   const enhancedItem = inventory[inventoryIndex];
@@ -55,14 +59,14 @@ export default function Changes({
         </Stack>
       </Flex>
       <Flex
+        pt={4}
         gap={2}
-        pt={2}
         justify={{ base: "center", md: "start" }}
         wrap="wrap"
       >
         {enhancedItem.used.map(({ name, value }) => (
-          <Tooltip key={"material-" + name} label={name} placement="top">
-            <Tag pt={2} pb={1}>
+          <Tooltip key={"material-" + name} label={name}>
+            <Tag position="relative" pt={2} pb={1}>
               <Stack>
                 <Flex h={8} justify="center" align="center">
                   <Image src={getMaterialIcon(name)} />
@@ -78,6 +82,11 @@ export default function Changes({
                   containerStyles={{ paddingBottom: "1px" }}
                 />
               </Stack>
+              <DeleteButton
+                onClick={() =>
+                  dispatch(deleteMaterial({ index: inventoryIndex, name }))
+                }
+              />
             </Tag>
           </Tooltip>
         ))}
diff --git a/frontend/src/stores/userSlice.ts b/frontend/src/stores/userSlice.ts
index 68591b1..67da302 100644
--- a/frontend/src/stores/userSlice.ts
+++ b/frontend/src/stores/userSlice.ts
@@ -172,6 +172,17 @@ const slice = createSlice({
         used.push(material);
       }
     },
+    deleteMaterial(
+      state,
+      action: PayloadAction<{ index: number; name: string }>
+    ) {
+      const used = state.inventory[action.payload.index].used;
+      const materialIndex = used.findIndex(
+        (material) => material.name == action.payload.name
+      );
+
+      used.splice(materialIndex, 1);
+    },
     setInventoryPotential(
       state,
       action: PayloadAction<{
@@ -246,6 +257,7 @@ export const {
   newInventory,
   deleteInventory,
   addMaterials,
+  deleteMaterial,
   setInventoryPotential,
 
   setGuarantee,