[웹개발 100일] Day 2 - 리액트 라우터, 로그인 페이지 만들기

 

 

 

 

 

 

🚀 요약

작업 시간: 3시간반? 4시간?

✅ 프로젝트 폴더 구조 정리
✅ React Router로 페이지 이동 가능하게 만들기
✅ 네비게이션 바(Navbar) 제작
✅ 로그인 페이지 UI 구성

 

 

 

🚀 폴더 구조

/src
 ├── /components    # 재사용 가능한 UI 컴포넌트
 │    ├── Navbar.tsx
 │    ├── Button.tsx
 │    ├── Card.tsx
 │    └── Footer.tsx
 ├── /pages         # 페이지 단위 파일
 │    ├── Home.tsx
 │    ├── Upload.tsx
 │    ├── PostList.tsx
 │    ├── Gallery.tsx
 │    └── Login.tsx
 ├── App.tsx
 ├── main.tsx
 ├── index.css
 └── vite.config.ts

 

 

 

🚀 React Router 적용

react-router-dom 설치

npm install react-router-dom

 

 

타입 지원 패키지 설치 

(react-router-dom은 JavaScript 기반 라이브러리이기 때문에 TypeScript가 자체적으로 타입을 알지 못함.
@types/react-router-dom을 설치하면 React Router의 타입 정보(예: Route, Link, useNavigate 등)를 TypeScript에서 인식)

npm install @types/react-router-dom --save-dev

 

 

이렇게 간단한 페이지 구분을 해주었다.

function App() {
  return (
    <Router>
      <div className="flex flex-col min-h-screen min-w-screen">
        <Navbar />
        <div className="flex-grow">
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/events" element={<EventList />} />
            <Route path="/login" element={<Login />} />
          </Routes>
        </div>
        <Footer />
      </div>
    </Router>
  );
}

 

 

 

🚀 네비게이션, 로그인 UI 구성

네비게이션 코드

import { Link } from "react-router-dom";

const Navbar = () => {
  return (
    <nav className="w-full bg-blue-300 h-14 px-4 text-white flex justify-between items-center">
      <h1 className="text-xl font-bold">Resho</h1>
      <div className="flex space-x-4">
        <Link to="/" className="hover:underline text-white">
          Home
        </Link>
        <Link to="/events" className="hover:underline text-white">
          Events
        </Link>
        <Link to="/gallery" className="hover:underline text-white">
          Gallery
        </Link>
        <Link to="/upload" className="hover:underline text-white">
          Upload
        </Link>
        <Link to="/login" className="hover:underline text-white">
          Login
        </Link>
      </div>
    </nav>
  );
};

export default Navbar;

 

 

로그인 페이지

const Login = () => {
  return (
    <div className="p-6 text-center">
      <h2 className="text-3xl font-bold">Sign In</h2>
      <p className="text-gray-600 mt-2 pb-16">로그인하세염</p>
      <div className="flex justify-between items-center pb-16 h-[100px] w-[360px]">
        <span className="flex flex-col gap-4 items-start h-[100px]">
          <label className="h-[42px] flex items-center" htmlFor="signin-id">
            ID
          </label>
          <label className="h-[42px] flex items-center" htmlFor="signin-pwd">
            PASSWORD
          </label>
        </span>
        <span className="flex flex-col gap-4 items-center h-[100px]">
          <input
            className="border p-2 w-[250px] rounded-md"
            type="text"
            id="signin-id"
            name="signin-id"
          />
          <input
            className="border p-2 w-[250px] rounded-md"
            type="password"
            id="signin-pwd"
            name="signin-pwd"
          />
        </span>
      </div>
      <button className="bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 w-[360px]">
        Sign In
      </button>
    </div>
  );
};

export default Login;

 

 

결과

일단은 구현~배포부터 해놓고 디자인 개선은 나중에 시간 남으면 하는 걸로!