[코드리뷰 요청] 과제2 완료

.eslintrc.js

@@ -3,20 +3,15 @@ module.exports = {
     browser: true,
     es2021: true,
   },
-  extends: [
-    'plugin:react/recommended',
-    'airbnb',
-  ],
+  extends: ['plugin:react/recommended', 'airbnb'],
   parserOptions: {
     ecmaFeatures: {
       jsx: true,
     },
     ecmaVersion: 12,
     sourceType: 'module',
   },
-  plugins: [
-    'react',
-  ],
+  plugins: ['react'],
   globals: {
     Atomics: 'readonly',
     SharedArrayBuffer: 'readonly',
@@ -45,8 +40,9 @@ module.exports = {
     'object-curly-spacing': ['error', 'always'],
     'key-spacing': ['error', { mode: 'strict' }],
     'arrow-spacing': ['error', { before: true, after: true }],
-
+    'react/jsx-filename-extension': ['warn', { extensions: ['.js', '.jsx'] }],
     'react/prop-types': 'off',
     'react/react-in-jsx-scope': 'off',
+    'import/no-unresolved': 'off',
   },
 };

src/App.jsx

@@ -0,0 +1,36 @@
+import React, { useState } from 'react';
+import Header from './components/Header';
+import TodoInput from './components/TodoInput';
+import TodoLists from './components/TodoLists';
+
+export default function App() {
+  const [inputText, setInputText] = useState('');
+  const [todos, setTodos] = useState([]);
+  const randomId = () => Math.random().toString(12).substr(2, 16);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    setTodos([...todos, { id: randomId(), text: inputText }]);
+    setInputText('');
+  };
+
+  const handleChange = (e) => {
+    setInputText(e.target.value);
+  };
+
+  const handleClickComplete = (e) => {
+    setTodos(todos.filter((item) => e.target.id !== item.id));
+  };
+
+  return (
+    <div>
+      <Header />
+      <TodoInput
+        inputText={inputText}
+        onSubmit={handleSubmit}
+        onChange={handleChange}
+      />
+      <TodoLists todos={todos} onClickComplete={handleClickComplete} />
+    </div>
+  );
+}

src/components/Header.jsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default function Header() {
+  return <div>TO-DO</div>;
+}

src/components/TodoInput.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+export default function TodoInput({ inputText, onSubmit, onChange }) {
+  return (
+    <form onSubmit={onSubmit}>
+      <input type="text" value={inputText} onChange={onChange} />
+      <button type="submit">추가</button>
+    </form>
+  );
+}

src/components/TodoLists.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+export default function TodoLists({ todos, onClickComplete }) {
+  const showTodos = () => {
+    if (todos.length === 0) {
+      return <span>할 일이 없어요!</span>;
+    }
+    return todos.map((item) => (
+      <li key={item.id}>
+        <span>{item.text}</span>
+        <button type="button" id={item.id} onClick={onClickComplete}>
+          완료
+        </button>
+      </li>
+    ));
+  };
+
+  return <ol>{showTodos()}</ol>;
+}

src/index.jsx

@@ -0,0 +1,5 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+ReactDOM.render(<App />, document.getElementById('app'));