fix: 약속시간 선택 페이지 TimePicker 기본값 변경 (#110)

* feat: 약속시간 선택 timeArray 변경 * feat: 약속시간 선택 안해도 default 값으로 다음 버튼 활성화 되도록 수정
dnd-side-project · Jul 28, 2023 · 78187b8 · 78187b8
1 parent 0fd5cfa
commit 78187b8
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 23 deletions.
diff --git a/src/components/timePicker/TimePicker.tsx b/src/components/timePicker/TimePicker.tsx
@@ -14,7 +14,7 @@ interface Current {
 }
 
 const Current = ({ startTime, endTime, setStartTime, setEndTime }: Current) => {
-  const TIME_ARRAY = [
+  const START_TIME_ARRAY = [
     '09:00',
     '10:00',
     '11:00',
@@ -40,6 +40,32 @@ const Current = ({ startTime, endTime, setStartTime, setEndTime }: Current) => {
     '07:00',
     '08:00',
   ];
+  const END_TIME_ARRAY = [
+    '18:00',
+    '19:00',
+    '20:00',
+    '21:00',
+    '22:00',
+    '23:00',
+    '00:00',
+    '01:00',
+    '02:00',
+    '03:00',
+    '04:00',
+    '05:00',
+    '06:00',
+    '07:00',
+    '08:00',
+    '09:00',
+    '10:00',
+    '11:00',
+    '12:00',
+    '13:00',
+    '14:00',
+    '15:00',
+    '16:00',
+    '17:00',
+  ];
 
   const settings = (startEnd: string) => {
     const setting = {
@@ -51,9 +77,9 @@ const Current = ({ startTime, endTime, setStartTime, setEndTime }: Current) => {
       swipeToSlide: true,
       afterChange: function (currentSlide: number) {
         if (startEnd === 'start') {
-          setStartTime(TIME_ARRAY[currentSlide]);
+          setStartTime(START_TIME_ARRAY[currentSlide]);
         } else {
-          setEndTime(TIME_ARRAY[currentSlide]);
+          setEndTime(END_TIME_ARRAY[currentSlide]);
         }
       },
       centerMode: true,
@@ -74,7 +100,7 @@ const Current = ({ startTime, endTime, setStartTime, setEndTime }: Current) => {
   return (
     <MainContainer>
       <StyledSlider {...settings('start')}>
-        {TIME_ARRAY.map((time: string) => {
+        {START_TIME_ARRAY.map((time: string) => {
           return (
             <div key={time}>
               <TimeText>{time}</TimeText>
@@ -84,7 +110,7 @@ const Current = ({ startTime, endTime, setStartTime, setEndTime }: Current) => {
       </StyledSlider>
       <TextContainer>부터</TextContainer>
       <StyledSlider {...settings('end')}>
-        {TIME_ARRAY.map((time: string) => {
+        {END_TIME_ARRAY.map((time: string) => {
           return (
             <div key={time}>
               <TimeText>{time}</TimeText>

diff --git a/src/pages/roomCalendar/RoomCalendar.tsx b/src/pages/roomCalendar/RoomCalendar.tsx
@@ -24,19 +24,11 @@ import dayjs from 'dayjs';
 const RoomCalendar = () => {
   const [isCheckedBox, setIsCheckedBox] = useState(false);
   const [startTime, setStartTime] = useState('09:00');
-  const [endTime, setEndTime] = useState('09:00');
+  const [endTime, setEndTime] = useState('18:00');
   const [dates, setDates] = useState<string[]>([]);
 
   const [recoilRoom, setRecoilRoom] = useRecoilState(recoilRoomAtoms);
 
-  const newStartTime = dayjs(`1900-01-01 ${startTime}`);
-  const newEndTime = dayjs(`1900-01-01 ${endTime}`);
-
-  const canGoNext =
-    isCheckedBox ||
-    (dayjs(newStartTime).format() != dayjs(newEndTime).format() &&
-      dates.length !== 0);
-
   const onSetRecoilState = useCallback(() => {
     if (isCheckedBox) {
       setStartTime('09:00');
@@ -85,15 +77,11 @@ const RoomCalendar = () => {
           setValue={setIsCheckedBox}
         />
       </CheckBoxContainer>
-      {canGoNext ? (
-        <Link to="/roomTimer">
-          <BottomButtonContainer onClick={onSetRecoilState}>
-            <BottomButton text="다음" isActivated={canGoNext} />
-          </BottomButtonContainer>
-        </Link>
-      ) : (
-        <BottomButton text="다음" isActivated={canGoNext} />
-      )}
+      <Link to="/roomTimer">
+        <BottomButtonContainer onClick={onSetRecoilState}>
+          <BottomButton text="다음" isActivated={true} />
+        </BottomButtonContainer>
+      </Link>
     </MainContainer>
   );
 };