[2주차] 김류원 미션 제출합니다.

package.json

@@ -9,6 +9,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-scripts": "5.0.1",
+    "styled-components": "^6.1.13",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
@@ -34,5 +35,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11"
   }
 }

public/index.html

@@ -14,6 +14,10 @@
       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/
     -->
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.

src/App.jsx

@@ -0,0 +1,122 @@
+import styled from "styled-components";
+import { createGlobalStyle } from "styled-components";
+import Header from "./components/Header";
+import List from "./components/List";
+import Editor from "./components/Editor";
+import { useRef, useReducer } from "react";
+
+const mockDate = [
+  {
+    id: 0,
+    isDone: false,
+    content: "React 공부하기",
+    date: new Date().getTime(),
+  },
+  {
+    id: 1,
+    isDone: false,
+    content: "고양이 밥 주기",
+    date: new Date().getTime(),
+  },
+  {
+    id: 2,
+    isDone: false,
+    content: "고양이 놀아주기",
+    date: new Date().getTime(),
+  },
+];
+
+function reducer(state, action) {
+  switch (action.type) {
+    case "CREATE":
+      return [action.data, ...state];
+    case "UPDATE":
+      return state.map((item) =>
+        item.id === action.targetId ? { ...item, isDone: !item.isDone } : item
+      );
+    case "DELETE":
+      return state.filter((item) => item.id !== action.targetId);
+    default:
+      return state;
+  }
+}
+
+function App() {
+  const [todos, dispatch] = useReducer(reducer, mockDate);
+  const idRef = useRef(3);
+
+  const onCreate = (content) => {
+    dispatch({
+      type: "CREATE",
+      data: {
+        id: idRef.current++,
+        isDone: false,
+        content: content,
+        date: new Date().getTime(),
+      },
+    });
+  };
+
+  const onUpdate = (targetId) => {
+    dispatch({ type: "UPDATE", targetId: targetId });
+  };
+
+  const removeTodo = (targetId) => {
+    dispatch({
+      type: "DELETE",
+      targetId: targetId,
+    });
+  };
+  return (
+    <>
+      <GlobalStyle />
+      <AppContainer>
+        <Header />
+        <Editor onCreate={onCreate} />
+        <List todos={todos} onUpdate={onUpdate} removeTodo={removeTodo} />
+      </AppContainer>
+    </>
+  );
+}
+
+const AppContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  width: 500px;
+  margin: 0 auto;
+  background-color: #f1f3ff;
+  border-radius: 5px;
+  padding: 30px;
+  box-shadow: inset 0 0 20px #d6ddff;
+  height: 80vh;
+  box-sizing: border-box;
+
+  /* 모바일 반응형 */
+  @media (max-width: 768px) {
+    width: 360px;
+    height: 560px;
+    padding: 20px;
+  }
+`;
+
+const GlobalStyle = createGlobalStyle`
+  body {
+    background-color: #788bff;
+    margin: 0;
+    padding: 0;
+    font-family: 'Arial', sans-serif;
+    display:flex;
+    height:100vh;
+    justify-content:center;
+    align-items:center;
+
+    /* 모바일 반응형 */
+    @media (max-width: 768px) {
+       height:100vh;
+       width:100%;
+    }
+  }
+`;
+
+export default App;

src/components/Editor.jsx

@@ -0,0 +1,76 @@
+import styled from "styled-components";
+import { useRef, useState } from "react";
+
+const Editor = ({ onCreate }) => {
+  const [content, setContent] = useState("");
+
+  const contentRef = useRef();
+
+  const onChangeContent = (e) => {
+    setContent(e.target.value);
+  };
+
+  const onkeydown = (e) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      onSubmit();
+    }
+  };
+
+  const onSubmit = () => {
+    if (content.trim() === "") {
+      contentRef.current.focus();
+      return;
+    }
+    onCreate(content.trim());
+    setContent("");
+  };
+
+  return (
+    <EditorContainer>
+      <Input
+        ref={contentRef}
+        type="text"
+        placeholder="새로운 Todo..."
+        onChange={onChangeContent}
+        onKeyDown={onkeydown}
+        value={content}
+      />
+      <Button onClick={onSubmit}>Add</Button>
+    </EditorContainer>
+  );
+};
+
+const EditorContainer = styled.div`
+  display: flex;
+  gap: 10px;
+`;
+
+const Input = styled.input`
+  flex: 1;
+  padding: 15px;
+  border: 1px solid rgb(220, 220, 220);
+  border-radius: 5px;
+  background-color: #d6ddff;
+  color: #788bff;
+  outline: none;
+  border: none;
+  font-weight: 500;
+
+  &::placeholder {
+    color: #788bff;
+    opacity: 1;
+  }
+`;
+
+const Button = styled.button`
+  cursor: pointer;
+  width: 80px;
+  border: none;
+  background-color: #788bff;
+  color: white;
+  border-radius: 10px;
+  font-size: 1rem;
+`;
+
+export default Editor;

src/components/Header.jsx

@@ -0,0 +1,21 @@
+import styled from "styled-components";
+
+const Header = () => {
+  return (
+    <HeaderContainer>
+      <h1>TO DO</h1>
+      <span>{new Date().toDateString()}</span>
+    </HeaderContainer>
+  );
+};
+
+const HeaderContainer = styled.div`
+  h1 {
+    color: #788bff;
+  }
+  span {
+    color: #8790ca;
+  }
+`;
+
+export default Header;

src/components/List.jsx

@@ -0,0 +1,129 @@
+import styled from "styled-components";
+import TodoItem from "./TodoItem";
+import { useState, useMemo } from "react";
+
+const List = ({ todos, onUpdate, setTodos, removeTodo }) => {
+  const [search, setSearch] = useState("");
+
+  const onChangeSearch = (e) => {
+    setSearch(e.target.value);
+  };
+
+  const getFilteredDate = () => {
+    if (search === "") {
+      return todos;
+    }
+    return todos.filter((todos) => {
+      return todos.content.toLowerCase().includes(search.toLowerCase());
+    });
+  };
+
+  const filteredTodos = getFilteredDate();
+
+  const { doneCount, notDoneCount } = useMemo(() => {
+    const totalCount = todos.length;
+    const doneCount = todos.filter((todo) => todo.isDone).length;
+    const notDoneCount = totalCount - doneCount;
+
+    return {
+      totalCount,
+      doneCount,
+      notDoneCount,
+    };
+  }, [todos]);
+
+  return (
+    <ListContainer>
+      <TopWrapper>
+        <h4>Todo List 🌱</h4>
+        <CountWrapper>
+          <span>todo : {notDoneCount}</span>
+          <span>done : {doneCount}</span>
+        </CountWrapper>
+      </TopWrapper>
+      <SearchInput
+        type="text"
+        placeholder="검색어를 입력하세요"
+        value={search}
+        onChange={onChangeSearch}
+      />
+      <TodoWrapper>
+        {filteredTodos.map((todos) => {
+          return (
+            <TodoItem
+              key={todos.id}
+              {...todos}
+              onUpdate={onUpdate}
+              todos={todos}
+              setTodos={setTodos}
+              removeTodo={removeTodo}
+            />
+          );
+        })}
+      </TodoWrapper>
+    </ListContainer>
+  );
+};
+
+const ListContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-top: 40px;
+  overflow-y: auto;
+  scrollbar-width: none;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`;
+
+const TopWrapper = styled.div`
+  display: flex;
+  justify-content: space-between;
+
+  h4 {
+    color: #788bff;
+    margin: 0;
+  }
+`;
+
+const CountWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  span {
+    color: #8790ca;
+    font-size: 0.8rem;
+  }
+`;
+
+const SearchInput = styled.input`
+  width: 100%;
+  border: none;
+  border-bottom: 1px solid #d9dfff;
+  padding: 15px 0;
+  color: #788bff;
+  margin-bottom: 20px;
+  background: transparent;
+
+  &:focus {
+    outline: none;
+    color: #788bff;
+    border-bottom: 1px solid #788bff;
+  }
+
+  &::placeholder {
+    color: #788bff;
+  }
+`;
+
+const TodoWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+`;
+
+export default List;