#07-feat/auth

[eunohhh]

Issue

📌 제목

feat/auth (인증/인가)
branch: feat/auth

---

💡 문제 설명

인증/인가 기능과 로그인/회원가입 페이지 구현 예정입니다.

---

🛠 작업 상세

• 로그인: 아이디(이메일), 비밀번호를 입력하여 계정을 생성하거나 로그인할 수 있게 합니다.
  • 이메일 유효성 검사: 해당 이메일로 계정이 존재하는지 여부를 확인한 후, 존재하지 않을 경우 “존재하지 않는 아이디입니다.” 메시지를 인풋 박스 아래에 표시합니다.
  • 비밀번호 유효성 검사: 입력한 비밀번호가 이메일에 해당하는 계정의 비밀번호인지 확인하고, 아닐 경우 “비밀번호가 아이디와 일치하지 않습니다.” 메시지를 인풋 박스 아래에 표시합니다.
  • 토큰 유효기간은 1시간입니다.
• 회원 가입: 아이디(이메일), 비밀번호, 이름, 회사명을 입력하여 계정을 생성할 수 있게 합니다.
  • 이름 유효성 검사: 입력이 존재하는지 여부를 확인하고, 존재하지 않을 경우 “이름을 입력해 주세요.” 메시지를 인풋 박스 아래에 표시합니다.
  • 회사명 유효성 검사: 입력이 존재하는지 여부를 확인하고, 존재하지 않을 경우 “회사명을 입력해 주세요.” 메시지를 인풋 박스 아래에 표시합니다.
  • 이메일 유효성 검사: 해당 이메일로 계정이 존재하는지 여부를 확인하고, 존재할 경우 “중복된 이메일입니다.” 메시지를 인풋 박스 아래에 표시합니다.
  • 비밀번호 유효성 검사: 입력한 비밀번호가 8자 이상인지 확인하고, 그렇지 않을 경우 “비밀번호가 8자 이상이 되도록 해 주세요.” 메시지를 인풋 박스 아래에 표시합니다.
  • 비밀번호 확인 검사: 입력한 비밀번호와 비밀번호 확인란에 입력한 값이 일치하는지 확인합니다. 비밀번호 확인란의 값이 일치하지 않을 경우, "비밀번호가 일치하지 않습니다."라는 메시지를 입력 박스 아래에 표시합니다.
• 유저 인풋 검사 시점
  • 입력 후 해당 입력 박스에서 포커스를 이동한 경우.
  • 입력 박스에 포커스를 두고 1초 이상 아무런 입력도 하지 않은 경우.
  • 로그인 혹은 회원가입 버튼을 클릭한 경우.
• 애니메이션 적용
  • 유효성 검사 메시지는 강조되며 표시되는 애니메이션이 적용됩니다.
  • 입력 박스에 포커스를 두게 될 경우, 테두리 색상 변경 등의 애니메이션이 적용됩니다.

---

🔗 관련 링크 (선택)

---

🎯 완료 조건

• 인증/인가 유효성 검사가 완전히 동작함
• 인증/인가 토큰이 유효기간 1시간으로 잘 저장되고 사용됨