2주차 퀴즈 카운터 추가

Author: hyorish03

eslint.config.js

@@ -30,6 +30,8 @@ export default [
       ...reactHooks.configs.recommended.rules,
       "react/prop-types": "off",
       "react/jsx-no-target-blank": "off",
+      "react/rule-of-hook": "off",
+      "react-hooks/rules-of-hooks": "off",
       "react-refresh/only-export-components": [
         "warn",
         { allowConstantExport: true },

src/App.jsx

@@ -1,4 +1,5 @@
 import Button from "./components/Button";
+import Counter from "./components/Counter";
 import Input from "./components/Input";
 import Wrapper from "./components/Wrapper";
 
@@ -7,6 +8,8 @@ function App() {
     <Wrapper>
       <Input />
       <Button />
+      <h3>카운터</h3>
+      <Counter />
     </Wrapper>
   );
 }

src/components/Button.jsx

@@ -1,7 +1,7 @@
 import { StyledButton } from "./styles";
 
 function Button() {
-  return <StyledButton onClick={alert("제출 버튼 클릭")}>제출</StyledButton>;
+  return <StyledButton onClick={()=>alert("제출 버튼 클릭")}>제출</StyledButton>;
 }
 
 export default Button;

src/components/Counter.jsx

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

src/components/Input.jsx

@@ -1,7 +1,12 @@
 import { StyledInput } from "./styles";
 
 function Input() {
-  return <StyledInput />;
+  return (
+    <>
+      <h3> 입력</h3>
+      <StyledInput />
+    </>
+  );
 }
 
 export default Input;

src/components/Wrapper.jsx

@@ -1,10 +1,13 @@
 import { StyledWrapper } from "./styles";
-function Wrapper() {
+function Wrapper({ children }) {
   const clickFunc = () => {
     alert("배경 클릭");
   };
   return (
-    <StyledWrapper onClick={clickFunc()}>배경을 클릭할 수 있어요</StyledWrapper>
+    <StyledWrapper onClick={clickFunc()}>
+      <h2>배경을 클릭할 수 있어요</h2>
+      {children}
+    </StyledWrapper>
   );
 }
 

src/components/styles.js

@@ -2,7 +2,6 @@ import styled from "styled-components";
 
 export const StyledWrapper = styled.form`
   width: 100%;
-  height: 300px;
   background-color: skyblue;
   display: flex;
   align-items: center;
@@ -18,7 +17,6 @@ export const StyledInput = styled.input`
   border: none;
   border-radius: 15px;
   font-size: 20px;
-  margin-top: 20px;
   z-index: 10;
   &:focus {
     outline: none;
@@ -35,3 +33,19 @@ export const StyledButton = styled.button`
   font-size: 20px;
   margin-top: 20px;
 `;
+
+export const ConterWrapper = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+`;
+
+export const ButtonWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: row;
+  gap: 10px;
+`;