Merge pull request #79 from geulDa/feat/#61/eventpage

✨Feat : 행사 페이지  작업

Author: KongMezu

src/pages/events/index.tsx

@@ -0,0 +1,101 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/router';
+import { Icon } from '@/shared/icons';
+import { cn } from '@/shared/lib';
+import {
+  ControlBar,
+  DatePicker,
+  BottomNav,
+  EventCard,
+} from '@/shared/components';
+import { eventData } from '@/shared/constants/events/eventsData';
+
+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 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 handleCardClick = (id: number) => {
+    router.push(`/events/${id}`);
+  };
+
+  return (
+    <div
+      className={cn(
+        'px-[2.4rem] bg-white flex flex-col gap-[1rem] h-full pt-[1.3rem] overflow-hidden',
+      )}
+    >
+      {/* 헤더 */}
+      <ControlBar
+        isLoggedIn={true}
+        userName='홍길동'
+        onLogin={() => {}}
+        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'>
+          <DatePicker value={date} onChange={setDate} />
+        </div>
+
+        {/* 행사카드 & 빈화면 */}
+        {filteredEvents.length > 0 ? (
+          <section
+            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>
+            ))}
+          </section>
+        ) : (
+          <div className='flex flex-col items-center justify-center text-center mt-[15rem]'>
+            <Icon name='Stamp' size={120} color='gray-200' />
+            <h2 className='text-headline-lg-serif text-gray-700 mt-[5rem]'>
+              Ooops!
+            </h2>
+            <p className='text-label-serif text-gray-500 mt-[2.4rem]'>
+              선택하신 날은
+              <br />
+              행사가 없어요!
+            </p>
+          </div>
+        )}
+      </main>
+
+      <BottomNav />
+    </div>
+  );
+}

src/shared/components/container/EventCard.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { Icon } from '@/shared/icons';
 import { Card } from '@/shared/components/container/Card';
 import { cn } from '@/shared/lib';
@@ -7,8 +8,10 @@ interface EventCardProps {
   name: string;
   address: string;
   description: string;
+  startDate?: string;
+  endDate?: string;
   variant?: 'gray' | 'mint';
-  size?: 'medium' | 'large';
+  size?: 'small' | 'medium' | 'large';
   imageSrc?: string;
 }
 
@@ -20,14 +23,47 @@ const EventCard = ({
   size = 'medium',
   imageSrc = '',
 }: EventCardProps) => {
+  const [liked, setLiked] = useState(false);
+
+  const handleLikeClick = () => {
+    setLiked((prev) => !prev);
+  };
   return (
     <Card
       variant={variant}
-      size={size}
-      customHeight={size === 'large' ? '13rem' : undefined}
+      size={size === 'small' ? undefined : size}
+      customHeight={
+        size === 'large' ? '13rem' : size === 'small' ? '8rem' : undefined
+      }
     >
-      {/* Medium 카드 */}
-      {size === 'medium' ? (
+      {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'>
@@ -59,7 +95,12 @@ const EventCard = ({
             <Icon
               name='HeartStraight'
               size={20}
-              color={variant === 'mint' ? 'mint-400' : 'gray-300'}
+              color={
+                liked ? 'red-400' : variant === 'mint' ? 'mint-400' : 'gray-300'
+              }
+              fillColor={liked ? 'red-300' : undefined}
+              onClick={handleLikeClick}
+              className='cursor-pointer'
             />
           </div>
           {/* 행사 주소 */}
@@ -105,7 +146,16 @@ const EventCard = ({
               <Icon
                 name='HeartStraight'
                 size={20}
-                color={variant === 'mint' ? 'mint-400' : 'gray-300'}
+                color={
+                  liked
+                    ? 'red-400'
+                    : variant === 'mint'
+                    ? 'mint-400'
+                    : 'gray-300'
+                }
+                fillColor={liked ? 'red-300' : undefined}
+                onClick={handleLikeClick}
+                className='cursor-pointer'
               />
             </div>
 
@@ -125,4 +175,4 @@ const EventCard = ({
   );
 };
 
-export default EventCard;
+export default EventCard;

src/shared/constants/events/eventsData.ts

@@ -0,0 +1,75 @@
+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: '',
+  },
+];