Feat/review

src/App.tsx

@@ -9,6 +9,7 @@ import Redirect from '@/routes/Redirect';
 
 import CompleteProfilePage from './components/home/Topbar/Menu/CompleteProfilePage';
 import RegisterPage from './components/home/Topbar/Menu/RegisterPage';
+import { ReviewProvider } from './components/roomdetail/ReviewContext';
 import MyReservations from './routes/MyReservations';
 import MyReviews from './routes/MyReviews';
 import ProfileEdit from './routes/ProfileEdit';
@@ -22,25 +23,27 @@ export const App = () => {
     // useSearch 훅을 이용해서 컴포넌트를 감싸 놨습니다. AppProvider 등의 다른 파일을 만들어서 옮겨두는 것도 가능합니다.
     <StyledEngineProvider injectFirst>
       <SearchProvider>
-        <Routes>
-          <Route path="/" element={<Home />} />
-          <Route path="complete-profile" element={<CompleteProfilePage />} />
-          <Route path="/:id" element={<Roomdetail />} />
-          <Route path="/tests" element={<ApiTest />} />
-          <Route path="/redirect" element={<Redirect />} />
-          <Route path="/hosting" element={<Hosting />} />
-          <Route path="/profile" element={<ProfilePage />} />
-          <Route path="/profile/edit" element={<ProfileEdit />} />
-          <Route path="/register" element={<RegisterPage />} />
-          <Route path="/MyReservations" element={<MyReservations />} />
-          <Route path="/MyReviews" element={<MyReviews />} />
-          <Route path="/reviews/:reservationId" element={<Review />} />
-          <Route
-            path="/reservations/:reservationId"
-            element={<ReservationDetails />}
-          />
-          <Route path="*" element={<h1>404 Not Found</h1>} />
-        </Routes>
+        <ReviewProvider>
+          <Routes>
+            <Route path="/" element={<Home />} />
+            <Route path="complete-profile" element={<CompleteProfilePage />} />
+            <Route path="/:id" element={<Roomdetail />} />
+            <Route path="/tests" element={<ApiTest />} />
+            <Route path="/redirect" element={<Redirect />} />
+            <Route path="/hosting" element={<Hosting />} />
+            <Route path="/profile" element={<ProfilePage />} />
+            <Route path="/profile/edit" element={<ProfileEdit />} />
+            <Route path="/register" element={<RegisterPage />} />
+            <Route path="/MyReservations" element={<MyReservations />} />
+            <Route path="/MyReviews" element={<MyReviews />} />
+            <Route path="/reviews/:reservationId" element={<Review />} />
+            <Route
+              path="/reservations/:reservationId"
+              element={<ReservationDetails />}
+            />
+            <Route path="*" element={<h1>404 Not Found</h1>} />
+          </Routes>
+        </ReviewProvider>
       </SearchProvider>
     </StyledEngineProvider>
   );

src/components/roomdetail/Info.tsx

