[TASK]

• GET /reservation/{houseId} path에 대한 controller 메소드 생성
• controller 관련 DTO 클래스 생성

href => origin

[TASK]

• POST /wishes/{houseId} path에 대한 controller 메소드 생성

[TASK]

• 프로젝트에 사용할 기본 숙소들의 데이터 삽입

[TASK]

• GET houses/{houseId} path에 대한 controller 메소드 생성
• 관련 DTO 생성

[TASK]

• GET /reservation path에 대한 controller 메소드 생성
• controller 관련 DTO 생성

[TASK]

• 정적인 데이터만 전달하던 위시 리스트 요청 mockup API를 실제로 동작하는 API로 구현

1. 가까운 지역 추천 기본으로 뜨게 지정
2. 자동완성 기능 추가 (카카오 API)

SearchBar

기획서

디자인 피그마

Feature list

구조

• SearchBar
  • Period
    • CheckIn
    • CheckOut
  • Price
  • Personnel
  • SearchButton
    • 돋보기 / 돋보기 + 검색
  • CloseButton (공통)

기능 : 추후 새 issue에서 구현

생각할 점

• 피그마에서는 Period, Price, Pesronnel로 각 컴포넌트를 명명함

Footer

기획서

디자인 피그마

구조

• Footer
  • NearTravel?(가까운 여행지 둘러보기)
  • AnyWhere(어디서나, 여행은 살아보는 거야!)
  • RealFooter?

기능 : 없음

구성

• NearTravel
  • flex, wrap
  • NearTravelContent 컴포넌트 8개
• AnyWhere
  • flex, justify-content : space-between
  • AnyWhereContent 컴포넌트 4개
• RealFooter
  • flex, justify-content : space-between
  • Content;; 컴포넌트 4개
    • flex, row, const Content = ({title, body}) => <>{body.map()}</>, width만 고정
  • RealRealFooter;;;

생각할 점

• 진짜 footer가 좀 더 있는데?
  • NearTravel이랑 Anywhere가 너무 main같이 생겼는데
    • 그렇다고 기능상 main이 아닌데
  • RealFooter는 절대 안되고 적절한 네이밍 고안 필요
    • 혹은 Footer 이름을 바꾸고 하위 RealFooter를 Footer로 변경
• 찐찐Footer는 네이밍을 어떻게하지;;;

[TASK]

• 정적인 데이터만 전달하던 숙소 예약 페이지 요청 mockup API를 실제로 동작하는 API로 구현

codesquad-members-2021#43

언급사항

• react-router 적용 : 나중에
• CalendarModal 캐로셀 픽셀 매직넘버 제거
• url 동적 replace 방안
• path alias 적용(util따위)
  • 라이브러리 사용이 강제
  • 인줄 알았는데 tsconfig.json 살짝만 건드리면 끝
• useMemo 적용 : 나중에 atom recoil이랑 같이
• Result Context Provider 재명명 및 구성 수정
  • recoil로 대체?

루카스

• FE 프로그래밍 요구사항
• 타입스크립트 기초
• TS 제네릭 기초

생각할 점

• 상향식이 강제겠지?
• 슬라이더
  • mouseMove와 mouseUp을 useEffect로 window나 document에 걸면 매우 자연스러움
  • 대신 브레이크? context단에서 useEffect로 처리하는 로직에서 터짐
  • 슬라이더도 context화;;;시켜서 useEffect후처리때 브레이크를 걸면 되긴하는데

[TASK]

• code와 typeCode(FE, iOS 판별을 위한 코드)를 받아 유저정보와 토큰을 저장하는 로그인 API 생성
• 서버에서 별도로 발급한 token을 전달 받아 로그아웃을 하는 API 생성

PersonnelModal

In SearchBar / Personnel

기획서

디자인 피그마

Feature list

구조

• SearchBar
  • Personnel
    • PersonnelModal

• PersonnelModal
  • Content_성인
    • ContentTitle
    • ContentBody
    • ContentCount
    • PlusButton
    • MinuseButton
  • Content_어린이
  • Content_유아

기능

• Button
  • count -- or count ++
  • 범위 0 ~ 8
  • 보호자 없는 어린이, 유아 비활성화 기능
• Focus & CloseButton
  • #13 CalendarModal 재활용
• Modal 바깥 클릭시 Off
  • CalendarModal 재활용

생각할 점

• state를 API처럼

"people": {
    "guest(성인 + 어린이)": 3,
    "kid(유아)": 2
  },

• 관리하고 이를 render하는 로직을 짜는게 낫겠지?
• 성인 / 어린이 / 유아를 따로 계산하는 객체와 게스트 / 유아로 관리하는 객체
  • 게스트/유아는 상태말고 그냥 상태를 읽어오는 변수로 계산해도 될듯?
• PriceModal 그래프
  • 이노에게 가격범위 그래프 API 데이터형태 다시 물어 볼 것
    • 답이없는데;;

[TASK]

• 정적인 데이터만 전달하던 숙소 예약 취소 요청 mockup API를 실제로 동작하는 API로 구현

[TASK]

• DELETE /reservation/{houseId} path에 대한 controller 메소드 생성

