feat: 예약 불가 할 때, 텍스트 처리

4bujak-4bujak · Jun 9, 2024 · 579f80a · 579f80a
1 parent ffb98a4
commit 579f80a
Showing 1 changed file with 36 additions and 27 deletions.
diff --git 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