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-04][BE][테리 & Sammy] 요구사항 분석 및 도메인 설계 #42

Merged
merged 23 commits into from
May 28, 2022

Conversation

astraum
Copy link

@astraum astraum commented May 25, 2022

안녕하세요 시그리드~

테리와 Sammy입니다 😄

프로젝트 첫 사흘 동안은 요구사항 분석과 도메인 및 테이블 설계에 집중했습니다.

3주간 잘 부탁드립니다 ❤️


PR 주요 내용

아래 사항들은 README에 링크를 걸어두었습니다.

  • 요구사항 분석
  • 엔티티 클래스 작성
  • DB 설계
  • API 설계

작업하면서 생긴 궁금증

  1. 전체 데이터베이스 설계 vs 기능 단위로 구현

    • 이번에는 테이블을 설계할 때 JPA에서 생성해주는 DDL을 참고해보고 싶어서 엔티티 클래스들을 먼저 쭉 작성해 보았습니다. 그러나 한편으로는 이렇게 작업하는 것보다는 우선적으로 구현할 기능을 정하고, 해당 기능을 구현하는데 필요한 최소한의 엔티티만 그 때 그 때 추가하는 식으로 진행하는 것이 더 깔끔하지 않았을까 (다시 말하자면 기능 단위로 작업을 진행하는 게 낫지 않았을까)라는 생각도 들었습니다. 시그리드는 어떻게 생각하시나요?
  2. GET관련 API URI 설계 관련 질문

    • API URI 설계시, URI는 하나의 명령어라고 생각하고 설계하였습니다.
      그래서 쿼리 파라미터의 정보는 명령어에 해당하는 것을 넣었습니다. 그리고 서버에서 받아야 하는 여러 정보들(request parameter)는 GET도 POST처럼 body에 json형태로 받는 걸로 설계하고 싶었는데요.
      검색하면서 알아 본 것은 가능하지만 GET은 URI 쿼리 파라미터로 넣는 것을 추천한다고 했습니다.
      저희의 생각은 서버의 API 이므로 웹서버에서 서버로 요청하는 부분이니 브라우저를 통한 요청이 아니므로, 그런 컨벤션은 저희가 정하면 문제 없지 않을까 생각이 들었습니다.
      해당 부분에 대한 생각이 맞는 것인지 궁금합니다.
  3. 요구사항 분석

    • 기획서를 보고 백엔드 개발자가 어떤 것을 개발해야 하고 어떤 사항을 확인해야 하는지 재 정립하는 것이 필요하다고 생각합니다.
      그래서 요구사항 분석서라는 제목으로 해당 내용을 담은 문서를 작성하였는데요.
      현업에서 작업하실 때 많이 사용하시는 방법이나 효과적이였다고 생각하신 방법에 대해 궁금합니다.
  4. 위도, 경도 DB 데이터 타입

    • MySql의 공간데이터 타입(POINT 등)을 검색했지만, 해당 데이터타입 사용이 맞을지에 대해 고민하면서 공부 중입니다. 현재 위도, 경도 데이터타입은 double로 설정해두었습니다.

mybloom and others added 23 commits May 24, 2022 15:06
- application.yml local 환경용 파일 셋팅
- DB datasource 설정
- JPA SQL log Logger사용하도록 설정
- 프로젝트의 기획서를 보고, 벡엔드 개발 필요 요소와 협의 요소를 정리
- sql관련 로그는 파일로 남기도록 설정
- 로컬환경이 윈도우/맥으로 달라, 디렉토리를 지정하지 않고 프로젝트 클래스패스에 저장되도록 설정
- root level을 debug모드로 설정
- Accommodation, Reservation, Review, Wish 엔티티에 BaseCreated 상속하도록 추가
- tab size 4로 tab 키 사용으로 변경
- 구글 스프레드시트에 작성
@astraum astraum added the review-BE Improvements or additions to documentation label May 25, 2022
@astraum astraum requested a review from sigridjineth May 25, 2022 08:28
- [Table create SQL](./docs/airbnb_table_create.sql)

