From 1753b3efdbbd7156698976060754f02326a2578a Mon Sep 17 00:00:00 2001 From: Alexjonghyun Date: Thu, 22 Sep 2022 16:46:35 +0900 Subject: [PATCH] changed --- package-lock.json | 61 +- package.json | 4 +- src/App.tsx | 17 +- src/components/Todo/Todo.tsx | 19 +- src/components/TodoDetail/TodoDetail.tsx | 24 +- src/containers/TodoList/NewTodo/NewTodo.tsx | 43 +- src/containers/TodoList/TodoList.tsx | 48 +- yarn.lock | 8952 +++++++++++++++++++ 8 files changed, 9161 insertions(+), 7 deletions(-) create mode 100644 yarn.lock diff --git a/package-lock.json b/package-lock.json index da1c2bf..66d1da7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,7 +17,8 @@ "@types/react-dom": "18.0.6", "react": "^18.2.0", "react-dom": "^18.2.0", - "react-scripts": "5.0.1", + "react-router-dom": "^6.4.0", + "react-scripts": "^5.0.1", "typescript": "4.7.4", "web-vitals": "2.1.4" } @@ -3059,6 +3060,14 @@ } } }, + "node_modules/@remix-run/router": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.0.0.tgz", + "integrity": "sha512-SCR1cxRSMNKjaVYptCzBApPDqGwa3FGdjVHc+rOToocNPHQdIYLZBfv/3f+KvYuXDkUGVIW9IAzmPNZDRL1I4A==", + "engines": { + "node": ">=14" + } + }, "node_modules/@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -13758,6 +13767,35 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.4.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.4.0.tgz", + "integrity": "sha512-B+5bEXFlgR1XUdHYR6P94g299SjrfCBMmEDJNcFbpAyRH1j1748yt9NdDhW3++nw1lk3zQJ6aOO66zUx3KlTZg==", + "dependencies": { + "@remix-run/router": "1.0.0" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.4.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.4.0.tgz", + "integrity": "sha512-4Aw1xmXKeleYYQ3x0Lcl2undHR6yMjXZjd9DKZd53SGOYqirrUThyUb0wwAX5VZAyvSuzjNJmZlJ3rR9+/vzqg==", + "dependencies": { + "react-router": "6.4.0" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/react-scripts": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", @@ -18591,6 +18629,11 @@ "source-map": "^0.7.3" } }, + "@remix-run/router": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.0.0.tgz", + "integrity": "sha512-SCR1cxRSMNKjaVYptCzBApPDqGwa3FGdjVHc+rOToocNPHQdIYLZBfv/3f+KvYuXDkUGVIW9IAzmPNZDRL1I4A==" + }, "@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -26186,6 +26229,22 @@ "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==" }, + "react-router": { + "version": "6.4.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.4.0.tgz", + "integrity": "sha512-B+5bEXFlgR1XUdHYR6P94g299SjrfCBMmEDJNcFbpAyRH1j1748yt9NdDhW3++nw1lk3zQJ6aOO66zUx3KlTZg==", + "requires": { + "@remix-run/router": "1.0.0" + } + }, + "react-router-dom": { + "version": "6.4.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.4.0.tgz", + "integrity": "sha512-4Aw1xmXKeleYYQ3x0Lcl2undHR6yMjXZjd9DKZd53SGOYqirrUThyUb0wwAX5VZAyvSuzjNJmZlJ3rR9+/vzqg==", + "requires": { + "react-router": "6.4.0" + } + }, "react-scripts": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", diff --git a/package.json b/package.json index 0f38547..9162682 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,9 @@ "@types/react-dom": "18.0.6", "react": "^18.2.0", "react-dom": "^18.2.0", - "react-scripts": "5.0.1", + "react-router": "^6.4.0", + "react-router-dom": "^6.4.0", + "react-scripts": "^5.0.1", "typescript": "4.7.4", "web-vitals": "2.1.4" }, diff --git a/src/App.tsx b/src/App.tsx index 9d18e93..ad98982 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,7 +1,22 @@ import "./App.css"; +import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom"; +import NewTodo from "./containers/TodoList/NewTodo/NewTodo"; +import TodoList from "./containers/TodoList/TodoList"; +import TodoDetail from "./components/TodoDetail/TodoDetail"; + function App() { - return
; + return
+ + + } /> + } /> + } /> + } /> + Not Found} /> + + +
; } export default App; diff --git a/src/components/Todo/Todo.tsx b/src/components/Todo/Todo.tsx index cb0ff5c..745bde6 100644 --- a/src/components/Todo/Todo.tsx +++ b/src/components/Todo/Todo.tsx @@ -1 +1,18 @@ -export {}; +import "./Todo.css" + +interface IProps { + title: string; + clicked?: React.MouseEventHandler; // Defined by React + done: boolean; + } + const Todo = (props: IProps) => { + return ( +
+
+ {props.title} +
+ {props.done &&
} +
+ ); + }; + export default Todo; diff --git a/src/components/TodoDetail/TodoDetail.tsx b/src/components/TodoDetail/TodoDetail.tsx index cb0ff5c..32427c2 100644 --- a/src/components/TodoDetail/TodoDetail.tsx +++ b/src/components/TodoDetail/TodoDetail.tsx @@ -1 +1,23 @@ -export {}; +import "./TodoDetail.css"; +type Props = { +title: string; +content: string; +}; +const TodoDetail = (props: Props) => { +return ( +
+
+
Name:
+
{props.title}
+
+
+
Content:
+
+ {props.content} +
+
+
+ ); +}; +export default TodoDetail; diff --git a/src/containers/TodoList/NewTodo/NewTodo.tsx b/src/containers/TodoList/NewTodo/NewTodo.tsx index cb0ff5c..6e2d9e8 100644 --- a/src/containers/TodoList/NewTodo/NewTodo.tsx +++ b/src/containers/TodoList/NewTodo/NewTodo.tsx @@ -1 +1,42 @@ -export {}; +import { useState } from "react"; +import { Navigate } from "react-router-dom"; +import "./NewTodo.css"; + +export default function NewTodo() { + const [title, setTitle] = useState(""); + const [content, setContent] = useState(""); + const [submitted, setSubmitted] = useState(false); + const postTodoHandler = () => { + const data = { title: title, content: content }; + alert("Submitted\n" + data.title + "\n" + data.content); + setSubmitted(true); + }; + if (submitted) { + return ; + } else { + return ( +
+

Add a Todo

+ + setTitle(event.target.value) + } + /> + +