feat : todo add, del, check

- Untoc-Web-Develop#1
parkqjunseo · Oct 10, 2023 · ccce4db · ccce4db
1 parent 6160ca2
commit ccce4db
Show file tree

Hide file tree

Showing 13 changed files with 221 additions and 34 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -17,5 +17,11 @@
     "sourceType": "module"
   },
   "plugins": ["react"],
-  "rules": {}
+  "rules": {
+    "prettier/prettier": {
+      "warn": {
+        "endOfLine": "auto"
+      }
+    }
+  }
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -7,8 +7,10 @@
     "gh-pages": "^6.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-redux": "^8.1.2",
-    "react-scripts": "5.0.1",
+    "react-icons": "^4.11.0",
+    "react-redux": "^8.1.3",
+    "react-scripts": "^5.0.1",
+    "redux": "^4.2.1",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

diff --git a/public/index.html b/public/index.html
@@ -7,34 +7,10 @@
     <meta name="theme-color" content="#000000" />
     <meta name="description" content="Web site created using create-react-app" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
     <title>React App</title>
   </head>
   <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
   </body>
 </html>
diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,7 +1,15 @@
 import React from 'react';
+import InputForm from 'components/InputForm';
+import TodoList from 'components/TodoList';
 
 function App() {
-  return <h1 className="text-3xl font-bold underline">Hello, World!</h1>;
+  return (
+    <div>
+      <h1>니할일이뭔데그래서...</h1>
+      <InputForm />
+      <TodoList />
+    </div>
+  );
 }
 
 export default App;
diff --git a/src/common/actions.jsx b/src/common/actions.jsx
@@ -0,0 +1,30 @@
+export const ADD = 'ADD_TODO';
+export const DELETE = 'DELETE_TODO';
+export const TOGGLE = 'TOGGLE_TODO';
+
+let prevId = 0;
+
+export const addTodo = (todo) => {
+  return {
+    type: ADD,
+    todo: {
+      id: prevId++,
+      text: todo.text,
+      done: todo.done,
+    },
+  };
+};
+
+export const deleteTodo = (id) => {
+  return {
+    type: DELETE,
+    id,
+  };
+};
+
+export const toggleTodo = (id) => {
+  return {
+    type: TOGGLE,
+    id,
+  };
+};
diff --git a/src/common/reducer.jsx b/src/common/reducer.jsx
@@ -0,0 +1,28 @@
+import { ADD, DELETE, TOGGLE } from './actions';
+
+const initialState = {
+  todos: [],
+};
+
+export const reducer = (state = initialState, action) => {
+  switch (action.type) {
+    case ADD:
+      return {
+        todos: [...state.todos, action.todo],
+      };
+
+    case TOGGLE:
+      return {
+        ...state,
+        todos: state.todos.map((todo) => (todo.id === action.id ? { ...todo, done: !todo.done } : todo)),
+      };
+
+    case DELETE:
+      return {
+        todos: [...state.todos.filter((todo) => todo.id !== action.id)],
+      };
+
+    default:
+      return state;
+  }
+};
diff --git a/src/components/InputForm.jsx b/src/components/InputForm.jsx
@@ -0,0 +1,47 @@
+import React, { useState } from 'react';
+import { useDispatch } from 'react-redux';
+import { addTodo } from 'common/actions';
+
+const InputForm = () => {
+  const dispatch = useDispatch();
+
+  const [content, setContent] = useState('');
+
+  const handleChange = (e) => {
+    const { value } = e.target;
+    setContent(value);
+  };
+
+  const handleClick = () => {
+    const todo = {
+      text: content,
+      done: false,
+    };
+
+    dispatch(addTodo(todo));
+    setContent('');
+  };
+
+  const handleKeypress = (e) => {
+    if (e.key === 'Enter') {
+      handleClick();
+    }
+  };
+
+  return (
+    <div>
+      <input
+        type="text"
+        placeholder="할 일이 먼데"
+        onChange={handleChange}
+        value={content}
+        onKeyDown={handleKeypress}
+      />
+      <button onClick={handleClick} type="submit">
+        +
+      </button>
+    </div>
+  );
+};
+
+export default InputForm;
diff --git a/src/components/TodoItem.jsx b/src/components/TodoItem.jsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import { useDispatch } from 'react-redux';
+import PropTypes from 'prop-types';
+import { MdCheckBox, MdCheckBoxOutlineBlank } from 'react-icons/md';
+import { deleteTodo, toggleTodo } from 'common/actions';
+
+const TodoItem = ({ todo }) => {
+  const dispatch = useDispatch();
+
+  const { id, text, done } = todo;
+
+  const handleClick = () => {
+    dispatch(deleteTodo(id));
+  };
+
+  const handleCheckboxChange = () => {
+    dispatch(toggleTodo(id));
+  };
+
+  return (
+    <div>
+      <div className="check-box">
+        {done ? (
+          <MdCheckBox onClick={handleCheckboxChange} />
+        ) : (
+          <MdCheckBoxOutlineBlank onClick={handleCheckboxChange} />
+        )}
+      </div>
+      <span>{text}</span>
+      <button onClick={handleClick} type="button">
+        안해!!!
+      </button>
+    </div>
+  );
+};
+
+TodoItem.propTypes = {
+  todo: PropTypes.shape({
+    id: PropTypes.number.isRequired,
+    text: PropTypes.string.isRequired,
+    done: PropTypes.bool.isRequired,
+  }).isRequired,
+};
+
+export default TodoItem;
diff --git a/src/components/TodoList.jsx b/src/components/TodoList.jsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import TodoItem from './TodoItem';
+
+const TodoList = () => {
+  const todos = useSelector((state) => state.todos);
+
+  return (
+    <div>
+      {todos.map((todo) => (
+        <TodoItem key={todo.id} todo={todo} />
+      ))}
+    </div>
+  );
+};
+
+export default TodoList;
diff --git a/src/index.jsx b/src/index.jsx
@@ -1,7 +1,17 @@
 import React from 'react';
+import { createStore } from 'redux';
 import ReactDOM from 'react-dom/client';
+
 import './index.css';
+import { Provider } from 'react-redux';
+import { reducer } from './common/reducer';
 import App from './App';
 
+const reduxStore = createStore(reducer);
 const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(<App />);
+
+root.render(
+  <Provider store={reduxStore}>
+    <App />
+  </Provider>,
+);