Coder Social home page Coder Social logo

airbnb-07's People

Contributors

godrm avatar guswns1659 avatar hu2y avatar seungdeng17 avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

airbnb-07's Issues

[React] 날짜 선택 기능 구현

기능

  • react-dates 설치
  • 체크인, 체크아웃 날짜 선택 시 닫힘
  • 모달 밖 영역 클릭시 현재 선택된 날짜 적용되면서 창이 닫힘
  • ...

[Vue] Map Pin Customizing

Map Pin Customizing

  • 실제 사용하고 있는 api에서 맵정보를 반영시켜본다
  • 일단 API 요청은 하지 않고 맵에 데이터들의 위도경도가 제대로 표시되어서 랜더링되는지 확인이 필요
  • 도시들(시애틀, 보스턴, 뉴욕)의 중심이 되는 위도 경도를 찾아서 넣을 필요가 있다. 초기 랜더링될 지도 위치를 위해서..
  • 핀들이 너무 겹쳐있으면 안되서 어떻게 할지는 고민 해봐야할 것 같다
  • 중심위치에서 위도 경도 반경을 어느정도로 할지도 테스트 해봐야한다
  • 확대 축소가 가능하기때문에 그때의 반경도 어떻게 적용할지 코드분석이 필요하다
  • 랜더링될 핀의 스타일을 커스터마이징 한다
  • 지도를 드래그 하면서 움직일때도 데이터 요청을 보내야한다 (이부분은 필터 API가 완성되면 같이 적용해볼 예정)

[Vue] OAuth 토큰값 인증을 위한 Axios Interceptors

Axios Interceptors

  • env에 Base api 요청 주소를 입력해둔다
  • Oauth가 실행되면 store에 state에 토큰값을 저장해둔다
  • 모든 API 요청을 하기전에 config.headers에 authorization 키값으로 토큰값을 주입해준다
  • 토큰값이 없다면 로그인 페이지로 리다이렉트 시켜주어야 한다
  • 로그인 관련 API를 인스턴스를 뺴서 하나 만들어둔다

[React] api 연동

기능

  • 검색 필터
  • 예약 하기
  • 예약 정보 조회
  • 예약 취소 요청

[React] 리팩토링

기능

  • 변수, 함수, 컴포넌트명 의미에 맞도록 수정
  • 리듀서 case 내부 중복 제거
  • 스타일 수정
  • 기능 보완
  • 버그를 찾아라

[Vue] Reservation API

Reservation API

  • 예약 하기 버튼을 클릭했을때 요청보낼 API 연동

스크린샷 2020-05-30 오후 2 27 45

  • 예약 정보를 조회하는 API 연동

스크린샷 2020-05-30 오후 2 28 25

  • 예약 취소버튼을 클릭했을때 취소하는 API 연동

스크린샷 2020-05-30 오후 2 28 58

[Vue] DateFilter Button Component 생성

DateFilter Button Component

Modal Component

스크린샷 2020-05-19 오후 4 27 22

  • 검색 조건 버튼은 클릭하면 각 버튼에 해당하는 모달창이 뜬다.

  • 모달창이 뜬 상태에서 다시 해당 메뉴 버튼을 클릭하면 모달창이 닫히면서 선택된 값이 적용된다.
    예) 날짜 창이 띄워져 있는 상태에서 다시 [날짜] 버튼을 클릭하면 날짜 창에서 선택했던 값들이 적용되고 날짜 창은 닫힌다.

  • 어떤 특정 모달창이 뜬 상태에서 다른 버튼을 클릭하면 (1)기존 모달창은 닫히고, (2)기존 모달창에서 선택했던 값들은 적용되고, (3)클릭한 버튼에 해당하는 모달창이 뜬다.
    예) 날짜 창이 띄워져 있는 상태에서 [인원] 버튼을 클릭하면 날짜 창은 닫히고 인원 창이 뜬다. 단, 날짜 창에서 선택했던 값들은 적용된다.

  • 모달창이 띄워진 상태에서 뒷배경을 클릭하면 현재 모달창에서 선택된 값이 적용되면서 창이 닫힌다.

