과제 2 - 간단한 Todo App 만들기

.eslintrc.js

@@ -18,13 +18,22 @@ module.exports = {
     'react',
   ],
   globals: {
-    Atomics: 'readonly',
-    SharedArrayBuffer: 'readonly',
     actor: 'readonly',
     Feature: 'readonly',
     Scenario: 'readonly',
   },
   rules: {
+    'react/function-component-definition': [2, {
+      namedComponents: 'function-declaration',
+    }],
+    'react/prop-types': 'off',
+    'react/jsx-no-bind': ['error', {
+      ignoreRefs: true,
+      allowArrowFunctions: true,
+      allowFunctions: false,
+      allowBind: false,
+      ignoreDOMComponents: true,
+    }],
     indent: ['error', 2],
     'no-trailing-spaces': 'error',
     curly: 'error',

package.json

@@ -19,12 +19,12 @@
     "@codeceptjs/configure": "^0.6.2",
     "babel-loader": "^8.2.2",
     "codeceptjs": "^3.0.6",
-    "eslint": "^7.25.0",
-    "eslint-config-airbnb": "^18.2.1",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-react": "^7.23.2",
-    "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint": "^8.4.1",
+    "eslint-config-airbnb": "^19.0.2",
+    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-react": "^7.27.1",
+    "eslint-plugin-react-hooks": "^4.3.0",
     "puppeteer": "^9.0.0",
     "start-server-and-test": "^1.12.1",
     "webpack": "^5.36.2",

src/component/App.jsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+import Page from './Page';
+
+export default function App() {
+  return (
+    <Page />
+  );
+}

src/component/Habit.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+function Habit({ onClickDelete, text }) {
+  return (
+    <div>
+      {text}
+      <button
+        onClick={onClickDelete}
+        type="button"
+      >
+        완료
+      </button>
+    </div>
+  );
+}
+export default Habit;

src/component/Habits.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+import Habit from './Habit';
+
+function Habits({ onClickDelete, habits }) {
+  if (habits.length === 0) {
+    return (
+      <div>
+        할 일이 없어요!
+      </div>
+    );
+  }
+  return (
+    <div>
+      {
+        habits.map((habit) => (
+          <Habit
+            onClickDelete={() => onClickDelete(habit.id)}
+            text={habit.text}
+            key={habit.id}
+          />
+        ))
+      }
+    </div>
+  );
+}
+
+export default Habits;

src/component/Input.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+function Input({ onSubmit, onChangeHabitToAdd, habitToAdd }) {
+  const onChanageHandler = (event) => {
+    onChangeHabitToAdd(event.target.value);
+  };
+
+  const onClickSubmitHabit = (event) => {
+    event.preventDefault();
+    const habit = {
+      id: Date.now() + habitToAdd,
+      text: habitToAdd,
+    };
+    onSubmit(habit);
+  };
+
+  return (
+    <div>
+      <form onSubmit={onClickSubmitHabit}>
+        <input
+          type="text"
+          name="content"
+          value={habitToAdd}
+          onChange={onChanageHandler}
+          placeholder="할 일을 입력해 주세요"
+        />
+        <input
+          type="submit"
+          value="추가"
+        />
+      </form>
+    </div>
+  );
+}
+
+export default Input;

src/component/Page.jsx

@@ -0,0 +1,52 @@
+import React, { useState } from 'react';
+
+import Input from './Input';
+import Habits from './Habits';
+
+function Page() {
+  const [state, setState] = useState({
+    habits: [],
+    habitToAdd: '',
+  });
+  const { habits, habitToAdd } = state;
+
+  const handleHabitToAdd = (value) => {
+    setState({
+      ...state,
+      habitToAdd: value,
+    });
+  };
+
+  const handleDelete = (id) => {
+    setState({
+      ...state,
+      habits: habits.filter((habit) => habit.id !== id),
+    });
+  };
+
+  const handleSubmit = (habit) => {
+    setState({
+      habits: [
+        habit,
+        ...habits,
+      ],
+      habitToAdd: '',
+    });
+  };
+  return (
+    <div>
+      <Input
+        onSubmit={handleSubmit}
+        onChangeHabitToAdd={handleHabitToAdd}
+        habitToAdd={habitToAdd}
+      />
+      <Habits
+        onClickDelete={handleDelete}
+        habits={habits}
+      />
+    </div>
+
+  );
+}
+
+export default Page;

src/index.jsx

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

webpack.config.js

@@ -1,6 +1,7 @@
 const path = require('path');
 
 module.exports = {
+  mode: 'development',
   entry: path.resolve(__dirname, 'src/index.jsx'),
   module: {
     rules: [