Merge pull request #7 from MinseoKangQ/feat/projects

✨ 삭제 기능 추가
MinseoKangQ · Mar 13, 2024 · 409841d · 409841d
2 parents c9d0304 + e7d237e
commit 409841d
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 1 deletion.
diff --git 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;
 }
diff --git 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>
   );