From 130a191435b6b18f32d0da98df32babd719347a8 Mon Sep 17 00:00:00 2001
From: klmhyeonwoo <gentlemonster77@likelion.org>
Date: Mon, 25 Nov 2024 22:24:54 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EB=B8=94=EB=A1=9C=EA=B7=B8=20=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=88=98=EC=A0=95=201.=20=EB=AA=A8?=
 =?UTF-8?q?=EB=B0=94=EC=9D=BC=20=EB=82=B4=20=EB=B8=94=EB=A1=9C=EA=B7=B8=20?=
 =?UTF-8?q?=ED=83=80=EC=9D=B4=ED=8B=80=20=ED=81=AC=EA=B8=B0=20=EC=A0=95?=
 =?UTF-8?q?=EC=83=81=20=EB=B0=98=EC=98=81=202.=20=EB=B8=94=EB=A1=9C?=
 =?UTF-8?q?=EA=B7=B8=20=EC=B9=B4=EB=93=9C=20=EB=82=B4=20=ED=8C=A8=EB=94=A9?=
 =?UTF-8?q?=20=EC=A1=B0=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Blog/BlogPostThumbnail.tsx  | 24 ++++++----------------
 src/features/Blog/BlogContentSection.tsx   | 15 +++++++++-----
 src/features/Blog/BlogSubscribeSection.tsx |  2 +-
 src/styles/typo.ts                         |  2 +-
 4 files changed, 18 insertions(+), 25 deletions(-)

diff --git a/src/components/Blog/BlogPostThumbnail.tsx b/src/components/Blog/BlogPostThumbnail.tsx
index d9b9fde5..55df4b43 100644
--- a/src/components/Blog/BlogPostThumbnail.tsx
+++ b/src/components/Blog/BlogPostThumbnail.tsx
@@ -7,6 +7,7 @@ import { BlogLink } from '~/constant/blog';
 import { defaultFadeInVariants } from '~/constant/motion';
 import { colors } from '~/styles/colors';
 import { mediaQuery } from '~/styles/media';
+import { theme } from '~/styles/theme';
 
 type ThumbnailProps = {
   title: string;
@@ -55,7 +56,7 @@ const articleCss = css`
   width: 100%;
   height: 208px;
   min-width: 160px;
-  padding: 18px;
+  padding: 24px;
   overflow: hidden;
   display: flex;
   border-radius: 12px;
@@ -64,16 +65,11 @@ const articleCss = css`
   background-color: black;
 
   ${mediaQuery('tablet')} {
-    padding: 16px;
   }
   ${mediaQuery('mobile')} {
-    padding: 14px;
     height: 180px;
     max-width: 460px;
   }
-  @media (max-width: 400px) {
-    padding: 10px;
-  }
   &:hover {
     cursor: pointer;
   }
@@ -125,25 +121,17 @@ const linkCss = (theme: Theme) => css`
 `;
 
 const titleCss = css`
+  ${theme.typosV2.pretendard.semibold20};
   position: relative;
-  font-weight: 500;
-  font-size: 1.25rem;
-  line-height: 30px;
-  color: ${colors.white};
+  color: ${theme.colors.white};
   z-index: 10;
   white-space: pre-line;
-
-  ${mediaQuery('mobile')} {
-    font-size: 1rem;
-  }
 `;
 
 const dateCss = css`
+  ${theme.typosV2.pretendard.regular16}
   position: relative;
-  font-weight: 500;
-  font-size: 1rem;
-  line-height: 22px;
-  color: ${colors.gray};
+  color: ${theme.colors.grey['100']};
   z-index: 10;
 
   ${mediaQuery('mobile')} {
diff --git a/src/features/Blog/BlogContentSection.tsx b/src/features/Blog/BlogContentSection.tsx
index a4dd1b37..2e7418e7 100644
--- a/src/features/Blog/BlogContentSection.tsx
+++ b/src/features/Blog/BlogContentSection.tsx
@@ -40,24 +40,29 @@ const sectionCss = css`
   flex-direction: column;
   align-items: center;
   background-color: white;
-  padding: 120px 0;
+  padding: 100px 0;
+  gap: 80px;
 
   ${mediaQuery('tablet')} {
-    padding: 80px 32px;
+    padding: 100px 48px;
   }
   ${mediaQuery('mobile')} {
-    padding: 80px 16px;
+    padding: 100px 20px;
+    gap: 50px;
   }
 `;
 
 const titleCss = (theme: Theme) => css`
-  ${theme.typosV2.pretendard.semibold20}
+  ${theme.typosV2.pretendard.bold32};
+
+  ${mediaQuery('mobile')} {
+    ${theme.typosV2.pretendard.bold28}
+  }
 `;
 
 const blogContainerCss = css`
   width: 100%;
   max-width: 960px;
-  margin-top: 36px;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-template-rows: repeat(3, 1fr);
diff --git a/src/features/Blog/BlogSubscribeSection.tsx b/src/features/Blog/BlogSubscribeSection.tsx
index 7a167cb7..ea07327e 100644
--- a/src/features/Blog/BlogSubscribeSection.tsx
+++ b/src/features/Blog/BlogSubscribeSection.tsx
@@ -34,7 +34,7 @@ const containerCss = (theme: Theme) => css`
   background-color: ${theme.colors.white};
 
   ${mediaQuery('mobile')} {
-    padding: 80px 16px;
+    padding: 80px 20px;
   }
 `;
 
diff --git a/src/styles/typo.ts b/src/styles/typo.ts
index 063e1223..0b089a51 100644
--- a/src/styles/typo.ts
+++ b/src/styles/typo.ts
@@ -307,7 +307,7 @@ export const typosV2 = {
       font-style: normal;
       font-weight: 400;
       line-height: ${pxToRem(24)};
-      letter-spacing: -0.05em;
+      letter-spacing: ${pxToRem(-0.64)};
     `,
     regular14: css`
       font-size: ${pxToRem(14)};