From e7d237e6ff453bce75ea30d24d8c0b7a45a00d0a Mon Sep 17 00:00:00 2001
From: MinseoKangQ <kms02171@naver.com>
Date: Wed, 13 Mar 2024 16:21:26 +0900
Subject: [PATCH] =?UTF-8?q?:sparkles:=20=EC=82=AD=EC=A0=9C=20=EA=B8=B0?=
 =?UTF-8?q?=EB=8A=A5=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Body/Projects.css | 28 ++++++++++++++++++++++++++++
 src/Body/Projects.jsx | 33 ++++++++++++++++++++++++++++++++-
 2 files changed, 60 insertions(+), 1 deletion(-)

diff --git a/src/Body/Projects.css b/src/Body/Projects.css
index 01e4ea8..21e2435 100644
--- a/src/Body/Projects.css
+++ b/src/Body/Projects.css
@@ -37,6 +37,7 @@
 }
 
 .add-project-btn {
+    margin: 10px;
     margin-top: 30px;
     padding: 8px 16px;
     background-color: #007bff;
@@ -90,4 +91,31 @@ table tr:nth-child(odd) {
 
 table tr:nth-child(even) {
     background-color: white;
+}
+
+.delete-project-btn {
+    margin: 10px;
+    margin-top: 30px;
+    padding: 8px 16px;
+    background-color: red;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+}
+
+.delete-project-btn:hover {
+    background-color: darkred;
+}
+
+.projects-container .projects-table td input[type="checkbox"] {
+    margin-left: auto;
+    margin-right: auto;
+    display: block;
+}
+
+/* Alternatively, if you want to specifically target only the "Delete" column for any future adjustments */
+.projects-container .projects-table td:last-child {
+    text-align: center;
 }
\ No newline at end of file
diff --git a/src/Body/Projects.jsx b/src/Body/Projects.jsx
index e85ea1a..9e64e91 100644
--- a/src/Body/Projects.jsx
+++ b/src/Body/Projects.jsx
@@ -11,6 +11,7 @@ const Projects = ({
   setProjectsTitle,
 }) => {
   const [newColumn, setNewColumn] = useState('');
+  const [selectedForDeletion, setSelectedForDeletion] = useState(new Set());
 
   const handleAddColumn = () => {
     if (newColumn && !columns.includes(newColumn)) {
@@ -38,6 +39,22 @@ const Projects = ({
     setProjects([...projects, newProject]);
   };
 
+  const handleSelectForDeletion = (index) => {
+    const newSet = new Set(selectedForDeletion);
+    if (newSet.has(index)) {
+      newSet.delete(index);
+    } else {
+      newSet.add(index);
+    }
+    setSelectedForDeletion(newSet);
+  };
+
+  const deleteSelectedProjects = () => {
+    const remainingProjects = projects.filter((_, index) => !selectedForDeletion.has(index));
+    setProjects(remainingProjects);
+    setSelectedForDeletion(new Set()); // Reset selection
+  };
+
   return (
     <div className="projects-container">
       <input
@@ -59,12 +76,13 @@ const Projects = ({
           Add Column
         </button>
       </div>
-      <table>
+      <table className="projects-table">
         <thead>
           <tr>
             {columns.map((column, index) => (
               <th key={index}>{column}</th>
             ))}
+            <th>Delete</th>
           </tr>
         </thead>
         <tbody>
@@ -81,6 +99,13 @@ const Projects = ({
                   />
                 </td>
               ))}
+              <td>
+                <input
+                  type="checkbox"
+                  checked={selectedForDeletion.has(index)}
+                  onChange={() => handleSelectForDeletion(index)}
+                />
+              </td>
             </tr>
           ))}
         </tbody>
@@ -89,6 +114,12 @@ const Projects = ({
         <button className="add-project-btn" onClick={addNewProject}>
           Add Project
         </button>
+        <button
+          className="delete-project-btn"
+          onClick={deleteSelectedProjects}
+        >
+          Delete
+        </button>
       </div>
     </div>
   );