From 9e001d67b2fa4ed8cf7490f899ba25bfcccff804 Mon Sep 17 00:00:00 2001
From: Jungwon Lee <leejungwon96@gmail.com>
Date: Mon, 31 May 2021 22:01:19 +0900
Subject: [PATCH] =?UTF-8?q?Refactor.=202=EC=B0=A8=EB=A6=AC=EB=B7=B0=20?=
 =?UTF-8?q?=EB=B0=9B=EC=9D=80=EA=B2=83=20=EB=B0=98=EC=98=81=20d-h-k/airbnb?=
 =?UTF-8?q?/#74?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../CheckModal/CalendarCarousel/Calendar.jsx  | 33 +++++++++++--------
 .../Atoms/Modal/PeopleModal/PeopleCard.jsx    |  7 ++--
 .../Atoms/Search/SearchBtn/index.jsx          |  2 +-
 3 files changed, 25 insertions(+), 17 deletions(-)

diff --git a/FE/airbnb-fe/src/components/Atoms/Modal/CheckModal/CalendarCarousel/Calendar.jsx b/FE/airbnb-fe/src/components/Atoms/Modal/CheckModal/CalendarCarousel/Calendar.jsx
index 10e34ced4..495987160 100644
--- a/FE/airbnb-fe/src/components/Atoms/Modal/CheckModal/CalendarCarousel/Calendar.jsx
+++ b/FE/airbnb-fe/src/components/Atoms/Modal/CheckModal/CalendarCarousel/Calendar.jsx
@@ -5,21 +5,25 @@ import YearMonth from './YearMonth';
 import DayViewTR from './DayViewTR';
 
 const Calendar = () => {
+  const centerPosition = -27.2;
   const [calRange, setCalRange] = useState([-1, 0, 1, 2]);
-  const [currentDistance, setCurrentDistance] = useState(-27.2); //가운데 = -27.2rem
+  const [currentDistance, setCurrentDistance] = useState(centerPosition);
   const [disabled, setDisabled] = useState(false);
   const oneMove = 25.3;
 
   const preventClick = () => {
-    setTimeout(() => {
-      setDisabled(false);
-    }, 200);
+    return new Promise((resolve, reject) => {
+      setTimeout(() => {
+        resolve(false);
+      }, 200);
+    });
   };
 
-  const handleLeftClick = () => {
+  const handleLeftClick = async () => {
     if (disabled) return;
     setDisabled(true);
-    preventClick();
+    const boolean = await preventClick();
+    setDisabled(boolean);
     setCurrentDistance((currentDistance) => currentDistance + oneMove);
     setCalRange((calRange) => {
       const nextRange = calRange.map((r) => r - 1);
@@ -27,10 +31,11 @@ const Calendar = () => {
     });
   };
 
-  const handleRightClick = () => {
+  const handleRightClick = async () => {
     if (disabled) return;
     setDisabled(true);
-    preventClick();
+    const boolean = await preventClick();
+    setDisabled(boolean);
     setCurrentDistance((currentDistance) => currentDistance - oneMove);
     setCalRange((calRange) => {
       const nextRange = calRange.map((r) => r + 1);
@@ -39,7 +44,7 @@ const Calendar = () => {
   };
 
   const onSlideEnd = () => {
-    setCurrentDistance(-27.2);
+    setCurrentDistance(centerPosition);
   };
 
   return (
@@ -49,6 +54,7 @@ const Calendar = () => {
         <YearMonthUL
           currentDistance={currentDistance}
           onTransitionEnd={() => onSlideEnd()}
+          centerPosition={centerPosition}
         >
           {calRange.map((range, idx) => (
             <YearMonthLI key={idx}>
@@ -66,6 +72,7 @@ const Calendar = () => {
         <CalTableWrapper
           currentDistance={currentDistance}
           onTransitionEnd={() => onSlideEnd()}
+          centerPosition={centerPosition}
         >
           {calRange.map((range, idx) => (
             <SingleCalendar key={idx} range={range} />
@@ -92,8 +99,8 @@ const CalendarTop = styled.div`
 const CalTableWrapper = styled.div`
   display: flex;
   transform: ${({ currentDistance }) => `translateX(${currentDistance}rem)`};
-  transition: ${({ currentDistance }) =>
-    currentDistance === -27.2 ? '' : '0.2s ease-in-out'};
+  transition: ${({ currentDistance, centerPosition }) =>
+    currentDistance === centerPosition ? '' : '0.2s ease-in-out'};
 `;
 const CalendarBottom = styled.div`
   display: flex;
@@ -107,8 +114,8 @@ const CalendarMiddle = styled.div`
 const YearMonthUL = styled.ul`
   display: flex;
   transform: ${({ currentDistance }) => `translateX(${currentDistance}rem)`};
-  transition: ${({ currentDistance }) =>
-    currentDistance === -27.2 ? '' : '0.2s ease-in-out'};
+  transition: ${({ currentDistance, centerPosition }) =>
+    currentDistance === centerPosition ? '' : '0.2s ease-in-out'};
 `;
 
 const YearMonthLI = styled.li`
diff --git a/FE/airbnb-fe/src/components/Atoms/Modal/PeopleModal/PeopleCard.jsx b/FE/airbnb-fe/src/components/Atoms/Modal/PeopleModal/PeopleCard.jsx
index deddc6691..ac69e5d11 100644
--- a/FE/airbnb-fe/src/components/Atoms/Modal/PeopleModal/PeopleCard.jsx
+++ b/FE/airbnb-fe/src/components/Atoms/Modal/PeopleModal/PeopleCard.jsx
@@ -6,9 +6,10 @@ import { SearchContext } from '../../Search';
 const PeopleCard = ({ type: peopleType }) => {
   const { peopleCount, peopleDispatch } = useContext(SearchContext);
   const peopleTypeContent = peopleTypeJson[peopleType];
+  const maxPeopleCount = 8;
 
-  const setCountDisable = () =>
-    peopleCount['adult'] + peopleCount['child'] >= 8;
+  const setCountDisable = (maxPeopleCount) =>
+    peopleCount['adult'] + peopleCount['child'] >= maxPeopleCount;
 
   const handleBabyClick = (type) => {
     if (type === 'baby') {
@@ -40,7 +41,7 @@ const PeopleCard = ({ type: peopleType }) => {
         </CountButton>
         <CountNumber>{peopleCount[peopleType]}</CountNumber>
         <CountButton
-          disabled={setCountDisable()}
+          disabled={setCountDisable(maxPeopleCount)}
           onClick={() => handleBabyClick(peopleType)}
         >
           +
diff --git a/FE/airbnb-fe/src/components/Atoms/Search/SearchBtn/index.jsx b/FE/airbnb-fe/src/components/Atoms/Search/SearchBtn/index.jsx
index 7c3d20e4a..4c65446bd 100644
--- a/FE/airbnb-fe/src/components/Atoms/Search/SearchBtn/index.jsx
+++ b/FE/airbnb-fe/src/components/Atoms/Search/SearchBtn/index.jsx
@@ -34,7 +34,7 @@ const SearchBtn = () => {
             <SearchButtonSvg />
           </SearchSvg>
         </SearchSvgDiv>
-        {isModalClicked ? <SearchWordDiv>검색</SearchWordDiv> : null}
+        {isModalClicked && <SearchWordDiv>검색</SearchWordDiv>}
       </SearchBtnDiv>
     </Link>
   );