fix: 스타일 수정

heejongahn · Oct 16, 2022 · 7322990 · 7322990
1 parent b0c12f2
commit 7322990
Show file tree

Hide file tree

Showing 9 changed files with 96 additions and 72 deletions.
diff --git a/package.json b/package.json
@@ -6,6 +6,7 @@
   "dependencies": {
     "babel-plugin-styled-components": "^2.0.7",
     "babel-preset-gatsby": "^2.24.0",
+    "date-fns": "^2.29.3",
     "gatsby": "^4.24.4",
     "gatsby-plugin-feed": "^4.24.0",
     "gatsby-plugin-google-analytics": "^4.24.0",

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -62,19 +62,9 @@ const Footer = () => (
       </ContactItem>
     </Contact>
     <MadeWith>
-      made with
-      <MadeWithComponent target="_blank" href="https://www.gatsbyjs.org/">
-        Gatsby
-      </MadeWithComponent>
-      +
-      <MadeWithComponent target="_blank" href="https://www.netlify.com/">
-        Netlify
-      </MadeWithComponent>
-      (
       <a target="_blank" href="https://github.com/heejongahn/blog">
         source code
       </a>
-      )
     </MadeWith>
   </Wrapper>
 );

diff --git a/src/components/Post.tsx b/src/components/Post.tsx
@@ -1,6 +1,6 @@
-import { uesMemo } from "react";
 import styled from "styled-components";
 import { Link } from "gatsby";
+import { formatDate } from "../utils";
 
 export interface Post {
   id: string;
@@ -26,7 +26,7 @@ const PostItem = ({ post }: Props) => {
       <PostWrapper to={post.fields.slug}>
         <PostTop>
           <PostTitle>{post.frontmatter.title}</PostTitle>
-          <PublishedDate>{post.frontmatter.date}</PublishedDate>
+          <PublishedDate>{formatDate(post.frontmatter.date)}</PublishedDate>
         </PostTop>
         <Description>{post.frontmatter.description}</Description>
         <TagList>
@@ -78,7 +78,9 @@ const PostTitle = styled.h2`
   overflow-wrap: break-word;
 `;
 
-const PublishedDate = styled.small``;
+const PublishedDate = styled.time`
+  font-size: 12px;
+`;
 
 const Description = styled.div`
   word-break: keep-all;

diff --git a/src/components/all.scss b/src/components/all.scss
@@ -43,10 +43,10 @@ h6 {
 
 a {
   cursor: pointer;
-  transition: color 0.2s ease;
+  transition: color 0.1s ease;
 
   &:hover {
-    color: red;
+    color: $oc-orange-7;
   }
 }
 
@@ -55,3 +55,9 @@ ul {
   margin: 0;
   padding: 0;
 }
+
+hr {
+  margin: 48px 0;
+  border: 0;
+  border-top: 1px solid $oc-gray-5;
+}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -1,9 +1,8 @@
-import { graphql } from "gatsby";
+import { graphql, Link } from "gatsby";
 import styled from "styled-components";
 import Layout from "../components/Layout";
 import PostItem, { Post, PostList } from "../components/Post";
 import PageHelmet from "../components/PageHelmet";
-import GatsbyLink from "gatsby-link";
 
 interface Props {
   data: {
@@ -41,7 +40,7 @@ const IndexPage = ({ data }: Props) => {
               RSS 피드
             </a>
             를 구독하세요. 저에 대해 궁금하시다면{" "}
-            <GatsbyLink to="/about">소개 페이지</GatsbyLink>에 들러보세요.
+            <Link to="/about">소개 페이지</Link>에 들러보세요.
           </Intro>
         </Summary>
         {/* TODO: 카테고리 */}
@@ -72,7 +71,7 @@ export const pageQuery = graphql`
           frontmatter {
             title
             templateKey
-            date(formatString: "MMMM DD, YYYY")
+            date
             description
             tags
           }

diff --git a/src/templates/blog-post.tsx b/src/templates/blog-post.tsx
@@ -1,39 +1,44 @@
-import React from "react";
 import { graphql, Link } from "gatsby";
 import Layout from "../components/Layout";
 import Content, { HTMLContent } from "../components/Content";
 import styled from "styled-components";
 import PageHelmet from "../components/PageHelmet";
-import GatsbyLink from "gatsby-link";
+import { formatDate } from "../utils";
 
 interface Props {
   content: any;
   contentComponent: any;
   description: string;
   title: string;
+  date: string;
   tags: string[];
 }
 
-export const BlogPostTemplate: React.SFC<Props> = ({
+export const BlogPostTemplate = ({
   content,
   contentComponent,
   description,
   tags,
   title,
-}) => {
+  date,
+}: Props) => {
   const PostContent = contentComponent || Content;
 
   return (
     <Wrapper>
       <Title>{title}</Title>
       <Description>{description}</Description>
-      <TagList>
-        {tags.map((tag) => (
-          <Tag key={tag + `tag`}>
-            <Link to={`/tags/${tag}/`}>{`#${tag}`}</Link>
-          </Tag>
-        ))}
-      </TagList>
+      <Extra>
+        <PublishedDate>{date}</PublishedDate>
+        <ExtraDivider aria-hidden>·</ExtraDivider>
+        <TagList>
+          {tags.map((tag) => (
+            <Tag key={tag + `tag`}>
+              <Link to={`/tags/${tag}/`}>{`#${tag}`}</Link>
+            </Tag>
+          ))}
+        </TagList>
+      </Extra>
       <PostContent content={content} />
     </Wrapper>
   );
@@ -51,20 +56,33 @@ const Title = styled.h1`
 const Description = styled.div`
   word-break: keep-all;
   overflow-wrap: break-word;
-  margin-top: 1em;
+  margin-top: 12px;
+`;
+
+const Extra = styled.div`
+  margin: 16px 0;
+
+  display: flex;
+  align-items: center;
+  font-size: 0.75em;
+`;
+
+const PublishedDate = styled.time`
+  display: block;
+`;
+
+const ExtraDivider = styled.div`
+  margin: 0 6px;
 `;
 
 const TagList = styled.ul`
-  margin-top: 0.5em;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
 `;
 
 const Tag = styled.li`
   list-style-type: none;
-  font-size: 0.75em;
-  margin-bottom: 4px;
 
   &:not(:last-child) {
     margin-right: 8px;
@@ -82,18 +100,18 @@ interface Post {
   };
 }
 
-const BlogPost: React.SFC<{
+const BlogPost = ({
+  data,
+}: {
   data: { markdownRemark: Post; previous: Post | null; next: Post | null };
-}> = ({ data }) => {
+}) => {
   const { markdownRemark: post, previous, next } = data;
 
   const shareTitle = encodeURIComponent(`「${post.frontmatter.title}」`);
 
   const url = `https://ahnheejong.name${post.fields.slug}`;
   const encodedUrl = encodeURIComponent(url);
 
-  console.log(data);
-
   return (
     <Layout>
       <PageHelmet
@@ -105,7 +123,7 @@ const BlogPost: React.SFC<{
         content={post.html}
         contentComponent={StyledHTMLContent}
         description={post.frontmatter.description}
-        ㅍ
+        date={formatDate(post.frontmatter.date)}
         tags={post.frontmatter.tags}
         title={post.frontmatter.title}
       />
@@ -159,7 +177,7 @@ export const pageQuery = graphql`
         slug
       }
       frontmatter {
-        date(formatString: "MMMM DD, YYYY")
+        date
         title
         description
         tags
@@ -196,7 +214,7 @@ const AdjacentArticles = styled.div`
   }
 `;
 
-const AdjacentArticle = styled(GatsbyLink)`
+const AdjacentArticle = styled(Link)`
   flex: 1 1 50%;
 
   display: flex;
@@ -222,7 +240,11 @@ const AdjacentArticle = styled(GatsbyLink)`
 
   @media screen and (max-width: 800px) {
     flex-basis: 100%;
-    margin: 6px 0;
+
+    &:first-child,
+    &:last-child {
+      margin: 6px 0;
+    }
   }
 `;
 

diff --git a/src/templates/tags.tsx b/src/templates/tags.tsx
@@ -5,36 +5,34 @@ import PostItem, { PostList } from "../components/Post";
 import styled from "styled-components";
 import PageHelmet from "../components/PageHelmet";
 
-class TagRoute extends React.Component<any> {
-  render() {
-    const { allMarkdownRemark } = this.props.data;
+const TagRoute = ({ data, pageContext }: { data: any; pageContext: any }) => {
+  const { allMarkdownRemark } = data;
 
-    const posts = allMarkdownRemark.edges;
-    const tag = this.props.pageContext.tag;
-    const totalCount = allMarkdownRemark.totalCount;
+  const posts = allMarkdownRemark.edges;
+  const tag = pageContext.tag;
+  const totalCount = allMarkdownRemark.totalCount;
 
-    return (
-      <Layout>
-        <PageHelmet
-          title={`“${tag}” 태그 검색 결과`}
-          description={`ahnheejong.name에서 “${tag}” 태그로 검색한 결과입니다.`}
-          url={`https://ahnheejong.name/tags/${tag}`}
-        />
-        <section className="section">
-          <Header>
-            <TagName>{`“${tag}”`}</TagName>
-            {`태그가 달린 글 (총 ${totalCount}편)`}
-          </Header>
-          <PostList>
-            {posts.map(({ node: post }: any) => (
-              <PostItem key={post.id} post={post} />
-            ))}
-          </PostList>
-        </section>
-      </Layout>
-    );
-  }
-}
+  return (
+    <Layout>
+      <PageHelmet
+        title={`“${tag}” 태그 검색 결과`}
+        description={`ahnheejong.name에서 “${tag}” 태그로 검색한 결과입니다.`}
+        url={`https://ahnheejong.name/tags/${tag}`}
+      />
+      <section className="section">
+        <Header>
+          <TagName>{`“${tag}”`}</TagName>
+          {`태그가 달린 글 (총 ${totalCount}편)`}
+        </Header>
+        <PostList>
+          {posts.map(({ node: post }: any) => (
+            <PostItem key={post.id} post={post} />
+          ))}
+        </PostList>
+      </section>
+    </Layout>
+  );
+};
 
 export default TagRoute;
 
@@ -53,7 +51,7 @@ export const tagPageQuery = graphql`
             slug
           }
           frontmatter {
-            date(formatString: "MMMM DD, YYYY")
+            date
             title
             description
             tags

diff --git a/src/utils.ts b/src/utils.ts
@@ -0,0 +1,6 @@
+import { parseISO, format } from "date-fns";
+import ko from "date-fns/locale/ko";
+
+export function formatDate(dateString: string) {
+  return format(parseISO(dateString), "PPP", { locale: ko });
+}
diff --git a/yarn.lock b/yarn.lock
@@ -6074,7 +6074,7 @@ data-urls@^1.1.0:
     whatwg-mimetype "^2.2.0"
     whatwg-url "^7.0.0"
 
-date-fns@^2.25.0:
+date-fns@^2.25.0, date-fns@^2.29.3:
   version "2.29.3"
   resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.29.3.tgz#27402d2fc67eb442b511b70bbdf98e6411cd68a8"
   integrity sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA==