feat: implement flippable card in main own organization section

src/components/common/FlippableCard/index.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import useBooleanState from '@src/hooks/useBooleanState';
+import * as S from './style';
+
+type FlippableCardProps = {
+  frontContent: React.ReactNode;
+  backContent: React.ReactNode;
+};
+
+function FlippableCard({ frontContent, backContent }: FlippableCardProps) {
+  const [isFlipped, setIsFlipped, setIsUnflipped] = useBooleanState(false);
+
+  const variants = {
+    front: { rotateY: 0 },
+    back: { rotateY: 180 },
+  };
+
+  return (
+    <div onMouseEnter={setIsFlipped} onMouseLeave={setIsUnflipped}>
+      <S.CardWrapper
+        animate={isFlipped ? 'back' : 'front'}
+        variants={variants}
+        transition={{ duration: 0.2 }}
+      >
+        <S.FrontSideCardWrapper>{frontContent}</S.FrontSideCardWrapper>
+        <S.BackSideCardWrapper>{backContent}</S.BackSideCardWrapper>
+      </S.CardWrapper>
+    </div>
+  );
+}
+
+export default FlippableCard;

src/components/common/FlippableCard/style.ts

@@ -0,0 +1,20 @@
+import styled from '@emotion/styled';
+import { motion } from 'framer-motion';
+
+export const CardWrapper = styled(motion.div)`
+  transition: 0.2s;
+  display: inline-grid;
+  transform: perspective(800px) rotateY(0deg);
+  transform-style: preserve-3d;
+`;
+
+export const SideCardWrapper = styled.div`
+  grid-area: 1 / 1 / 1 / 1;
+  backface-visibility: hidden;
+`;
+
+export const FrontSideCardWrapper = styled(SideCardWrapper)``;
+
+export const BackSideCardWrapper = styled(SideCardWrapper)`
+  transform: rotateY(180deg);
+`;

src/lib/constants/main.ts

