♻️ Refactor : 예약 기능 개선

prgrms-web-devcourse-final-project · Jan 9, 2025 · df7e55c · df7e55c
2 parents f56d5bc + 5d65bf6
commit df7e55c
Show file tree

Hide file tree

Showing 9 changed files with 32 additions and 37 deletions.
diff --git a/src/pages/BusinessSignUp/hooks/useBusinessSignUp.ts b/src/pages/BusinessSignUp/hooks/useBusinessSignUp.ts
@@ -3,7 +3,7 @@ import { useMutation } from '@tanstack/react-query';
 import axios from 'axios';
 import { useNavigate } from 'react-router-dom';
 import { Dispatch } from 'react';
-import { ErrorMsg } from '../components/BusinessSignUpForm';
+import type { ErrorMsg } from '../components/BusinessSignUpForm';
 
 const useBusinessSignUp = (
   setErrorMessage: Dispatch<React.SetStateAction<ErrorMsg>>,

diff --git a/src/pages/DetailPage/components/DetailComponent.tsx b/src/pages/DetailPage/components/DetailComponent.tsx
@@ -1,5 +1,6 @@
 import { GetWorkPlaceData } from '@typings/types';
 import { FaMapMarkerAlt, FaPhoneAlt } from 'react-icons/fa';
+import { IoTime } from 'react-icons/io5';
 import { Map, MapMarker } from 'react-kakao-maps-sdk';
 
 const DetailComponent = ({
@@ -11,7 +12,6 @@ const DetailComponent = ({
     lat: Number(workplaceDetailData.latitude),
     lng: Number(workplaceDetailData.longitude),
   };
-
   return (
     <div className='w-custom'>
       <div className='flex flex-col gap-3'>
@@ -24,6 +24,16 @@ const DetailComponent = ({
             {workplaceDetailData.workplacePhoneNumber}
           </span>
         </div>
+        <div className='flex items-center'>
+          <IoTime
+            color='#c3c3c3'
+            className='size-5'
+          />
+          <span className='ml-[10px] text-[16px]'>
+            {workplaceDetailData.workplaceStartTime} ~{' '}
+            {workplaceDetailData.workplaceEndTime}
+          </span>
+        </div>
         <div className='flex items-center'>
           <FaMapMarkerAlt
             color='#c3c3c3'
@@ -38,9 +48,8 @@ const DetailComponent = ({
       <div className='mt-3 h-[140px] w-custom'>
         <Map
           center={center}
-          className='h-full w-full'
+          className='h-full w-full rounded-lg'
           level={3}
-          style={{ borderRadius: '8px' }}
           draggable={false}
         >
           <MapMarker

diff --git a/src/pages/DetailPage/components/RoomSelect.tsx b/src/pages/DetailPage/components/RoomSelect.tsx
@@ -30,13 +30,11 @@ const RoomSelect = ({
             key={item.studyRoomId}
             type='button'
             onClick={() => handleClick(item.studyRoomId)}
-            className='mb-[16px] rounded-[10px]'
-            style={{
-              border:
-                selectedRoomId === item.studyRoomId
-                  ? '1px solid #50BEAD'
-                  : 'none',
-            }}
+            className={`mb-[16px] rounded-[10px] ${
+              selectedRoomId === item.studyRoomId
+                ? 'border-[1px] border-[#50BEAD]'
+                : ''
+            }`}
           >
             <RoomComponent room={item} />
           </button>

diff --git a/src/pages/DetailPage/components/TabComponent.tsx b/src/pages/DetailPage/components/TabComponent.tsx
@@ -38,11 +38,11 @@ const TabComponent = ({
           key={item}
           type='button'
           onClick={() => handleClickTab(index)}
-          style={{
-            color: activeTab === index ? 'black' : '#c3c3c3',
-            borderColor: activeTab === index ? '#50BEAD' : '#c3c3c3',
-          }}
-          className='h-[60px] w-[125px] border-b-2'
+          className={`h-[60px] w-[125px] border-b-2 ${
+            activeTab === index
+              ? 'border-[#50BEAD] text-black'
+              : 'border-[#c3c3c3] text-[#c3c3c3]'
+          }`}
         >
           {item}
         </button>

diff --git a/src/pages/DetailPage/components/WorkPlaceReview.tsx b/src/pages/DetailPage/components/WorkPlaceReview.tsx
@@ -52,7 +52,7 @@ const WorkPlaceReview = ({
             return (
               <div
                 key={review.reviewId}
-                className='border-b border-subfont py-[16px]'
+                className={`border-subfont py-[16px] ${isLastReviewInPage ? 'border-none' : 'border-b'}`}
                 ref={isLastReviewInPage ? observerRef : null} // 페이지의 마지막 리뷰에만 ref 적용
               >
                 <p className='mb-[8px] text-[16px] font-medium'>

diff --git a/src/pages/ReservationPage/components/ReservationDate/ReservationDate.tsx b/src/pages/ReservationPage/components/ReservationDate/ReservationDate.tsx
@@ -8,6 +8,8 @@ type SelectedDate = DatePiece | [DatePiece, DatePiece];
 
 const ReservationDate = () => {
   const { searchDate, setDate, setTime, setFormattedTime } = useSearchStore();
+  const maxDate = new Date();
+  maxDate.setMonth(maxDate.getMonth() + 3);
 
   const handleChangeDate = (newDate: SelectedDate) => {
     if (newDate instanceof Date) {
@@ -28,6 +30,7 @@ const ReservationDate = () => {
         next2Label={null}
         showFixedNumberOfWeeks
         minDate={new Date()}
+        maxDate={maxDate}
       />
     </div>
   );

diff --git a/src/pages/ReservationPage/components/ReservationTime.tsx b/src/pages/ReservationPage/components/ReservationTime.tsx
@@ -13,7 +13,7 @@ const ReservationTime = (props: ReservationTimeProps) => {
   const times = { startTime: data.startTime, endTime: data.endTime };
 
   const startHour: number = Number(times.startTime.split(':')[0]);
-  const endHour: number = Number(times.endTime.split(':')[0]);
+  const endHour: number = Number(times.endTime.split(':')[0]) - 1;
 
   const timeList = Array.from({ length: endHour - startHour + 1 }, (_, i) => {
     const hour = startHour + i;

diff --git a/src/pages/SearchPage/components/SelectDate/SelectDate.tsx b/src/pages/SearchPage/components/SelectDate/SelectDate.tsx
@@ -9,6 +9,9 @@ type SelectedDate = DatePiece | [DatePiece, DatePiece];
 
 const SelectDate = () => {
   const { searchDate, setDate } = useSearchStore();
+  const maxDate = new Date();
+  maxDate.setMonth(maxDate.getMonth() + 3);
+
   const handleChangeDate = (newDate: SelectedDate) => {
     if (newDate instanceof Date) {
       setDate(new Date(newDate));
@@ -32,6 +35,7 @@ const SelectDate = () => {
         next2Label={null}
         showFixedNumberOfWeeks
         minDate={new Date()}
+        maxDate={maxDate}
       />
     </div>
   );

diff --git a/src/utils/formatTime.ts b/src/utils/formatTime.ts
@@ -34,16 +34,6 @@ export const getFormattedDateWeekFunction = (date: string) => {
   return `${formattedDate}요일`;
 };
 
-// date타입에서 YYYY-MM-DD 추출해 YYYY.MM.DD로 변환
-export const getStringFromDate = (value: Date) => {
-  const year = value.getFullYear();
-  const month = (value.getMonth() + 1).toString().padStart(2, '0');
-  const day = value.getDate().toString().padStart(2, '0');
-  const dateString = `${year}.${month}.${day}`;
-
-  return dateString;
-};
-
 // YYYY-MM-DDTHH:mm:ss 에서 시간(HH:mm) 추출
 export const getTimeFunction = (timeString: string) => {
   const hour = new Date(timeString).getHours().toString().padStart(2, '0');
@@ -53,15 +43,6 @@ export const getTimeFunction = (timeString: string) => {
   return formattedTimeString;
 };
 
-// date타입에서 시간(HH:mm) 추출
-export const getStringFromDateTime = (value: Date) => {
-  const hour = value.getHours().toString().padStart(2, '0');
-  const minutes = value.getMinutes().toString().padStart(2, '0');
-  const formattedTimeString = `${hour}:${minutes}`;
-
-  return formattedTimeString;
-};
-
 export const getDatetoLocalDate = (date: Date) => {
   const yyyy = date.getFullYear();
   const mm = String(date.getMonth() + 1).padStart(2, '0'); // 월은 0부터 시작하므로 +1