# 5/23 월

# README

## 협업 관련

- Git 레포 파고 collaborator 추가해서 사용

- Git Branch 전략
- team-31 <= dev
- dev(PR 보내기용, 데모용)
- feat/task-name/issue-num <- 브랜치파서 Dev 로 PR

- Git Commit Convention
- feat : 기능
- env : 환경설정
- style : 코드에 영향을 주지 않는 변경 (오타, css 수정)
- fix : 버그 수정
- chore : 패키지관련 내용 수정(package.json)
- rename : 폴더구조변경, 네이밍 수정
- refactor : 같은 기능을 하는 코드의 개선
- docs : README 수정

- Git Issue Template
- 스토리-테스크 나누고 생각
- Milestone

- Git PR Template

issue #{num}
{필요시 할말}

-- 이부분은 확인 후 지워주세요 --
제목 컨벤션 -> `[<who>] short-description`
본문에 이슈번호 태그 -> ex) issue #37

### 그라운드 룰

- 웬만하면 문서로 이야기 될 수 있게
- 문서화 연습
- `~ 로직이 이해가 안되는데 설명해주세요` 는 문서or댓글로 설명해보자
- 지각 금지!!
- 페어할 때에는 의도적으로 휴식 (1시간+-, 10분)

### BE
- 숙소정보
- msw Backend ?
- API........

## 프로젝트 진행

- TypeScript
- MaterialUI + styled components

- CRA 말고 직접 환경설정 하기

- 상태관리
- useReducer + Context API 활용
- eslint
- airbnb
- prettier
- tabWidth: 2

### 코딩컨벤션

- 컴포넌트 구조
- 폴더/index.jsx
- 폴더/하위컴포넌트
- 컴포넌트(생성자함수, 클래스) -> 대문자
- Header
- Search/
- HeaderButton.jsx
- index.jsx // Header.jsx

## 1주차 - 환경설정 마무리, 메인페이지 - 디자인뽑기 + 레이아웃배치

- 화: 환경설정 세팅
- 수: 5시 PR
- 목: ~?
- 금: 2시 PR

- 수요일
- 디자인을 보고서 공통으로 쓰일 수 있는 컴포넌트 만들기

## 2주차
- 검색결과 페이지 - 디자인뽑기 + 레이아웃배치
- 모달
- msw 가 필요할 때 도입

### Story

- 로고, 메뉴 (숙소, 체험, 온라인체험) 마이페이지 기능을 하는 버튼이 GNB 상단에 위치한다.
- 메뉴들은 hover 효과가 있다.

- GNB 아래에는 검색바가 위치한다.
- 검색바에서 체크인/체크아웃 영역을 클릭하면 여행기간을 입력할 수 있는 **캘린더**가 모달창으로 뜬다.
- 캘린더는 2개월간의 일정을 볼 수 있다
- 화살표를 누르면 캘린더가 슬라이딩 된다.
- 검색바가 활성화되면 Focus 상태로 변한다
- 이미 지난 날짜 및 이미 예약된 날짜는 선택할 수 없다

### 캘린더 모달
- 날짜를 처음 클릭하면 체크인 필드에 해당 일자가 입력
- 다음 날짜를 클릭하면 체크아웃 필드에 해당 일자가 입력
- 다음 날짜가 처음 클릭한 날짜보다 이전인 경우 체크인-날짜가 두 번째 클릭 날짜로 변경, 체크아웃은 입력되지 않음
- 체크인 날짜보다 늦은 날짜를 클릭한 경우 체크아웃 날짜만 업데이트됨
- 같은 날짜를 클릭하면 체크인, 체크아웃이 같은 날짜로 입력됨

- 체크인/체크아웃 박스의 X 를 누르면 체크인/체크아웃 필드의 입력값이 초기화됨
- 모달창(캘린더) 이외의 영역을 누르면 모달창이 닫힌다
- 체크인/체크아웃을 눌렀을 시에는 리렌더링

### 요금 모달

- 검색바에서 요금 영역을 클릭하면 선택한 날짜를 기준으로 가격 범위를 표시한 모달창이 뜬다
- 레인지 슬라이더를 이용해 가격을 설정할 수 있다
- 가격범위 텍스트가 실시간으로 변경된다.
- 슬라이더는 양끝에 있고 가격정보에는 최저-최고 값으로 표시된다.
- 슬라이더는 서로 지나쳐 이동할수 없고 서로 완벽히 겹칠수 없다

- 값이 입력되면 X 버튼이 활성화 되고, X 버튼을 누르면 슬라이더의 값이 초기화 된다.
- 모달창 이외의 영역을 누르면 모달창이 닫힌다.

### 인원 조정 모달
- 인원 영역을 클릭하면 게스트 인원을 입력할 수 있는 모달창이 뜬다.
- 기본 및 최소값 : 0
- 최대값 : 8
- 더 감소하거나 증가할 수 없는 경우 버튼 비활성화
- 성인이 0이고 어린이, 유아가 입력된 경우 성인의 인원수가 1로 변경된다.
- 검색바에서 '성인, 어린이'는 게스트로 표기되며 '유아'는 유아로 표기된다.
- 값이 입력되면 X 버튼이 활성화 되고, X 버튼을 누르면 슬라이더의 값이 초기화 된다.
- 모달창 이외의 영역을 누르면 모달창이 닫힌다.