-
Notifications
You must be signed in to change notification settings - Fork 80
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
[Team-04][BE][테리 & Sammy] 요구사항 분석 및 도메인 설계 #42
Conversation
- application.yml local 환경용 파일 셋팅 - DB datasource 설정 - JPA SQL log Logger사용하도록 설정
…ature-domain-analysis
- 프로젝트의 기획서를 보고, 벡엔드 개발 필요 요소와 협의 요소를 정리
- sql관련 로그는 파일로 남기도록 설정 - 로컬환경이 윈도우/맥으로 달라, 디렉토리를 지정하지 않고 프로젝트 클래스패스에 저장되도록 설정 - root level을 debug모드로 설정
…o feature-domain-analysis
- Accommodation, Reservation, Review, Wish 엔티티에 BaseCreated 상속하도록 추가
- tab size 4로 tab 키 사용으로 변경
- 구글 스프레드시트에 작성
- [Table create SQL](./docs/airbnb_table_create.sql) | ||
|
||
## API 목록 | ||
- [제공 API 목록](https://docs.google.com/spreadsheets/d/1PJv-Z1XCsf2IUfqpTywjb641JEv2IiQUzDWu-i_vUVQ/edit#gid=0) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
액세스 권한이 없군요 캬캬
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
접근권한 변경했습니다!
|
||
--- | ||
|
||
## [Elastic Search] 인기 여행지 리스트 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
오 일라스틱 서치를 사용하시는군요~ 기대하겠습니다~!
ERD 피드백
|
안녕하세요 시그리드~ |
피드백 감사합니다!
|
datetime이 된 이유는 먼저 엔티티를 생성한 후 JPA에서 테이블 자동 생성할 때 datetime으로 셋팅 되어 사용하게 되었는데요 datetime과 timestamp의 차이는 이전 프로젝트 때 공부한 기록이 있어 해당 내용 첨부합니다. datetime과 timestamp의 차이
|
There was a problem hiding this 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, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
이전에도 언급드렸듯이 꼭 255 를 할당해야 하는지 고민이 필요합니다.
There was a problem hiding this comment.
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), |
There was a problem hiding this comment.
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에 들어가 있는 경우에, 나올 수 있습니다. 왜 그럴까요?
There was a problem hiding this comment.
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 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
스위프트는 올라오지 않게 처리해주시면 감솨하겠다는,,
There was a problem hiding this comment.
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 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
이번이 마지막 프로젝트죠? 한번 테스트를 열심히 해보시는 것은 어떨까요?
There was a problem hiding this comment.
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 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@Embeddable
을 사용한 이유는 무엇일까요? 그리고 그 장점에 대해서 설명해주세요.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
관련성이 있는 값들을 의미 있는 객체로 묶어서 관리하려고 했습니다. 객체의 응집도가 높아지는 효과를 기대하고 사용했습니다.
There was a problem hiding this comment.
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' |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
마이너 버전인 0번대 사용은 추천하지 않습니다.
There was a problem hiding this comment.
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에서 관련 의존성을 검색하여 최신버젼 중에 사용량이 높은 것을 선택하고 있습니다.
There was a problem hiding this comment.
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 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
향후 공간정보 쿼리를 사용하려면 MySQL56InnoDBSpatialDialect
를 명시하셔야 하겠군요.
There was a problem hiding this comment.
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") |
There was a problem hiding this comment.
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 쿼리 문제가 도대체 무엇이냐 생각해볼 만한 주제가 되는데, 이를 본인만의 언어로 정리해주세요.
There was a problem hiding this comment.
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의 해결 방안 별 장단점에 대해 살펴보고 적용해나가도록 하겠습니다.
There was a problem hiding this comment.
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 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
굳이 객체 생성 단계에서 모든 프로퍼티를 오픈해놓는 방식으로 생성자를 구현할 필요는 없다고 생각합니다.
There was a problem hiding this comment.
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; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
type 관련 필드라면 enum
으로 관리하시기 바랍니다.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
네, 해당 부분은 enum
으로 관리하도록 개발 해 나가겠습니다.
질의 응답전체 데이터베이스 설계 vs 기능 단위로 구현
GET 관련 API URI 설계 관련 질문
요구사항 분석
위도, 경도 DB 데이터 타입
|
GET 요청의 Body에 데이터를 넣었을 때 caching 전략을 활용하지 못하는 이유
|
GET 관련 API URI 설계 관련 답변에 대해 보내주신 자료와 ETag에 대해 조사하고 제 생각을 말씀드리면, 시그리드, |
#120 PR 올리면서 dev-BE 브랜치를 fast-forward시켜버린 것 같습니다. 이 PR에 해당하지 않는 커밋들이 포함되어 버려서 dev-BE 브랜치를 reset 후 force-push하여 복구했습니다. |
Dan 리뷰어님의 아래 글도 한번 읽어보세요. |
많은 것을 학습해주셨습니다. 저도 많이 배워갑니다. |
Lombok 애노테이션부터 생성자 - getter 순서로. 이후에는 JPA @entity 애노테이션으로 이어지도록 수정. Co-authored-by: Senglee Choi <tmdfl1027@gmail.com>
- 좌표값을 원시타입이 아닌 Coordinate 타입으로 입력받도록 리팩토링 jeremy0405/airbnb/#42
- 조건문 없이 다형성으로 처리되도록 리팩토링 - CitySectionViewModel, PopularSectionViewModel 구현 - CityCellViewModel 구현 - BannerSectionViewModel 구현 - BannerCellViewModel 구현 - ThemeSectionViewModel 구현 - ThemeCellViewModel 구현 - 관련 로직 변경 jeremy0405/airbnb/#42
- associated type -> [CellViewModelable]로 추상화 하여 ViewModelBindable 변경 - SearchHomeCollectionViewSection의 AllCases 이용 jeremy0405/airbnb/#42
* 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>
…details_api feat: [#42] 숙소 상세 정보 조회 기능 구현
[iOS] 날짜를 탭하면 �선택한 날짜 범위가 달력에 표시됨
[Android] feat: wish 페이지 구현
* 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>
* [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>
안녕하세요 시그리드~
테리와 Sammy입니다 😄
프로젝트 첫 사흘 동안은 요구사항 분석과 도메인 및 테이블 설계에 집중했습니다.
3주간 잘 부탁드립니다 ❤️
PR 주요 내용
아래 사항들은 README에 링크를 걸어두었습니다.
작업하면서 생긴 궁금증
전체 데이터베이스 설계 vs 기능 단위로 구현
GET관련 API URI 설계 관련 질문
그래서 쿼리 파라미터의 정보는 명령어에 해당하는 것을 넣었습니다. 그리고 서버에서 받아야 하는 여러 정보들(request parameter)는 GET도 POST처럼 body에 json형태로 받는 걸로 설계하고 싶었는데요.
검색하면서 알아 본 것은 가능하지만 GET은 URI 쿼리 파라미터로 넣는 것을 추천한다고 했습니다.
저희의 생각은 서버의 API 이므로 웹서버에서 서버로 요청하는 부분이니 브라우저를 통한 요청이 아니므로, 그런 컨벤션은 저희가 정하면 문제 없지 않을까 생각이 들었습니다.
해당 부분에 대한 생각이 맞는 것인지 궁금합니다.
요구사항 분석
그래서 요구사항 분석서라는 제목으로 해당 내용을 담은 문서를 작성하였는데요.
현업에서 작업하실 때 많이 사용하시는 방법이나 효과적이였다고 생각하신 방법에 대해 궁금합니다.
위도, 경도 DB 데이터 타입