Date Component

스크린샷 2020-05-19 오후 4 27 49

  • [날짜] 버튼을 클릭하면 다음과 같은 달력 모달창이 뜬다.

  • 달력에서 날짜를 선택함과 동시에 [날짜] 버튼의 텍스트가 함께 변경된다.
    예1) 체크인 날짜만 선택했을 때 : “11월 10일 - 체크아웃"
    예2) 날짜 하루만 선택했을 때 : “8월 12일"
    예3) 체크인, 체크아웃 날짜 모두 선택했을 때 : “11월 10일 - 11월 19일"

  • 좌/우 화살표 버튼을 통해 달력이 슬라이딩 된다.

  • 지난 날짜는 선택할 수 없도록 비활성화 된다.

  • 달력에서 날짜 위에 마우스 hover 하거나 클릭하면 해당 날짜에 둥근 테두리가 생긴다.

  • 달력에서 날짜를 클릭하면 해당 날짜에 둥근 검은색 배경이 생긴다.

  • 달력에서 첫 번째 클릭은 체크인 날짜, 두 번째 클릭은 체크아웃 날짜 선택이 기본 동작이다. 세 번째 클릭은 체크인, 네 번째 클릭은 체크아웃…식으로 반복된다.

  • 달력에서 첫 번째 클릭으로 체크인 날짜 선택 후 두 번째 클릭을 하기 전까지 날짜 선택이 표현된다. 단, 두 번째 날짜가 첫 번째 날짜보다 이전인 경우는 위의 동작이 수행되지 않는다.

  • 체크인 날짜 선택 후 체크아웃 날짜를 선택해야 할 시점에, 체크인 날짜보다 이전 날짜를 선택하게 되면 선택한 이전 날짜가 체크인 날짜로 선택되고 다시 체크아웃을 선택해야 하는 순서가 된다.
    예) 10일 선택 후 9일을 체크아웃 날짜로 선택하게 되면 9일이 체크인 날짜로 선택되면서 다시 다음 클릭이 체크아웃 날짜가 된다.

  • 같은 날짜를 두 번 클릭하면 그 날짜 한 칸만 선택된다

  • 지우기 버튼을 클릭하면 선택한 날짜가 없어지고 초기화 된다.
    ‘저장하기' 버턴을 클릭하면 저장되고 모달창이 닫히고 검색결과면이 보여진다.

[Vue] Refactoring Exception Handling

Refactoring Exception Handling

  • 예약하기 버튼을 클릭하고나서 응답데이터가 오기전까지 페이지를 이동시키지 않는다

    • 200이 떨어지면 예약페이지로 리다이렉션, 202 예약이 되었다고 하면 모달창만 닫기
  • 검색결과 화면에서 예약하기 버튼 추가 및 맵의 pin 모달창에도 예약하기 기능 추가

  • 검색결과 view 숙소 스타일링

  • 페이지네이션 스타일링

  • 모든 요청에 대한 예외처리 및 랜더링 자연스럽게 일어나게 하기

  • 컴포넌트로직 store mutation으로 이동

  • 코드 정리 및 주석 정리

  • 토큰값 로그인 처리, 버튼 스타일링

[Vue] HeaderComponent UX

HeaderComponent UX

  • 스크롤을 내리면 헤더 컴포넌트가 위로 사라진다
  • 조금만 스크롤을 올려도 헤더 컴포넌트가 나타난다

[Vue] Google Map, RoomsList render customizing

render customizing

  • 라이브러리를 이용했기 때문에 기획서와 다른 디자인이 랜더링 되고있다
  • airbnb 사이트와 최대한 비슷하게 스타일 작업을 해본다
  • 데이터가 없는 공간은 목데이터로 일단 하드코딩으로 영역을 잡아서 진행한다

[BE] be-review 요청

