diff --git a/next.config.ts b/next.config.ts
index aea2307..a343270 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -20,10 +20,17 @@ const nextConfig: NextConfig = {
     domains: [
       'maps.googleapis.com',
       'geulda-ai-video-bucket.s3.ap-southeast-2.amazonaws.com',
-      'example.com'
+      'example.com',
+      'www.bucheon.go.kr',
+      'www.bcf.or.kr',
+    ],
+    remotePatterns: [
+      { protocol: 'https', hostname: 'mblogthumb-phinf.pstatic.net' },
+      { protocol: 'https', hostname: 'blogfiles.pstatic.net' },
+      { protocol: 'https', hostname: 'postfiles.pstatic.net' },
     ],
   },
-  
+
   webpack: (config) => {
     const svgRule = config.module.rules.find(
       // @ts-ignore
diff --git a/src/pages/events/[id].tsx b/src/pages/events/[id].tsx
index 467a9b4..e837f5c 100644
--- a/src/pages/events/[id].tsx
+++ b/src/pages/events/[id].tsx
@@ -1,108 +1,140 @@
+'use client';
+
+import { useEffect } from 'react';
 import { Header, EventCard } from '@/shared/components';
 import DateTag from '@/pages/events/components/DateTag';
 import { cn } from '@/shared/lib';
-import { eventData } from '@/shared/constants/events/eventsData';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
+import { useEventDetail } from '@/shared/hooks/events/useEventDetail';
+import { buildNextEventList } from '@/shared/utils/buildNextEventList';
+import type { RelatedEventOrEmpty } from '@/shared/types/eventtypes';
+
+const isEmptyItem = (item: RelatedEventOrEmpty): item is { isEmpty: true } =>
+  'isEmpty' in item;
 
 const EventDetailPage = () => {
   const router = useRouter();
-  const { id } = router.query;
+  const { id, date } = router.query;
+
+  const eventId = Number(id);
+  const { data: eventDetail, isLoading, isError } = useEventDetail(eventId);
+
+  useEffect(() => {
+    if (!isLoading && (isError || !eventDetail)) {
+      router.replace('/events');
+    }
+  }, [isLoading, isError, eventDetail, router]);
 
-  const event = eventData.find((e) => e.id === Number(id));
-  if (!event) return null;
+  if (!eventId) return null;
+  if (isError || !eventDetail) return null;
+  if (!router.isReady) return null;
 
-  const { name, address, description, startDate, endDate, imageSrc } = event;
+  const { title, body, address, startDate, endDate, imageUrl, nextEvents } =
+    eventDetail;
 
-    return (
-    <div
-      className={cn(
-        'relative w-full min-h-[100vh] overflow-auto',
-      )}
-    >
+  const nextList = buildNextEventList(nextEvents);
+
+  return (
+    <div className={cn('relative w-full min-h-[100vh] overflow-auto')}>
       <Header
         title='행사명'
-        onClick={() => router.back()}
+        onClick={() => router.push(`/events${date ? `?date=${date}` : ''}`)}
         className={cn('fixed top-0 left-0 right-0 z-50')}
       />
 
       <main
         className={cn(
           'flex flex-col items-center justify-start',
-          'px-[2.4rem] pt-[calc(10rem+1.4rem)]'
+          'px-[2.4rem] pt-[calc(10rem+1.4rem)]',
         )}
       >
         {/* 행사 기간 */}
-        <div aria-label="행사 기간" className={cn('flex justify-center w-[18.4rem] mt-[1.3rem]')}>
+        <div
+          aria-label='행사 기간'
+          className={cn('flex justify-center w-[18.4rem] mt-[1.3rem]')}
+        >
           <DateTag startDate={startDate} endDate={endDate} />
         </div>
 
         {/* 대표 이미지 */}
         <section
-          aria-label="행사 대표 이미지"
+          aria-label='행사 대표 이미지'
           className={cn(
-            'relative w-full flex justify-center max-w-[35.4rem]',
-            'mt-[1rem]'
+            'relative w-full flex justify-center max-w-[35.4rem]  h-[43rem]',
+            'mt-[1rem]',
           )}
         >
-          {imageSrc ? (
+          {imageUrl ? (
             <Image
-              src={imageSrc}
-              alt={`${name} 이미지`}
-              width={354}
-              height={430}
-              className={cn('w-full h-auto object-cover rounded-[2rem]')}
+              src={imageUrl}
+              alt={`${title} 이미지`}
+              fill
+              className={cn('object-cover rounded-[2rem]')}
             />
           ) : (
             <div
-              className={cn('w-full h-[43.6rem] bg-gray-200 rounded-[2rem]')}
-              role="img"
-              aria-label={`${name} 이미지가 제공되지 않습니다.`}
+              className={cn('w-full h-full bg-gray-200 rounded-[2rem]')}
+              role='img'
+              aria-label={`${title} 이미지가 제공되지 않습니다.`}
             />
           )}
         </section>
 
         {/* 행사 카드 */}
         <div
-          aria-label="행사 정보"
+          aria-label='행사 정보'
           className={cn(
             'flex flex-col items-center w-full gap-[0.8rem]',
-            'mt-[0.8rem]'
+            'mt-[0.8rem]',
           )}
         >
           <EventCard
-            name={name}
-            address={address}
-            description={description}
+            eventId={eventId}
+            name={title}
+            address={address ?? ''}
+            description={body ?? ''}
             variant='gray'
             size='large'
+            imageSrc={imageUrl ?? ''}
+            liked={eventDetail.isBookmarked ?? false}
           />
-
           {/* 관련 행사 */}
           <div
-            aria-label="관련 행사 목록"
+            aria-label='관련 행사 목록'
             className={cn(
-              'grid grid-cols-2 gap-[1.2rem] justify-items-center w-full max-w-[35.4rem]'
+              'grid grid-cols-2 gap-[1.2rem] justify-items-center w-full max-w-[35.4rem]',
             )}
           >
-            <div className={cn('w-[17rem]')}>
-              <EventCard
-                name='관련 행사'
-                address=''
-                description=''
-                variant='gray'
-                size='small'
-              />
-            </div>
-            <div className={cn('w-[17rem]')}>
-              <EventCard
-                name='관련 행사'
-                address=''
-                description=''
-                variant='gray'
-                size='small'
-              />
-            </div>
+            {nextList.map((item: RelatedEventOrEmpty, idx) => (
+              <div key={idx} className={cn('w-[17rem]')}>
+                {isEmptyItem(item) ? (
+                  <EventCard
+                    eventId={0}
+                    name='행사 없음'
+                    address=''
+                    description=''
+                    imageSrc=''
+                    variant='gray'
+                    size='small'
+                    liked={false}
+                    onClick={() => null}
+                  />
+                ) : (
+                  <EventCard
+                    eventId={item.eventId}
+                    name={item.title}
+                    address=''
+                    description=''
+                    imageSrc={item.imageUrl}
+                    variant='gray'
+                    size='small'
+                    liked={false}
+                    onClick={() => router.push(`/events/${item.eventId}`)}
+                  />
+                )}
+              </div>
+            ))}
           </div>
         </div>
       </main>
@@ -110,4 +142,4 @@ const EventDetailPage = () => {
   );
 };
 
-export default EventDetailPage;
\ No newline at end of file
+export default EventDetailPage;
diff --git a/src/pages/events/index.tsx b/src/pages/events/index.tsx
index 05777e1..e4874da 100644
--- a/src/pages/events/index.tsx
+++ b/src/pages/events/index.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { useRouter } from 'next/router';
 import { Icon } from '@/shared/icons';
 import { cn } from '@/shared/lib';
@@ -10,22 +10,24 @@ import {
   BottomNav,
   EventCard,
 } from '@/shared/components';
-import { eventData } from '@/shared/constants/events/eventsData';
-import { formatDateToISO, isDateWithinRange } from '@/shared/utils/date';
+import { useEvents } from '@/shared/hooks/events/useEvents';
+import type { EventData } from '@/shared/types/eventtypes';
+import { formatDateToISO } from '@/shared/utils/date';
 
 export default function EventPage() {
   const router = useRouter();
-  const [date, setDate] = useState<Date>();
+  const { date: dateQuery } = router.query;
+  const [date, setDate] = useState<Date | undefined>(undefined);
+  const { events } = useEvents(date);
 
-  const selectedDate = formatDateToISO(date);
+  const filteredEvents = events;
+  useEffect(() => {
+    if (router.isReady && dateQuery) {
+      setDate(new Date(String(dateQuery)));
+    }
+  }, [router.isReady, dateQuery]);
 
-  const filteredEvents = eventData.filter((event) =>
-    isDateWithinRange(selectedDate, event.startDate, event.endDate),
-  );
-
-  const handleCardClick = (id: number) => {
-    router.push(`/events/${id}`);
-  };
+  const selectedDateString = date ? formatDateToISO(date) : '';
 
   return (
     <div
@@ -34,47 +36,55 @@ export default function EventPage() {
       )}
     >
       {/* 헤더 */}
-      <ControlBar className="fixed top-[1rem] left-0 right-0 z-50 px-[2rem]" />
+      <ControlBar className='fixed top-[1rem] left-0 right-0 z-50 px-[2rem]' />
 
       {/* 본문 콘텐츠 */}
       <main className='w-full pt-[6.3rem] flex flex-col items-center'>
         {/* 날짜 선택 */}
         <div className='w-full mt-[3.7rem] flex justify-start'>
           {/* 스크린리더가 “날짜 선택”으로 읽히도록 추가 */}
-          <label htmlFor="event-date" className="sr-only">
+          <label htmlFor='event-date' className='sr-only'>
             행사 날짜 선택
           </label>
-          <DatePicker ariaLabel="행사 날짜 선택" value={date} onChange={setDate} />
+          <DatePicker
+            ariaLabel='행사 날짜 선택'
+            value={date}
+            onChange={setDate}
+          />
         </div>
 
         {/* 행사카드 & 빈화면 */}
         {filteredEvents.length > 0 ? (
           <section
-            aria-label="이벤트 목록"
+            aria-label='이벤트 목록'
             className={cn(
               'grid w-full mt-[1.4rem]',
               'grid-cols-2 gap-x-[1.4rem] gap-y-[1.4rem]',
             )}
           >
-            {filteredEvents.map((event) => (
+            {filteredEvents.map((event: EventData) => (
               <div
                 key={event.id}
-                onClick={() => handleCardClick(event.id)}
+                onClick={() =>
+                  router.push(`/events/${event.id}?date=${selectedDateString}`)
+                }
                 className='cursor-pointer'
               >
                 <EventCard
+                  eventId={event.id}
                   name={event.name}
                   address={event.address}
                   description={event.description}
                   variant='gray'
                   size='medium'
-                  imageSrc={event.imageSrc ?? ''}
+                  imageSrc={event.imageSrc}
+                  liked={event.liked}
                 />
               </div>
             ))}
           </section>
         ) : (
-          <div 
+          <div
             className='flex flex-col items-center justify-center text-center mt-[15rem]'
             role='status'
             aria-live='polite'
diff --git a/src/pages/mypage/events/[id].tsx b/src/pages/mypage/events/[id].tsx
index 73808fa..fa26997 100644
--- a/src/pages/mypage/events/[id].tsx
+++ b/src/pages/mypage/events/[id].tsx
@@ -1,18 +1,28 @@
+import { useEffect } from 'react';
 import { Header, EventCard, AddressCopy } from '@/shared/components';
 import DateTag from '@/pages/events/components/DateTag';
 import { cn } from '@/shared/lib';
-import { eventData } from '@/shared/constants/events/eventsData';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
+import { useEventDetail } from '@/shared/hooks/events/useEventDetail';
 
 const EventSavePage = () => {
   const router = useRouter();
   const { id } = router.query;
 
-  const event = eventData.find((e) => e.id === Number(id));
-  if (!event) return null;
+  const eventId = Number(id);
+  const { data: eventDetail, isLoading, isError } = useEventDetail(eventId);
 
-  const { name, address, description, startDate, endDate, imageSrc } = event;
+  useEffect(() => {
+    if (!isLoading && (!isLoading|| !eventDetail)) {
+      router.replace('/mypage');
+    }
+  }, [isLoading, isError, eventDetail, router]);
+
+  if (!eventId) return null;
+  if (isError || !eventDetail) return null;
+
+  const { title, body, address, startDate, endDate, imageUrl } = eventDetail;
 
   return (
     <div className={cn('relative w-full min-h-[100vh] overflow-auto')}>
@@ -23,8 +33,8 @@ const EventSavePage = () => {
       />
 
       <main
-        role="main"
-        aria-label="저장한 행사 상세 페이지"
+        role='main'
+        aria-label='저장한 행사 상세 페이지'
         className={cn(
           'flex flex-col items-center justify-start',
           'px-[2.4rem] pt-[calc(10rem+1.4rem)]',
@@ -38,21 +48,23 @@ const EventSavePage = () => {
         {/* 대표 이미지 */}
         <section
           className={cn(
-            'relative w-full flex justify-center max-w-[35.4rem]',
+            'relative w-full flex justify-center max-w-[35.4rem] h-[43rem]',
             'mt-[1rem]',
           )}
         >
-          {imageSrc ? (
+          {imageUrl ? (
             <Image
-              src={imageSrc}
-              alt={`${name} 이미지`}
-              width={354}
-              height={430}
-              className={cn('w-full h-auto object-cover rounded-[2rem]')}
+              src={imageUrl}
+              alt={`${title} 이미지`}
+              fill
+              sizes="(max-width: 35.4rem) 100vw, 35.4rem"  
+              className='object-cover rounded-[2rem]'
             />
           ) : (
             <div
-              className={cn('w-full h-[43.6rem] bg-gray-200 rounded-[2rem]')}
+              className='w-full h-full bg-gray-200 rounded-[2rem]'
+              role='img'
+              aria-label={`${title} 이미지가 제공되지 않습니다.`}
             />
           )}
         </section>
@@ -65,15 +77,17 @@ const EventSavePage = () => {
           )}
         >
           <EventCard
-            name={name}
-            address={address}
-            description={description}
+            eventId={eventId}
+            name={title}
+            address={address ?? ''}
+            description={body ?? ''}
             variant='gray'
             size='large'
+            imageSrc={imageUrl ?? ''}
+            liked={eventDetail.isBookmarked ?? true}
           />
-
           {/* 주소복사 */}
-          <AddressCopy variant='gray' value={address} />
+          <AddressCopy variant='gray' value={address ?? ''} />
         </div>
       </main>
     </div>
diff --git a/src/pages/mypage/index.tsx b/src/pages/mypage/index.tsx
index 4becd53..3e4741c 100644
--- a/src/pages/mypage/index.tsx
+++ b/src/pages/mypage/index.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import React, { useEffect } from 'react';
+import { useRouter } from 'next/router';
 import type { AxiosError } from 'axios';
 import ProfilePhoto from '@/pages/mypage/components/ProfilePhoto';
 import PostcardContainer from '@/pages/mypage/components/PostcardContainer';
@@ -13,6 +14,7 @@ import { useMyPageQuery } from '@/shared/api/member';
 
 export default function MyPage() {
   const { isLoggedIn } = useUserStatus();
+  const router = useRouter(); 
   const {
     showLoginPopup,
     showLogoutPopup,
@@ -73,6 +75,7 @@ export default function MyPage() {
           {isLoggedIn === false && (
             <div className='max-h-[18rem] overflow-y-auto no-scrollbar space-y-[1rem]'>
               <EventCard
+                eventId={99}
                 name='행사 이름'
                 address='우리집'
                 description='행사 설명'
@@ -81,6 +84,7 @@ export default function MyPage() {
                 imageSrc=''
               />
               <EventCard
+                eventId={98}
                 name='행사 이름'
                 address='우리집'
                 description='행사 설명'
@@ -97,12 +101,15 @@ export default function MyPage() {
               {bookmarkedEvents.map((event) => (
                 <EventCard
                   key={event.eventId}
-                  name={event.eventName}
-                  address=''
-                  description=''
+                  eventId={event.eventId}
+                  name={event.title ?? event.eventName ?? ''}
+                  address={event.address ?? ''}
+                  description={event.body ?? ''}
                   variant='gray'
                   size='large'
-                  imageSrc={event.eventImageUrl}
+                  imageSrc={event.imageUrl}
+                  liked={true}
+                  onClick={() => router.push(`/mypage/events/${event.eventId}`)}
                 />
               ))}
             </div>
diff --git a/src/shared/api/events/event.ts b/src/shared/api/events/event.ts
new file mode 100644
index 0000000..1195d11
--- /dev/null
+++ b/src/shared/api/events/event.ts
@@ -0,0 +1,74 @@
+import { apiWithToken } from '@/shared/api/instance';
+import type { ApiResponse } from '@/shared/types/authtypes';
+import type { EventData, EventResponse } from '@/shared/types/eventtypes';
+import { mapEvent } from '@/shared/hooks/events/EventMapper';
+
+// 전체 행사 목록 조회
+export const fetchEvents = async (
+  date: string,
+): Promise<ApiResponse<EventData[]>> => {
+  const res = await apiWithToken.get('/api/events', {
+    params: { date },
+  });
+
+  const mapped = await Promise.all(
+    res.data.data.map(async (item: EventResponse) => {
+    const detail = await apiWithToken.get(`/api/events/${item.eventId}`);
+      const detailData = detail.data.data;
+
+      return {
+        id: item.eventId,
+        name: item.title,
+        description: item.body,
+        address: item.address ?? '',
+        startDate: item.startDate ?? '',
+        endDate: item.endDate ?? '',
+        imageSrc: detailData.imageUrl ?? '', 
+        liked: item.isBookmarked ?? false, 
+      } satisfies EventData;
+    }),
+  );
+
+  return {
+    ...res.data,
+    data: mapped,
+  };
+};
+
+
+
+// 행사 상세 조회
+export const fetchEventDetail = async (
+  eventId: number,
+): Promise<ApiResponse<EventData>> => {
+  const res = await apiWithToken.get(`/api/events/${eventId}`);
+
+  return {
+    ...res.data,
+    data: res.data.data,
+  };
+};
+
+// 북마크 추가
+export const postBookmark = async (
+  eventId: number,
+): Promise<ApiResponse<null>> => {
+  const res = await apiWithToken.post(`/api/events/${eventId}/bookmark`);
+  return res.data;
+};
+
+// 북마크 취소
+export const deleteBookmark = async (
+  eventId: number,
+): Promise<ApiResponse<null>> => {
+  const res = await apiWithToken.delete(`/api/events/${eventId}/bookmark`);
+  return res.data;
+};
+
+// 북마크 상태 조회
+export const fetchBookmarkStatus = async (
+  eventId: number,
+): Promise<ApiResponse<{ isBookmarked: boolean }>> => {
+  const res = await apiWithToken.get(`/api/events/${eventId}/bookmark`);
+  return res.data;
+};
diff --git a/src/shared/api/member.ts b/src/shared/api/member.ts
index 013c448..e37fce4 100644
--- a/src/shared/api/member.ts
+++ b/src/shared/api/member.ts
@@ -26,7 +26,6 @@ export const useMyPageQuery = (enabled: boolean) =>
     queryKey: ['myPage'],
     queryFn: fetchMyPage,
     enabled,
-    staleTime: 1000 * 60 * 5,
   });
 
 export const useMyInfoQuery = (enabled: boolean) =>
@@ -34,7 +33,6 @@ export const useMyInfoQuery = (enabled: boolean) =>
     queryKey: ['myInfo'],
     queryFn: fetchMyInfo,
     enabled,
-    staleTime: 1000 * 60 * 5,
   });
 
 export const getPostCardDetail = async (postcardId: number) => {
diff --git a/src/shared/components/container/EventCard.tsx b/src/shared/components/container/EventCard.tsx
index 585610a..37c7d37 100644
--- a/src/shared/components/container/EventCard.tsx
+++ b/src/shared/components/container/EventCard.tsx
@@ -1,10 +1,13 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { Icon } from '@/shared/icons';
 import { Card } from '@/shared/components/container/Card';
 import { cn } from '@/shared/lib';
 import Image from 'next/image';
+import { useBookmark } from '@/shared/hooks/events/useBookmark';
+import LoginRequired from '@/pages/mypage/components/LoginRequired';
 
 interface EventCardProps {
+  eventId: number;
   name: string;
   address: string;
   description: string;
@@ -13,113 +16,83 @@ interface EventCardProps {
   variant?: 'gray' | 'mint';
   size?: 'small' | 'medium' | 'large';
   imageSrc?: string;
+  liked?: boolean;
+  onClick?: () => void;
 }
 
 const EventCard = ({
+  eventId,
   name,
   address,
   description,
   variant = 'gray',
   size = 'medium',
   imageSrc = '',
+  liked = false,
+  onClick,
 }: EventCardProps) => {
-  const [liked, setLiked] = useState(false);
+  const { isBookmarked, toggleBookmark, requireLogin, setRequireLogin } =
+    useBookmark(eventId, liked);
 
-  const handleLikeClick = () => {
-    setLiked((prev) => !prev);
-  };
   return (
-    <Card
-      variant={variant}
-      size={size === 'small' ? undefined : size}
-      customHeight={
-        size === 'large' ? '13rem' : size === 'small' ? '8rem' : undefined
-      }
-    >
-      {size === 'small' ? (
-        <div className='flex w-[17rem] h-[8rem] p-[0.9rem_1rem] justify-center items-center flex-shrink-0 gap-[2rem]'>
-          {/* 행사 사진 */}
-          <div className='relative w-[7rem] h-full rounded-[0.8rem] flex-shrink-0 overflow-hidden'>
-            {imageSrc ? (
-              <Image
-                src={imageSrc}
-                alt={name}
-                fill
-                className='object-cover'
-                sizes='7rem'
-                loading='lazy'
-              />
-            ) : (
-              <div className='absolute inset-0 bg-gray-200 rounded-[0.8rem]' />
-            )}
-          </div>
-          {/* 행사 이름*/}
-          <span
-            className={cn(
-              'text-label-md truncate mb-[3rem]',
-              variant === 'mint' ? 'text-mint-800' : 'text-gray-600',
-            )}
-          >
-            {name}
-          </span>
-        </div>
-      ) : size === 'medium' ? (
-        <div className='flex flex-col justify-between w-full'>
-          {/* 행사 사진 */}
-          <div className='relative w-full h-[9rem] rounded-[2rem] mb-[1rem] overflow-hidden'>
-            {imageSrc ? (
-              <Image
-                src={imageSrc}
-                alt={name}
-                fill
-                className='object-cover'
-                //성능향상 - 이미지 최적화
-                sizes='(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 142px'
-                loading='lazy'
-              />
-            ) : (
-              <div className='w-full h-full bg-gray-200' />
-            )}
-          </div>
+    <>
+      {requireLogin && <LoginRequired onClose={() => setRequireLogin(false)} />}
 
-          {/* 행사 이름 + 하트 */}
-          <div className='flex items-center justify-between w-full mb-[0.2rem]'>
+      <Card
+        variant={variant}
+        size={size === 'small' ? undefined : size}
+        customHeight={
+          size === 'large' ? '13rem' : size === 'small' ? '8rem' : undefined
+        }
+        onClick={onClick}
+      >
+        {size === 'small' ? (
+          <div className='flex w-[17rem] h-[8rem] p-[0.9rem_1rem] justify-center items-center flex-shrink-0 gap-[2rem]'>
+            {/* 행사 사진 */}
+            <div className='relative w-[7rem] h-full rounded-[0.8rem] flex-shrink-0 overflow-hidden'>
+              {imageSrc ? (
+                <Image
+                  src={imageSrc}
+                  alt={name}
+                  fill
+                  className='object-cover'
+                  sizes='7rem'
+                  loading='lazy'
+                />
+              ) : (
+                <div className='absolute inset-0 bg-gray-200 rounded-[0.8rem]' />
+              )}
+            </div>
+            {/* 행사 이름*/}
             <span
               className={cn(
-                'text-label-lg truncate', //1줄 초과
-                variant === 'mint' ? 'text-mint-800' : 'text-gray-900',
+                'text-label-md truncate mb-[3rem]',
+                variant === 'mint' ? 'text-mint-800' : 'text-gray-600',
               )}
             >
               {name}
             </span>
-
-            <Icon
-              name='HeartStraight'
-              size={20}
-              color={
-                liked ? 'red-400' : variant === 'mint' ? 'mint-400' : 'gray-300'
-              }
-              fillColor={liked ? 'red-300' : undefined}
-              onClick={handleLikeClick}
-              className='cursor-pointer'
-            />
           </div>
-          {/* 행사 주소 */}
-          <div
-            className={cn(
-              'text-body-md truncate', //1줄 초과
-              variant === 'mint' ? 'text-mint-500' : 'text-gray-500',
-            )}
-          >
-            {address}
-          </div>
-        </div>
-      ) : (
-        // Large 카드
-        <div className='flex items-start justify-between w-full gap-[1.2rem]'>
-          {/* 행사 제목 + 하트 */}
-          <div className='flex flex-col justify-between flex-1'>
-            <div className='flex items-start justify-between w-full'>
+        ) : size === 'medium' ? (
+          <div className='flex flex-col justify-between w-full'>
+            {/* 행사 사진 */}
+            <div className='relative w-full h-[9rem] rounded-[2rem] mb-[1rem] overflow-hidden'>
+              {imageSrc ? (
+                <Image
+                  src={imageSrc}
+                  alt={name}
+                  fill
+                  className='object-cover'
+                  //성능향상 - 이미지 최적화
+                  sizes='(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 142px'
+                  loading='lazy'
+                />
+              ) : (
+                <div className='w-full h-full bg-gray-200' />
+              )}
+            </div>
+            {/* 행사 이름 + 하트 */}
+            <div className='flex items-center justify-between w-full mb-[0.2rem]'>
               <span
                 className={cn(
                   'text-label-lg truncate', //1줄 초과
@@ -128,39 +101,89 @@ const EventCard = ({
               >
                 {name}
               </span>
-              <Icon
-                name='HeartStraight'
-                size={20}
-                color={
-                  liked
-                    ? 'red-400'
-                    : variant === 'mint'
-                    ? 'mint-400'
-                    : 'gray-300'
-                }
-                fillColor={liked ? 'red-300' : undefined}       
-                onClick={handleLikeClick}
-                isInteractive
-                pressed={liked}
-                aria-label={liked ? '좋아요 취소' : '좋아요'}
-                className='cursor-pointer'
-              />
-            </div>
 
+              <button
+                className='cursor-pointer p-1'
+                onClick={(e) => {
+                  e.stopPropagation();
+                  toggleBookmark();
+                }}
+              >
+                <Icon
+                  name='HeartStraight'
+                  size={20}
+                  color={
+                    isBookmarked
+                      ? 'red-400'
+                      : variant === 'mint'
+                      ? 'mint-400'
+                      : 'gray-300'
+                  }
+                  fillColor={isBookmarked ? 'red-300' : undefined}
+                />
+              </button>
+            </div>
             {/* 행사 설명 */}
-            <p
+            <div
               className={cn(
-                'text-body-md mt-[1rem] line-clamp-4 text-left', //4줄 초과
+                'text-body-md truncate', //1줄 초과
                 variant === 'mint' ? 'text-mint-500' : 'text-gray-500',
               )}
             >
               {description}
-            </p>
+            </div>
+          </div>
+        ) : (
+          // Large 카드
+          <div className='flex items-start justify-between w-full gap-[1.2rem]'>
+            {/* 행사 제목 + 하트 */}
+            <div className='flex flex-col justify-between flex-1'>
+              <div className='flex items-start justify-between w-full'>
+                <span
+                  className={cn(
+                    'text-label-lg truncate', //1줄 초과
+                    variant === 'mint' ? 'text-mint-800' : 'text-gray-900',
+                  )}
+                >
+                  {name}
+                </span>
+
+                <button
+                  className='cursor-pointer p-1'
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    toggleBookmark();
+                  }}
+                >
+                  <Icon
+                    name='HeartStraight'
+                    size={20}
+                    color={
+                      isBookmarked
+                        ? 'red-400'
+                        : variant === 'mint'
+                        ? 'mint-400'
+                        : 'gray-300'
+                    }
+                    fillColor={isBookmarked ? 'red-300' : undefined}
+                  />
+                </button>
+              </div>
+              {/* 행사 설명 */}
+              <p
+                className={cn(
+                  'text-body-md mt-[1rem] line-clamp-4 text-left',
+                  variant === 'mint' ? 'text-mint-500' : 'text-gray-500',
+                )}
+              >
+                {description}
+              </p>
+            </div>
           </div>
-        </div>
-      )}
-    </Card>
+        )}
+      </Card>
+    </>
   );
 };
 
-export default EventCard;
\ No newline at end of file
+export default EventCard;
diff --git a/src/shared/components/datePicker/DatePicker.tsx b/src/shared/components/datePicker/DatePicker.tsx
index 348d249..624e4e9 100644
--- a/src/shared/components/datePicker/DatePicker.tsx
+++ b/src/shared/components/datePicker/DatePicker.tsx
@@ -11,7 +11,7 @@ interface DatePickerProps {
   onChange?: (date: Date) => void;
   defaultValue?: Date;
   className?: string;
-  ariaLabel?: string; 
+  ariaLabel?: string;
 }
 const toFirstOfMonth = (d: Date) => new Date(d.getFullYear(), d.getMonth(), 1);
 export function DatePicker({
@@ -67,11 +67,12 @@ export function DatePicker({
     <div className={cn('flex flex-col gap-3', className)}>
       <Popover open={open} onOpenChange={setOpen}>
         <PopoverTrigger asChild>
-          <Button 
+          <Button
             aria-label={ariaLabel}
-            className='w-[16rem] h-[4rem] justify-between rounded-[500px] text-label-lg text-pink-300 bg-pink-50 border border-pink-100'>
+            className='w-[13rem] h-[4rem] justify-between rounded-[500px] text-label-lg text-pink-200 bg-pink-50 border border-pink-100'
+          >
             {selected ? selected.toLocaleDateString() : 'Select date'}
-            <Icon name='CalendarBlank' color='pink-400' size={14} />
+            <Icon name='Caret' color='pink-200' size={14} rotate={270} />
           </Button>
         </PopoverTrigger>
 
@@ -84,8 +85,8 @@ export function DatePicker({
             month={displayMonth}
             onMonthChange={setDisplayMonth}
             captionLayout='dropdown'
-            disabled={{ before: startOfToday }}
-            fromDate={startOfToday}
+            // disabled={{ before: startOfToday }}
+            // fromDate={startOfToday}
             toYear={new Date(new Date().getFullYear() + 5, 0, 1).getFullYear()}
             {...calendarProps}
           />
diff --git a/src/shared/components/set/PopupSet.tsx b/src/shared/components/set/PopupSet.tsx
index 4a5c1c8..de34ac2 100644
--- a/src/shared/components/set/PopupSet.tsx
+++ b/src/shared/components/set/PopupSet.tsx
@@ -24,7 +24,7 @@ export default function PopupSet({ text, onClose }: PopupSetProps) {
       {/* 중앙 고정 */}
       <div
         className={cn(
-          'fixed inset-0 z-[50]',
+          'fixed inset-0 z-[100]',
           'flex items-center justify-center',
         )}
       >
diff --git a/src/shared/constants/events/eventsData.ts b/src/shared/constants/events/eventsData.ts
deleted file mode 100644
index cf400d6..0000000
--- a/src/shared/constants/events/eventsData.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-export interface EventData {
-  id: number;
-  name: string;
-  address: string;
-  description: string;
-  startDate: string; 
-  endDate: string; 
-  imageSrc?: string;
-}
-
-export const eventData: EventData[] = [
-  {
-    id: 1,
-    name: 'ICPC',
-    address: '다솔관',
-    description: '야르',
-    startDate: '2025-11-01',
-    endDate: '2025-11-03',
-    imageSrc: '',
-  },
-  {
-    id: 2,
-    name: '아우름제',
-    address: '울학교',
-    description: '야르',
-    startDate: '2025-11-01',
-    endDate: '2025-11-02',
-    imageSrc: '',
-  },
-  {
-    id: 3,
-    name: '졸업식',
-    address: '가톨릭대학교',
-    description: '야르',
-    startDate: '2025-10-31',
-    endDate: '2025-10-31',
-    imageSrc: '',
-  },
-  {
-    id: 4,
-    name: '학술제',
-    address: '가톨릭대학교',
-    description: '야르',
-    startDate: '2025-10-30',
-    endDate: '2025-10-31',
-    imageSrc: '',
-  },
-  {
-    id: 5,
-    name: '둡둗다다',
-    address: '부천시청',
-    description: '야르',
-    startDate: '2025-10-30',
-    endDate: '2025-10-31',
-    imageSrc: '',
-  },
-  {
-    id: 6,
-    name: '배고파요',
-    address: '부천역',
-    description: '야르',
-    startDate: '2025-10-31',
-    endDate: '2025-11-01',
-    imageSrc: '',
-  },
-  {
-    id: 7,
-    name: '마짐막 테스트',
-    address: '가톨릭대학교',
-    description: '야르',
-    startDate: '2025-10-31',
-    endDate: '2025-11-01',
-    imageSrc: '',
-  },
-];
diff --git a/src/shared/hooks/events/EventMapper.ts b/src/shared/hooks/events/EventMapper.ts
new file mode 100644
index 0000000..4ee17dc
--- /dev/null
+++ b/src/shared/hooks/events/EventMapper.ts
@@ -0,0 +1,12 @@
+import { EventData, EventResponse } from '@/shared/types/eventtypes';
+
+export const mapEvent = (item: EventResponse): EventData => ({
+  id: item.eventId,
+  name: item.title,
+  description: item.body,
+  address: item.address ?? '',
+  startDate: item.startDate ?? '',
+  endDate: item.endDate ?? '',
+  imageSrc: item.thumbnailUrl ?? item.imageUrl ?? '',
+  liked: item.isBookmarked ?? false,
+});
diff --git a/src/shared/hooks/events/useBookmark.ts b/src/shared/hooks/events/useBookmark.ts
new file mode 100644
index 0000000..90c92e5
--- /dev/null
+++ b/src/shared/hooks/events/useBookmark.ts
@@ -0,0 +1,48 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { postBookmark, deleteBookmark } from '@/shared/api/events/event';
+import { getAccessToken } from '@/shared/utils/token';
+import { useQueryClient } from '@tanstack/react-query';
+
+export const useBookmark = (eventId: number, initialState: boolean) => {
+  const [isBookmarked, setIsBookmarked] = useState(initialState);
+  const [requireLogin, setRequireLogin] = useState(false);
+  const queryClient = useQueryClient();
+
+  useEffect(() => {
+    setIsBookmarked(initialState);
+  }, [initialState]);
+
+  const toggleBookmark = async () => {
+    const token = getAccessToken();
+    if (!token) {
+      setRequireLogin(true);
+      return;
+    }
+
+    try {
+      setIsBookmarked((prev) => !prev);
+      if (isBookmarked) {
+        await deleteBookmark(eventId);
+      } else {
+        await postBookmark(eventId);
+      }
+
+
+      queryClient.invalidateQueries({ queryKey: ['events'] });
+      queryClient.invalidateQueries({ queryKey: ['eventDetail', eventId] });
+      queryClient.invalidateQueries({ queryKey: ['myPage'] });
+      await queryClient.refetchQueries({ queryKey: ['myPage'] });
+    } catch (err) {
+     console.error('북마크 토글 실패:', err);
+    setIsBookmarked((prev) => !prev); 
+     }
+  };
+
+  return {  isBookmarked,
+    setIsBookmarked,
+    toggleBookmark,
+    requireLogin,
+    setRequireLogin,};
+};
diff --git a/src/shared/hooks/events/useEventDetail.ts b/src/shared/hooks/events/useEventDetail.ts
new file mode 100644
index 0000000..6890166
--- /dev/null
+++ b/src/shared/hooks/events/useEventDetail.ts
@@ -0,0 +1,21 @@
+'use client';
+
+import { useQuery } from '@tanstack/react-query';
+import { apiWithToken } from '@/shared/api/instance';  
+import type {
+  EventDetailResponse,
+  EventDetail,
+} from '@/shared/types/eventtypes';
+
+const fetchEventDetail = async (eventId: number): Promise<EventDetail> => {
+  const res = await apiWithToken.get<EventDetailResponse>(`/api/events/${eventId}`);
+  return res.data.data;
+};
+
+export const useEventDetail = (eventId: number) => {
+  return useQuery({
+    queryKey: ['eventDetail', eventId],
+    queryFn: () => fetchEventDetail(eventId),
+    enabled: !!eventId,
+  });
+};
diff --git a/src/shared/hooks/events/useEvents.ts b/src/shared/hooks/events/useEvents.ts
new file mode 100644
index 0000000..7ab0bf3
--- /dev/null
+++ b/src/shared/hooks/events/useEvents.ts
@@ -0,0 +1,21 @@
+'use client';
+
+import { useQuery } from '@tanstack/react-query';
+import { fetchEvents } from '@/shared/api/events/event';
+import { formatDateToISO } from '@/shared/utils/date';
+
+export const useEvents = (date?: Date) => {
+  const formattedDate = formatDateToISO(date);
+
+  const { data, isLoading, isError } = useQuery({
+    queryKey: ['events', formattedDate],
+    queryFn: () => fetchEvents(formattedDate!),
+    enabled: !!formattedDate,
+  });
+
+  return {
+    events: data?.data || [],
+    isLoading,
+    isError,
+  };
+};
diff --git a/src/shared/overlay/Overlay.tsx b/src/shared/overlay/Overlay.tsx
index 9f57af9..299d5f5 100644
--- a/src/shared/overlay/Overlay.tsx
+++ b/src/shared/overlay/Overlay.tsx
@@ -9,7 +9,7 @@ const Overlay = ({ onClick, opacity = 30, className }: OverlayProps) => {
     <div
       onClick={onClick}
       className={`
-        fixed inset-0 z-[40]
+        fixed inset-0 z-[99]
         transition-opacity duration-300
         ${className ?? ''}
       `}
diff --git a/src/shared/types/eventtypes.ts b/src/shared/types/eventtypes.ts
new file mode 100644
index 0000000..109cfad
--- /dev/null
+++ b/src/shared/types/eventtypes.ts
@@ -0,0 +1,42 @@
+export interface EventResponse {
+  eventId: number;
+  title: string;
+  body: string;
+  address?: string;
+  startDate?: string;
+  endDate?: string;
+  imageUrl?: string;
+  thumbnailUrl?: string;
+  isBookmarked?: boolean;
+}
+export interface EventData {
+  id: number;
+  name: string;
+  description: string;
+  address: string;
+  startDate: string;
+  endDate: string;
+  imageSrc: string;
+  liked: boolean;
+}
+
+export interface RelatedEvent {
+  eventId: number;
+  title: string;
+  imageUrl: string;
+}
+
+export interface EventDetailResponse {
+  success: boolean;
+  code: string;
+  message: string;
+  data: EventDetail;
+  timestamp: string;
+}
+
+export interface EventDetail extends EventResponse {
+  externalUrl?: string;
+  nextEvents: RelatedEvent[];
+}
+
+export type RelatedEventOrEmpty = RelatedEvent | { isEmpty: true };
\ No newline at end of file
diff --git a/src/shared/types/membertypes.ts b/src/shared/types/membertypes.ts
index 928662f..3a51bdd 100644
--- a/src/shared/types/membertypes.ts
+++ b/src/shared/types/membertypes.ts
@@ -2,10 +2,14 @@ export interface MyPageResponse {
   memberId: number;
   name: string;
   profileImageUrl: string;
-  bookmarkedEvents: {
+   bookmarkedEvents: {
     eventId: number;
-    eventName: string;
-    eventImageUrl: string;
+    title?: string;
+    body?: string;
+    address?: string;
+    imageUrl?: string;
+    eventName?: string;
+    eventImageUrl?: string;
   }[];
   postcards: {
     postcardId: number;
diff --git a/src/shared/utils/buildNextEventList.ts b/src/shared/utils/buildNextEventList.ts
new file mode 100644
index 0000000..1bfaa7d
--- /dev/null
+++ b/src/shared/utils/buildNextEventList.ts
@@ -0,0 +1,17 @@
+import type { RelatedEvent } from '@/shared/types/eventtypes';
+
+type RelatedEventOrEmpty = RelatedEvent | { isEmpty: true };
+
+export const buildNextEventList = (
+  nextEvents: RelatedEvent[],
+): RelatedEventOrEmpty[] => {
+  const MAX = 2;
+
+  if (nextEvents.length >= MAX) return nextEvents.slice(0, MAX);
+
+  const emptyItems: RelatedEventOrEmpty[] = Array(MAX - nextEvents.length).fill(
+    { isEmpty: true },
+  );
+
+  return [...nextEvents, ...emptyItems];
+};