## API 목록
- [제공 API 목록](https://docs.google.com/spreadsheets/d/1PJv-Z1XCsf2IUfqpTywjb641JEv2IiQUzDWu-i_vUVQ/edit#gid=0)

Choose a reason for hiding this comment

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

액세스 권한이 없군요 캬캬

Copy link
Author

Choose a reason for hiding this comment

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

접근권한 변경했습니다!


---

## [Elastic Search] 인기 여행지 리스트

Choose a reason for hiding this comment

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

오 일라스틱 서치를 사용하시는군요~ 기대하겠습니다~!

@sigridjineth
Copy link

ERD 피드백

  • wish 테이블의 역할이 뭔가요? 좋아요 이런 건가요?
  • citycountry 같은 항목은 VARCHAR 크기를 조정해도 될 것 같습니다.
  • gu 보다는 district 가 좋을 것 같습니다. (예: 서초구 -> Seocho District)
  • primary_image 는 별도의 이미지 테이블로 들어가있지 않고, secondary_image 테이블과 구분하신 이유가 있을까요?
  • created_timeDATETIME 타입인 이유가 있을까요?

@mybloom
Copy link
Member

mybloom commented May 26, 2022

  • city 나 country 같은 항목은 VARCHAR 크기를 조정해도 될 것 같습니다.
  • gu 보다는 district 가 좋을 것 같습니다. (예: 서초구 -> Seocho District)

안녕하세요 시그리드~
accommodation의 주소 항목을 현재 세분화할 필요가 없다고 생각이 되어 나중에 필요하다면 세분화하고 현재는 address로 통합하기로 하였습니다.
다시 세분화하게 된다면 varchar의 크기를 조금 더 작게 조정하고, district로 수정 하도록 하겠습니다.

@astraum
Copy link
Author

astraum commented May 26, 2022

피드백 감사합니다!

  • wish 테이블은 위시리스트입니다. 자료구조와 혼동될 여지가 있다고 생각해서 list만 빼 보았는데, 좀 어색하게 느껴지기도 합니다.
  • 검색 결과 리스트에는 primary_image 정보만 포함시키고, secondary_image는 상세정보에만 포함시키려고 나누어 보았습니다. 그런데 실제 에어비앤비 사이트를 좀 더 살펴봤더니 검색 결과 리스트에도 모든 이미지를 다 포함시키고 있네요. primary_image 칼럼을 없애고 하나의 이미지 테이블에 통합시켜야 할지 고민됩니다.

@mybloom
Copy link
Member

mybloom commented May 26, 2022

  • created_time 이 DATETIME 타입인 이유가 있을까요?

datetime이 된 이유는 먼저 엔티티를 생성한 후 JPA에서 테이블 자동 생성할 때 datetime으로 셋팅 되어 사용하게 되었는데요

datetime과 timestamp의 차이는 이전 프로젝트 때 공부한 기록이 있어 해당 내용 첨부합니다.

datetime과 timestamp의 차이

timestamp

  • mysql은 저장할 때 현재 타임존에서 UTC로 변환하고, 조회할 때 UTC에서 현재 시간대로 변환한다.
  • 기본으로 각 연결의 타임존은 서버의 시간이고, 타임존은 connection별로 설정할 수 있다.
  • Mysql에서 사용할 time zone 셋팅 방법은 여러가지이다.
    • 시스템 변수의 time_zone 값을 사용할 수 있다.
    • mysql서버 시작 시 --timezone 옵션 값을 줄 수 있다.
    • 등 다른 방법도 있다.

datetime

  • 날짜 및 시간 부분을 모두 포함하는 값에 사용
  • 1000-01-01 00:00:00부터 9999-12-31 23:59:59까지 지원
  • timezone 반영하지 않음

결론

  • 글로벌 서비스라면 timezone이 반영된 timestamp 를 사용하고, 그렇지 않다면 datetime을 사용하는 게 좋지 않을까 합니다.

Copy link

@sigridjineth sigridjineth left a comment

Choose a reason for hiding this comment

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

안녕하세요, 3주 간 함께하게 된 Sigrid Jin입니다.
리뷰가 다소 늦어서 미안해요. 앞으로 잘 부탁드립니다.
첫 시작이 산뜻해보이네요. 주말에 너무 무리하지 마시고 푹 쉬세요.

`longitude` DOUBLE NOT NULL,
`city` VARCHAR(255) NOT NULL,
`country` VARCHAR(255) NOT NULL,
`gu` VARCHAR(255) NOT NULL,

Choose a reason for hiding this comment

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

이전에도 언급드렸듯이 꼭 255 를 할당해야 하는지 고민이 필요합니다.

Copy link
Author

Choose a reason for hiding this comment

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

넵, VARCHAR 길이는 필요한 만큼만 할당할 수 있도록 신경 쓰겠습니다.

`number_of_room` INT NOT NULL,
`number_of_bed` INT NOT NULL,
`number_of_bathroom` INT NOT NULL,
`created_date` DATETIME(6) NULL DEFAULT (CURRENT_TIME),
Copy link

@sigridjineth sigridjineth May 27, 2022

Choose a reason for hiding this comment

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

MySQL은 초단위 precision을 자릿수를 통해 지정할 수 있는데요.
시간이 되실 때 다음 사항을 한번 고민해보세요.

SELECT COUNT(1)
FROM mydate
WHERE created_at BETWEEN '2022-05-27T00:00:00.000000' AND '2022-05-27T23:59:59.9999999';

이렇게 조회하면 2022년 5월 28일 00시 00분 row가 DB에 들어가 있는 경우에, 나올 수 있습니다. 왜 그럴까요?

Copy link
Member

@mybloom mybloom May 27, 2022

Choose a reason for hiding this comment

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

해당 내용은 초단위 precision의 단위가 넘어갔을 때, 다음 시간을 표현하는 2022년 5월 28일 00시 00분이 포함되기 때문인 것으로 알고 있습니다. 해당 내용은 조금 더 정리해서 위키에 올려보도록 하겠습니다.
감사합니다!

// Created by 안상희 on 2022/05/24.
//

import XCTest

Choose a reason for hiding this comment

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

스위프트는 올라오지 않게 처리해주시면 감솨하겠다는,,

Copy link
Author

Choose a reason for hiding this comment

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

넵 앞으로 스위프트는 같이 올라오지 않도록 유의하겠습니다. iOS/백엔드 브랜치로 분기한 다음에 프로젝트를 생성했어야 했는데 프로젝트를 먼저 생성했더니 해당 커밋이 백엔드 브랜치에 포함되어 있었네요.

import org.junit.jupiter.api.Test;
import org.springframework.boot.test.context.SpringBootTest;

@SpringBootTest

Choose a reason for hiding this comment

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

이번이 마지막 프로젝트죠? 한번 테스트를 열심히 해보시는 것은 어떨까요?

Copy link
Member

Choose a reason for hiding this comment

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

네 이번 프로젝트 테스트 열심히 해보겠습니다! 🔥


import javax.persistence.Embeddable;

@Embeddable

Choose a reason for hiding this comment

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

@Embeddable 을 사용한 이유는 무엇일까요? 그리고 그 장점에 대해서 설명해주세요.

Copy link
Author

Choose a reason for hiding this comment

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

관련성이 있는 값들을 의미 있는 객체로 묶어서 관리하려고 했습니다. 객체의 응집도가 높아지는 효과를 기대하고 사용했습니다.

Copy link
Member

@mybloom mybloom May 27, 2022

Choose a reason for hiding this comment

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

공유할 수 있는 객체 이면서 변경할 수 없도록(불변) 사용하기 위해서 @Embedded 타입의 장점이라고 생각합니다.

BE/build.gradle Outdated
@@ -0,0 +1,33 @@
plugins {
id 'org.springframework.boot' version '2.7.0'

Choose a reason for hiding this comment

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

마이너 버전인 0번대 사용은 추천하지 않습니다.

Copy link
Member

Choose a reason for hiding this comment

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

오! 몰랐던 사항입니다.
그러면 그 전 버젼인 2.6.x대에서 Usages가 많은 2.6.6 버젼을 사용하는 것으로 수정하도록 하겠습니다.

보통의 경우는 mvn repository에서 관련 의존성을 검색하여 최신버젼 중에 사용량이 높은 것을 선택하고 있습니다.

Copy link
Author

Choose a reason for hiding this comment

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

오... Spring Initializr의 기본값이 2.7.0이라 그대로 사용 중이었습니다. 0번대는 아직 충분한 검증이 이루어지지 않았다고 보셔서 추천하지 않으시는 건가요? 또, Spring Boot 뿐만 아니라 소프트웨어에 전반적으로 적용되는 사항일까요?

@@ -0,0 +1,3 @@
spring:
profiles:
active: local

Choose a reason for hiding this comment

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

향후 공간정보 쿼리를 사용하려면 MySQL56InnoDBSpatialDialect 를 명시하셔야 하겠군요.

Copy link
Author

Choose a reason for hiding this comment

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

넵 감사합니다. 공간정보 쿼리 사용 시 dialect 설정이 필요할 줄 몰랐는데 이 부분 좀 더 정확히 알고 사용하겠습니다.


private String userId;

@OneToMany(mappedBy = "customer")

Choose a reason for hiding this comment

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

@OneToMany 는 기본 전략을 Lazy로 잡고 들어가시는 것을 추천합니다.
물론, fetch 기본 전략이 Lazy 이긴 하지만, 기본 전략을 명시하시는 것이 좋다고 보여집니다. (그래야 이를 이해하고 있다는 사실을 인지할 수 있으니까요!)

우리가 연관관계 별로 default 전략이 달라요.
예를 들어서 @OneToMany 는 LAZY이고, @ManyToMany도 LAZY이죠.
왜냐하면 해당 옵션의 경우 굳이 필요치 않은 상황에서도 SELECT 문을 추가로 발생시켜 데이터를 조회합니다. 따라서 로직에서 필요한 경우에만 조회 쿼리를 날리기 위함입니다.

하지만 @ManyToOne 이라던지, @OneToOne 이라던지는 기본 fetchType이 Eager이죠. 따라서 조인 쿼리 한 번으로 One의 필드 값을 가지고 있지만, Lazy로 설정하면 SELECT 문을 여러 번 발생시켜 N+1 쿼리 문제를 일으킬 수 있죠.

여기서 N+1 쿼리 문제가 도대체 무엇이냐 생각해볼 만한 주제가 되는데, 이를 본인만의 언어로 정리해주세요.

Copy link
Member

Choose a reason for hiding this comment

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

N+1 쿼리란
조인쿼리 사용시 즉시로딩, 지연로딩 상관없이 연관관계 객체의 탐색이 이뤄질때 조회된 객체의 갯수만큼 N번의 쿼리가 또 발생하는 상황입니다.

즉시/지연 로딩 상관없이 N+1의 문제가 발생하게 되는데요.
지연로딩일 경우, 객체를 실제 사용할 때 DB에서 데이터를 가져오는 전략이기 때문에 다시 쿼리가 실행된다고 이해할 수 있습니다.
하지만 즉시로딩 때도 N+1의 문제가 발생하는데요.
이유는, select에서 가져오는 컬럼이 해당 객체로 한정되어 있기 때문입니다.

이럴 경우 fetch join을 사용하면 연관관계 객체까지 select 절에서 모두 가져오고 바인딩을 해주고 있습니다.

프로젝트를 진행해나가면서 N+1의 해결 방안 별 장단점에 대해 살펴보고 적용해나가도록 하겠습니다.

Copy link
Author

Choose a reason for hiding this comment

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

넵, 이후 fetchType.LAZY는 기본값에 의존하지 않고 명시하도록 하겠습니다.

N+1 쿼리는 조회한 엔티티와 연관관계에 있는 엔티티를 조회하기 위해, 첫번째 쿼리로 조회된 엔티티의 수만큼 추가 쿼리가 발생하는 문제입니다. 예를 들어 1번의 쿼리로 N개의 게시물을 조회했을 때, 각 게시물과 연관된 댓글 목록을 조회하기 위해 N번의 쿼리가 발생하는 것이 N+1 쿼리입니다.

JPQL에서 제공하는 join fetch를 사용하거나, batchsize 또는 FetchMode.SUBSELECT 등을 사용하여 내부적으로 IN 조건절을 사용하게 하면 N+1 쿼리를 방지할 수 있습니다.


@Embeddable
@NoArgsConstructor(access = AccessLevel.PROTECTED)
@AllArgsConstructor

Choose a reason for hiding this comment

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

굳이 객체 생성 단계에서 모든 프로퍼티를 오픈해놓는 방식으로 생성자를 구현할 필요는 없다고 생각합니다.

Copy link
Author

Choose a reason for hiding this comment

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

불변 객체로 만들기 위해 전체 생성자를 만들었습니다.

private Address address;

@Column(name = "accommodation_type")
private String type;

Choose a reason for hiding this comment

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

type 관련 필드라면 enum 으로 관리하시기 바랍니다.

Copy link
Member

@mybloom mybloom May 27, 2022

Choose a reason for hiding this comment

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

네, 해당 부분은 enum으로 관리하도록 개발 해 나가겠습니다.

@sigridjineth
Copy link

질의 응답

전체 데이터베이스 설계 vs 기능 단위로 구현

  • 글쎄요. 따로 정답이 있다기 보다는 본인만의 스타일을 찾아나가자 라는 정서가 맞지 않나 생각합니다. 특히 DDL 학습 측면이라면 거시적인 관점을 가져가보시는 것도 좋구요. 저는 개인적으로는 작은 기능의 단위로 구현하는 편입니다만, 이렇게 진행하다보면 덕지덕지 엔티티가 붙는 경우도 생겨서 여러 경험을 해보시라는 의견을 드릴 수밖에 없겠습니다.

GET 관련 API URI 설계 관련 질문

  • 원칙을 깨지 마세요. RESTful 하지도 않거니와, HTTP 규약에는 GET 요청 시에는 Body를 보내지 말고 parameter를 활용하라고 나와 있습니다. RFC 7231 §4.3.1
  • 또한, Body에 데이터를 넣어서 보내면 ETag 와 같은 caching 전략도 활용하지 못합니다. 왜 그런지 찾아보시고 답글로 달아주세요.

요구사항 분석

  • 글쎄요. 전 백엔드 개발자로서 업무하고 있지는 않아서 현업에서는 이렇게 사용한다 라고 말할 수 있는 위치는 아닙니다.
  • 하지만 테크니컬 라이터로서 업무하고 있는 입장에서 대충 훑어보았을 때는 높은 수준의 over-communication을 추구한다고 보여집니다.
  • 무엇이든지 의도를 정확하게 전달하기 위해, 친절하지만 최대한 많이, 그러면서도 간결하게 내용을 전달하는 것이 중요합니다. 어렵죠? 그래서 제가 돈 받고 일하는 것입니다. 더 잘하려구요.

위도, 경도 DB 데이터 타입

  • MySQL 데이터 타입의 POINT 를 사용해 보시기를 추천합니다. 공간 데이터 입장에서 double 타입을 사용해보지 않아서 잘 모르겠네요.

@astraum
Copy link
Author

astraum commented May 27, 2022

GET 요청의 Body에 데이터를 넣었을 때 caching 전략을 활용하지 못하는 이유

  • 프록시 서버가 캐싱된 응답을 제공하기 위해 GET 요청의 패러미터를 확인할 때, GET 요청의 body에 담겨 있는 정보는 사용하지 않기 때문이라고 합니다.

@mybloom
Copy link
Member

mybloom commented May 27, 2022

GET 관련 API URI 설계 관련 답변에 대해 보내주신 자료와 ETag에 대해 조사하고 제 생각을 말씀드리면,
ETag헤더 필드는 일종의 리소스 표현인데, body에 request parameter가 있을 경우 요청의 식별이 URI로는 되지 않기 때문에 ETag를 사용할 수 없다고 생각합니다.
리뷰 내용대로 GET 요청은 URI에 조건들을 표현하도록 하겠습니다.

시그리드,
리뷰를 통해 공부하고 정리하면서 알아가는 재미와 성취를 느낄 수 있었습니다.
감사합니다~ 즐거운 주말 되세요😄

@astraum
Copy link
Author

astraum commented May 28, 2022

#120 PR 올리면서 dev-BE 브랜치를 fast-forward시켜버린 것 같습니다.

이 PR에 해당하지 않는 커밋들이 포함되어 버려서 dev-BE 브랜치를 reset 후 force-push하여 복구했습니다.

@sigridjineth
Copy link

Dan 리뷰어님의 아래 글도 한번 읽어보세요.

GET Payload

@sigridjineth
Copy link

많은 것을 학습해주셨습니다. 저도 많이 배워갑니다.
정말 감사드리며, 이만 머지하겠습니다. 다음 PR에서 만나보도록 합시다.

@sigridjineth sigridjineth merged commit 6ce01cf into codesquad-members-2022:team04 May 28, 2022
sigridjineth pushed a commit that referenced this pull request May 30, 2022
guswns1659 pushed a commit that referenced this pull request May 31, 2022
Lombok 애노테이션부터 생성자 - getter 순서로.
이후에는 JPA @entity 애노테이션으로 이어지도록 수정.

Co-authored-by: Senglee Choi <tmdfl1027@gmail.com>
tmdgusya pushed a commit that referenced this pull request Jun 2, 2022
ITzombietux pushed a commit that referenced this pull request Jun 3, 2022
- 좌표값을 원시타입이 아닌 Coordinate 타입으로 입력받도록 리팩토링

jeremy0405/airbnb/#42
ITzombietux pushed a commit that referenced this pull request Jun 3, 2022
- 조건문 없이 다형성으로 처리되도록 리팩토링
- CitySectionViewModel, PopularSectionViewModel 구현
    - CityCellViewModel 구현
- BannerSectionViewModel 구현
    - BannerCellViewModel 구현
- ThemeSectionViewModel 구현
    - ThemeCellViewModel 구현
- 관련 로직 변경

jeremy0405/airbnb/#42
ITzombietux pushed a commit that referenced this pull request Jun 3, 2022
- associated type ->  [CellViewModelable]로 추상화 하여 ViewModelBindable 변경
- SearchHomeCollectionViewSection의 AllCases 이용

jeremy0405/airbnb/#42
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>
wooody92 pushed a commit that referenced this pull request Jun 5, 2022
…details_api

feat: [#42] 숙소 상세 정보 조회 기능 구현
GangWoon pushed a commit that referenced this pull request Jun 5, 2022
[iOS] 날짜를 탭하면 �선택한 날짜 범위가 달력에 표시됨
sabgilhun pushed a commit that referenced this pull request Jun 7, 2022
[feat] 숙소 검색 결과 레이아웃(40)
hanchang97 pushed a commit that referenced this pull request Jun 8, 2022
[Android] feat: wish 페이지 구현
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