feat : 메인페이지 레이아웃 수정

package.json

@@ -24,6 +24,7 @@
     "react-query": "^3.39.3",
     "react-toastify": "^10.0.5",
     "remark-gfm": "^4.0.0",
+    "swiper": "^11.1.3",
     "zustand": "^4.5.2"
   },
   "devDependencies": {

src/components/home/AvailableRoom.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { format } from 'date-fns';
 import React, { useEffect, useState } from 'react';
 

src/components/home/BgPurpleLayout.tsx

@@ -1,3 +1,4 @@
+'use client';
 import React, { ReactNode } from 'react';
 
 const BgPurpleLayout = ({ children }: { children: ReactNode }) => {

src/components/home/CurrentOffice.tsx

@@ -1,3 +1,4 @@
+'use client';
 import React from 'react';
 
 const CurrentOffice = () => {
@@ -12,14 +13,14 @@ const CurrentOffice = () => {
           <div className="text-white text-lg underline font-medium">강남1호점</div>
 
           {/* 현재 선택 지점과 이용중인 지점이 다를 때 */}
-          <div className="absolute right-[80px] top-[25px] z-50">
+          {/* <div className="absolute right-[80px] top-[25px] z-50">
             <div className="ml-4">
               <img src="/home/isRight.svg" alt="" />
             </div>
             <div className="bg-space-purple-dark-active text-white text-sm font-normal p-2 rounded">
               이 지점이 맞나요?
             </div>
-          </div>
+          </div> */}
         </div>
       </div>
     </>

src/components/home/MainHeader.tsx

@@ -1,3 +1,4 @@
+'use client';
 import React from 'react';
 
 const MainHeader = () => {

src/components/home/MainPageIndex.tsx

@@ -1,3 +1,4 @@
+'use client';
 import React from 'react';
 import BgPurpleLayout from './BgPurpleLayout';
 import MainHeader from './MainHeader';

src/components/home/OfficeInfo.tsx

@@ -1,29 +1,57 @@
+'use client';
 import React from 'react';
 
 const OfficeInfo = () => {
   return (
     <div className="bg-white w-full py-5 px-5 rounded-b shadow border-b border-l border-r border-gray-200 flex flex-col gap-3 ">
-      <div className="flex items-center gap-2 font-normal text-sm">
-        <div className=" text-gray-500">현재 이용</div>
-        <div className="text-space-purple  underline ">강남1호점</div>
-      </div>
-
-      <div className="flex justify-between ">
-        {/* 왼쪽 */}
-        <div className="flex flex-col gap-1 ">
-          {/* 위 */}
-          <div className="text-gray-700 font-semibold text-base">
-            스튜디오 조명 A-34룸
+      {/* 이용중일 때 */}
+      <>
+        <div className="flex items-center gap-2 font-normal text-sm">
+          <div className=" text-gray-500">현재 이용</div>
+          <div className="text-space-purple  underline ">강남1호점</div>
+        </div>
+
+        <div className="flex justify-between ">
+          <div className="flex flex-col gap-1 ">
+            <div className="text-gray-700 font-semibold text-base">
+              스튜디오 조명 A-34룸
+            </div>
+            <div className="text-gray-500 text-sm font-normal">오늘 16:00 ~ 18:00</div>
+          </div>
+
+          <div className="cursor-pointer px-8 text-space-purple flex items-center justify-center border-2 border-space-purple font-medium rounded-md">
+            이용종료
+          </div>
+        </div>
+      </>
+
+      {/* 예약된 일정이 있지만 이용전일때 */}
+      {/* <>
+        <div className="flex items-center gap-2 font-normal text-sm">
+          <div className=" text-gray-500">다음 예약</div>
+          <div className="text-space-purple  underline ">종로점</div>
+        </div>
+
+        <div className="flex justify-between ">
+          <div className="flex flex-col gap-1 ">
+            <div className="text-gray-700 font-semibold text-base">
+              스튜디오 조명 A-34룸
+            </div>
+            <div className="text-gray-500 text-sm font-normal">오늘 16:00 ~ 18:00</div>
+          </div>
+
+          <div className="cursor-pointer px-8 text-gray-500 flex items-center justify-center border-2 border-gray-500 font-medium rounded-md">
+            이용 전
           </div>
-          {/* 아래 */}
-          <div className="text-gray-500 text-sm font-normal">오늘 16:00 ~ 18:00</div>
         </div>
+      </> */}
 
-        {/* 오른쪽 */}
-        <div className="cursor-pointer py-2 px-5 text-space-purple flex items-center justify-center border-2 border-space-purple font-medium rounded-md">
-          이용종료
+      {/* 예약이 없을때 */}
+      {/* <>
+        <div className="my-[28px] flex justify-center items-center text-gray-700 text-base font-normal ">
+          예정된 일정이 없습니다.
         </div>
-      </div>
+      </> */}
     </div>
   );
 };

src/components/home/UserInfo.tsx

@@ -1,3 +1,4 @@
+'use client';
 import React from 'react';
 
 const UserInfo = () => {

src/components/home/weekSchedule/WeekSchedule.tsx

@@ -1,3 +1,4 @@
+'use client';
 import React, { useState } from 'react';
 import { format, startOfWeek, addDays, isSaturday, isSunday, isSameDay } from 'date-fns';
 import { ko } from 'date-fns/locale';

src/constant/officeNotification.ts

@@ -0,0 +1,34 @@
+export const officeNotification = [
+  {
+    id: 1,
+    title: '미팅룸 내부수리에 따른 통행제한 공지 알림'
+  },
+  {
+    id: 2,
+    title: '시설 정기 점검 안내'
+  },
+  {
+    id: 3,
+    title: '건물 외벽 도색 작업 안내'
+  },
+  {
+    id: 4,
+    title: '(수리 완료) 엘리베이터 고장 안내'
+  },
+  {
+    id: 5,
+    title: '흡연장소 안내'
+  },
+  {
+    id: 6,
+    title: '소방시설 작동 기능 점검 안내'
+  },
+  {
+    id: 7,
+    title: '설 연휴 휴무 안내'
+  },
+  {
+    id: 8,
+    title: '대체 공휴일 정상 운영 안내'
+  }
+];