Map

In Result

기획서

디자인 피그마

Feature list

구조

• Result
  • Houses
  • Map

기능

• 드래그앤 드랍으로 지도 이동
• 지도를 움직이며 검색 체크박스
• + / - 버튼, PC의 휠 + 모바일의 줌 인식
• (추후)지도 이동에 따른 리스트 렌더링

일단 지도 API만 불러오면 지도가 다 알아서 해줄 기능 아닐까?

지도 API 분석이 목표!!

[TASK]

• 정적인 데이터만 전달하던 숙소 예약 요청 mockup API를 실제로 동작하는 API로 구현

PriceModal

In SearchBar / Price

기획서

디자인 피그마

Feature list

구조

• SearchBar
  • Price
    • PriceModal

• PersonnelModal
  • Title
  • Range
  • Body (평균)
  • Graph
    • GraphContent
    • Slider

기능

• GraphContent
  • 그리기
    • div? canvas?
    • div면 속성으로 가격을 주어서 최소<price<최대 로 background 반응 가능
    • 가로축 : 범위? 각 값마다?
      • 값마다면 그래프가 너무 각지는데다, 기울기가 정확하지 않을텐데
      • 범위면 0인 범위가 나타날때마다 너무 요동칠텐데
  • API 호출 및 해석
    • 체크인, 체크아웃 날짜가 정해지지 않았을때는?
    • 가격부터 클릭하면 전국 숙소를 전부 다 호출해야 하나?
• Slider
  • 드래그 앤 드랍
    • x좌표만 이동 가능
  • 가격의 최소, 최대값 지정

생각할 점

• 슬라이더를 움직일 방법
• 그래프를 그릴 방법
• 그래프의 x축 기준은 범위가 나아보이긴 하는데
• 상황별 요금범위 API 호출 header

[TASK]

• GET /wishes path에 대한 controller 메소드 생성
• controller 관련 DTO 클래스 생성

[TASK]

• 정적인 데이터만 전달하던 숙소 예약 상세 정보 요청 mockup API를 실제로 동작하는 API로 구현

[TASK]

• UserRepository -> UserDAO로 리팩토링

Header

기획서

디자인 피그마

구조

• Header
  • Logo
  • Menu
  • MyPage

기능

• Logo : 이미지
• Menu
  • Hover 스타일 변경
• MyPage
  • (추후) Oauth
  • (추후) 로그인 / 예약 취소, 위시리스트, 로그아웃 토글

생각할 점

• 현재 Header와 SearchBar 컴포넌트가 한 배경화면 위에 있다.
  • 둘을 감싸는 상위 컴포넌트를 만들어야 하는가
  • 그냥 absolute로 SearchBar 위치조정하면 되는거 아닌가?
• Result & Map 으로 넘어가면 Header / SearchBar / Footer 모두 사라져야한다
  • 역시 상위컴포넌트 두개로 분리하는 게 맞지않나

• UI 구조 설계
• UI 그리기

[TASK]

• /houses/charges path에 대한 controller 메소드 생성
• 관련 DTO 생성

[TASK]

• airbnb 프로젝트에 사용할 DB Schema 생성

[TASK]

• Spring boot gradle 프로젝트 생성
• Spring boot JDBC 설정
• .gitignore 생성

CalendarModal

In SearchBar / Period

기획서

디자인 피그마

Feature list

구조

• SearchBar
  • Period
    • CalenderModal
      • CalenderLeft
      • CalenderRight
      • SlideButton
      • Container - overflow: hidden;

기능

• 현재 날짜에 맞춰 달력 2개 렌더링
• 날짜 선택
  • Period의 value 조정
  • 해당 날짜 스타일 변경
  • 선택 날짜와 날짜 사이 스타일 변경
  • CheckOutInput의 value를 조정할 알고리즘
• Carousel
  • lazy loading 적용
  • 두 달 간격
• Focus & CloseButton
  • CloseButton 클릭시 초기화
• Modal 바깥 클릭시 Off
  • useEffect & window & closest

생각할 점

• Modal에서 closest 속성 써도 되나?

[TASK]

• 정적인 데이터만 전달하던 숙소 가격 범위 요청 mockup API를 실제로 동작하는 API로 구현

[TASK]

• 정적인 데이터만 전달하던 위시 요청 mockup API를 실제로 동작하는 API로 구현

[TASK]

• 리뷰받은 내용에 따라 리팩토링

Result & Header

기획서

디자인 피그마

Feature list

구조

• Result
  • Header
    • Logo
    • SearchBar
    • MyPage
  • 찐Result?
  • Map

기능 : 추후 구현

구성

