[2주차] 김남일 미션 제출합니다.

.gitignore

@@ -28,3 +28,5 @@ yarn-error.log*
 .env.development.local
 .env.test.local
 .env.production.local
+
+.now

.now/project.json

@@ -1 +1 @@
-{"orgId":"vC0ivr1sq0T0zKJytpWAmdFN","projectId":"QmU68M4LipQZeiFKBEhK7WmUX9o8wjXK3RGeuiZ8PSWDDK"}
+{"projectId":"QmafwEK3iPMVU8DtcfaHw2MH2wR9YwUNmTarDgEAk3aA2g","orgId":"xr2CldXR2AS9O2w9aQ48bloY"}

README.md

@@ -1,30 +1,9 @@
-# react-todo-11th
-
-## 실행 방법
-
-```
-npm install
-npm run dev
-```
-
-- npm install : 필요한 모든 패키지를 설치합니다. 처음 1번만 실행하면 됩니다.
-- npm run dev : react 어플리케이션을 브라우저에서 실행합니다.
-
-## 배포 방법
-
-- now에 회원가입하고 now를 설치합니다.
-
-1. https://zeit.co 에서 회원가입합니다.
-2. 터미널에서 npm i -g now를 입력해 now를 글로벌로 설치합니다.
-3. 명령 프롬프트에서 프로젝트 폴더에 들어간 후 now를 입력합니다.
-4. ID/PW를 입력합니다.
-5. zeit 가입시 입력한 이메일에서 인증 링크를 클릭합니다. <인증완료>
-6. 다시 프로젝트 폴더에서 now를 입력하면 자동으로 생성된 url에 배포됩니다!
-
-## 미션 설명
-
-[미션 설명](./docs/mission-description/README.md)
-
-## 미션 제출 방법
-
-[미션 제출 방법](./docs/how-to-submit/README.md)
+ 이번 미션을 통해서 느낀점은 확실히 저번 미션을 통해 CSS와 기본 틀짜기는 매우 숙달됬지만 아직 props 전달은 미숙하다고 생각했습니다.
+특히 이번 과제에서 처음에는 input에서 data들을 바로 index로 올려주는 식으로 생각했다가 싹다 갈아엎고 다시 했습니다.
+index에서 input태그에 함수를 인자를 넣어주고 data를 받는 식으로 하니 확실히 전체적인 관리가 편해진 것 같습니다.
+또한 왜 구글링 할때마다 extend Component와 render()가 나오는지 궁금했었는데 지금까지 Hook를 사용하고 있는지도 모르고 계속
+사용했네요... 
+
+확실히 Hook에 대해서 알고 사용해보니 전부 function Component만 쓰므로 가독성도 올라가고 Hook자체 기능또한 다양하고 좋았던 것 같습니다.
+처음에 todoRemove를 구성할 때는 useRef를 id로 주고 filter로 처리하려 했는데 안돼서 하는 수 없이 새로운 state를 id를 주니까는 잘 되었습니다.
+왜 useRef로 id를 줬을 때는 안돌아가는지 궁금하네요 ㅠㅠㅜㅜㅠㅠ 또 number타입 일때는 length기능들이 다 막혀서 String으로 변환하고 했는데 코드 돌아가는데는 딱히 상관없던 것 같습니다. 

components/todo-input.js

@@ -1,20 +1,85 @@
-import React from "react";
+import React, { useState } from 'react';
+
 import styled from "styled-components";
 
