[style] 전체적인 스타일 수정

suu3 · Dec 18, 2023 · a0f6264 · a0f6264
1 parent cf906dd
commit a0f6264
Show file tree

Hide file tree

Showing 15 changed files with 121 additions and 56 deletions.
diff --git 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
@@ -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
@@ -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
@@ -52,7 +52,7 @@ const Navigation = () => {
               quality={95}
               alt="logo"
             />
-            <SplitText words="Suu Blog" />
+            <SplitText words="Suu3 Blog" />
           </Link>
         </li>
         <li>

diff --git 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
@@ -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 && (
         <CategoryMenu pathname={location.pathname} categories={categories} />
       )}
-      <aside>
-        {tags.group.map(({ fieldValue, totalCount }) => (
-          <Badge key={fieldValue}>{`${fieldValue} (${totalCount})`}</Badge>
-        ))}
-      </aside>
-      <TransitionMain>
-        <ol style={{ listStyle: `none` }}>{renderPosts}</ol>
-      </TransitionMain>
-      <Pagination
-        itemRender={textItemRender}
-        current={currentPage}
-        onChange={handlePageChange}
-        className={paginationCls}
-        total={totalCount}
-        pageSize={POST_PER_PAGE}
-      />
+
+      <div className={mainWrapper}>
+        <aside className={sideMenu}>
+          <h3
+            style={{
+              padding: "0 8px 10px 8px",
+              margin: "var(--spacing-2)",
+            }}
+          >
+            Tags
+          </h3>
+          {tags.group.map(({ fieldValue, totalCount }) => (
+            <Badge key={fieldValue}>{`${fieldValue} (${totalCount})`}</Badge>
+          ))}
+        </aside>
+        <TransitionMain className={main}>
+          <ol style={{ listStyle: `none` }}>{renderPosts}</ol>
+          <Pagination
+            itemRender={textItemRender}
+            current={currentPage}
+            onChange={handlePageChange}
+            className={paginationCls}
+            total={totalCount}
+            pageSize={POST_PER_PAGE}
+            jumpNextIcon={"..."}
+            jumpPrevIcon={"..."}
+          />
+        </TransitionMain>
+      </div>
     </Layout>
   )
 }

diff --git 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 (
     <motion.main
+      className={className}
       initial={{
         opacity: 0,
         x: -200,

diff --git a/src/components/badge.module.css b/src/components/badge.module.css
@@ -9,7 +9,7 @@
 
   font-size: var(--fontSize-0);
   font-weight: 600;
-  margin-right: var(--spacing-2);
+  margin: var(--spacing-2);
 
   /* &:nth-child(2) {
     box-shadow: inset 0 -10px 0 #ff8a00;

diff --git a/src/components/post-list-item.module.css b/src/components/post-list-item.module.css
@@ -2,21 +2,25 @@
   position: relative;
   background: var(--background-color);
 
-  border-top-left-radius: 0.5rem;
-  border-top-right-radius: 0.5rem;
+  /* border-top-left-radius: 0.5rem;
+  border-top-right-radius: 0.5rem; */
   overflow: hidden;
 
   /*backdrop-filter: blur(10px);*/
-  box-shadow: 6px 6px 0px -1px var(--color-accent);
+  /* box-shadow: 6px 6px 0px -1px var(--color-accent); */
 
   display: flex;
   flex-direction: column;
 
-  padding: var(--spacing-10) 0 var(--spacing-8) 0;
-  margin: var(--spacing-10) 0;
+  padding: var(--spacing-8) 0;
 
-  border: 1px solid var(--color-accent);
-  /* border-bottom: 1px solid var(--color-accent); */
+  &:not(:first-child) {
+    margin: var(--spacing-10) 0;
+  }
+
+  /* border: 1px solid var(--color-accent); */
+  border-top: 1px solid rgba(0, 0, 0, 0.4);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
 
   &:hover {
     .arrow {
@@ -38,7 +42,7 @@
   padding: 0 var(--spacing-8);
 }
 
-.top-bar {
+/* .top-bar {
   z-index: 1;
   height: var(--spacing-4);
   position: absolute;
@@ -71,7 +75,7 @@
     width: 0.5rem;
     height: 0.5rem;
   }
-}
+} */
 @keyframes move {
   0% {
     transform: translate(10px, 0);
@@ -122,13 +126,15 @@
 
 .category-cls {
   display: inline-flex;
-  border: 2px solid var(--color-text);
+  /* border: 2px solid var(--color-text); */
   z-index: 1;
-  background-color: #4a0bfa;
+  font-weight: 700;
+  color: var(--color-accent);
+  /* background-color: #4a0bfa;
   border-radius: 0.8rem;
   box-shadow: 3px 3px 0px -1px var(--color-accent);
-  color: white;
+  color: white; */
   /* color: var(--color-text); */
   padding: 0 var(--spacing-2);
-  margin-bottom: var(--spacing-2);
+  margin-bottom: var(--spacing-0);
 }
diff --git a/src/components/table-contents.module.css b/src/components/table-contents.module.css
@@ -14,7 +14,7 @@
 .inner {
   /* position: fixed; */
   position: sticky;
-  background: #ffc700;
+  /* background: #ffc700; */
   width: 18rem;
   min-height: 10rem;
   max-height: calc(100vh - 200px);
@@ -25,8 +25,8 @@
 
   list-style: none;
 
-  box-shadow: 6px 6px 0px -1px var(--color-accent);
-  border: 2px solid var(--color-text);
+  /* box-shadow: 6px 6px 0px -1px var(--color-accent); */
+  /* border: 2px solid var(--color-text); */
 
   > div {
     font-weight: 700;

diff --git 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
@@ -10,7 +10,7 @@ const NotFoundPage = ({ data, location }) => {
   return (
     <Layout location={location} title={siteTitle}>
       <h1>404: Not Found</h1>
-      <p>You just hit a route that doesn&#39;t exist... the sadness.</p>
+      <p>존재하지 않는 페이지입니다.</p>
     </Layout>
   )
 }

diff --git 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
@@ -53,6 +53,7 @@ const BlogPostTemplate = ({
           <Bio />
         </footer> */}
         </article>
+        <Utterances />
         <nav className={blogPostNav}>
           <ul>
             <li>
@@ -78,7 +79,6 @@ const BlogPostTemplate = ({
             </li>
           </ul>
         </nav>
-        <Utterances />
       </TransitionMain>
     </Layout>
   )

diff --git 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,30 +13,34 @@
 
 .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 {
   margin-bottom: var(--spacing-4);
 }
 
 .blog-post-nav ul {
-  margin: var(--spacing-0);
+  margin: var(--spacing-3);
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
@@ -59,15 +64,15 @@
   }
 }
 .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;
   }
 }
 
 .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;
   }
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		export const POST_PER_PAGE = 10
		export const POST_PER_PAGE = 1