diff --git a/.gitignore b/.gitignore
index 20fccdd..fd07293 100644
--- a/.gitignore
+++ b/.gitignore
@@ -28,3 +28,5 @@ yarn-error.log*
.env.development.local
.env.test.local
.env.production.local
+
+.now
\ No newline at end of file
diff --git a/.now/project.json b/.now/project.json
index c52546c..57fdaec 100644
--- a/.now/project.json
+++ b/.now/project.json
@@ -1 +1 @@
-{"orgId":"vC0ivr1sq0T0zKJytpWAmdFN","projectId":"QmU68M4LipQZeiFKBEhK7WmUX9o8wjXK3RGeuiZ8PSWDDK"}
\ No newline at end of file
+{"projectId":"QmafwEK3iPMVU8DtcfaHw2MH2wR9YwUNmTarDgEAk3aA2g","orgId":"xr2CldXR2AS9O2w9aQ48bloY"}
\ No newline at end of file
diff --git a/README.md b/README.md
index f53f3d3..ac8a251 100644
--- a/README.md
+++ b/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으로 변환하고 했는데 코드 돌아가는데는 딱히 상관없던 것 같습니다.
diff --git a/components/todo-input.js b/components/todo-input.js
index 1844e25..ccf7634 100644
--- a/components/todo-input.js
+++ b/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 (
- 리액트-투두
-
- 시간을 입력하는 칸
-
- Todo를 입력하는 칸
+
+ 시간
+
+
+
+ TODO
+
+
+ onSubmit({...newTodo})}>등록
);
}
+
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;
+`;
\ No newline at end of file
diff --git a/components/todo-item.js b/components/todo-item.js
index ef2dbe8..a361a3f 100644
--- a/components/todo-item.js
+++ b/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 Todo;
+export default function TodoItem({todo ,onDelete}) {
+ return (
+
+
+ {content}
+ {date}
+
+ 완료
+
+ );
}
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;
`;
diff --git a/components/todo-list.js b/components/todo-list.js
index 68fded1..78c0c6f 100644
--- a/components/todo-list.js
+++ b/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 (
- Todo list가 들어가는 자리입니다!
-
+ {todos.map((todo, index) => )}
);
}
const Wrapper = styled.div`
- border: solid 1px;
font-size: 18px;
- flex: 1;
+ flex: 1 1 0%;
`;
diff --git a/pages/_app.js b/pages/_app.js
index 3051a08..f85a8d2 100644
--- a/pages/_app.js
+++ b/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;
diff --git a/pages/index.js b/pages/index.js
index f494909..9d89cce 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,4 +1,4 @@
-import React from "react";
+import React, {useState} from 'react';
import TodoInput from "../components/todo-input";
import TodoList from "../components/todo-list";
@@ -6,25 +6,67 @@ 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 (
+
-
-
+
+
+
);
}
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;
`;