feat: 시작 시간과 끝 시간이 같을 때 허용하지 않기

dnd-side-project · Aug 8, 2023 · 698afd5 · 698afd5
1 parent a9ef8fd
commit 698afd5
Show file tree

Hide file tree

Showing 8 changed files with 54 additions and 72 deletions.
diff --git a/src/components/addCalendar/AddCalendar.tsx b/src/components/addCalendar/AddCalendar.tsx
@@ -6,7 +6,9 @@ import dayjs from 'dayjs';
 import calendarNextMonth from '../../assets/icons/calendarNextMonth.svg';
 import calendarPrevMonth from '../../assets/icons/calendarPrevMonth.svg';
 
-import { AddCalendarType } from './AddCalendar.types';
+import { useGetAvailableTimesByOne } from '../../queries/availableTimes/useGetAvailableTimesByOne';
+import { usePutAvailableTimes } from '../../queries/availableTimes/usePutAvailableTimes';
+import { ROUTES } from '../../constants/ROUTES';
 
 import {
   Wrapper,
@@ -16,9 +18,7 @@ import {
 } from './AddCalendar.styles';
 import BottomButton from '../bottomButton/BottomButton';
 
-import { useGetAvailableTimesByOne } from '../../queries/availableTimes/useGetAvailableTimesByOne';
-import { usePutAvailableTimes } from '../../queries/availableTimes/usePutAvailableTimes';
-import { ROUTES } from '../../constants/ROUTES';
+import { AddCalendarType } from './AddCalendar.types';
 
 const AddCalendar = ({
   dates,
@@ -140,7 +140,6 @@ const AddCalendar = ({
 
       <BottomButton
         onClick={handleApplyClick}
-        navigate={goToCurrent}
         text="등록하기"
         isActivated={true}
       />

diff --git a/src/components/bottomButton/BottomButton.styles.ts b/src/components/bottomButton/BottomButton.styles.ts
@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 import theme from '../../styles/theme';
 
-export const BottomButtonContainer = styled.div`
+export const Cover = styled.div`
   position: fixed;
   bottom: 0;
   width: 100%;

diff --git a/src/components/bottomButton/BottomButton.tsx b/src/components/bottomButton/BottomButton.tsx
@@ -1,13 +1,13 @@
-import { Wrapper, BottomButtonContainer } from './BottomButton.styles';
-// import { BottomButtonType } from './BottomButton.types';
+import { Cover, Wrapper } from './BottomButton.styles';
+import { BottomButtonType } from './BottomButton.types';
 
-const BottomButton = ({ onClick, text, isActivated }: any) => {
+const BottomButton = ({ text, isActivated, onClick }: BottomButtonType) => {
   return (
-    <BottomButtonContainer>
+    <Cover>
       <Wrapper onClick={onClick} isActivated={isActivated}>
         {text}
       </Wrapper>
-    </BottomButtonContainer>
+    </Cover>
   );
 };
 

diff --git a/src/components/bottomButton/BottomButton.types.ts b/src/components/bottomButton/BottomButton.types.ts
@@ -1,5 +1,5 @@
 export interface BottomButtonType {
-  navigate: any;
+  onClick?: () => void;
   text: string;
   isActivated: boolean;
 }
diff --git a/src/components/timePicker/TimePicker.tsx b/src/components/timePicker/TimePicker.tsx
@@ -7,13 +7,11 @@ import {
 } from './TimePicker.styles';
 
 interface Current {
-  startTime: string;
-  endTime: string;
   setStartTime: React.Dispatch<React.SetStateAction<string>>;
   setEndTime: React.Dispatch<React.SetStateAction<string>>;
 }
 
-const Current = ({ startTime, endTime, setStartTime, setEndTime }: Current) => {
+const Current = ({ setStartTime, setEndTime }: Current) => {
   const START_TIME_ARRAY = [
     '09:00',
     '10:00',
@@ -100,23 +98,15 @@ const Current = ({ startTime, endTime, setStartTime, setEndTime }: Current) => {
   return (
     <MainContainer>
       <StyledSlider {...settings('start')}>
-        {START_TIME_ARRAY.map((time: string) => {
-          return (
-            <div key={time}>
-              <TimeText>{time}</TimeText>
-            </div>
-          );
-        })}
+        {START_TIME_ARRAY.map((time: string) => (
+          <TimeText key={time}>{time}</TimeText>
+        ))}
       </StyledSlider>
       <TextContainer>부터</TextContainer>
       <StyledSlider {...settings('end')}>
-        {END_TIME_ARRAY.map((time: string) => {
-          return (
-            <div key={time}>
-              <TimeText>{time}</TimeText>
-            </div>
-          );
-        })}
+        {END_TIME_ARRAY.map((time: string) => (
+          <TimeText key={time}>{time}</TimeText>
+        ))}
       </StyledSlider>
       <TextContainer>까지</TextContainer>
     </MainContainer>

diff --git a/src/pages/current/Current.tsx b/src/pages/current/Current.tsx
@@ -151,7 +151,6 @@ const Current = () => {
           onClick={goToResult}
           text="우선순위 보기"
           isActivated={true}
-          navigate={goToResult}
         />
       </BottomWrapper>
 

diff --git a/src/pages/roomCalendar/RoomCalendar.styles.ts b/src/pages/roomCalendar/RoomCalendar.styles.ts
@@ -73,17 +73,3 @@ export const CheckBoxContainer = styled.div`
   padding: 20px;
   padding-bottom: 50px;
 `;
-
-export const BottomButtonContainer = styled.div`
-  position: fixed;
-  bottom: 0;
-  width: 100%;
-  height: 90px;
-  left: 0;
-  right: 0;
-  margin: 0 auto;
-  max-width: 412px;
-  background: ${theme.colors.gray01};
-  border-top: 2px solid ${theme.colors.gray02};
-  z-index: 100;
-`;
diff --git a/src/pages/roomCalendar/RoomCalendar.tsx b/src/pages/roomCalendar/RoomCalendar.tsx
@@ -1,12 +1,11 @@
-import { useCallback, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import Calendar from '../../components/calendar/Calendar';
 import RoomHeader from '../../components/roomHeader/RoomHeader';
 import line from '../../assets/images/line.png';
 import TimePicker from '../../components/timePicker/TimePicker';
 import Checkbox from '../../components/checkbox/CheckBox';
 import BottomButton from '../../components/bottomButton/BottomButton';
 import {
-  BottomButtonContainer,
   CheckBoxContainer,
   DependingBox,
   Line,
@@ -18,31 +17,44 @@ import {
 } from './RoomCalendar.styles';
 import { useRecoilState } from 'recoil';
 import { createRoomAtoms } from '../../atoms/createRoomAtoms';
-import { Link } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 
 const RoomCalendar = () => {
-  const [isCheckedBox, setIsCheckedBox] = useState(false);
-  const [startTime, setStartTime] = useState('09:00');
-  const [endTime, setEndTime] = useState('18:00');
+  const navigate = useNavigate();
+
+  const [isCheckedBox, setIsCheckedBox] = useState<boolean>(false);
+  const [isActivated, setIsActivated] = useState<boolean>(false);
+  const [startTime, setStartTime] = useState<string>('09:00');
+  const [endTime, setEndTime] = useState<string>('18:00');
   const [dates, setDates] = useState<string[]>([]);
 
-  const [recoilRoom, setRecoilRoom] = useRecoilState(createRoomAtoms);
+  const [, setRecoilRoom] = useRecoilState(createRoomAtoms);
 
-  const onSetRecoilState = useCallback(() => {
+  const handleBottomButtonClick = () => {
     if (isCheckedBox) {
       setStartTime('09:00');
       setEndTime('09:00');
     }
 
-    setRecoilRoom((prev) => {
-      return {
-        ...prev,
-        ['dates']: dates,
-        ['startTime']: isCheckedBox ? null : startTime,
-        ['endTime']: isCheckedBox ? null : endTime,
-      };
-    });
-  }, [recoilRoom, startTime, endTime, dates, isCheckedBox]);
+    setRecoilRoom((prev) => ({
+      ...prev,
+      dates: dates,
+      startTime: isCheckedBox ? null : startTime,
+      endTime: isCheckedBox ? null : endTime,
+    }));
+
+    if (isActivated) {
+      navigate('/roomTimer');
+    }
+  };
+
+  useEffect(() => {
+    if (dates.length !== 0 && startTime !== endTime) {
+      setIsActivated(true);
+    } else {
+      setIsActivated(false);
+    }
+  }, [dates, startTime, endTime]);
 
   return (
     <MainContainer>
@@ -59,12 +71,7 @@ const RoomCalendar = () => {
       <Line src={line} />
       <TimePickerContainer>
         <TimePickerWrapper>
-          <TimePicker
-            startTime={startTime}
-            endTime={endTime}
-            setStartTime={setStartTime}
-            setEndTime={setEndTime}
-          />
+          <TimePicker setStartTime={setStartTime} setEndTime={setEndTime} />
         </TimePickerWrapper>
         <GreyBox />
         {isCheckedBox ? <DependingBox /> : null}
@@ -76,11 +83,12 @@ const RoomCalendar = () => {
           setValue={setIsCheckedBox}
         />
       </CheckBoxContainer>
-      <Link to="/roomTimer">
-        <BottomButtonContainer onClick={onSetRecoilState}>
-          <BottomButton text="다음" isActivated={dates.length !== 0} />
-        </BottomButtonContainer>
-      </Link>
+
+      <BottomButton
+        text="다음"
+        isActivated={isActivated}
+        onClick={handleBottomButtonClick}
+      />
     </MainContainer>
   );
 };