React Todo-App

import { useState } from 'react'
import './TodoApp.css'
import { BrowserRouter, Routes, Route, useNavigate, useParams, Link } from 'react-router-dom'

export default function TodoApp() {
    return (
        <div className="TodoApp">
            <BrowserRouter>

                <HeaderComponent></HeaderComponent>
                <Routes>
                    <Route path='/' element={<LoginComponent />}></Route>
                    <Route path='/login' element={<LoginComponent />}></Route>
                    <Route path='/welcome/:username' element={<WelcomeComponent />}></Route>
                    <Route path='/todos' element={<ListTodosComponent />}></Route>
                    <Route path='*' element={<ErrorComponent />} />
                    <Route path='/logout' element={<LogoutComponent />} />
                </Routes>
            </BrowserRouter>

            <FooterComponent></FooterComponent>
            {/* Todo Management Application
            <LoginComponent></LoginComponent>
            <WelcomeComponent></WelcomeComponent> */}
        </div>
    )
}

function LoginComponent() {

    const [username, setUsername] = useState('in28minutes')

    const [password, setPassword] = useState('')

    const [showSuccessMessage, setShowSuccessMessage] = useState(false)

    const [showErrorMessage, setShowErrorMessage] = useState(false)

    const navigate = useNavigate()

    function handleUsernameChange(event) {
        setUsername(event.target.value)
    }

    function handlePasswordChange(event) {
        setPassword(event.target.value)
    }

    function handleSubmit() {
        if (username === 'in28minutes' && password === 'dummy') {
            setShowSuccessMessage(true)
            setShowErrorMessage(false)
            navigate(`/welcome/${username}`)

        } else {
            setShowSuccessMessage(false)
            setShowErrorMessage(true)
        }
    }

    return (
        <div className="Login">
            <h1>Time to Login</h1>
            {showSuccessMessage && <div className='successMessage'>Authenticated Successfully</div>}
            {showErrorMessage && <div className='errorMessage'>Authenticated Failed</div>}
            <div className="LoginForm">
                <div>
                    <label>User Name</label>
                    <input type="text" name="username" value={username} onChange={handleUsernameChange}></input>
                </div>
                <div>
                    <label>PassWord</label>
                    <input type="text" name="password" value={password} onChange={handlePasswordChange}></input>
                </div>
                <div>
                    <button type="button" name="login" onClick={handleSubmit}>Login</button>
                </div>
            </div>
        </div>
    )
}

function WelcomeComponent() {

    // const params = useParams()
    // console.log(params.username)

    const { username } = useParams()
    console.log(username)

    return (
        <div className="WelCome">
            <h1>Weclome {username}</h1>
            <div>
                {/* Your todo. - <a href='/todos'>Go here</a> */}
                Your todo. - <Link to='/todos'>Go here</Link>
            </div>
        </div>
    )
}

function ErrorComponent() {
    return (
        <div className="ErrorComponent">
            <h1>Error</h1>
            <div>Applogies for the 404. Reach out to our tean at wogns8030@naver.com</div>
        </div>
    )
}

function ListTodosComponent() {

    const today = new Date();

    const targetDate = new Date(today.getFullYear() + 12, today.getMonth(), today.getDate())

    const todos = [
        { id: 1, description: 'Learn AWS', doen: false, targetDate: targetDate },
        { id: 2, description: 'Learn Full Stack DevOps', doen: false, targetDate: targetDate },
        { id: 3, description: 'Learn DevOps', doen: false, targetDate: targetDate },
        { id: 4, description: 'HI~', doen: true, targetDate: targetDate }
    ]

    return (
        //container, table 입력하니까 bootstrap 작동
        <div className="container">
            <h1>Things You Want To Do!</h1>
            <div>
                Todo Details
                <table className="table">
                    <thead>
                        <tr>
                            <td>Id</td>
                            <td>Description</td>
                            <td>Is Done</td>
                            <td>Target Date</td>
                        </tr>
                    </thead>
                    <tbody>
                        {
                            todos.map(
                                todo => (
                                    <tr key={todo.id}>
                                        <td>{todo.id}</td>
                                        <td>{todo.description}</td>
                                        <td>{todo.doen.toString()}</td>
                                        <td>{todo.targetDate.toDateString()}</td>
                                    </tr>
                                )
                            )
                        }
                    </tbody>
                </table>
            </div>
        </div>
    )
}

function HeaderComponent() {
    return (
        // <header className="header">
        //     <div className="container">
        //         <ul className="navbar-nav">
        //             <li className="nav-item"><a className="nav-link" href='https://hoonssss.tistory.com/'>Jh tistory</a></li>
        //             <li className="nav-item"><Link className="nav-link" to='/welcome/in28minutes'>Home</Link></li>
        //             <li className="nav-item"><Link className="nav-link" to='/todos'>todos</Link></li>
        //             <li className="nav-item"><Link className="nav-link" to='/login'>Login</Link></li>
        //             <li className="nav-item"><Link className="nav-link" to='/logout'>Logout</Link></li>
        //             <hr/>
        //         </ul>
        //     </div>
        // </header>
        <header className="border-bottom border-light border-5 mb-5 p-2">
            <div className="container">
                <div className="row">
                    <nav className="navbar navbar-expand-lg">
                        <a className="navbar-brand ms-2 fs-2 fw-bold text-black" href="https://hoonssss.tistory.com/">JH tistory</a>
                        <div className="collapse navbar-collapse">
                            <ul className="navbar-nav">
                                <li className="nav-item fs-5"><Link className="nav-link" to="/welcome/in28minutes">Home</Link></li>
                                <li className="nav-item fs-5"><Link className="nav-link" to="/todos">Todos</Link></li>
                            </ul>
                        </div>
                        <ul className="navbar-nav">
                            <li className="nav-item fs-5"><Link className="nav-link" to="/login">Login</Link></li>
                            <li className="nav-item fs-5"><Link className="nav-link" to="/logout">Logout</Link></li>
                        </ul>
                    </nav>
                </div>
            </div>
        </header>
    )
}

function FooterComponent() {
    return (
        <footer className="footer">
            <div className="container">
                Your Footer
            </div>
        </footer>
    )
}

function LogoutComponent() {
    return (
        <div className="LogoutComponent">
            <h1>You are logged out!</h1>
            <div>
                Thank you fot using our App. Come bask soon.
            </div>
        </div>
    )
}

 

BrowserRouter,

userNavigate( ' 아님 ₩이거임 ),

useParams -> const {id} = useParams() ,

Link to="/~"-> 타 사이트는 <a href="~">~</a>