정답 제출

src/Counter/index.js

@@ -1,13 +1,25 @@
 import React from "react";
 import "./index.css";
 
-// Counter의 시작은 0부터 시작합니다.
 const Counter = () => {
+  const [count, setCount] = React.useState(0);
+
+  const handleMinus = () => {
+    if (count > -10) {
+      setCount(count - 1);
+    }
+  };
+
+  const handlePlus = () => {
+    if (count < 10) {
+      setCount(count + 1);
+    }
+  };
   return (
     <div className="counter--container">
-      <button>-</button>
-      <p>{/** 여기에 카운트가 나타납니다. 주석 삭제 후 작성해주세요 */}</p>
-      <button>+</button>
+      <button onClick={handleMinus}>-</button>
+      <p>{count}</p>
+      <button onClick={handlePlus}>+</button>
     </div>
   );
 };

src/Input/index.js

@@ -1,7 +1,7 @@
 import React from "react";
 
-const Input = () => {
-  return <input />;
+const Input = ({ onChange }) => {
+  return <input onChange={onChange} />;
 };
 
 export default Input;

src/ShowBox/index.js

@@ -1,13 +1,19 @@
-import React from "react";
+import React, { useState } from "react";
 import "./index.css";
 import Input from "../Input";
 
 const ShowBox = () => {
+  const [text, setText] = useState("");
+
+  const handleChange = (e) => {
+    setText(e.target.value);
+  };
+
   return (
     <div className="show-box--container">
-      <Input />
-      <p className="show-box--text">
-        {/* 여기 안에 Input에서 입력한 값이 나와야 해요. 주석은 지워주세요 */}
+      <Input onChange={handleChange} />
+      <p role="paragraph" className="show-box--text">
+        {text || "값을 입력해주세요"}
       </p>
     </div>
   );