@@ -1,6 +1,7 @@
 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 { TextWeightType } from '../types/universal';
 
 export const INTRO_CONTENT_LIST = [
   {
@@ -28,3 +29,54 @@ export const INTRO_CONTENT_LIST = [
 
 export const FIRST_INTRO_CONTENT = 1;
 export const LAST_INTRO_CONTENT = 3;
+
+export const OWN_ORGANIZATION_LIST: {
+  nameKor: string;
+  nameEng: string;
+  description: TextWeightType[];
+  frontSideBg: string;
+  backSideBg: string;
+}[] = [
+  {
+    nameKor: '메이커스',
+    nameEng: 'Makers',
+    description: [
+      { content: 'SOPT를 한 기수 이상 수료한 사람들이 모여 ', weight: 'normal' },
+      { content: 'SOPT에 필요한 프로덕트를 만드는 정식 기구', weight: 'bold' },
+      {
+        content:
+          '입니다. 3천여 명의 구성원들을 연결하고 새로운 가치를 제공하기 위한 방법을 끊임없이 고민해요. ',
+        weight: 'normal',
+      },
+      { content: '앞으로도 SOPT를 지속적으로 운영하고자, ', weight: 'bold' },
+      {
+        content:
+          '어떻게 하면 우리의 활동이 더 즐거울 수 있을지, 대내외적으로 잘 알릴 수 있을지 고민할 거예요. ',
+        weight: 'normal',
+      },
+    ],
+    frontSideBg: ImgIntroCard3.src,
+    backSideBg: '#FF7C53',
+  },
+  {
+    nameKor: '마인드',
+    nameEng: 'Mind',
+    description: [
+      { content: 'SOPT MIND는 SOPT 내외에 ', weight: 'normal' },
+      { content: '기업가정신과 창업도전 문화 확산 목적', weight: 'bold' },
+      {
+        content:
+          '으로 설립된 기구입니다. 매 기수 SOPT 앱잼 팀이 더 적극적이고 똑똑하게 창업에 도전할 수 있도록 필요한 컨텐츠와 시스템을 고민하고 있어요. ',
+        weight: 'normal',
+      },
+      {
+        content:
+          'SOPT가 창업동아리임을 잊지 않도록, 그리고 전국에 열정으로 도전하는 SOPT의 MIND가 널리 공유되도록 ',
+        weight: 'bold',
+      },
+      { content: 'MIND도 도전하겠습니다.', weight: 'normal' },
+    ],
+    frontSideBg: ImgIntroCard2.src,
+    backSideBg: '#F66FF8',
+  },
+];

src/lib/types/universal.ts

@@ -53,3 +53,8 @@ export enum PageType {
   BLOG = 'BLOG',
   PROJECT = 'PROJECT',
 }
+
+export type TextWeightType = {
+  content: string;
+  weight: 'normal' | 'bold';
+};

src/views/MainPage/MainPage.tsx

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

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

@@ -0,0 +1,44 @@
+import FlippableCard from '@src/components/common/FlippableCard';
+import { TextWeightType } from '@src/lib/types/universal';
+import * as S from './style';
+
+type OwnOrganizationCardProps = {
+  nameKor: string;
+  nameEng: string;
+  description: TextWeightType[];
+  frontSideBg: string;
+  backSideBg: string;
+};
+
+function Footer(props: Pick<OwnOrganizationCardProps, 'nameKor' | 'nameEng'>) {
+  return (
+    <S.FooterWrapper>
+      <S.FooterKorName>{props.nameKor}</S.FooterKorName>
+      <S.FooterEngName>{props.nameEng}</S.FooterEngName>
+    </S.FooterWrapper>
+  );
+}
+
+export default function OwnOrganizationCard(props: OwnOrganizationCardProps) {
+  return (
+    <FlippableCard
+      frontContent={
+        <S.CardWrapper background={`url(${props.frontSideBg}) center`}>
+          <Footer nameKor={props.nameKor} nameEng={props.nameEng} />
+        </S.CardWrapper>
+      }
+      backContent={
+        <S.CardWrapper background={props.backSideBg}>
+          <S.ContentWrapper>
+            {props.description.map((textNode, index) => (
+              <S.TextWrapper key={index} weight={textNode.weight}>
+                {textNode.content}
+              </S.TextWrapper>
+            ))}
+          </S.ContentWrapper>
+          <Footer nameKor={props.nameKor} nameEng={props.nameEng} />
+        </S.CardWrapper>
+      }
+    />
+  );
+}

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

@@ -0,0 +1,63 @@
+import styled from '@emotion/styled';
+import { colors } from '@sopt-makers/colors';
+
+export const CardWrapper = styled.div<{ background: string }>`
+  background: ${({ background }) => background};
+  border-radius: 19px;
+  padding: 39px 0;
+  width: 712px;
+  height: 380px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+`;
+
+export const FooterKorName = styled.div`
+  width: 144px;
+  text-align: center;
+  padding: 16px 0;
+  color: ${colors.white};
+  border: 1px solid rgba(255, 255, 255, 0.5);
+  background: rgba(117, 97, 79, 0.33);
+  backdrop-filter: blur(2.949289321899414px);
+  border-radius: 14px;
+  color: #fff;
+
+  font-size: 22px;
+  font-weight: 600;
+  line-height: 28px;
+  letter-spacing: -0.904px;
+`;
+
+export const FooterEngName = styled.div`
+  color: rgba(255, 255, 255, 0.7);
+  font-family: SUIT;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 28.288px; /* 138.027% */
+  letter-spacing: -1.025px;
+  padding-bottom: 4px;
+`;
+
+export const FooterWrapper = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  padding-left: 30px;
+  padding-right: 42px;
+`;
+
+export const ContentWrapper = styled.div`
+  padding: 0 41px;
+  flex: 1;
+  word-break: keep-all;
+`;
+
+export const TextWrapper = styled.span<{ weight: 'normal' | 'bold' }>`
+  font-size: 20px;
+  color: ${colors.white};
+  font-weight: ${({ weight }) => weight};
+  line-height: 35px; /* 175% */
+  letter-spacing: -0.8px;
+`;

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

@@ -0,0 +1,13 @@
+import { OWN_ORGANIZATION_LIST } from '@src/lib/constants/main';
+import OwnOrganizationCard from './Card';
+import * as S from './style';
+
+export default function OwnOrganization() {
+  return (
+    <S.Wrapper>
+      {OWN_ORGANIZATION_LIST.map((organization) => (
+        <OwnOrganizationCard key={organization.nameEng} {...organization} />
+      ))}
+    </S.Wrapper>
+  );
+}

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

@@ -0,0 +1,6 @@
+import styled from '@emotion/styled';
+
+export const Wrapper = styled.div`
+  display: flex;
+  justify-content: space-between;
+`;