fix: 일부 스타일 수정

depromeet · Aug 18, 2024 · 3150888 · 3150888
1 parent 118c7ad
commit 3150888
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 7 deletions.
diff --git a/apps/tech-blog/pages/_temp.mdx b/apps/tech-blog/pages/_temp.mdx
@@ -2,9 +2,8 @@ import { Badge } from '@sambad/sds/components';
 import { colors } from '@sambad/sds/theme';
 import { RenderArticleBase } from '@/../utils/RenderArticleBase';
 
-# 디프만 1등 하기
-
 {RenderArticleBase({
+title: '디프만 1등 하기',
 tags: ['Web', '테스트', '뱃지'],
 writer: '김테스터',
 role: 'Frontend Developer',

diff --git a/apps/tech-blog/pages/index.mdx b/apps/tech-blog/pages/index.mdx
@@ -1,7 +1,10 @@
 import { SummaryCard } from '@/../components';
 import { articles } from '@/../constants';
 
-# Welcome to Nextra Hello, world!
+<img
+  src="https://resources-fe.toss.im/image-optimize/width=2048,quality=75/https%3A%2F%2Fstatic.toss.im%2Fassets%2Fpayments%2Fcontents%2Ftoss-tech-banner2_.png"
+  style={{ borderRadius: '8px' }}
+/>
 
 <div>
   {articles.map((ariticle) => (

diff --git a/apps/tech-blog/pages/web/test.mdx b/apps/tech-blog/pages/web/test.mdx
@@ -2,9 +2,8 @@ import { Badge } from '@sambad/sds/components';
 import { colors } from '@sambad/sds/theme';
 import { RenderArticleBase } from '@/../utils/RenderArticleBase';
 
-# 디프만 1등 하기
-
 {RenderArticleBase({
+title: '디프만 1등 하기',
 tags: ['Web', '테스트', '뱃지'],
 writer: '김테스터',
 role: 'Frontend Developer',

diff --git a/apps/tech-blog/styles.css b/apps/tech-blog/styles.css
@@ -5,3 +5,17 @@ h1 {
 img {
   margin: 0 !important;
 }
+
+/* NOTE: 블로그 최대너비 오버라이드 하여 커스텀 */
+.nx-prose {
+  max-width: 90ch !important;
+}
+
+/* NOTE: article 영역 padding-top 오버라이드 하여 커스텀 */
+article {
+  padding-top: 2rem !important;
+}
+
+article > h1:first-child {
+  display: none;
+}
diff --git a/apps/tech-blog/utils/RenderArticleBase.tsx b/apps/tech-blog/utils/RenderArticleBase.tsx
@@ -7,6 +7,7 @@ import { Fragment } from 'react';
 import { generateDate } from './generateDate';
 
 export interface RenderArticleBase {
+  title: string;
   tags: string[];
   writer: string;
   role: 'Frontend Developer' | 'Server Developer' | 'Designer';
@@ -15,13 +16,16 @@ export interface RenderArticleBase {
 }
 
 export const RenderArticleBase = (props: RenderArticleBase) => {
-  const { tags, writer, role, date, thumbnail } = props;
+  const { title, tags, writer, role, date, thumbnail } = props;
 
   return (
     <Fragment>
       <div css={imageCss}>
         <Image src={thumbnail} alt="thumbnail" layout="responsive" width={700} height={358} />
       </div>
+      <Txt as="h1" typography="heading1" style={{ fontSize: '48px' }}>
+        {title}
+      </Txt>
       <div css={badgeContainers}>
         {tags.map((tag) => (
           <Badge key={tag} color={colors.grey300}>
@@ -43,7 +47,7 @@ export const RenderArticleBase = (props: RenderArticleBase) => {
 
 const badgeContainers = css({
   display: 'flex',
-  marginBottom: size['2xs'],
+  margin: `${size['2xs']} 0`,
 
   '& > * + *': {
     marginLeft: size['7xs'],