codesquad-member-2020 / airbnb-07 Goto Github PK
View Code? Open in Web Editor NEW숙소예약 서비스 - 7팀
숙소예약 서비스 - 7팀
{
"name": "TAEK",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --env=dev --profile --colors",
"build": "rm -rf dist && webpack --env=prod",
"tsc": "tsc"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-redux": "^7.2.0",
"react-router-dom": "^5.2.0",
"redux": "^4.0.5",
"styled-components": "^5.1.0",
"typescript": "^3.9.2"
},
"devDependencies": {
"@babel/core": "^7.9.6",
"@babel/preset-env": "^7.9.6",
"@babel/preset-react": "^7.9.4",
"@babel/preset-typescript": "^7.9.0",
"@types/react": "^16.9.35",
"@types/react-dom": "^16.9.8",
"babel-loader": "^8.1.0",
"dotenv-webpack": "^1.8.0",
"file-loader": "^6.0.0",
"html-webpack-plugin": "^4.3.0",
"ts-loader": "^7.0.4",
"tslint": "^6.1.2",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.11.0"
}
}
예약하기 버튼을 클릭하고나서 응답데이터가 오기전까지 페이지를 이동시키지 않는다
검색결과 화면에서 예약하기 버튼 추가 및 맵의 pin 모달창에도 예약하기 기능 추가
검색결과 view 숙소 스타일링
페이지네이션 스타일링
모든 요청에 대한 예외처리 및 랜더링 자연스럽게 일어나게 하기
컴포넌트로직 store mutation으로 이동
코드 정리 및 주석 정리
토큰값 로그인 처리, 버튼 스타일링
{
"status": "200",
"allData": [
{
"id": 1,
"hotelName": "Stylish Queen Anne Apartment",
"description": "Make your self at home in this charming one-bedroom apartment, centrally-located on the west side of Queen Anne hill. This elegantly-decorated, completely private apartment (bottom unit of a duplex) has an open floor plan, bamboo floors, a fully equipped kitchen, a TV, DVD player, basic cable, and a very cozy bedroom with a queen-size bed. The unit sleeps up to four (two in the bedroom and two on the very comfortable fold out couch, linens included) and includes free WiFi and laundry. The apartment opens onto a private deck, complete with it's own BBQ, overlooking a garden and a forest of black bamboo. The Apartment is perfectly-located just one block from the bus lines where you can catch a bus and be downtown Seattle in fifteen minutes or historic Ballard in ten or a quick five-minute walk will bring you to Whole Foods and Peet's Coffee or take a fifteen minute walk to the top of Queen Anne Hill where you will find a variety of eclectic shops, bars, and restaurants. There is no",
"location": "Seattle",
"street": "Gilman Dr W, Seattle, WA 98119, United States",
"latitude": "47.63628904",
"longitude": "-122.3710252",
"availableGuest": 4,
"currentPrice": 81423,
"previousPrice": 104635,
"hotelRating": "3.7",
"urls": [
{
"id": 1,
"url": "https://a1.muscache.com/ac/pictures/67560560/cfe47d69_original.jpg?interpolation=lanczos-none&size=large_cover&output-format=jpg&output-quality=70"
}
]
},
{
"id": 2,
"hotelName": "Bright & Airy Queen Anne Apartment",
"description": "Chemically sensitive? We've removed the irritants triggering allergy or asthma attacks, like carpeting, forced air & used pillows, all culprits that harbor fungus, mold & bacteria. No smoking, no pets. Designed for healthy living, so breathe easy. Beautiful, hypoallergenic apartment in an extremely safe, quiet and pedestrian-friendly section of Queen Anne. A leafy-green location that puts the best of Seattle at your doorstep. Free WiFi, free parking, ...even free pillows! What's special about this place? Hypo-allergenic bedding, mattresses/covers and new pillows with each rental. (So feel free to take your new pillows with you!) A beautiful restoration mixing period details & modern sensibilities: Hardwood floors throughout, white subway tile, low/no VOCs & non-toxic paints keep this home-away-from-home clean, smart and healthy. Radiant heat and oil radiators mean no blowing hot air or dust. Great Amenities: Free WiFi & internet TV (LED flatscreen). Fully-equipped kitchen with st",
"location": "Seattle",
"street": "7th Avenue West, Seattle, WA 98119, United States",
"latitude": "47.63912312",
"longitude": "-122.3656665",
"availableGuest": 4,
"currentPrice": 161438,
"previousPrice": 184650,
"hotelRating": "3.7",
"urls": [
{
"id": 2,
"url": "https://a0.muscache.com/ac/pictures/14409893/f8e3ed8d_original.jpg?interpolation=lanczos-none&size=large_cover&output-format=jpg&output-quality=70"
}
]
},
{
"id": 3,
"hotelName": "New Modern House-Amazing water view",
"description": "New modern house built in 2013. Spectacular sunset/water views and light, rooftop deck and lounge area, hot tub, 5 bedrooms, gourmet kitchen. Perfect for 2-3 families, walk to downtown. Located in highly desirable Queen Anne neighborhood. Our house is modern, light and fresh with a warm simple palette accented with barnwood, steel and concrete. Open living spaces for entertaining, gourmet kitchen, deck off the kitchen, reading nook, half bath and smaller tv room off kitchen. Fireplace with sofa and sitting area. Basement room is great for kids...this room has patio access and a garage door that opens into the space with basketball hoop right outside. A queen bedroom and full bath are in the basement with concrete heated floors. A queen sleeper sofa is in the tv area in the basement. This room has a door if privacy is needed. Great for a second family with kids. The 2nd floor has 4 bedrooms (one queen in master, one twin bedroom, another bedroom has twin bunk beds and the last",
"location": "Seattle",
"street": "West Lee Street, Seattle, WA 98119, United States",
"latitude": "47.62972413",
"longitude": "-122.3694832",
"availableGuest": 11,
"currentPrice": 96195,
"previousPrice": 119407,
"hotelRating": "3.7",
"urls": [
{
"id": 3,
"url": "https://a2.muscache.com/ac/pictures/b4324e0f-a41b-4614-85a5-0e58c1983b99.jpg?interpolation=lanczos-none&size=large_cover&output-format=jpg&output-quality=70"
}
]
},
{
"id": 4,
"hotelName": "Queen Anne Chateau",
"description": "A charming apartment that sits atop Queen Anne hill, northwest facing bay windows with warm afternoon light setting over the Olympic Cascades. The space is perfect for one or two but can accommodate up to three on the fold-out memory foam cot.",
"location": "Seattle",
"street": "8th Avenue West, Seattle, WA 98119, United States",
"latitude": "47.6384732",
"longitude": "-122.3692791",
"availableGuest": 3,
"currentPrice": 99888,
"previousPrice": 123100,
"hotelRating": "3.7",
"urls": [
{
"id": 4,
"url": "https://a0.muscache.com/ac/pictures/94146944/6302c803_original.jpg?interpolation=lanczos-none&size=large_cover&output-format=jpg&output-quality=70"
}
]
},
{
"id": 5,
"hotelName": "Charming craftsman 3 bdm house",
"description": "Cozy family craftman house in beautiful neighborhood of Queen Anne, Seattle, Washinton. 3 bedrooms, can accomodate up to 6 people. 1,200 sq. feet space is your oasis. Perfect location! Cozy family craftman house in beautiful neighborhood of Queen Anne, Seattle, Washinton. 3 bedrooms, can accomodate up to 6 people. 1,200 sq. feet space is your oasis. Perfect location, walking distance to Whole Foods Market, a 7 minute drive from the Seattle Center (Space Needle, chihuly garden and glass, Children's Museum, Key Arena)! Across the street from golf course- 2 min walk! Relax, sun bath and watch the ferry boats go by on the large outdoor deck with a view of Elliot Bay! Internet, cable TV with HBO, 3 bedrooms and 2 bathrooms each equipped with a bed for 2 (King, Queen, Queen). Washer and dryer in the unit. Fully stocked kitchen with high end All-Clad cookware. For your peace of mind, we have provided a first aid kit and an emergency kit equipped with water and food. We are always available ",
"location": "Seattle",
"street": "14th Ave W, Seattle, WA 98119, United States",
"latitude": "47.6329184",
"longitude": "-122.3724706",
"availableGuest": 6,
"currentPrice": 32183,
"previousPrice": 55395,
"hotelRating": "3.7",
"urls": [
{
"id": 5,
"url": "https://a1.muscache.com/ac/pictures/6120468/b0a55f2e_original.jpg?interpolation=lanczos-none&size=large_cover&output-format=jpg&output-quality=70"
}
]
},
{
"id": 6,
"hotelName": "Private unit in a 1920s mansion",
"description": "We're renting out a small private unit of one of Seattle's most beautiful houses to creative travelers. The unit has it's own entrance to give you privacy in a cozy room with a new bed, great view/light, antiques and a newly remodeled bathroom. If you include a bit of your background in your housing request, you'll get a better chance to have it accepted. If you're an artist or musician wanting some more space to create, let me know. As far as the physical space, the room and bathroom are separate from the rest of the house so you'll have as much privacy as you wish. It doesn't have a TV but hopefully, you'll find more interesting things in Seattle to take your time. You'll get a passcode for the garage through which you get private and exclusive access to your unit. I work mostly from home and happy to give advice on ways to enjoy Seattle and it's surrounding areas. If you let me know your schedule, I could see if we have overlap. This part of Queen Anne has wonderful views and qu",
"location": "Seattle",
"street": "West Comstock Street, Seattle, WA 98119, United States",
"latitude": "47.63052548",
"longitude": "-122.3661741",
"availableGuest": 2,
"currentPrice": 124508,
"previousPrice": 147720,
"hotelRating": "3.7",
"urls": [
{
"id": 6,
"url": "https://a2.muscache.com/ac/pictures/84791950/f83d59ea_original.jpg?interpolation=lanczos-none&size=large_cover&output-format=jpg&output-quality=70"
}
]
},
{
"id": 7,
"hotelName": "Queen Anne Private Bed and Bath",
"description": "Enjoy a quiet stay in our comfortable 1915 Craftsman bungalow in the West Queen Anne neighborhood. Street parking (free near entry), coffee, bakeries and neighborhood cafes nearby. Close to Upper QA shopping district, Seattle Center and bus stops. Enjoy a quiet stay in our comfortable 1915 Craftsman bungalow in the West Queen Anne neighborhood. Street parking (free near entry), coffee, bakeries and neighborhood cafes nearby. Close to Upper QA shopping district, Seattle Center and bus stops. Come and go as you wish through a separate entry with large foyer and covered exterior porch. Parking on 10th Avenue West adjacent to entry is convenient and free. The room and bath are isolated from the rest of the house for your peace and privacy. The bedroom has a memory foam top double bed with comforter, pillows, large closet, dresser and desk /task light. The bathroom has a pedestal sink and foot claw foot tub/shower. The large 5' tub is perfect for soaking your cares away. We provide be",
"location": "Seattle",
"street": "10th Avenue West, Seattle, WA 98119, United States",
"latitude": "47.63660545",
"longitude": "-122.3685191",
"availableGuest": 2,
"currentPrice": 75268,
"previousPrice": 98480,
"hotelRating": "3.7",
"urls": [
{
"id": 7,
"url": "https://a2.muscache.com/ac/pictures/26505642/2c3a36d7_original.jpg?interpolation=lanczos-none&size=large_cover&output-format=jpg&output-quality=70"
}
]
},
{
"id": 8,
"hotelName": "Tiny Garden cabin on Queen Anne",
"description": "Our tiny cabin is private , very quiet and comfortable spot just for two. The bus is just across the street. Queen Anne ,Ballard and Downtown are a short bus ride. High Speed WI-FI. The bathroom is shared by our guests . This cabin was built with Airbnb in mind, Queen bed with gel foam topper 110 heat with thermostat . Cherry hardwood floors . Oak bed frame and night stand . This cabin is very well insulated and is warm and quiet . The bathroom and shower is located in our house just a few steps away. There is plenty of street parking all around us. Bus line just a half block away. Just a ten minute bus ride to Pike Place Market. Private large back yard we have chickens that live there too. In the spring and summer the garden is a sight to see. If you want a private stay in a nice space this is it. Food within walking distance ,sculpture park is pretty close as well. -What you get- your own private space! use of a shared bathroom (for our guests) we have our own. our back yard and ",
"location": "Seattle",
"street": "West Wheeler Street, Seattle, WA 98119, United States",
"latitude": "47.64016054",
"longitude": "-122.375856",
"availableGuest": 2,
"currentPrice": 50648,
"previousPrice": 73860,
"hotelRating": "3.7",
"urls": [
{
"id": 8,
"url": "https://a2.muscache.com/ac/pictures/83538305/d78f8dbd_original.jpg?interpolation=lanczos-none&size=large_cover&output-format=jpg&output-quality=70"
}
]
},
{
"id": 9,
"hotelName": "Urban Charm || Downtown || Views",
"description": "Nestled in the heart of the city, this space is turn of the century charm meets urban living; with gorgeous city views, nightlife, shopping, and restaurants within blocks. Walking Score: 92 Located in the heart of the city, this space is turn of the century meets urban living, with off-street privacy and a yard. Full Apartment Garden area, patio and yard Laundry room I'm available as much or as little as you wish for the duration of your stay. I'm happy to give you recommendations and insider tips on this great city! Walking Score: 92 4 blocks from Kerry Park Famous Seattle restaurants within 1 block The hill became a popular spot for the city's early economic and cultural elite to build their mansions, and the name derives from the architectural style typical of many of the early homes. According to Wikipedia, Queen Anne's demographic is power-singles, young unmarried professionals. It boasts a bustling main street with restaurants, bars, shopping, coffee shops, farmers market, Trad",
"location": "Seattle",
"street": "Queen Anne Avenue North, Seattle, WA 98109, United States",
"latitude": "47.6324103",
"longitude": "-122.3572161",
"availableGuest": 2,
"currentPrice": 87578,
"previousPrice": 110790,
"hotelRating": "3.7",
"urls": [
{
"id": 9,
"url": "https://a0.muscache.com/ac/pictures/85453284/d627f681_original.jpg?interpolation=lanczos-none&size=large_cover&output-format=jpg&output-quality=70"
}
]
},
{
"id": 10,
"hotelName": "Airy + Bright Queen Anne Apartment",
"description": "Beautiful apartment in an extremely safe, quiet and pedestrian-friendly section of Queen Anne. A leafy-green location that puts the best of Seattle at your doorstep. Free WiFi, free parking, ...even free pillows!* What's special about this place? A beautiful restoration mixing period details & modern sensibilities: Hardwood floors throughout, white subway tile, low/no VOCs & non-toxic paints keep this home-away-from-home clean, smart and healthy. Radiant heat and oil radiators mean no blowing hot air or dust. Hypo-allergenic bedding, mattresses/covers and new pillows with each rental. (That's right, they're yours to keep, so feel free to take your new pillows with you. More on this, below...) Great Amenities: Free WiFi & internet TV (LED flatscreen). Fully-equipped kitchen with stainless-steel appliances, sink & disposal. Large washer & dryer. Iron/ironing board. Hairdryer. Plenty of storage. Convenient parking, both on- and off-street. The Best Location: Enjoy Seattle's celebrat",
"location": "Seattle",
"street": "7th Avenue West, Seattle, WA 98119, United States",
"latitude": "47.63749172",
"longitude": "-122.3668886",
"availableGuest": 4,
"currentPrice": 161438,
"previousPrice": 184650,
"hotelRating": "3.7",
"urls": [
{
"id": 10,
"url": "https://a2.muscache.com/ac/pictures/33003258/f5cb2139_original.jpg?interpolation=lanczos-none&size=large_cover&output-format=jpg&output-quality=70"
}
]
}
]
}
검색 조건 버튼은 클릭하면 각 버튼에 해당하는 모달창이 뜬다.
모달창이 뜬 상태에서 다시 해당 메뉴 버튼을 클릭하면 모달창이 닫히면서 선택된 값이 적용된다.
예) 날짜 창이 띄워져 있는 상태에서 다시 [날짜] 버튼을 클릭하면 날짜 창에서 선택했던 값들이 적용되고 날짜 창은 닫힌다.
어떤 특정 모달창이 뜬 상태에서 다른 버튼을 클릭하면 (1)기존 모달창은 닫히고, (2)기존 모달창에서 선택했던 값들은 적용되고, (3)클릭한 버튼에 해당하는 모달창이 뜬다.
예) 날짜 창이 띄워져 있는 상태에서 [인원] 버튼을 클릭하면 날짜 창은 닫히고 인원 창이 뜬다. 단, 날짜 창에서 선택했던 값들은 적용된다.
모달창이 띄워진 상태에서 뒷배경을 클릭하면 현재 모달창에서 선택된 값이 적용되면서 창이 닫힌다.
[날짜] 버튼을 클릭하면 다음과 같은 달력 모달창이 뜬다.
달력에서 날짜를 선택함과 동시에 [날짜] 버튼의 텍스트가 함께 변경된다.
예1) 체크인 날짜만 선택했을 때 : “11월 10일 - 체크아웃"
예2) 날짜 하루만 선택했을 때 : “8월 12일"
예3) 체크인, 체크아웃 날짜 모두 선택했을 때 : “11월 10일 - 11월 19일"
좌/우 화살표 버튼을 통해 달력이 슬라이딩 된다.
지난 날짜는 선택할 수 없도록 비활성화 된다.
달력에서 날짜 위에 마우스 hover 하거나 클릭하면 해당 날짜에 둥근 테두리가 생긴다.
달력에서 날짜를 클릭하면 해당 날짜에 둥근 검은색 배경이 생긴다.
달력에서 첫 번째 클릭은 체크인 날짜, 두 번째 클릭은 체크아웃 날짜 선택이 기본 동작이다. 세 번째 클릭은 체크인, 네 번째 클릭은 체크아웃…식으로 반복된다.
달력에서 첫 번째 클릭으로 체크인 날짜 선택 후 두 번째 클릭을 하기 전까지 날짜 선택이 표현된다. 단, 두 번째 날짜가 첫 번째 날짜보다 이전인 경우는 위의 동작이 수행되지 않는다.
체크인 날짜 선택 후 체크아웃 날짜를 선택해야 할 시점에, 체크인 날짜보다 이전 날짜를 선택하게 되면 선택한 이전 날짜가 체크인 날짜로 선택되고 다시 체크아웃을 선택해야 하는 순서가 된다.
예) 10일 선택 후 9일을 체크아웃 날짜로 선택하게 되면 9일이 체크인 날짜로 선택되면서 다시 다음 클릭이 체크아웃 날짜가 된다.
같은 날짜를 두 번 클릭하면 그 날짜 한 칸만 선택된다
지우기 버튼을 클릭하면 선택한 날짜가 없어지고 초기화 된다.
‘저장하기' 버턴을 클릭하면 저장되고 모달창이 닫히고 검색결과면이 보여진다.
현재 날짜를 기준으로 선택한 숙소들 가격 범위를 표시하는 화면이다. 최저가부터 최고가 사이 가격 범위를 표시한다. 단, 최고가 100만원 이상 되는 경우는 “100만원 이상”으로 표시한다.
그 아래에는 선택한 숙소들 평균 가격을 표시한다.
가격 범위에 따라 그래프를 표시한다. x축은 최저-최고 가격 범위이고, y축은 숙소 개수를 의미한다.
3-1. 사용자는 range slider를 이용해 가격을 설정할 수 있다.
3-2. 슬라이더의 버튼이 양 끝에 있고, 가격 입력 박스에 최저/최고값이 표시된 상태가 디폴트이다.
3-3. 사용자는 슬라이더의 버튼을 drag&drop을 해서 가격 범위 설정을 할 수 있다.
3-4. 설정한 범위 내의 라인(버튼과 버튼 사이 부분)은 키컬러로, 범위 밖의 라인은 회색으로 표현된다.
3-5. 두 개의 버튼은 서로 완전히 겹치거나 서로를 지나쳐서 이동될 수 없다. 즉, 왼쪽 버튼은 늘 최저 가격, 오른쪽 버튼은 늘 최고 가격을 표현한다.
지우기 버튼을 누르면 가격 범위를 선택하지 않은 상태로 돌아간다.
저장버튼을 누르면, 모달창은 닫히고, 해당 범위 숙소만 필터링해서 표시된다.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.