[feat] 룸 상세 오류 노출 건 수정

bsideproject · Oct 11, 2023 · a943dc4 · a943dc4
1 parent e5c03ef
commit a943dc4
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 20 deletions.
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -27,13 +27,15 @@ function Home() {
   const router = useRouter();
   const { openModal, closeModal } = useModal();
   const [page, setPage] = useState(0);
+  const [totalElements, setTotalElements] = useState(0);
 
   // TODO: 전체 페이지보다 크면 페이징 처리 안되도록 수정
 
   const selectRooms = async () => {
     try {
       const data = await getRooms({ page });
       setRooms(data?.content || []);
+      setTotalElements(data?.totalElements || 0);
     } catch (error) {
       console.error(error);
     }
@@ -217,7 +219,7 @@ function Home() {
         })}
       </div>
       <Typography variant="body" customClassName="text-left font-bold text-[16px] text-g7">
-        There are <span className="text-r1">{`${rooms.length} rooms`}</span> in total!
+        There are <span className="text-r1">{`${totalElements} rooms`}</span> in total!
       </Typography>
       {rooms.map((room, idx) => (
         // Nav 영역 맨 마지막 부분 잘리는 문제로 추가!!

diff --git a/pages/room/[id].tsx b/pages/room/[id].tsx
@@ -113,7 +113,7 @@ const Page = () => {
       }
 
       const roomsFurnishings = data.furnishings.map((furnishing) => {
-        const roomFurnishing = furnishings.find((item) => item.id === furnishing);
+        const roomFurnishing = furnishings.find((item) => item.id === furnishing.id);
 
         if (!roomFurnishing) {
           return null;
@@ -158,22 +158,29 @@ const Page = () => {
       {room && (
         <>
           <div className="font-pretendard w-full mb-[71px]">
-            <Swiper
-              effect="coverflow"
-              slidesPerView={1}
-              loop
-              className="mySwiper !mx-[-20px] h-[240px] relative"
-              onSlideChangeTransitionEnd={(event) => handleSlideChange(event.realIndex)}
-            >
-              {room.imageFiles.map((image, idx) => (
-                <SwiperSlide className={styles['swiper-slide']} key={`room-image-${idx}`}>
-                  <img src={image.path} alt={`room-${idx}`} />
-                </SwiperSlide>
-              ))}
-              <div className={styles.tag}>
-                {currentSlide + 1}/{room.imageFiles.length}
-              </div>
-            </Swiper>
+            {room.imageFiles.length > 0 ? (
+              <Swiper
+                effect="coverflow"
+                slidesPerView={1}
+                loop
+                className="mySwiper !mx-[-20px] h-[240px] relative"
+                onSlideChangeTransitionEnd={(event) => handleSlideChange(event.realIndex)}
+              >
+                {room.imageFiles.map((image, idx) => (
+                  <SwiperSlide className={styles['swiper-slide']} key={`room-image-${idx}`}>
+                    <img src={image.path} alt={`room-${idx}`} />
+                  </SwiperSlide>
+                ))}
+                <div className={styles.tag}>
+                  {currentSlide + 1}/{room.imageFiles.length}
+                </div>
+              </Swiper>
+            ) : (
+              <div
+                className="!mx-[-20px] h-[240px] relative bg-cover"
+                style={{ backgroundImage: `url(/images/thumb.png)` }}
+              />
+            )}
             <div className="flex py-[20px]" onClick={toggleShowDetail}>
               <MyImageSvg imageUrl={room.user.imageUrl || '/images/thumb.png'} />
               <div className="ml-[12px]">

diff --git a/pages/room/add/step1.tsx b/pages/room/add/step1.tsx
@@ -56,7 +56,7 @@ export default function AddRoom() {
       locationId: data.dong.value,
       monthlyRent: data.monthPrice,
       deposit: data.depositPrice,
-      maintananceFee: data.maintananceFee,
+      maintenanceFee: data.maintananceFee,
       availableDate: formatDateForAPI(data.dateAvailable),
       gasIncluded: data.gasChecked,
       waterIncluded: data.waterChecked,

diff --git a/public/types/room.ts b/public/types/room.ts
@@ -56,6 +56,14 @@ export interface Furnishing {
   desc: string;
 }
 
+export interface FurnishingData {
+  createdAt: string;
+  deleted: boolean;
+  id: number;
+  type: string;
+  updatedAt: string;
+}
+
 export interface RoomFile {
   createdAt: string;
   deleted: boolean;
@@ -133,7 +141,7 @@ export interface RoomSearch {
     cleaningIncluded: number;
   };
   roomInfo: RoomInfo;
-  furnishings: number[];
+  furnishings: FurnishingData[];
   availableDate: string;
   description: string;
   imageFiles: ImageFile[];