fix: 블로그 페이지 수정

1. 모바일 내 블로그 타이틀 크기 정상 반영 2. 블로그 카드 내 패딩 조정
depromeet · Nov 25, 2024 · 130a191 · 130a191
1 parent 09ed231
commit 130a191
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 25 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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)};