feat : Tab 공통 컴포넌트

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

@@ -0,0 +1,18 @@
+import * as S from './style';
+
+interface TabProps {
+  tab: string;
+  title: string;
+  description: string;
+}
+export default function Tab({ tab, title, description }: TabProps) {
+  return (
+    <S.Wrapper>
+      <S.Tab>{tab}</S.Tab>
+      <S.Title>{title}</S.Title>
+      {description.split('\n').map((string) => {
+        return <S.Description key={string}>{string}</S.Description>;
+      })}
+    </S.Wrapper>
+  );
+}

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

@@ -0,0 +1,71 @@
+import styled from '@emotion/styled';
+import { colors } from '@sopt-makers/colors';
+
+export const Wrapper = styled.section`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+`;
+
+export const Tab = styled.h2`
+  color: #5b88f8;
+  font-family: SUIT;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 46.311px; /* 257.282% */
+  letter-spacing: -0.36px;
+
+  margin-bottom: 8px;
+  /* 모바일 뷰 */
+  @media (max-width: 375px) {
+    font-size: 11px;
+  }
+`;
+
+export const Title = styled.h1`
+  color: #30324d;
+  font-family: SUIT;
+  font-size: 45px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 50.64px; /* 112.534% */
+  letter-spacing: -1.35px;
+
+  margin-bottom: 16px;
+
+  /* 태블릿 뷰 */
+  @media (max-width: 768px) and (min-width: 376px) {
+    font-size: 36px;
+    letter-spacing: -1.08px;
+  }
+  /* 모바일 뷰 */
+  @media (max-width: 375px) {
+    font-size: 21px;
+    line-height: 29.103px; /* 138.588% */
+    letter-spacing: -0.63px;
+  }
+`;
+
+export const Description = styled.p`
+  color: #727272;
+  font-family: SUIT;
+  font-size: 17px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 28px; /* 164.706% */
+  letter-spacing: -0.68px;
+
+  /* 태블릿 뷰 */
+  @media (max-width: 768px) and (min-width: 376px) {
+    font-size: 16px;
+    line-height: 26px; /* 162.5% */
+    letter-spacing: -0.64px;
+  }
+  /* 모바일 뷰 */
+  @media (max-width: 375px) {
+    font-size: 10px;
+    line-height: 14.942px; /* 149.424% */
+    letter-spacing: -0.4px;
+  }
+`;