[team-33 포키 & bangtae] 2주차 두번째 pr보냅니다. (#211)

* 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>

airbnb-app/jsconfig.paths.json

@@ -3,7 +3,10 @@
     "baseUrl": ".",
     "paths": {
       "@/*": ["src/*"],
-      "@component/*": ["src/component/*"]
+      "@component/*": ["src/component/*"],
+      "@calender/*": ["src/component/header/modal/calender/*"],
+      "@personnel/*": ["src/component/header/modal/personnel/*"],
+      "@price/*": ["src/component/header/modal/price/*"]
     }
   }
 }

airbnb-app/src/App.js

@@ -1,4 +1,4 @@
-import { CustomThemeProvider } from '@/custom-styled-component/CustomThemeProvider';
+import { CustomThemeProvider } from '@/utils/custom-styled-component/CustomThemeProvider';
 import { ThemeProvider } from 'styled-components';
 import { GlobalStyle } from '@/common/globalStyle';
 import theme from '@/common/theme';

airbnb-app/src/common/theme.js

@@ -34,7 +34,7 @@ const borderRadius = {
 
 const modal = {
   backgourndColor: color.white,
-  borderRadius: borderRadius.radius4,
+  borderRadius: borderRadius.radius2,
   boxShadow: `0px 4px 10px rgba(51, 51, 51, 0.1), 0px 0px 4px rgba(51, 51, 51, 0.05)`,
 };
 

airbnb-app/src/component/header/Header.js → airbnb-app/src/component/header/Header.jsx

@@ -1,16 +1,19 @@
-import customStyled from '@/custom-styled-component/customStyled';
-import { CalenderDateProvider } from '@/component/header/calender/CalenderDateProvider';
+import customStyled from '@/utils/custom-styled-component/customStyled';
 import GNB from '@/component/header/gnb/GNB';
 import SearchBar from '@/component/header/search-bar/SearchBar';
-import { SearchBarProvider } from '@/component/header/search-bar/SearchBarProvider';
+import { SearchBarProvider } from '@/context/SearchBarProvider';
+import { CalenderDateProvider } from '@/context/CalenderDateProvider';
+import { PersonnelProvider } from '@/context/PersonnelProvider';
 
 function Header() {
   return (
     <Container>
       <GNB />
       <SearchBarProvider>
         <CalenderDateProvider>
-          <SearchBar />
+          <PersonnelProvider>
+            <SearchBar />
+          </PersonnelProvider>
         </CalenderDateProvider>
       </SearchBarProvider>
     </Container>

airbnb-app/src/component/header/gnb/AccountMenu.jsx

@@ -1,4 +1,4 @@
-import customStyled from '@/custom-styled-component/customStyled';
+import customStyled from '@/utils/custom-styled-component/customStyled';
 import DehazeIcon from '@mui/icons-material/Dehaze';
 import AccountCircleIcon from '@mui/icons-material/AccountCircle';
 

airbnb-app/src/component/header/gnb/GNB.jsx

@@ -1,4 +1,4 @@
-import customStyled from '@/custom-styled-component/customStyled';
+import customStyled from '@/utils/custom-styled-component/customStyled';
 import Logo from '@/component/header/gnb/Logo';
 import MenuTabs from '@/component/header/gnb/MenuTabs';
 import AccountMenu from '@/component/header/gnb/AccountMenu';

airbnb-app/src/component/header/gnb/Logo.jsx

@@ -1,4 +1,4 @@
-import customStyled from '@/custom-styled-component/customStyled';
+import customStyled from '@/utils/custom-styled-component/customStyled';
 
 function Logo() {
   return <StyledTitle>LOGO</StyledTitle>;

airbnb-app/src/component/header/gnb/MenuTabs.jsx

@@ -1,4 +1,4 @@
-import customStyled from '@/custom-styled-component/customStyled';
+import customStyled from '@/utils/custom-styled-component/customStyled';
 import styled from 'styled-components';
 
 function MenuTabs() {

airbnb-app/src/component/header/modal/calender/Calender.jsx

@@ -0,0 +1,35 @@
+import styled from 'styled-components';
+import { useState } from 'react';
+import PrevButton from '@calender/PrevButton';
+import NextButton from '@calender/NextButton';
+import { ModalContainer } from '@/styled-component/ModalContainer';
+import CalenderCarousel from '@calender/CalenderCarousel';
+
+function Calender({ page = 1 }) {
+  const [calenderPosition, setCalenderPosition] = useState(0);
+
+  return (
+    <StyledContainer
+      page={page}
+      onMouseDown={e => {
+        e.preventDefault();
+      }}
+    >
+      <PrevButton calenderPosition={calenderPosition} setCalenderPosition={setCalenderPosition} />
+      <NextButton calenderPosition={calenderPosition} setCalenderPosition={setCalenderPosition} />
+      <CalenderCarousel page={page} calenderPosition={calenderPosition} setCalenderPosition={setCalenderPosition} />
+    </StyledContainer>
+  );
+}
+
+const StyledContainer = styled(ModalContainer)`
+  position: relative;
+  margin-top: 30px;
+  ${({ page }) =>
+    `width: ${page === 1 ? 370 : 818}px;
+    height: ${382 * Math.ceil(page / 2)}px;
+    padding: ${page === 1 ? `65px 44px` : `65px 88px`};
+   `}
+`;
+
+export default Calender;

airbnb-app/src/component/header/modal/calender/CalenderCarousel.jsx

@@ -0,0 +1,86 @@
+import CalenderPage from '@calender/CalenderPage';
+import styled from 'styled-components';
+import { useContext } from 'react';
+import { CalenderDateContext } from '@/context/CalenderDateProvider';
+
+function CalenderCarousel({ page, calenderPosition, setCalenderPosition }) {
+  const { curDate, setCurDate, prevDate, nextDate } = useContext(CalenderDateContext);
+
+  const displayPageArray = getDisplayPageArray({ curDate, page });
+  const previousDisplayPageArray = getDisplayPageArray({ curDate: prevDate, page });
+  const nextDisplayPageArray = getDisplayPageArray({ curDate: nextDate, page });
+
+  function handleTransitionEnd() {
+    if (calenderPosition === 1) {
+      setCurDate(prevDate);
+    } else if (calenderPosition === -1) {
+      setCurDate(nextDate);
+    }
+    setCalenderPosition(0);
+  }
+
+  return (
+    <StyledCalenderDisplay page={page}>
+      <StyledMoveArea page={page} calenderPosition={calenderPosition} onTransitionEnd={handleTransitionEnd}>
+        <StyledCalenderPageWrapper page={page}>
+          {previousDisplayPageArray.map((date, idx) => (
+            <CalenderPage key={idx} date={date} />
+          ))}
+        </StyledCalenderPageWrapper>
+        <StyledCalenderPageWrapper page={page}>
+          {displayPageArray.map((date, idx) => (
+            <CalenderPage key={idx} date={date} />
+          ))}
+        </StyledCalenderPageWrapper>
+        <StyledCalenderPageWrapper page={page}>
+          {nextDisplayPageArray.map((date, idx) => (
+            <CalenderPage key={idx} date={date} />
+          ))}
+        </StyledCalenderPageWrapper>
+      </StyledMoveArea>
+    </StyledCalenderDisplay>
+  );
+}
+
+function getDisplayPageArray({ curDate, page }) {
+  const displayPageArray = [curDate];
+  for (let i = 1; i < page; i++) {
+    const prevYear = displayPageArray[i - 1].year;
+    const prevMonth = displayPageArray[i - 1].month;
+    const newDate = prevMonth === 12 ? { year: prevYear + 1, month: 1 } : { year: prevYear, month: prevMonth + 1 };
+    displayPageArray.push(newDate);
+  }
+  return displayPageArray;
+}
+
+const StyledCalenderDisplay = styled.div`
+  margin: 0 auto;
+  display: flex;
+  justify-content: center;
+  ${({ page }) =>
+    `width: ${page === 1 ? 350 : 720}px;
+   `}
+  overflow-x: hidden;
+`;
+
+const StyledMoveArea = styled.div`
+  display: flex;
+  ${({ page, calenderPosition }) => {
+    if (calenderPosition === 0) return ``;
+    const diff = page === 1 ? 350 : 720;
+    return `transform: translateX(${calenderPosition * diff}px);
+      transition: transform 0.5s linear;`;
+  }};
+`;
+
+const StyledCalenderPageWrapper = styled.div`
+  display: grid;
+  justify-items: center;
+  ${({ page }) =>
+    `grid-template-columns: ${page > 1 ? `repeat(2, 1fr)` : ``};
+    column-gap: ${page > 1 ? 20 : 0}px;
+    row-gap: ${page > 2 ? 40 : 0}px;
+   `};
+`;
+
+export default CalenderCarousel;

airbnb-app/src/component/header/calender/CalenderPage.jsx → airbnb-app/src/component/header/modal/calender/CalenderPage.jsx

@@ -1,5 +1,5 @@
-import Days from '@/component/header/calender/Days';
-import DatesOfMonth from '@/component/header/calender/DatesOfMonth';
+import Days from '@calender/Days';
+import DatesOfMonth from '@calender/DatesOfMonth';
 import styled from 'styled-components';
 
 function CalenderPage({ date }) {
@@ -15,7 +15,7 @@ function CalenderPage({ date }) {
 }
 
 const StyledContainer = styled.div`
-  width: 336px;
+  width: 350px;
 `;
 
 const StyledTitle = styled.h2`