Merge pull request #262 from TEAM-SEONYAK/fix/#245/fixCalendarBetween…

…Size
TEAM-SEONYAK · Oct 21, 2024 · 41aff2c · 41aff2c
2 parents 66b98c9 + c7360a5
commit 41aff2c
Show file tree

Hide file tree

Showing 7 changed files with 186 additions and 126 deletions.
diff --git a/.stylelintrc b/.stylelintrc
@@ -13,7 +13,7 @@
       "/^border/": ["px"],
       "font-size": ["rem", "%"]
     },
-    "unit-allowed-list": ["%", "deg", "px", "rem", "ms", "vw", "s", "dvh", "turn", "vh"],
+    "unit-allowed-list": ["%", "deg", "px", "rem", "ms", "vw", "s", "dvh", "turn", "vh", "fr"],
     "declaration-empty-line-before": [
       "always",
       {

diff --git a/src/assets/svgs/ic_arrow_left_calender.svg b/src/assets/svgs/ic_arrow_left_calender.svg
diff --git a/src/assets/svgs/ic_arrow_right_calender.svg b/src/assets/svgs/ic_arrow_right_calender.svg
diff --git a/src/pages/juniorPromiseRequest/components/CalendarBottomSheet.tsx b/src/pages/juniorPromiseRequest/components/CalendarBottomSheet.tsx
@@ -6,6 +6,7 @@ import TimeList from './TimeList';
 import { useSeniorTimeQuery } from '../hooks/queries';
 import { getDayOfWeek } from '../utils/getDay';
 import Loading from '@components/commons/Loading';
+import { BottomSheetRectangleIc } from '@assets/svgs';
 
 interface BottomSheetPropType {
   selectedTime: { id: number; selectedTime: string; clickedDay: string }[];
@@ -46,6 +47,7 @@ const CalendarBottomSheet = ({
         }}
       />
       <BottomSheetWrapper $isCalendarOpen={isCalendarOpen}>
+        <BottomSheetRectangleIcon />
         <Scroll>
           <CustomCalendar
             btnId={btnId}
@@ -80,6 +82,18 @@ const Scroll = styled.div`
   overflow-y: auto;
 
   margin-bottom: 3rem;
+
+  ::-webkit-scrollbar {
+    display: none;
+  }
+`;
+
+const BottomSheetRectangleIcon = styled(BottomSheetRectangleIc)`
+  position: absolute;
+  top: 1.5rem;
+  left: 50%;
+
+  transform: translate(-50%, -50%);
 `;
 
 const Background = styled.div<{ $isCalendarOpen: boolean }>`
@@ -103,8 +117,10 @@ const BottomSheetWrapper = styled.div<{ $isCalendarOpen: boolean }>`
   bottom: 0;
   z-index: 4;
 
+  width: 100%;
   height: 100vh;
   margin-left: -2rem;
+  padding: 3.8rem 0 0;
   border-radius: 16px 16px 0 0;
 
   background: ${({ theme }) => theme.colors.grayScaleWhite};

diff --git a/src/pages/juniorPromiseRequest/components/CustomCalendar.tsx b/src/pages/juniorPromiseRequest/components/CustomCalendar.tsx
@@ -1,21 +1,17 @@
-import { BottomSheetRectangleIc } from '@assets/svgs';
 import styled from '@emotion/styled';
-import React, { useState } from 'react';
+import React from 'react';
 import Calendar from 'react-calendar';
 import 'react-calendar/dist/Calendar.css';
 import { formatCalDateToString } from '../utils/formatCalDateToString';
-import { getTomorrow } from '../utils/getTomorrow';
 import { extractValidKeys } from '../utils/getSeniorValidWeekOfDay';
+import RightArrow from '@assets/svgs/ic_arrow_right_calender.svg';
+import LeftArrow from '@assets/svgs/ic_arrow_left_calender.svg';
 
 interface CalendarTileProperties {
   date: Date;
   view: string;
 }
 
-type ValuePiece = Date | null;
-
-type Value = ValuePiece | [ValuePiece, ValuePiece];
-
 interface CustomCalendarPropType {
   btnId: number;
   setSelectedTime: React.Dispatch<React.SetStateAction<{ id: number; selectedTime: string; clickedDay: string }[]>>;
@@ -33,48 +29,45 @@ const CustomCalendar = ({ btnId, setSelectedTime, selectedTime, preferredTimeLis
     5: '금',
     6: '토',
   };
-  const preferredDaysofWeek = extractValidKeys(preferredTimeList);
 
-  const [, onChange] = useState<Value>(getTomorrow());
+  const preferredDaysofWeek = extractValidKeys(preferredTimeList);
 
   const handleDateClick = (date: string) => {
     setSelectedTime((prev) => prev.map((item) => (item.id === btnId ? { ...item, clickedDay: date } : item)));
   };
 
   const tileDisabled = ({ date, view }: CalendarTileProperties) => {
-    if (view === 'month') {
-      // 현재 날짜 이전의 날짜를 비활성화
-      if (date <= new Date()) {
-        return true;
-      }
-
-      // 이미 선택된 날짜를 비활성화
-      const formattedDate = formatCalDateToString(date);
-      if (selectedTime.some((item) => item.clickedDay === formattedDate)) {
-        return true;
-      }
-
-      // 요일을 확인하여 preferredDaysofWeek에 없는 요일을 비활성화
-      const dayOfWeek = date.getDay();
-      const dayOfWeekStr = dayOfWeekMap[dayOfWeek];
-      if (!preferredDaysofWeek.includes(dayOfWeekStr)) {
-        return true;
-      }
-    }
-    return false;
+    // 'month' 뷰가 아닌 경우엔 비활성화 X
+    if (view !== 'month') return false;
+
+    const formattedDate = formatCalDateToString(date);
+    const dayOfWeek = dayOfWeekMap[date.getDay()];
+
+    // 오늘 이전의 날짜는 비활성화
+    const isPastDate = date <= new Date();
+
+    // 이미 선택된 날짜는 비활성화
+    const isAlreadySelected = selectedTime.some((item) => item.clickedDay === formattedDate);
+
+    // 선호하는 요일이 아닌 날짜는 비활성화
+    const isNotPreferredDay = !preferredDaysofWeek.includes(dayOfWeek);
+
+    // 조건 중 하나라도 true이면 비활성화
+    return isPastDate || isAlreadySelected || isNotPreferredDay;
   };
 
-  const tileClassName = ({ date, view }: CalendarTileProperties) =>
-    view === 'month' && date <= new Date() ? 'disabled-date' : '';
+  const tileClassName = ({ date, view }: CalendarTileProperties) => {
+    return view === 'month' && date <= new Date() ? 'disabled-date' : '';
+  };
 
   return (
     <CalendarContainer>
-      <BottomSheetRectangleIcon />
       <StyledCalendar
-        onChange={onChange}
         onClickDay={(value) => handleDateClick(formatCalDateToString(value))}
         value={selectedTime[btnId].clickedDay}
         minDate={new Date()}
+        nextLabel={<img src={RightArrow} alt="right-arrow" />}
+        prevLabel={<img src={LeftArrow} alt="left-arrow" />}
         next2Label={null}
         prev2Label={null}
         showNeighboringMonth={false}
@@ -89,87 +82,87 @@ const CustomCalendar = ({ btnId, setSelectedTime, selectedTime, preferredTimeLis
 
 export default CustomCalendar;
 
-const BottomSheetRectangleIcon = styled(BottomSheetRectangleIc)`
-  margin-bottom: 0.5rem;
-  margin-left: 13rem;
-`;
-
 const CalendarContainer = styled.div`
-  width: 100vw;
-  height: auto;
-  padding: 1.5rem 3.3rem 2rem;
-  border-radius: 16px 16px 0 0;
+  display: flex;
+  justify-content: center;
 
-  background: ${({ theme }) => theme.colors.grayScaleWhite};
+  width: 100%;
+  padding: 0 3.35rem 2rem;
 `;
 
 const StyledCalendar = styled(Calendar)`
   width: 100%;
   border: none;
-  border-radius: 8px;
 
   background: ${({ theme }) => theme.colors.grayScaleWhite};
 
-  .react-calendar__navigation {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    ${({ theme }) => theme.fonts.Head1_SB_20};
-  }
+  .disabled-date {
+    color: ${({ theme }) => theme.colors.grayScaleLG2};
 
-  .react-calendar__navigation__arrow {
-    width: 2.1rem;
-    height: 1.8rem;
+    cursor: not-allowed;
   }
 
-  .react-calendar__tile {
-    max-width: 100%;
+  .react-calendar__month-view__days__day {
     ${({ theme }) => theme.fonts.Title2_M_16};
-    border-radius: 100px;
-
-    background: none;
-
-    text-align: center;
+    color: ${({ theme }) => theme.colors.grayScaleBG};
+    aspect-ratio: 1 / 1;
 
-    cursor: pointer;
+    &:disabled {
+      color: ${({ theme }) => theme.colors.grayScaleLG2};
+    }
   }
 
-  .react-calendar__tile--active {
-    border-radius: 100px;
+  .react-calendar__month-view__weekdays__weekday {
+    padding: 0;
+  }
 
-    background-color: ${({ theme }) => theme.colors.Blue};
+  .react-calendar__month-view__days__day--weekend {
+    ${({ theme }) => theme.fonts.Title2_M_16};
+    color: ${({ theme }) => theme.colors.grayScaleBG};
 
-    color: ${({ theme }) => theme.colors.grayScaleWhite} !important;
+    &:disabled {
+      color: ${({ theme }) => theme.colors.grayScaleLG2};
+    }
   }
 
   .react-calendar__month-view__weekdays {
     color: ${({ theme }) => theme.colors.grayScaleMG2};
+
     ${({ theme }) => theme.fonts.Title2_M_16};
   }
 
-  .react-calendar__tile:enabled:focus {
-    ${({ theme }) => theme.fonts.Title2_M_16};
-    background: ${({ theme }) => theme.colors.Blue};
+  .react-calendar__month-view__weekdays abbr {
+    text-decoration: none;
+  }
 
-    color: ${({ theme }) => theme.colors.grayScaleWhite};
+  .react-calendar__navigation {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+
+    height: 2.5rem;
+    ${({ theme }) => theme.fonts.Head1_SB_20};
+    margin-bottom: 2rem;
+  }
+
+  .react-calendar__navigation_label {
+    width: 12.6rem;
   }
 
   .react-calendar__navigation button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
     ${({ theme }) => theme.fonts.Head2_SB_18};
+
     min-width: 4rem;
   }
 
   .react-calendar__navigation button:disabled {
-    background: none !important;
-
-    color: ${({ theme }) => theme.colors.grayScaleDG} !important;
-  }
-
-  .react-calendar__tile--active:enabled:hover,
-  .react-calendar__tile--active:enabled:focus {
-    background: ${({ theme }) => theme.colors.Blue};
+    background: none;
 
-    color: ${({ theme }) => theme.colors.grayScaleWhite};
+    color: ${({ theme }) => theme.colors.grayScaleDG};
   }
 
   .react-calendar__navigation button:hover,
@@ -180,36 +173,58 @@ const StyledCalendar = styled(Calendar)`
     color: ${({ theme }) => theme.colors.grayScaleDG};
   }
 
-  .react-calendar__navigation__prev-button,
+  .react-calendar__navigation__arrow {
+    width: 2.1rem;
+    height: 1.8rem;
+  }
+
   .react-calendar__navigation__next-button {
-    border-radius: 100px;
+    position: absolute;
+    right: 6rem;
   }
 
-  .react-calendar__month-view__days__day--weekend {
-    ${({ theme }) => theme.fonts.Title2_M_16};
-    color: ${({ theme }) => theme.colors.grayScaleBG};
+  .react-calendar__navigation__prev-button {
+    position: absolute;
+    left: 6rem;
+  }
 
-    &:disabled {
-      color: ${({ theme }) => theme.colors.grayScaleLG2};
+  .react-calendar__navigation__label {
+    pointer-events: none;
+
+    cursor: default;
+
+    &:hover {
+      background-color: transparent;
     }
   }
 
-  .react-calendar__month-view__weekdays abbr {
-    text-decoration: none;
+  .react-calendar__tile {
+    ${({ theme }) => theme.fonts.Title2_M_16};
+    border-radius: 100px;
+
+
+    background: none;
+
+    cursor: pointer;
   }
 
-  .disabled-date {
-    color: ${({ theme }) => theme.colors.grayScaleLG2} !important;
+  .react-calendar__tile--active {
+    background-color: ${({ theme }) => theme.colors.Blue};
 
-    cursor: not-allowed;
+    color: ${({ theme }) => theme.colors.grayScaleWhite};
   }
 
-  .react-calendar__month-view__days__day {
+  .react-calendar__tile--active:enabled:hover,
+  .react-calendar__tile--active:enabled:focus {
+    background: ${({ theme }) => theme.colors.Blue};
+
+    color: ${({ theme }) => theme.colors.grayScaleWhite};
+  }
+
+  .react-calendar__tile:enabled:focus {
     ${({ theme }) => theme.fonts.Title2_M_16};
-    color: ${({ theme }) => theme.colors.grayScaleBG};
+    background: ${({ theme }) => theme.colors.Blue};
 
-    &:disabled {
-      color: ${({ theme }) => theme.colors.grayScaleLG2};
-    }
+    color: ${({ theme }) => theme.colors.grayScaleWhite};
   }
 `;