[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"}
+{"orgId":"RZuBNQFBfWtPw3WJZD7K3bSt","projectId":"QmeT1xUQTCRFLjVdW4RXLX6vVPW9baLYyyMnnGcDXeTqtp"}

components/todo-input.js

@@ -1,20 +1,81 @@
-import React from "react";
-import styled from "styled-components";
+import React, { useState } from 'react';
+import styled from 'styled-components';
 
-export default function TodoInput() {
-  return (
-    <Wrapper>
-      리액트-투두
-      <br />
-      시간을 입력하는 칸
-      <br />
-      Todo를 입력하는 칸
-    </Wrapper>
-  );
+export default function TodoInput(props) {
+	const [newTodo, setNewTodo] = useState({ date: '', todo: '' });
+	const { onSubmit } = props;
+
+	console.log(newTodo);
+
+	const handleFormChange = (e) => {
+		setNewTodo({ ...newTodo, [e.target.name]: e.target.value });
+	};
+
+	return (
+		<Wrapper>
+			<Row>
+				<Label>시간</Label>
+				<Input
+					type="number"
+					name="date"
+					placeholder="날짜를 입력하세요 (ex.20200404)"
+					onChange={handleFormChange}
+				/>
+			</Row>
+			<Row>
+				<Label>TODO</Label>
+				<TextArea
+					name="todo"
+					placeholder="할 일을 입력하세요"
+					onChange={handleFormChange}
+				/>
+			</Row>
+			<SubmitButton onClick={() => onSubmit(newTodo)}>등록</SubmitButton>
+		</Wrapper>
+	);
 }
 
-const Wrapper = styled.div`
-  border: solid 1px;
-  font-size: 18px;
-  flex: 1;
+const Input = styled.input`
+	width: 80%;
+	border: 1px solid 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 Label = styled.label`
+	font-size: 1.5rem;
+	color: white;
+	margin: 0;
+`;
+const Row = styled.div`
+	color: white;
+	width: 100%;
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	margin-bottom: 3rem;
+`;
+const Wrapper = styled.form`
+	font-size: 18px;
+	width: 40%;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	height: 37rem;
+	border: 1px solid black;
+	padding: 1rem 2rem;
+`;
+const SubmitButton = 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,49 @@
-import React from "react";
-import styled from "styled-components";
+import React from 'react';
+import styled from 'styled-components';
 
-export default function TodoItem() {
-  return <Wrapper>Todo</Wrapper>;
+export default function TodoItem(props) {
+	const { todoObj, onDelete } = props;
+	const { todo, date } = todoObj;
+	return (
+		<Wrapper>
+			<Row>
+				<P>{todo}</P>
+				<P>{date}</P>
+			</Row>
+			<DeleteButton onClick={onDelete}>??</DeleteButton>
+		</Wrapper>
+	);
 }
-
+const Row = styled.div`
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+`;
+const P = styled.p`
+	font-size: 1.5rem;
+	color: white;
+`;
+const DeleteButton = styled.button`
+	display: block;
+	color: white;
+	background-color: rgb(97, 97, 97);
+	font-size: 1.5rem;
+	outline: none;
+	border: none;
+	border-radius: 0.3rem;
+	padding: 0.5rem 1rem;
+	width: fit-content;
+	margin-left: auto;
+`;
 const Wrapper = styled.div`
-  font-size: 18px;
-  border: solid 1px;
+	font-size: 18px;
+	border: solid 1px black;
+
+	width: 100%;
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: flex-start;
+	margin-bottom: 3rem;
+	padding: 1rem 2rem;
 `;

components/todo-list.js

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

pages/_app.js

@@ -1,55 +1,55 @@
-import React from "react";
-import App from "next/app";
-import Head from "next/head";
+import React from 'react';
+import App from 'next/app';
+import Head from 'next/head';
 
 class PickkApp extends App {
-  render() {
-    const { Component, pageProps } = this.props;
-    return (
-      <>
-        <Head>
-          <title>리액트 Todo</title>
-        </Head>
-        <Component {...pageProps} />
-        <style jsx global>{`
-          html {
-            margin: 0;
-            padding: 0;
-            position: relative;
-          }
-          body {
-            margin: 0;
-            padding: 0;
-            font-size: 0.1rem;
-            overflow-x: hidden;
-            width: 100%;
-          }
-          ::-webkit-scrollbar {
-            display: none;
-          }
-          input {
-            -webkit-appearance: none;
-            -webkit-border-radius: 0;
-          }
-          html,
-          body,
-          body > div:nth-child(2) {
-            height: 100%;
-          }
-          *,
-          ::after,
-          ::before {
-            -webkit-box-sizing: border-box;
-            -moz-box-sizing: border-box;
-            box-sizing: border-box;
-          }
-          html {
-            font-size: 10px;
-          }
-        `}</style>
-      </>
-    );
-  }
+	render() {
+		const { Component, pageProps } = this.props;
+		return (
+			<>
+				<Head>
+					<title>Todo</title>
+				</Head>
+				<Component {...pageProps} />
+				<style jsx global>{`
+					html {
+						margin: 0;
+						padding: 0;
+						position: relative;
+					}
+					body {
+						margin: 0;
+						padding: 0;
+						font-size: 0.1rem;
+						overflow-x: hidden;
+						width: 100%;
+					}
+					::-webkit-scrollbar {
+						display: none;
+					}
+					input {
+						-webkit-appearance: none;
+						-webkit-border-radius: 0;
+					}
+					html,
+					body,
+					body > div:nth-child(2) {
+						height: 100%;
+					}
+					*,
+					::after,
+					::before {
+						-webkit-box-sizing: border-box;
+						-moz-box-sizing: border-box;
+						box-sizing: border-box;
+					}
+					html {
+						font-size: 10px;
+					}
+				`}</style>
+			</>
+		);
+	}
 }
 
 export default PickkApp;