Album

로그인 시 앨범집을 보여줍니다.

📗목차

• 📝 개요
• 🔗 링크
• 🛠 사용 기술 스택
• 👤 사용자 계정
  • 🎬 회원가입 과정 시연 영상
  • 🔓 아이디 찾기
  • 🔓 비밀번호 찾기
• 서버 On일 때
  • 🌞 Light 모드 & 🌜 Dark 모드
• 🎬 서버 Off일 때 시연 영상
• 🎬 로그인 과정 & 앨범 페이지 시연 영상
• 갤러리 페이지
  • 🌞 Light 모드 & 🌜 Dark 모드
  • 🎬 갤러리 페이지 시연 영상

📝 포트폴리오 개요

프로젝트: 추억을 로그인. 앨범집

개발 기간: 2023. 10 ~ 2024 01.

상세 기능:

• 회원가입을 통해 계정을 생성할 수 있습니다.
• 아이디 찾기와 비밀번호 찾기를 통해 본인의 계정을 찾을 수 있습니다.
• 비밀번호 재설정을 할 수 있습니다.
• 로그인에 성공하면 JWT 토큰을 생성하여 10분 후에 토큰 만료 알림창이 뜹니다.(확인 버튼 누르면 로그아웃)
• 
• 로그인 후 앨범집 형태의 UI를 띄는 앨범 페이지로 렌더링합니다.
• 서버에서 이미지 관련 데이터를 불러왔습니다.
• 앨범집의 "펼쳐보기" 버튼을 누를 시 해당 제목의 갤러리 페이지로 렌더링해줍니다.
• 갤러리 페이지에 있는 이미지를 클릭하면 해당 이미지가 확대된 페이지로 렌더링해줍니다.
• 이미지가 확대된 페이지에서 해당 이미지를 다운받을 수 있습니다.

🔗 링크

외부에서도 실행할 수 있도록 웹 호스팅을 통해 서버 구축

테스트 아이디: test
테스트 비밀번호: 123
http://oeanb.dothome.co.kr

🛠 사용 기술 스택

👤 사용자 계정

🎬 회원가입

Register.mp4

• 비밀번호 재확인 일치 여부 확인
• 회원가입을 하기 위해 입력한 아이디가 중복일 경우 팝업창을 띄움
• 회원가입을 하기 위해 입력한 휴대폰 번호가 중복일 경우 팝업창을 띄움
• 회원가입 성공 시 비밀번호를 해시화하여 저장(SQL 인젝션 방지)
• 서버 연결이 끊긴 경우 팝업창을 띄움

---

🔓 아이디 찾기

사용자 이름과 휴대폰 번호를 입력하여 아이디를 찾을 수 있습니다.

---

🔓 비밀번호 찾기

사용자 아이디와 휴대폰 번호를 입력하여 비밀번호를 재설정할 수 있습니다.

서버 On일 때

🌞 Light 모드                                                   🌜 Dark 모드

🎬 서버 Off일 때

ServerOff.mp4

🎬 로그인 과정 시연 영상

Login.mp4

🎬 갤러리 페이지

🌞 Light 모드                                                   🌜 Dark 모드

🎬 갤러리 페이지 시연 영상

Gallery.mp4