feat: 검색바에 선택된 인원 출력 기능 추가

airbnb-app/src/component/header/modal/personnel/PersonnelController.jsx

@@ -1,21 +1,22 @@
 import { useContext } from 'react';
 import styled, { useTheme } from 'styled-components';
 import { PERSONNEL_MIN as MIN, PERSONNEL_MAX as MAX } from '@/constants/PersonnelText';
+import { isMax, isMin } from '@/utils/utils';
 import { PersonnelContext } from '@/context/PersonnelProvider';
 import { AddButton, RemoveButton } from '@personnel/ControllerButtons';
 
 function PersonnelController({ title }) {
   const theme = useTheme();
-  const { personnel, addPerson, removePerson } = useContext(PersonnelContext);
+  const { personnel, addPerson, removePerson, canNotRemoveAdult } = useContext(PersonnelContext);
 
   const addBtnStyle = {
     width: '30px',
-    fill: isMax(personnel[title]) ? theme.color.grey5 : theme.color.grey3,
+    fill: isMax(personnel[title], MAX) ? theme.color.grey5 : theme.color.grey3,
   };
 
   const removeBtnStyle = {
     width: '30px',
-    fill: isMin(personnel[title]) ? theme.color.grey5 : theme.color.grey3,
+    fill: isMin(personnel[title], MIN) || canNotRemoveAdult(title) ? theme.color.grey5 : theme.color.grey3,
   };
 
   return (
@@ -39,14 +40,10 @@ function PersonnelController({ title }) {
 
 const SelectedNum = styled.span`
   display: block;
-
   width: 10px;
   font-weight: ${({ theme }) => theme.fontWeight.bold};
   font-size: ${({ theme }) => theme.fontSize.xlarge};
   color: ${({ theme }) => theme.color.grey1};
 `;
 
-const isMax = num => num === MAX;
-const isMin = num => num === MIN;
-
 export default PersonnelController;

airbnb-app/src/component/header/search-bar/ResetButton.jsx

@@ -1,23 +1,25 @@
-import { useContext } from 'react';
 import ClearIcon from '@mui/icons-material/Clear';
 import styled from 'styled-components';
-import { CalenderDateContext } from '@/context/CalenderDateProvider';
-
-function ResetButton({ display = 'none' }) {
-  const { resetInfos } = useContext(CalenderDateContext);
 
+function ResetButton({ display = 'none', onClick }) {
   const handleClick = e => {
     e.preventDefault();
-    resetInfos();
+    onClick();
   };
 
   return (
-    <IconButton display={display} onClick={handleClick} onMouseDown={e => e.preventDefault()}>
-      <ClearIcon fontSize="small" />
-    </IconButton>
+    <Box>
+      <IconButton display={display} onClick={handleClick} onMouseDown={e => e.preventDefault()}>
+        <ClearIcon fontSize="small" />
+      </IconButton>
+    </Box>
   );
 }
 
+const Box = styled.div`
+  width: 5px;
+`;
+
 const IconButton = styled.button`
   display: ${({ display }) => display};
   margin-left: auto;

airbnb-app/src/component/header/search-bar/SearchBar.jsx

@@ -1,22 +1,36 @@
 import { useContext } from 'react';
 import styled from 'styled-components';
 import SEARCH_INPUT_TEXT from '@/constants/searchBarText';
-import { SearchBarContext } from '@/context/SearchBarProvider';
 import SearchInput from '@/component/header/search-bar/SearchInput';
 import SearchInputModal from './SearchInputModal';
+import { SearchBarContext } from '@/context/SearchBarProvider';
 import { CalenderDateContext } from '@/context/CalenderDateProvider';
+import { PersonnelContext } from '@/context/PersonnelProvider';
 
 const searchInputText = Object.entries(SEARCH_INPUT_TEXT);
 
 function SearchBar() {
   const { isFocus, resetFocusState } = useContext(SearchBarContext);
-  const { checkInValue, checkOutValue, resetCurDate } = useContext(CalenderDateContext);
+  const { checkInValue, checkOutValue, resetCurDate, resetCalenderInfos } = useContext(CalenderDateContext);
+  const { personnelValue, resetPersonnel } = useContext(PersonnelContext);
 
-  const values = {
-    체크인: checkInValue,
-    체크아웃: checkOutValue,
-    요금: `~`,
-    인원: `게스트 명, 유아 명`,
+  const inputProps = {
+    체크인: {
+      value: checkInValue,
+      resetBtnHandler: resetCalenderInfos,
+    },
+    체크아웃: {
+      value: checkOutValue,
+      resetBtnHandler: resetCalenderInfos,
+    },
+    요금: {
+      value: `~`,
+      resetBtnHandler: () => {},
+    },
+    인원: {
+      value: personnelValue,
+      resetBtnHandler: resetPersonnel,
+    },
   };
 
   function handleBlur() {
@@ -29,10 +43,10 @@ function SearchBar() {
       <Form method="POST" bgColor={isFocus ? 'grey6' : 'white'} onBlur={handleBlur}>
         {searchInputText.map(([key, { label, placeholder }], index) => (
           <SearchInput
+            {...inputProps[label]}
             key={key}
             label={label}
             placeholder={placeholder}
-            value={values[label]}
             isLastElement={isLastElement(index)}
           />
         ))}

airbnb-app/src/component/header/search-bar/SearchButton.jsx

@@ -1,10 +1,12 @@
 import SearchRoundedIcon from '@mui/icons-material/SearchRounded';
-import styled from 'styled-components';
+import styled, { useTheme } from 'styled-components';
 
 function SearchButton({ open = false }) {
+  const theme = useTheme();
+
   return (
     <SubmitButton type="submit" padding={open ? '8px 16px 8px 8px' : '8px'}>
-      <SearchRoundedIcon />
+      <SearchRoundedIcon sx={{ fill: theme.color.white }} />
       <ButtonText display={open ? 'block' : 'none'}>검색</ButtonText>
     </SubmitButton>
   );

airbnb-app/src/component/header/search-bar/SearchInput.jsx

@@ -4,18 +4,23 @@ import ResetButton from '@/component/header/search-bar/ResetButton';
 import SearchButton from '@/component/header/search-bar/SearchButton';
 import { SearchBarContext } from '@/context/SearchBarProvider';
 
-function SearchInput({ label, placeholder, value, isLastElement }) {
+function SearchInput({ value, resetBtnHandler, label, placeholder, isLastElement }) {
   const { isFocus, updateFocusState, currentInput } = useContext(SearchBarContext);
 
   const isCurrentInput = currentInput === label;
 
   return (
-    <Container flexGrow={isLastElement ? 2 : 1} bgColor={currentInput === label ? 'white' : null} tabIndex="0" onFocus={() => updateFocusState(label)}>
+    <Container
+      flexGrow={isLastElement ? 2 : 1}
+      bgColor={isCurrentInput ? 'white' : null}
+      tabIndex="0"
+      onFocus={() => updateFocusState(label)}
+    >
       <div>
         <Label>{label}</Label>
         <Input type="text" placeholder={placeholder} value={value} readOnly />
       </div>
-      <ResetButton display={value && isCurrentInput ? 'block' : 'none'} />
+      <ResetButton display={value && isCurrentInput ? 'block' : 'none'} onClick={resetBtnHandler} />
       {isLastElement ? <SearchButton open={isFocus} /> : <Line />}
     </Container>
   );

airbnb-app/src/context/CalenderDateProvider.jsx

@@ -30,7 +30,7 @@ export function CalenderDateProvider({ children }) {
   const checkInValue = checkInInfo ? `${checkInInfo.month}월 ${checkInInfo.date}일` : '';
   const checkOutValue = checkOutInfo ? `${checkOutInfo.month}월 ${checkOutInfo.date}일` : '';
 
-  const resetInfos = () => {
+  const resetCalenderInfos = () => {
     setCheckInInfo(null);
     setCheckOutInfo(null);
   };
@@ -58,7 +58,7 @@ export function CalenderDateProvider({ children }) {
         checkOutTime,
         checkInValue,
         checkOutValue,
-        resetInfos,
+        resetCalenderInfos,
         resetCurDate,
       }}
     >

airbnb-app/src/context/PersonnelProvider.jsx

@@ -1,9 +1,11 @@
 import { createContext, useState } from 'react';
 import { PERSONNEL_STATE_KEY, PERSONNEL_MIN as MIN, PERSONNEL_MAX as MAX } from '@/constants/PersonnelText';
 
-const states = Object.values(PERSONNEL_STATE_KEY);
+const { ADULT, CHILD, INFANT } = PERSONNEL_STATE_KEY;
+const stateKeys = Object.values(PERSONNEL_STATE_KEY);
+
 const initialPersonnel = (() => {
-  return states.reduce((initialPersonnel, state) => {
+  return stateKeys.reduce((initialPersonnel, state) => {
     initialPersonnel[state] = 0;
     return initialPersonnel;
   }, {});
@@ -14,24 +16,54 @@ const PersonnelContext = createContext({});
 function PersonnelProvider({ children }) {
   const [personnel, setPersonnel] = useState(initialPersonnel);
 
+  const addAdultTogether = title => {
+    setPersonnel(prevState => {
+      return { ...prevState, [ADULT]: prevState[title] + 1, [title]: prevState[title] + 1 };
+    });
+  };
+
+  const isNoAdult = title => personnel[ADULT] === 0 && (title === CHILD || title === INFANT);
+
   const addPerson = title => {
     if (personnel[title] === MAX) return;
 
-    setPersonnel(prevState => {
-      return { ...prevState, [title]: prevState[title] + 1 };
-    });
+    if (isNoAdult(title)) {
+      addAdultTogether(title);
+    } else {
+      setPersonnel(prevState => {
+        return { ...prevState, [title]: prevState[title] + 1 };
+      });
+    }
   };
 
+  const canNotRemoveAdult = title =>
+    title === ADULT && personnel[ADULT] === 1 && (personnel[CHILD] || personnel[INFANT]);
+
   const removePerson = title => {
     if (personnel[title] === MIN) return;
+    if (canNotRemoveAdult(title)) return;
 
     setPersonnel(prevState => {
       return { ...prevState, [title]: prevState[title] - 1 };
     });
   };
 
+  const resetPersonnel = () => {
+    setPersonnel(initialPersonnel);
+  };
+
+  const personnelValue = (() => {
+    if (personnel[ADULT] + personnel[CHILD] + personnel[INFANT] === 0) return '';
+
+    return `게스트${personnel[ADULT] + personnel[CHILD]} 명, 유아${personnel[INFANT]} 명`;
+  })();
+
   return (
-    <PersonnelContext.Provider value={{ personnel, addPerson, removePerson }}>{children}</PersonnelContext.Provider>
+    <PersonnelContext.Provider
+      value={{ personnel, personnelValue, addPerson, removePerson, canNotRemoveAdult, resetPersonnel }}
+    >
+      {children}
+    </PersonnelContext.Provider>
   );
 }
 

airbnb-app/src/utils/utils.js

@@ -0,0 +1,2 @@
+export const isMax = (num, max) => num === max;
+export const isMin = (num, min) => num === min;