design: 이벤트 카드 공통 컴포넌트 구현 (#13)

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,
+};

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;