diff --git a/README.md b/README.md index 2198726c..1ae097aa 100644 --- a/README.md +++ b/README.md @@ -12,6 +12,10 @@ pnpm start pnpm run deploy ``` +## 리팩토링 거리 + +- 처음부터 다 만들어보고 싶다, 원하는 디자인을 적용하고 싶다는 생각에서 만들기 시작한 것인데 이것저것 디자인 넣어보느라 스타일이 엉망임. 추후 수정 필요. + ## 🧐 What's inside? 디렉터리 구조 diff --git a/src/components/@layout/category-menu.module.css b/src/components/@layout/category-menu.module.css index 1e82fa03..863134d0 100644 --- a/src/components/@layout/category-menu.module.css +++ b/src/components/@layout/category-menu.module.css @@ -8,11 +8,11 @@ } .list li { - box-shadow: 4px 4px 0px -1px var(--color-accent); - border: 1px solid var(--color-accent); + /* box-shadow: 4px 4px 0px -1px var(--color-accent); */ + /* border: 1px solid var(--color-accent); */ text-align: center; - font-size: var(--fontSize-1); + font-size: var(--fontSize-2); font-weight: 700; list-style: none; @@ -35,8 +35,8 @@ .list li:hover, .list li:active, .active { - background: var(--color-accent); - color: #ffffff; + /* background: var(--color-accent); + color: #ffffff; */ /* box-shadow: inset 0 -20px 0 #bfffa1; */ } diff --git a/src/components/@layout/navigation.module.css b/src/components/@layout/navigation.module.css index 440ceaa9..00c995b9 100644 --- a/src/components/@layout/navigation.module.css +++ b/src/components/@layout/navigation.module.css @@ -17,7 +17,7 @@ height: var(--navigation-height); background: var(--background-color); /*backdrop-filter: blur(10px);*/ - border-bottom: 2px solid var(--color-accent); + border-bottom: 1px solid var(--color-accent); /* box-shadow: rgba(0, 0, 0, 0.5) 0px 1px 3px, rgba(0, 0, 0, 1) 0px 1px 2px; */ transition: transform 0.3s linear; diff --git a/src/components/@layout/navigation.tsx b/src/components/@layout/navigation.tsx index 16907ad5..5ba54cfa 100644 --- a/src/components/@layout/navigation.tsx +++ b/src/components/@layout/navigation.tsx @@ -52,7 +52,7 @@ const Navigation = () => { quality={95} alt="logo" /> - +
  • diff --git a/src/components/@layout/post-list-template.module.css b/src/components/@layout/post-list-template.module.css index 7c8d0733..87929201 100644 --- a/src/components/@layout/post-list-template.module.css +++ b/src/components/@layout/post-list-template.module.css @@ -12,3 +12,27 @@ list-style: none; } } + +.main-wrapper { + display: flex; + justify-content: space-between; + flex-direction: row-reverse; + gap: var(--spacing-5); +} + +.main { + width: 100%; + + > ol > li { + margin-bottom: var(--spacing-10); + } +} + +.side-menu { + width: 25%; + + /* Media queries */ + @media (max-width: 60rem) { + display: none; + } +} diff --git a/src/components/@layout/post-list-template.tsx b/src/components/@layout/post-list-template.tsx index 72e9af82..5f3f2917 100644 --- a/src/components/@layout/post-list-template.tsx +++ b/src/components/@layout/post-list-template.tsx @@ -6,7 +6,12 @@ import Pagination from "rc-pagination" import CategoryMenu from "./category-menu" import TransitionMain from "./transition-main" import { POST_PER_PAGE } from "../../constants/page" -import { paginationCls } from "./post-list-template.module.css" +import { + main, + mainWrapper, + sideMenu, + paginationCls, +} from "./post-list-template.module.css" import Badge from "../badge" const PostListTemplate = ({ data, location, pageContext }) => { @@ -68,22 +73,35 @@ const PostListTemplate = ({ data, location, pageContext }) => { {categories && ( )} - - -
      {renderPosts}
    -     - + +
    + + +
      {renderPosts}
    + +     +
    ) } diff --git a/src/components/@layout/transition-main.tsx b/src/components/@layout/transition-main.tsx index e36ad23a..8c1121ca 100644 --- a/src/components/@layout/transition-main.tsx +++ b/src/components/@layout/transition-main.tsx @@ -1,9 +1,16 @@ import React, { ReactNode } from "react" import { motion } from "framer-motion" -const TransitionMain = ({ children }: { children: ReactNode }) => { +const TransitionMain = ({ + children, + className, +}: { + children: ReactNode + className?: string +}) => { return ( div { font-weight: 700; diff --git a/src/constants/page.ts b/src/constants/page.ts index 9b799e28..e25ed53c 100644 --- a/src/constants/page.ts +++ b/src/constants/page.ts @@ -1 +1 @@ -export const POST_PER_PAGE = 10 +export const POST_PER_PAGE = 1 diff --git a/src/pages/404.tsx b/src/pages/404.tsx index ab326b02..9c272b5c 100644 --- a/src/pages/404.tsx +++ b/src/pages/404.tsx @@ -10,7 +10,7 @@ const NotFoundPage = ({ data, location }) => { return (

    404: Not Found

    -

    You just hit a route that doesn't exist... the sadness.

    +

    존재하지 않는 페이지입니다.

     ) } diff --git a/src/styles/global.css b/src/styles/global.css index b7bf692e..1345e118 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -93,6 +93,7 @@ } html { + overflow-x: hidden; line-height: var(--lineHeight-normal); font-size: var(--fontSize-root); -webkit-font-smoothing: antialiased; @@ -285,9 +286,9 @@ a:focus { margin-bottom: var(--spacing-20); } -.global-header { +/* .global-header { margin-bottom: var(--spacing-8); -} +} */ .header-link-home { font-weight: var(--fontWeight-bold); @@ -301,11 +302,11 @@ a:focus { } /* Media queries */ -@media (max-width: 60rem) { +/* @media (max-width: 60rem) { .global-wrapper { padding: var(--spacing-10) var(--spacing-3) var(--spacing-3); } -} +} */ @media (max-width: 42rem) { blockquote { diff --git a/src/templates/blog-post.js b/src/templates/blog-post.js index 5227192a..d344f678 100644 --- a/src/templates/blog-post.js +++ b/src/templates/blog-post.js @@ -53,6 +53,7 @@ const BlogPostTemplate = ({ */} + - ) diff --git a/src/templates/blog-post.module.css b/src/templates/blog-post.module.css index 5c8cba56..944b52cb 100644 --- a/src/templates/blog-post.module.css +++ b/src/templates/blog-post.module.css @@ -1,5 +1,6 @@ .blog-post { background: var(--background-color); + margin-bottom: var(--spacing-10); } .blog-post header h1 { margin: var(--spacing-0) var(--spacing-0) var(--spacing-4) var(--spacing-0); @@ -12,22 +13,26 @@ .badgeCls { margin: 0; - padding-bottom: var(--spacing-4); + padding-bottom: var(--spacing-1); } .blog-post header h1 { margin-bottom: 0; } -.dateCls { +.date-cls { font-size: var(--fontSize-2); font-family: var(--font-heading); - margin-bottom: var(--spacing-4); + margin-top: var(--spacing-1); + margin-bottom: var(--spacing-3); + margin-left: var(--spacing-1); } .category { opacity: 0.8; - margin-bottom: var(--spacing-4); + font-size: var(--fontSize-2); + /* font-weight: 700; */ + margin-bottom: var(--spacing-2); } .blog-post header hr { @@ -35,7 +40,7 @@ } .blog-post-nav ul { - margin: var(--spacing-0); + margin: var(--spacing-3); display: flex; flex-wrap: wrap; justify-content: space-between; @@ -59,7 +64,7 @@ } } .left-box { - box-shadow: -6px 6px 0px -1px var(--color-accent); + /* box-shadow: -6px 6px 0px -1px var(--color-accent); */ &:hover { animation: move-left 1s linear infinite; @@ -67,7 +72,7 @@ } .right-box { - box-shadow: 6px 6px 0px -1px var(--color-accent); + /* box-shadow: 6px 6px 0px -1px var(--color-accent); */ &:hover { animation: move-right 1s linear infinite; }