diff --git a/.eslintrc.json b/.eslintrc.json
new file mode 100644
index 0000000..6db3279
--- /dev/null
+++ b/.eslintrc.json
@@ -0,0 +1,68 @@
+{
+  "plugins": ["import"],
+  "extends": ["next/core-web-vitals", "plugin:import/recommended"],
+  "rules": {
+    "no-unused-vars": [
+      "warn",
+      {
+        "argsIgnorePattern": "^_",
+        "varsIgnorePattern": "^_"
+      }
+    ],
+    "import/named": 0,
+    "import/order": [
+      "error",
+      {
+        "newlines-between": "always",
+        "groups": [
+          "type",
+          "builtin",
+          "external",
+          "internal",
+          "parent",
+          "sibling",
+          "index",
+          "unknown"
+        ],
+        "pathGroups": [
+          {
+            "pattern": "next*",
+            "group": "external",
+            "position": "before"
+          },
+          {
+            "pattern": "react*",
+            "group": "external",
+            "position": "before"
+          },
+          {
+            "pattern": "src/@hooks/**",
+            "group": "internal",
+            "position": "after"
+          },
+          {
+            "pattern": "src/@Component/**",
+            "group": "internal",
+            "position": "after"
+          },
+          {
+            "pattern": "src/@utils/**",
+            "group": "internal",
+            "position": "after"
+          }
+        ],
+        "pathGroupsExcludedImportTypes": [
+          "next*",
+          "react*",
+          "src/@hooks/**",
+          "src/@Component/**",
+          "src/@utils/**"
+        ],
+        "alphabetize": {
+          "order": "asc",
+          "caseInsensitive": true
+        }
+      }
+    ]
+  }
+}
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..b848d1d
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,67 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# lighthouseci
+.lighthouseci
+/lhci_reports/
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+.env
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+.lighthouserc.js
+.commitlint.config.js
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# Sentry Auth Token
+.sentryclirc
+.sentry.client.config.ts
+.sentry.edge.config.ts
+.sentry.server.config.ts
+
+.tsconfig.json
+
+public
+
+posts
+.next
+.vercel
+.lighthouseci
+.husky
+
+lhci_reports
+.vscode
+# package.json
+package-lock.json
+
+public
diff --git a/lib/api.ts b/lib/api.ts
new file mode 100644
index 0000000..2579c96
--- /dev/null
+++ b/lib/api.ts
@@ -0,0 +1,108 @@
+import fs from 'fs';
+import { join, basename } from 'path';
+
+import matter from 'gray-matter';
+
+const PostDirectory = join(process.cwd(), 'posts');
+const ImageDirectory = join(process.cwd(), 'public/images');
+
+export function getPostSlugs() {
+  return fs.readdirSync(PostDirectory);
+}
+
+export function getPostBySlug(slug: string, fields: string[] = []) {
+  const realSlug = decodeURIComponent(slug.replace(/\.md/, ''));
+  const fullPath = join(PostDirectory, `${realSlug}.md`);
+  const fileContent = fs.readFileSync(fullPath, 'utf-8');
+  const { data, content } = matter(fileContent);
+
+  type Item = {
+    [key: string]: string;
+  };
+  const items: Item = {};
+
+  fields.forEach((field) => {
+    if (field === 'slug') {
+      items[field] = realSlug;
+    }
+    if (field === 'content') {
+      items[field] = content;
+    }
+    if (typeof data[field] !== 'undefined') {
+      items[field] = data[field];
+    }
+    if (field === 'image') {
+      const imagePath = join(ImageDirectory, data[field]);
+    }
+  });
+
+  return items;
+}
+
+export function getAllPosts(fields: string[] = []) {
+  const slugs = getPostSlugs();
+  const posts = slugs
+    .map((slug) => getPostBySlug(slug, fields))
+    // sort posts by date in descending order
+    .sort((post1, post2) => (post1.date > post2.date ? -1 : 1));
+
+  return posts;
+}
+
+export function getInitPosts(fields: string[] = []) {
+  const slugs = getPostSlugs();
+  const posts = slugs
+    .map((slug) => getPostBySlug(slug, fields))
+    .sort((post1, post2) => (post1.date > post2.date ? -1 : 1))
+    .slice(0, 5);
+
+  return posts;
+}
+
+export function getAllPostRequest(fields: string[] = []) {
+  const slugs = getPostSlugs();
+  const posts = slugs
+    .map((slug) => getPostBySlug(slug, fields))
+    // sort posts by date in descending order
+    .sort((post1, post2) => (post1.date > post2.date ? -1 : 1));
+
+  return {};
+}
+
+//리팩토링 필요한 부분
+export function getAllCategories() {
+  const allPosts = getAllPosts(['category']);
+
+  const allCategory = new Map<string, number>();
+
+  allPosts.map((post) => {
+    const getCategory = allCategory.get(post.category);
+    if (getCategory) {
+      allCategory.set(post.category, getCategory + 1);
+      return;
+    }
+
+    allCategory.set(post.category, 1);
+  });
+
+  return Array.from(allCategory).map(([category, categoryCount]) => {
+    return {
+      category: category,
+      categoryCount: categoryCount + '',
+    };
+  });
+}
+
+export function getCategoryFilteredPosts(
+  fields: string[] = [],
+  category: string
+) {
+  const slugs = getPostSlugs();
+  const posts = slugs
+    .map((slug) => getPostBySlug(slug, fields))
+    // sort posts by date in descending order
+    .sort((post1, post2) => (post1.date > post2.date ? -1 : 1))
+    .filter((post) => post.category === category);
+
+  return posts;
+}
diff --git a/lib/makeToc.tsx b/lib/makeToc.tsx
new file mode 100644
index 0000000..7ac8c43
--- /dev/null
+++ b/lib/makeToc.tsx
@@ -0,0 +1,3 @@
+export default function makeToc({ children }: { children: string }) {
+  return children.match(/(?:##|###)(.*)/g);
+}
diff --git a/lib/markdowntoHTML.ts b/lib/markdowntoHTML.ts
new file mode 100644
index 0000000..6730420
--- /dev/null
+++ b/lib/markdowntoHTML.ts
@@ -0,0 +1,13 @@
+import { remark } from 'remark';
+import html from 'remark-html';
+
+export default async function markdownToHtml(markdown: string) {
+  const result = await remark()
+    .use(html, {
+      sanitize: false,
+    })
+
+    .process(markdown);
+
+  return result.toString();
+}
diff --git a/lib/replaceStr.ts b/lib/replaceStr.ts
new file mode 100644
index 0000000..839d748
--- /dev/null
+++ b/lib/replaceStr.ts
@@ -0,0 +1,13 @@
+export default function replaceStrWithBlank([input, target]: [
+  string,
+  string | string[]
+]) {
+  if (target instanceof Array) {
+    const result = target.map((eachTarget) => {
+      return input.replaceAll(eachTarget, '');
+    });
+    return result[0].trim();
+  }
+
+  return target.replaceAll(input, '');
+}
diff --git a/next.config.js b/next.config.js
new file mode 100644
index 0000000..25e8879
--- /dev/null
+++ b/next.config.js
@@ -0,0 +1,29 @@
+const withBundleAnalyzer = require('@next/bundle-analyzer')({
+  enabled: process.env.ANALYZE === 'true',
+});
+
+const nextConfig = {
+  experimental: {
+    optimizePackageImports: ['styled-components,sentry,lodash,react-markdown'],
+  },
+  reactStrictMode: true,
+  compiler: {
+    styledComponents: true,
+  },
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: '**',
+      },
+    ],
+    formats: ['image/avif', 'image/webp'],
+  },
+};
+
+const bundleAnalyzerConfig = withBundleAnalyzer({
+  ...nextConfig,
+  compress: true,
+});
+
+module.exports = bundleAnalyzerConfig;
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..3d18104
--- /dev/null
+++ b/package.json
@@ -0,0 +1,73 @@
+{
+  "name": "hj-devlog",
+  "version": "0.1.0",
+  "private": true,
+  "homepage": "https://github.com/khj0426/HJ_Devlog",
+  "scripts": {
+    "lhci": "next build && lhci autorun",
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "lint:fix": "next lint --fix",
+    "deploy": "next build && npx gh-pages -d out",
+    "analyze": "cross-env ANALYZE=true next build",
+    "analyze:server": "cross-env BUNDLE_ANALYZE=server next build",
+    "analyze:browser": "cross-env BUNDLE_ANALYZE=browser next build"
+  },
+  "dependencies": {
+    "@giscus/react": "^2.2.8",
+    "@next/bundle-analyzer": "^13.4.7",
+    "@sentry/nextjs": "^7.64.0",
+    "@tanstack/react-query": "^4.33.0",
+    "@types/node": "20.2.5",
+    "@types/react": "18.2.8",
+    "@types/react-dom": "18.2.4",
+    "@types/react-syntax-highlighter": "^15.5.7",
+    "@types/recoil": "^0.0.9",
+    "@types/styled-components": "^5.1.26",
+    "@types/uuid": "^9.0.1",
+    "autoprefixer": "10.4.14",
+    "axios": "^1.6.2",
+    "cross-env": "^7.0.3",
+    "date-fns": "^2.30.0",
+    "eslint": "8.42.0",
+    "eslint-config-next": "13.4.4",
+    "firebase": "^10.7.1",
+    "github-label-sync": "^2.3.1",
+    "gray-matter": "^4.0.3",
+    "js-cookie": "^3.0.5",
+    "next": "^13.5.0",
+    "notion-client": "^6.16.0",
+    "postcss": "8.4.24",
+    "prism-react-renderer": "^2.0.5",
+    "react": "18.2.0",
+    "react-cookie": "^6.1.1",
+    "react-dom": "18.2.0",
+    "react-markdown": "^8.0.7",
+    "react-notion-x": "^6.16.0",
+    "react-secure-storage": "^1.3.0",
+    "react-syntax-highlighter": "^15.5.0",
+    "recoil": "^0.7.7",
+    "rehype-raw": "^6.1.1",
+    "remark": "^14.0.3",
+    "remark-html": "^15.0.2",
+    "styled-components": "^6.0.0-rc.3",
+    "tailwindcss": "3.3.2",
+    "typescript": "5.1.3",
+    "uuid": "^9.0.0"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^17.7.2",
+    "@commitlint/config-conventional": "^17.7.0",
+    "@lhci/cli": "^0.12.0",
+    "@sentry/utils": "^7.64.0",
+    "@types/glob": "^8.1.0",
+    "@typescript-eslint/parser": "^6.7.5",
+    "eslint-import-resolver-typescript": "^3.6.1",
+    "eslint-plugin-import": "^2.28.1",
+    "gh-pages": "^5.0.0",
+    "glob": "^10.2.7",
+    "husky": "^8.0.3"
+  }
+}
diff --git a/src/@types/AboutProps.ts b/src/@types/AboutProps.ts
new file mode 100644
index 0000000..9ae002c
--- /dev/null
+++ b/src/@types/AboutProps.ts
@@ -0,0 +1,6 @@
+type AboutProps = {
+  title: string;
+  imgurl: string;
+  content: string | string[];
+};
+export default AboutProps;
diff --git a/src/@types/ButtonType.ts b/src/@types/ButtonType.ts
new file mode 100644
index 0000000..a3dc9a7
--- /dev/null
+++ b/src/@types/ButtonType.ts
@@ -0,0 +1,10 @@
+import { CSSProperties } from 'react';
+
+export type ButtonProps = {
+  style?: CSSProperties;
+  disabled?: boolean;
+  variant?: 'default' | 'outlined';
+  label?: string;
+  icon?: React.ReactNode;
+  onClick?: () => void;
+};
diff --git a/src/@types/CategoryType.ts b/src/@types/CategoryType.ts
new file mode 100644
index 0000000..18cac1d
--- /dev/null
+++ b/src/@types/CategoryType.ts
@@ -0,0 +1,4 @@
+export type CategoryItem = {
+  category: string;
+  categoryCount: string;
+};
diff --git a/src/@types/GuestBookType.ts b/src/@types/GuestBookType.ts
new file mode 100644
index 0000000..9be0aeb
--- /dev/null
+++ b/src/@types/GuestBookType.ts
@@ -0,0 +1,8 @@
+export type GuestBook = {
+  guestbook: {
+    [key: string]: {
+      comment: string;
+      commentTime: string;
+    };
+  };
+};
diff --git a/src/@types/PostType.ts b/src/@types/PostType.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/@types/ThemeType.ts b/src/@types/ThemeType.ts
new file mode 100644
index 0000000..d2c2a51
--- /dev/null
+++ b/src/@types/ThemeType.ts
@@ -0,0 +1 @@
+export type ThemeType = 'light' | 'dark';
diff --git a/src/Component/About/Content.tsx b/src/Component/About/Content.tsx
new file mode 100644
index 0000000..8f05252
--- /dev/null
+++ b/src/Component/About/Content.tsx
@@ -0,0 +1,22 @@
+import styled from 'styled-components';
+import { v4 as uuidv4 } from 'uuid';
+
+const StyledContent = styled.section`
+  display: flex;
+  min-width: 300px;
+  min-height: 400px;
+  max-width: 400px;
+  max-height: 500px;
+  display: flex;
+  font-size: 18px;
+  flex-direction: column;
+`;
+export default function Content({ content }: { content: string | string[] }) {
+  return (
+    <StyledContent>
+      {Array.from(content).map((eachContent) => (
+        <p key={uuidv4()}>{eachContent}</p>
+      ))}
+    </StyledContent>
+  );
+}
diff --git a/src/Component/About/ProfileImgWrapper.tsx b/src/Component/About/ProfileImgWrapper.tsx
new file mode 100644
index 0000000..405c361
--- /dev/null
+++ b/src/Component/About/ProfileImgWrapper.tsx
@@ -0,0 +1,18 @@
+'use client';
+
+import Image from 'next/image';
+export default function ProfileImageWrapper({ imgurl }: { imgurl: string }) {
+  return (
+    <div>
+      <Image
+        placeholder="blur"
+        src={imgurl}
+        alt="About 페이지 프로필 이미지"
+        width={300}
+        height={300}
+        blurDataURL="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
+        priority
+      ></Image>
+    </div>
+  );
+}
diff --git a/src/Component/About/Title.tsx b/src/Component/About/Title.tsx
new file mode 100644
index 0000000..f0d00e8
--- /dev/null
+++ b/src/Component/About/Title.tsx
@@ -0,0 +1,20 @@
+'use client';
+
+import styled from 'styled-components';
+
+const StyledTitle = styled.h3`
+  font-weight: 700;
+  display: flex;
+  flex-wrap: wrap;
+
+  @media ${({ theme }) => theme.device.tablet} {
+    font-size: 24px;
+  }
+  @media ${({ theme }) => theme.device.mobile} {
+    font-size: 20px;
+  }
+`;
+
+export default function Title({ title }: { title: string }) {
+  return <StyledTitle>{title}</StyledTitle>;
+}
diff --git a/src/Component/Blog/CodeBlock.tsx b/src/Component/Blog/CodeBlock.tsx
new file mode 100644
index 0000000..6c47113
--- /dev/null
+++ b/src/Component/Blog/CodeBlock.tsx
@@ -0,0 +1,35 @@
+'use client';
+import dynamic from 'next/dynamic';
+const PrismLight = dynamic(
+  () => import('react-syntax-highlighter/dist/cjs/prism-light')
+);
+import { materialDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
+
+export default function CodeBlock({
+  children,
+}: {
+  children: string | string[];
+}) {
+  return (
+    <PrismLight
+      language="javascript"
+      style={materialDark}
+      customStyle={{
+        fontFamily: '__Do_Hyeon_7b3cf7',
+        maxWidth: '100vw',
+        wordBreak: 'break-all',
+        fontWeight:'1rem',
+        overflowWrap: 'break-word', // 추가: 화면 넘어갈 때 단어 단위로 줄바꿈 처리
+      }}
+      codeTagProps={{
+        style: {
+          fontFamily: 'inherit',
+          wordBreak: 'break-all',
+          overflowWrap: 'break-word',
+        },
+      }}
+    >
+      {children}
+    </PrismLight>
+  );
+}
diff --git a/src/Component/Blog/Exterct.tsx b/src/Component/Blog/Exterct.tsx
new file mode 100644
index 0000000..d7e1b5a
--- /dev/null
+++ b/src/Component/Blog/Exterct.tsx
@@ -0,0 +1,20 @@
+'use client';
+import styled from 'styled-components';
+
+const StyledPostExterct = styled.h5`
+  color: #808080;
+  @media ${({ theme }) => theme.device.laptop} {
+    font-size: 14px;
+  }
+
+  @media ${({ theme }) => theme.device.tablet} {
+    font-size: 13px;
+  }
+  @media ${({ theme }) => theme.device.mobile} {
+    font-size: 11px;
+  }
+`;
+
+export default function PostExterct({ exterct }: { exterct: string }) {
+  return <StyledPostExterct>{exterct}</StyledPostExterct>;
+}
diff --git a/src/Component/Blog/LayOut.tsx b/src/Component/Blog/LayOut.tsx
new file mode 100644
index 0000000..2190666
--- /dev/null
+++ b/src/Component/Blog/LayOut.tsx
@@ -0,0 +1,42 @@
+'use client';
+import { useEffect } from 'react';
+
+import styled, { css } from 'styled-components';
+
+const PostLayOutPC = css`
+  min-width: 60%;
+  max-width: 60%;
+`;
+const PostLayOutMobile = css`
+  min-width: 80%;
+  max-width: 80%;
+`;
+
+const StyledPostLayOut = styled.article`
+  ${PostLayOutPC}
+  display: flex;
+  margin: 20px auto;
+  flex-direction: column;
+  margin-bottom: 50px;
+  font-size: 20px;
+
+  @media ${({ theme }) => theme.device.laptop} {
+    ${PostLayOutPC}
+  }
+
+  @media ${({ theme }) => theme.device.tablet} {
+    ${PostLayOutPC}
+  }
+
+  @media ${({ theme }) => theme.device.mobile} {
+    ${PostLayOutMobile}
+  }
+`;
+
+export default function BlogLayOut({
+  children,
+}: {
+  children: React.ReactNode[];
+}) {
+  return <StyledPostLayOut>{children}</StyledPostLayOut>;
+}
diff --git a/src/Component/Blog/PostSearchModal.tsx b/src/Component/Blog/PostSearchModal.tsx
new file mode 100644
index 0000000..e4bae32
--- /dev/null
+++ b/src/Component/Blog/PostSearchModal.tsx
@@ -0,0 +1,94 @@
+import { ChangeEvent, useState } from 'react';
+
+import Link from 'next/link';
+import styled from 'styled-components';
+
+import useSearchPost from '@/hooks/useSearchPost';
+
+const StyledPostSearchModalWrapper = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  backdrop-filter: blur(1px);
+  width: 100%;
+  height: 100%;
+`;
+
+const StyledPostSearchInput = styled.input`
+  padding: 14px 24px;
+  width: 100%;
+  height: 100px;
+  box-sizing: border-box;
+  outline: none;
+  border: none;
+  background-color: inherit;
+  color: rgb(255, 255, 255);
+  font-family: inherit;
+`;
+
+const StyledPostSearchModal = styled.div`
+  width: 350px;
+  min-height: 450px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: auto;
+  position: absolute;
+  background-color: rgb(38, 41, 43);
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) scale(1);
+  color: rgb(236, 237, 238);
+  box-shadow: 0 15px 30px 0 rgba(#000, 0.25);
+  border-radius: 15px;
+  overflow: auto;
+`;
+
+export default function PostSearchModal({
+  onCloseModal,
+}: {
+  onCloseModal: () => void;
+}) {
+  const [querySearch, setQuerySearch] = useState<string | null>(null);
+  const { posts } = useSearchPost(querySearch as string);
+
+  const handleChangSearchQuery = (e: ChangeEvent<HTMLInputElement>) => {
+    if (e.target.value.length === 0) {
+      return;
+    }
+
+    setQuerySearch(e.target.value);
+  };
+
+  return (
+    <StyledPostSearchModalWrapper onClick={() => onCloseModal()}>
+      <StyledPostSearchModal>
+        <p
+          onClick={() => onCloseModal()}
+          style={{
+            cursor: 'pointer',
+          }}
+        >
+          X
+        </p>
+        <StyledPostSearchInput
+          autoFocus
+          placeholder="검색할 내용을 입력해주세요."
+          onChange={handleChangSearchQuery}
+        />
+        {posts.map((post) => (
+          <Link
+            key={post.title}
+            href={`/blog/${post.slug}`}
+            onClick={() => onCloseModal()}
+            style={{
+              color: 'inherit',
+            }}
+          >
+            {post.title}
+          </Link>
+        ))}
+      </StyledPostSearchModal>
+    </StyledPostSearchModalWrapper>
+  );
+}
diff --git a/src/Component/Blog/SearchPost.tsx b/src/Component/Blog/SearchPost.tsx
new file mode 100644
index 0000000..b2837d9
--- /dev/null
+++ b/src/Component/Blog/SearchPost.tsx
@@ -0,0 +1,35 @@
+import Image from 'next/image';
+import { useRecoilState } from 'recoil';
+
+import { postSearchModalState } from '@/app/globalAtom';
+
+import SearchImage from '../../.././public/images/search.webp';
+
+import PostSearchModal from './PostSearchModal';
+
+export default function SearchPostButton() {
+  const [modalState, setPostSearchModal] = useRecoilState(postSearchModalState);
+
+  return (
+    <>
+      <Image
+        alt="블로그 글 검색 이미지"
+        width={32}
+        placeholder="blur"
+        height={32}
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          cursor: 'pointer',
+        }}
+        src={SearchImage}
+        onClick={() => {
+          setPostSearchModal(!modalState);
+        }}
+      ></Image>
+      {modalState && (
+        <PostSearchModal onCloseModal={() => setPostSearchModal(!modalState)} />
+      )}
+    </>
+  );
+}
diff --git a/src/Component/CategoryList/CategoryList.tsx b/src/Component/CategoryList/CategoryList.tsx
new file mode 100644
index 0000000..56f1a6d
--- /dev/null
+++ b/src/Component/CategoryList/CategoryList.tsx
@@ -0,0 +1,43 @@
+'use client';
+
+import type { CategoryItem } from '@/@types/CategoryType';
+
+import Link from 'next/link';
+import styled from 'styled-components';
+
+const CategoryListStyle = styled.span`
+  color: ${({ theme }) => theme.text};
+  font-size: 20px;
+  cursor: pointer;
+  &:hover {
+    text-decoration: underline ${({ theme }) => theme.text};
+  }
+`;
+
+const CategoryListWrapper = styled.div`
+  gap: 15px;
+  display: flex;
+  width: 100%;
+  flex-wrap: wrap;
+  flex-direction: row;
+  justify-content: center;
+`;
+export default function CategoryList({
+  category,
+}: {
+  category: CategoryItem[];
+}) {
+  return (
+    <CategoryListWrapper>
+      {category.map(({ category, categoryCount }) => {
+        return (
+          <CategoryListStyle key={category}>
+            <Link href={`/category/${category}`}>
+              # {category + categoryCount}
+            </Link>
+          </CategoryListStyle>
+        );
+      })}
+    </CategoryListWrapper>
+  );
+}
diff --git a/src/Component/Common/Avatar.tsx b/src/Component/Common/Avatar.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/Component/Common/Button.tsx b/src/Component/Common/Button.tsx
new file mode 100644
index 0000000..afe9a2f
--- /dev/null
+++ b/src/Component/Common/Button.tsx
@@ -0,0 +1,43 @@
+import type { ButtonProps } from '@/@types/ButtonType';
+
+import styled from 'styled-components';
+
+const StyledBaseButton = styled.button<ButtonProps>`
+  background-color: ${({ theme }) => theme.backgroundPost};
+  font-weight: bold;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  &:hover {
+    background-color: rgba(66, 153, 225, 0.7);
+  }
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+  color: ${({ theme }) => theme.text};
+  transition: icon 0.3s ease-in-out;
+  border: ${(props) =>
+    props.variant === 'outlined' ? '1px rgba(255,255,255,1)' : 'none'};
+`;
+
+export default function Button({
+  variant,
+  style,
+  disabled,
+  icon,
+  onClick,
+  label,
+}: ButtonProps) {
+  return (
+    <StyledBaseButton
+      style={style}
+      onClick={onClick}
+      disabled={disabled}
+      aria-label={label}
+      variant={variant}
+    >
+      {icon}
+      {label}
+    </StyledBaseButton>
+  );
+}
diff --git a/src/Component/Common/Footer.tsx b/src/Component/Common/Footer.tsx
new file mode 100644
index 0000000..6e55496
--- /dev/null
+++ b/src/Component/Common/Footer.tsx
@@ -0,0 +1,51 @@
+'use client';
+
+import Image from 'next/image';
+import Link from 'next/link';
+import styled from 'styled-components';
+
+import InstagramImage from '../../../public/images/Instagramgram.webp';
+
+const StyledFooter = styled.footer`
+  height: 30px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 60px auto;
+`;
+
+const StyledLinkIconArea = styled.div`
+  display: flex;
+  justify-content: center;
+  gap: 10px;
+  margin: 0 auto;
+`;
+
+export default function Footer() {
+  return (
+    <StyledFooter>
+      <StyledLinkIconArea>
+        <Link href="https://github.com/khj0426" target="_blank">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+          >
+            <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+          </svg>
+        </Link>
+        <Link href="https://www.instagram.com/gimhyojung30/" target="_blank">
+          <Image
+            src={InstagramImage}
+            alt="인스타그램 주소"
+            width={24}
+            height={24}
+          />
+        </Link>
+      </StyledLinkIconArea>
+      <div>HJ DevLog</div>
+      <div>©{new Date().getFullYear()} 효중킴의 블로그, Powered By Next.js</div>
+    </StyledFooter>
+  );
+}
diff --git a/src/Component/Common/Hydrate.tsx b/src/Component/Common/Hydrate.tsx
new file mode 100644
index 0000000..abd64a0
--- /dev/null
+++ b/src/Component/Common/Hydrate.tsx
@@ -0,0 +1,10 @@
+'use client';
+import React from 'react';
+
+import { Hydrate as HydrationBoundary } from '@tanstack/react-query';
+
+function Hydrate(props: any) {
+  return <HydrationBoundary {...props} />;
+}
+
+export default Hydrate;
diff --git a/src/Component/Common/Navbar.tsx b/src/Component/Common/Navbar.tsx
new file mode 100644
index 0000000..07b0808
--- /dev/null
+++ b/src/Component/Common/Navbar.tsx
@@ -0,0 +1,61 @@
+'use client';
+import Link from 'next/link';
+import styled, { css } from 'styled-components';
+
+import SearchPostButton from '../Blog/SearchPost';
+import ToggleDarkModeButton from '../DarkMode/ToggoeButton';
+
+const StyledNavBarLayout = styled.nav`
+  position: sticky;
+  top: 0;
+  left: 0;
+  width: 100%;
+  display: flex;
+  font-size: 20px;
+  color: ${({ theme }) => theme.text};
+  gap: 15px;
+  margin: 0 auto;
+  background-color: ${({ theme }) => theme.body};
+  align-items: center;
+  justify-content: space-around;
+  z-index: 1;
+`;
+
+const StyledNavBarTitle = styled(Link)`
+  font-weight: 600;
+  text-decoration: none;
+  color: inherit;
+  ${({ href }) =>
+    href === '/notion/resume' &&
+    css`
+      @media (max-width: 1024px) {
+        opacity: 0;
+      }
+    `}
+`;
+
+export default function Navbar() {
+  return (
+    <StyledNavBarLayout>
+      <div
+        style={{
+          display: 'flex',
+          gap: '10px',
+        }}
+      >
+        <StyledNavBarTitle href="/">Blog</StyledNavBarTitle>
+        <StyledNavBarTitle href="/about">About</StyledNavBarTitle>
+        <StyledNavBarTitle href="/notion/resume">Resume</StyledNavBarTitle>
+      </div>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+        }}
+      >
+        <SearchPostButton />
+        <ToggleDarkModeButton />
+      </div>
+    </StyledNavBarLayout>
+  );
+}
diff --git a/src/Component/Common/PostLayout.tsx b/src/Component/Common/PostLayout.tsx
new file mode 100644
index 0000000..559ef01
--- /dev/null
+++ b/src/Component/Common/PostLayout.tsx
@@ -0,0 +1,32 @@
+'use client';
+import styled from 'styled-components';
+const StyledPostLayOut = styled.section`
+  display: flex;
+  justify-content: space-between;
+  padding-left: 5px;
+  border-radius: 25px;
+  margin: 25px auto;
+  background: ${({ theme }) => theme.backgroundPost};
+  max-width: 800px;
+  width: 60%;
+
+  @media ${({ theme }) => theme.device.laptop} {
+    width: 80%;
+  }
+
+  @media ${({ theme }) => theme.device.tablet} {
+    width: 90%;
+  }
+
+  @media ${({ theme }) => theme.device.mobile} {
+    width: 90%;
+  }
+`;
+
+export default function PostLayout({
+  children,
+}: {
+  children: React.ReactNode | React.ReactNode[];
+}) {
+  return <StyledPostLayOut>{children}</StyledPostLayOut>;
+}
diff --git a/src/Component/DarkMode/ToggoeButton.tsx b/src/Component/DarkMode/ToggoeButton.tsx
new file mode 100644
index 0000000..99b2357
--- /dev/null
+++ b/src/Component/DarkMode/ToggoeButton.tsx
@@ -0,0 +1,34 @@
+import Image from 'next/image';
+import { useRecoilState } from 'recoil';
+
+import { themeState } from '@/app/globalAtom';
+
+import darkModeImage from '../../../public/images/darkmode.webp';
+import lightModeImage from '../../../public/images/lightmode.webp';
+
+export default function ToggleDarkModeButton() {
+  const [currentTheme, setCurrentTheme] = useRecoilState(themeState);
+  const modeImageSrc =
+    currentTheme === 'light' ? darkModeImage : lightModeImage;
+
+  const handleClickToggleImage = () => {
+    if (currentTheme === 'light') {
+      setCurrentTheme('dark');
+      return;
+    }
+    setCurrentTheme('light');
+  };
+  return (
+    <Image
+      style={{
+        cursor: 'pointer',
+      }}
+      src={modeImageSrc}
+      alt="모드를 바꾸는 이미지"
+      width={50}
+      height={50}
+      priority
+      onClick={handleClickToggleImage}
+    />
+  );
+}
diff --git a/src/Component/GA/GA.tsx b/src/Component/GA/GA.tsx
new file mode 100644
index 0000000..f9b261d
--- /dev/null
+++ b/src/Component/GA/GA.tsx
@@ -0,0 +1,37 @@
+'use client';
+import Script from 'next/script';
+
+const GoogleAnalytics = ({
+  GA_MEASUREMENT_ID,
+}: {
+  GA_MEASUREMENT_ID: string;
+}) => {
+  return (
+    <>
+      <Script
+        strategy="afterInteractive"
+        src={`https://www.googletagmanager.com/gtag/js?id=${GA_MEASUREMENT_ID}`}
+      />
+      <Script
+        id="google-analytics"
+        strategy="afterInteractive"
+        dangerouslySetInnerHTML={{
+          __html: `
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+
+        gtag('consent', 'default', {
+            'analytics_storage': 'denied'
+        });
+        
+        gtag('config', '${GA_MEASUREMENT_ID}', {
+            page_path: window.location.pathname,
+        });
+        `,
+        }}
+      />
+    </>
+  );
+};
+export default GoogleAnalytics;
diff --git a/src/Component/Giscus/Gitcus.tsx b/src/Component/Giscus/Gitcus.tsx
new file mode 100644
index 0000000..609780d
--- /dev/null
+++ b/src/Component/Giscus/Gitcus.tsx
@@ -0,0 +1,22 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+const DynamicGiscus = dynamic(() => import('@giscus/react'));
+
+export default function Comments() {
+  return (
+    <DynamicGiscus
+      repo="khj0426/HJ_Devlog"
+      repoId="R_kgDOJsCLkw"
+      mapping="pathname"
+      lang="ko"
+      category="General"
+      categoryId="DIC_kwDOJsCLk84CXaTn"
+      strict="0"
+      reactionsEnabled="1"
+      emitMetadata="0"
+      inputPosition="bottom"
+      theme="dark"
+    />
+  );
+}
diff --git a/src/Component/GuestBook/GuestBook.tsx b/src/Component/GuestBook/GuestBook.tsx
new file mode 100644
index 0000000..c1935b6
--- /dev/null
+++ b/src/Component/GuestBook/GuestBook.tsx
@@ -0,0 +1,61 @@
+'use client';
+
+import { useQuery } from '@tanstack/react-query';
+import styled from 'styled-components';
+import { v4 as uuidv4 } from 'uuid';
+
+import { Input, InputBox } from '@/Component/Input';
+import usePostGuestBook from '@/hooks/mutations/useGuestBookMutation';
+import useInput from '@/hooks/useInput';
+import { getGuestBook } from '@/services/GuestBook';
+
+const GuestBookList = styled.section`
+  min-height: 700px;
+`;
+
+export default function GuestBook() {
+  const guestBookInput = useInput('', (e) => e.target.value.length <= 150);
+  const { data, refetch } = useQuery({
+    queryFn: getGuestBook,
+    queryKey: ['guestBook'],
+    refetchInterval: false,
+    retry: 0,
+    refetchOnMount: true,
+    enabled: false,
+  });
+
+  const { mutate } = usePostGuestBook();
+
+  const handleSubmitGuestBook = () => {
+    mutate(
+      {
+        comment: guestBookInput.value,
+      },
+      {
+        onSuccess: () => {
+          refetch();
+          guestBookInput.setValue('');
+        },
+      }
+    );
+  };
+
+  return (
+    <main>
+      <GuestBookList>
+        {data &&
+          data.guestbook &&
+          Array.from(Object.values(data.guestbook)).map((value) => (
+            <div key={uuidv4()}>{value.comment}</div>
+          ))}
+      </GuestBookList>
+
+      <InputBox width="300px">
+        <Input {...guestBookInput} />
+      </InputBox>
+      <button type="button" onClick={handleSubmitGuestBook}>
+        쓰기
+      </button>
+    </main>
+  );
+}
diff --git a/src/Component/GuestBook/HydratedGuestBook.tsx b/src/Component/GuestBook/HydratedGuestBook.tsx
new file mode 100644
index 0000000..e4a341d
--- /dev/null
+++ b/src/Component/GuestBook/HydratedGuestBook.tsx
@@ -0,0 +1,19 @@
+import { dehydrate } from '@tanstack/react-query';
+
+import Hydrate from '@/Component/Common/Hydrate';
+import GuestBook from '@/Component/GuestBook/GuestBook';
+import { getGuestBook } from '@/services/GuestBook';
+import getQueryClient from '@/utils/getQueryClient';
+
+export default async function HydratedGuestBook() {
+  const queryClient = getQueryClient();
+  await queryClient.prefetchQuery(['guestBook'], getGuestBook);
+  const dehydratedState = dehydrate(queryClient, {
+    shouldDehydrateQuery: () => true,
+  });
+  return (
+    <Hydrate state={dehydratedState}>
+      <GuestBook />
+    </Hydrate>
+  );
+}
diff --git a/src/Component/Input/Input.tsx b/src/Component/Input/Input.tsx
new file mode 100644
index 0000000..9000628
--- /dev/null
+++ b/src/Component/Input/Input.tsx
@@ -0,0 +1,17 @@
+import styled from 'styled-components';
+
+const Input = styled.input<{ textAlign?: string }>`
+  width: 100%;
+  height: 100%;
+
+  border: none;
+  background: none;
+
+  font-weight: 600;
+  font-size: 18px;
+
+  outline: none;
+  text-align: ${({ textAlign }) => textAlign ?? 'center'};
+`;
+
+export default Input;
diff --git a/src/Component/Input/InputBox.tsx b/src/Component/Input/InputBox.tsx
new file mode 100644
index 0000000..15f50ef
--- /dev/null
+++ b/src/Component/Input/InputBox.tsx
@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+
+const InputBox = styled.div<{
+  width?: string;
+  isError?: boolean;
+  color?: string;
+}>`
+  display: flex;
+  height: 45px;
+  width: ${({ width }) => width ?? '100%'};
+
+  padding: 12px;
+
+  box-sizing: border-box;
+  background: ${({ color }) => color ?? 'gray'};
+
+  border: 1px solid ${({ isError }) => (isError ? '#ec2f1b' : '#ecebf1')};
+  border-radius: 7px;
+`;
+
+export default InputBox;
diff --git a/src/Component/Input/index.tsx b/src/Component/Input/index.tsx
new file mode 100644
index 0000000..646da70
--- /dev/null
+++ b/src/Component/Input/index.tsx
@@ -0,0 +1,4 @@
+import Input from './Input';
+import InputBox from './InputBox';
+
+export { Input, InputBox };
diff --git a/src/Component/Notion/NotionresumeClient.tsx b/src/Component/Notion/NotionresumeClient.tsx
new file mode 100644
index 0000000..a2749f1
--- /dev/null
+++ b/src/Component/Notion/NotionresumeClient.tsx
@@ -0,0 +1,40 @@
+'use client';
+
+import 'react-notion-x/src/styles.css';
+
+import 'prismjs/themes/prism-tomorrow.css';
+import type { ReturnTypeofNotionRecord } from '@/app/(root)/(routes)/notion/resume/page';
+
+import { NotionRenderer } from 'react-notion-x';
+
+import { Collection } from 'react-notion-x/build/third-party/collection';
+import { Modal } from 'react-notion-x/build/third-party/modal';
+import { useRecoilState } from 'recoil';
+
+import { themeState } from '@/app/globalAtom';
+
+type PromiseType<T extends Promise<any>> = T extends Promise<infer U>
+  ? U
+  : never;
+
+export default function ResumeClient({
+  recordMap,
+}: {
+  recordMap: PromiseType<ReturnTypeofNotionRecord>;
+}) {
+  const [modeState] = useRecoilState(themeState);
+  return (
+    <div>
+      <NotionRenderer
+        darkMode={modeState === 'dark' ? true : false}
+        disableHeader
+        components={{
+          Collection,
+          Modal,
+        }}
+        recordMap={recordMap}
+        fullPage={true}
+      />
+    </div>
+  );
+}
diff --git a/src/Component/Post/PostItem.tsx b/src/Component/Post/PostItem.tsx
new file mode 100644
index 0000000..ea5d885
--- /dev/null
+++ b/src/Component/Post/PostItem.tsx
@@ -0,0 +1,41 @@
+'use client';
+
+import Image from 'next/image';
+import Link from 'next/link';
+import styled from 'styled-components';
+
+import Title from '@/Component/About/Title';
+import PostLayout from '@/Component/Common/PostLayout';
+
+const PostTitleDateArea = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+`;
+export default function PostItem({
+  post,
+}: {
+  post: { [key: string]: string };
+}) {
+  return (
+    <PostLayout key={post.title}>
+      <Link href={`/blog/${post.slug}`}>
+        <PostTitleDateArea>
+          <Title title={post.title} />
+          <p>{post.date}</p>
+        </PostTitleDateArea>
+        {post.content}
+      </Link>
+      <Image
+        src={post.image}
+        width={150}
+        height={150}
+        alt="블로그 대표 이미지"
+        style={{
+          objectFit: 'cover',
+        }}
+        priority
+      />
+    </PostLayout>
+  );
+}
diff --git a/src/Component/Post/PostList.tsx b/src/Component/Post/PostList.tsx
new file mode 100644
index 0000000..5560d99
--- /dev/null
+++ b/src/Component/Post/PostList.tsx
@@ -0,0 +1,24 @@
+'use client';
+
+import usePostQuery from '@/hooks/queries/usePostQuery';
+import useObserver from '@/hooks/useObserver';
+
+import PostItem from './PostItem';
+
+export default function PostServiceLayer() {
+  const { data, fetchNextPage, hasNextPage } = usePostQuery();
+  const { target } = useObserver({
+    threshold: 0.1,
+    hasNextPage,
+    fetchNextPage,
+  });
+
+  return (
+    <>
+      {data?.pages?.map((page) =>
+        page.posts.map((post) => <PostItem post={post} key={post.title} />)
+      )}
+      <div ref={target}></div>
+    </>
+  );
+}
diff --git a/src/Component/TOC/index.tsx b/src/Component/TOC/index.tsx
new file mode 100644
index 0000000..b8a39a2
--- /dev/null
+++ b/src/Component/TOC/index.tsx
@@ -0,0 +1,80 @@
+'use client';
+
+import { uuid4 } from '@sentry/utils';
+import styled from 'styled-components';
+
+import useToc from '@/hooks/useToc';
+
+import replaceStrWithBlank from '../../../lib/replaceStr';
+
+const StyledTOCList = styled.ul`
+  position: fixed;
+  max-width: 235px;
+  height: auto;
+  max-height: 75vh;
+  word-wrap: break-word;
+  text-align: justify;
+  width: 235px;
+  margin-top: 100px;
+  right: 0;
+  opacity: 1;
+  font-size: 15px;
+  overflow-y: scroll;
+  list-style-type: none;
+
+  @media ${({ theme }) => theme.device.laptop} {
+    opacity: 0;
+  }
+
+  @media ${({ theme }) => theme.device.tablet} {
+    opacity: 0;
+  }
+
+  @media ${({ theme }) => theme.device.mobile} {
+    opacity: 0;
+  }
+`;
+
+const StyledTOCLink = styled.a`
+  &:hover {
+    color: rgb(0, 131, 120);
+  }
+
+  &:active {
+    color: rgb(0, 131, 120);
+  }
+`;
+
+export default function TOC({ toc }: { toc: string[] }) {
+  const { id } = useToc();
+
+  const TOC = toc.map((eachToc) => {
+    const makeTOC = replaceStrWithBlank([eachToc, ['#', '##', '###', '####']]);
+
+    const handleClickTOC = (e: React.MouseEvent<HTMLElement>) => {
+      const activeElement = document.querySelector('.active');
+      if (activeElement) {
+        activeElement.classList.remove('active');
+      }
+      e.currentTarget.classList.add('active');
+    };
+    return (
+      <>
+        <li key={uuid4()}>
+          <div>
+            <StyledTOCLink
+              className={`${makeTOC} ${id === makeTOC && 'active'}`}
+              href={`#${makeTOC}`}
+              id={makeTOC}
+              onClick={handleClickTOC}
+            >
+              {makeTOC}
+            </StyledTOCLink>
+          </div>
+        </li>
+      </>
+    );
+  });
+
+  return <StyledTOCList>{TOC}</StyledTOCList>;
+}
diff --git a/src/app/(root)/(routes)/(home)/page.tsx b/src/app/(root)/(routes)/(home)/page.tsx
new file mode 100644
index 0000000..ea99ff4
--- /dev/null
+++ b/src/app/(root)/(routes)/(home)/page.tsx
@@ -0,0 +1,35 @@
+import CategoryList from '@/Component/CategoryList/CategoryList';
+import PostItem from '@/Component/Post/PostItem';
+import PostList from '@/Component/Post/PostList';
+
+import { getAllCategories, getInitPosts } from '../../../../../lib/api';
+
+export default function Home() {
+  const allCategory = getAllCategories();
+  const initPosts = getInitPosts([
+    'title',
+    'data',
+    'slug',
+    'category',
+    'excerpt',
+    'date',
+    'image',
+  ]);
+
+  return (
+    <>
+      <CategoryList category={allCategory}></CategoryList>
+      <main
+        style={{
+          minWidth: '60%',
+        }}
+      >
+        {initPosts.map((post) => (
+          <PostItem post={post} key={post.title} />
+        ))}
+
+        <PostList />
+      </main>
+    </>
+  );
+}
diff --git a/src/app/(root)/(routes)/about/page.tsx b/src/app/(root)/(routes)/about/page.tsx
new file mode 100644
index 0000000..c8fec99
--- /dev/null
+++ b/src/app/(root)/(routes)/about/page.tsx
@@ -0,0 +1,46 @@
+'use client';
+
+import type AboutProps from '@/@types/AboutProps';
+
+import styled from 'styled-components';
+
+import Content from '@/Component/About/Content';
+import ProfileImageWrapper from '@/Component/About/ProfileImgWrapper';
+import Title from '@/Component/About/Title';
+
+const AboutContent: AboutProps = {
+  title: '안녕하세요! 항상 팀에 기여하고 싶은 개발자 김효중입니다',
+  imgurl: '/images/Profile.jpg',
+  content: [
+    '새로운 기술이 왜 등장했고, 어떤 문제를 해결하는 지 공부하는 것에 즐거움을 느낍니다',
+    '몰입할 수 있는 환경에서 개발하는 것을 즐깁니다',
+    '기록하면서 공부할 때 가장 성취감을 느낍니다.항상 제가 배운 내용을 기록하고자 합니다.',
+    '항상 소속된 팀에서 작은 것들이라도 기여하는 사람이 되고 싶습니다',
+  ],
+};
+
+const StyledContentLayOut = styled.article`
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  gap: 25px;
+  flex-wrap: wrap;
+`;
+
+export default function About() {
+  return (
+    <main
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        maxWidth: '80%',
+      }}
+    >
+      <Title title={AboutContent.title} />
+      <StyledContentLayOut>
+        <ProfileImageWrapper imgurl={AboutContent.imgurl} />
+        <Content content={AboutContent.content} />
+      </StyledContentLayOut>
+    </main>
+  );
+}
diff --git a/src/app/(root)/(routes)/blog/[slug]/page.tsx b/src/app/(root)/(routes)/blog/[slug]/page.tsx
new file mode 100644
index 0000000..07d81e7
--- /dev/null
+++ b/src/app/(root)/(routes)/blog/[slug]/page.tsx
@@ -0,0 +1,181 @@
+import { Metadata } from 'next';
+
+import ReactMarkdown from 'react-markdown';
+
+import Image from 'next/image';
+import rehypeRaw from 'rehype-raw';
+
+import CodeBlock from '@/Component/Blog/CodeBlock';
+import PostExterct from '@/Component/Blog/Exterct';
+import BlogLayOut from '@/Component/Blog/LayOut';
+import Comments from '@/Component/Giscus/Gitcus';
+import TOC from '@/Component/TOC';
+
+import { getPostBySlug } from '../../../../../../lib/api';
+import makeToc from '../../../../../../lib/makeToc';
+
+export async function generateMetadata({
+  params,
+}: {
+  params: {
+    slug: string;
+  };
+}): Promise<Metadata> {
+  const post = getPostBySlug(params.slug, [
+    'title',
+    'content',
+    'excerpt',
+    'date',
+    'author',
+    'image',
+  ]);
+
+  const dynamicMetaTag: Metadata = {
+    title: post.title,
+    description: post.excerpt,
+    openGraph: {
+      images: [
+        {
+          url: `${post.image}`,
+          width: 800,
+          height: 600,
+          alt: '블로그 대표 이미지',
+        },
+      ],
+      type: 'website',
+      siteName: `${post.title}`,
+      locale: 'ko-KR',
+    },
+    keywords: post.title,
+
+    robots: {
+      index: true,
+      follow: true,
+      googleBot: {
+        index: true,
+        follow: true,
+      },
+    },
+    viewport: {
+      width: 'device-width',
+      initialScale: 1,
+    },
+    verification: {
+      google: 'g3Daim29whdK1ZzL1CE6pvkYyvSgM5-6C898-TVjiz0',
+    },
+  };
+  return dynamicMetaTag;
+}
+
+export default function Post({
+  params,
+}: {
+  params: {
+    slug: string;
+  };
+}) {
+  const post = getPostBySlug(decodeURIComponent(params.slug), [
+    'title',
+    'content',
+    'excerpt',
+    'date',
+    'author',
+    'image',
+  ]);
+
+  return (
+    <>
+      <BlogLayOut>
+        <h1>{post.title}</h1>
+        <PostExterct exterct={post.excerpt} />
+        <p
+          style={{
+            fontWeight: '700',
+            fontSize: '16px',
+          }}
+        >
+          {post.date}
+        </p>
+
+        <ReactMarkdown
+          rehypePlugins={[rehypeRaw]}
+          components={{
+            img: ({ node, ...props }) => (
+              <img
+                src={props.src}
+                alt={props?.alt || '마크다운 이미지'}
+                style={{
+                  maxWidth: '100%',
+                  objectFit: 'cover',
+                  height: 'auto',
+                }}
+                sizes="(max-width: 560px) 360px, (max-width: 1023px) 700px, (max-width: 1260px) 1024px, (min-width: 1261px) 1260px"
+              />
+            ),
+            code: ({ children }) => <CodeBlock>{children as string}</CodeBlock>,
+            h2: ({ children }) => {
+              return (
+                <h2
+                  id={children as string}
+                  style={{
+                    fontSize: '1.3rem',
+                  }}
+                >
+                  {children}
+                </h2>
+              );
+            },
+            h3: ({ children }) => {
+              return (
+                <h3
+                  id={children as string}
+                  style={{
+                    fontSize: '1.2rem',
+                  }}
+                >
+                  {children}
+                </h3>
+              );
+            },
+            p: ({ children }) => {
+              return (
+                <p
+                  style={{
+                    fontSize: '1rem',
+                  }}
+                >
+                  {children}
+                </p>
+              );
+            },
+            li: ({ children }) => {
+              return (
+                <li
+                  style={{
+                    fontSize: '1rem',
+                  }}
+                >
+                  {children}
+                </li>
+              );
+            },
+            pre: ({ children }) => (
+              <code
+                style={{
+                  fontSize: '1rem',
+                }}
+              >
+                {children}
+              </code>
+            ),
+          }}
+        >
+          {post.content}
+        </ReactMarkdown>
+
+        <Comments />
+      </BlogLayOut>
+      <TOC toc={makeToc({ children: post.content }) || []}></TOC>
+    </>
+  );
+}
diff --git a/src/app/(root)/(routes)/category/[categoryId]/[slug]/page.tsx b/src/app/(root)/(routes)/category/[categoryId]/[slug]/page.tsx
new file mode 100644
index 0000000..7664713
--- /dev/null
+++ b/src/app/(root)/(routes)/category/[categoryId]/[slug]/page.tsx
@@ -0,0 +1,101 @@
+import { Metadata } from 'next';
+
+import ReactMarkdown from 'react-markdown';
+
+import rehypeRaw from 'rehype-raw';
+
+import CodeBlock from '@/Component/Blog/CodeBlock';
+import PostExterct from '@/Component/Blog/Exterct';
+import BlogLayOut from '@/Component/Blog/LayOut';
+import Comments from '@/Component/Giscus/Gitcus';
+
+import { getPostBySlug } from '../../../../../../../lib/api';
+
+export default function Post({
+  params,
+}: {
+  params: {
+    categoryId: string;
+    slug: string;
+  };
+}) {
+  const post = getPostBySlug(decodeURIComponent(params.slug), [
+    'title',
+    'content',
+    'excerpt',
+    'date',
+    'author',
+    'image',
+  ]);
+
+  const dynamicMetaData: Metadata = {
+    title: post.title,
+    description: post.excerpt,
+    keywords: post.title,
+    openGraph: {
+      images: [
+        {
+          url: `${post.image}`,
+          width: 800,
+          height: 600,
+        },
+      ],
+    },
+
+    robots: {
+      index: true,
+      follow: true,
+      googleBot: {
+        index: true,
+        follow: true,
+      },
+    },
+    viewport: {
+      width: 'device-width',
+      initialScale: 1,
+    },
+    verification: {
+      google: 'g3Daim29whdK1ZzL1CE6pvkYyvSgM5-6C898-TVjiz0',
+    },
+  };
+
+  return (
+    <>
+      <BlogLayOut>
+        <h3>{post.title}</h3>
+        <PostExterct exterct={post.excerpt} />
+        <p
+          style={{
+            fontWeight: '700',
+            fontSize: '16px',
+          }}
+        >
+          {post.date}
+        </p>
+
+        <ReactMarkdown
+          rehypePlugins={[rehypeRaw]}
+          components={{
+            img: ({ node, ...props }) => (
+              <img
+                src={props.src || ''}
+                alt="마크다운 이미지"
+                style={{
+                  maxWidth: '100%',
+                  height: 'auto',
+                  objectFit: 'contain',
+                }}
+              />
+            ),
+            code: ({ node, inline, children, ...props }) => (
+              <CodeBlock>{children as string}</CodeBlock>
+            ),
+          }}
+        >
+          {post.content}
+        </ReactMarkdown>
+        <Comments />
+      </BlogLayOut>
+    </>
+  );
+}
diff --git a/src/app/(root)/(routes)/category/[categoryId]/page.tsx b/src/app/(root)/(routes)/category/[categoryId]/page.tsx
new file mode 100644
index 0000000..a5b70ed
--- /dev/null
+++ b/src/app/(root)/(routes)/category/[categoryId]/page.tsx
@@ -0,0 +1,63 @@
+import Image from 'next/image';
+import Link from 'next/link';
+
+import Title from '@/Component/About/Title';
+import PostLayout from '@/Component/Common/PostLayout';
+
+import { getCategoryFilteredPosts } from '../../../../../../lib/api';
+
+export default function Home({
+  params,
+}: {
+  params: {
+    categoryId: string;
+  };
+}) {
+  params.categoryId = decodeURIComponent(params.categoryId);
+
+  const posts = getCategoryFilteredPosts(
+    ['title', 'data', 'slug', 'category', 'excerpt', 'date', 'image'],
+    params.categoryId
+  );
+
+  return (
+    <>
+      <h2>{params.categoryId}</h2>
+      <main
+        style={{
+          minWidth: '60%',
+        }}
+      >
+        {posts.map((post) => (
+          <PostLayout key={post.title}>
+            <Link href={`/blog/${post.slug}`}>
+              <Title title={post.title} />
+              <p>{post.category}</p>
+              {post.content}
+            </Link>
+
+            <div
+              style={{
+                display: 'flex',
+                position: 'relative',
+                width: '150px',
+                height: '150px',
+              }}
+            >
+              <Image
+                priority
+                width={150}
+                height={150}
+                src={post.image}
+                alt="블로그 대표 이미지"
+                style={{
+                  objectFit: 'cover',
+                }}
+              />
+            </div>
+          </PostLayout>
+        ))}
+      </main>
+    </>
+  );
+}
diff --git a/src/app/(root)/(routes)/guestbook/page.tsx b/src/app/(root)/(routes)/guestbook/page.tsx
new file mode 100644
index 0000000..8d482e5
--- /dev/null
+++ b/src/app/(root)/(routes)/guestbook/page.tsx
@@ -0,0 +1,20 @@
+
+import { dehydrate } from '@tanstack/react-query';
+
+import Hydrate from '@/Component/Common/Hydrate';
+import GuestBook from '@/Component/GuestBook/GuestBook';
+import { getGuestBook } from '@/services/GuestBook';
+import getQueryClient from '@/utils/getQueryClient';
+
+export default async function Home() {
+  const queryClient = getQueryClient();
+  await queryClient.prefetchQuery(['guestBook'], getGuestBook);
+  const dehydratedState = dehydrate(queryClient, {
+    shouldDehydrateQuery: () => true,
+  });
+  return (
+      <Hydrate state={dehydratedState}>
+        <GuestBook />
+      </Hydrate>
+  );
+}
diff --git a/src/app/(root)/(routes)/notion/page.tsx b/src/app/(root)/(routes)/notion/page.tsx
new file mode 100644
index 0000000..f2abdd4
--- /dev/null
+++ b/src/app/(root)/(routes)/notion/page.tsx
@@ -0,0 +1,8 @@
+export default function allPage() {
+ 
+  return (
+    <main>
+      노션 관련 페이지
+    </main>
+  );
+}
diff --git a/src/app/(root)/(routes)/notion/resume/page.tsx b/src/app/(root)/(routes)/notion/resume/page.tsx
new file mode 100644
index 0000000..5c96449
--- /dev/null
+++ b/src/app/(root)/(routes)/notion/resume/page.tsx
@@ -0,0 +1,12 @@
+import { NotionAPI } from 'notion-client';
+
+import ResumeClient from '@/Component/Notion/NotionresumeClient';
+export type ReturnTypeofNotionRecord = ReturnType<typeof notion.getPage>;
+const notion = new NotionAPI();
+export default async function ResumePage() {
+  const recordMap = await notion.getPage(
+    `https://notion-api.splitbee.io/v1/page/${process.env.NOTION_PAGE_ID}`
+  );
+
+  return <ResumeClient recordMap={recordMap} />;
+}
diff --git a/src/app/(root)/layout.tsx b/src/app/(root)/layout.tsx
new file mode 100644
index 0000000..a4aedc6
--- /dev/null
+++ b/src/app/(root)/layout.tsx
@@ -0,0 +1,96 @@
+import '../globals.css';
+import { Metadata } from 'next';
+
+import { Montserrat } from 'next/font/google';
+import Head from 'next/head';
+
+import Providers from '@/app/queryClientProvider';
+import Footer from '@/Component/Common/Footer';
+import Navbar from '@/Component/Common/Navbar';
+import GoogleAnalytics from '@/Component/GA/GA';
+import GlobalStyle from '@/style/globalStyle';
+
+import Recoil from '../Recoil';
+import { ThemeWrapper } from '../themeWrapper';
+
+declare global {
+  interface Window {
+    naver: any;
+  }
+}
+
+const baseFont = Montserrat({
+  subsets: ['latin'],
+  preload: true,
+  display: 'swap',
+  weight: '400',
+});
+
+export const metadata: Metadata = {
+  title: 'HJ`s Blog',
+  description: '개발관련 여러 지식을 기록하는 공간',
+  icons: {
+    icon: '/images/favicon.webp',
+  },
+  metadataBase: new URL('https://hj-devlog.vercel.app/'),
+  openGraph: {
+    url: 'https://hj-devlog.vercel.app',
+    title: 'HJ`s Blog',
+    description: '개발 관련 여러 지식을 기록하고, 정리하는 공간입니다',
+    images: [
+      {
+        url: 'https://avatars.githubusercontent.com/u/59411107?v=4',
+        width: 800,
+        height: 600,
+      },
+      {
+        url: 'https://avatars.githubusercontent.com/u/59411107?v=4',
+        width: 1800,
+        height: 1600,
+        alt: 'My custom alt',
+      },
+    ],
+    type: 'website',
+  },
+  robots: {
+    index: true,
+    follow: true,
+    googleBot: {
+      index: true,
+      follow: true,
+    },
+  },
+  viewport: {
+    width: 'device-width',
+    initialScale: 1,
+  },
+  verification: {
+    google: 'g3Daim29whdK1ZzL1CE6pvkYyvSgM5-6C898-TVjiz0',
+  },
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="ko" className={baseFont.className}>
+      <Head>
+        <GoogleAnalytics GA_MEASUREMENT_ID="G-S9N5XJ40DL" />
+      </Head>
+      <body className="App">
+        <Providers>
+          <Recoil>
+            <ThemeWrapper>
+              <GlobalStyle />
+              <Navbar />
+              {children}
+            </ThemeWrapper>
+            <Footer />
+          </Recoil>
+        </Providers>
+      </body>
+    </html>
+  );
+}
diff --git a/src/app/(root)/not-found.tsx b/src/app/(root)/not-found.tsx
new file mode 100644
index 0000000..f5af2c9
--- /dev/null
+++ b/src/app/(root)/not-found.tsx
@@ -0,0 +1,3 @@
+export default function NotFound() {
+  return <div>404</div>;
+}
diff --git a/src/app/(root)/sitemap.ts b/src/app/(root)/sitemap.ts
new file mode 100644
index 0000000..0c3d993
--- /dev/null
+++ b/src/app/(root)/sitemap.ts
@@ -0,0 +1,27 @@
+import { MetadataRoute } from 'next';
+
+import { getAllPosts } from '../../../lib/api';
+
+export default function sitemap(): MetadataRoute.Sitemap {
+  const SITE_SUFFIX = 'https://hj-devlog.vercel.app';
+  const posts = getAllPosts(['title', 'date']);
+
+  const postsSiteMap = posts.map((post) => {
+    return {
+      url: `${SITE_SUFFIX}/blog/${post.title}`,
+      lastModified: new Date(post.date),
+    };
+  });
+
+  return [
+    {
+      url: `${SITE_SUFFIX}`,
+      lastModified: new Date(),
+    },
+    {
+      url: `${SITE_SUFFIX}/about`,
+      lastModified: new Date(),
+    },
+    ...postsSiteMap,
+  ];
+}
diff --git a/src/app/Recoil.tsx b/src/app/Recoil.tsx
new file mode 100644
index 0000000..aef56e0
--- /dev/null
+++ b/src/app/Recoil.tsx
@@ -0,0 +1,7 @@
+'use client';
+
+import { RecoilRoot } from 'recoil';
+
+export default function Recoil({ children }: { children: React.ReactNode }) {
+  return <RecoilRoot>{children}</RecoilRoot>;
+}
diff --git a/src/app/api/guestbook/route.ts b/src/app/api/guestbook/route.ts
new file mode 100644
index 0000000..4c71296
--- /dev/null
+++ b/src/app/api/guestbook/route.ts
@@ -0,0 +1,54 @@
+import { ref, get, push } from 'firebase/database';
+import { NextResponse, NextRequest } from 'next/server';
+
+import { DB } from '../../firebase';
+
+export async function GET() {
+  const guestbookRef = ref(DB, '/guestbook');
+  const snapShot = await get(guestbookRef);
+
+  if (snapShot.exists()) {
+    return NextResponse.json(
+      {
+        guestbook: await snapShot.val(),
+      },
+      {
+        status: 200,
+      }
+    );
+  }
+
+  return new Response(
+    JSON.stringify({
+      error: 'firebase 설정 에러',
+    }),
+    {
+      status: 502,
+    }
+  );
+}
+
+export async function POST(req: NextRequest) {
+  const body = await req.json();
+
+  try {
+    const val = await push(ref(DB, '/guestbook'), {
+      comment: body.comment,
+      commentTime: body.time,
+    });
+
+    return NextResponse.json(
+      {
+        val,
+      },
+      {
+        status: 200,
+      }
+    );
+  } catch (e) {
+    console.log(e);
+    return NextResponse.json(e, {
+      status: 502,
+    });
+  }
+}
diff --git a/src/app/api/slugs/[id]/route.ts b/src/app/api/slugs/[id]/route.ts
new file mode 100644
index 0000000..362751c
--- /dev/null
+++ b/src/app/api/slugs/[id]/route.ts
@@ -0,0 +1,29 @@
+import { getAllPosts } from '../../../../../lib/api';
+
+export async function GET(
+  req: Request,
+  {
+    params,
+  }: {
+    params: {
+      id: string;
+    };
+  }
+) {
+  const allPosts = getAllPosts([
+    'title',
+    'data',
+    'slug',
+    'category',
+    'excerpt',
+    'date',
+    'image',
+  ]).filter((posts) => posts.slug === params.id);
+
+  return new Response(JSON.stringify(allPosts), {
+    status: 200,
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+}
diff --git a/src/app/api/slugs/route.ts b/src/app/api/slugs/route.ts
new file mode 100644
index 0000000..d141000
--- /dev/null
+++ b/src/app/api/slugs/route.ts
@@ -0,0 +1,19 @@
+import { getAllPosts } from '../../../../lib/api';
+
+export async function GET(req: Request) {
+  const allPosts = getAllPosts([
+    'title',
+    'data',
+    'slug',
+    'category',
+    'excerpt',
+    'date',
+    'image',
+  ]);
+  return new Response(JSON.stringify(allPosts), {
+    status: 200,
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+}
diff --git a/src/app/firebase.js b/src/app/firebase.js
new file mode 100644
index 0000000..75ed49d
--- /dev/null
+++ b/src/app/firebase.js
@@ -0,0 +1,17 @@
+import { initializeApp } from 'firebase/app';
+import { getDatabase } from 'firebase/database';
+
+const firebaseConfig = {
+  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
+  authDomain: process.env.NEXT_PUBLIC_FIREWAREBASE_AUTH_DOMAIN,
+  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
+  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
+  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
+  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
+  measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
+  databaseURL: process.env.NEXT_PUBLIC_FIREBASE_DATABASE,
+};
+
+const app = initializeApp(firebaseConfig);
+const DB = getDatabase(app);
+export { app, DB };
diff --git a/src/app/fonts/KyoboHandwriting2022khn.ttf b/src/app/fonts/KyoboHandwriting2022khn.ttf
new file mode 100644
index 0000000..03d0bbb
Binary files /dev/null and b/src/app/fonts/KyoboHandwriting2022khn.ttf differ
diff --git a/src/app/globalAtom.ts b/src/app/globalAtom.ts
new file mode 100644
index 0000000..f578aae
--- /dev/null
+++ b/src/app/globalAtom.ts
@@ -0,0 +1,20 @@
+import type { ThemeType } from '@/@types/ThemeType';
+
+import { atom } from 'recoil';
+
+import POST_CONSTANT from '@/constants/POST';
+
+export const themeState = atom<ThemeType>({
+  key: 'THEME_STATE',
+  default: 'light',
+});
+
+export const postSearchModalState = atom<boolean>({
+  key: 'POST_SEARCH_MODAL_STATE',
+  default: false,
+});
+
+export const postCurPage = atom<number>({
+  key: 'POST_PAGE_STATE',
+  default: POST_CONSTANT.end,
+});
diff --git a/src/app/globals.css b/src/app/globals.css
new file mode 100644
index 0000000..d546e36
--- /dev/null
+++ b/src/app/globals.css
@@ -0,0 +1,21 @@
+footer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 5px auto;
+}
+.tocItem:hover {
+  color: rgb(0, 131, 120);
+}
+.active {
+  color: rgb(0, 131, 120);
+}
+main {
+  font-family: inherit;
+  min-height: calc(100vh - 120px);
+  font-size: 1rem;
+}
+
+.TOC {
+  text-shadow: -0.01em -0.01em 0.01em #000;
+}
diff --git a/src/app/queryClientProvider.tsx b/src/app/queryClientProvider.tsx
new file mode 100644
index 0000000..3967ff4
--- /dev/null
+++ b/src/app/queryClientProvider.tsx
@@ -0,0 +1,28 @@
+// Provider.tsx
+
+'use client';
+
+import React from 'react';
+
+import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
+
+type Props = {
+  children: React.ReactNode;
+};
+
+function Providers({ children }: Props) {
+  const [client] = React.useState(
+    new QueryClient({
+      defaultOptions: {
+        queries: {
+          refetchOnWindowFocus: false,
+          retry: false,
+        },
+      },
+    })
+  );
+
+  return <QueryClientProvider client={client}>{children}</QueryClientProvider>;
+}
+
+export default Providers;
diff --git a/src/app/registry.tsx b/src/app/registry.tsx
new file mode 100644
index 0000000..f7f08ae
--- /dev/null
+++ b/src/app/registry.tsx
@@ -0,0 +1,28 @@
+'use client';
+
+import { useState } from 'react';
+
+import { useServerInsertedHTML } from 'next/navigation';
+import { ServerStyleSheet, StyleSheetManager } from 'styled-components';
+
+export default function StyledComponentsRegistry({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet());
+
+  useServerInsertedHTML(() => {
+    const styles = styledComponentsStyleSheet.getStyleElement();
+    styledComponentsStyleSheet.instance.clearTag();
+    return <>{styles}</>;
+  });
+
+  if (typeof window !== 'undefined') return <>{children}</>;
+
+  return (
+    <StyleSheetManager sheet={styledComponentsStyleSheet.instance}>
+      {children}
+    </StyleSheetManager>
+  );
+}
diff --git a/src/app/themeWrapper.tsx b/src/app/themeWrapper.tsx
new file mode 100644
index 0000000..3578c49
--- /dev/null
+++ b/src/app/themeWrapper.tsx
@@ -0,0 +1,22 @@
+'use client';
+
+import { useRecoilState } from 'recoil';
+import { ThemeProvider } from 'styled-components';
+
+import { darkTheme, lightTheme } from '@/style/theme/darkMode';
+import mediatheme from '@/style/theme/media';
+
+import { themeState } from './globalAtom';
+import StyledComponentsRegistry from './registry';
+
+
+export function ThemeWrapper({ children }: { children: React.ReactNode }) {
+  const [currentTheme, setCurrentTheme] = useRecoilState(themeState);
+  const themeObj = currentTheme === 'light' ? lightTheme : darkTheme;
+  const theme = { ...themeObj, ...mediatheme };
+  return (
+    <StyledComponentsRegistry>
+      <ThemeProvider theme={theme}>{children}</ThemeProvider>
+    </StyledComponentsRegistry>
+  );
+}
diff --git a/src/constants/POST.ts b/src/constants/POST.ts
new file mode 100644
index 0000000..5d85a95
--- /dev/null
+++ b/src/constants/POST.ts
@@ -0,0 +1,7 @@
+const POST_CONSTANT = {
+  start: 5,
+  end: 5,
+};
+
+Object.freeze(POST_CONSTANT);
+export default POST_CONSTANT;
diff --git a/src/hooks/mutations/useGuestBookMutation.ts b/src/hooks/mutations/useGuestBookMutation.ts
new file mode 100644
index 0000000..cf87dc1
--- /dev/null
+++ b/src/hooks/mutations/useGuestBookMutation.ts
@@ -0,0 +1,17 @@
+import { useMutation } from '@tanstack/react-query';
+
+import { post } from '@/utils/axiosClient';
+export const postGuestBook = async ({ comment }: { comment: string }) => {
+  return await post('api/guestbook', {
+    comment,
+    time: new Date().toUTCString(),
+  });
+};
+
+const usePostGuestBook = () => {
+  return useMutation({
+    mutationFn: postGuestBook,
+  });
+};
+
+export default usePostGuestBook;
diff --git a/src/hooks/queries/useGuestBookQuery.ts b/src/hooks/queries/useGuestBookQuery.ts
new file mode 100644
index 0000000..c04dd01
--- /dev/null
+++ b/src/hooks/queries/useGuestBookQuery.ts
@@ -0,0 +1,13 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { getGuestBook } from '@/services/GuestBook';
+
+export default function useGetGuestBook() {
+  return useQuery({
+    queryFn: getGuestBook,
+    queryKey: ['guestBook'],
+    refetchInterval: false,
+    retry: 0,
+    refetchOnMount: false,
+  });
+}
diff --git a/src/hooks/queries/usePostQuery.ts b/src/hooks/queries/usePostQuery.ts
new file mode 100644
index 0000000..96297b8
--- /dev/null
+++ b/src/hooks/queries/usePostQuery.ts
@@ -0,0 +1,40 @@
+import { useInfiniteQuery } from '@tanstack/react-query';
+
+import { get } from '@/utils/axiosClient';
+
+type Post = {
+  title: string;
+  date: string;
+  slug: string;
+  category: string;
+  excerpt: string;
+  image: string;
+};
+
+type PageParams = {
+  start: number;
+  end: number;
+};
+
+type PostsResponse = {
+  posts: Post[];
+  page: number;
+};
+
+const getPosts = async ({ pageParams }: { pageParams: number }) => {
+  const start = pageParams * 5;
+  const end = start + 5;
+  return (await get<PostsResponse>(`/api/posts?start=${start}&end=${end}`))
+    .data;
+};
+
+export default function usePostQuery() {
+  return useInfiniteQuery({
+    queryKey: ['getPosts'],
+    queryFn: ({ pageParam = 1 }) => getPosts({ pageParams: pageParam }),
+    getNextPageParam: (lastPage) => {
+      const nextPage = Math.floor(lastPage.page);
+      return nextPage + 1;
+    },
+  });
+}
diff --git a/src/hooks/useInput.ts b/src/hooks/useInput.ts
new file mode 100644
index 0000000..8a6f638
--- /dev/null
+++ b/src/hooks/useInput.ts
@@ -0,0 +1,27 @@
+import React, { useState } from 'react';
+
+const useInput = (
+  initialState: string,
+  prevConditionCallback: (e: React.ChangeEvent<HTMLInputElement>) => boolean
+) => {
+  const [value, setValue] = useState(initialState);
+  const [error, setError] = useState(false);
+
+  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (!prevConditionCallback(e)) {
+      setError(() => true);
+      return;
+    }
+
+    setValue(e.target.value);
+  };
+
+  return {
+    value,
+    onChange,
+    error,
+    setValue,
+  };
+};
+
+export default useInput;
diff --git a/src/hooks/useObserver.ts b/src/hooks/useObserver.ts
new file mode 100644
index 0000000..fe00f87
--- /dev/null
+++ b/src/hooks/useObserver.ts
@@ -0,0 +1,42 @@
+import { useEffect, useRef } from 'react';
+
+import { InfiniteQueryObserverResult } from '@tanstack/react-query';
+
+type observerProps = {
+  threshold: number;
+  hasNextPage: boolean | undefined;
+  fetchNextPage: () => Promise<InfiniteQueryObserverResult>;
+};
+
+export default function useObserver({
+  threshold = 0.1,
+  hasNextPage,
+  fetchNextPage,
+}: observerProps) {
+  const target = useRef<HTMLDivElement | null>(null);
+
+  const observerCallback: IntersectionObserverCallback = (entries) => {
+    entries.forEach((entry) => {
+      if (entry.isIntersecting && hasNextPage) {
+        fetchNextPage();
+      }
+    });
+  };
+
+  useEffect(() => {
+    if (!target || !target.current) {
+      return;
+    }
+
+    const observer = new IntersectionObserver(observerCallback, {
+      threshold,
+    });
+    observer.observe(target?.current);
+    return () => observer.disconnect();
+  }),
+    [target, threshold, observerCallback];
+
+  return {
+    target,
+  };
+}
diff --git a/src/hooks/useScroll.tsx b/src/hooks/useScroll.tsx
new file mode 100644
index 0000000..75aacae
--- /dev/null
+++ b/src/hooks/useScroll.tsx
@@ -0,0 +1,34 @@
+import { useState, useEffect } from 'react';
+
+export default function useScroll({
+  target,
+  options,
+}: {
+  target: HTMLElement | null | HTMLElement[];
+  options: IntersectionObserverInit;
+}) {
+  const [isFetching, setIsFetching] = useState(false);
+  const intersectionCallback = (entries: IntersectionObserverEntry[]) => {
+    entries.forEach((entry) => {
+      if (entry.isIntersecting) {
+        setIsFetching(true);
+      }
+    });
+  };
+
+  useEffect(() => {
+    let observer = new IntersectionObserver(intersectionCallback, options);
+    if (target instanceof HTMLElement) {
+      observer.observe(target);
+      return;
+    }
+
+    if (target instanceof Array) {
+      target.forEach((eachTarget) => {
+        observer.observe(eachTarget);
+      });
+    }
+  }, [options, target]);
+
+  return { isFetching };
+}
diff --git a/src/hooks/useSearchPost.tsx b/src/hooks/useSearchPost.tsx
new file mode 100644
index 0000000..336cbf8
--- /dev/null
+++ b/src/hooks/useSearchPost.tsx
@@ -0,0 +1,38 @@
+import { useState, useEffect } from 'react';
+
+type Item = {
+  [key: string]: string;
+};
+
+export default function useSearchPost(searchInput: string) {
+  const [posts, setPosts] = useState<Item[]>([]);
+
+  useEffect(() => {
+    const debounceHandler = setTimeout(() => {
+      fetchAllPosts();
+    }, 1000);
+
+    const fetchAllPosts = async () => {
+      const allPostResponse = await fetch('/api/slugs');
+      const allPosts: Item[] = await allPostResponse.json();
+      if (allPostResponse.ok) {
+        setPosts(
+          allPosts.filter((post) =>
+            post?.title
+              ?.trim()
+              ?.toLowerCase()
+              ?.includes(searchInput?.trim()?.toLowerCase())
+          )
+        );
+      }
+    };
+
+    return () => {
+      clearTimeout(debounceHandler);
+    };
+  }, [searchInput]);
+
+  return {
+    posts,
+  };
+}
diff --git a/src/hooks/useTheme.ts b/src/hooks/useTheme.ts
new file mode 100644
index 0000000..722204c
--- /dev/null
+++ b/src/hooks/useTheme.ts
@@ -0,0 +1,13 @@
+import { useState } from 'react';
+
+export default function useTheme() {
+  const [theme, setTheme] = useState<'light' | 'dark'>('light');
+  const onChangeTheme = () => {
+    setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
+  };
+
+  return {
+    theme,
+    onChangeTheme,
+  };
+}
diff --git a/src/hooks/useToc.ts b/src/hooks/useToc.ts
new file mode 100644
index 0000000..22feb47
--- /dev/null
+++ b/src/hooks/useToc.ts
@@ -0,0 +1,40 @@
+import { useState, useEffect } from 'react';
+
+export default function useToc() {
+  const [id, setId] = useState<string>('');
+
+  useEffect(() => {
+    const getH2Element = Array.from(document.querySelectorAll('h2'));
+    const getH3Element = Array.from(document.querySelectorAll('h3'));
+
+    const getAllHeaderElement = [...getH2Element, ...getH3Element];
+
+    const io = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          const getTOCElement = document.getElementsByClassName(
+            entry.target.textContent as string
+          );
+          if (!getTOCElement[0]) {
+            return;
+          }
+          if (getTOCElement && entry.isIntersecting) {
+            setId(getTOCElement[0].id);
+          }
+        });
+      },
+      {
+        threshold: 0.4,
+        rootMargin: '-50px 0px 0px 0px',
+      }
+    );
+
+    getAllHeaderElement.forEach((eachHeaderElement) => {
+      io.observe(eachHeaderElement);
+    });
+
+    return () => io.disconnect();
+  }, []);
+
+  return { id };
+}
diff --git a/src/services/GuestBook/index.ts b/src/services/GuestBook/index.ts
new file mode 100644
index 0000000..9e509f5
--- /dev/null
+++ b/src/services/GuestBook/index.ts
@@ -0,0 +1,10 @@
+'use server';
+import type { GuestBook } from '@/@types/GuestBookType';
+
+import { get } from '@/utils/axiosClient';
+
+export const getGuestBook = async () => {
+  const guestBook = await get('/api/guestbook');
+  const guestBookJson = (await guestBook.data) as Promise<GuestBook>;
+  return guestBookJson;
+};
diff --git a/src/style/globalStyle.tsx b/src/style/globalStyle.tsx
new file mode 100644
index 0000000..409afb9
--- /dev/null
+++ b/src/style/globalStyle.tsx
@@ -0,0 +1,48 @@
+'use client';
+import { createGlobalStyle } from 'styled-components';
+
+const GlobalStyle = createGlobalStyle`
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  a {
+    text-decoration: none;
+    color: ${({ theme }) => theme.text};
+    cursor: pointer;
+  }
+
+  main{
+    min-height: calc(100vh - 120px);
+  }
+
+
+  body {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    min-height: 100vh;
+    line-height: 1.5;
+    max-width: 100%;
+    background-color: ${({ theme }) => theme.background};
+    color: ${({ theme }) => theme.text};
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-size: 20px;
+    transition: background 0.2s ease-in, color 0.2s ease-in;
+  }
+
+  pre {
+    border-radius: 10px;
+    padding: 0 1em;
+    white-space: pre-wrap;
+    font-family: inherit;
+    word-wrap: break-word;
+  }
+
+`;
+export default GlobalStyle;
diff --git a/src/style/theme/darkMode.ts b/src/style/theme/darkMode.ts
new file mode 100644
index 0000000..007a4e3
--- /dev/null
+++ b/src/style/theme/darkMode.ts
@@ -0,0 +1,26 @@
+'use client';
+
+//121212
+//d22427
+
+const lightTheme = {
+  body: '#eaeaea',
+  text: '#1c1e21',
+  toggleBorder: '#d1d1d1',
+  background: '#EEEEEE',
+  codeblock: '#f6f8fa',
+  backgroundPost: '#E4E6E8',
+  blue: '#1976d2',
+};
+
+const darkTheme = {
+  body: '#2f3136',
+  text: '#fafafa',
+  toggleBorder: '#6b8096',
+  background: '#363537',
+  codeblock: '#fafafa',
+  backgroundPost: 'rgba(31, 46, 61,0.3)',
+  blue: '#1976d2',
+};
+
+export { darkTheme, lightTheme };
diff --git a/src/style/theme/media.ts b/src/style/theme/media.ts
new file mode 100644
index 0000000..0c0ed0f
--- /dev/null
+++ b/src/style/theme/media.ts
@@ -0,0 +1,17 @@
+const deviceSizes = {
+  mobile: '450px',
+  tablet: '768px',
+  laptop: '1024px',
+};
+
+const device = {
+  mobile: `screen and (max-width:${deviceSizes.mobile})`,
+  tablet: `screen and (max-width:${deviceSizes.tablet})`,
+  laptop: `screen and (max-width:${deviceSizes.laptop})`,
+};
+
+const mediatheme = {
+  device,
+};
+
+export default mediatheme;
diff --git a/src/utils/axiosClient.ts b/src/utils/axiosClient.ts
new file mode 100644
index 0000000..9eef0a1
--- /dev/null
+++ b/src/utils/axiosClient.ts
@@ -0,0 +1,46 @@
+import axios, { AxiosRequestConfig, AxiosResponse } from 'axios';
+
+const axiosClient = axios.create({
+  baseURL:
+    process.env.NODE_ENV === 'production'
+      ? process.env.NEXT_PUBLIC_PRODUCT_URL
+      : process.env.NEXT_PUBLIC_LOCAL_URL,
+});
+
+export const get = async <T>(
+  url: string,
+  config?: AxiosRequestConfig
+): Promise<AxiosResponse<T>> => {
+  return await axiosClient.get(url, config);
+};
+
+export const post = async <T>(
+  url: string,
+  data?: any,
+  config?: AxiosRequestConfig
+): Promise<AxiosResponse<T>> => {
+  return await axiosClient.post(url, data, config);
+};
+
+export const patch = async <T>(
+  url: string,
+  data?: any,
+  config?: AxiosRequestConfig
+): Promise<AxiosResponse<T>> => {
+  return await axiosClient.patch(url, data, config);
+};
+
+export const put = async <T>(
+  url: string,
+  data?: any,
+  config?: AxiosRequestConfig
+): Promise<AxiosResponse<T>> => {
+  return await axiosClient.put(url, data, config);
+};
+
+export const del = async <T>(
+  url: string,
+  config?: AxiosRequestConfig
+): Promise<AxiosResponse<T>> => {
+  return await axiosClient.delete(url, config);
+};
diff --git a/src/utils/getQueryClient.ts b/src/utils/getQueryClient.ts
new file mode 100644
index 0000000..8b5fda3
--- /dev/null
+++ b/src/utils/getQueryClient.ts
@@ -0,0 +1,8 @@
+// app/getQueryClient.jsx
+
+import { cache } from 'react';
+
+import { QueryClient } from '@tanstack/react-query';
+
+const getQueryClient = cache(() => new QueryClient());
+export default getQueryClient;
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..95b999e
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    "next-sitemap.config.js"
+  ],
+  "exclude": ["node_modules"]
+}