feat: timestamp 추가

.vscode/settings.json

@@ -9,6 +9,7 @@
     "Parens",
     "prismjs",
     "superelse",
-    "superif"
+    "superif",
+    "translatex"
   ]
 }

content/hello-world/index.md

@@ -4,7 +4,7 @@ title: Hello World
 date: '2021-07-06 00:00:00'
 author: 단민
 tags: 블로그 github-pages gatsby
-categories: 블로그 featured
+categories: featured
 ---
 
 This is my first post on my new fake blog! How exciting!

gatsby-browser.ts

@@ -1,5 +1,2 @@
-// custom typefaces
-import 'typeface-montserrat';
-import 'typeface-merriweather';
 // Highlighting for code blocks
 import 'prismjs/themes/prism.css';

gatsby-node.ts

@@ -24,8 +24,7 @@ type CreatePagesFuncProps = {
 };
 
 const createPosts = ({ createPage, edges }: CreatePagesFuncProps) => {
-  // Define a template for blog post
-  const blogPost = path.resolve(`./src/templates/posts-template/index.tsx`);
+  const posts = path.resolve(`./src/templates/posts-template/index.tsx`);
   const categorySet = new Set(['All']);
 
   edges.forEach(({ node }) => {
@@ -37,14 +36,14 @@ const createPosts = ({ createPage, edges }: CreatePagesFuncProps) => {
 
   createPage({
     path: `/posts`,
-    component: blogPost,
+    component: posts,
     context: { currentCategory: 'All', edges, categories },
   });
 
   categories.forEach((currentCategory) => {
     createPage({
       path: `/posts/${currentCategory}`,
-      component: blogPost,
+      component: posts,
       context: {
         currentCategory,
         categories,
@@ -55,13 +54,12 @@ const createPosts = ({ createPage, edges }: CreatePagesFuncProps) => {
 };
 
 const createPost = ({ createPage, edges }: CreatePagesFuncProps) => {
-  // Define a template for blog post
-  const blogPost = path.resolve(`./src/templates/post-template/index.tsx`);
+  const post = path.resolve(`./src/templates/post-template/index.tsx`);
 
   edges.forEach(({ node, next, previous }) => {
     createPage({
       path: node.fields.slug,
-      component: blogPost,
+      component: post,
       context: {
         // additional data can be passed via context
         slug: node.fields.slug,

gatsby-site-meta-data.ts

@@ -33,43 +33,79 @@ export default {
   about: {
     careers: [
       {
-        date: '',
-        activity: '',
-        links: {
-          github: '',
-          post: '',
-          googlePlay: '',
-          appStore: '',
-          demo: '',
-        },
+        date: '2022.01.04 - NOW',
+        en: 'Woowa Brothers Corp.',
+        kr: '우아한형제들',
+        info: 'Front-end development group',
       },
-    ],
-
-    internships: [
       {
-        date: '',
-        activity: '',
-        links: {
-          github: '',
-          post: '',
-          googlePlay: '',
-          appStore: '',
-          demo: '',
-        },
+        date: '2021.09.27 - 2021.12.26',
+        en: 'Daangn',
+        kr: '당근마켓',
+        info: 'MVP Intership',
+      },
+      {
+        date: '2021.03.02-2021.04.09',
+        en: 'Naver',
+        kr: '네이버',
+        info: 'Glace CIC / smart place service',
+      },
+      {
+        date: '2020.11.02-2021.02.28',
+        en: 'Megazon Cloud',
+        kr: '메가존클라우드',
+        info: 'Cloud Tech Center / CloudOne',
+      },
+      {
+        date: '2020.06.29-2020.10.16',
+        en: 'TwentyOZ',
+        kr: '트웬티온스',
+        info: 'Field training',
       },
     ],
 
     activities: [
       {
-        date: '',
-        activity: '',
-        links: {
-          github: '',
-          post: '',
-          googlePlay: '',
-          appStore: '',
-          demo: '',
-        },
+        date: '2022.11 - NOW',
+        en: 'SIPE',
+        kr: '사이프',
+        info: 'Community for IT workers',
+        link: '',
+      },
+      {
+        date: '2022.09 - NOW',
+        en: 'SOPT makers',
+        kr: '솝트 메이커스',
+        info: 'Organization makes products for SOPT',
+        link: '',
+      },
+      {
+        date: '2020.09 - NOW',
+        en: 'AUSG',
+        kr: '아우쓱',
+        info: 'AWS university student group',
+        link: 'https://ausg.me/',
+      },
+      {
+        date: '2020.07 - 2021.12',
+        en: 'Depromeet',
+        kr: '디프만',
+        info: 'Club with designers and programmers',
+        link: 'https://depromeet.com/',
+      },
+      {
+        date: '2020.03 - 2020.08',
+        en: 'SOPT',
+        kr: '솝트',
+        info: 'College student start-up IT club',
+        link: 'https://sopt.org/',
+      },
+      {
+        date: '2020.03 - 2020.06',
+        en: 'Like Lion',
+        kr: '멋쟁이사자처럼',
+        info: 'College student start-up IT club',
+        link: 'https://www.likelion.net/',
       },
     ],
 

gatsby-ssr.tsx

@@ -0,0 +1,31 @@
+import { RenderBodyArgs } from 'gatsby';
+
+export const onRenderBody = ({ setHtmlAttributes, setHeadComponents }: RenderBodyArgs) => {
+  setHtmlAttributes({ lang: `en` });
+  setHeadComponents([
+    <link
+      rel='preload'
+      href='https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/GmarketSansLight.woff'
+      as='font'
+      type='font/woff'
+      crossOrigin='anonymous'
+      key='GmarketSansLight'
+    />,
+    <link
+      rel='preload'
+      href='https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/GmarketSansMedium.woff'
+      as='font'
+      type='font/woff'
+      crossOrigin='anonymous'
+      key='GmarketSansMedium'
+    />,
+    <link
+      rel='preload'
+      href='https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/GmarketSansBold.woff'
+      as='font'
+      type='font/woff'
+      crossOrigin='anonymous'
+      key='GmarketSansBold'
+    />,
+  ]);
+};

package.json

@@ -10,15 +10,14 @@
   "dependencies": {
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
+    "@radix-ui/react-icons": "^1.1.1",
     "gatsby": "^4.24.5",
     "prismjs": "^1.29.0",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "react-helmet": "^6.1.0",
     "react-rotating-text": "^1.4.1",
-    "sass": "^1.55.0",
-    "typeface-merriweather": "0.0.72",
-    "typeface-montserrat": "0.0.75"
+    "sass": "^1.55.0"
   },
   "devDependencies": {
     "@types/react-helmet": "^6.1.5",

src/components/aboutTitle/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import * as S from './styled';
+
+type AboutTitleProps = {
+  title: string;
+};
+
+const AboutTitle: React.FC<AboutTitleProps> = ({ title }) => {
+  return (
+    <S.Wrapper>
+      <h2>{title}</h2>
+    </S.Wrapper>
+  );
+};
+
+export default AboutTitle;

src/components/aboutTitle/styled.ts

@@ -0,0 +1,15 @@
+import { colors } from '../../../src/styles/const';
+import styled from '@emotion/styled';
+
+export const Wrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  margin-bottom: 32px;
+  h2 {
+    padding-bottom: 5px;
+    border-bottom: 2px solid ${colors.black100};
+    font-weight: 700;
+    font-size: 30px;
+  }
+`;

src/components/bio/styled.ts

@@ -40,7 +40,7 @@ export const Wrapper = styled.div`
   justify-content: space-between;
   width: 100%;
   margin-top: 120px;
-  margin-bottom: 120px;
+  margin-bottom: 80px;
   font-family: GmarketSansLight;
 
   .react-rotating-text-cursor {

src/components/header/index.tsx

@@ -34,15 +34,15 @@ const Header: React.FC<HeaderProps> = ({ location, children }) => {
     <S.Wrapper>
       <S.Header>
         <div>
-          <S.MenuLink to='/' isselected={false}>
+          <S.MenuLink to='/' isselected='false'>
             {children}
           </S.MenuLink>
         </div>
         <S.Menu>
-          <S.MenuLink to='/about' isselected={pathname === '/about'}>
+          <S.MenuLink to='/about' isselected={(pathname === '/about').toString()}>
             about
           </S.MenuLink>
-          <S.MenuLink to='/posts' isselected={pathname === '/posts'}>
+          <S.MenuLink to='/posts' isselected={(pathname === '/posts').toString()}>
             posts
           </S.MenuLink>
           {/* <PostSearch

src/components/header/styled.ts

@@ -11,6 +11,7 @@ export const Wrapper = styled.div`
   top: 0;
   left: 0;
   background-color: ${colors.white100};
+  z-index: 100;
 `;
 
 export const Header = styled.div`
@@ -28,12 +29,12 @@ export const Menu = styled.div`
   align-items: center;
 `;
 
-export const MenuLink = styled(Link)<{ isselected: boolean }>`
+export const MenuLink = styled(Link)<{ isselected: string }>`
   font-size: 17px;
   ${hoverUnderline};
   &:after {
     height: 2px;
     bottom: -2px;
-    transform: ${({ isselected }) => (isselected ? 'scaleX(1)' : 'scaleX(0)')};
+    transform: ${({ isselected }) => (isselected === 'true' ? 'scaleX(1)' : 'scaleX(0)')};
   }
 `;

src/components/introduction/index.tsx

@@ -22,19 +22,6 @@ const Introduction: React.FC<IntroductionProps> = ({ author }) => {
           <strong>Bachelor Degree.</strong> {bachelorDegree}
         </S.Info>
       </S.InfoWrapper>
-
-      <S.Intro>
-        <div>{`Hello, my name is Lee Jeongmin.
-        I’m a junior developer who wants to deeply strengthen the front-end.
-        
-        I’m actively expanding my interest in development regardless of field.`}</div>
-
-        <div>{`“ Do not be a frog in a well. ”
-        “ All I know is not everyting. ”`}</div>
-
-        <div>{`Every time, new plans and challenges have been a great stimulus.
-        I would like to give myself new tasks and create opportunities to continue to grow.`}</div>
-      </S.Intro>
     </S.Wrapper>
   );
 };

src/components/introduction/styled.ts

@@ -3,6 +3,7 @@ import styled from '@emotion/styled';
 export const Wrapper = styled.div`
   width: 100%;
   font-family: GmarketSansLight;
+  margin-bottom: 50px;
 `;
 
 export const InfoWrapper = styled.div`

src/components/postTab/index.tsx

@@ -22,7 +22,7 @@ const PostTabs: React.FC<PostTabsProps> = ({ tabIndex, onChange, tabs, posts })
     <S.Wrapper>
       <S.Tabs>
         {tabs.map((title, index) => (
-          <S.Tab key={index} isselected={tabIndex === index} onClick={() => onChange(index)}>
+          <S.Tab key={index} isselected={(tabIndex === index).toString()} onClick={() => onChange(index)}>
             {title}
           </S.Tab>
         ))}