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

package.json

@@ -6,9 +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": {
@@ -34,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.tsx

@@ -0,0 +1,53 @@
+import { createGlobalStyle } from "styled-components";
+
+export default createGlobalStyle`
+  /* fonts */
+
+  @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap");
+
+  :root {
+    --ff-main: "Noto Sans KR", sans-serif;
+  }
+
+  /* global attributes */
+
+  *,
+  ::after,
+  ::before {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+  /* tags */
+
+  p {
+    line-height: 1.5;
+    font-size: 1rem;
+    display: inline;
+  }
+
+  /* classes */
+
+  .background {
+    min-height: 100vh;
+    display: grid;
+    place-items: center;
+    background-color: #fa8bff;
+    background-image: linear-gradient(120deg, #fccb90 0%, #d57eeb 100%);
+    font-family: var(--ff-main);
+    color: white;
+  }
+  .container {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    border-radius: 2rem;
+    border-color: black;
+    padding: 1rem;
+    background-color: rgba(255, 255, 255, 0.3);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+    min-width: 30rem;
+  }
+`;

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: Item}
+
+export enum ActionType {DELETE, ADD, MODIFY }
+
+export type State = Item[]

src/components/ListItem.tsx

@@ -0,0 +1,124 @@
+import React, { useContext } from "react";
+import { FaTrash } from "react-icons/fa";
+import styled from "styled-components";
+
+import { DispatchContext} from "../context/GlobalContext";
+import { Item, ActionType, ItemType } from "../Objects";
+
+const ItemDiv = styled.div`
+  display: flex;
+  width: "100%";
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+  border-radius: 2rem;
+  background-color: white;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+  padding: 0.75rem;
+  &:hover {
+    box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
+  }
+`;
+
+const ItemScrollDiv = styled.div`
+  width: 23rem;
+  display: flex;
+  align-items: center;
+`;
+
+const ItemTitle = styled.div`
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+  font-family: var(--ff-main);
+  line-height: 1.5;
+  text-align: left;
+  word-wrap: break-word;
+  word-break: break-all;
+  text-align-last: left;
+  font-size: 1rem;
+  display: inline;
+  line-height: 1.5;
+`;
+
+const ItemFinishButton = styled.button`
+  background-color: transparent;
+  border-color: transparent;
+  cursor: pointer;
+  border-radius: 1.3rem;
+  &:hover {
+    background-color: lightgray;
+  }
+`;
+
+const ItemDeleteButton = styled.button`
+  width: 2rem;
+  height: 2rem;
+  border-color: transparent;
+  background-color: transparent;
+  border-radius: 10rem;
+  margin-right: 0.2rem;
+  padding: 0 0.2rem 0 0.2rem;
+  cursor: pointer;
+  &:hover {
+    background-color: lightgray;
+  }
+`;
+const DeleteIcon = styled.p`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  size: 1.5rem;
+  color: gray;
+`;
+
+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 (
+    <ItemDiv>
+      <ItemScrollDiv>
+        <ItemFinishButton
+          type="button"
+          onClick={() => {
+            moveItem(item.id);
+          }}
+        >
+          <ItemTitle>
+            {/* listType의 done/todo에 따라 del 태그 삽입 */}
+            {item.type === ItemType.Done ? <del>{item.content}</del> : item.content}
+          </ItemTitle>
+        </ItemFinishButton>
+      </ItemScrollDiv>
+      <ItemDeleteButton
+        type="button"
+        onClick={() => {
+          deleteItem(item.id);
+        }}
+      >
+        <DeleteIcon>
+          <FaTrash />
+        </DeleteIcon>
+      </ItemDeleteButton>
+    </ItemDiv>
+  );
+};
+
+export default ListItem;

src/containers/InputContainer.tsx

@@ -0,0 +1,103 @@
+import React, { useState, useContext } from "react";
+import styled from "styled-components";
+
+import { DispatchContext } from "../context/GlobalContext";
+import { ActionType, ItemType } from "../Objects";
+
+const AppInput = styled.div`
+  width: 28rem;
+  margin-bottom: 1rem;
+`;
+
+const FormControl = styled.form`
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+`;
+
+const FormInput = styled.input`
+  width: 23rem;
+  padding: 0.75rem;
+  font-size: 1rem;
+  border-radius: 2rem;
+  border-color: transparent;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+  padding-left: 1.2rem;
+  font-family: var(--ff-main);
+  outline: none;
+  &:hover {
+    box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
+  }
+`;
+
+const AppTitle = styled.div`
+  font-size: 1.7rem;
+  display: flex;
+  text-align: center;
+  justify-content: center;
+  margin: 1.5rem 0;
+  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+`;
+
+const SubmitBtn = styled.button`
+  display: flex;
+  align-items: center;
+  background-color: white;
+  border-color: transparent;
+  color: grey;
+  padding: 0.25rem;
+  cursor: pointer;
+  border-radius: 2rem;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.3);
+    color: white;
+  }
+  & p {
+    font-size: 2rem;
+    width: 3rem;
+  }
+`;
+
+const InputContainer = () => {
+  const [text, setText] = useState("");
+  const dispatch = useContext(DispatchContext);
+
+  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, ItemType.Todo, text);
+      setText("");
+    }
+  };
+
+  return (
+    <AppInput>
+      <AppTitle>
+        <h3>투두 투두</h3>
+      </AppTitle>
+      <FormControl onSubmit={(e) => submitHandler(e)}>
+        <FormInput
+          type="text"
+          id="todoItem"
+          placeholder="오늘은 행복하길 바래"
+          onChange={(e) => setText(e.target.value)}
+          value={text}
+        />
+        <SubmitBtn type="submit">
+          <p>+</p>
+        </SubmitBtn>
+      </FormControl>
+    </AppInput>
+  );
+};
+
+export default InputContainer;