[6주차] 박세렴/로그인 및 회원가입 기능 구현 #78
Description
1. 무엇을?
- React Router를 사용하여 Todo, 로그인, 회원가입 화면을 각기 다른 페이지로 구성
- UI 스타일 및 라우팅 구조 구현
- 각 화면별 입력 및 이동 기능 추가
2. 계획
-
루트 페이지(
/)- "로그인" / "회원가입" 버튼이 가운데 정렬된 형태로 배치
- 버튼 클릭 시 각각의 라우트로 이동
-
로그인 페이지(
/login)- 아이디, 비밀번호 입력창 (라벨 포함)
- 오른쪽에 세로 2줄을 차지하는 로그인 버튼 배치 (2행 구성)
- 하단에 "회원가입" 링크 제공
-
회원가입 페이지(
/signup)- 이름 / 아이디 / 비밀번호 입력창 (라벨 포함)
- 하단에 "회원가입" 버튼 배치 (4행 구성)
- 추후 아이디 중복 검사 및 에러 메시지 추가 예정
-
각 버튼 클릭 시
useNavigate()로 해당 경로(/login,/signup,/todo)로 이동되도록 설정
📍경로 요약
| 경로 | 설명 |
|---|---|
/ |
루트 페이지 (로그인/회원가입 진입 버튼) |
/login |
로그인 페이지 |
/signup |
회원가입 페이지 |
/todo |
기존 Todo 메인 화면 (회원가입/로그인 완료 시 진입) |
🔧 향후 작업 항목
- 라우팅 구조 구성 (
react-router-dom) - 각 페이지 UI 배치 및 스타일링 (styled-components)
- 회원가입/로그인 폼 구현
- Todo 페이지와의 연결 테스트