[3주차] 정대헌 미션 제출합니다.

package.json

@@ -6,11 +6,16 @@
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.4",
     "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^27.4.1",
+    "@types/node": "^17.0.23",
+    "@types/react": "^17.0.43",
+    "@types/react-dom": "^17.0.14",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-icons": "^4.3.1",
     "react-scripts": "5.0.0",
     "styled-components": "^5.3.3",
+    "typescript": "^4.6.3",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
@@ -36,5 +41,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@types/styled-components": "^5.1.24"
   }
 }

src/App.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+
+import { GlobalProvider } from "./context/GlobalContext";
+import InputContainer from "./containers/InputContainer";
+import ListItemContainer from "./containers/ListItemContainer";
+import GlobalStyle from "./GlobalStyles";
+import { ItemType } from "./Objects";
+
+function App() {
+  return (
+    <GlobalProvider>
+      <GlobalStyle />
+      <div className="background">
+        <div className="container">
+          <InputContainer />
+          <ListItemContainer title={"해야할 일"} listType={ItemType.Todo} />
+          <ListItemContainer title={"완료한 일"} listType={ItemType.Done} />
+        </div>
+      </div>
+    </GlobalProvider>
+  );
+}
+
+export default App;

src/GlobalStyles.js → src/GlobalStyles.tsx

@@ -34,12 +34,7 @@ export default createGlobalStyle`
     display: grid;
     place-items: center;
     background-color: #fa8bff;
-    background-image: linear-gradient(
-      45deg,
-      #fa8bff 0%,
-      #2bd2ff 52%,
-      #2bff88 90%
-    );
+    background-image: linear-gradient(120deg, #fccb90 0%, #d57eeb 100%);
     font-family: var(--ff-main);
     color: white;
   }

src/Objects.ts

@@ -0,0 +1,13 @@
+export type Item = {
+  id: string,
+  type?: ItemType,
+  content?: string,
+}
+
+export enum ItemType {Todo, Done}
+
+export type Action = {type: ActionType, payload: any}
+
+export enum ActionType {DELETE, ADD, MODIFY }
+
+export type State = Item[]

src/components/ListItem.js → src/components/ListItem.tsx

@@ -2,9 +2,10 @@ import React, { useContext } from "react";
 import { FaTrash } from "react-icons/fa";
 import styled from "styled-components";
 
-import { GlobalContext } from "../context/GlobalState";
+import { DispatchContext} from "../context/GlobalContext";
+import { Item, ActionType, ItemType } from "../Objects";
 
-const Item = styled.div`
+const ItemDiv = styled.div`
   display: flex;
   width: "100%";
   justify-content: space-between;
@@ -70,11 +71,29 @@ const DeleteIcon = styled.p`
   color: gray;
 `;
 
-const ListItem = ({ item }) => {
-  const { deleteItem, moveItem } = useContext(GlobalContext);
+const ListItem = ({ item }: {item: Item}) => {
+  const dispatch = useContext(DispatchContext);
+
+    const moveItem = (uid: string) => {
+    dispatch({
+      type: ActionType.MODIFY,
+      payload: {
+        id: uid,
+      },
+    });
+  };
+
+  const deleteItem = (uid: string) => {
+    dispatch({
+      type: ActionType.DELETE,
+      payload: {
+        id: uid,
+      },
+    });
+  };
 
   return (
-    <Item>
+    <ItemDiv>
       <ItemScrollDiv>
         <ItemFinishButton
           type="button"
@@ -84,7 +103,7 @@ const ListItem = ({ item }) => {
         >
           <ItemTitle>
             {/* listType의 done/todo에 따라 del 태그 삽입 */}
-            {item.type === "done" ? <del>{item.content}</del> : item.content}
+            {item.type === ItemType.Done ? <del>{item.content}</del> : item.content}
           </ItemTitle>
         </ItemFinishButton>
       </ItemScrollDiv>
@@ -98,7 +117,7 @@ const ListItem = ({ item }) => {
           <FaTrash />
         </DeleteIcon>
       </ItemDeleteButton>
-    </Item>
+    </ItemDiv>
   );
 };
 

src/containers/InputContainer.js → src/containers/InputContainer.tsx

@@ -1,7 +1,8 @@
 import React, { useState, useContext } from "react";
 import styled from "styled-components";
 
-import { GlobalContext } from "../context/GlobalState";
+import { DispatchContext } from "../context/GlobalContext";
+import { ActionType, ItemType } from "../Objects";
 
 const AppInput = styled.div`
   width: 28rem;
@@ -58,15 +59,22 @@ const SubmitBtn = styled.button`
   }
 `;
 
-const InputContainer = (props) => {
+const InputContainer = () => {
   const [text, setText] = useState("");
-  const { addItem } = useContext(GlobalContext);
+  const dispatch = useContext(DispatchContext);
 
-  const submitHandler = (e) => {
+  const addItem = (uid:string, itemType: ItemType, itemContent: string) => {
+    dispatch({
+      type: ActionType.ADD,
+      payload: { id: uid, type: itemType, content: itemContent },
+    });
+  };
+
+  const submitHandler = (e:React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     if (text !== "") {
       const uid = new Date().getTime().toString();
-      addItem(uid, "todo", text);
+      addItem(uid, ItemType.Todo, text);
       setText("");
     }
   };

src/containers/ListItemContainer.js → src/containers/ListItemContainer.tsx

@@ -2,7 +2,8 @@ import React, { useContext } from "react";
 import styled from "styled-components";
 
 import ListItem from "../components/ListItem";
-import { GlobalContext } from "../context/GlobalState";
+import { StateContext } from "../context/GlobalContext";
+import { ItemType } from "../Objects";
 
 const ItemSection = styled.section`
   display: flex;
@@ -25,8 +26,8 @@ const SectionTitle = styled.h4`
   margin-bottom: 1rem;
 `;
 
-const ListItemContainer = ({ title, listType }) => {
-  const { listItems } = useContext(GlobalContext);
+const ListItemContainer = ({ title, listType }:{title: String, listType: ItemType}) => {
+  const listItems = useContext(StateContext);
 
   return (
     <ItemSection>

src/context/AppReducer.tsx

@@ -0,0 +1,22 @@
+import {Item, ItemType, Action, ActionType, State} from "../Objects"
+
+const AppReducer = (state: State, action: Action):State => {
+  switch (action.type) {
+    case ActionType.DELETE:
+      return [...state.filter((item) => item.id !== action.payload.id)];
+    case ActionType.ADD:
+      return [...state.concat([action.payload])];
+    case ActionType.MODIFY:
+      return [
+        ...state.map((item: Item) =>
+          item.id === action.payload.id
+            ? { ...item, type: item.type === ItemType.Todo ? ItemType.Done : ItemType.Todo }
+            : item
+        ),
+      ];
+    default:
+      return [...state];
+  }
+};
+
+export default AppReducer;