Merge pull request #81 from wafflestudio/dev

Dev
wafflestudio · Jan 31, 2025 · c7420fe · c7420fe
2 parents d51776e + ae11af5
commit c7420fe
Show file tree

Hide file tree

Showing 8 changed files with 71 additions and 29 deletions.
diff --git a/src/components/roomdetail/ReviewModal.tsx b/src/components/roomdetail/ReviewModal.tsx
@@ -54,7 +54,9 @@ const ReviewModal = ({ onClose, data }: ReviewProps) => {
                 alt="왼쪽 월계수"
                 className="w-16 h-24"
               />
-              <h3 className="text-4xl font-bold text-center pb-6">4.92</h3>
+              <h3 className="text-4xl font-bold text-center pb-6">
+                {data.averageRating}
+              </h3>
               <img
                 src="https://a0.muscache.com/im/pictures/airbnb-platform-assets/AirbnbPlatformAssets-GuestFavorite/original/b4005b30-79ff-4287-860c-67829ecd7412.png"
                 alt="오른쪽 월계수"

diff --git a/src/components/roomdetail/roomCalendarModal.tsx b/src/components/roomdetail/roomCalendarModal.tsx
@@ -36,22 +36,33 @@ const RoomCalendarModal = ({ onClose, id }: CalendarModalProps) => {
       setIsLoading(true);
       setError(null);
 
-      const url = `/api/v1/reservations/availability/${id}?year=${currentYear}&month=${currentMonth.month() + 1}`;
-
-      const response = await fetch(url, {
-        method: 'GET',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-      });
-
-      if (!response.ok) {
+      const currentMonthRequest = `/api/v1/reservations/availability/${id}?year=${currentYear}&month=${currentMonth.month() + 1}`;
+      const nextMonthRequest = `/api/v1/reservations/availability/${id}?year=${currentYear}&month=${currentMonth.add(1, 'month').month() + 1}`;
+
+      const [currentMonthResponse, nextMonthResponse] = await Promise.all([
+        fetch(currentMonthRequest, {
+          method: 'GET',
+          headers: { 'Content-Type': 'application/json' },
+        }),
+        fetch(nextMonthRequest, {
+          method: 'GET',
+          headers: { 'Content-Type': 'application/json' },
+        }),
+      ]);
+
+      if (!currentMonthResponse.ok || !nextMonthResponse.ok) {
         throw new Error('숙소 예약 가능 날짜 로딩에 실패했습니다.');
       }
 
-      const responseData = (await response.json()) as AvailabilityResponse;
-      console.debug(responseData);
-      setAvailableDates(responseData.availableDates);
+      const currentMonthData =
+        (await currentMonthResponse.json()) as AvailabilityResponse;
+      const nextMonthData =
+        (await nextMonthResponse.json()) as AvailabilityResponse;
+
+      setAvailableDates([
+        ...currentMonthData.availableDates,
+        ...nextMonthData.availableDates,
+      ]);
     } catch (err) {
       const errorMessage =
         err instanceof Error ? err.message : '오류가 발생했습니다.';

diff --git a/src/components/user/MyReviewItems.tsx b/src/components/user/MyReviewItems.tsx
@@ -98,7 +98,6 @@ const MyReviewItems = () => {
   const handleDeleteReview = async (reviewId: number) => {
     try {
       await axiosInstance.delete(`/api/v1/reviews/${reviewId}`);
-      // 삭제된 리뷰를 상태에서 제거
       setReviews((prevReviews) =>
         prevReviews.filter((review) => review.reviewId !== reviewId),
       );

diff --git a/src/components/user/ReservationUpdateModal.tsx b/src/components/user/ReservationUpdateModal.tsx
@@ -6,9 +6,11 @@ import { useNavigate } from 'react-router-dom';
 
 import BaseModal from '@/components/common/Modal/BaseModal';
 import { useSearch } from '@/components/home/context/SearchContext';
-import CalendarModal from '@/components/home/Topbar/SearchBar/modals/CalendarModal';
+
+import RoomCalendarModal from '../roomdetail/roomCalendarModal';
 
 type ReservationUpdateModalProps = {
+  roomId: number;
   reservationId: string;
   onClose: () => void;
   startDate: string;
@@ -17,6 +19,7 @@ type ReservationUpdateModalProps = {
 };
 
 const ReservationUpdateModal: React.FC<ReservationUpdateModalProps> = ({
+  roomId,
   reservationId,
   onClose,
   startDate,
@@ -34,17 +37,37 @@ const ReservationUpdateModal: React.FC<ReservationUpdateModalProps> = ({
   } = useSearch();
   const [error, setError] = useState<string | null>(null);
   const [guests, setGuests] = useState<number>(numberOfGuests);
+  const [maxOccupancy, setMaxOccupancy] = useState<number | null>(null);
 
   useEffect(() => {
     setCheckIn(new Date(startDate));
     setCheckOut(new Date(endDate));
     setGuests(numberOfGuests);
-  }, [startDate, endDate, numberOfGuests, setCheckIn, setCheckOut]);
+
+    const fetchMaxOccupancy = async () => {
+      try {
+        const response = await axios.get<{ maxOccupancy: number }>(
+          `/api/v1/rooms/main/${roomId}`,
+        );
+        setMaxOccupancy(response.data.maxOccupancy);
+      } catch (err) {
+        console.error('최대 숙박 인원 정보를 불러오는 데 실패했습니다.', err);
+        setError('최대 숙박 인원 정보를 불러오는 데 실패했습니다.');
+      }
+    };
+
+    void fetchMaxOccupancy();
+  }, [roomId, startDate, endDate, numberOfGuests, setCheckIn, setCheckOut]);
 
   const navigate = useNavigate();
 
   const handleGuestChange = (delta: number) => {
-    setGuests((prev) => Math.max(1, prev + delta));
+    setGuests((prev) => {
+      if (delta > 0 && maxOccupancy !== null && prev >= maxOccupancy) {
+        return prev;
+      }
+      return Math.max(1, prev + delta);
+    });
   };
 
   const handleUpdateReservation = async () => {
@@ -166,7 +189,10 @@ const ReservationUpdateModal: React.FC<ReservationUpdateModalProps> = ({
               onClick={() => {
                 handleGuestChange(1);
               }}
-              className="w-8 h-8 rounded-full border border-gray-400 text-gray-400 hover:border-gray-700 hover:text-gray-700 flex items-center justify-center"
+              disabled={maxOccupancy !== null && guests >= maxOccupancy}
+              className={`w-8 h-8 rounded-full border flex items-center justify-center
+                ${maxOccupancy !== null && guests >= maxOccupancy ? 'border-gray-300 text-gray-300 cursor-not-allowed' : 'border-gray-400 text-gray-400 hover:border-gray-700 hover:text-gray-700'}
+              `}
             >
               +
             </button>
@@ -191,7 +217,7 @@ const ReservationUpdateModal: React.FC<ReservationUpdateModalProps> = ({
           onClose={closeModal}
           title="날짜 선택"
         >
-          <CalendarModal onClose={closeModal} />
+          <RoomCalendarModal id={roomId} onClose={closeModal} />
         </BaseModal>
       </div>
     </div>

diff --git a/src/components/user/profile/OtherUserProfile.tsx b/src/components/user/profile/OtherUserProfile.tsx
@@ -2,6 +2,7 @@ import axios from 'axios';
 import { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 
+import PastReservations from './PastReservations';
 import ProfileHeader from './ProfileHeader';
 
 type ProfileInfo = {
@@ -70,6 +71,15 @@ const OtherUserProfile = () => {
         <p className="text-s mt-6 mb-8">{profile.bio}</p>
         <hr className="w-full mt-10 mb-8 border-t border-gray-300" />
       </div>
+
+      {/* 방문한 여행지 */}
+      <div>
+        <p className="text-xl mb-8">
+          {profile.nickname} 님이 지금까지 가 본 여행지
+        </p>
+        <PastReservations userId={profile.userId} />
+        <hr className="w-full my-8 border-t border-gray-300" />
+      </div>
     </div>
   );
 };

diff --git a/src/components/user/profile/PastReservations.tsx b/src/components/user/profile/PastReservations.tsx
@@ -14,10 +14,9 @@ type Reservation = {
 
 type PastReservationsProps = {
   userId: number;
-  navigate: (path: string) => void;
 };
 
-const PastReservations = ({ userId, navigate }: PastReservationsProps) => {
+const PastReservations = ({ userId }: PastReservationsProps) => {
   const [reservations, setReservations] = useState<Reservation[]>([]);
   const [error, setError] = useState<string>('');
 
@@ -59,9 +58,6 @@ const PastReservations = ({ userId, navigate }: PastReservationsProps) => {
           <div
             key={reservation.reservationId}
             className="flex flex-col items-center p-4 bg-white content-between rounded-2xl min-w-60 min-h-32 border-4 border-rose-200"
-            onClick={() => {
-              navigate(`/reservations/${reservation.reservationId}`);
-            }}
           >
             <h3 className="mb-2 text-lg text-rose-400 font-semibold">
               {reservation.place}

diff --git a/src/components/user/profile/Profile.tsx b/src/components/user/profile/Profile.tsx
@@ -123,10 +123,7 @@ const UserProfile = () => {
         <p className="text-xl mb-8">
           {profile.nickname} 님이 지금까지 가 본 여행지
         </p>
-        <PastReservations
-          userId={profile.userId}
-          navigate={(path: string) => void navigate(path)}
-        />
+        <PastReservations userId={profile.userId} />
         <hr className="w-full my-8 border-t border-gray-300" />
 
         {/* 리뷰 */}

diff --git a/src/routes/ReservationDetails.tsx b/src/routes/ReservationDetails.tsx
@@ -152,6 +152,7 @@ const ReservationDetails = () => {
 
       {isUpdateModalOpen && reservation !== null && (
         <ReservationUpdateModal
+          roomId={reservation.roomId}
           reservationId={reservation.reservationId.toString()}
           startDate={reservation.startDate}
           endDate={reservation.endDate}