[2주차] 이지수 Adding_Interactivity_1 과제 제출합니다.

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;

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;

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;

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;