[FIX] 하나라도 선택 취소 시 전체 선택 버튼 선택 해제

Likelion-at-SMWU-WebFounder · Feb 15, 2024 · 2168096 · 2168096
1 parent bfdce93
commit 2168096
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 31 deletions.
diff --git a/src/components/Board.jsx b/src/components/Board.jsx
@@ -97,7 +97,6 @@ const Board = ({ pass, type, onAdd, onDelete }) => {
   const postsData = (posts) => {
     let filteredPosts = [];
     if (posts && posts.length > 0) {
-      // posts가 정의되고 배열인지 확인
       switch (selectTrack.value) {
         case "all":
           filteredPosts = posts[0];
@@ -130,30 +129,6 @@ const Board = ({ pass, type, onAdd, onDelete }) => {
     }
   };
 
-  const boardList = [];
-
-  for (let i = 1; i <= 131; i++) {
-    boardList.push({
-      id: i,
-      name: "김멋사",
-      phone: "01012345678",
-      num: "2345678",
-      track: "백엔드",
-      time: "2024-03-25 04:24:43",
-    });
-  }
-
-  for (let i = 131; i <= 150; i++) {
-    boardList.push({
-      id: i,
-      name: "김멋사",
-      phone: "01012345678",
-      num: "2345678",
-      track: "기획 · 디자인",
-      time: "2024-03-25 04:24:43",
-    });
-  }
-
   const tracks = [
     { value: "all", label: "전체트랙" },
     { value: "pm", label: "기획 · 디자인" },

diff --git a/src/components/Posts.jsx b/src/components/Posts.jsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import styled from "styled-components";
 
 const StyledInput = styled.input`
@@ -98,11 +98,16 @@ const Content = styled.div`
 const ImageWrap = styled.div``;
 
 const Posts = ({ list, checkedItems, setCheckedItems }) => {
+  const [isAllChecked, setIsAllChecked] = useState(false);
+
+  useEffect(() => {
+    setIsAllChecked(list.length > 0 && checkedItems.length === list.length);
+  }, [checkedItems, list]);
+
   const onCheckBoxAll = (e) => {
-    if (e.target.checked) {
-      const checkedListArr = [];
-      list.forEach((item) => checkedListArr.push(item.joinerId));
-      setCheckedItems(checkedListArr);
+    if (!isAllChecked) {
+      const allItems = list.map((item) => item.joinerId);
+      setCheckedItems(allItems);
     } else {
       setCheckedItems([]);
     }
@@ -128,7 +133,11 @@ const Posts = ({ list, checkedItems, setCheckedItems }) => {
       <ContentWrap>
         <ContentTitle>
           <TableCell>
-            <StyledInput type="checkbox" onChange={(e) => onCheckBoxAll(e)} />
+            <StyledInput
+              type="checkbox"
+              onChange={onCheckBoxAll}
+              checked={isAllChecked}
+            />
           </TableCell>
           <TableCell>번호</TableCell>
           <TableCell>이름</TableCell>