[3주차] 유세은 미션 제출합니다.

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "typescript.tsdk": "node_modules\\typescript\\lib"
+}

package.json

@@ -6,16 +6,24 @@
     "@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",
+    "@types/styled-components": "^5.1.24",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "5.0.0",
+    "styled-components": "^5.3.3",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "lint": "eslint './src/**/*.{ts,tsx,js,jsx}'",
+    "lint:fix": "eslint --fix './src/**/*.{ts,tsx,js,jsx}'"
   },
   "eslintConfig": {
     "extends": [
@@ -34,5 +42,15 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^5.17.0",
+    "@typescript-eslint/parser": "^5.17.0",
+    "eslint": "^8.12.0",
+    "eslint-plugin-import": "^2.25.4",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-react": "^7.29.4",
+    "eslint-plugin-react-hooks": "^4.3.0",
+    "typescript": "^4.6.3"
   }
 }

public/.eslintrc

@@ -0,0 +1,24 @@
+{
+    "root": true,
+    "parser": "@typescript-eslint/parser",
+    "plugins": [
+      "@typescript-eslint"
+    ],
+    "extends": [
+      "eslint:recommended",
+      "plugin:@typescript-eslint/eslint-recommended",
+      "plugin:@typescript-eslint/recommended",
+      "prettier/react",
+      "prettier",
+      "airbnb",
+      "airbnb/hooks",
+      "prettier/react",
+      "plugin:@typescript-eslint/recommended",
+      "prettier/@typescript-eslint",
+      "plugin:prettier/recommended"
+    ],
+    "rules": {
+      "no-console": 1,
+      "no-loops/no-loops": 2
+    }
+  }

src/.prettierrc

@@ -0,0 +1,6 @@
+{
+    "trailingComma": "es5",
+    "tabWidth": 2,
+    "semi": true,
+    "singleQuote": true
+  }

src/App.tsx

@@ -0,0 +1,47 @@
+import { useState } from "react";
+import './Design/background';
+import Clock from './clock';
+import Todobox from "./component/ToDo";
+import Donebox from "./component/Done"; 
+import InputForm from "./component/Inputform";
+import {Container, InputBox} from "./Design/BoxDesign";
+
+function App() {
+  const [toDoList, setToDoList] = useState<string[]>([]);
+  const [doneToDoList, setDoneToDoList] = useState<string[]>([]);
+
+
+
+  return (
+    <div>
+    <Clock/>
+    <Container>
+      <h1>❗투두리스트❗</h1>
+     <InputBox>
+
+    <InputForm 
+    toDoList={toDoList} 
+    setToDoList ={setToDoList}/>
+    </InputBox>
+      <hr/>
+
+      <Todobox
+      type = "Todo" 
+      setDoneToDoList ={setDoneToDoList} 
+      ItemList = {toDoList} 
+      setToDoList ={setToDoList}/>
+       <hr/>
+
+      <Donebox 
+      type = "Done"
+      setDoneToDoList ={setDoneToDoList} 
+      ItemList = {doneToDoList} 
+      setToDoList ={setToDoList}/>
+     </Container>
+</div>
+
+  );
+
+}
+
+export default App;

src/Design/BoxDesign.tsx

@@ -0,0 +1,26 @@
+//Container 디자인 관리
+
+import styled from 'styled-components';
+
+
+export const Container = styled.div
+`
+text-align: center;
+width: 360px;
+height: 600px;
+background-color: white;
+display: flex;
+flex-direction: column;
+border-bottom: 1px solid grey;
+border-radius: 9px;
+`
+;
+
+export const InputBox = styled.header
+`
+font-family: 'SuncheonB';
+flex: 0.2;
+border-bottom: 1px solid grey;
+
+`
+;

src/Design/ListDesign.tsx

@@ -0,0 +1,43 @@
+//list 디자인 관리
+import styled from 'styled-components';
+
+interface ILIst {
+
+    color ?:string;
+    decoration ?:string;
+
+  }
+
+export const ListTitle = styled.div
+    `font-size: 20px;
+    `
+;
+
+export const List = styled.li<ILIst>
+`
+    color: ${(props) => props.color || "black"};
+    text-decoration: ${(props) => props.decoration || "none"};
+`
+
+export const Button = styled.span
+`
+margin:4px;
+`
+
+export const Ul = styled.ul
+
+`
+
+margin: 0;
+padding: 0;
+flex: 0.5;
+border-bottom: 1px solid grey;
+overflow: auto;
+list-style:none;
+cursor: pointer;
+
+`
+;
+
+
+

src/Design/background.tsx

