Unsplash API와 Firebase를 활용한 Unsplash 클론 코딩 프로젝트입니다. 이 프로젝트의 주요 목표는 프론트엔드 개발 역량을 강화하는 것입니다. Firebase를 사용하여 웹 서버를 구축하고, 데이터베이스, 인증, 스토리지 등을 통합하여 웹 서비스의 흐름을 종합적으로 이해하고 구현하는 데 중점을 두었습니다.
- React
- React Router
- Typescript
- styled-component
- zustand
- Firebase
- 서비스 접속시 초기화면으로 로그인 페이지 노출됩니다.
- 이메일 주소와 비밀번호 입력시 유효성 검사가 진행되고 실패한 경우 각 경고 문구가 노출됩니다.
- 이메일의 경우 : 주소의 형식이 맞지 않을 시
- 비밀번호의 경우 : 8글자 이상 16글자 이하로, 영문, 숫자, 특수문자(@$!%*#?&) 1개씩 사용
- 눈 아이콘 클릭시 입력한 비밀번호 노출됩니다.
- 작성 완료 후, 로그인 버튼 클릭시 회원인증이 완료되면 메인페이지 노출됩니다.
- 회원인증이 실패하면 (가입 않은 유저, 이메일과 비밀번호가 잘못 입력되었을 경우) 경고 문구 노출됩니다.
| 로그인 |
 |
- 이메일주소, 이름, 비밀번호, 비밀번호 확인 입력시 유효성 검사가 진행되고 실패한 경우 각 경오 문구가 노출됩니다.
- 이메일의 경우 : 주소의 형식이 맞지 않을 시
- 이름의 경우 : 2글자 이상, 12글자 이하
- 비밀번호의 경우 : 8글자 이상 16글자 이하로, 영문, 숫자, 특수문자(@$!%*#?&) 1개씩 사용
- 눈 아이콘 클릭시 입력한 비밀번호 노출됩니다.
- 작성 완료 후, 회원가입 버튼 클릭시 이메일을 통해 기존 회원 인증에 대한 확인이 완료되면 로그인 페이지가 노출됩니다.
- 기존 회원인증일 경우 회원가입은 실패하여
이미 사용 중인 이메일입니다.라는 안내 문구 노출됩니다.
| 회원가입 |
 |
- 첫 회원가입시 카테고리 지정 팝업이 노출됩니다.
- 자동으로 카테고리를 생성해주는 기능과 사용자가 직접 입력해서 카테고리를 지정할 수 있습니다.
| 카테고리 자동 생성 |
 |
| 카테고리 수동 생성 |
 |
- 키워드 검색시 해당 키워드의 이미지가 노출됩니다.
- 무한 스크롤 기능으로 인해 스크롤 이동시 이미지가 자동으로 추가됩니다.
- 이미지의 갯수가 많아지면 페이지의 상단으로 이동 할 수 있는 버튼이 노출됩니다.
- 이미지 hover시 북마크 할 수 있는 버튼이 노출됩니다.
- 북마크 된 이미지의 경우 초록색의 북마크 아이콘이 표시 되어 노출됩니다.
- 북마크로 지정된 이미지는
collection 버튼 클릭시 해당 페이지로 이동됩니다.
collection 페이지내에서 북마크를 제거할 수 있습니다.
| 북마크 추가 |
 |
| 북마크 제거 |
 |
- 유저정보중 이름과 프로필 이미지가 변경이 가능하며, 지정한 카테고리를 수정할 수 있습니다.
- 프로필 이미지는 2MB 이하만 업로드가 가능합니다.
| 프로필 |
 |