-export default function TodoInput() {
+export default function TodoInput({onSubmit}){
+
+  const [newTodo, setNewTodo] = useState({});
+
+  const handleFormChange = (e) => {
+    setNewTodo({...newTodo, [e.target.name]:e.target.value});
+  }
+
   return (
     <Wrapper>
-      리액트-투두
-      <br />
-      시간을 입력하는 칸
-      <br />
-      Todo를 입력하는 칸
+      <Row>
+        <Lable>시간</Lable>
+        <Input 
+          name="date" 
+          type="number" 
+          placeholder="날짜를 입력하세요 (ex.20200404)" 
+          onChange={handleFormChange}
+        />
+      </Row>
+      <Row>
+        <Lable>TODO</Lable>
+        <Textarea 
+          name="content" 
+          placeholder='할 일을 입력하세요' 
+          onChange={handleFormChange}
+        />
+      </Row>
+      <SunmitButton onClick={() => onSubmit({...newTodo})}>등록</SunmitButton>
     </Wrapper>
   );
 }
 
+
 const Wrapper = styled.div`
-  border: solid 1px;
-  font-size: 18px;
-  flex: 1;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 37rem;
+  flex: 1
+  border: 1px, solid, black;
+  padding: 1rem 2rem;
+`;
+
+const Row = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 3rem;
 `;
+
+const Lable = styled.p`
+  font-size: 1.5rem;
+  margin: 0px;
+`;
+
+const Input= styled.input`
+  width: 80%;
+  border: 1px, soild, rgb(97, 97, 97);
+  padding: 0.5rem 0.8rem;
+`;
+
+const Textarea = styled.textarea`
+  width: 80%;
+  height: 30vh;
+  resize: none;
+  border: 1px, solid, rgb(97, 97, 97);
+  padding: 0.5rem 0.8rem;
+`;
+
+const SunmitButton = styled.button`
+  color : white;
+  background-color: rgb(97, 97, 97);
+  font-size: 1.5rem;
+  outline: none;
+  border: none;
+  padding: 0.5rem 1rem;
+  border-radius: 0.3rem;
+`;

components/todo-item.js

@@ -1,11 +1,56 @@
-import React from "react";
+import React, { useState } from 'react';
+
 import styled from "styled-components";
 
-export default function TodoItem() {
-  return <Wrapper>Todo</Wrapper>;
+export default function TodoItem({todo ,onDelete}) {
+  return (
+    <Wrapper>
+      <Row>
+        <Todo>{content}</Todo>
+        <Date>{date}</Date>
+      </Row>
+        <DeleteButton onClick={onDelete}> 완료 </DeleteButton>
+    </Wrapper>
+    );
 }
 
 const Wrapper = styled.div`
-  font-size: 18px;
-  border: solid 1px;
+  display: flex;
+`;
+
+const Row = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin-bottom: 3rem;
+  padding: 1rem 2rem;
+  border: 1px, solid, black;
+`;
+
+const Todo= styled.p`
+  font-size: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  padding: 0px;
+  margin: 0px;
+`;
+
+const Date= styled.p`
+  font-size: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  padding: 0px;
+  margin: 0px;
+`;
+
+const DeleteButton = styled.button`
+  color: white;
+  background-color: rgb(97, 97, 97);
+  font-size: 1.5rem;
+  outline: none;
+  padding: 0.5rem 1rem;
+  border: none;
+  border-radius: 0.3rem;
+  margin-left: auto;
 `;

components/todo-list.js

@@ -1,19 +1,19 @@
-import React from "react";
-import styled from "styled-components";
+import React, { useState } from 'react';
 
 import TodoItem from "./todo-item";
 
-export default function TodoList() {
+import styled from "styled-components";
+
+export default function TodoList({todos, onDelete}) {
+
   return (
     <Wrapper>
-      Todo list가 들어가는 자리입니다!
-      <TodoItem />
+      {todos.map((todo, index) => <TodoItem key={JSON.stringify(todo)} {...{todo}} onDelete={onDelete(index)} />)}
     </Wrapper>
   );
 }
 
 const Wrapper = styled.div`
-  border: solid 1px;
   font-size: 18px;
-  flex: 1;
+  flex: 1 1 0%;
 `;

pages/_app.js

@@ -23,6 +23,7 @@ class PickkApp extends App {
             font-size: 0.1rem;
             overflow-x: hidden;
             width: 100%;
+            color: white;
           }
           ::-webkit-scrollbar {
             display: none;

pages/index.js

@@ -1,30 +1,72 @@
-import React from "react";
+import React, {useState} from 'react';
 
 import TodoInput from "../components/todo-input";
 import TodoList from "../components/todo-list";
 
 import styled from "styled-components";
 
 export default function Home() {
+
+  const [todos, setTodos] = useState([]);
+
+  const handleAdd = (todo) => {
+
+    const {content, date} = todo;
+
+    if (content === "" || date === "") {
+      alert('모든 항목을 입력해주세요!');
+      return;
+    }
+
+    else if (String(date).length != 8){
+      alert('날짜를 올바른 형식으로 입력해주세요!');
+      return;
+    }
+
+    const newTodo = {
+      content,
+      date
+    }
+
+    setTodos(todos.concat(newTodo)); 
+    alert('입력 완료!')
+  }
+
+  const handleDelete = (index) = () => {
+    setTodos([...todo.slice(0,index), ...todo.slice(index+1, todo.length)]);
+  }
+
   return (
     <Wrapper>
+      <Header>리액트-투두</Header>
       <Contents>
-        <TodoInput />
-        <TodoList />
+        <TodoInput onSubmit = {handleAdd}/>
+        <Space/>
+        <TodoList {...{todos}} onDelete = {handleDelete}/>
       </Contents>
     </Wrapper>
   );
 }
 
 const Wrapper = styled.div`
-  height: 100vh;
+  min-height: 100vh;
+  background-color: rgb(155, 197, 195);
+  padding: 4rem 5rem;
 `;
 
 const Contents = styled.div`
-  border: solid 1px black;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  padding: 10px 20px;
-  margin: 20px 10px;
+
+`;
+
+const Header = styled.h1`
+  font-size: 3rem;
+  font-weight: 600;
+  margin: 0px 0px 3rem;
+`;
+
+const Space = styled.div`
+  flex: 1;
 `;