🔗API & ✨Feat : 이벤트 페이지 api 연결

next.config.ts

@@ -17,8 +17,14 @@ const nextConfig: NextConfig = {
   },
 
   images: {
-    domains: ['maps.googleapis.com'],
-  },
+  domains: ['maps.googleapis.com'],
+  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(

src/pages/events/[id].tsx

@@ -1,25 +1,37 @@
+'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';
 
 const EventDetailPage = () => {
   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);
+
+  useEffect(() => {
+    if (!isLoading && (isError || !eventDetail)) {
+      router.replace('/events');
+    }
+  }, [isLoading, isError, eventDetail, router]);
+
+  if (!eventId) return null;
+  if (isError || !eventDetail) return null;
+
+  const { title, body, address, startDate, endDate, imageUrl, nextEvents } =
+    eventDetail;
 
-  const { name, address, description, startDate, endDate, imageSrc } = event;
+  const nextList = buildNextEventList(nextEvents);
 
-    return (
-    <div
-      className={cn(
-        'relative w-full min-h-[100vh] overflow-auto',
-      )}
-    >
+  return (
+    <div className={cn('relative w-full min-h-[100vh] overflow-auto')}>
       <Header
         title='행사명'
         onClick={() => router.back()}
@@ -29,85 +41,89 @@ const EventDetailPage = () => {
       <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]')}>
-          <DateTag startDate={startDate} endDate={endDate} />
+        <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"
+              className={cn('w-full h-full bg-gray-200 rounded-[2rem]')}
+              role='img'
               aria-label={`${name} 이미지가 제공되지 않습니다.`}
             />
           )}
         </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, idx) => (
+              <div key={idx} className={cn('w-[17rem]')}>
+                {item.isEmpty ? (
+                  <div className='w-[17rem] h-[8rem] bg-gray-200 rounded-[1rem]' />
+                ) : (
+                  <EventCard
+                    eventId={item.eventId}
+                    name={item.title}
+                    address=''
+                    description=''
+                    imageSrc={item.imageUrl}
+                    variant='gray'
+                    size='small'
+                    liked={false}
+                  />
+                )}
+              </div>
+            ))}
           </div>
         </div>
       </main>
     </div>
   );
 };
 
-export default EventDetailPage;
+export default EventDetailPage;

src/pages/events/index.tsx

@@ -10,18 +10,14 @@ 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';
 
 export default function EventPage() {
   const router = useRouter();
   const [date, setDate] = useState<Date>();
+  const { events } = useEvents(date);
 
-  const selectedDate = formatDateToISO(date);
-
-  const filteredEvents = eventData.filter((event) =>
-    isDateWithinRange(selectedDate, event.startDate, event.endDate),
-  );
+  const filteredEvents = events;
 
   const handleCardClick = (id: number) => {
     router.push(`/events/${id}`);
@@ -34,47 +30,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) => (
-              <div
-                key={event.id}
-                onClick={() => handleCardClick(event.id)}
-                className='cursor-pointer'
-              >
-                <EventCard
-                  name={event.name}
-                  address={event.address}
-                  description={event.description}
-                  variant='gray'
-                  size='medium'
-                  imageSrc={event.imageSrc ?? ''}
-                />
-              </div>
-            ))}
+            {filteredEvents.map((event) => {
+              return (
+                <div
+                  key={event.id}
+                  onClick={() => handleCardClick(event.id)}
+                  className='cursor-pointer'
+                >
+                  <EventCard
+                    eventId={event.id}
+                    name={event.name}
+                    address={event.address}
+                    description={event.description}
+                    variant='gray'
+                    size='medium'
+                    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'

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 && (isError || !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)]',
@@ -42,17 +52,18 @@ const EventSavePage = () => {
             '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]')}
+              className={cn('w-full h-full bg-gray-200 rounded-[2rem]')}
+              role='img'
+              aria-label={`${name} 이미지가 제공되지 않습니다.`}
             />
           )}
         </section>
@@ -64,16 +75,18 @@ const EventSavePage = () => {
             'mt-[0.8rem]',
           )}
         >
-          <EventCard
-            name={name}
-            address={address}
-            description={description}
-            variant='gray'
-            size='large'
+         <EventCard
+            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>