From 579f80a602a595b771f783e68f1a78a5d1027925 Mon Sep 17 00:00:00 2001
From: jiohjung98 <ckaquz98@naver.com>
Date: Sun, 9 Jun 2024 20:42:58 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=98=88=EC=95=BD=20=EB=B6=88=EA=B0=80?=
 =?UTF-8?q?=20=ED=95=A0=20=EB=95=8C,=20=ED=85=8D=EC=8A=A4=ED=8A=B8=20?=
 =?UTF-8?q?=EC=B2=98=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../meetingRoom/MeetingRoomIndex.tsx          | 63 +++++++++++--------
 1 file changed, 36 insertions(+), 27 deletions(-)

diff --git a/src/components/reservation/meetingRoom/MeetingRoomIndex.tsx b/src/components/reservation/meetingRoom/MeetingRoomIndex.tsx
index d1a3e70..14b6b6b 100644
--- a/src/components/reservation/meetingRoom/MeetingRoomIndex.tsx
+++ b/src/components/reservation/meetingRoom/MeetingRoomIndex.tsx
@@ -282,8 +282,11 @@ const MeetingRoomIndex: React.FC = () => {
         </div>
       </div>
       <div className='flex mb-2'>
-        <div className="text-indigo-700 text-lg font-bold font-['Pretendard']">바로예약</div>
-        <div className="text-black text-lg font-medium font-['Pretendard'] ml-[5px]">가능</div>
+      {meetingRooms.length === 0 ? (
+        <><div className="text-indigo-700 text-lg font-bold font-['Pretendard']">바로예약</div><div className="text-black text-lg font-medium font-['Pretendard'] ml-[5px]">불가능</div></>
+      ) : (
+        <><div className="text-indigo-700 text-lg font-bold font-['Pretendard']">바로예약</div><div className="text-black text-lg font-medium font-['Pretendard'] ml-[5px]">가능</div></>
+      )}
       </div>
       <div className="flex mb-2 w-full items-center">
         <div className="">총 {meetingRooms.length}개의 공간</div>
@@ -356,34 +359,40 @@ const MeetingRoomIndex: React.FC = () => {
           </div>
         </div>
       </div>
-      <div className={`grid grid-cols-2 gap-x-[11px] gap-y-[24px] ${showToast ? 'pointer-events-none opacity-50' : ''}`}>
-      {meetingRooms.map((room) => (
-        <div key={room.meetingRoomId}  className={`overflow-hidden bg-white text-center ${toastType === 'OVERLAPPING_MEETING_ROOM_EXISTS' ? 'pointer-events-none' : 'cursor-pointer'}`}  onClick={() => handleRoomClick(room.meetingRoomId)}>
-          <div className="rounded">
-            <Image
-              src={room.meetingRoomImage || '/meetingRoomImg.svg'}
-              width={175}
-              height={124}
-              alt={room.meetingRoomName}
-              className="object-cover rounded"
-            />
-          </div>
-          <div className="flex flex-col">
-            <div className="text-neutral-700 text-base font-bold font-['Pretendard'] mr-auto mt-[16px]">
-              {room.meetingRoomName}
-            </div>
-            <div className="flex mt-[4px] items-center">
-              <Image src={'/floor.svg'} width={14} height={14} alt="floor" className="mr-[6px]" />
-              <div className="text-stone-500 text-xs font-normal font-['Pretendard'] mr-[12px] my-auto">
-                {room.meetingRoomFloor < 0 ? `B${Math.abs(room.meetingRoomFloor)}` : `${room.meetingRoomFloor}`}층
+      {meetingRooms.length === 0 ? (
+        <div className="flex justify-center items-center mt-[60px] text-center text-neutral-400 text-base font-normal font-['Pretendard']">
+          조건에 맞는 미팅룸이 없습니다.
+        </div>
+      ) : (
+        <div className={`grid grid-cols-2 gap-x-[11px] gap-y-[24px] ${showToast ? 'pointer-events-none opacity-50' : ''}`}>
+          {meetingRooms.map((room) => (
+            <div key={room.meetingRoomId}  className={`overflow-hidden bg-white text-center ${toastType === 'OVERLAPPING_MEETING_ROOM_EXISTS' ? 'pointer-events-none' : 'cursor-pointer'}`}  onClick={() => handleRoomClick(room.meetingRoomId)}>
+              <div className="rounded">
+                <Image
+                  src={room.meetingRoomImage || '/meetingRoomImg.svg'}
+                  width={175}
+                  height={124}
+                  alt={room.meetingRoomName}
+                  className="object-cover rounded"
+                />
+              </div>
+              <div className="flex flex-col">
+                <div className="text-neutral-700 text-base font-bold font-['Pretendard'] mr-auto mt-[16px]">
+                  {room.meetingRoomName}
+                </div>
+                <div className="flex mt-[4px] items-center">
+                  <Image src={'/floor.svg'} width={14} height={14} alt="floor" className="mr-[6px]" />
+                  <div className="text-stone-500 text-xs font-normal font-['Pretendard'] mr-[12px] my-auto">
+                    {room.meetingRoomFloor < 0 ? `B${Math.abs(room.meetingRoomFloor)}` : `${room.meetingRoomFloor}`}층
+                  </div>
+                  <Image src={'/capacity.svg'} width={14} height={14} alt="capacity" className="mr-[6px]" />
+                  <div className="text-stone-500 text-xs font-normal font-['Pretendard']">1~{room.meetingRoomCapacity}명</div>
+                </div>
               </div>
-              <Image src={'/capacity.svg'} width={14} height={14} alt="capacity" className="mr-[6px]" />
-              <div className="text-stone-500 text-xs font-normal font-['Pretendard']">1~{room.meetingRoomCapacity}명</div>
             </div>
-          </div>
+          ))}
         </div>
-      ))}
-    </div>
+      )}
       <div className="h-[100px]"></div>
       {startTime && endTime && (
         <DatePickerModal