CEOS-Developers · Gaeun-Kwon · Mar 21, 2023 · Mar 23, 2023 · Mar 23, 2023 · Mar 23, 2023
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,6 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,6 +9,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
+    "styled-components": "^5.3.9",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/favicon.png b/public/favicon.png
diff --git a/public/index.html b/public/index.html
@@ -2,42 +2,19 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.png" />
     <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.
 
-      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`.
-    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <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/src/App.js b/src/App.js
@@ -1,9 +1,8 @@
+import styled from 'styled-components';
+import TodoList from './pages/TodoList';
+
 function App() {
-  return (
-    <div>
-      <h1>17기 프론트 화이팅~ 우하하</h1>
-    </div>
-  );
+  return <TodoList />;
 }
 
-export default App;
+export default App;
diff --git a/src/components/ListContainer.js b/src/components/ListContainer.js
@@ -0,0 +1,100 @@
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { TODOKEY } from '../constants/TODOKEY';
+
+const ListContainer = ({
+  title,
+  todoList,
+  setTodoList,
+  isDone,
+  setIsVisibleModal, // 컴포넌트 재사용성이 낮아지는 것 같은데.. 우짜지
+  setSelectedTodo, // 컴포넌트 재사용성이 낮아지는 것 같은데.. 우짜지
+}) => {
+  const toggleIsDone = (e) => {
+    const tempList = [...todoList];
+    tempList.forEach((todo) => {
+      if (todo.time === e.target.parentElement.id) {
+        todo.isDone = !todo.isDone;
+      }
+    });
+    setTodoList(tempList);
+
+    localStorage.setItem(TODOKEY, JSON.stringify(tempList));
+  };
+
+  const handleBtnClick = (e) => {
+    setSelectedTodo(e.target.parentElement);
+    setIsVisibleModal(true);
+  };
+
+  return (
+    <Wrapper>
+      <Title>{title}</Title>
+      <Lists>
+        {todoList
+          .filter((todo) => todo.isDone === isDone)
+          .map((todo) => {
+            return (
+              <SingleList id={todo.time} key={todo.time}>
+                <span onClick={toggleIsDone}>{todo.text}</span>
+                <button onClick={handleBtnClick}>🗑</button>
+              </SingleList>
+            );
+          })}
+      </Lists>
+    </Wrapper>
+  );
+};
+
+ListContainer.propTypes = {
+  title: PropTypes.string,
+  todoList: PropTypes.array,
+  setTodoList: PropTypes.func,
+  isDone: PropTypes.bool,
+  setIsVisibleModal: PropTypes.func,
+  setSelectedTodo: PropTypes.func,
+};
+
+const Wrapper = styled.div`
+  height: 33%;
+  display: flex;
+  flex-direction: column;
+`;
+
+const Title = styled.span`
+  user-select: none;
+`;
+
+const Lists = styled.div`
+  padding: 0.6rem;
+  overflow: auto;
+`;
+
+const SingleList = styled.div`
+  width: 100%;
+  padding: 0.1rem 0;
+  display: flex;
+
+  &:hover {
+    border-radius: 0.3rem;
+    background-color: rgb(239, 239, 248);
+  }
+
+  span {
+    &:hover {
+      cursor: pointer;
+    }
+  }
+
+  button {
+    margin: 0 0 0 auto;
+    background-color: transparent;
+    border: none;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+`;
+
+export default ListContainer;
diff --git a/src/constants/TODOKEY.js b/src/constants/TODOKEY.js
@@ -0,0 +1,2 @@
+const TODOKEY = 'todo';
+export { TODOKEY };
diff --git a/src/index.css b/src/index.css
@@ -0,0 +1,25 @@
+@font-face {
+  font-family: 'Pretendard-Regular';
+  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/[email protected]/Pretendard-Regular.woff')
+    format('woff');
+}
+
+body {
+  width: 100vw;
+  height: 100vh;
+  margin: 0;
+  background-color: lavender;
+
+  font-family: 'Pretendard-Regular';
+  font-weight: 400;
+  font-style: normal;
+  font-size: 1rem;
+}
+
+#root {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
diff --git a/src/index.js b/src/index.js
@@ -1,10 +1,11 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import App from './App';
 
-ReactDOM.render(
+import './index.css';
+
+ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
-  document.getElementById('root')
-);
+  </React.StrictMode>
+);