[5주차] 강태이/로그인 및 회원가입 UI 구현

README.md

@@ -1,4 +1,3 @@
-<<<<<<< HEAD
 # 🖥️ Mission-FE-Zero100
 FE Zero100 미션을 위한 레포지토리입니다.
 

package.json

@@ -8,13 +8,11 @@
     "build": "vite build",
     "lint": "eslint .",
     "preview": "vite preview"
-
-
-
   },
   "dependencies": {
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "react-router-dom": "^7.4.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.21.0",

src/App.jsx

@@ -1,23 +1,50 @@
-import "./index.css";
-import Text from "./component/Text";
-import Input from "./component/Input";
-import Button from "./component/Button";
-import Checkbox from "./component/Checkbox";
+import React from "react";
+import { BrowserRouter as Router, Routes, Route, useNavigate } from "react-router-dom";
+import TodoPage from "./component/TodoPage";
+import LoginPage from "./component/LoginPage";
+import SignupPage from "./component/SignupPage";
 
-function App() {
+function App(){
   return (
-    <div className="app-container">
-      {/* text part */}
-      <Text />
+    <Router>
+      <Routes>
+        <Route path="/" element={<Home />}/>
+        <Route path="/todo" element={<TodoPage />}/>
+        <Route path="/login" element={<LoginPage />}/>
+        <Route path="/signup" element={<SignupPage />}/>
+      </Routes>
+    </Router>
+  );
+}
+
+function Home(){
+  const navigate =useNavigate();
+
+  const buttonStyle = {
+    width: "200px",
+    padding: "10px 0",
+    margin: "20px auto",
+    display: "block",
+    backgroundColor: "#ddd",
+    border: "none",
+    borderRadius: "30px",
+    fontSize: "1.1rem",
+    fontWeight: "600",
+  };
+
+  const titleStyle = {
+    fontSize: "2rem",
+    fontWeight: "700",
+    marginBottom: "40px",
+  };
 
-      {/* input part */}
-      <Input />
-     {/* button part */}
-      <Button />
-      {/* checkbox part */}
-      <Checkbox />
+  return(
+    <div style={{textAlign:"center"}}>
+      <h1 style={titleStyle}>Tayie's TODO</h1>
+      <button style={buttonStyle} onClick={() => navigate("/login")}>로그인</button>
+      <button style={buttonStyle} onClick={() => navigate("/signup")}>회원가입</button>
     </div>
   );
 }
 
-export default App;
+export default App;

src/component/AddTodo.jsx

@@ -0,0 +1,59 @@
+import React, { useState } from 'react';
+import styled from "styled-components";
+
+const AddTodoContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+`;
+
+const StyledText = styled.h2`
+  text-align: center;
+  display: flex;
+`;
+
+const StyledInput = styled.input`
+  width: 500px;
+  padding: 14px;
+  border-radius: 0px;
+  margin-bottom: 8px;
+`;
+
+const StyledButton = styled.button`
+  background-color: black;
+  color: white;
+  width: 532px;
+  padding: 9px;
+  border: none;
+  border-radius: 0px;
+  margin-bottom: 8px;
+`;
+
+const AddTodo = ({ onAddTodo }) => {
+    const [inputValue, setInputValue] = useState("");
+
+    const handleInputChange = (e) => {
+      setInputValue(e.target.value);
+    };
+
+    const handleAddClick = () => {
+      onAddTodo(inputValue);
+      setInputValue(""); 
+    };
+
+    return(
+        <AddTodoContainer>
+            <StyledText>What needs to be done?</StyledText>
+            <StyledInput 
+                type="text" 
+                placeholder="Add a task"
+                value={inputValue}
+                onChange={handleInputChange} 
+            />
+            <StyledButton onClick={handleAddClick}>Add</StyledButton>
+        </AddTodoContainer>
+    )
+}
+
+export default AddTodo;