Merge pull request #85 from geulDa/feat/#84/eventdeatail

✨Feat : 상세 행사 페이지

Author: KongMezu

src/pages/events/[id].tsx

@@ -0,0 +1,108 @@
+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';
+
+const EventDetailPage = () => {
+  const router = useRouter();
+  const { id } = router.query;
+
+  const event = eventData.find((e) => e.id === Number(id));
+  if (!event) return null;
+
+  const { name, address, description, startDate, endDate, imageSrc } = event;
+
+    return (
+    <div
+      className={cn(
+        'relative w-full min-h-[100vh] overflow-auto',
+      )}
+    >
+      <Header
+        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)]'
+        )}
+      >
+        {/* 행사 기간 */}
+        <div className={cn('flex justify-center w-[18.4rem] mt-[1.3rem]')}>
+          <DateTag startDate={startDate} endDate={endDate} />
+        </div>
+
+        {/* 대표 이미지 */}
+        <section
+          className={cn(
+            'relative w-full flex justify-center max-w-[35.4rem]',
+            'mt-[1rem]'
+          )}
+        >
+          {imageSrc ? (
+            <Image
+              src={imageSrc}
+              alt={`${name} 이미지`}
+              width={354}
+              height={430}
+              className={cn('w-full h-auto object-cover rounded-[2rem]')}
+            />
+          ) : (
+            <div
+              className={cn('w-full h-[43.6rem] bg-gray-200 rounded-[2rem]')}
+            />
+          )}
+        </section>
+
+        {/* 행사 카드 */}
+        <div
+          className={cn(
+            'flex flex-col items-center w-full gap-[0.8rem]',
+            'mt-[0.8rem]'
+          )}
+        >
+          <EventCard
+            name={name}
+            address={address}
+            description={description}
+            variant='gray'
+            size='large'
+          />
+
+          {/* 관련 행사 */}
+          <div
+            className={cn(
+              '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>
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+};
+
+export default EventDetailPage;

src/pages/events/components/DateTag.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/shared/lib';
+
+interface DateTagProps extends VariantProps<typeof dateTagStyle> {
+  startDate?: string;
+  endDate?: string;
+  className?: string;
+}
+
+const dateTagStyle = cva(
+  `
+  inline-flex justify-center items-center whitespace-nowrap
+  w-full h-[4.5rem]
+  px-[1.3rem] py-[1.2rem]
+  rounded-[2rem]
+  border border-pink-100
+  bg-pink-50
+  text-pink-300 text-label-lg
+  `,
+);
+
+export default function DateTag({
+  startDate,
+  endDate,
+  className,
+}: DateTagProps) {
+  const formatDate = (date?: string) => {
+    if (!date) return '';
+    return date.replace(/-/g, '.');
+  };
+
+  if (!startDate && !endDate) return null;
+
+  return (
+    <div className={cn(dateTagStyle(), className)}>
+       {formatDate(startDate)} ~ {formatDate(endDate)}
+    </div>
+  );
+}

src/pages/events/index.tsx

@@ -11,24 +11,17 @@ import {
   EventCard,
 } from '@/shared/components';
 import { eventData } from '@/shared/constants/events/eventsData';
+import { formatDateToISO, isDateWithinRange } from '@/shared/utils/date';
 
 export default function EventPage() {
   const router = useRouter();
   const [date, setDate] = useState<Date>();
 
-  const selectedDate = date
-    ? new Date(date.getTime() - date.getTimezoneOffset() * 60000)
-        .toISOString()
-        .split('T')[0]
-    : undefined;
+  const selectedDate = formatDateToISO(date);
 
-  const filteredEvents = eventData.filter((event) => {
-    if (!selectedDate) return false;
-    const start = new Date(event.startDate);
-    const end = new Date(event.endDate);
-    const selected = new Date(selectedDate);
-    return selected >= start && selected <= end;
-  });
+  const filteredEvents = eventData.filter((event) =>
+    isDateWithinRange(selectedDate, event.startDate, event.endDate),
+  );
 
   const handleCardClick = (id: number) => {
     router.push(`/events/${id}`);

src/shared/constants/events/eventsData.ts

@@ -3,8 +3,8 @@ export interface EventData {
   name: string;
   address: string;
   description: string;
-  startDate: string;
-  endDate: string;
+  startDate: string; 
+  endDate: string; 
   imageSrc?: string;
 }
 

src/shared/utils/date.ts

@@ -0,0 +1,21 @@
+export const formatDateToISO = (date?: Date): string | undefined => {
+  if (!date) return undefined;
+  return new Date(date.getTime() - date.getTimezoneOffset() * 60000)
+    .toISOString()
+    .split('T')[0];
+};
+
+
+export const isDateWithinRange = (
+  selectedDate: string | undefined,
+  startDate: string,
+  endDate: string,
+): boolean => {
+  if (!selectedDate) return false;
+
+  const start = new Date(startDate);
+  const end = new Date(endDate);
+  const selected = new Date(selectedDate);
+
+  return selected >= start && selected <= end;
+};