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

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

src/pages/events/[id].tsx

@@ -1,63 +1,82 @@
+'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 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 { 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='행사명'
+        title="행사명"
         onClick={() => router.back()}
         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]')}>
-          <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="행사 대표 이미지"
           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]')}
+              className={cn('w-full h-full bg-gray-200 rounded-[2rem]')}
               role="img"
-              aria-label={`${name} 이미지가 제공되지 않습니다.`}
+              aria-label={`${title} 이미지가 제공되지 않습니다.`}
             />
           )}
         </section>
@@ -67,47 +86,50 @@ const EventDetailPage = () => {
           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}
-            variant='gray'
-            size='large'
+            eventId={eventId}
+            name={title}
+            address={address ?? ''}
+            description={body ?? ''}
+            variant="gray"
+            size="large"
+            imageSrc={imageUrl ?? ''}
+            liked={eventDetail.isBookmarked ?? false}
           />
 
           {/* 관련 행사 */}
           <div
             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) ? (
+                  <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,15 @@ 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';
 
 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 +31,53 @@ 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)}
-                className='cursor-pointer'
+                className="cursor-pointer"
               >
                 <EventCard
+                  eventId={event.id}
                   name={event.name}
                   address={event.address}
                   description={event.description}
-                  variant='gray'
-                  size='medium'
-                  imageSrc={event.imageSrc ?? ''}
+                  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)]',
@@ -38,21 +48,22 @@ 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
+              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 +76,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>