김미수 과제

src/Counter/index.js

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

src/Input/index.js

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

src/ShowBox/index.js

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