Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Team-22][BE][Lee&벅픽] - 프로젝트 초기 설정 및 Mockup API 제공, 숙소 검색 기능 #43

Merged
merged 9 commits into from
May 25, 2022

Conversation

bugpigg
Copy link

@bugpigg bugpigg commented May 25, 2022

안녕하세요 Jack!
Team-22 Lee & 벅픽 입니다.

📙작업내역

  • 스프링 부트 프로젝트 초기 설정
  • 포스트 맨을 활용한 Mockup API 제공
  • 숙소 검색 기능 초기 구현

❓질문사항

  • 숙소 검색 기능을 구현하면서, 검색 조건이 여러 개이다 보니 JPA를 통해 필터링하는 것은 DB 접근이 너무 많아질 것이라 생각해 Repository에서 모든 숙소 정보를 List로 받아온 후에 자바 코드 단에서 필터링하는 로직으로 구현하였는데요. 필터링 로직 등도 다소 복잡한 느낌입니다. 추후 엘라스틱 서치 등을 사용하면 여러 조건으로 깔끔하게 검색을 구현할 수 있게 되는지 궁금합니다!

  • 숙소에서 예약된 날짜를 DB에 저장할때, 어떤 방식을 활용하여 저장해야하는지 궁금했습니다.
    현재는 자바의 Map 컬렉션을 통해 해당 날짜의 예약 가능 여부를 저장하고 있습니다.

앞으로 잘 부탁드립니다. 감사합니다~!