기능

  • 쿼리를 사용하지 않고 자바 코드로 원하는 데이터 조회 중인데 이 방식이 객체 지향적 프로그래밍이라 생각하는데 맞는지 의문

[React] 로그인 view 구현

기능

  • react, airbnb 로고 추가
  • 로그인 버튼 누르면 Main 페이지로 이동
  • 로그인 버튼 oauth 연동

[React] 예약 화면 모달

기능

  • 1박 당 가격
  • 평점
  • 선택 날짜
  • 선택 인원수
  • 숙박비 총액
  • 기타 수수료
  • 합계 총액
  • 예약 확인 버튼
  • 취소(x) 버튼

[Vue] 지역 SelectBox Filter Button

SelectBox Filter Button

  • 지역을 필터할수있는 버튼을 하나 만든다
  • 3개의 지역을 만들 예정이다
  • 지역은 필수값으로 무조건 선택해주어야지 해당 필터에 대한 검색을 진행할수있다

[Vue] List Image Lazy Loading 테스트 해보기

List Image Lazy Loading

  • faker 라이브러리로 가져온 데이터들을 이용한다
  • 사용자 디렉티브를 만들어본다(Element에 접근할때 Directive를 만들어서 사용)
  • v-for 디렉티브를 사용해서 구현
  • IntersectionObserver API를 사용
  • 컴포넌트로 바로 연결하지 말고 테스트 컴포넌트로 일단 작동이 되는지 구현본다
  • 데이터를 가져오는 시점을 체크해본다
  • 랜더링 되는 시점을 체크해본다

[Vue] Reservation Modal Component

Reservation Modal Component

스크린샷 2020-05-27 오전 2 00 29

  • 예약하기 버튼을 누르면 예약가능한 모달창이 노출된다.
  • 숙소의 요금과, 사용자가 입력한 날짜, 인원 등의 정보가 노출된다.
  • 검색결과 화면은 dimmed 처리된다.
  • x버튼을 누르면 모달창이 사라지고, 예약은 진행되지 않는다.

[Vue] Search, Reservation Exception Handling

Search Exception Handling

공통사항

  • 지역, 날짜, 인원수는 무조건 선택이 되어야 한다
  • 금액과 위도,경도 정보는 선택사항이다

Search Button

  • 검색을 하기위해서는 조건이 필요하다
  • 공통사항 조건을 만족하지 않으면 알럿메시지를 띄워주려고 한다
  • 해당 조건을 만족하면 filter된 데이터를 랜더링 해주는 페이지로 넘어간다
  • 랜더링 된 페이지에서는 어떻게 검색조건을 막아야하고, 해당페이지에서 필터를 수정하고 요청할경우 바로 랜더링이 필요하기 때문에 라우팅에 대한 예외처리도 필요하다 (ex) route.filteredPage라면 리다이렉트를 막는다)

Reservation Button

  • 예약을 하기 위해서는 조건이 필요하다
  • 공통사항 조건을 만족하지 않으면 알럿메시지를 띄워주려고 한다

[Vue] 숙소 랜더링, Google Map API 연동

기능

스크린샷 2020-05-22 오후 3 27 22

  • 숙소 이미지를 placeimg 를 이용해서 일단 불러온다
  • 숙소 리스트 컴포넌트를 생성한다
  • 숙소 각각 item 컴포넌트를 생성한다
  • 별점, 레이팅을 표시하는 컴포넌트를 생성한다
  • 구글 Map Javascript API 를 이용해본다
  • 검색 서치하는부분은 도시 3곳 정도로 하드코딩 하려고한다
  • 구글 맵에 대한 pin은 라이브러리를 최대한 이용해서 적용해본다

추가사항

  • 라이브러리를 그냥 이용해보지 말고 로직 이해와 간결하게 리팩토링 해본다.

[Vue] PriceFilter Button Component 생성

PriceFilter Button Component