• Header (기존 Header에 백그라운드 #FFF)
  • 비활성화
    • Logo
    • SearchBar : 각각의 Value만
    • MyPage
  • 활성화
    • Logo / Menu / MyPage
    • SearchBar

변경사항

// 기존 구조
<MainWrapper>
	<HeroImg />
	<Header />
	<SearchBar />
	<Footer />
</MainWrapper>

// 새로운 구조
<Header /> // <SearchBar /> 편입
{isResult ? (
  <ResultWrapper>
    <Result />
  </ResultWrapper>
) : (
  <MainWrapper>
    <HeroImg />
    <Main />  // 기존 Footer의 NearTravel, AnyWhere 편입
  </MainWrapper>
)}
<Footer /> // 기존 Footer의 Floor만 남음

• Result화면 렌더 여부를 결정할 MainContext와 검색창 상태를 보관할 SerachBarContext 생성
• Footer를 Main과 Footer로 분리, SerachBar를 Header로 편입
• Header를 isResult속성에 따라 반응형 스타일 적용

Houses

In Result

기획서

디자인 피그마

Feature list

구조

• Result
  • Houses
    • Filter
    • Title
    • List
  • Map
  • ReservationModal

• List
  • House
    • image
    • name
    • charge
    • grade
    • review
    • description
    • option

기능

• /houses API로 가져온 숙소 리스트 렌더링
• 숙소 클릭 시 /houses/{houseId} API호출, ReservationModal 렌더링

[TASK]

• `POST /houses/{houseId}' path에 대한 controller 메소드 생성
• controller 관련 DTO 클래스 생성

추가중

수정사항

커밋 1

• Map.jsx
  • 드래그마다 지도가 새로 그려지는 문제 수정
  • 커스텀오버레이 초기화 부분 수정
• ResultContext
  • SearchBarContext를 가져와서 fetchHouses의 인자

커밋 2

• House의 reivew와 options, local 데이터 렌더

커밋 3

• Calendar 캐로셀 1칸씩으로 수정

커밋 4

• Slider 매직넘버제거

[TASK]

• 숙소 검색 API와 범위 내 숙소 가격 API의 request body 삭제, query params로 변경

[TASK]

• 숙소 예약 페이지 요청 API의 response 수정
• 숙소 예약 요청 API의 request 수정

[TASK]

• /houses path에 해당하는 controller 생성
• 관련 DTO 클래스 생성

[TASK]

• 정적인 데이터만 전달하는 mockup API를 실제로 동작하는 API로 구현

[TASK]

• iOS 요구사항에 맞춰 숙소 상세 페이지 요청 API 생성

[TASK]

• 정적인 데이터만 전달하던 숙소 예약 리스트 요청 mockup API를 실제로 동작하는 API로 구현

[TASK]

• request가 발생 될 때 method, body가 로그에 남도록 설정
• 리액트에서 API를 사용할 수 있도록 cors 설정

codesquad-members-2021#1

언급사항

• Anywhere의 key값
  • 포기 : 일일이 고유의 key값 생성 너무 번거롭다
• Footer 전반의 데이터 처리 : json/data.json에 몰빵, 추후 재명명 필요
• Day 로직 분리 : 추후 다시 할 것
• delay 유틸화
• setState() 상수들 콜백처리 X
• personnel.jsx의 man/kid/baby useReducer 처리 : 포기 나중에 하자
• Modal off 거는 useEffect 단에서 cleanUp작업

그래프

• graphBar의 height도 10px이 아니라 동적 할당
• props가 너무많다! 포장을 하든 context를 이용하든 reducer와 병행하든 처리 필요
  • 포장 쬐끔 했다... 추후 다시 처리할 것
• unit과 최대값 이슈 : 픽셀을 300으로, 최대-최소가 300으로 나누어떨어지게;; 해야 정상작동, 예외조항필요
• CloseButton에 이벤트

슬라이더

• transform 적용 : 여전히 버그 존재
• 배민찬 프로젝트때 소수점 만드는 함수 가져와서 유틸에 넣기

그 외 개판난 코드들 조정

MyPage

In Header

기획서

디자인 피그마

Feature list

구조

• Header
  • MyPage
    • 로그인
      • Oauth
    • (로그인) 예약취소
    • (로그인) 위시리스트
    • (로그인) 로그아웃

기능

• Modal?
  • MyPage 토글
  • 로그인상태를 파악해 목록 변경
• OAuth
  • 감지 했을 때만 API호출 : 현재 매번 주소에서 ?code 가 있는지 확인
  • API호출 후 response 저장, 리다이렉트 : 새로고침때마다 ?code가 있다면 API호출, 저장
• (추후) 로그아웃 : 현재 그냥 localhost:3000으로 다시 들어감
  • userInfo state만 비워버려도 되지않을까
• (추후) 위시리스트
  • 안할듯?

생각할 점

• react-router 안쓰고 어떻게 못하나
  • window.location 활용? useEffect로 상태 관측가능한가
  • 쿼리?값은 가져올수 있는데 변경 시점을 감지하는 게 가능할까
  • 현재 매 번 window.location.search로 url을 조사하고, ?code값이 있을때만 로그인 API호출
• react-router를 쓴다면
  • /login 으로 페이지를 만든다 치고, 컴포넌트를 반환할텐데 그냥 투명div로 두고 API호출만 해야하나
  • useEffect로 쿼리? 변경만 감지하는게 가능할까? []넣고 첫호출? /login페이지로 들어갔을때 API호출 + 리다이렉트 처리 해야하나
  • /login으로 만든다치면 이노한테 다시 api수정요청해야함