🚑️ fix: checkbox feature (#51)

waktaplay · Sep 27, 2024 · 4bf78aa · 4bf78aa
1 parent 0b85112
commit 4bf78aa
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 35 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react"
+import { useRef, useState } from "react"
 import styled from "styled-components"
 
 import "normalize.css"
@@ -141,8 +141,21 @@ const App = () => {
 
   //해당 isChecked state는 checkbox 와 사용되는  state 입니다.
   const [isChecked, setIsChecked] = useState(false)
+  const checkRef = useRef(null)
   const [modalToggle, setModalToggle] = useState(false)
 
+  function handleAllCheckbox() {
+    if (checkRef.current.checked) {
+      console.log("✅", checkRef.current.checked)
+      console.log("✅ : check 되었습니다 check 함수가 실행됩니다1")
+      console.log("✅", isChecked)
+    } else {
+      console.log("❌", checkRef.current.checked)
+      console.log("❌ : check 되지 않았습니다 check 함수가 절대 실행 안됩니다")
+      console.log("❌", isChecked)
+    }
+  }
+
   return (
     <>
       <main>
@@ -310,7 +323,21 @@ const App = () => {
         <section>
           {/* 체크되면 글자색이 바뀝니다 */}
           <H3 isChecked={isChecked}>CheckBox</H3>
-          <CheckBox id="demo" text="checkbox" isChecked={isChecked} setIsChecked={setIsChecked} />
+
+          <CheckBox
+            id="testId"
+            text="checkbox"
+            name="test"
+            value="testValue"
+            checked={isChecked}
+            // disabled
+            ref={checkRef}
+            onChange={() => {
+              setIsChecked(!isChecked)
+              handleAllCheckbox()
+            }}
+          />
+
         </section>
 
         <section>

diff --git a/src/components/CheckBox/index.tsx b/src/components/CheckBox/index.tsx
@@ -3,55 +3,64 @@ import styled from "styled-components"
 import CheckboxChecked from "@assets/icons/checkbox_filled.svg"
 import CheckboxUnchecked from "@assets/icons/checkbox_unfilled.svg"
 
-const CheckBox = ({
-  id,
-  name,
-  value,
-  text,
-  isChecked = false,
-  setIsChecked,
-}: {
-  id: string
-  name?: string
-  value?: string
-  text?: string
-  isChecked: boolean
-  setIsChecked: React.Dispatch<React.SetStateAction<boolean>>
-}) => {
-  return (
+const CheckBox = React.forwardRef<
+  HTMLInputElement,
+  {
+    text?: string
+    id: string
+    name?: string
+    value?: string
+    disabled?: boolean
+    checked?: boolean
+    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void
+  }
+>(({ text, id, name, value, disabled = false, checked = false, onChange }, ref) => {
+  const renderImage = () => {
+    if (disabled) {
+      return CheckboxUnchecked
+    }
+    return checked ? CheckboxChecked : CheckboxUnchecked
+  }
 
-    <Container htmlFor={id} text={text}>
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (onChange) {
+      onChange(event)
+    }
+  }
+  return (
+    <Container htmlFor={id} text={text} disabled={disabled}>
       <HiddenCheckbox
         type="checkbox"
         id={id}
         name={name}
         value={value}
-        checked={isChecked}
-        onChange={() => {
-          setIsChecked(!isChecked)
-        }}
+        disabled={disabled}
+        checked={checked}
+        onChange={handleChange}
+        ref={ref}
       />
-      <img src={isChecked ? CheckboxChecked : CheckboxUnchecked} />
-      {text ? <Text>{text}</Text> : null}
+      <img src={renderImage()} />
+      {text ? <Text disabled={disabled}>{text}</Text> : null}
     </Container>
   )
-}
+})
 
-const Container = styled.label<{ text: string }>`
-  cursor: pointer;
+const Container = styled.label<{ text: string; disabled: boolean }>`
   background-color: transparent;
-
-  ${({ text }) =>
+  cursor: ${({ disabled }) => !disabled && "pointer"};
+  ${({ text, disabled }) =>
     text &&
     `
     display: inline-flex;
     align-items: center;
     gap: 8px;
     border-radius: 6px;
     padding: 6px;
-    &:hover {
-    background-color: rgba(255, 255, 255, 0.1);
-  }`}
+    ${
+      !disabled &&
+      `&:hover {
+      background-color: rgba(255, 255, 255, 0.1);}`
+    }`}
 `
 
 const HiddenCheckbox = styled.input`
@@ -61,8 +70,8 @@ const HiddenCheckbox = styled.input`
   width: 0;
 `
 
-const Text = styled.p`
-  color: #fff;
+const Text = styled.p<{ disabled: boolean }>`
+  color: ${({ disabled }) => (disabled ? "#4E5053" : "#fff")};
   font-size: 14px;
   font-style: normal;
   font-weight: 500;