feat : login 페이지 구성 완료

[sernan96]

개요

로그인 페이지 구현

구현 사항

• 아이디 비밀번호 입력 컴포넌트 구현
• 로그인 버튼 및 소셜 로그인 버튼 구현
• scss 스타일 적용 완료
• 회원가입 및 비밀번호 찾기 버튼도 구현완료

기타

Login (루트 컴포넌트)
│
├── <div className="root-container"> (전체 레이아웃을 감싸는 컨테이너)
│   │
│   ├── <button className="back-button"> (뒤로가기 버튼)
│   │   └── <IoMdArrowBack /> (뒤로가기 아이콘)
│   │
│   ├── <div className="title-box"> (타이틀 박스)
│   │   └── <p className="logo"> (앱 로고)
│   │
│   ├── <div className="login-container"> (로그인 입력 폼 및 소셜 로그인 버튼들을 감싸는 컨테이너)
│   │   │
│   │   └── <div> (로그인 폼과 소셜 로그인 버튼들을 감싸는 내부 컨테이너)
│   │       │
│   │       ├── <p className="form-label"> (아이디 레이블)
│   │       ├── <input type="text" id="username" className="input-box" /> (아이디 입력 필드)
│   │       │
│   │       ├── <p className="form-label"> (비밀번호 레이블)
│   │       ├── <input type="password" id="password" className="input-box" /> (비밀번호 입력 필드)
│   │       │
│   │       ├── <button type="submit" className="button-login-done"> (로그인 버튼)
│   │       │
│   │       └── <div> (소셜 로그인 버튼들을 감싸는 컨테이너)
│   │           │
│   │           ├── <button className="button-login-social"> (카카오 로그인 버튼)
│   │           │   └── <img src={...} alt="Kakao Login" /> (카카오 로그인 이미지)
│   │           │
│   │           └── <button className="button-login-social"> (네이버 로그인 버튼)
│   │               └── <img src={...} alt="Naver Login" /> (네이버 로그인 이미지)
│   │
│   └── <div className="other-container"> (회원가입/비밀번호 찾기 버튼을 감싸는 컨테이너)
│       │
│       ├── <button className="button-others">회원가입</button> (회원가입 버튼)
│       └── <button className="button-others">비밀번호 찾기</button> (비밀번호 찾기 버튼)

이미지