feat : Activity 컴포넌트

src/views/MainPage/MainPage.tsx

@@ -1,6 +1,6 @@
-import DummyDiv from '@src/components/common/DummyDiv';
 import PageLayout from '@src/components/common/PageLayout';
 import IntroSection from '@src/views/MainPage/components/IntroSection';
+import Activity from './components/Activity';
 import Banner from './components/Banner';
 import Introduce from './components/Introduce';
 import ScrollInteractiveLogo from './components/ScrollInteractiveLogo';
@@ -12,7 +12,7 @@ function MainPage() {
       <Introduce />
       <IntroSection />
       <ScrollInteractiveLogo />
-      <DummyDiv height="400vh" backgroundColor="white" />
+      <Activity />
     </PageLayout>
   );
 }

src/views/MainPage/components/Activity/Card/index.tsx

@@ -0,0 +1,38 @@
+import { TextColorType } from '@src/lib/types/main';
+import * as S from './style';
+
+interface CardProps {
+  img: string;
+  navKor: string;
+  navEng: string;
+  description: TextColorType[];
+}
+
+export default function Card({ img, navKor, navEng, description }: CardProps) {
+  const blurMotion = {
+    rest: {
+      display: 'none',
+    },
+    hover: {
+      display: 'flex',
+    },
+  };
+
+  return (
+    <S.Background initial="rest" whileHover="hover" animate="rest">
+      <S.CardImage src={img} alt="카드 이미지" fill />
+      <S.Gradient />
+      <S.CardKorNav>{navKor}</S.CardKorNav>
+      <S.Blur variants={blurMotion}>
+        <S.CardEngNav>{navEng}</S.CardEngNav>
+        <div>
+          {description.map((textNode, index) => (
+            <S.Content key={index} color={textNode.color}>
+              {textNode.content}
+            </S.Content>
+          ))}
+        </div>
+      </S.Blur>
+    </S.Background>
+  );
+}

src/views/MainPage/components/Activity/Card/style.ts

@@ -0,0 +1,126 @@
+import styled from '@emotion/styled';
+import { colors } from '@sopt-makers/colors';
+import { motion } from 'framer-motion';
+import Image from 'next/image';
+
+export const Background = styled(motion.main)`
+  max-width: 465px;
+  width: 100%;
+  height: 295px;
+  border-radius: 19px;
+
+  cursor: pointer;
+  position: relative;
+  z-index: 2;
+`;
+
+export const Gradient = styled.div`
+  width: 100%;
+  height: 100%;
+  border-radius: 19px;
+  background: linear-gradient(0deg, rgba(70, 108, 166, 0) 51.31%, #2e4e80 100%);
+  position: relative;
+  z-index: 1;
+`;
+
+export const CardImage = styled(Image)`
+  object-fit: cover;
+  border-radius: 19px;
+`;
+
+export const CardKorNav = styled.nav`
+  display: inline-flex;
+  padding: 11.75px 30.43px;
+  justify-content: center;
+  align-items: center;
+  gap: 5.83px;
+  border-radius: 13.763px;
+  border: 1.278px solid rgba(255, 255, 255, 0.5);
+  background: rgba(255, 255, 255, 0.33);
+  backdrop-filter: blur(2.949289321899414px);
+
+  color: ${colors.white};
+  font-family: SUIT;
+  font-size: 21px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 28.288px; /* 134.707% */
+  letter-spacing: -0.84px;
+
+  position: absolute;
+  top: 0;
+  left: 0;
+  margin-left: 26px;
+  margin-top: 26px;
+  z-index: 3;
+
+  /* 태블릿 뷰 */
+  @media (max-width: 768px) and (min-width: 376px) {
+  }
+
+  /* 모바일 뷰 */
+  @media (max-width: 375px) {
+    font-size: 12px;
+    line-height: 16.258px; /* 135.48% */
+    letter-spacing: -0.48px;
+
+    padding: 6.753px 17.488px;
+    margin-left: 14px;
+    margin-top: 14px;
+  }
+`;
+
+export const Blur = styled(motion.div)`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+
+  border-radius: 19px;
+  background: rgba(38, 51, 70, 0.74);
+  backdrop-filter: blur(6.881675720214844px);
+  z-index: 2;
+
+  padding: 26px;
+
+  /* 태블릿 뷰 */
+  @media (max-width: 768px) and (min-width: 376px) {
+  }
+
+  /* 모바일 뷰 */
+  @media (max-width: 375px) {
+    padding: 14px;
+  }
+`;
+
+export const CardEngNav = styled.p`
+  color: rgba(255, 255, 255, 0.7);
+  text-align: right;
+  font-family: SUIT;
+  font-size: 19px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 28.288px; /* 148.887% */
+  letter-spacing: -0.38px;
+`;
+
+export const ContentWrapper = styled.main`
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  word-break: keep-all;
+`;
+
+export const Content = styled.span<{ color: string }>`
+  color: ${({ color }) => (color === 'yellow' ? '#ffe454' : '#fff')};
+  font-family: SUIT;
+  font-size: 17.696px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 30.476px;
+  letter-spacing: -0.708px;
+`;

src/views/MainPage/components/Activity/index.tsx

@@ -0,0 +1,31 @@
+import { Activity } from '@src/lib/constants/main';
+import Tab from '../Tab';
+import Card from './Card';
+import * as S from './style';
+
+export default function CardHover() {
+  return (
+    <S.Background>
+      <Tab
+        tab={'(1) 기수내 정기 행사'}
+        title={'매 기수 진행되는, 다양한 활동들!'}
+        description={
+          'SOPT에서는 매 기수 내 정기적으로 진행되는 다양한 활동들이 있어요. \n 각 파트원들과 친목 및 실력을 쌓을 수 있는 행사들을 통해, SOPT를 보다 즐겨봅시다.'
+        }
+      ></Tab>
+      <S.CardWapper>
+        {Activity.map(({ img, navKor, navEng, description }) => {
+          return (
+            <Card
+              key={navKor}
+              img={img}
+              navKor={navKor}
+              navEng={navEng}
+              description={description}
+            />
+          );
+        })}
+      </S.CardWapper>
+    </S.Background>
+  );
+}

src/views/MainPage/components/Activity/style.ts

@@ -0,0 +1,22 @@
+import styled from '@emotion/styled';
+import { colors } from '@sopt-makers/colors';
+
+export const Background = styled.section`
+  background-color: ${colors.white};
+`;
+
+export const CardWapper = styled.main`
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  justify-items: center;
+  gap: 28px;
+
+  /* 태블릿 뷰 */
+  @media (max-width: 768px) and (min-width: 376px) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  /* 모바일 뷰 */
+  @media (max-width: 375px) {
+    grid-template-columns: 1fr;
+  }
+`;