Gatsby Post 날짜 요일 표시하기

템플릿 https://github.com/JaeYeopHan/gatsby-starter-bee 기준으로 포스트의 날짜 표시 부분을 변경하였다.

기존에 September 07, 2021같은 형식으로 뜨던 날짜 표시를 2021-09-07 화요일와 같이 뜨게 변경하였다.

src/template/blog-post.js에서 graphql쿼리 부분에서 date의 formatString을 변경한다.

- date(formatString: "MMMM DD, YYYY")
+ date(formatString: "YYYY-MM-DD")

src/constants/enum.js에 WEEK변수를 추가해준다.

export const WEEK = ["일", "월", "화", "수", "목", "금", "토"].map(
  item => item + "요일"
)

src/components/post-date/index.jsx에서 표시 내용을 변경해준다.

import React from 'react'
import { WEEK as week } from '../../constants';

import './index.scss'

export const PostDate = ({ date }) => {
-	return <p className="post-date">{date}</p>
+ return <p className="post-date">{`${date} ${week[new Date(date).getDay()]}`}</p>
}

변경 부분 화면 캡쳐

July 05, 2020 같은 형식으로 표시에서 2021-10-04 월요일 같은 형식으로 표시하게 변경하였다.