feat: 전체 페이지&카테고리 페이지 로그인 핸들러 로직 추가

Author: xaexunxang

src/pages/event/ui/AllEventsPage.tsx

@@ -5,9 +5,13 @@ import searchIcon from '../../../../design-system/icons/Search.svg';
 import BottomBar from '../../../widgets/main/ui/BottomBar';
 import EventList from '../../../features/event-manage/event-list/ui/EventList';
 import { useNavigate } from 'react-router-dom';
+import useAuthStore from '../../../app/provider/authStore';
+import { AnimatePresence } from 'framer-motion';
+import LoginModal from '../../../widgets/main/ui/LoginModal';
 
 const AllEventsPage = () => {
   const navigater = useNavigate();
+  const { isModalOpen, openModal, closeModal, isLoggedIn, name } = useAuthStore();
 
   return (
     <div className="flex flex-col items-center mb-28">
@@ -23,8 +27,16 @@ const AllEventsPage = () => {
         leftButtonClassName="sm:text-lg md:text-xl lg:text-2xl font-extrabold font-nexon"
         leftButtonClick={() => navigater('/')}
         leftButtonLabel="같이가요"
-        rightContent={<SecondaryButton size="large" color="black" label="로그인" onClick={() => {}} />}
+        rightContent={
+          <SecondaryButton
+            size="large"
+            color="black"
+            label={isLoggedIn ? `${name}님` : '로그인'}
+            onClick={isLoggedIn ? closeModal : openModal}
+          />
+        }
       />
+      <AnimatePresence>{isModalOpen && <LoginModal onClose={closeModal} />}</AnimatePresence>
       {/* 이벤트 카드 목록 */}
       <EventList tag="current" />
       <BottomBar />

src/pages/event/ui/CategoryPage.tsx

@@ -5,11 +5,15 @@ import searchIcon from '../../../../design-system/icons/Search.svg';
 import BottomBar from '../../../widgets/main/ui/BottomBar';
 import EventList from '../../../features/event-manage/event-list/ui/EventList';
 import { useNavigate, useLocation } from 'react-router-dom';
+import useAuthStore from '../../../app/provider/authStore';
+import { AnimatePresence } from 'framer-motion';
+import LoginModal from '../../../widgets/main/ui/LoginModal';
 
 const CategoryPage = () => {
   const navigater = useNavigate();
   const location = useLocation();
   const category = location.state?.category;
+  const { isModalOpen, openModal, closeModal, isLoggedIn, name } = useAuthStore();
 
   return (
     <div className="flex flex-col items-center mb-28">
@@ -25,8 +29,16 @@ const CategoryPage = () => {
         leftButtonClassName="sm:text-lg md:text-xl lg:text-2xl font-extrabold font-nexon"
         leftButtonClick={() => navigater('/')}
         leftButtonLabel="같이가요"
-        rightContent={<SecondaryButton size="large" color="black" label="로그인" onClick={() => {}} />}
+        rightContent={
+          <SecondaryButton
+            size="large"
+            color="black"
+            label={isLoggedIn ? `${name}님` : '로그인'}
+            onClick={isLoggedIn ? closeModal : openModal}
+          />
+        }
       />
+      <AnimatePresence>{isModalOpen && <LoginModal onClose={closeModal} />}</AnimatePresence>
       {/* 이벤트 카드 목록 */}
       <EventList category={category} />
       <BottomBar />