Skip to content

Commit

Permalink
[#13] ✨랜딩페이지, 헤더, 푸터
Browse files Browse the repository at this point in the history
  • Loading branch information
JoohwanLeeJJang committed Jul 17, 2024
1 parent 6635ad2 commit 6baf7e0
Show file tree
Hide file tree
Showing 2 changed files with 87 additions and 2 deletions.
79 changes: 79 additions & 0 deletions src/pages/HeaderPage/headerpage.tsx
Original file line number Diff line number Diff line change
@@ -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;
10 changes: 8 additions & 2 deletions src/pages/SetLocation/SetLocation.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand Down

0 comments on commit 6baf7e0

Please sign in to comment.