From e9c6c0bae557416a88a54b4a075e704266156471 Mon Sep 17 00:00:00 2001
From: jissssu <113964353+jissssu@users.noreply.github.com>
Date: Mon, 7 Oct 2024 15:57:35 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EC=97=90=EB=9F=AC=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Button.jsx  |  9 +++++++--
 src/components/Counter.jsx | 19 +++++++++++++++----
 src/components/Input.jsx   |  9 +++++++--
 src/components/Wrapper.jsx |  4 ++--
 4 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/src/components/Button.jsx b/src/components/Button.jsx
index 9fa8039..f68f712 100644
--- a/src/components/Button.jsx
+++ b/src/components/Button.jsx
@@ -1,7 +1,12 @@
 import { StyledButton } from "./styles";
 
 function Button() {
-  return <StyledButton onClick={alert("제출 버튼 클릭")}>제출</StyledButton>;
+  function handleButton(e){
+    e.stopPropagation();
+    alert("제출 버튼 클릭");
+  }
+
+  return <StyledButton onClick={handleButton}>제출</StyledButton>;
 }
 
-export default Button;
+export default Button;
\ No newline at end of file
diff --git a/src/components/Counter.jsx b/src/components/Counter.jsx
index 31ec31c..5bd2d2f 100644
--- a/src/components/Counter.jsx
+++ b/src/components/Counter.jsx
@@ -3,23 +3,34 @@ import { StyledButton, CounterWrapper, ButtonWrapper } from "./styles";
 
 function Counter() {
   const [isSent, setIsSent] = useState(false);
+  const [count, setCount] = useState(0);
+
+  function handleCount(e) {
+    e.stopPropagation();
+    e.preventDefault();
+    setCount((count) => count+1);
+  }
+
+  function handleSend(e) {
+    e.stopPropagation();
+    setIsSent(true)
+  }
 
   if (isSent) {
     return <div> 전송되었습니다.</div>;
   } else {
-    const [count, setCount] = useState(0);
     return (
       <CounterWrapper>
         {count}
         <ButtonWrapper>
-          <StyledButton onClick={() => setCount(count + 1)}>
+          <StyledButton onClick={handleCount}>
             더하기
           </StyledButton>
-          <StyledButton onClick={() => setIsSent(true)}>Send</StyledButton>
+          <StyledButton onClick={handleSend}>Send</StyledButton>
         </ButtonWrapper>
       </CounterWrapper>
     );
   }
 }
 
-export default Counter;
+export default Counter;
\ No newline at end of file
diff --git a/src/components/Input.jsx b/src/components/Input.jsx
index efe3c47..7acdaf5 100644
--- a/src/components/Input.jsx
+++ b/src/components/Input.jsx
@@ -1,12 +1,17 @@
 import { StyledInput } from "./styles";
 
+function handleInput(e) {
+  e.preventDefault();
+  e.stopPropagation();
+}
+
 function Input() {
   return (
     <>
       <h3> 입력</h3>
-      <StyledInput />
+      <StyledInput onClick={handleInput}/>
     </>
   );
 }
 
-export default Input;
+export default Input;
\ No newline at end of file
diff --git a/src/components/Wrapper.jsx b/src/components/Wrapper.jsx
index bda9444..12d64c5 100644
--- a/src/components/Wrapper.jsx
+++ b/src/components/Wrapper.jsx
@@ -4,11 +4,11 @@ function Wrapper({ children }) {
     alert("배경 클릭");
   };
   return (
-    <StyledForm onClick={clickFunc()}>
+    <StyledForm onClick={clickFunc}> 
       <h2>배경을 클릭할 수 있어요</h2>
       {children}
     </StyledForm>
   );
 }
 
-export default Wrapper;
+export default Wrapper;
\ No newline at end of file