diff --git a/.gitignore b/.gitignore
index 4d29575..a8a6a01 100644
--- a/.gitignore
+++ b/.gitignore
@@ -21,3 +21,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+yarn.*
diff --git a/package.json b/package.json
index 0f38547..e4bca0c 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,8 @@
     "@types/react-dom": "18.0.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "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..b1a9bc7 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,7 +1,21 @@
 import "./App.css";
+import TodoList from "./containers/TodoList/TodoList";
+import { BrowserRouter, Routes, Route, Navigate  } from "react-router-dom";
+import NewTodo from './containers/TodoList/NewTodo/NewTodo';
+import TodoDetail from "./components/TodoDetail/TodoDetail";
 
 function App() {
-  return <div className="App"></div>;
+  <div className="App">
+ <BrowserRouter>
+ <Routes>
+ <Route path="/todos" element={<TodoList title={"My TODOs!"} />} />
+ <Route path="/todos/:id" element={<TodoDetail />} /> <!--this line has problem -->
+ <Route path="/new-todo" element={<NewTodo />} />
+ <Route path="/" element={<Navigate replace to={"/todos"} />} />
+ <Route path="*" element={<h1>Not Found</h1>} />
+ </Routes>
+ </BrowserRouter>
+ </div>;
 }
 
 export default App;
diff --git a/src/components/Todo/Todo.tsx b/src/components/Todo/Todo.tsx
index cb0ff5c..1ca035e 100644
--- a/src/components/Todo/Todo.tsx
+++ b/src/components/Todo/Todo.tsx
@@ -1 +1,17 @@
-export {};
+import "./Todo.css" 
+interface IProps {
+    title: string;
+    clicked?: React.MouseEventHandler<HTMLDivElement>; // Defined by React
+    done: boolean;
+}
+const Todo = (props: IProps) => {
+    return (
+     <div className="Todo">
+     <div className={`text ${props.done && "done"}`} onClick={props.clicked}>
+     {props.title}
+     </div>
+     {props.done && <div className="done-mark">&#x2713;</div>}
+     </div>
+     );
+};
+export default Todo;
\ No newline at end of file
diff --git a/src/components/TodoDetail/TodoDetail.tsx b/src/components/TodoDetail/TodoDetail.tsx
index cb0ff5c..d068170 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 (
+ <div className="TodoDetail">
+ <div className="row">
+ <div className="left">Name:</div>
+ <div
+className="right">{props.title}</div>
+ </div>
+ <div className="row">
+ <div className="left">Content:</div>
+ <div className="right">
+ {props.content}
+ </div>
+ </div>
+ </div>
+ );
+};
+export default TodoDetail;
\ No newline at end of file
diff --git a/src/containers/TodoList/NewTodo/NewTodo.tsx b/src/containers/TodoList/NewTodo/NewTodo.tsx
index cb0ff5c..9678a39 100644
--- a/src/containers/TodoList/NewTodo/NewTodo.tsx
+++ b/src/containers/TodoList/NewTodo/NewTodo.tsx
@@ -1 +1,44 @@
-export {};
+import { useState } from "react";
+import "./NewTodo.css";
+import { Navigate, useNavigate  } from "react-router-dom";
+export default function NewTodo() {
+const [title, setTitle] = useState<string>("");
+const [content, setContent] = useState<string>("");
+const [submitted, setSubmitted] =
+useState<boolean>(false);
+const navigate = useNavigate()
+const postTodoHandler = () => {
+    const data = { title: title, content: content };
+    alert("Submitted\n" + data.title + "\n" + data.content);
+    setSubmitted(true);
+    navigate('/todos')
+    };
+   
+    
+if (submitted) {
+    return <Navigate to="/todos" />;
+    } else {
+    return (
+   
+ <div className="NewTodo">
+ <h1>Add a Todo</h1>
+ <label>Title</label>
+ <input
+ type="text"
+ value={title}
+ onChange={
+ (event) => setTitle(event.target.value)
+ }
+ />
+<label>Content</label>
+ <textarea
+ rows={4}
+ value={content}
+ onChange={
+ (event) => setContent(event.target.value)
+ }
+ />
+<button onClick={() => postTodoHandler()}>Submit</button>
+ </div>
+ );}
+}
diff --git a/src/containers/TodoList/TodoList.css b/src/containers/TodoList/TodoList.css
index c39721c..e5010fd 100644
--- a/src/containers/TodoList/TodoList.css
+++ b/src/containers/TodoList/TodoList.css
@@ -1,7 +1,7 @@
 .TodoList {
   background: white;
   width: 512px;
-  box-shadow: 0 3px 9px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); /* 그림자 */ 
+  box-shadow: 0 3px 9px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); /* �׸��� */ 
   margin: auto; 
   margin-top: 4rem;
 }
diff --git a/src/containers/TodoList/TodoList.tsx b/src/containers/TodoList/TodoList.tsx
index cb0ff5c..66b6dec 100644
--- a/src/containers/TodoList/TodoList.tsx
+++ b/src/containers/TodoList/TodoList.tsx
@@ -1 +1,49 @@
-export {};
+import Todo from '../../components/Todo/Todo';
+import TodoDetail from '../../components/TodoDetail/TodoDetail';
+import "./TodoList.css"
+import { useState , useMemo} from "react";
+import { Link,NavLink } from "react-router-dom";
+
+
+
+interface IProps {
+    title: string;
+    }
+    type TodoType = { id: number; title: string; content: string; done: boolean;}
+export default function TodoList(props: IProps) {
+     const {title} = props;
+     const [todos, setTodos] = useState<TodoType[]>([
+        { id: 1, title: "SWPP", content: "take swpp class", done: true },
+        { id: 2, title: "Movie", content: "watch movie", done: false },
+        { id: 3, title: "Dinner", content: "eat dinner", done: false },
+        ]);
+    const [selectedTodo, setSelectedTodo] = useState<TodoType | null>(null);
+    const clickTodoHandler = (td: TodoType) => {
+        if (selectedTodo === td) {
+        setSelectedTodo(null);
+        } else {
+        setSelectedTodo(td);
+        }
+        };
+    const todoDetail = useMemo(() => {
+        return selectedTodo ? (
+        <TodoDetail title={selectedTodo.title} content={selectedTodo.content} />
+        ) : null;
+    }, [selectedTodo]);
+    
+    
+
+     return (
+        <div className="TodoList">
+        <div className="title">{title}</div>
+        <div className="todos">
+        {todos.map((td) => {
+        return <Todo title={td.title} done={td.done} clicked={() => clickTodoHandler(td)} />;
+        })}
+        {todoDetail}
+        <NavLink to="/new-todo" >New Todo</NavLink>
+        </div>
+        </div>
+        );
+}
+    
\ No newline at end of file