[FE] [Team-22/도비 & JS] 2주차 첫번째 PR (#154)

* Refactor: PR 리뷰를 바탕으로 코드 수정 - 모달창 경로 수정 - styled-components와 mui 구분 - 그 외는 리뷰 참고 Co-authored-by: herrakam <herrakam@users.noreply.github.com> * [FE] result페이지 UI 구현 (#33) * Design: 기존 스타일 수정 - 라우터에 따른 스타일 변경 추가 Co-authored-by: herrakam <herrakam@users.noreply.github.com> * Design: Result 페이지 UI 구현 Co-authored-by: herrakam <herrakam@users.noreply.github.com> * Rename: Hotel.tsx 파일 경로 이동 * Design: result 페이지의 숙소 리스트 컴포넌트와 일부 컴포넌트의 스타일 변경 * Design: Hotel 컴포넌트와 관련된 스켈레톤 UI 생성 * Refactoer: 서치바 리팩토링 - 각 컴포넌트를 공통된 스타일 컴포넌트로 변경 - 일부 태그 변경 - hover 이펙트 추가 Co-authored-by: herrakam <herrakam@users.noreply.github.com> * Fix: PR 리뷰 반영 - InputState 네이밍 변경 - position의 타입 지정은 추후 수정하기 Co-authored-by: herrakam <herrakam@users.noreply.github.com> * 가격, 요금, 인원에 대한 Context 작성 (#47) * Feat : PeriodContext 구현, PeriodModal과 연결중 * Feat: PriceContext와 PersonnelContext 구현 * Feat: Context 적용 * Design: Modal display 변경 Co-authored-by: SeungHyun <fm10033@gmail.com> * Feat: 각 영역 클릭시 모달 여닫는 기는 구현 * Feat : periodContext 로직 최신 날짜 반영으로 변경, modal에 적용 * Fix: 각 영역의 ID값으로 clickModal 함수를 실행하도록 수정 * Fix: 중복되는 함수를 Props로 받도록 수정 * Design : 달력 기본 레이아웃 구현 * Feat: 각 영역 클릭시 강조되는 효과 추가 * Feat : 화살표 클릭시 달 바뀌는 기능 구현 * Feat: 모달이 활성화되면 각 영역의 취소버튼이 보이도록 추가 * Feat : 달력 요일 구현 * Refact : 화살표 클릭시 달 변경 1월~12월 까지만 동작하게 변경 * Refactor: 재사용 가능한 컴포넌트로 분리 * Fix: id 속성을 dataset 으로 변경 * Refactor: ModalProvider 내부 함수를 useModal로 분리 * Style: 불필요한 주석 제거 * Fix: InputButton에 defaultProps 설정 * Style: 의미없는 매직넘버 제거 * Feat: 유저 메뉴와 관련된 컴포넌트 분리 * Refactor: pathname 처리 로직 수정 * Feat: 검색버튼 클릭시 result 페이지로 이동하도록 구현 Co-authored-by: herrakam <herrakam@users.noreply.github.com> Co-authored-by: SeungHyun <fm10033@gmail.com>
codesquad-members-2022 · Jun 1, 2022 · 69f94b4 · 69f94b4
1 parent 23c2cd0
commit 69f94b4
Show file tree

Hide file tree

Showing 24 changed files with 702 additions and 158 deletions.
diff --git a/fe/src/App.tsx b/fe/src/App.tsx
@@ -4,13 +4,22 @@ import { theme as MuiGlobalTheme } from 'styles/GlobalStyles';
 import { theme as ScGlobalTheme } from 'styles/theme';
 
 import Router from 'Router';
+import { PersonnalProvider } from 'contexts/PersonnelContext';
+import { PriceProvider } from 'contexts/PriceContext';
+import { PeriodPriovider } from 'contexts/periodContext';
 
 function App() {
   return (
     <MuiThemeProvider theme={MuiGlobalTheme}>
       <CssBaseline />
       <StyledThemeProvider theme={ScGlobalTheme}>
-        <Router />
+        <PeriodPriovider>
+          <PersonnalProvider>
+            <PriceProvider>
+              <Router />
+            </PriceProvider>
+          </PersonnalProvider>
+        </PeriodPriovider>
       </StyledThemeProvider>
     </MuiThemeProvider>
   );

diff --git a/fe/src/components/Calendar.tsx b/fe/src/components/Calendar.tsx
@@ -0,0 +1,92 @@
+import { usePeriodDispatch } from 'contexts/periodContext';
+import { ReactComponent as LeftIcon } from 'images/FE_숙소예약서비스/Property 1=chevron-left.svg';
+import { ReactComponent as RightIcon } from 'images/FE_숙소예약서비스/Property 1=chevron-right.svg';
+import styled from 'styled-components';
+
+type CalendarProps = {
+  month: number;
+};
+
+function Calendar({ month }: CalendarProps) {
+  const days: Array<string> = ['일', '월', '화', '수', '목', '금', '토'];
+  const daysComp = days.map((day) => {
+    return <Day>{day}</Day>;
+  });
+  const { setCheckIn, setCheckOut, setMonth } = usePeriodDispatch();
+
+  function increaseMonth() {
+    if (month < 10) setMonth(month + 2);
+  }
+  function decreaseMonth() {
+    if (month > 0) setMonth(month - 2);
+  }
+  return (
+    <>
+      <SlideBtnWrap>
+        <PrevBtn
+          onClick={() => {
+            decreaseMonth();
+          }}
+        />
+        <ThisMonthTitle>{month + 1}월</ThisMonthTitle>
+        <NextMonthTitle>{month + 2}월</NextMonthTitle>
+        <NextBtn
+          onClick={() => {
+            increaseMonth();
+          }}
+        />
+      </SlideBtnWrap>
+      <CalendarWrap>
+        <ThisMonth>{daysComp}</ThisMonth>
+        <NextMonth>다음달</NextMonth>
+      </CalendarWrap>
+    </>
+  );
+}
+
+const SlideBtnWrap = styled.div`
+  width: 100%;
+  height: 24px;
+  display: flex;
+  justify-content: space-between;
+  position: relative;
+  margin-bottom: 24px;
+`;
+const PrevBtn = styled(LeftIcon)`
+  position: absolute;
+`;
+const ThisMonthTitle = styled.div`
+  width: 336px;
+  display: flex;
+  justify-content: center;
+  ${({ theme }) => theme.fontStyles.bold16px};
+`;
+const NextMonthTitle = styled(ThisMonthTitle)``;
+const NextBtn = styled(RightIcon)`
+  position: absolute;
+  right: 0;
+  cursor: pointer;
+`;
+const CalendarWrap = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+`;
+const ThisMonth = styled.div`
+  width: 336px;
+  height: 336px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+const Day = styled.div`
+  width: 48px;
+  height: 24px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  ${({ theme }) => theme.fontStyles.normal12px}
+  color : ${({ theme }) => theme.colors.grey3}
+`;
+const NextMonth = styled(ThisMonth)``;
+export default Calendar;
diff --git a/fe/src/components/Header/MiniSearchBar/index.tsx b/fe/src/components/Header/MiniSearchBar/index.tsx
@@ -2,18 +2,24 @@ import styled from 'styled-components';
 import { Divider } from '@mui/material';
 import { StyledSearchIcon } from 'components/Header/SearchBar/searchBar.styled';
 
+import { usePersonnelState } from 'contexts/PersonnelContext';
+import { usePriceState } from 'contexts/PriceContext';
+
 type MyProps = {
   changeSearchBar: () => void;
 };
 
 function MiniSearchBar({ changeSearchBar }: MyProps) {
+  const { counterText } = usePersonnelState();
+  const { rangeText } = usePriceState();
+
   return (
     <MiniSearchBarWrap onClick={changeSearchBar}>
       <MiniBarButton aria-label="일정 입력 버튼">일정 입력</MiniBarButton>
       <Divider orientation="vertical" />
-      <PriceButton aria-label="요금 입력 버튼">₩100,000~1,000,000</PriceButton>
+      <PriceButton aria-label="요금 입력 버튼">{rangeText}</PriceButton>
       <Divider orientation="vertical" />
-      <MiniBarButton aria-label="인원 입력 버튼">인원 입력</MiniBarButton>
+      <MiniBarButton aria-label="인원 입력 버튼">{counterText}</MiniBarButton>
       <MiniSearchBtn type="button" aria-label="결과 찾기 버튼">
         <MiniSearchIcon />
       </MiniSearchBtn>

diff --git a/fe/src/components/Header/SearchBar/Period.tsx b/fe/src/components/Header/SearchBar/Period.tsx
@@ -1,36 +1,57 @@
 import { Divider } from '@mui/material';
-import {
-  CommonContainer,
-  CommonButton,
-  Label,
-  InputState,
-  StyledCrossIcon,
-} from 'components/Header/SearchBar/searchBar.styled';
+import { CommonContainer } from 'components/Header/SearchBar/searchBar.styled';
+import { ClickModal } from '.';
+import InputButton from './common/InputButton';
+import ResetButton from './common/ResetButton';
 
-function Period() {
+function Period({ clickModal, isClicked, focusModal }: ClickModal) {
   return (
     <>
-      <CommonContainer>
-        <CommonButton aria-label="체크인 날짜 입력 버튼" style={{ paddingLeft: '24px' }}>
-          <Label>체크인</Label>
-          <InputState>날짜 입력</InputState>
-        </CommonButton>
-        <button type="button" aria-label="날짜 입력 취소 버튼">
-          <StyledCrossIcon />
-        </button>
-      </CommonContainer>
-      <Divider orientation="vertical" sx={{ height: '60%' }} />
-      <CommonContainer>
-        <CommonButton aria-label="체크아웃 날짜 입력 버튼">
-          <Label>체크아웃</Label>
-          <InputState>날짜 입력</InputState>
-        </CommonButton>
-        <button type="button" aria-label="날짜 입력 취소 버튼">
-          <StyledCrossIcon />
-        </button>
-      </CommonContainer>
+      <CheckIn clickModal={clickModal} isClicked={isClicked} focusModal={focusModal} />
+      {focusModal === '' && <Divider orientation="vertical" sx={{ height: '60%' }} />}
+      <CheckOut clickModal={clickModal} isClicked={isClicked} focusModal={focusModal} />
     </>
   );
 }
 
+function CheckIn({ clickModal, isClicked, focusModal }: ClickModal) {
+  const FILTER_ID = 'CHECK_IN';
+  const BUTTON_INFO = {
+    id: FILTER_ID,
+    title: '체크인',
+    inputText: '날짜 입력',
+    ariaLabel: '체크인 날짜 입력 버튼',
+  };
+  const RESET_BUTTON_ARIA_LABEL = '날짜 입력 취소 버튼';
+
+  return (
+    <CommonContainer isClicked={isClicked} focusModal={focusModal} id={FILTER_ID}>
+      <InputButton
+        clickModal={clickModal}
+        buttonInfo={BUTTON_INFO}
+        styleOptions={{ paddingLeft: '24px' }}
+      />
+      {isClicked && focusModal === FILTER_ID && <ResetButton ariaLabel={RESET_BUTTON_ARIA_LABEL} />}
+    </CommonContainer>
+  );
+}
+
+function CheckOut({ clickModal, isClicked, focusModal }: ClickModal) {
+  const FILTER_ID = 'CHECK_OUT';
+  const BUTTON_INFO = {
+    id: FILTER_ID,
+    title: '체크아웃',
+    inputText: '날짜 입력',
+    ariaLabel: '체크아웃 날짜 입력 버튼',
+  };
+  const RESET_BUTTON_ARIA_LABEL = '날짜 입력 취소 버튼';
+
+  return (
+    <CommonContainer isClicked={isClicked} focusModal={focusModal} id={FILTER_ID}>
+      <InputButton clickModal={clickModal} buttonInfo={BUTTON_INFO} />
+      {isClicked && focusModal === FILTER_ID && <ResetButton ariaLabel={RESET_BUTTON_ARIA_LABEL} />}
+    </CommonContainer>
+  );
+}
+
 export default Period;
diff --git a/fe/src/components/Header/SearchBar/Personnel.tsx b/fe/src/components/Header/SearchBar/Personnel.tsx
@@ -1,29 +1,31 @@
-import styled from 'styled-components';
-import {
-  CommonButton,
-  Label,
-  InputState,
-  StyledCrossIcon,
-} from 'components/Header/SearchBar/searchBar.styled';
+import { usePersonnelState } from 'contexts/PersonnelContext';
+
+import { ClickModal } from '.';
+import ResetButton from './common/ResetButton';
+import InputButton from './common/InputButton';
+
+function Personnel({ clickModal, isClicked, focusModal }: ClickModal) {
+  const { counterText } = usePersonnelState();
+
+  const FILTER_ID = 'PERSONNEL';
+  const BUTTON_INFO = {
+    id: FILTER_ID,
+    title: '인원',
+    inputText: counterText,
+    ariaLabel: '게스트 추가 버튼',
+  };
+  const RESET_BUTTON_ARIA_LABEL = '게스트 추가 취소 버튼';
 
-function Personnel() {
   return (
     <>
-      <CommonButton aria-label="게스트 추가 버튼" style={{ width: '124px' }}>
-        <Label>인원</Label>
-        <PersonnelInputState>게스트 2명, 유아 2명</PersonnelInputState>
-      </CommonButton>
-      <button type="button" aria-label="게스트 추가 취소 버튼">
-        <StyledCrossIcon />
-      </button>
+      <InputButton
+        clickModal={clickModal}
+        buttonInfo={BUTTON_INFO}
+        styleOptions={{ width: '124px' }}
+      />
+      {isClicked && focusModal === FILTER_ID && <ResetButton ariaLabel={RESET_BUTTON_ARIA_LABEL} />}
     </>
   );
 }
 
-const PersonnelInputState = styled(InputState)`
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-`;
-
 export default Personnel;
diff --git a/fe/src/components/Header/SearchBar/Price.tsx b/fe/src/components/Header/SearchBar/Price.tsx
@@ -1,21 +1,27 @@
-import {
-  CommonContainer,
-  CommonButton,
-  Label,
-  InputState,
-  StyledCrossIcon,
-} from 'components/Header/SearchBar/searchBar.styled';
+import { usePriceState } from 'contexts/PriceContext';
+
+import { CommonContainer } from 'components/Header/SearchBar/searchBar.styled';
+import ResetButton from './common/ResetButton';
+import InputButton from './common/InputButton';
+
+import { ClickModal } from '.';
+
+function Price({ clickModal, isClicked, focusModal }: ClickModal) {
+  const { rangeText } = usePriceState();
+
+  const FILTER_ID = 'PRICE';
+  const BUTTON_INFO = {
+    id: FILTER_ID,
+    title: '요금',
+    inputText: rangeText,
+    ariaLabel: '요금 입력 버튼',
+  };
+  const RESET_BUTTON_ARIA_LABEL = '요금 입력 취소 버튼';
 
-function Price() {
   return (
-    <CommonContainer>
-      <CommonButton aria-label="요금 입력 버튼">
-        <Label>요금</Label>
-        <InputState>₩100,000~1,000,000</InputState>
-      </CommonButton>
-      <button type="button" aria-label="요금 입력 취소 버튼">
-        <StyledCrossIcon />
-      </button>
+    <CommonContainer isClicked={isClicked} focusModal={focusModal} id={FILTER_ID}>
+      <InputButton clickModal={clickModal} buttonInfo={BUTTON_INFO} />
+      {isClicked && focusModal === FILTER_ID && <ResetButton ariaLabel={RESET_BUTTON_ARIA_LABEL} />}
     </CommonContainer>
   );
 }

diff --git a/fe/src/components/Header/SearchBar/SearchButton.tsx b/fe/src/components/Header/SearchBar/SearchButton.tsx
@@ -2,12 +2,16 @@ import {
   SearchButton as SearchButtonContainer,
   StyledSearchIcon,
 } from 'components/Header/SearchBar/searchBar.styled';
+import { ModalContext } from 'contexts/ModalContext';
+import { useContext } from 'react';
 
 function SearchButton() {
+  const { focusModal } = useContext(ModalContext);
+
   return (
-    <SearchButtonContainer aria-label="결과 찾기 버튼">
+    <SearchButtonContainer href="/result" aria-label="결과 찾기 버튼">
       <StyledSearchIcon />
-      <span>검색</span>
+      {focusModal !== '' && <span>검색</span>}
     </SearchButtonContainer>
   );
 }

diff --git a/fe/src/components/Header/SearchBar/common/InputButton.tsx b/fe/src/components/Header/SearchBar/common/InputButton.tsx
@@ -0,0 +1,38 @@
+import { CommonButton, Label, SelectedOption } from 'components/Header/SearchBar/searchBar.styled';
+
+type ButtonInfo = {
+  id: string | undefined;
+  title: string;
+  inputText: string;
+  ariaLabel: string;
+};
+
+type Style = {
+  [key: string]: number | string;
+};
+
+type InputButtonType = {
+  clickModal: (e: React.MouseEvent<HTMLElement>) => void;
+  buttonInfo: ButtonInfo;
+  styleOptions?: Style;
+};
+
+function InputButton({ clickModal, buttonInfo, styleOptions }: InputButtonType) {
+  return (
+    <CommonButton
+      onClick={clickModal}
+      aria-label={buttonInfo.ariaLabel}
+      style={styleOptions}
+      data-id={buttonInfo.id}
+    >
+      <Label>{buttonInfo.title}</Label>
+      <SelectedOption>{buttonInfo.inputText}</SelectedOption>
+    </CommonButton>
+  );
+}
+
+InputButton.defaultProps = {
+  styleOptions: undefined,
+};
+
+export default InputButton;
diff --git a/fe/src/components/Header/SearchBar/common/ResetButton.tsx b/fe/src/components/Header/SearchBar/common/ResetButton.tsx
@@ -0,0 +1,15 @@
+import { StyledCrossIcon } from 'components/Header/SearchBar/searchBar.styled';
+
+type Aria = {
+  ariaLabel: string;
+};
+
+function ResetButton({ ariaLabel }: Aria) {
+  return (
+    <button type="button" aria-label={ariaLabel}>
+      <StyledCrossIcon />
+    </button>
+  );
+}
+
+export default ResetButton;