스크린샷 2020-05-21 오후 3 30 35

  • 현재 날짜를 기준으로 선택한 숙소들 가격 범위를 표시하는 화면이다. 최저가부터 최고가 사이 가격 범위를 표시한다. 단, 최고가 100만원 이상 되는 경우는 “100만원 이상”으로 표시한다.
    그 아래에는 선택한 숙소들 평균 가격을 표시한다.

  • 가격 범위에 따라 그래프를 표시한다. x축은 최저-최고 가격 범위이고, y축은 숙소 개수를 의미한다.

  • 3-1. 사용자는 range slider를 이용해 가격을 설정할 수 있다.
    3-2. 슬라이더의 버튼이 양 끝에 있고, 가격 입력 박스에 최저/최고값이 표시된 상태가 디폴트이다.
    3-3. 사용자는 슬라이더의 버튼을 drag&drop을 해서 가격 범위 설정을 할 수 있다.
    3-4. 설정한 범위 내의 라인(버튼과 버튼 사이 부분)은 키컬러로, 범위 밖의 라인은 회색으로 표현된다.
    3-5. 두 개의 버튼은 서로 완전히 겹치거나 서로를 지나쳐서 이동될 수 없다. 즉, 왼쪽 버튼은 늘 최저 가격, 오른쪽 버튼은 늘 최고 가격을 표현한다.

  • 지우기 버튼을 누르면 가격 범위를 선택하지 않은 상태로 돌아간다.

  • 저장버튼을 누르면, 모달창은 닫히고, 해당 범위 숙소만 필터링해서 표시된다.

[Vue] API test / MainView initRender

 백엔드 통신

숙박 전체 데이터 요청
  • 응답
{
    "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"
                }
            ]
        }
    ]
}

[Vue] Reservation View

Reservation View

  • 모달창으로 예약하기 버튼을 누르면 예약 페이지로 넘어간다
  • 해당 사용자의 예약목록이 나타난다
  • 예약 리스트 컴포넌트가 필요하다
  • 예약 하나하나의 카드 정보가 필요하다
  • 예약을 취소할수 있는 버튼을 만든다
  • 예약을 취소하게 되면 해당 카드를 삭제 시킨다

[Vue] Person Button Component 생성

Person Button Component

스크린샷 2020-05-20 오후 1 24 43

  • 화면에 인원 제목을 표시하고, 전체 인원은 모두 0으로 표시한다.

  • 버튼을 누르면 인원이 감소하고, + 버튼을 누르면 인원이 증가한다.
    최소값은 0부터 최대값은 8명까지 선택 가능하다.

  • 더 감소할 수 없거나, 더 증가할 수 없는 상태가 되면 선택할수 없게 변한다.

  • 지우기 버튼을 누르면 처음처럼 인원을 선택하지 않은 상태로 돌아간다.

  • 저장버튼을 누르면, 모달창이 닫히고, 해당 인원으로 예약이 가능한 숙소만 필터링해서 표시해야 한다.

[Vue] Login View, component 생성

로그인 view, component를 생성

  • 로그인 View, Component 파일을 생성한다
  • 로그인 component에 oauth를 연동할 버튼을 하나 만들어둔다
  • 로그인이 성공되면 페이지 이동을 위해 라우팅작업을 시작한다

[React] 개발 환경 세팅

모듈 설치

  • typescript

  • react
  • react-router
  • redux
  • react-redux

  • webpack
  • babel
  • env
  • styled-component

{
  "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"
  }
}

[Vue] Guest Vuex에서 상태 관리

예약자수 store에서 상태관리

  • 예약 모달창에 게스트 필터 버튼을 연결해주기위해서 store에서 상태관리를 한다
  • computed, methods를 getters, mutations으로 리팩토링

[Vue] Vue-Router 설정

Vue-Router

  • vue-router를 설치하고 인스턴스에 주입해준다
  • 초기페이지는 home으로 설정한다
  • OAuth 버튼인증이 완료되면 리다이렉트 시켜줄 메인페이지를 만든다
  • NotFound 페이지를 만든다

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.