[SP2] 메인 하단 액티비티 섹션 (#307)

* chore : 메인 액티비티 이미지

* feat : 메인 액티비티 constant

* feat : Tab 공통 컴포넌트

* feat : Activity 컴포넌트

* feat : Tab 마진 수정

* style : 반응형 스타일

* chore : 코드리뷰 반영

* style: pointer cursor 삭제

* style : Blur 반응형 padding 수정

src/lib/constants/main.ts

@@ -1,6 +1,118 @@
+import { default as ImgAppjam } from '@src/assets/images/img_appjam.jpg';
+import { default as ImgEvent } from '@src/assets/images/img_event.jpg';
 import { default as ImgIntroCard1 } from '@src/assets/images/img_intro_card1.png';
 import { default as ImgIntroCard2 } from '@src/assets/images/img_intro_card2.png';
 import { default as ImgIntroCard3 } from '@src/assets/images/img_intro_card3.png';
+import { default as ImgSeminar } from '@src/assets/images/img_seminar.jpg';
+import { default as ImgSoptkaton } from '@src/assets/images/img_soptkaton.jpg';
+import { default as ImgSoptterm } from '@src/assets/images/img_soptterm.jpg';
+import { default as ImgStudy } from '@src/assets/images/img_study.jpg';
+import { ActivityType } from '../types/main';
+
+export const FIRST_INTRO_CONTENT = 1;
+export const LAST_INTRO_CONTENT = 3;
+
+export const Activity: ActivityType[] = [
+  {
+    img: ImgAppjam.src,
+    navKor: '앱잼',
+    navEng: 'App jam',
+    description: [
+      { content: '3~5주간 ', color: 'yellow' },
+      {
+        content:
+          '기획, 디자인, 개발 파트가 팀을 이뤄 하나의 웹 또는 앱 서비스를 제작하는 SOPT 내 장기 프로젝트예요. IT 창업을 위한 협업 과정을 경험하고, 최종 ',
+        color: 'white',
+      },
+      { content: '데모데이 ', color: 'yellow' },
+      { content: '에서 ', color: 'white' },
+      { content: '각 파트 현직자들', color: 'yellow' },
+      { content: '과 결과물을 공유하고 피드백을 받아요.', color: 'white' },
+    ],
+  },
+  {
+    img: ImgSoptkaton.src,
+    navKor: '솝커톤',
+    navEng: 'Sopkaton',
+    description: [
+      { content: '무박 2일 ', color: 'yellow' },
+      {
+        content: '간 기획, 디자인, 개발 파트가 팀을 이뤄 최소 단위의 서비스를 제작하는 SOPT내 ',
+        color: 'white',
+      },
+      { content: '단기 프로젝트', color: 'yellow' },
+      {
+        content:
+          '예요. 앱잼에 앞서 팀 단위의 협업 과정을 빠르게 경험하며, IT 프로젝트에 대한 협업 감각을 익힐 수 있어요.',
+        color: 'white',
+      },
+    ],
+  },
+  {
+    img: ImgSoptterm.src,
+    navKor: '솝텀',
+    navEng: 'Sopt-term',
+    description: [
+      { content: 'SOPT를 ', color: 'white' },
+      {
+        content: '한 기수 이상 수료한 회원',
+        color: 'yellow',
+      },
+      {
+        content:
+          '끼리 모여 자유로운 주제로 IT 프로젝트를 진행해요. SOPT에서 쌓은 실력을 기반으로 보다 ',
+        color: 'white',
+      },
+      { content: '자율적인 프로젝트', color: 'yellow' },
+      { content: '를 진행할 수 있어요.', color: 'white' },
+    ],
+  },
+  {
+    img: ImgSeminar.src,
+    navKor: '정기 세미나',
+    navEng: 'Seminar',
+    description: [
+      { content: '활동 기간 동안 ', color: 'white' },
+      { content: '총 8회의 파트별 세미나', color: 'yellow' },
+      {
+        content:
+          '를 통해 각자 자신의 파트에서 실력을 다져요. 각 파트장의 강연, 파트원간의 지식 공유, 외부 연사 초정 등 다양한 유형의 세미나가 진행돼요.',
+        color: 'white',
+      },
+    ],
+  },
+  {
+    img: ImgStudy.src,
+    navKor: '스터디',
+    navEng: 'Study',
+    description: [
+      { content: '각 파트의 실력을 심도있게 다질 수 있는 ', color: 'white' },
+      { content: '스터디와 다양한 파트원들과 친목을 쌓을 수 있는 네트워킹', color: 'yellow' },
+      {
+        content: '이 열려요. 자율적으로 참여하며 SOPT 활동을 더욱 유익하게 만들어 나갈 수 있어요.',
+        color: 'white',
+      },
+    ],
+  },
+  {
+    img: ImgEvent.src,
+    navKor: '행사',
+    navEng: 'Events',
+    description: [
+      { content: '운영팀', color: 'yellow' },
+      { content: '에서는 SOPT 회원들의 원활한 ', color: 'white' },
+      { content: '네트워킹', color: 'yellow' },
+      { content: '을 위한 다양한 행사를 기획해요. ', color: 'white' },
+      { content: '미디어팀', color: 'yellow' },
+      { content: '에서는 SOPT의 활동과 관련된 ', color: 'white' },
+      { content: '콘텐츠를 제작', color: 'yellow' },
+      {
+        content: '하여 SOPT를 대내외적으로 알려요.',
+        color: 'white',
+      },
+    ],
+  },
+];
 
 export const INTRO_CONTENT_LIST = [
   {
@@ -25,6 +137,3 @@ export const INTRO_CONTENT_LIST = [
     src: ImgIntroCard3.src,
   },
 ];
-
-export const FIRST_INTRO_CONTENT = 1;
-export const LAST_INTRO_CONTENT = 3;

src/lib/types/main.ts

@@ -4,3 +4,15 @@ export type IntroContentType = {
   detail: string;
   src: string;
 };
+
+export type TextColorType = {
+  content: string;
+  color: 'yellow' | 'white';
+};
+
+export interface ActivityType {
+  img: string;
+  navKor: string;
+  navEng: string;
+  description: TextColorType[];
+}

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 sizes="100%" />
+      <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,139 @@
+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;
+
+  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: 428px) and (min-width: 376px) {
+    font-size: 12px;
+    line-height: 16.258px; /* 135.48% */
+    letter-spacing: -0.48px;
+
+    padding: 6px 18px;
+    margin-left: 14px;
+    margin-top: 14px;
+    border-radius: 8px;
+  }
+
+  @media (max-width: 375px) {
+    font-size: 10px;
+    line-height: 14.188px; /* 135.48% */
+    letter-spacing: -0.419px;
+
+    padding: 5px 15px;
+    margin-left: 12px;
+    margin-top: 12px;
+    border-radius: 6px;
+  }
+`;
+
+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: 428px) and (min-width: 376px) {
+    padding: 14px;
+  }
+
+  @media (max-width: 375px) {
+    padding: 12px;
+  }
+`;
+
+export const CardEngNav = styled.p`
+  color: rgba(255, 255, 255, 0.7);
+  text-align: right;
+  font-family: SUIT;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 28.288px; /* 148.887% */
+  letter-spacing: -0.38px;
+
+  @media (max-width: 428px) {
+    font-size: 18px;
+  }
+`;
+
+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: 18px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 30.476px;
+  letter-spacing: -0.708px;
+
+  @media (max-width: 428px) {
+    font-size: 11px;
+  }
+`;

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를 보다 즐겨봅시다.'
+        }
+      />
+      <S.CardWrapper>
+        {Activity.map(({ img, navKor, navEng, description }) => {
+          return (
+            <Card
+              key={navKor}
+              img={img}
+              navKor={navKor}
+              navEng={navEng}
+              description={description}
+            />
+          );
+        })}
+      </S.CardWrapper>
+    </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 CardWrapper = 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;
+  }
+`;