diff --git a/package-lock.json b/package-lock.json
index 30e38de..e7cc175 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,6 +23,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": {
@@ -5764,6 +5765,24 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/swiper": {
+      "version": "11.1.3",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.1.3.tgz",
+      "integrity": "sha512-80MSxonyTxrGcaWj9YgvvhD8OG0B9/9IVZP33vhIEvyWvmKjnQDBieO+29wKvMx285sAtvZyrWBdkxaw6+D3aw==",
+      "funding": [
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/swiperjs"
+        },
+        {
+          "type": "open_collective",
+          "url": "http://opencollective.com/swiper"
+        }
+      ],
+      "engines": {
+        "node": ">= 4.7.0"
+      }
+    },
     "node_modules/synckit": {
       "version": "0.8.8",
       "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.8.8.tgz",
diff --git a/package.json b/package.json
index 3e11a30..9f0f319 100644
--- a/package.json
+++ b/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": {
diff --git a/src/components/home/AvailableRoom.tsx b/src/components/home/AvailableRoom.tsx
index ecacdb0..b0e9329 100644
--- a/src/components/home/AvailableRoom.tsx
+++ b/src/components/home/AvailableRoom.tsx
@@ -1,3 +1,4 @@
+'use client';
 import { format } from 'date-fns';
 import React, { useEffect, useState } from 'react';
 
diff --git a/src/components/home/BgPurpleLayout.tsx b/src/components/home/BgPurpleLayout.tsx
index a64ef2b..e409f80 100644
--- a/src/components/home/BgPurpleLayout.tsx
+++ b/src/components/home/BgPurpleLayout.tsx
@@ -1,3 +1,4 @@
+'use client';
 import React, { ReactNode } from 'react';
 
 const BgPurpleLayout = ({ children }: { children: ReactNode }) => {
diff --git a/src/components/home/CurrentOffice.tsx b/src/components/home/CurrentOffice.tsx
index 73627ce..ad0e796 100644
--- a/src/components/home/CurrentOffice.tsx
+++ b/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>
     </>
diff --git a/src/components/home/MainHeader.tsx b/src/components/home/MainHeader.tsx
index 5cd55a8..f721e7a 100644
--- a/src/components/home/MainHeader.tsx
+++ b/src/components/home/MainHeader.tsx
@@ -1,3 +1,4 @@
+'use client';
 import React from 'react';
 
 const MainHeader = () => {
diff --git a/src/components/home/MainPageIndex.tsx b/src/components/home/MainPageIndex.tsx
index 7a1f23f..468c479 100644
--- a/src/components/home/MainPageIndex.tsx
+++ b/src/components/home/MainPageIndex.tsx
@@ -1,3 +1,4 @@
+'use client';
 import React from 'react';
 import BgPurpleLayout from './BgPurpleLayout';
 import MainHeader from './MainHeader';
diff --git a/src/components/home/OfficeInfo.tsx b/src/components/home/OfficeInfo.tsx
index 593c0cc..2b68bfa 100644
--- a/src/components/home/OfficeInfo.tsx
+++ b/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>
   );
 };
diff --git a/src/components/home/UserInfo.tsx b/src/components/home/UserInfo.tsx
index 93800ee..33d790f 100644
--- a/src/components/home/UserInfo.tsx
+++ b/src/components/home/UserInfo.tsx
@@ -1,3 +1,4 @@
+'use client';
 import React from 'react';
 
 const UserInfo = () => {
diff --git a/src/components/home/weekSchedule/WeekSchedule.tsx b/src/components/home/weekSchedule/WeekSchedule.tsx
index 892341f..d52eef7 100644
--- a/src/components/home/weekSchedule/WeekSchedule.tsx
+++ b/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';
diff --git a/src/constant/officeNotification.ts b/src/constant/officeNotification.ts
new file mode 100644
index 0000000..7e95787
--- /dev/null
+++ b/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: '대체 공휴일 정상 운영 안내'
+  }
+];