bugpigg and others added 9 commits May 23, 2022 17:19
* [#4] Feat: 숙소 검색 결과 반환 컨트롤러 생성

- 숙소 검색 쿼리 파라미터를 받아 해당하는 숙소의 검색 결과를 반환하는 컨트롤러를 생성하였습니다.

* [#4] Feat: 숙소 검색 결과 반환 DTO 생성

- 숙소 검색 결과 DTO 를 생성하였습니다.

* [#4] Feat: 숙소 예약 폼 반환 컨트롤러 작성

- AccommodationController의 getReseverForm() 메서드로 숙소 예약 폼 반환.

* [#4] Feat: 숙소 예약 폼 Response DTO 작성

- ReserveFormResponseDto를 작성해 숙소 예약 폼 GET 요청 시 반환되는 DTO 작성.

* [#4] Feat: 숙소 예약 컨트롤러 작성

- AccommodationController의 postReservation() 메서드로 숙소 예약 요청.

* [#4] Feat: 숙소 예약 Request DTO 작성

- ReserveRequestDto를 작성해 숙소 예약 POST 요청시 DTO 역할을 수행.

* [#4] Fix: 숙소 검색 결과 반환 컨트롤러 수정

- 기존의 SearchQueryResponseDto 객체로 Response를 반환하던 형식을, SearchQueryResponseDto 리스트 형식으로 반환하게 수정.

* [#4] Fix: 숙소 예약 폼 반환 컨트롤러 수정

- 반환형 제너릭 DTO 수정.

Co-authored-by: Senglee Choi <tmdfl1027@gmail.com>
* [#12] Feat: 숙소 검색 Service 로직 설계

- AccommodationService 클래스 작성
- 숙소 검색 로직 설계. DB에는 체크인 날짜를 기준으로 한 번 접근하고, 이후에는 자바 코드로 필터링하도록 구현.

* [#12] Feat: AccommodationRepository 클래스 추가

- 추후 JPA와 연동하여 설계 예정.

Co-authored-by: Senglee Choi <tmdfl1027@gmail.com>
* [#13] Feat: Accommdation 도메인 추가

- Accommodation 도메인 클래스를 추가하였습니다.

* [#13] Fix: AccommodationService 오타 수정

- AccommodationService 클래스의 오타수정을 하였습니다.
* [#18] Feat: 검색 요청 DTO 추가

SearchQueryRequestDto 추가.

* [#18] Refactor: 쿼리 파라미터를 SearchQueryRequestDto로 매핑

@ModelAttribute를 사용해 검색 시 들어오는 쿼리 파라미터를 Dto로 바로 매핑.
이전에 Map<String, String>으로 받아 자료형 변환하던 코드를 삭제함.

* [#18] Feat: 리퀘스트 DTO 추가에 따른 SearchQueryResponseDto 변경

of() 메서드를 추가해 서비스에서 Accommodation을 응답 DTO로 변환할 수 있도록 함.
* [#23] Style: DTO 클래스 코드 포맷팅 수정

- DTO 클래스의 코드 포맷팅을 수정하였습니다.

* [#23] Style: AccommodationController 클래스의 코드 포맷팅 수정

* [#23] Refactor: 서비스 및 레포지토리 클래스 리팩토링

- AccommodationService 클래스 코드 포맷팅 수정 및 예약 날짜 필터링 로직 추가하였습니다.
- AccommodationRepository 클래스 코드 포맷팅 및 정의한 findByDateBetween() 메서드를 제거하였습니다. 이는 자바 코드 기반으로 예약 날짜를 필터링하게 수정하였기 때문입니다.

* [#23] Refactor: Accommodation 도메인 클래스 리팩토링

- Accommodation 클래스에 예약 날짜 필터링 메소드 추가 및 코드 포맷팅을 수정하였습니다.

* [#23] Refactor: PeopleConstraint 클래스 추가

- 기존의 Map 컬렉션으로 관리되었던 수용인원 정보에 대하여,PeopleConstraint 클래스를 통해 관리되도록 리팩토링 하였습니다.
@bugpigg bugpigg added the review-BE Improvements or additions to documentation label May 25, 2022
@bugpigg bugpigg requested a review from guswns1659 May 25, 2022 08:31
Copy link

@guswns1659 guswns1659 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

안녕하세요 : )
이번 프로젝트 리뷰어를 맡은 Jack입니다.
리뷰는 더 나은 방향을 결정하기 위해서 하는 것이지 결코 정답은 없습니다 ㅎㅎ 잘 취사선택 해주세요 👍
여러분과 제가 많은 것을 얻어가는 리뷰가 되길 바라겠습니다.

제가 리뷰를 하면서 몇 가지 단어를 사용할텐데 아래와 같은 의미를 담고 있습니다.

  • ask : 의미대로 의문점이 생겼을 때 주로 사용하며, 반드시 답변할 필요는 없습니다 .상황에 맞게 답변해주시면 됩니다.
  • nit : 사소한 포인트에 대한 리뷰이며, 이 방법도 좋은 것 같습니다 와 같은 의미.
  • ditto : 이전에 한번 나온 동일한 내용의 리뷰지만 반복되는 경우 간략하게 표현할 때 사용.

Copy link

@guswns1659 guswns1659 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

수고하셨습니다.
남긴 코멘트들 한번 고민해보시고 취사선택해서 다음 P.R에 반영해주세요 👍

README.md Show resolved Hide resolved
README.md Show resolved Hide resolved
Comment on lines +19 to +25
List<Accommodation> accommodations = accommodationRepository.findAll();
return accommodations.stream()
.filter(ac -> ac.isAvailableByDate(requestDto.getCheckinDate(),
requestDto.getCheckoutDate()))
.filter(ac -> ac.isAvailableByPrice(requestDto.getMinimumPrice(),
requestDto.getMaximumPrice()))
.filter(

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이곳이군요 : )

숙소 검색 기능을 구현하면서, 검색 조건이 여러 개이다 보니 JPA를 통해 필터링하는 것은 DB 접근이 너무 많아질 것이라 생각해 Repository에서 모든 숙소 정보를 List로 받아온 후에 자바 코드 단에서 필터링하는 로직으로 구현하였는데요. 필터링 로직 등도 다소 복잡한 느낌입니다. 추후 엘라스틱 서치 등을 사용하면 여러 조건으로 깔끔하게 검색을 구현할 수 있게 되는지 궁금합니다!

질문 답변 여기서 할게요.
우선 잘하셨습니다 👍 내가 처한 상황에서 어떻게든 우선 요구사항 구현하는게 중요합니다.

JPA로 필터링을 한다는 게 반드시 DB 쿼리 요청 횟수가 늘어나진 않습니다. N+1과 같은 케이스라면 쿼리가 많아 질 수 있지만, 이에 대한 대응도 존재합니다. fetch join 등..
만약 조회 쿼리가 복잡하다면 @query 어노테이션을 이용해 직접 쿼리를 작성할 수 있고 이런 경우는 하나의 쿼리만 요청하도록 조정할 수 있습니다. 그래서 직접 쿼리를 작성해보는 것도 어떨까요?

애플리케이션 서버에서 필터로직을 처리하면 아래와 같은 단점이 존재합니다.
데이터가 많아지면 초기에는 1개 요청에 1초 이내 였지만 추후 1개 요청에 10초씩 걸릴 수 있죠. 이 의미는 한 개 쓰레드가 처리하는 속도가 느려진다는 의미입니다. 그러면 스프링mvc에서는 쓰레드의 개수를 정해놓고 요청을 처리하기 때문에 금방 쓰레드가 고갈되고 요청은 많이 밀릴겁니다. 이런 현상을 쓰레드 풀 헬 현상이라고 부르기도 합니다.


엘라스틱 서치는 지금처럼 숙박을 여러 조건으로 필터해서 조회할 때보다는 숙박을 검색할 때 장점이 크게 발휘합니다. 엘라스틱 서치는 예를 들어, 구글에서 내가 키워드를 넣어서 엔터치면 그 단어를 포함한 컨텐츠를 보여줄 때와 같은 상황 주로 사용합니다. 본문 검색의 의미라 생각하시면 됩니다. 이번 프로젝트에서는 숙박의 설명이나 키워드만으로 특정 숙박들을 검색하고 싶을 대 사용하시면 됩니다.

예를 들어, "제주도 오션뷰" 라고 검색하면 이런 키워드를 가진 숙박 목록이 뜨는 기능.

질문하신 필터를 걸어서 조회를 깔끔하게 하고 싶다면 QueryDsl도 하나의 방법인데, 지금은 JPA 사용하시는 게 맞습니다. 추후에 한번 검색해보세요 ; )

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

상세한 코멘트 감사합니다~!
관련하여 두 가지 질문이 있습니다!

  • 만약 DB에 접근하여 필터링 하는 과정도, Application Sever의 필터링 과정과 같은 시간이 걸린다면 이와 같은 상황도 쓰레드를 계속 점유하고 있는 것 같은데 그렇다면 이도 쓰레드 풀 헬 현상에 취약한것이 아닌지 궁금합니다.
  • 쿼리를 날린다면 지금 생각하기로는 아무래도 where 절에 조건을 병렬하는 형태이지 않을까 싶은데요.
    저희가 고민했던 부분은 쿼리의 개수 자체보다는 인원수, 가격, 예약 등 Accommodation의 여러 컬럼들의 정보를 가지고 where 절에 and로 병렬해서 검색하다 보면, 이 컬럼들이 primary key 값들이 아니니 결국 where 절의 각 조건마다 DB 풀 스캔을 하게 되는 건가… 싶은 부분이었습니다.
    그래서 DB 검색을 최소화하고 어플리케이션에서 나머지 필터링을 처리하려고 했던 것이고요!
    DB 수업 때 얕게만 이해한 것이라 실제로는 어떤지 잘 모르겠네요... where 절에 조건을 여러 개 주더라도 검색 효율에 큰 지장이 없을까요?

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@bugpigg

질문 좋네요 👍

만약 DB에 접근하여 필터링 하는 과정도, Application Sever의 필터링 과정과 같은 시간이 걸린다면 이와 같은 상황도 쓰레드를 계속 점유하고 있는 것 같은데 그렇다면 이도 쓰레드 풀 헬 현상에 취약한것이 아닌지 궁금합니다.

네네 맞습니다. 만약 DB의 필터링도 늦어진다면 쓰레드가 밀리니 쓰레드 풀 헬 현상이 발생합니다. 다만, 그런 일이 발생하지 않도록 ㅎㅎ 인덱스나 파티션 등을 잘 이용해야겠죠. 그래서 현재와 달리 데이터가 상당히 많은 상황이라 가정해보면 "앱 서버에서 필터링 한다" vs "DB에서 필터링 한다" 조건에서 DB를 추천한다는 코멘트였고, 사실 저라면 DB한테 조회 쿼리 맡길 거 같아요 : ) DB가 데이터 조회하라고 만들어진 제품이니까 ㅎㅎ

쿼리를 날린다면 지금 생각하기로는 아무래도 where 절에 조건을 병렬하는 형태이지 않을까 싶은데요. .....

먼저 드는 생각은 DB 풀스캔 한다고 걱정하실 필요 없을 거 같아요. ㅎㅎ 현재 프로젝트 요구사항이 성능을 개선하라는 것보단 숙박 예약 업소를 구현이니까요. 지금은 당연히 인덱스가 없으니 풀스캔을 할겁니다. mock 데이터 양이 어느정도 일지 모르겠지만 DB한테 맡겨보는 게 어떨까 싶습니다.
만약 제 조언대로 DB 쿼리로 필터하도록 변경했는데 성능이 느리다면 인덱스를 추가하는 방법을 고민하거나 다시 애플리케이션 로직에서 처리하도록 변경할 수 있겠죠 ㅎㅎ
저는 DB라는 제품이 데이터를 쌓고 조회하도록 만들어진 제품이니까 우선 그 역할에 맞게 써보는 걸 추천드립니당.
물론 애플리케이션에서 처리하셔도 됩니다! 팀원끼리 합의한 대로 하세요 : )

+) 요즘 다른 팀 P.R 알람도 엄청와서 제가 놓칠 수 있으니 만약 답장이 늦어지면 슬랙으로 연락주세용

@guswns1659 guswns1659 merged commit b6ca1bf into codesquad-members-2022:team-22 May 25, 2022
SangHwi-Back pushed a commit that referenced this pull request May 31, 2022
chore: 사용하지 않는 주석 제거
choisohyun pushed a commit that referenced this pull request Jun 3, 2022
* Feature/3 (#26)

* rename: gnb 폴더 생성하여 관련 컴포넌트 이동
   - styled -> customStyled 로 변경 적용
* refactor: gnb 컴포넌트 css 수정
* feat: main banner UI 구현
* refactor: gnb 컴포넌트 hover 및 cursor pointer 적용

* Feature/2 (#27)

* chore: mui 버전 통일

* feat: 글로벌 스타일 추가

* feat: SearchBar 컴포넌트 style 작성 및 이벤트 추가

* Feature/alias (#28)

* chore: alias 경로 설정을 위한 react-app-rewired 설치 및 설정파일 생성
* refactor: 절대경로 반영 (index, app, gnb, main-banner)
* fix: search input width 고정

* Feature/4 (#29)

* feat: calender page component 구현
* feat: 달력 월~일요일 부분 컴포넌트 구현
* feat: 해당 연-월에 맞는 날짜 영역 컴포넌트 구현
* feat: 이전, 다음 버튼 컴포넌트 및 클릭 기능 구현
* feat: calender 컴포넌트 구현
   - 보여줄 달력 개수를 정하는 page 옵션
   - curData 기반으로 page 만큼의 달력 렌더링
* chore: 브라우저 확인용 App 에 calender 반영
* feat: calender 관련 상태 context 사용하여 분리 및 provider 컴포넌트 생성
   - 불필요한 주석 제거
* refactor: 컴포넌트 이름 변경, DatesOfMonth 에서 DateBox 컴포넌트 분리
* feat: DateBox 컴포넌트 구현
   - 클릭 시 checkIn, checkOut 상태 변경
   - checkIn, checkOut 날짜에 따라 동적 css 적용
* chore: 오타 수정, app.js 에 provider 적용

* feat: header 컴포넌트 생성
- gnb, search-bar, calender를 header 하위 컴포넌트로 수정

* Feature/30 (#32)

* refactor: 캘린더 체크인/체크아웃 모드와 date box 체크 위치 상태를 나타내는 문자열을 상수화
* refactor: 컴포넌트 별 데이터 가공 유틸 함수를 컴포넌트 밖으로 분리
* refactor: Date box 내부에 있던 날짜 비교용 checkInTime, checkOutTime 을 콘텍스트 provider 로 이동
   - checkInDate, checkOutDate 변수명 변경 -> checkInInfo, checkOutInfo
   - checkIn, checkOut, current 변수명 변경 -> checkInTime, checkOutTime, currentTime

* refactor: 캘린더 month 빈배열 생성 시 0 -> Null 로 변경

* Feature/31 (#33)

* refactor: 코드 리뷰 반영
- visibility 속성 display로 변경
- bool 타입 결과값 함수 중복 검사 제거
- SearchMenu 컴포넌트 div 태그로 변경

* feat & refactor: SearchBar 컴포넌트 컨텍스트 추가
- props로 내려주던 상태 context로 관리 하도록 함

* feat : 검색바 반응형 컴포넌트로 수정

* refactor: isFocus를 상태 관리에서 제외
- currentInput의 상태를 통해 얻을 수 있도록 함

* feat&refactor: Header 컴포넌트 반응형으로 수정
- GNB, MainBanner, SearchBar 모두 적용

* feat: 체크인, 체크아웃 인풋 영역 클릭 시 캘린더 모달 팝업 기능 추가

* feat: Header 컴포넌트 fixed 속성 추가

* feat: 모달창 클릭시 검색바 blur가 적용되지 않게 함

* Feature/34 (#36)

* feat: 체크인-체크아웃 사이 날짜 1일과 마지막일 전후 음영 반영
   - DatesOfMonth 컴포넌트 last date 월이 안맞는 오류 수정
     : getDate() 는 현재달 인덱스에 date 0을 주면 이전달 마지막날 반환
* feat: 현재 날짜 이전 날짜 선택 불가 및 회색 표시

* feat: 검색바 체크인, 체크아웃 날짜 출력 기능 추가 (#38)

* feat: 검색바 체크인, 체크아웃 날짜 출력 기능 추가
- 캘린더에서 선택한 날짜를 출력하도록 함

* Feature/20 (#40)

* refactor: ResetButton 동적으로 추가하도록 수정
- input요소의 value 유무에 따라 추가, 삭제

* feat: ResetButton 클릭 이벤트 추가
- 버튼 클릭시 input value 초기화
- 검색바가 포커스되어 있을 때만 버튼이 노출되도록 수정

* feat: 검색바 캘린더 체크인 체크아웃 상태 연동 (#41)

* fix: 포커스 이벤트 에러 수정
- ResetButton 포커스 시에만 노출되도록 수정
- 검색바 포커스 시 세로로 늘어나는 오류 수정

* fix: 캘린더 날짜 선택 오류 수정
- 체크아웃을 먼저 선택 후 체크인 선택 시 체크아웃보다 뒷날이어도 선택되는 오류 수정
- DateBox 컴포넌트 내 handle click 로직 수정

* feat: 캘린더 모달 선택 시 보여지는 달 업데이트
- 체크인 날짜 있는 경우 체크인 달로 시작
- 없는 경우 현재 달로 시작

* fix: 캘린더 토요일과 날짜 정렬

* Feature/15 (#42)

* refactor: 모달 배경 관련 스타일 별도 컴포넌트로 분리

* rename: custom-styled-component 폴더 utils 하위로 이동
- Header.js => Header.jsx 로 변경

* rename : calender 폴더 modal 하위 폴더로 이동
- 절대 경로 설정 및 적용

* refactor: ModalContainer 스타일 theme 사용 하도록 수정

* feat: Personnel 모달 컴포넌트 추가

* Feature/7 (#43)

* rename: context 폴더 분리
- provider 모두 context 폴더 하위로 이동

* feat: 인원 설정 모달 컨트롤러 버튼 컴포넌트 분리

* feat: 검색바 인원 상태 관리를 위한 관련 상수 추가

* feat: 검색바 인원 설정 모달 인원 추가, 인원 삭제 기능 추가

* feat: 검색바에 선택된 인원 출력 기능 추가 (#44)

* feat: 검색바에 선택된 인원 출력 기능 추가

* Feature/11 (#45)

* feat: 성인 없이 어린이, 유아 인원 추가 방지 기능 추가

* fix: 성인 인원을 줄일 수 없는 상황에 버튼 비활성화 색상 스타일 적용

* refactor: ResetButton 컴포넌트 onClick 핸들러 props로 받도록 수정

* feat: 인원 설정 초기화 기능 추가

* refactor&style: 중복코드 삭제, 줄띄움

* fix: 검색바 초기화 버튼 유무따라 크기가 변경되는 부분 수정
- 검색 버튼 아이콘 컬러 변경

* fix: 검색바 사이즈 줄면 초기화 버튼이 검색 버튼에 가리는 오류 수정

* Feature/46 (#47)

* refactor: 중복 코드 함수화, StyledExpandBackground 분기문
   - info 를 받아 time 으로 바꿔주는 함수
   - 체크인-체크아웃 사이에 있고, 1일이거나 마지막날일 경우에만 StyledExpandBackround 컴포넌트 생성

* feat: calender provider 에 prev date, next date 추가
   - 불필요한 useEffect 코드 제거

* feat: calender 컴포넌트에서 page 생성 부분을 calender carousel 컴포넌트로 이동
   - calender position 상태 생성

* chore: calender page width 수정(336 -> 350px)

* feat: 이전, 다음달 이동 버튼 로직 수정
   - curDate 를 직접 바꾸는 방식에서 calender position 만 바꿔주는 방식
   - calender position 에 따라 carousel에서 translateX 후 curDate 변경

* feat: Calender Carousel 컴포넌트 구현
   - prevDate, curDate, nextDate 기준으로 각각 Calender page wrapper 로 묶음
   - calender display 영역 내에서 moveArea 를 이동

* fix: 검색바 모달 관련 인풋창 아래에 나타나도록 위치 수정

Co-authored-by: bangdler <90082464+bangdler@users.noreply.github.com>
Co-authored-by: bangdler <zbthz90@gmail.com>
sabgilhun pushed a commit that referenced this pull request Jun 6, 2022
[Android] [히데_라이너스] 가격 그래프 화면 구현 완료
yeonnseok pushed a commit that referenced this pull request Jun 6, 2022
[BE] - GET /api/rooms/{room_id} 기능 구현
hanchang97 added a commit that referenced this pull request Jun 8, 2022
[Android] feat : 다이얼로그 뷰 구현
wooody92 pushed a commit that referenced this pull request Jun 9, 2022
…dattions_by_keywords_api

[Backend] [43] 검색 조건에 따른 숙소 목록 조회 기능 구현
torch-ray pushed a commit that referenced this pull request Jun 9, 2022
…lementation

Feature ios/#43 calendar implementation
torch-ray pushed a commit that referenced this pull request Jun 9, 2022
naneun pushed a commit that referenced this pull request Jun 10, 2022
[iOS] 검색 창에 단어를 입력한 상태에서 지우기 버튼을 누르면 단어를 초기화 할 수 있음
choisohyun pushed a commit that referenced this pull request Jun 12, 2022
* Feature/3 (#26)

* rename: gnb 폴더 생성하여 관련 컴포넌트 이동
   - styled -> customStyled 로 변경 적용
* refactor: gnb 컴포넌트 css 수정
* feat: main banner UI 구현
* refactor: gnb 컴포넌트 hover 및 cursor pointer 적용

* Feature/2 (#27)

* chore: mui 버전 통일

* feat: 글로벌 스타일 추가

* feat: SearchBar 컴포넌트 style 작성 및 이벤트 추가

* Feature/alias (#28)

* chore: alias 경로 설정을 위한 react-app-rewired 설치 및 설정파일 생성
* refactor: 절대경로 반영 (index, app, gnb, main-banner)
* fix: search input width 고정

* Feature/4 (#29)

* feat: calender page component 구현
* feat: 달력 월~일요일 부분 컴포넌트 구현
* feat: 해당 연-월에 맞는 날짜 영역 컴포넌트 구현
* feat: 이전, 다음 버튼 컴포넌트 및 클릭 기능 구현
* feat: calender 컴포넌트 구현
   - 보여줄 달력 개수를 정하는 page 옵션
   - curData 기반으로 page 만큼의 달력 렌더링
* chore: 브라우저 확인용 App 에 calender 반영
* feat: calender 관련 상태 context 사용하여 분리 및 provider 컴포넌트 생성
   - 불필요한 주석 제거
* refactor: 컴포넌트 이름 변경, DatesOfMonth 에서 DateBox 컴포넌트 분리
* feat: DateBox 컴포넌트 구현
   - 클릭 시 checkIn, checkOut 상태 변경
   - checkIn, checkOut 날짜에 따라 동적 css 적용
* chore: 오타 수정, app.js 에 provider 적용

* feat: header 컴포넌트 생성
- gnb, search-bar, calender를 header 하위 컴포넌트로 수정

* Feature/30 (#32)

* refactor: 캘린더 체크인/체크아웃 모드와 date box 체크 위치 상태를 나타내는 문자열을 상수화
* refactor: 컴포넌트 별 데이터 가공 유틸 함수를 컴포넌트 밖으로 분리
* refactor: Date box 내부에 있던 날짜 비교용 checkInTime, checkOutTime 을 콘텍스트 provider 로 이동
   - checkInDate, checkOutDate 변수명 변경 -> checkInInfo, checkOutInfo
   - checkIn, checkOut, current 변수명 변경 -> checkInTime, checkOutTime, currentTime

* refactor: 캘린더 month 빈배열 생성 시 0 -> Null 로 변경

* Feature/31 (#33)

* refactor: 코드 리뷰 반영
- visibility 속성 display로 변경
- bool 타입 결과값 함수 중복 검사 제거
- SearchMenu 컴포넌트 div 태그로 변경

* feat & refactor: SearchBar 컴포넌트 컨텍스트 추가
- props로 내려주던 상태 context로 관리 하도록 함

* feat : 검색바 반응형 컴포넌트로 수정

* refactor: isFocus를 상태 관리에서 제외
- currentInput의 상태를 통해 얻을 수 있도록 함

* feat&refactor: Header 컴포넌트 반응형으로 수정
- GNB, MainBanner, SearchBar 모두 적용

* feat: 체크인, 체크아웃 인풋 영역 클릭 시 캘린더 모달 팝업 기능 추가

* feat: Header 컴포넌트 fixed 속성 추가

* feat: 모달창 클릭시 검색바 blur가 적용되지 않게 함

* Feature/34 (#36)

* feat: 체크인-체크아웃 사이 날짜 1일과 마지막일 전후 음영 반영
   - DatesOfMonth 컴포넌트 last date 월이 안맞는 오류 수정
     : getDate() 는 현재달 인덱스에 date 0을 주면 이전달 마지막날 반환
* feat: 현재 날짜 이전 날짜 선택 불가 및 회색 표시

* feat: 검색바 체크인, 체크아웃 날짜 출력 기능 추가 (#38)

* feat: 검색바 체크인, 체크아웃 날짜 출력 기능 추가
- 캘린더에서 선택한 날짜를 출력하도록 함

* Feature/20 (#40)

* refactor: ResetButton 동적으로 추가하도록 수정
- input요소의 value 유무에 따라 추가, 삭제

* feat: ResetButton 클릭 이벤트 추가
- 버튼 클릭시 input value 초기화
- 검색바가 포커스되어 있을 때만 버튼이 노출되도록 수정

* feat: 검색바 캘린더 체크인 체크아웃 상태 연동 (#41)

* fix: 포커스 이벤트 에러 수정
- ResetButton 포커스 시에만 노출되도록 수정
- 검색바 포커스 시 세로로 늘어나는 오류 수정

* fix: 캘린더 날짜 선택 오류 수정
- 체크아웃을 먼저 선택 후 체크인 선택 시 체크아웃보다 뒷날이어도 선택되는 오류 수정
- DateBox 컴포넌트 내 handle click 로직 수정

* feat: 캘린더 모달 선택 시 보여지는 달 업데이트
- 체크인 날짜 있는 경우 체크인 달로 시작
- 없는 경우 현재 달로 시작

* fix: 캘린더 토요일과 날짜 정렬

* Feature/15 (#42)

* refactor: 모달 배경 관련 스타일 별도 컴포넌트로 분리

* rename: custom-styled-component 폴더 utils 하위로 이동
- Header.js => Header.jsx 로 변경

* rename : calender 폴더 modal 하위 폴더로 이동
- 절대 경로 설정 및 적용

* refactor: ModalContainer 스타일 theme 사용 하도록 수정

* feat: Personnel 모달 컴포넌트 추가

* Feature/7 (#43)

* rename: context 폴더 분리
- provider 모두 context 폴더 하위로 이동

* feat: 인원 설정 모달 컨트롤러 버튼 컴포넌트 분리

* feat: 검색바 인원 상태 관리를 위한 관련 상수 추가

* feat: 검색바 인원 설정 모달 인원 추가, 인원 삭제 기능 추가

* feat: 검색바에 선택된 인원 출력 기능 추가 (#44)

* feat: 검색바에 선택된 인원 출력 기능 추가

* Feature/11 (#45)

* feat: 성인 없이 어린이, 유아 인원 추가 방지 기능 추가

* fix: 성인 인원을 줄일 수 없는 상황에 버튼 비활성화 색상 스타일 적용

* refactor: ResetButton 컴포넌트 onClick 핸들러 props로 받도록 수정

* feat: 인원 설정 초기화 기능 추가

* refactor&style: 중복코드 삭제, 줄띄움

* fix: 검색바 초기화 버튼 유무따라 크기가 변경되는 부분 수정
- 검색 버튼 아이콘 컬러 변경

* fix: 검색바 사이즈 줄면 초기화 버튼이 검색 버튼에 가리는 오류 수정

* Feature/46 (#47)

* refactor: 중복 코드 함수화, StyledExpandBackground 분기문
   - info 를 받아 time 으로 바꿔주는 함수
   - 체크인-체크아웃 사이에 있고, 1일이거나 마지막날일 경우에만 StyledExpandBackround 컴포넌트 생성

* feat: calender provider 에 prev date, next date 추가
   - 불필요한 useEffect 코드 제거

* feat: calender 컴포넌트에서 page 생성 부분을 calender carousel 컴포넌트로 이동
   - calender position 상태 생성

* chore: calender page width 수정(336 -> 350px)

* feat: 이전, 다음달 이동 버튼 로직 수정
   - curDate 를 직접 바꾸는 방식에서 calender position 만 바꿔주는 방식
   - calender position 에 따라 carousel에서 translateX 후 curDate 변경

* feat: Calender Carousel 컴포넌트 구현
   - prevDate, curDate, nextDate 기준으로 각각 Calender page wrapper 로 묶음
   - calender display 영역 내에서 moveArea 를 이동

* fix: 검색바 모달 관련 인풋창 아래에 나타나도록 위치 수정

* Feature/15 1 (#49)

* feat: Price 컴포넌트 생성
- Title 컴포넌트 재사용을 위해 분리

* refactor: 검색바 블러 이벤트 대신 dim레이어 클릭 시 모달이 사라지도록 수정
- e.preventDefault 때문에 range input의 thumb가 움직이지 않아 수정

* feat: 요금 설정 모달 요금별 데이터 그래프 추가
- 임시 데이터 추가

* feat: 요금 범위 설정 슬라이더 추가

* chore: chart.js 설정 추가

* fix: MainBanner 이미지 연결 오류 수정

* feat: 요금 모달 세부 텍스트 출력

* feat: 검색바에 요금 상태 출력
- 초기화 버튼 이벤트 핸들러 추가

* fix: merge 후 모달창이 관련 인풋창 아래에 위치하지 않는 오류 수정

* refactor: 인원 모달 컨트롤 버튼 하나의 컴포넌트로 합침
- type으로 add, remove 구분하도록 props 추가

* refactor: calender Prev Button, Next Button 을 통합한 Calender Button 구현 (#50)

Co-authored-by: moon-yerim <75062526+moonyerim2@users.noreply.github.com>

* refactor: 모달창 클릭 시 닫히지 않도록 하는 기능 수정
- dim레이어 삭제
- Node.contains를 사용한 방법으로 수정

Co-authored-by: bangdler <90082464+bangdler@users.noreply.github.com>
Co-authored-by: bangdler <zbthz90@gmail.com>
kimyouknow added a commit that referenced this pull request Jun 12, 2022
* [Refactor] 캘린더 우측 클릭시 렌더링 리팩토링 (#30)

* refactor: transitionEnd를 활용하여 캘린더 캐러셀 로직 리팩토링, 캘린더 보이는 개수 변수화하여 자동화

* feat: 다음 달력 조회시 년도 넘어가면 년도 최신화, 캐러셀 버튼 디바운스 적용

* feat: 양방향 슬라이더 구현 (#35)

* [Refactor] 캘린더 좌측 클릭시 렌더링 및 리팩토링  (#34)

* Refactor: 초기렌더링 에러 수정 및 years,months 데이터 통합

getNextMonthsNyears() -> getMonthsWithYear()

years, month -> calendarHeaderDate

* Feat: 좌측 버튼 캐러셀 로직 구현

* Refactor: 달을 기준으로 년도를 생성하는 함수 분리 - getMonthsWithYear()

* Refactor: 좌우로직을 하나의 상태와 함수로 관리

* Refactor: Calendar모달에서 캐러셀 분리

* Refactor: 초기값 부모컴포넌트로 위임

* Chore: styled-component에 ts적용

* Fix: styled-components type에러 수정

* [Design & Refactor] 가격 차트 디자인 요소 추가 & Multi input Ranger 분리 (#39)

* Refactor: 슬라이더와 차트 로직 분리

* Refactor: 차트에서 멀티레인저 분리

* Design: 양방향 레인저 input태그 겹치는 방식으로 변경

* Refactor: MultiRangerSlider컴포넌트 input태그 속성처럼 변경

* Feat: PriceInfo컴포넌트

- 가격범위
- 평균 1박 요금

* Design: 가격 차트 디자인

* Design: multiranger 위치 조정

* Fix: 차트 버그 수정

- max가 0으로 됬을 때 평균 값 함수 에러
- thumb위치 조정

* Chore:  콘솔 제거

* Feat: date picker 기본 로직 구현 (#38)

* [Feat] 캘린더, date picker 스타일 적용 및 리팩토링 (#42)

* Feat: date picker mouseover, click시 스타일 변경 구현

* Feat: 체크인을 설정하고 다른 달력으로 이동시 mouseover 스타일이 적용되지 않도록구현

* Feat: 한 달 내의 이전달 혹은 다음 달 범위의 날짜 스타일 및 이벤트 비활성화

* Fix: 달력 범위 벗어나면 클릭하여 설정한 체크아웃까지의 범위 스타일 해제되는 오류 해결

* Feat: 년도와 여러 달을 지나쳐 체크아웃을 설정해도 체크인 체크아웃 사이의 모든 날짜가 스타일 적용되도록 구현

* [Refactor & Feat] SearchBox 폴더 생성 및  모달 컴포넌트 수정 (#43)

* Refactor: 차트 모달 분리

* Design: 모달 분리에 따른 스타일 조정

* Rename: 캘린더, 차트 컴포넌트 각각 모달안으로 이동

* Feat: useScrollLock 적용

* Feat: Modal context 세팅

* Chore: types 분리 파일 제거

* Refactor: windowModal -> modal컴포넌트로 변경

* Feat: SeachBox 컴포넌트 생성 및 차트와 달력 컴포넌트 이동

* Refactor: Modal 컴포넌트와 context 분리

* Feat: SearchBox 심플 스타일

* Refactor: 모달 default 위치 중앙으로 조정

* Feat: CreatePotal로 dom 만들 때 id를 props로 전달받기

* Feat: potal을 닫을 때 dom 제거

* Feat: WithModal hoc 생성

* Refactor: SearchBox 하위 영역 Area로 구분

* Feat: Modal customSTyle 관리

* Feat: 캘린더 모달 위치 조정

Co-authored-by: HongJungKim(이든) <58525009+HongJungKim-dev@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
review-BE Improvements or additions to documentation
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants