CEOS-Developers · youdame · Mar 21, 2024 · Mar 21, 2024 · Mar 22, 2024 · Mar 22, 2024
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,15 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+    node: true,
+  },
+  extends: ['eslint:recommended', 'plugin:react/recommended', 'plugin:react/jsx-runtime'],
+  overrides: [],
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+  },
+  plugins: ['react'],
+  rules: { 'react/prop-types': 'off', 'no-unused-vars': 'warn' },
+};
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,7 @@
+{
+  "printWidth": 120,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "semi": true
+}
diff --git a/jsconfig.json b/jsconfig.json
@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "baseUrl": "src"
+  }
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,7 +8,10 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^5.0.1",
     "react-scripts": "5.0.1",
+    "styled-components": "^6.1.8",
+    "uuid": "^9.0.1",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
@@ -34,5 +37,11 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "babel-plugin-styled-components": "^2.1.4",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "prettier": "^3.2.5"
   }
 }
diff --git a/public/index.html b/public/index.html
@@ -1,43 +1,18 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <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.
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>TODO-LIST</title>
+    <link rel="stylesheet" href="./style/style.css" />
 
-      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>
+    <meta property="og:title" content="TODO-LIST" />
+    <meta property="og:url" content="https://vanilla-todo-19th-navy.vercel.app/" />
+    <meta property="og:type" content="website" />
+    <meta property="og:description" content="오늘의 일정을 관리해보세요." />
   </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/src/App.js b/src/App.js