@@ -101,7 +101,7 @@ const Info = ({ data }: InfoProps) => {
         <div className="col-span-1 row-span-1 flex gap-2 items-center px-4">
           <img src={LuggageIcon} className="h-6 w-6 opacity-60" />
           <div className="opacity-60 text-sm">
-            {isluggage ? '여행 가방 보관 가능' : '여행 가방 보관 풀가'}
+            {isluggage ? '여행 가방 보관 가능' : '여행 가방 보관 불가'}
           </div>
         </div>
         <div className="col-span-1 row-span-1 flex gap-2 items-center px-4">

src/components/roomdetail/PhotoModal.tsx

@@ -4,15 +4,12 @@ import { useEffect } from 'react';
 
 import { Shareheart } from '@/components/roomdetail/Shareheart';
 
-const PhotoModal = ({ onClose }: { onClose: () => void }) => {
-  const photos = [
-    { title: '거실', icon: <PhotoSizeSelectActualIcon /> },
-    { title: '침실', icon: <PhotoSizeSelectActualIcon /> },
-    { title: '욕실', icon: <PhotoSizeSelectActualIcon /> },
-    { title: '외부', icon: <PhotoSizeSelectActualIcon /> },
-    { title: '추가 사진', icon: <PhotoSizeSelectActualIcon /> },
-  ];
+type Props = {
+  onClose: () => void;
+  UrlList: string[];
+};
 
+const PhotoModal = ({ onClose, UrlList }: Props) => {
   useEffect(() => {
     document.body.style.overflow = 'hidden'; // 배경 스크롤 비활성화
     return () => {
@@ -45,34 +42,96 @@ const PhotoModal = ({ onClose }: { onClose: () => void }) => {
 
         {/* 사진 목록 */}
         <div className="grid grid-cols-5 gap-4 mb-12 p-6">
-          {photos.map((photo, index) => (
-            <div
-              key={index}
-              className="flex flex-col items-center justify-center space-y-2 cursor-pointer"
-            >
-              <div className="w-full h-24 bg-gray-300 text-white flex items-center justify-center rounded-sm shadow-md">
-                {photo.icon}
+          {UrlList.length > 0 ? (
+            <>
+              {UrlList.map((url, index) => (
+                <div
+                  key={index}
+                  className="w-full flex flex-col items-center justify-center space-y-2 cursor-pointer"
+                >
+                  <div className="flex items-center justify-center bg-gray-200 w-full shadow-md rounded-sm">
+                    <img
+                      className="w-fit h-28"
+                      src={url}
+                      alt={`사진 ${index}`}
+                    />
+                  </div>
+                  <span className="text-sm text-gray-700">{index}</span>
+                </div>
+              ))}
+              {Array.from({ length: Math.max(5 - UrlList.length, 0) }).map(
+                (_, index) => (
+                  <div
+                    key={index}
+                    className="w-full flex flex-col items-center justify-center space-y-2 cursor-pointer"
+                  >
+                    <div className="flex items-center justify-center bg-gray-200 w-full shadow-md rounded-sm">
+                      <PhotoSizeSelectActualIcon className="w-fit h-28 text-white" />
+                    </div>
+                    <span className="text-sm text-gray-700">정보없음</span>
+                  </div>
+                ),
+              )}
+            </>
+          ) : (
+            Array.from({ length: 5 }).map((_, index) => (
+              <div
+                key={index}
+                className="flex flex-col items-center justify-center space-y-2 cursor-pointer"
+              >
+                <PhotoSizeSelectActualIcon className="w-full h-24 bg-gray-300 text-white flex items-center justify-center rounded-sm shadow-md" />
+                <span className="text-sm text-gray-700">{index}</span>
               </div>
-              <span className="text-sm text-gray-700">{photo.title}</span>
-            </div>
-          ))}
+            ))
+          )}
         </div>
 
         {/* 선택한 사진 보기 */}
         <div className="flex flex-col gap-4 mb-6 p-6">
-          {photos.map((photo, index) => (
-            <div
-              key={index}
-              className="flex items-start space-y-2 gap-2 cursor-pointer"
-            >
-              <span className="text-sm flex-[30%] w-fit text-gray-700">
-                {photo.title}
-              </span>
-              <div className="flex-[70%] w-fit h-[500px] bg-gray-300 text-white flex items-center justify-center rounded-sm shadow-md">
-                {photo.icon}
+          {UrlList.length > 0 ? (
+            <>
+              {UrlList.map((url, index) => (
+                <div
+                  key={index}
+                  className="flex items-start space-y-2 gap-2 cursor-pointer"
+                >
+                  <span className="text-sm flex-[30%] w-fit text-gray-700">
+                    {index}
+                  </span>
+                  <img
+                    src={url}
+                    className="flex-[70%] w-[500px] h-fit bg-gray-300 text-white flex items-center justify-center rounded-sm shadow-md"
+                    alt={`선택한 사진 ${index}`}
+                  />
+                </div>
+              ))}
+              {Array.from({ length: Math.max(5 - UrlList.length, 0) }).map(
+                (_, index) => (
+                  <div
+                    key={index}
+                    className="flex items-start space-y-2 gap-2 cursor-pointer"
+                  >
+                    <span className="text-sm flex-[30%] w-fit text-gray-700">
+                      정보없음
+                    </span>
+                    <PhotoSizeSelectActualIcon className="flex-[70%] w-[500px] h-fit bg-gray-300 text-white flex items-center justify-center rounded-sm shadow-md" />
+                  </div>
+                ),
+              )}
+            </>
+          ) : (
+            Array.from({ length: 5 }).map((_, index) => (
+              <div
+                key={index}
+                className="flex items-start space-y-2 gap-2 cursor-pointer"
+              >
+                <span className="text-sm flex-[30%] w-fit text-gray-700">
+                  정보없음
+                </span>
+                <PhotoSizeSelectActualIcon className="flex-[70%] w-[500px] h-fit bg-gray-300 text-white flex items-center justify-center rounded-sm shadow-md" />
               </div>
-            </div>
-          ))}
+            ))
+          )}
         </div>
       </div>
     </div>

src/components/roomdetail/Reservation.tsx

@@ -2,6 +2,7 @@ import FlagIcon from '@mui/icons-material/Flag';
 import { useState } from 'react';
 
 import clock from '@/assets/icons/reservation/clock.svg';
+import axiosInstance from '@/axiosInstance';
 import BaseModal from '@/components/common/Modal/BaseModal';
 import { useSearch } from '@/components/home/context/SearchContext';
 import RoomGuestsModal from '@/components/roomdetail/RoomGuestsModal';
@@ -49,22 +50,13 @@ const Reservation = ({ data }: InfoProps) => {
         numberOfGuests: guests,
       };
 
-      const response = await fetch('/api/v1/reservations', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          Authorization: `Bearer ${token}`,
-        },
-        body: JSON.stringify(sendData),
-      });
+      const response = await axiosInstance.post<roomReservationResponseType>(
+        '/api/v1/reservations',
+        sendData,
+      );
 
       console.debug(sendData);
-
-      if (!response.ok) {
-        throw new Error('숙소 예약에 실패했습니다.');
-      }
-      const responseData =
-        (await response.json()) as roomReservationResponseType;
+      const responseData = response.data;
       alert(
         `숙소가 성공적으로 예약되었습니다! ID: ${responseData.reservationId}`,
       );

src/components/roomdetail/ReviewContext.tsx

@@ -0,0 +1,87 @@
+import axios from 'axios';
+import type { ReactNode } from 'react';
+import { createContext, useContext, useState } from 'react';
+import { useCallback } from 'react';
+
+import type { ReviewsResponse } from '@/types/reviewType';
+import type { roomType } from '@/types/roomType';
+
+type ReviewContextType = {
+  isLoading: boolean;
+  error: string | null;
+  initReviews: (
+    data: roomType,
+    selectedOption: string,
+    page: number,
+  ) => Promise<void>;
+  reviewData: ReviewsResponse | null;
+};
+
+const ReviewContext = createContext<ReviewContextType | undefined>(undefined);
+
+export function ReviewProvider({ children }: { children: ReactNode }) {
+  const [error, setError] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+  const [reviewData, setReviewData] = useState<ReviewsResponse | null>(null);
+
+  // 초기 리뷰 목록을 불러오는 함수
+  const initReviews = useCallback(
+    async (data: roomType, selectedOption: string, page: number) => {
+      try {
+        setIsLoading(true);
+        setError(null);
+
+        const size = 4;
+        let sort = '';
+
+        if (selectedOption === '최신순') {
+          sort = 'createdAt,desc';
+        } else if (selectedOption === '오래된순') {
+          sort = 'rating,asc';
+        } else if (selectedOption === '높은 평점순') {
+          sort = 'rating,desc';
+        } else if (selectedOption === '낮은 평점순') {
+          sort = 'rating,asc';
+        }
+
+        const url = `/api/v1/reviews/room/${data.roomId}?page=${page}&size=${size}&sort=${sort}`;
+
+        const response = await axios.get<ReviewsResponse>(url);
+
+        const responseData = response.data;
+
+        setReviewData(responseData);
+
+        console.debug(responseData, page);
+      } catch (err) {
+        const errorMessage =
+          err instanceof Error ? err.message : '오류가 발생했습니다.';
+        setError(errorMessage);
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [],
+  );
+
+  return (
+    <ReviewContext.Provider
+      value={{
+        initReviews,
+        reviewData,
+        isLoading,
+        error,
+      }}
+    >
+      {children}
+    </ReviewContext.Provider>
+  );
+}
+
+export function useReview() {
+  const context = useContext(ReviewContext);
+  if (context === undefined) {
+    throw new Error('useReview must be used within a ReviewProvider');
+  }
+  return context;
+}