From 1d47ab321d28d5626198f7f62c8b2c1f1efbd1aa Mon Sep 17 00:00:00 2001
From: chaeyeon LEE <98521882+colorkite10@users.noreply.github.com>
Date: Tue, 24 Oct 2023 16:20:49 +0900
Subject: [PATCH] =?UTF-8?q?design:=20=EC=9D=B4=EB=B2=A4=ED=8A=B8=20?=
 =?UTF-8?q?=EC=B9=B4=EB=93=9C=20=EA=B3=B5=ED=86=B5=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84=20(#13)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/EventCard/EventCard.style.ts       | 69 +++++++++++++++++++
 .../common/EventCard/EventCard.tsx            | 52 ++++++++++++++
 2 files changed, 121 insertions(+)
 create mode 100644 src/componenets/common/EventCard/EventCard.style.ts
 create mode 100644 src/componenets/common/EventCard/EventCard.tsx

diff --git a/src/componenets/common/EventCard/EventCard.style.ts b/src/componenets/common/EventCard/EventCard.style.ts
new file mode 100644
index 00000000..54291057
--- /dev/null
+++ b/src/componenets/common/EventCard/EventCard.style.ts
@@ -0,0 +1,69 @@
+import styled from '@emotion/styled';
+
+const ContainerStyled = styled.div`
+  display: flex;
+  width: 25rem;
+  height: 17rem;
+  font-family: 'MainThin';
+  cursor: pointer;
+  transition: transform 0.3s ease;
+
+  &:hover {
+    transform: scale(1.02);
+  }
+`;
+
+const PosterAreaStyled = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 12rem;
+  height: 17rem;
+`;
+
+const EventInfoWrapper = styled.div`
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+  margin: 3%;
+`;
+
+const TitleStyled = styled.div`
+  padding-bottom: 3%;
+  font-family: 'MainBold';
+  font-size: 1.5rem;
+`;
+
+const EventDateStyled = styled.div`
+  font-size: 1rem;
+`;
+
+const EventFooterWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: end;
+  height: 20%;
+  margin-right: 3%;
+`;
+
+const PlaceStyled = styled.div`
+  color: grey;
+  font-size: 1rem;
+`;
+
+const ClubNameStyled = styled.div`
+  font-family: 'MainRegular';
+  font-size: 0.8rem;
+`;
+
+export {
+  ContainerStyled,
+  PosterAreaStyled,
+  EventInfoWrapper,
+  TitleStyled,
+  EventDateStyled,
+  EventFooterWrapper,
+  PlaceStyled,
+  ClubNameStyled,
+};
diff --git a/src/componenets/common/EventCard/EventCard.tsx b/src/componenets/common/EventCard/EventCard.tsx
new file mode 100644
index 00000000..80ab50ff
--- /dev/null
+++ b/src/componenets/common/EventCard/EventCard.tsx
@@ -0,0 +1,52 @@
+import { useNavigate } from 'react-router-dom';
+
+import {
+  ClubNameStyled,
+  ContainerStyled,
+  EventDateStyled,
+  EventFooterWrapper,
+  EventInfoWrapper,
+  PlaceStyled,
+  PosterAreaStyled,
+  TitleStyled,
+} from './EventCard.style';
+
+interface EventProps {
+  eventId: number;
+  eventPoster: string;
+  eventTitle: string;
+  eventDate: string;
+  eventPlace: string;
+  clubName: string;
+}
+
+const EventCard = ({
+  eventId,
+  eventPoster,
+  eventTitle,
+  eventDate,
+  eventPlace,
+  clubName,
+}: EventProps) => {
+  const navigate = useNavigate();
+
+  return (
+    <ContainerStyled onClick={() => navigate(`/event/detail/${eventId}`)}>
+      <PosterAreaStyled>
+        <img src={eventPoster} alt="poster image" />
+      </PosterAreaStyled>
+      <EventInfoWrapper>
+        <div>
+          <TitleStyled>{eventTitle}</TitleStyled>
+          <EventDateStyled>{eventDate}</EventDateStyled>
+        </div>
+        <EventFooterWrapper>
+          <PlaceStyled>{eventPlace}</PlaceStyled>
+          <ClubNameStyled>{clubName}</ClubNameStyled>
+        </EventFooterWrapper>
+      </EventInfoWrapper>
+    </ContainerStyled>
+  );
+};
+
+export default EventCard;