diff --git a/src/pages/HeaderPage/headerpage.tsx b/src/pages/HeaderPage/headerpage.tsx
new file mode 100644
index 0000000..9095c44
--- /dev/null
+++ b/src/pages/HeaderPage/headerpage.tsx
@@ -0,0 +1,79 @@
+import Footer from '@/components/Footer';
+import Header from '@/components/Header';
+import NotificationModal from '@/components/ui/notificationModal';
+import ProfileModal from '@/components/ui/profileModal';
+import React, { useRef, useState } from 'react';
+
+const LandingPage: React.FC = () => {
+  const [isProfileModalOpen, setIsProfileModalOpen] = useState(false);
+  const [isNotificationModalOpen, setIsNotificationModalOpen] = useState(false);
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+  const [hasNotifications, setHasNotifications] = useState(false);
+  const [profileCoords, setProfileCoords] = useState<{
+    top: number;
+    left: number;
+  }>({
+    top: 0,
+    left: 0,
+  });
+  const [notificationCoords, setNotificationCoords] = useState<{
+    top: number;
+    left: number;
+  }>({
+    top: 0,
+    left: 0,
+  });
+  const profileRef = useRef<HTMLImageElement>(null);
+
+  const toggleProfileModal = (e?: React.MouseEvent) => {
+    if (e) {
+      const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+      setProfileCoords({ top: rect.bottom, left: rect.left });
+    }
+    setIsProfileModalOpen(!isProfileModalOpen);
+  };
+
+  const toggleNotificationModal = (e?: React.MouseEvent) => {
+    if (e) {
+      const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+      setNotificationCoords({ top: rect.bottom, left: rect.left });
+    }
+    setIsNotificationModalOpen(!isNotificationModalOpen);
+  };
+
+  const handleLogout = () => {
+    setIsLoggedIn(false);
+    setIsProfileModalOpen(false);
+  };
+
+  return (
+    <div className="relative">
+      <Header
+        toggleProfileModal={toggleProfileModal}
+        toggleNotificationModal={toggleNotificationModal}
+        isLoggedIn={isLoggedIn}
+        handleLoginLogout={() => setIsLoggedIn(!isLoggedIn)}
+        profileRef={profileRef}
+        hasNotifications={hasNotifications}
+      />
+      {/*컨텐츠 영역*/}
+      <Footer />
+      {isProfileModalOpen && (
+        <ProfileModal
+          toggleProfileModal={toggleProfileModal}
+          handleLogout={handleLogout}
+          coords={profileCoords}
+        />
+      )}
+      {isNotificationModalOpen && (
+        <NotificationModal
+          toggleNotificationModal={toggleNotificationModal}
+          setHasNotifications={setHasNotifications}
+          coords={notificationCoords}
+        />
+      )}
+    </div>
+  );
+};
+
+export default LandingPage;
diff --git a/src/pages/SetLocation/SetLocation.tsx b/src/pages/SetLocation/SetLocation.tsx
index df57108..8599bd1 100644
--- a/src/pages/SetLocation/SetLocation.tsx
+++ b/src/pages/SetLocation/SetLocation.tsx
@@ -20,8 +20,14 @@ const SetLocation: React.FC = () => {
   const [isNotificationModalOpen, setIsNotificationModalOpen] = useState(false);
   const [isLoggedIn, setIsLoggedIn] = useState(false);
   const [hasNotifications, setHasNotifications] = useState(false);
-  const [profileCoords, setProfileCoords] = useState<{ top: number; left: number }>({ top: 0, left: 0 });
-  const [notificationCoords, setNotificationCoords] = useState<{ top: number; left: number }>({ top: 0, left: 0 });
+  const [profileCoords, setProfileCoords] = useState<{
+    top: number;
+    left: number;
+  }>({ top: 0, left: 0 });
+  const [notificationCoords, setNotificationCoords] = useState<{
+    top: number;
+    left: number;
+  }>({ top: 0, left: 0 });
   const profileRef = useRef<HTMLImageElement>(null);
 
   const toggleProfileModal = (e?: React.MouseEvent) => {