View Code? Open in Web Editor
NEW
This project forked from wecode-bootcamp-korea/38-2nd-airb-frontend
강은지, 김도영, 김우진, 정관훈
JavaScript 98.69%
CSS 0.84%
HTML 0.47%
38-2nd-airb-frontend's Introduction
- 프로젝트 사이트: Airbnb
- 소개: 세계 최대의 숙박 공유 서비스이며, 자신의 방이나 집, 별장 등 사람이 지낼 수 있는 모든 공간을 공유할 수 있는 플랫폼입니다.
- 다양한 숙박 공유 서비스 중, 가장 직관적인 UI와 User Friendly 한 환경을 제공합니다.
- 폭넓은 숙박 필터링 검색을 제공하며, 사용자가 원하는 위치, 날짜, 테마, 가격, 시설 등을 선택해서 최적화된 결과를 보여줍니다.
👑 김도영(FE) |
강은지(FE) |
정관훈(FE) |
김우진(FE) |
![avatar](https://avatars.githubusercontent.com/u/110547785?v=4) |
![avatar](https://avatars.githubusercontent.com/u/70960594?v=4) |
![avatar](https://avatars.githubusercontent.com/u/110619143?v=4) |
![avatar](https://avatars.githubusercontent.com/u/111094669?v=4) |
![](https://camo.githubusercontent.com/dc4e9f7ea9597ea5a27629a36afb9ef8697569c621ccb42369070012b4092ae1/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4769744875622d3138313731373f7374796c653d666f722d7468652d6261646765266c6f676f3d476974487562266c6f676f436f6c6f723d7768697465) |
![](https://camo.githubusercontent.com/dc4e9f7ea9597ea5a27629a36afb9ef8697569c621ccb42369070012b4092ae1/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4769744875622d3138313731373f7374796c653d666f722d7468652d6261646765266c6f676f3d476974487562266c6f676f436f6c6f723d7768697465) |
![](https://camo.githubusercontent.com/dc4e9f7ea9597ea5a27629a36afb9ef8697569c621ccb42369070012b4092ae1/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4769744875622d3138313731373f7374796c653d666f722d7468652d6261646765266c6f676f3d476974487562266c6f676f436f6c6f723d7768697465) |
![](https://camo.githubusercontent.com/dc4e9f7ea9597ea5a27629a36afb9ef8697569c621ccb42369070012b4092ae1/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4769744875622d3138313731373f7374796c653d666f722d7468652d6261646765266c6f676f3d476974487562266c6f676f436f6c6f723d7768697465) |
정도영 (BE) |
김희연 (BE) |
김성훈 (BE) |
![avatar](https://avatars.githubusercontent.com/u/110891019?v=4) |
![avatar](https://avatars.githubusercontent.com/u/109201576?v=4) |
![avatar](https://avatars.githubusercontent.com/u/107197044?v=4) |
![](https://camo.githubusercontent.com/dc4e9f7ea9597ea5a27629a36afb9ef8697569c621ccb42369070012b4092ae1/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4769744875622d3138313731373f7374796c653d666f722d7468652d6261646765266c6f676f3d476974487562266c6f676f436f6c6f723d7768697465) |
![](https://camo.githubusercontent.com/dc4e9f7ea9597ea5a27629a36afb9ef8697569c621ccb42369070012b4092ae1/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4769744875622d3138313731373f7374796c653d666f722d7468652d6261646765266c6f676f3d476974487562266c6f676f436f6c6f723d7768697465) |
![](https://camo.githubusercontent.com/dc4e9f7ea9597ea5a27629a36afb9ef8697569c621ccb42369070012b4092ae1/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4769744875622d3138313731373f7374796c653d666f722d7468652d6261646765266c6f676f3d476974487562266c6f676f436f6c6f723d7768697465) |
JavaScript |
React |
Styled Components |
esLint |
Prettier |
![icon](https://camo.githubusercontent.com/0418a2bf25601cc5d8fae74f654b10d5734360ff2b1bb3b2fea4bb086baf5586/68747470733a2f2f74656368737461636b2d67656e657261746f722e76657263656c2e6170702f6a732d69636f6e2e737667) |
![icon](https://camo.githubusercontent.com/48a026f4399514afed27e76efb9f48e139a0ba4b613d933a8c7a094dc1da475c/68747470733a2f2f74656368737461636b2d67656e657261746f722e76657263656c2e6170702f72656163742d69636f6e2e737667) |
![icon](https://camo.githubusercontent.com/6f4fb65d2e8265237577a2c676f3db7845a22a69e7af12a345c035cbfb45dd0f/68747470733a2f2f7374796c65642d636f6d706f6e656e74732e636f6d2f6c6f676f2e706e67) |
![icon](https://camo.githubusercontent.com/06fb9a1e32a84415c65297e73bf685b7af0e36e1feeef56d802556a1bd496cda/68747470733a2f2f74656368737461636b2d67656e657261746f722e76657263656c2e6170702f65736c696e742d69636f6e2e737667) |
![icon](https://camo.githubusercontent.com/184dc161979384d9f2addf1f5cf285aaa317c1c9a47dd9918a6f81861db54ce9/68747470733a2f2f74656368737461636b2d67656e657261746f722e76657263656c2e6170702f70726574746965722d69636f6e2e737667) |
JavaScript |
Nodejs |
MySql |
Rest |
![icon](https://camo.githubusercontent.com/0418a2bf25601cc5d8fae74f654b10d5734360ff2b1bb3b2fea4bb086baf5586/68747470733a2f2f74656368737461636b2d67656e657261746f722e76657263656c2e6170702f6a732d69636f6e2e737667) |
![icon](https://camo.githubusercontent.com/a6ed903c5b1c0e78386c1444bf950d30bfd65c4da93861f0addf865f3079ac07/68747470733a2f2f74656368737461636b2d67656e657261746f722e76657263656c2e6170702f6e67696e782d69636f6e2e737667) |
![icon](https://camo.githubusercontent.com/69fa8ed185f6026de241b4a3eb05855be4660cbc2d36f01b9e9b64e32e0472da/68747470733a2f2f74656368737461636b2d67656e657261746f722e76657263656c2e6170702f6d7973716c2d69636f6e2e737667) |
![icon](https://camo.githubusercontent.com/9fcd23b962db5fdfc4be49d1daedc6bbbfdcc0cca4cc25792a4be616b8bd56e6/68747470733a2f2f74656368737461636b2d67656e657261746f722e76657263656c2e6170702f726573746170692d69636f6e2e737667) |
구현 기능 (Front-end & Back-end)
|
페이지 및 기능 구현 |
설명 |
담당 개발자 |
Social Login w/ Kakao API |
![login](https://user-images.githubusercontent.com/70960594/201516847-1f3a93fe-cd8e-44a5-b084-41c97009c3de.gif) |
- 카카오 소셜 로그인 API를 활용한 회원가입, 로그인 기능 구현 |
FRONT-END 강은지 BACK-END 김희연 |
Filtering |
![filter](https://user-images.githubusercontent.com/70960594/201517069-339d6e3d-8947-489d-ba76-ece630af5744.gif) |
- 지역, 날짜, 게스트 수에 의한 필터링 기능 구현 - Date Picker 라이브러리 활용 - query string 활용 |
FRONT-END 강은지 , 김우진 BACK-END 김성훈 |
Main Page |
![mainlist](https://user-images.githubusercontent.com/70960594/201517151-fea4095b-c31e-4438-b0ff-7608c74ae520.gif) |
- |
FRONT-END 김우진 BACK-END 김성훈 |
Hosting Page |
![host](https://user-images.githubusercontent.com/70960594/201516943-1409b97c-c95f-4be8-bab2-1d3046c19077.gif) |
- Context를 통한 멀티스텝폼 구현, drag&drop 으로 이미지 5개 저장 및 formdata 활용 백엔드 전송 |
FRONT-END 정관훈 BACK-END 정도영 |
Map & Filtering |
![mainmap](https://user-images.githubusercontent.com/70960594/201517296-d6b1bea2-da3a-40fd-ba17-4741d3e22acb.gif) |
- Kakao Map API를 활용한 지도 구현 - 지도 위치에 따른 필터링 기능 구현 |
FRONT-END
정관훈 BACK-END 김성훈 |
Detail Page & Reservation Request |
![detail](https://user-images.githubusercontent.com/70960594/201517416-598cbb31-2576-4c65-890a-e9556ba5688b.gif) |
- |
FRONT-END 김도영 BACK-END 정도영 |
Reservation inquiry Page |
![Booking](https://user-images.githubusercontent.com/70960594/201517442-43439c0a-226c-40a2-ac91-33dd5339cbbd.gif) |
- 예약이 완료된 숙박에 대한 데이터 UI 구현 |
FRONT-END강은지 BACK-END 정도영 |
38-2nd-airb-frontend's People