diff --git a/src/App.jsx b/src/App.jsx
@@ -0,0 +1,55 @@
+import TodoCreate from 'components/TodoCreate';
+import TodoHeader from 'components/TodoHeader';
+import TodoList from 'components/TodoList';
+import { useEffect, useReducer } from 'react';
+import todoReducer from 'reducer/todoReducer';
+import styled from 'styled-components';
+import { flexCenter, flexColumn } from 'styles/commonStyle';
+
+const initialState = {
+  todoList: JSON.parse(localStorage.getItem('todoList')) || [],
+  doneList: JSON.parse(localStorage.getItem('doneList')) || [],
+};
+
+function App() {
+  const [state, dispatch] = useReducer(todoReducer, initialState);
+  const { todoList, doneList } = state;
+
+  useEffect(() => {
+    localStorage.setItem('todoList', JSON.stringify(todoList));
+    localStorage.setItem('doneList', JSON.stringify(doneList));
+  }, [todoList]);
+
+  return (
+    <TodoAppLayout>
+      <TodoHeader />
+      <TodoMain>
+        <TodoCreate list={todoList} dispatch={dispatch} />
+        <TodoListContainer>
+          <TodoList listName="todo" list={todoList} dispatch={dispatch} />
+          <TodoList listName="done" list={doneList} dispatch={dispatch} />
+        </TodoListContainer>
+      </TodoMain>
+    </TodoAppLayout>
+  );
+}
+
+export default App;
+
+const TodoAppLayout = styled.div`
+  padding: 4rem 0;
+  gap: 2rem;
+  ${flexCenter}
+  ${flexColumn}
+`;
+
+const TodoMain = styled.main`
+  ${flexColumn}
+  gap: 3rem;
+`;
+
+const TodoListContainer = styled.section`
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+`;
diff --git a/src/components/TodoCreate.jsx b/src/components/TodoCreate.jsx
@@ -0,0 +1,96 @@
+import { useState } from 'react';
+import styled from 'styled-components';
+import { flexCenter, flexColumn } from 'styles/commonStyle';
+import { v4 as uuid } from 'uuid';
+
+function TodoCreate({ dispatch }) {
+  const [inputValue, setInputValue] = useState('');
+  const [isError, setIsError] = useState(false);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (!inputValue?.trim()) {
+      setIsError(true);
+      return;
+    }
+
+    dispatch({
+      type: 'ADD_TODO',
+      payload: {
+        id: uuid(),
+        text: inputValue,
+      },
+    });
+
+    setIsError(false);
+    setInputValue('');
+  };
+
+  const handleInputValueChange = (e) => {
+    setInputValue(e.target.value);
+  };
+
+  return (
+    <InputForm onSubmit={handleSubmit}>
+      <InputContainer>
+        <InputWrapper>
+          <input className="input" placeholder="할 일 입력" value={inputValue} onChange={handleInputValueChange} />
+          <button className="input-button">입력</button>
+        </InputWrapper>
+        <ErrorMessage $isError={isError}>할 일을 입력해주세요</ErrorMessage>
+      </InputContainer>
+    </InputForm>
+  );
+}
+
+export default TodoCreate;
+
+const InputForm = styled.form`
+  display: flex;
+  width: 100%;
+  height: 6rem;
+  ${flexCenter}
+`;
+
+const InputContainer = styled.div`
+  ${flexColumn}
+  height: 100%;
+  gap: 1rem;
+`;
+
+const InputWrapper = styled.div`
+  display: flex;
+  height: 100%;
+  gap: 2rem;
+
+  & {
+    font-size: 2.5rem;
+  }
+
+  .input {
+    width: 50rem;
+    padding: 1rem;
+    border-radius: 1rem;
+  }
-  .input {
-    width: 50rem;
-    padding: 1rem;
-    border-radius: 1rem;
-  }
+  .input {
+    width: 50rem;
+    padding: 1rem;
+    border-radius: 1rem;
+    word-break: break-all; 
+  }
-  .input {
-    width: 50rem;
-    padding: 1rem;
-    border-radius: 1rem;
-  }
+  .input {
+    width: 50rem;
+    padding: 1rem;
+    border-radius: 1rem;
+    word-break: break-all; 
+  }
+
+  .input:focus {
+    border: 0.1rem solid #6d6afe;
+  }
+
+  .input-button {
+    width: 8rem;
+    padding: 0.2rem;
+    background: linear-gradient(91deg, #6d6afe 0.12%, #6ae3fe 101.84%);
+    color: white;
+    font-weight: 200;
+    border-radius: 1rem;
+  }
+`;
+
+const ErrorMessage = styled.p`
+  color: red;
+  font-size: 1.7rem;
+  margin-left: 0.4rem;
+
+  visibility: ${({ $isError }) => ($isError ? 'visible' : 'hidden')};
+`;
diff --git a/src/components/TodoHeader.jsx b/src/components/TodoHeader.jsx
@@ -0,0 +1,40 @@
+import { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import { getTodayDate } from 'util/getTodayDate';
+
+function TodoHeader() {
+  const [userName, setUserName] = useState(localStorage.getItem('userName') ?? '');
+
+  // 사용자 이름 설정
+  const showUserName = () => {
+    if (!userName) {
+      const nameInput = prompt('이름을 알려주세요!');
+      localStorage.setItem('userName', nameInput);
+      setUserName(nameInput);
+    }
+  };
+
+  useEffect(() => {
+    showUserName();
+  });
+
+  return (
+    <HeaderWrapper>
+      <p>{getTodayDate()}</p>
+      <h1>
+        <span>{userName}이의 </span>TODO-LIST
+      </h1>
+    </HeaderWrapper>
+  );
+}
+
+export default TodoHeader;
+
+const HeaderWrapper = styled.header`
+  display: flex;
+  font-size: 2.5rem;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 1rem;
+`;
diff --git a/src/components/TodoList.jsx b/src/components/TodoList.jsx
@@ -0,0 +1,72 @@
+import styled from 'styled-components';
+import { flexCenter, flexColumn } from 'styles/commonStyle';
+import { FaRegCheckCircle } from 'react-icons/fa';
+import { FaRegCircle } from 'react-icons/fa';
+import { FaRegTrashAlt } from 'react-icons/fa';
+
+function TodoList({ listName, list, dispatch }) {
+  const handleListItemClick = ({ id, text }) => {
+    const actionType = listName === 'todo' ? 'MOVE_TODO_TO_DONE' : 'MOVE_DONE_TO_TODO';
+    dispatch({ type: actionType, payload: { id, text } });
+  };
+
+  const handleDeleteItem = (e, { id, text }) => {
+    e.stopPropagation();
+    const actionType = listName === 'todo' ? 'REMOVE_TODO' : 'REMOVE_DONE';
+    dispatch({ type: actionType, payload: { id, text } });
+  };
+
+  return (
+    <TodoListWrapper>
+      <h2>
+        {listName} <span> / {list.length}개</span>
+      </h2>
+      <TodoListContainer>
+        {list.map((li) => (
+          <TodoListItem key={li.id} onClick={() => handleListItemClick(li)}>
+            {listName == 'todo' ? <FaRegCircle /> : <FaRegCheckCircle />}
+            {li.text}
+            <FaRegTrashAlt className="trash-icon" onClick={(e) => handleDeleteItem(e, li)} />
+          </TodoListItem>
+        ))}
+      </TodoListContainer>
+    </TodoListWrapper>
+  );
+}
+
+export default TodoList;
+
+const TodoListWrapper = styled.article`
+  display: flex;
+  width: 28rem;
+  height: 55rem;
+  padding: 2rem;
+  border: 0.13rem solid #6d6afe;
+  gap: 1rem;
+  align-items: center;
+  flex-direction: column;
+  border-radius: 2rem;
+
+  & {
+    font-size: 2.5rem;
+  }
+`;
+
+const TodoListContainer = styled.ul`
+  ${flexColumn}
+  gap: 1rem;
+  overflow: auto;
+`;
+
+const TodoListItem = styled.li`
+  display: flex;
+  ${flexCenter}
+  gap: 1rem;
+  cursor: pointer;
+  .trash-icon {
+    visibility: hidden;
+  }
+  &:hover .trash-icon {
+    visibility: visible;
+  }
+`;
diff --git a/src/font/meetme.woff b/src/font/meetme.woff