[2주차] 고윤정 Adding_Interactivity_1 과제 제출합니다.

src/App.jsx

@@ -2,7 +2,7 @@ import Button from "./components/Button";
 import Counter from "./components/Counter";
 import Input from "./components/Input";
 import Wrapper from "./components/Wrapper";
-
+// 버그 5개
 function App() {
   return (
     <Wrapper>

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;

src/components/Counter.jsx

@@ -3,19 +3,27 @@ import { StyledButton, CounterWrapper, ButtonWrapper } from "./styles";
 
 function Counter() {
   const [isSent, setIsSent] = useState(false);
+  const [count, setCount] = useState(0);
 
   if (isSent) {
     return <div> 전송되었습니다.</div>;
   } else {
-    const [count, setCount] = useState(0);
     return (
       <CounterWrapper>
         {count}
         <ButtonWrapper>
-          <StyledButton onClick={() => setCount(count + 1)}>
+          <StyledButton onClick={(e) => {
+            e.stopPropagation();
+            e.preventDefault();
+            setCount(count + 1);
+          }}>
             더하기
           </StyledButton>
-          <StyledButton onClick={() => setIsSent(true)}>Send</StyledButton>
+          <StyledButton onClick={(e) => {
+            e.stopPropagation();
+            e.preventDefault();
+            setIsSent(true);
+          }}>Send</StyledButton>
         </ButtonWrapper>
       </CounterWrapper>
     );

src/components/Input.jsx

@@ -1,10 +1,10 @@
 import { StyledInput } from "./styles";
-
+// 전파 방지
 function Input() {
   return (
     <>
       <h3> 입력</h3>
-      <StyledInput />
+      <StyledInput onClick={(e)=>{e.stopPropagation();}}/>
     </>
   );
 }

src/components/Wrapper.jsx

@@ -3,8 +3,9 @@ function Wrapper({ children }) {
   const clickFunc = () => {
     alert("배경 클릭");
   };
+
   return (
-    <StyledForm onClick={clickFunc()}>
+    <StyledForm onClick={clickFunc}>
       <h2>배경을 클릭할 수 있어요</h2>
       {children}
     </StyledForm>