[feat] 메인페이지 API 연동~~

api/room.ts

@@ -1,4 +1,4 @@
-import { Furnishing, Room, RoomFile } from '@/public/types/room';
+import { Furnishing, Room, RoomFile, RoomSearch } from '@/public/types/room';
 import { fetchData } from './index';
 
 export const fetchFurnishings = async () => {
@@ -23,3 +23,12 @@ export const postRoom = async (room: Room) => {
     },
   });
 };
+
+export const getRooms = async () => {
+  return fetchData<ReturnData<RoomSearch[]>>('/api/v1/rooms/search', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+};

components/RoomCard/RoomCard.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
 /* eslint-disable react/no-unused-prop-types */
-import { ROOM_TYPE, RoomDev } from '@/public/types/room';
+import { ImageFile, ROOM_TYPE, RoomSearch } from '@/public/types/room';
 import React, { useState } from 'react';
 import { User } from '@/public/types/user';
 import { formatAge, formatDate, formatPrice } from '@/utils/transform';
@@ -12,7 +12,7 @@ import { useRouter } from 'next/router';
 import Card from '../Card/Card';
 
 interface CardProps {
-  room: RoomDev;
+  room: RoomSearch;
   onClick?: () => void;
 }
 
@@ -21,7 +21,7 @@ interface UserInfoProps {
 }
 
 interface PhotoProps {
-  photos: string[];
+  photos: ImageFile[];
   onClick?: () => void;
 }
 
@@ -49,18 +49,28 @@ const UserInfo = ({ userInfo }: UserInfoProps) => {
 };
 
 const Photo = ({ photos, onClick }: PhotoProps) => {
-  return (
-    <div className="relative h-[190px] bg-cover" style={{ backgroundImage: `url(${photos[0]})` }} onClick={onClick}>
+  return photos.length ? (
+    <div
+      className="relative h-[190px] bg-cover"
+      style={{ backgroundImage: `url(${photos[0].path})` }}
+      onClick={onClick}
+    >
       <div className={`${styles.tag} flex items-center gap-[4px]`}>
         <Camera xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" />
         {`+${(photos || []).length}`}
       </div>
     </div>
+  ) : (
+    <div
+      className="relative h-[190px] bg-cover"
+      style={{ backgroundImage: `url(/images/thumb.png)` }}
+      onClick={onClick}
+    />
   );
 };
 
 const Footer = ({ room }: CardProps) => {
-  const roomType = room.roomType === ROOM_TYPE.ONE_ROOM ? '1bed flats' : '';
+  const roomType = room.roomInfo.roomType === ROOM_TYPE.ONE_ROOM ? '1bed flats' : '';
   const [isLiked, setIsLiked] = useState(false);
 
   const handleLikeClick = () => {
@@ -76,34 +86,42 @@ const Footer = ({ room }: CardProps) => {
         onClick={handleLikeClick}
       />
       <div className="text-g6 text-[12px]">
-        {room.dong}, {room.gu}
+        {room.location.name}, {room.location.upperLocation?.name}
       </div>
       <div className="font-poppins text-[20px] font-semibold text-g7 gap-[12px] flex gap-4">
-        &#8361;{formatPrice(room.deposit)}
+        &#8361;{formatPrice(room.deposit.amount)}
         <span className="font-pretendard text-[14px] font-medium">/ month </span>
         <span className="font-pretendard text-[14px] text-r1 font-bold bg-g1">
           {room.deposit ? 'Deposit required' : ''}
         </span>
       </div>
       <div className="text-[14px] font-medium">{roomType}</div>
       <div className="text-g5 text-[12px] pb-[12px] flex items-center gap-[6px]">
-        {room.bedCount} bedrooms
+        {room.roomInfo.bedrooms} bedrooms
         <Dot className="fill-g5 stroke-[1.5px]" />
-        {room.bathCount} bathrooms
+        {room.roomInfo.bathrooms} bathrooms
         <Dot className="fill-g5 stroke-[1.5px]" />
-        {room.housemateCount} housemates in total
+        {room.roomInfo.roommates} housemates in total
       </div>
       <hr />
       <p className="pt-[10px] font-medium text-[12px]">Available {formatDate(room.availableDate)}</p>
     </div>
   );
 };
 
+const mock = {
+  name: '임시이름이다..',
+  image: 'https://source.unsplash.com/random',
+  year: 1995,
+  gender: 'male',
+};
+
 export default function RoomCard({ room, onClick }: CardProps) {
   return (
     <Card
-      title={<UserInfo userInfo={room?.userInfo} />}
-      content={<Photo photos={room.images} onClick={onClick} />}
+      title={<UserInfo userInfo={mock} />}
+      // title={<UserInfo userInfo={room?.userInfo} />}
+      content={<Photo photos={room.imageFiles} onClick={onClick} />}
       footer={<Footer room={room} />}
     />
   );

pages/index.tsx

@@ -1,8 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import 'tailwindcss/tailwind.css';
 import RoomCard from '@/components/RoomCard/RoomCard';
-import { fetchRooms } from '@/api/room-dev';
-import { RoomDev } from '@/public/types/room';
+import { RoomSearch } from '@/public/types/room';
 import { NextPage, NextPageContext } from 'next';
 import RoomListLayout from '@/components/layouts/RoomListLayout.tsx';
 import FilterImg from '@/public/icons/filter.svg';
@@ -13,23 +12,24 @@ import useModal from '@/hooks/useModal.ts';
 import { FieldValues } from 'react-hook-form';
 import Filter from '@/components/Filter/Filter.tsx';
 import { useTranslation } from 'next-i18next';
+import { getRooms } from '@/api/room';
 
 type HomeProps = NextPage & {
   getLayout: (page: React.ReactElement, ctx: NextPageContext) => React.ReactNode;
 };
 
 function Home() {
   const commonTranslation = useTranslation('common');
-  const [rooms, setRooms] = useState<RoomDev[]>([]);
+  const [rooms, setRooms] = useState<RoomSearch[]>([]);
   const [filters, setFilters] = useState<string[]>([]);
   // const [selectedOptions, setSelectedOptions] = useState<string[]>([]);
   const [clickedChip, setClickedChip] = useState('');
   const router = useRouter();
   const { openModal, closeModal } = useModal();
   const selectRooms = async () => {
     try {
-      const data = await fetchRooms();
-      setRooms(data);
+      const data = await getRooms();
+      setRooms(data?.content || []);
     } catch (error) {
       console.error(error);
     }

public/types/common.ts

@@ -0,0 +1,28 @@
+interface Sort {
+  empty: boolean;
+  sorted: boolean;
+  unsorted: boolean;
+}
+
+interface Pageable {
+  offset: number;
+  pageNumber: number;
+  pageSize: number;
+  paged: boolean;
+  sort: Sort;
+  unpaged: boolean;
+}
+
+interface ReturnData<T> {
+  content: T;
+  empty: boolean;
+  first: boolean;
+  last: boolean;
+  number: number;
+  numberOfElements: number;
+  pageable: Pageable;
+  size: number;
+  sort: Sort;
+  totalElements: number;
+  totalPages: number;
+}

public/types/room.ts

@@ -1,9 +1,9 @@
 import { User } from './user';
 
 export const ROOM_TYPE = {
-  STUDIO: 'studio',
-  ONE_ROOM: 'oneRoom',
-  SHARE: 'share',
+  STUDIO: 'STUDIO',
+  ONE_ROOM: 'ONE_BED_FLATS',
+  SHARE: 'SHARE_HOUSE',
 } as const;
 
 export interface RoomDev {
@@ -25,13 +25,10 @@ export interface RoomDev {
 
 export interface RoomPost {
   locationId: number;
-  roomType: 'STUDIO' | 'ONE_BED_FLATS' | 'SHARE_HOUSE';
-  // bedrooms: "ONE" | "TWO" | "THREE" | "FOUR" | "FIVE" | "SIX_OR_OVER";
+  roomType: keyof typeof ROOM_TYPE;
   bedrooms: string;
   bathrooms: string;
   roommates: string;
-  // bathrooms: "ONE" | "TWO" | "THREE" | "FOUR" | "FIVE" | "SIX" | "SIX_OR_OVER";
-  // roommates: "ONE" | "TWO" | "THREE" | "FOUR" | "FIVE" | "SIX" | "SIX_OR_OVER";
   deposit: number;
   monthlyRent: number;
   maintenanceFee: number;
@@ -78,3 +75,59 @@ export interface Room {
   description: string;
   imageIds: number[];
 }
+
+interface Location {
+  deleted: boolean;
+  createdAt: string;
+  updatedAt: string;
+  id: number;
+  name: string;
+  locationType: string;
+  upperLocation: Location | null;
+  upperLocationId: number | null;
+}
+
+interface RoomInfo {
+  roomType: (typeof ROOM_TYPE)[keyof typeof ROOM_TYPE];
+  bedrooms: number;
+  bathrooms: number;
+  roommates: number;
+}
+
+export interface ImageFile {
+  deleted: boolean;
+  createdAt: string;
+  updatedAt: string;
+  id: number;
+  path: string;
+  size: number;
+}
+
+export interface RoomSearch {
+  deleted: boolean;
+  createdAt: boolean;
+  updatedAt: boolean;
+  id: 1;
+  location: Location;
+  deposit: {
+    amount: number;
+  };
+  monthlyRent: {
+    amount: number;
+  };
+  maintenance: {
+    maintenanceFee: {
+      amount: number;
+    };
+    gasIncluded: number;
+    waterIncluded: number;
+    electricityIncluded: number;
+    cleaningIncluded: number;
+  };
+  roomInfo: RoomInfo;
+  furnishings: number[];
+  availableDate: string;
+  description: string;
+  imageFiles: ImageFile[];
+  userId: null;
+}