feat: 장바구니 체크박스 기능 구현

1) 전체 선택 체크박스의 체크 여부에 따라 장바구니에 담긴 모든 상품들의 체크박스가 결정된다.
2) 각 상품의 체크박스 중 체크 안 된 박스가 있다면 전체선택 체크박스도 체크되지 않는다.

src/components/cart/SelectedProductItem.tsx

@@ -1,7 +1,9 @@
+import { useRecoilState } from 'recoil';
 import { css, styled } from 'styled-components';
 import { useSetCart } from '../../hooks/useCart';
 import { useHandleQuantityInput } from '../../hooks/useHandleQuantityInput';
 import { useLoadCart } from '../../hooks/useLoadCart';
+import { checkedItemList } from '../../recoil';
 import { Product } from '../../types';
 import Button from '../common/Button';
 import { Checkbox } from '../common/CheckboxStyle';
@@ -16,6 +18,7 @@ interface Props extends Product {
 const SelectedProductItem = ({ id, imageUrl, name, price, quantity }: Props) => {
   const { setIsSelected, setQuantity } = useLoadCart(id);
   const { addToCart, removeItemFromCart } = useSetCart(id);
+  const [checkedItems, setCheckedItems] = useRecoilState<number[]>(checkedItemList);
 
   const handleNumberInputChange = useHandleQuantityInput({
     setIsSelected,
@@ -24,10 +27,24 @@ const SelectedProductItem = ({ id, imageUrl, name, price, quantity }: Props) =>
     addToCart,
   });
 
+  const isChecked = checkedItems.includes(id);
+
+  const handleCheckedItem = () => {
+    isChecked
+      ? setCheckedItems((prev) => prev.filter((itemId) => itemId !== id))
+      : setCheckedItems((prev) => [...prev, id]);
+  };
+
   return (
     <div>
       <S.Fieldset>
-        <Checkbox type="checkbox" id={`${id}-checkbox`} name={name} />
+        <Checkbox
+          type="checkbox"
+          id={`${id}-checkbox`}
+          name={name}
+          checked={isChecked}
+          onChange={handleCheckedItem}
+        />
         <S.Image src={`${imageUrl}`} alt={name} />
         <label htmlFor={`${id}-checkbox`}>{name}</label>
         <S.Wrapper>

src/components/cart/SelectedProductList.tsx

@@ -1,6 +1,7 @@
-import { useRecoilValue } from 'recoil';
+import { useEffect } from 'react';
+import { useRecoilState, useRecoilValue } from 'recoil';
 import { css, styled } from 'styled-components';
-import { cartState } from '../../recoil';
+import { cartState, checkedItemList } from '../../recoil';
 import { CartItem } from '../../types';
 import Button from '../common/Button';
 import { Checkbox } from '../common/CheckboxStyle';
@@ -10,6 +11,19 @@ const SelectedProductList = () => {
   const cart = useRecoilValue(cartState);
   const productCountInCart = cart.length;
 
+  const initialCheckedItems = cart.map((item: CartItem) => item.id);
+
+  const [checkedItems, setCheckedItems] = useRecoilState<number[]>(checkedItemList);
+
+  useEffect(() => {
+    setCheckedItems(initialCheckedItems);
+  }, []);
+
+  const isAllChecked = checkedItems.length === cart.length;
+  const handleAllItemsCheck = () => {
+    isAllChecked ? setCheckedItems([]) : setCheckedItems(initialCheckedItems);
+  };
+
   return (
     <S.Wrapper>
       <S.Title>{`든든배송 상품 (${productCountInCart}개)`}</S.Title>
@@ -25,8 +39,14 @@ const SelectedProductList = () => {
       ))}
 
       <S.Fieldset>
-        <Checkbox type="checkbox" id="select-all" name="select-all" />
-        <label htmlFor="select-all">{`전체선택 (2/${productCountInCart})`}</label>
+        <Checkbox
+          type="checkbox"
+          id="select-all"
+          name="select-all"
+          checked={isAllChecked}
+          onChange={handleAllItemsCheck}
+        />
+        <label htmlFor="select-all">{`전체선택 (${checkedItems.length}/${productCountInCart})`}</label>
         <Button css={deleteButtonStyle}>선택삭제</Button>
       </S.Fieldset>
     </S.Wrapper>

src/recoil/index.ts

@@ -46,3 +46,8 @@ export const cartBadgeSelector = selector({
     return selectedProducts;
   },
 });
+
+export const checkedItemList = atom<number[]>({
+  key: 'checkedItems',
+  default: [],
+});