[team-33 포키 & bangtae] 마지막 pr보냅니다. #306
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* rename: gnb 폴더 생성하여 관련 컴포넌트 이동 - styled -> customStyled 로 변경 적용 * refactor: gnb 컴포넌트 css 수정 * feat: main banner UI 구현 * refactor: gnb 컴포넌트 hover 및 cursor pointer 적용
* chore: mui 버전 통일 * feat: 글로벌 스타일 추가 * feat: SearchBar 컴포넌트 style 작성 및 이벤트 추가
* chore: alias 경로 설정을 위한 react-app-rewired 설치 및 설정파일 생성 * refactor: 절대경로 반영 (index, app, gnb, main-banner) * fix: search input width 고정
* 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 적용
- gnb, search-bar, calender를 header 하위 컴포넌트로 수정
* refactor: 캘린더 체크인/체크아웃 모드와 date box 체크 위치 상태를 나타내는 문자열을 상수화 * refactor: 컴포넌트 별 데이터 가공 유틸 함수를 컴포넌트 밖으로 분리 * refactor: Date box 내부에 있던 날짜 비교용 checkInTime, checkOutTime 을 콘텍스트 provider 로 이동 - checkInDate, checkOutDate 변수명 변경 -> checkInInfo, checkOutInfo - checkIn, checkOut, current 변수명 변경 -> checkInTime, checkOutTime, currentTime
* 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가 적용되지 않게 함
* feat: 체크인-체크아웃 사이 날짜 1일과 마지막일 전후 음영 반영
- DatesOfMonth 컴포넌트 last date 월이 안맞는 오류 수정
: getDate() 는 현재달 인덱스에 date 0을 주면 이전달 마지막날 반환
* feat: 현재 날짜 이전 날짜 선택 불가 및 회색 표시
* feat: 검색바 체크인, 체크아웃 날짜 출력 기능 추가 - 캘린더에서 선택한 날짜를 출력하도록 함 * Feature/20 (#40) * refactor: ResetButton 동적으로 추가하도록 수정 - input요소의 value 유무에 따라 추가, 삭제 * feat: ResetButton 클릭 이벤트 추가 - 버튼 클릭시 input value 초기화 - 검색바가 포커스되어 있을 때만 버튼이 노출되도록 수정
- ResetButton 포커스 시에만 노출되도록 수정 - 검색바 포커스 시 세로로 늘어나는 오류 수정
- 체크아웃을 먼저 선택 후 체크인 선택 시 체크아웃보다 뒷날이어도 선택되는 오류 수정 - DateBox 컴포넌트 내 handle click 로직 수정
- 체크인 날짜 있는 경우 체크인 달로 시작 - 없는 경우 현재 달로 시작
* 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: 검색바 초기화 버튼 유무따라 크기가 변경되는 부분 수정 - 검색 버튼 아이콘 컬러 변경
* 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 를 이동
* 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 추가
…50) Co-authored-by: moon-yerim <75062526+moonyerim2@users.noreply.github.com>
- dim레이어 삭제 - Node.contains를 사용한 방법으로 수정
choisohyun
reviewed
Jun 12, 2022
Comment on lines
29
to
+30
| width: 100%; | ||
| min-width: 900px; | ||
| min-width: 960px; |
There was a problem hiding this comment.
저도 최근에 알았는데 min() 이라는 css함수를 사용할수도 있더라구요!
https://developer.mozilla.org/en-US/docs/Web/CSS/min
width: min(100%, 960px);
Comment on lines
+13
to
+17
| if (type === CALENDER_BUTTON.PREV) { | ||
| return setCalenderPosition(prev => prev + 1); | ||
| } | ||
| if (type === CALENDER_BUTTON.NEXT) { | ||
| return setCalenderPosition(prev => prev - 1); |
| import { CALENDER_BUTTON } from '@/constants/calenderText'; | ||
|
|
||
| function CalenderButton({ type, handleClick }) { | ||
| const getInnerIcon = type => { |
There was a problem hiding this comment.
컴포넌트 안에 작성하는 컴포넌트도 컴포넌트 쓰는것처럼 써도 동일하게 동작합니다!
ex
const InnerIcon = type => (<>{...}</>)
<InnerIcon type={''} />| <Container> | ||
| <Title>가격 범위</Title> | ||
| <PriceRange>{priceRange}</PriceRange> | ||
| <Average>평균 1박 요금은 ₩{priceAverage}입니다.</Average> |
There was a problem hiding this comment.
데모페이지로 봤을때 1박요금은 고정으로 나오는데 여기는 고정값인가요? ㅎㅎ
|
|
||
| function PriceProvider({ children }) { | ||
| const [min, setMin] = useState(MIN_PRICE); | ||
| const [max, setMax] = useState(MAX_PRICE); |
There was a problem hiding this comment.
initial state와 set state할 때의 값 타입이 일관성이 있는게 (string) 좋네요!
조금 봐야할 점은 보통 min, max 값을 사용할 때는 number라는 인식이 있어서 number로 넣고 써도 좋을거같다는 생각도 드네요~
물론 일정 숫자 자리수(15자 이상으로 알고있어요) 이상으로 넘어간다면 숫자 변환이 잘 안될수있어서 string을 써야겠지만요!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
삼주동안 리뷰해주시느라 고생하셨습니다. 덕분에 좋은 내용 많이 알게됐습니다.
배포사이트
구현내용
요금 모달까지 구현하고 나서는 구현을 더 하기보다 사용하지 않았던 useReducer와 typeScript를 다음 미션을 위해 공부하기로 했습니다.
고민
input 태그의 type="range"로 구현을 했습니다. 그런데 모달창을 클릭했을 때 검색바에 blur이벤트가 발생해 모달창이 꺼지는 것을 막기 위해 모달창에onMouseDown={(e) = e.preventDefault()}를 걸어둔 것 때문에 input 슬라이더도 동작하지 않아서 방법을 바꾸어야 했습니다.