diff --git a/src/App.jsx b/src/App.jsx
index 5d62758..7562728 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,17 +1,10 @@
-import { useState } from "react";
-import reactLogo from "./assets/react.svg";
-import viteLogo from "/vite.svg";
 import "./App.css";
+import Input from "./components/Input"
 
 function App() {
-  const [count, setCount] = useState(0);
-  const name = "류승찬";
-
-  return (
-    <>
-      화이팅
-    </>
+  return(
+    <Input/>
   );
 }
 
-export default App;
+export default App;
\ No newline at end of file
diff --git a/src/components/Input.jsx b/src/components/Input.jsx
new file mode 100644
index 0000000..d68f765
--- /dev/null
+++ b/src/components/Input.jsx
@@ -0,0 +1,24 @@
+import { useState,useRef } from "react";
+import Log from "./Log"
+
+
+
+function Input() {
+    const [inp, setInp] = useState('');
+
+    const inpRef = useRef(null);
+
+        const focusInp = () => {
+            inpRef.current.focus()
+        }
+    return (
+        <div>
+            <button onClick={focusInp}>포커스</button>
+            <input  ref={inpRef} value={inp} onChange={(e) => { setInp(e.target.value) }}></input>
+            <p>입력한 내용 : {inp}</p>
+            <Log text={inp}/>
+        </div>
+    );
+}
+
+export default Input;
\ No newline at end of file
diff --git a/src/components/Log.jsx b/src/components/Log.jsx
new file mode 100644
index 0000000..097edbf
--- /dev/null
+++ b/src/components/Log.jsx
@@ -0,0 +1,22 @@
+import { useState,useEffect } from 'react';
+
+function Log({ text }) {
+    const [texts, setTexts] = useState([]);
+
+    useEffect(() => {
+        if (texts.length > 0) {
+            console.log("추가됨");
+        }
+    }, [texts])
+    const handleAdd = () => {
+        setTexts([...texts, text]); 
+    };
+    return (
+        <div>
+            <button onClick={handleAdd}>기록 추가</button>
+            <p>목록: {texts.join(', ')}</p>
+        </div>
+    );
+}
+
+export default Log;