Merge pull request #3 from bbinya1224/ui-change

modify: UI-change

Author: bbinya1224

README.md

@@ -2,28 +2,13 @@
 
 > https://bbinya1224.github.io/
 
-## 주인장의 사담
+깃허브로 블로그를 드디어 만들었습니다!
 
-미루고 미루던 깃허브로 블로그 만들기를 이제서야 시작해보네요. <br /> UI 디자인은
-무엇을 봐도 제 마음에 들지 않아서 [fuwari](https://fuwari.vercel.app/) 템플릿의
-디자인을 참고하였습니다.
+UI에 있어서 엄청난 수정이 있었어요.  
+심플함을 좀 더 추구하고, 가독성에 있어서 신경을 쓰고 있습니다.  
+나름 마음에 드는 UI가 되었어요. 지속적으로 모바일에도 술술 읽히도록 쪼꼼쪼꼼
+수정작업이 들어갈것 같아요.
 
-[티스토리](https://bbinya.tistory.com/) 에서
+[티스토리](https://bbinya.tistory.com/) 에서  
 [벨로그](https://velog.io/@subin1224/posts) 그리고 지금 깃허브 블로그로 정착하여
-글을 열심히 써볼 예정인데요, <br />벨로그에 있는 글들을 먼저 옮기면서 그동안
-공부해 왔던부분(따로 노션에다가 간략히 정리했던..)들을 다듬어서 포스팅하려고
-합니다. <br />그러면서 추가하고 싶은 기능들을 하나씩 feat 해볼까합니다.
-
-네이버 블로그를 이용하여 일상글 및 리뷰도 포스팅 하고 있는데 뭔가 느낌이 블로그
-덕후가 되어가고 있는것같아요. 😂
-
-## TODO LIST
-
-> 포스팅외에 추가하고 싶은 기능들을 작성 했습니다.
-
-- [x] About Me 작성
-- [x] Category 및 Tag 기능 추가
-- [x] 댓글 기능
-- [x] 시스템 모드에 따라 다크모드/라이트모드 전환
-- [x] Skeleton UI 적용하기
-- [x] PostList 페이징 처리하기
+글을 열심히 써볼 예정입니다!

app/blog/about-me/page.tsx app/blog/(main)/about-me/page.tsxapp/blog/about-me/page.tsx renamed to app/blog/(main)/about-me/page.tsx

@@ -0,0 +1,27 @@
+import type { ReactNode } from "react";
+import PostListProvider from "@/app/provider/PostListProvider";
+import getAllPosts from "@/entities/post/api/getAllPosts";
+import Nav from "@/widgets/header/ui/Nav";
+import Sidebar from "@/widgets/sidebar/ui/Sidebar";
+
+const Layout = ({ children }: { children: ReactNode }) => {
+  const posts = getAllPosts();
+
+  return (
+    <PostListProvider initialPosts={posts}>
+      <main className="flex flex-col gap-6 lg:flex-row lg:gap-24">
+        <div className="flex-1">
+          <Nav />
+          {children}
+        </div>
+        <aside className="w-full shrink-0 border-gray-100 lg:w-[320px] lg:border-l dark:border-gray-800">
+          <div className="sticky top-20">
+            <Sidebar />
+          </div>
+        </aside>
+      </main>
+    </PostListProvider>
+  );
+};
+
+export default Layout;

app/blog/(main)/layout.tsx

@@ -0,0 +1,5 @@
+import CategoryCollection from "@/widgets/category-collection/ui/CategoryCollection";
+
+export default function ListsPage() {
+  return <CategoryCollection />;
+}

app/blog/(main)/lists/page.tsx

@@ -1,28 +1,12 @@
 import type { ReactNode } from "react";
-import PostListProvider from "@/app/provider/PostListProvider";
-import getAllPosts from "@/entities/post/api/getAllPosts";
-import Footer from "@/widgets/footer/ui/Footer";
 import Header from "@/widgets/header/ui/Header";
-import Sidebar from "@/widgets/sidebar/ui/Sidebar";
 
 const Layout = ({ children }: { children: ReactNode }) => {
-  const posts = getAllPosts();
-
   return (
-    <PostListProvider initialPosts={posts}>
-      <section className="relative mx-auto max-w-[var(--page-width)] pb-8">
-        <div className="fixed top-0 left-1/2 z-50 w-full max-w-[var(--page-width)] -translate-x-1/2">
-          <div className="mx-4">
-            <Header />
-          </div>
-        </div>
-        <main className="mx-4 mt-[7rem] mb-4 flex flex-col-reverse gap-8 lg:flex-row">
-          <Sidebar />
-          {children}
-        </main>
-        <Footer />
-      </section>
-    </PostListProvider>
+    <section className="relative mx-auto max-w-[var(--page-width)] px-4 pt-16 pb-8 sm:px-8">
+      <Header />
+      {children}
+    </section>
   );
 };
 

app/blog/page.tsx app/blog/(main)/page.tsxapp/blog/page.tsx renamed to app/blog/(main)/page.tsx

@@ -1,7 +1,7 @@
 import { Metadata } from "next";
 import Script from "next/script";
+import getAllPosts from "@/entities/post/api/getAllPosts";
 import getPostBySlug from "@/entities/post/lib/getPostBySlug";
-
 import PostDetail from "@/widgets/post/ui/PostDetail";
 
 type PageProps = {
@@ -22,13 +22,16 @@ const PostDetailPage = async ({ params }: PageProps) => {
     datePublished: post.date,
     author: {
       "@type": "Person",
-      name: "삔아",
+      name: "삔야",
       url: "https://bbinya1224.github.io/blog/about-me",
     },
     publisher: {
       "@type": "Person",
-      name: "삔아",
+      name: "삔야",
     },
+    image: post.thumbnail
+      ? `https://bbinya1224.github.io${post.thumbnail}`
+      : undefined,
     mainEntityOfPage: {
       "@type": "WebPage",
       "@id": `https://bbinya1224.github.io/blog/posts/${slug}`,
@@ -42,7 +45,7 @@ const PostDetailPage = async ({ params }: PageProps) => {
         type="application/ld+json"
         dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
       />
-      <section className="card-base mx-auto h-full w-full max-w-4xl shadow-xl">
+      <section className="mx-auto h-full w-full max-w-4xl">
         <PostDetail post={post} />
       </section>
     </>
@@ -51,8 +54,6 @@ const PostDetailPage = async ({ params }: PageProps) => {
 
 export default PostDetailPage;
 
-import getAllPosts from "@/entities/post/api/getAllPosts";
-
 export const generateStaticParams = () => {
   const posts = getAllPosts();
   return posts.map((post) => ({ slug: post.slug }));
@@ -77,16 +78,24 @@ export async function generateMetadata({
     title: post.title,
     description: post.description || post.title,
     keywords: post.tag || [],
-    authors: [{ name: "삔아" }],
+    authors: [{ name: "삔야" }],
     openGraph: {
       title: post.title,
       description: post.description || post.title,
       url,
-      siteName: "삔아's Blog",
+      siteName: "삔야's Blog",
       type: "article",
       publishedTime: post.date,
-      authors: ["삔아"],
+      authors: ["삔야"],
       locale: "ko_KR",
+      images: post.thumbnail
+        ? [
+            {
+              url: post.thumbnail,
+              alt: post.title,
+            },
+          ]
+        : undefined,
     },
     alternates: {
       canonical: url,

app/blog/layout.tsx

@@ -4,6 +4,7 @@ import { Provider as JotaiProvider } from "jotai";
 import type { Metadata } from "next";
 import { ThemeProvider } from "next-themes";
 import type { ReactNode } from "react";
+import NextTopLoader from "nextjs-toploader";
 
 const RootLayout = ({ children }: { children: ReactNode }) => {
   return (
@@ -17,6 +18,7 @@ const RootLayout = ({ children }: { children: ReactNode }) => {
       </head>
 
       <body>
+        <NextTopLoader showSpinner={false} color="#fbbf24" />
         <JotaiProvider>
           <ThemeProvider attribute="class" enableSystem>
             {children}
@@ -30,15 +32,15 @@ const RootLayout = ({ children }: { children: ReactNode }) => {
 export const metadata: Metadata = {
   metadataBase: new URL("https://bbinya1224.github.io"),
   title: {
-    default: "삔아's Blog",
-    template: "%s | 삔아's Blog",
+    default: "삔야's Blog",
+    template: "%s | 삔야's Blog",
   },
-  description: "프론트엔드 개발자 삔아 기술 블로그",
+  description: "프론트엔드 개발자 삔야 기술 블로그",
   openGraph: {
     type: "website",
     locale: "ko_KR",
     url: "https://bbinya1224.github.io",
-    siteName: "삔아's Blog",
+    siteName: "삔야's Blog",
   },
   robots: {
     index: true,

app/blog/posts/[slug]/page.tsx

@@ -36,9 +36,11 @@
     "next-mdx-remote": "^5.0.0",
     "next-sitemap": "^4.2.3",
     "next-themes": "^0.4.6",
+    "nextjs-toploader": "^3.9.17",
     "npm": "^11.6.2",
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
+    "react-intersection-observer": "^10.0.0",
     "react-loading-skeleton": "^3.5.0",
     "rehype-pretty-code": "^0.14.1",
     "remark": "^15.0.1",