house-study · yeonilil · May 23, 2024 · May 23, 2024 · jeongnaehyeok · May 23, 2024
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -21,7 +21,12 @@ module.exports = {
     sourceType: 'module',
   },
   rules: {
-    'prettier/prettier': 'error',
+    'prettier/prettier': [
+      'error',
+      {
+        endOfLine: 'auto',
+      },
+    ],
     'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }],
     'react/jsx-uses-react': 'off',
     'react/react-in-jsx-scope': 'off',

diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml
@@ -20,4 +20,3 @@ jobs:
         run: npm run lint
       - name: test
         run: npm test
-
diff --git a/.prettierrc.js b/.prettierrc.js
@@ -13,4 +13,6 @@ module.exports = {
   printWidth: 80,
   // 화살표 함수가 하나의 매개변수를 받을 때 괄호를 생략
   arrowParens: 'avoid',
+
+  endOfLine: 'lf',
 };
diff --git a/public/index.html b/public/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />

diff --git a/src/App.css b/src/App.css
@@ -0,0 +1,8 @@
+body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+h1 {
+  text-align: center;
+}
diff --git a/src/App.js b/src/App.js
@@ -1,13 +1,52 @@
+import { useState, useRef } from 'react';
 import Form from './components/Form';
 import Item from './components/Item';
+import './App.css';
 
 function App() {
+  const [todos, setTodos] = useState([]);
+
+  const nextId = useRef(1);
+
+  const handleAddTodo = todo => {
+    const newTodo = {
+      id: nextId.current,
+      todo,
+      isCompleted: false,
+    };
+    setTodos([newTodo, ...todos]);
+    nextId.current += 1;
+  };
+
+  const handleCompleteTodo = (id, isCompleted) => {
+    setTodos(
+      todos.map(todo => (todo.id === id ? { ...todo, isCompleted } : todo)),
+    );
+  };
+
+  const handleDeleteTodo = id => {
+    setTodos(todos.filter(todo => todo.id !== id));
+  };
+
   return (
     <div className="App">
       <h1>Todo List</h1>
-      <Form />
+      <Form onAddTodo={handleAddTodo} />
       <ul>
-        <Item />
+        {todos.length === 0 ? (
+          <li>할 일이 없습니다.</li>
+        ) : (
+          todos.map(todo => (
+            <Item
+              key={todo.id}
+              id={todo.id}
+              todo={todo.todo}
+              isCompleted={todo.isCompleted}
+              onCompleteTodo={handleCompleteTodo}
+              onDeleteTodo={handleDeleteTodo}
+            />
+          ))
+        )}
       </ul>
     </div>
   );

diff --git a/src/components/Form.css b/src/components/Form.css
@@ -0,0 +1,6 @@
+.addButton {
+  width: 100px;
+  border: 0;
+  border-radius: 10px;
+  padding: 10px 20px;
+}
diff --git a/src/components/Form.js b/src/components/Form.js
@@ -1,11 +1,32 @@
 import PropTypes from 'prop-types';
+import { useState } from 'react';
+import './Form.css';
 
 function Form({ onAddTodo }) {
+  const [value, setValue] = useState('');
+  const onChange = e => {
+    setValue(e.target.value);
+  };
+  const onAdd = e => {
+    e.preventDefault();
+    if (value.trim() !== '') {
+      onAddTodo(value);
+      setValue('');
+    }
+  };
   return (
-    <div>
-      <input type="text" />
-      <button type="button">추가</button>
-    </div>
+    <form onSubmit={onAdd}>
+      <input
+        className="inputTodo"
+        type="text"
+        value={value}
+        onChange={onChange}
+        placeholder="할 일을 입력해주세요."
+      />
+      <button className="addButton" type="submit">
+        추가
+      </button>
+    </form>
   );
 }
 

diff --git a/src/components/Item.css b/src/components/Item.css
@@ -0,0 +1,20 @@
+.inputTodo {
+  width: 400px;
+  border: 1px solid #e0e0e0;
+  margin-right: 10px;
+  padding: 10px 20px;
+}
+.deleteButton {
+  width: 70px;
+  border: 0;
+  border-radius: 10px;
+  padding: 10px 20px;
+  margin-top: 10px;
+}
+.todo {
+  margin: 20px 10px;
+}
+li {
+  margin: 10px 0;
+  list-style: none;
+}
diff --git a/src/components/Item.js b/src/components/Item.js
@@ -1,32 +1,34 @@
 import PropTypes from 'prop-types';
+import './Item.css';
 
-function Item({ id, todo, isCompleted, onDeleteTodo, onCompleteTodo }) {
+function Item({ id, todo, isCompleted, onCompleteTodo, onDeleteTodo }) {
   return (
     <li>
-      <input type="checkbox" />
-      <p>{todo}</p>
+      <input
+        type="checkbox"
+        checked={isCompleted}
+        onChange={() => onCompleteTodo(id, !isCompleted)}
+      />
+      <span className="todo">{todo}</span>
       <div>
-        <button type="button">삭제</button>
+        <button
+          className="deleteButton"
+          type="button"
+          onClick={() => onDeleteTodo(id)}
+        >
+          삭제
+        </button>
       </div>
     </li>
   );
 }
 
 Item.propTypes = {
-  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  id: PropTypes.number.isRequired,
   todo: PropTypes.string.isRequired,
   isCompleted: PropTypes.bool.isRequired,
-  /**
-   * 할 일 삭제 함수
-   * @param {number|string} id 삭제할 할 일의 id
-   */
-  onDeleteTodo: PropTypes.func.isRequired,
-  /**
-   * 할 일 완료 함수
-   * @param {number|string} id 완료할 할 일의 id
-   * @param {boolean} isCompleted 완료 여부
-   */
   onCompleteTodo: PropTypes.func.isRequired,
+  onDeleteTodo: PropTypes.func.isRequired,
 };
 
 export default Item;
Original file line number	Diff line number	Diff line change
Expand Up		@@ -20,4 +20,3 @@ jobs:
		run: npm run lint
		- name: test
		run: npm test