여행,숙박 분야의 홈페이지를 제작하였습니다. 실제 사이트인 에어비엔비를 참고하였습니다.
프로젝트 기간: 2023.05.23 ~ 2023.06.27
✅ Commit
| Emoji | Text | Description |
|---|---|---|
| ✨ | feat | 새롭게 만드는 코드(html,css,javascript 등 모두) |
| 🎨 | modify | 기존 코드 수정 |
| ⚡️ | refactor | 리팩토링 |
| 🐛 | fix | 버그 문제 수정 |
| 🧪 | test | 테스트 |
| 🔧 | setting | 환경 설정 |
✅ SignUp (회원가입)
|
1. 레이아웃 |
|
|
2. 회원가입 이메일은 형식에 맞게, 이름은 한글만, 비밀번호는 최소 4자이상만 제출할 수 있도록 유효성검사를 넣었습니다. |
|
|
3. from 회원가입 to 로그인 이미 계정이 있으신가요? 로그인 을 클릭 시, 로그인 모달로 이동하도록 제작하였습니다. |
|
✅ SignIn (로그인)
|
1. 레이아웃 |
|
|
2. 로그인기능 등록되지 않은 이메일 혹은 비밀번호를 적었을 시, "이메일 혹은 비밀번호를 확인해주세요"라는 텍스트가 뜨도록 구현하였습니다. |
|
|
3. google, naver, kakao 를 통한 소셜로그인 기능 next-auth를 통해 google, naver, kakao의 아이디로도 회원가입이 가능한 소셜로그인 기능을 구현하였습니다. |
|
✅ Search (검색)
|
1. 검색기능 해변 근처, 빌라, 애견동반, 섬, 호수... 등의 카테고리를 검색 시, 해당 카테고리의 상품을 찾아주는 기능을 구현하였습니다. |
|
|
2. 유효성 검사 검색의 키워드에 대한 데이터가 없을 때, 검색 결과가 없다는 화면처리를 구현하였습니다. |
|
✅ Hosting (호스팅,글 게시)
|
1. 카테고리선택 |
|
|
2. 위치등록 숙소의 위치를 검색하여, 그 주소에 맞게 지도로 표시되도록 구현하였습니다. |
|
|
3. 편의시설등록 숙박할 수 있는 인원수, 방의 갯수, 화장실의 갯수를 체크하도록 구현하였습니다. |
|
|
4. 이미지 등록 이미지들을 업로드할 수 있도록 구현하였습니다. 또한, 선택한 이미지를 지울 수 있는 기능을 추가하였습니다 |
|
|
5. 숙소소개등록 |
|
|
6. 가격 등록 가격등록 이후에는, 홈 화면에 게시되도록 구현하였습니다. 1~6까지 각각의 스탭 별로 필요한 입력값을 주지 않을 시, 다음 스탭으로 넘어갈 수 없도록 구현하였습니다. |
|
✅ 위시리스트 (찜하기,즐겨찾기)
|
하트버튼을 누를 시, 위시리스트에 입력 텍스트와 상품을 함께 등록할 수 있도록 기능을 구현하였습니다. |
|
✅ 홈 화면
|
1. 미니 헤더 스크롤을 내릴 시, 상단에 헤더가 붙도록 구현하였습니다. |
|
|
2. 필터 아이콘을 클릭 시, 해당 아이콘에 맞는 카테고리들의 게시글들이 나오도록 구현하였습니다. |
|
✅ 상세페이지
|
1. 이미지 슬라이더 썸네일 식의 슬라이더를 구현하였습니다. |
|
|
2. 미니 헤더 스크롤을 내릴 시, 상단에 사진, 숙소정보, 위치 part로 이동시켜주는 헤더가 고정되도록 구현하였습니다. |
|
|
3. 예약일자 등록 일정 스크롤 범위 동안 따라 내려가도록 레이아웃을 구성하였습니다. 선택한 일자에 맞게 계산된 결과들이 나오도록 레이아웃을 구성하였습니다 달력을 통해 예약일자를 등록하도록 구현하였습니다. 1박 이상 선택하지 않을 시, 특정 메세지를 띄우도록 구현하였습니다. 로그인 상태가 아닐 시, 특정 메세지를 띄우도록 구현하였습니다. |
|
✅ 예약페이지
|
1. 날짜 수정 날짜를 수정할 수 있도록 구현하였습니다. |
|
|
2. 결제 수단 결제기능을 실제 구현하지 않고, 레이아웃만 구현하였습니다. |
|
|
3. 예약 등록 일자를 선택 후, 예약하기 버튼으로 등록 될 시, 상단 메뉴바의 "여행"칸에서 확인할 수 있도록 구현하였습니다. 계졍별 독립적으로 예약내역들이 나올 수 있도록 유효성검사를 구현하였습니다. |
|