@@ -0,0 +1,13 @@
+export const colors : string[] = [
+    "#0fbcf9",
+    "#00d8d6",
+    "#05c46b",
+    "#ffc048",
+    "#ffdd59"
+
+    ];
+
+    let firstColor = colors[Math.floor(Math.random() * colors.length)];
+    let secondColor = colors[Math.floor(Math.random() * colors.length)];
+
+    document.body.style.background = `linear-gradient(${firstColor}, ${secondColor})`;

src/GlobalStyle.tsx

@@ -0,0 +1,28 @@
+import { createGlobalStyle } from "styled-components";
+
+const GlobalStyle = createGlobalStyle`
+
+@font-face {
+    font-family: 'SuncheonB';
+    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/SuncheonB.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+
+body{
+
+    font-family: 'SuncheonB';
+    font-size: 15px;
+    display: flex;
+    width: 100vh;
+    height: 100vh;
+    justify-content: center;
+    align-items: center;
+    margin: 0 auto;
+
+
+}
+
+`;
+
+export default GlobalStyle;

src/clock.tsx

@@ -0,0 +1,36 @@
+import { useEffect ,useState } from "react";
+import styled from "styled-components";
+
+   function Clock() {
+      const [time, setTime] = useState<string>();
+
+      function getTime (){
+      const date = new Date();
+
+    const hours = String(date.getHours()).padStart(2, "0");
+    const minutes = String(date.getMinutes()).padStart(2, "0");
+    const seconds = String(date.getSeconds()).padStart(2, "0");
+
+    let nowTime =`${hours}:${minutes}:${seconds}`;
+    setTime(nowTime);
+      }
+
+      useEffect(()=>{
+         setInterval(getTime, 1000);
+         return () => {
+            setInterval(getTime, 1000)
+        }
+
+      },[]);
+
+   const Clock = styled.h1
+   `text-align: center`
+   ;
+
+
+   return <Clock>{time}</Clock>;
+
+};
+
+
+export default Clock;

src/component/Done.tsx

@@ -0,0 +1,36 @@
+import styled, { createGlobalStyle } from "styled-components";
+import { ListTitle, Button, Ul,List} from "../Design/ListDesign";
+import useToDo from "../hooks/useToDo";
+import {ItemList} from "../type/type";
+
+/*type DoneProps = {
+
+  type : string;
+  setDoneToDoList: ()=>void;
+  doneToDoList : Array<string>;
+  setToDoList: ()=>void;
+}
+*/
+
+function Done({type,setDoneToDoList ,ItemList ,setToDoList} : ItemList){
+
+  let list : string[] = ItemList;
+
+  const {deleteButton, moveButton} = useToDo({type,setDoneToDoList ,list ,setToDoList});
+        return (
+            <Ul className = "done-box">
+            <ListTitle>👻Done({ItemList.length})</ListTitle>
+              {ItemList.map((item, id) => (
+               <List color="gray" decoration ="line-through" key={id}>
+               <Button onClick={() => moveButton(item,id)}>📂</Button>
+               {item}
+               <Button onClick={() => deleteButton(item,id)}>❌</Button>
+               </List>
+
+          ))}
+          </Ul>
+
+        );
+}
+
+export default Done;

src/component/Inputform.tsx

@@ -0,0 +1,67 @@
+import {useState } from "react";
+import styled  from "styled-components";
+import { Dispatch, SetStateAction} from "react";
+import useInput from "../hooks/useInput";
+
+
+type InputProps = {
+
+  toDoList : string[];
+  setToDoList : Dispatch<SetStateAction<string[]>>
+};
+
+
+
+function Inputform ({toDoList,setToDoList} : InputProps){
+
+  const{toDo, onChange ,inputToDo} = useInput();
+
+    const submitInput = (event : React.SyntheticEvent) => {
+      event.preventDefault();
+
+      if (toDo) {
+        setToDoList((toDoArray) => [toDo, ...toDoArray]); //입력받은 걸 배열에 넣음
+      }
+      inputToDo("");
+    };
+
+    const Input = styled.input
+      `
+      font-family: 'SuncheonB';
+      width: 300px;
+      height: 50px;
+      border-radius: 9px;
+
+
+      `
+
+      const ToDoButton = styled.span
+      `
+      cursor: pointer;
+      margin-left :5px;
+      `
+
+      const Form = styled.form
+      `
+      margin-bottom: 10px;
+      `
+      ;
+
+      return(
+      <Form onSubmit={submitInput} >
+        <Input
+          onChange={onChange}
+          value={toDo}
+          type="text"
+          placeholder="할 일을 입력하세요"
+          autoFocus = {true}
+          spellCheck="false"
+
+        />
+        <ToDoButton onClick={submitInput}>+</ToDoButton>
+      </Form>
+      );
+}
+
+
+export default Inputform;