Merge pull request #3 from yiyb0603/develop

v0.0.2

.github/workflows/production.yaml

@@ -0,0 +1,44 @@
+name: Vercel Production Deploy
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    env:
+      VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+      VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
+      VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '16.14.2'
+
+      - name: Install Vercel CLI
+        run: npm install -g vercel@latest
+
+      - name: Update Vercel Environment Variables
+        run: vercel pull --yes --environment=production --token=${{ env.VERCEL_TOKEN }}
+
+      # 프로젝트 빌드
+      - name: Build Next.js project
+        run: |
+          vercel build --prod --token=${{ env.VERCEL_TOKEN }}
+
+      - name: Install AWS CLI
+        uses: unfor19/[email protected]
+
+      - name: Vercel Deploy
+        run: vercel deploy --prebuilt --prod --token=${{ env.VERCEL_TOKEN }}
+
+      - name: Deploy End
+        run: |
+          echo 'Deploy End'

contentlayer.config.ts

@@ -21,7 +21,7 @@ export const Post = defineDocumentType(() => ({
     },
     thumbnail: {
       type: 'string',
-      required: false,
+      required: true,
     },
     createdAt: {
       type: 'date',

next.config.js

@@ -4,6 +4,12 @@ const { withContentlayer } = require('next-contentlayer');
 const options = {
   reactStrictMode: true,
   swcMinify: false,
+  compiler: {
+    styledComponents: true,
+  },
+  experimental: {
+    scrollRestoration: true,
+  },
 };
 
 module.exports = withContentlayer(options);

posts/Next.js에서 동적 사이트맵 제작하기 (테스트용).mdx

@@ -3,6 +3,7 @@ title: Next.js에서 동적 사이트맵 제작하기 (테스트용)
 description: 안녕하세요! 이번에는 Next.js에서 동적 URL 형식의 사이트맵 만들기를 주제로 글을 작성해보겠습니다.
 createdAt: 2023-02-25
 category: Next.js
+thumbnail: https://velog.velcdn.com/images/yiyb0603/post/812c2dcb-4f2f-451c-a0f9-a36a8b99ae50/image.png
 ---
 
 안녕하세요! 정말 오랜만에 Velog 글을 적어보려고 합니다. 그동안 `아 이거는 나중에 Velog 글 주제로 적어 봐야겠다!` 라고 생각을 해놓고는 계속 미뤄왔었네요. 🥲🥲 그래서 앞으로 글을 적을때 회사 프로젝트를 진행하면서 알게되었던것들을 순서대로 적어보려고 합니다.
@@ -38,7 +39,7 @@ category: Next.js
 
 Velog 서비스로 예시를 들면, 검색엔진에 노출되기 위해서 수집을 원하는 글들의 링크들을 모아놓은 사이트맵을 만들어 놓는다면 크롤러 봇은 **이전에 연결된 링크들을 통한 페이지 수집** 과정에서 사이트 내 노출이 안되었던 누락된 글들을 사이트맵을 통해서 수집 가능하도록 할 수 있게 됩니다.
 
-> **이외의 사이트맵에 대한 정보를 알고싶다면 아래의 구글 사이트맵 가이드라인을 통해서 더 알아볼 수 있습니다.** > https://developers.google.com/search/docs/advanced/sitemaps/overview?hl=ko
+> **이외의 사이트맵에 대한 정보를 알고싶다면 아래의 구글 사이트맵 가이드라인을 통해서 더 알아볼 수 있습니다.** > [https://developers.google.com/search/docs/advanced/sitemaps/overview?hl=ko](https://developers.google.com/search/docs/advanced/sitemaps/overview?hl=ko)
 
 # 2. Next.js를 사용한 동적 사이트맵 구현
 
@@ -88,7 +89,7 @@ xml 내용을 통한 사이트맵 구현 전, 사이트맵의 xml 형식은 아
 </urlset>
 ```
 
-> **이외 사이트맵 xml 형식들은 아래의 링크를 참조해주세요.** > https://developers.google.com/search/docs/advanced/sitemaps/build-sitemap?hl=ko
+> **이외 사이트맵 xml 형식들은 아래의 링크를 참조해주세요.** > [https://developers.google.com/search/docs/advanced/sitemaps/build-sitemap?hl=ko](https://developers.google.com/search/docs/advanced/sitemaps/build-sitemap?hl=ko)
 
 위의 xml 태그중, `<url></url>` 태그 사이에 들어가야 하는 내용은 **검색엔진에 노출되어야 할 페이지의 정보**를 담고 있어야 합니다.
 
@@ -109,7 +110,8 @@ const insideXMLString = (xmlContent: string): string => {
 
 이제 동적인 사이트맵에 뿌려줄 데이터 API를 사용해보려고 하는데요, 간단한 예시 구현을 하기 위해서 **JSONPlaceholder API**를 사용하여 글 목록을 불러오는 API를 연동해봅시다.
 
-> JSONPlaceholder의 글 목록을 불러오는 API 주소: https://jsonplaceholder.typicode.com/posts
+> JSONPlaceholder의 글 목록을 불러오는 API 주소
+> [https://jsonplaceholder.typicode.com/posts](https://jsonplaceholder.typicode.com/posts)
 
 > 위의 API는 **페이징이 아닌, 모든 정보를 전달해주는 API라고 가정하고 사용하겠습니다.**
 
@@ -271,14 +273,14 @@ API로 불러왔던 글들의 정보들이 모두 사이트맵에 등록되었
 
 # 3. 사이트맵 참고사항 💡
 
-위에서 만들어진 사이트맵은 구글의 경우에는 **[Google Search Console](https://search.google.com/search-console)**에다가 제작한 사이트맵과 사이트의 정보를 등록하면 되고, 네이버의 경우에는 **[네이버 서치어드바이저](https://searchadvisor.naver.com/)**에다가 사이트맵과 사이트의 정보를 등록하면 각 검색엔진의 크롤러 봇이 사이트를 방문할 수 있습니다.
+위에서 만들어진 사이트맵은 구글의 경우에는 [Google Search Console](https://search.google.com/search-console)에다가 제작한 사이트맵과 사이트의 정보를 등록하면 되고, 네이버의 경우에는 [네이버 서치어드바이저](https://searchadvisor.naver.com/)에다가 사이트맵과 사이트의 정보를 등록하면 각 검색엔진의 크롤러 봇이 사이트를 방문할 수 있습니다.
 
 ## 3-1. 사이트맵에 대한 각종 Q&A
 
 기본적으로 [google 검색 센터](https://developers.google.com/search/docs/advanced/sitemaps/build-sitemap?hl=ko)에 사이트맵에 대한 각종 정보들이 많이 담겨있습니다.
 
 > **🧐 Question: 검색엔진에 노출시키기 위한 정보들이 글 정보들 말고 다른 분야들의 정보들도 함께 노출시키려고 합니다. 사이트맵을 분야별로 분리시킬 수 있나요?
-> 📄 Answer: https://developers.google.com/search/docs/advanced/sitemaps/large-sitemaps?hl=ko 링크를 참고하여 Root 사이트맵 하위의 사이트맵들을 구현하면 됩니다. 구현 과정은 제가 설명드린 과정과 거의 같습니다.**
+> 📄 Answer: [링크](https://developers.google.com/search/docs/advanced/sitemaps/large-sitemaps?hl=ko)를 참고하여 Root 사이트맵 하위의 사이트맵들을 구현하면 됩니다. 구현 과정은 제가 설명드린 과정과 거의 같습니다.**
 
 > **🧐 Question: 사이트맵만 제대로 구현하면 검색엔진에 쉽게 노출되는건가요?
 > 📄 Answer: 검색엔진에 노출되는 조건은 사이트맵 뿐만이 아닌 [코어 웹 바이탈](https://support.google.com/webmasters/answer/9205520?hl=ko)등의 성능 지표, 인식 가능한 HTML 구조도 중요합니다. 그리고 만약 각 페이지들의 초기 렌더링이 클라이언트 사이드 렌더링일 경우, 네이버와 다음의 크롤러 봇이 수집을 제대로 못할 가능성이 큽니다. (초기 HTML이 비어있는 이슈)**

posts/Windows 프로세스 죽이기 (테스트용).mdx

@@ -2,7 +2,8 @@
 title: Windows 프로세스 죽이기 (테스트용)
 createdAt: 2023-02-24
 description: 안녕하세요! 오늘은 간단하게 윈도우에서 실행중인 프로세스를 찾아서 포트 죽이기를 주제로 글을 작성해보도록 하겠습니다.
-category: windows
+category: Windows
+thumbnail: https://velog.velcdn.com/images/yiyb0603/post/075df0ff-7a7a-4cec-81b4-dba61f6ddd4c/1_1.jpg
 ---
 
 안녕하세요! 오늘은 간단하게 **윈도우에서 실행중인 프로세스를 찾아서 포트 죽이기**를 주제로 글을 작성해보도록 하겠습니다. 제가 자주 해결하는 방법이기도 해서 메모겸으로 글을 작성해보려고 합니다 😁

src/components/Common/Flex/index.tsx

@@ -1,5 +1,4 @@
 import {
-  memo,
   ComponentPropsWithRef,
   ComponentPropsWithoutRef,
 } from 'react';
@@ -86,4 +85,4 @@ const FlexContainer = styled.div<FlexStyleProps>`
   cursor: ${({ cursor }) => cursor};
 `;
 
-export default memo(Flex);
+export default Flex;

src/components/Common/Text/index.tsx

@@ -1,13 +1,14 @@
 import { ComponentPropsWithoutRef, ComponentPropsWithRef } from 'react';
 import styled, { FlattenSimpleInterpolation } from 'styled-components';
 import { ellipsisLine } from '@/styles/utils';
-import { Display, WordBreak } from '@/types/style';
+import { Display, TextAlign, WordBreak } from '@/types/style';
 
 type TextStyleProps = {
   fontSize?: string;
   fontFamily?: string;
   color?: string;
   display?: Display;
+  textAlign?: TextAlign;
   lineHeight?: string;
   letterSpacing?: string;
   wordBreak?: WordBreak;
@@ -58,6 +59,7 @@ const CustomText = styled.div<TextStyleProps>`
   word-break: ${({ wordBreak }) => wordBreak};
   letter-spacing: ${({ letterSpacing }) => letterSpacing};
   line-height: ${({ lineHeight }) => lineHeight};
+  text-align: ${({ textAlign }) => textAlign};
   background-color: ${({ backgroundColor }) => backgroundColor};
   margin: ${({ margin }) => margin};
   padding: ${({ padding }) => padding};

src/components/Modules/Home/PostList/PostRowItem/index.tsx

@@ -1,3 +1,4 @@
+import styled from 'styled-components';
 import dayjs from 'dayjs';
 import { Post } from '@/contentlayer/generated/types';
 import useStyledTheme from '@/hooks/theme/useStyledTheme';
@@ -38,14 +39,14 @@ const PostRowItem = ({
       borderRadius='10px'
       backgroundColor={color.background3}
     >
-      <Flex
+      <ContentThumbnailWrapper
         tagName='div'
         gap='2rem'
         justifyContent='space-between'
       >
         <Flex
           tagName='div'
-          gap='1rem'
+          gap='0.5rem'
           flexDirection='column'
           flex='1'
         >
@@ -80,15 +81,15 @@ const PostRowItem = ({
 
         {
           !isEmpty(thumbnail) &&
-          <Image
+          <PostThumbnail
             src={thumbnail}
             alt={title}
-            width='120px'
-            height='120px'
+            width='200px'
+            height='110px'
             borderRadius='5px'
           />
         }
-      </Flex>
+      </ContentThumbnailWrapper>
 
       <Text
         tagName='span'
@@ -104,4 +105,17 @@ const PostRowItem = ({
   );
 }
 
+const ContentThumbnailWrapper = styled(Flex<'div'>)`
+  ${({ theme }) => theme.device.mediumMobile} {
+    flex-direction: column-reverse;
+  };
+`;
+
+const PostThumbnail = styled(Image)`
+  ${({ theme }) => theme.device.mediumMobile} {
+    width: 100%;
+    height: 100%;
+  };
+`;
+
 export default PostRowItem;

src/components/Modules/Home/WelcomeBlog/index.tsx

@@ -22,7 +22,6 @@ const WelcomeBlog = (): JSX.Element => {
         <Text
           tagName='h1'
           fontSize={fontSize.LARGE}
-          fontFamily={fontFamily.pretendard.BOLD}
         >
           Welcome to yiyb-blog 🖐️
         </Text>

src/components/Modules/Post/PostContent/index.tsx

@@ -18,22 +18,6 @@ const PostContent = ({
 }
 
 const PostContentContainer = styled.section`
-  img {
-    width: 100%;
-    margin: 1.5rem 0;
-  }
-
-  pre {
-    width: 100%;
-    margin: 1.5rem 0;
-    word-break: break-all;
-    overflow: auto;
-    padding: 1.5rem;
-    border-radius: 5px;
-    color: ${({ theme }) => theme.color.white};
-    background-color: ${({ theme }) => theme.color.codeTheme};
-  }
-
   h1 {
     margin: 1.5rem 0;
     font-size: ${({ theme }) => theme.fontSize.LARGE};
@@ -47,20 +31,37 @@ const PostContentContainer = styled.section`
   }
 
   a {
+    font-family: ${({ theme }) => theme.fontFamily.pretendard.BOLD};
     color: ${({ theme }) => theme.color.main};
   }
 
   p,
   li,
-  code,
   span,
+  code,
   a {
     white-space: pre-wrap;
     word-break: break-all;
     line-height: 1.6;
     font-size: ${({ theme }) => theme.fontSize.MEDIUM};
   }
 
+  img {
+    width: 100%;
+    margin: 1.5rem 0;
+  }
+
+  pre {
+    width: 100%;
+    margin: 1.5rem 0;
+    word-break: break-all;
+    overflow: auto;
+    padding: 1.5rem;
+    border-radius: 5px;
+    color: ${({ theme }) => theme.color.white};
+    background-color: ${({ theme }) => theme.color.codeTheme};
+  }
+
   blockquote {
     margin: 1.5rem 0;
     padding: 2rem;

src/components/Modules/Post/PostSubInfo/index.tsx

@@ -18,13 +18,15 @@ const PostSubInfo = ({
 }: PostSubInfoProps): JSX.Element => {
   const {
     color,
+    fontFamily,
     fontSize,
   } = useStyledTheme();
 
   return (
     <Flex
       tagName='section'
       justifyContent='space-between'
+      alignItems='center'
     >
       <HyperLink
         external={false}
@@ -36,7 +38,8 @@ const PostSubInfo = ({
             },
           },
         }}
-        fontSize={fontSize.NORMAL}
+        fontSize={fontSize.MEDIUM}
+        fontFamily={fontFamily.pretendard.MEDIUM}
         color={color.main}
       >
         {category}
@@ -46,6 +49,7 @@ const PostSubInfo = ({
         tagName='time'
         dateTime={createdAt}
         fontSize={fontSize.NORMAL}
+        letterSpacing='-0.2px'
       >
         {dayjs(createdAt).locale('ko').format('YYYY년 MM월 DD일 (dddd)')}
       </Text>

src/components/Modules/Post/PostThumbnail/index.tsx

@@ -0,0 +1,22 @@
+import Image from '@/components/Common/Image';
+
+type PostThumbnailProps = {
+  alt: string;
+  thumbnail: string;
+}
+
+const PostThumbnail = ({
+  alt,
+  thumbnail,
+}: PostThumbnailProps): JSX.Element => {
+  return (
+    <Image
+      src={thumbnail}
+      alt={alt}
+      width='100%'
+      borderRadius='5px'
+    />
+  );
+}
+
+export default PostThumbnail;

src/components/Modules/Post/PostTitle/index.tsx

@@ -16,6 +16,7 @@ const PostTitle = ({
     <Text
       tagName='h1'
       fontSize={fontSize.EXTRA_LARGE}
+      letterSpacing='-0.8px'
     >
       {title}
     </Text>