diff --git a/pages/_app.tsx b/pages/_app.tsx
index 091bf17918..c0431487c7 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -18,6 +18,7 @@ import 'styles/global.css'
 import 'styles/notion.css'
 // global style overrides for prism theme (optional)
 import 'styles/prism-theme.css'
+import '~/styles/custom/index.scss';
 
 import { bootstrap } from '@/lib/bootstrap-client'
 import {
diff --git a/styles/custom/index.scss b/styles/custom/index.scss
new file mode 100644
index 0000000000..5ea3039a8e
--- /dev/null
+++ b/styles/custom/index.scss
@@ -0,0 +1,13 @@
+// 해당 import문의 순서를 변경하면 스타일이 제대로 적용되지 않습니다.
+@import 'react-notion-x/styles.css';
+@import 'katex/dist/katex.min.css';
+@import 'prismjs/themes/prism-coy.css';
+@import '~/styles/global.css';
+@import '~/styles/notion.css';
+@import '~/styles/prism-theme.css';
+
+@import './vars.scss';
+@import './notion.scss';
+
+@import '~/components/Comments/index.scss';
+@import '~/components/PageLoading/index.scss';
diff --git a/styles/custom/notion.scss b/styles/custom/notion.scss
new file mode 100644
index 0000000000..cb1bd4e541
--- /dev/null
+++ b/styles/custom/notion.scss
@@ -0,0 +1,698 @@
+// 스크롤 스타일 제거
+::-webkit-scrollbar {
+  display: none;
+}
+
+// 반응형 처리
+@media only screen and (max-width: 1500px) {
+  :root {
+    --notion-page-left-right-padding: 8vw;
+    --notion-page-fullwith-left-right-padding: 8vw;
+  }
+}
+
+@media only screen and (max-width: 720px) {
+  :root {
+    --base-font-size: 0.95rem;
+  }
+}
+
+/**
+ * ================ 전체적인 레이아웃 구성 관련 ================
+ */
+body {
+  font-size: 16px;
+  transition-duration: 250ms;
+  transition-property: background-color, color;
+  -webkit-font-smoothing: antialiased;
+
+  .notion {
+    font-size: var(--base-font-size);
+    transition-duration: 250ms;
+    transition-property: background-color, color;
+  }
+
+  .notion-page {
+    padding-left: var(--notion-page-left-right-padding);
+    padding-right: var(--notion-page-left-right-padding);
+  }
+
+  .notion-full-width {
+    padding-left: var(--notion-page-fullwith-left-right-padding);
+    padding-right: var(--notion-page-fullwith-left-right-padding);
+
+    .notion-title {
+      text-align: left;
+    }
+
+    .notion-page-icon-hero {
+      left: var(--notion-fullwith-page-left-right-padding);
+    }
+  }
+
+  // 헤더
+  .notion-header {
+    position: fixed;
+    transition-duration: 250ms;
+    transition-property: background-color, color;
+
+    .notion-nav-header {
+      max-width: var(--notion-max-width);
+    }
+  }
+
+  // 다크모드 아닐때
+  &:not(.dark-mode) {
+    // 글 목록을 가지고 있는 페이지라면 배경 색 변경
+    .hasCollectionView {
+      --bg-color: #f2f3f7;
+    }
+  }
+}
+
+/**
+ * ================ notion 페이지 관련 스타일 ================
+ */
+.notion {
+  // 페이지
+  .notion-page {
+    line-height: 1.6;
+  }
+
+  // 페이지 제목
+  .notion-title {
+    text-align: left;
+    font-size: 2em;
+  }
+
+  // 페이지 메인 이미지 (커버 이미지)
+  .notion-page-cover-wrapper,
+  .notion-page-cover-wrapper span,
+  .notion-page-cover-wrapper img {
+    max-width: 100% !important;
+    border-radius: 0;
+    height: calc(30vh + var(--notion-header-height)) !important;
+    min-height: calc(30vh + var(--notion-header-height)) !important;
+    max-height: calc(30vh + var(--notion-header-height)) !important;
+  }
+
+  // 페이지 메인 이미지 (커버 이미지) 없을 때
+  .notion-page-no-cover {
+    margin-top: 130px !important;
+  }
+
+  // 페이지 아이콘
+  .notion-page-icon-hero {
+    margin-left: 0 !important;
+    left: var(--notion-page-left-right-padding);
+  }
+
+  // 페이지 속성들
+  .notion-collection-page-properties {
+    .notion-collection-row {
+      margin-bottom: 5rem;
+      border-bottom: none;
+      padding-bottom: 0;
+      padding: 0;
+    }
+
+    .notion-collection-row-body {
+      flex-wrap: wrap;
+      flex-direction: row;
+      gap: 0;
+    }
+
+    .notion-collection-row-property {
+      margin-bottom: 0.5rem;
+
+      + .notion-collection-row-property {
+        &::before {
+          content: '';
+          width: 1px;
+          height: 10px;
+          background-color: var(--fg-color);
+          opacity: 0.35;
+          margin: 0 0.5rem;
+        }
+      }
+    }
+
+    @media (max-width: 768px) {
+      .notion-collection-property-type-multi_select {
+        width: 100%;
+
+        &::before {
+          display: none;
+        }
+
+        .notion-property {
+          justify-content: flex-start;
+        }
+      }
+    }
+
+    .notion-collection-row-value {
+      min-height: auto;
+    }
+
+    .notion-property-select-item,
+    .notion-property-multi_select-item {
+      background-color: transparent !important;
+      padding: 0;
+    }
+
+    .notion-property-multi_select-item {
+      opacity: 0.7;
+
+      &::before {
+        content: '#';
+      }
+    }
+  }
+
+  // 페이지 우측 사이드
+  .notion-aside {
+    width: var(--notion-aside-width);
+    margin-left: var(--notion-aside-space-width);
+    flex: none;
+
+    // 우측 사이드 목차
+    .notion-contentPosition {
+      width: 100%;
+
+      .item {
+        display: block;
+        position: relative;
+        padding: 0.1rem 1.3rem 0.1rem 1rem;
+
+        .text {
+          opacity: 0.5;
+          font-size: 0.9rem;
+          transition: 250ms opacity;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+
+        &.level1 {
+          padding-left: calc(1.3rem + 1rem);
+
+          .text {
+            font-size: 0.85rem;
+          }
+        }
+
+        &.level2 {
+          padding-left: calc(1.3rem + 2rem);
+
+          .text {
+            font-size: 0.8rem;
+          }
+        }
+
+        &.active {
+          .text {
+            opacity: 1;
+          }
+        }
+
+        &::before {
+          content: '';
+          height: 100%;
+          position: absolute;
+          left: 0;
+          top: 0;
+          border-right: 1px solid var(--fg-color);
+          z-index: 1;
+          opacity: 0.2;
+        }
+
+        .activeLine {
+          position: absolute;
+          background-color: var(--primary-color);
+          width: 1px;
+          height: 100%;
+          top: 0;
+          left: 0;
+          z-index: 2;
+
+          &::before {
+            content: '';
+            position: absolute;
+            width: 5px;
+            height: 5px;
+            border-radius: 50%;
+            background-color: var(--primary-color);
+            left: 0.5rem;
+            top: 50%;
+            transform: translateY(-50%);
+          }
+        }
+      }
+
+      &.alignRight {
+        .item {
+          text-align: right;
+          padding: 0.3rem 1rem 0.3rem 1.3rem;
+
+          &.level1 {
+            padding-left: 0;
+            padding-right: calc(1.3rem + 1rem);
+          }
+
+          &.level2 {
+            padding-left: 0;
+            padding-right: calc(1.3rem + 2rem);
+          }
+
+          &::before {
+            right: 0;
+            left: auto;
+          }
+
+          .activeLine {
+            right: 0;
+            left: auto;
+
+            &::before {
+              left: auto;
+              right: 0.5rem;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  // 메인 페이지인 경우
+  &.indexPage {
+    .notion-nav-header {
+      & > .breadcrumbs:first-child {
+        visibility: hidden;
+      }
+    }
+
+    .notion-aside {
+      display: none;
+    }
+  }
+
+  // 메인페이지가 아닌 모든 페이지
+  &.childPage {
+    .notion-page-icon-hero.notion-page-icon-image span,
+    .notion-page-icon-hero.notion-page-icon-image img {
+      border-radius: 0;
+    }
+
+    .notion-page-icon-hero.notion-page-icon-image {
+      box-shadow: none;
+      border-radius: 0;
+    }
+  }
+}
+
+/**
+ * ================ notion 페이지 - 기본 블럭 스타일 (본문 내용) ================
+ */
+.notion {
+  // 제목1 ~ 제목3
+  .notion {
+    &-h1 {
+      font-size: 1.7rem;
+
+      &::after {
+        content: '';
+        display: block;
+        height: 2px;
+        width: 4rem;
+        background-color: var(--fg-color);
+        margin-top: 0.5rem;
+        border-radius: 5px;
+      }
+    }
+
+    &-h2 {
+      font-size: 1.4rem;
+      margin-top: 2rem;
+    }
+
+    &-h3 {
+      font-size: 1.2rem;
+    }
+  }
+
+  // 일반 본문
+  .notion-text {
+    padding: 0.2em 2px;
+  }
+
+  // 리스트
+  .notion-list {
+    li {
+      padding: 3.5px 0;
+      padding-left: 0.2rem;
+
+      &::marker {
+        font-weight: 400;
+      }
+    }
+  }
+
+  // 인라인코드
+  .notion-inline-code {
+    font-weight: 400;
+    font-family: var(--notion-font);
+    letter-spacing: 0;
+    background-color: transparent !important;
+    position: relative;
+    z-index: 0;
+    background-color: var(--fg-color-lighten) !important;
+    transition: 250ms background-color;
+  }
+
+  // 코드
+  .notion-code {
+    .notion-code-copy {
+      top: 0.7rem;
+
+      .notion-code-copy-button {
+        display: block;
+      }
+    }
+  }
+
+  // 구분선
+  .notion-hr {
+    margin: 6px 0;
+  }
+
+  // 콜아웃
+  .notion-callout {
+    border-radius: 8px;
+
+    .notion-page-icon-inline {
+      margin-right: 1rem;
+      transform: translateY(1px);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .notion-inline-code {
+      background-color: var(--fg-color-1) !important;
+    }
+
+    &.warning {
+      background-color: var(--notion-yellow_background);
+      border-color: var(--notion-yellow);
+    }
+
+    &.error {
+      background-color: var(--notion-red_background);
+      border-color: var(--notion-red);
+    }
+
+    &.info {
+      background-color: var(--notion-teal_background);
+      border-color: var(--notion-teal);
+    }
+  }
+
+  // 인용
+  .notion-quote {
+    font-style: normal;
+    font-size: var(--base-font-size);
+    border-color: var(--primary-color);
+    padding: 1rem 1rem 1rem 2rem;
+    position: relative;
+    background-color: var(--fg-color-lighten);
+    transition: 250ms background-color;
+  }
+
+  // 체크박스 (할일)
+  .notion-property-checkbox {
+    &-unchecked {
+      border-radius: 2px;
+    }
+
+    &-checked {
+      border-radius: 2px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      svg {
+        width: 10px;
+        height: 10px;
+        top: initial;
+        left: initial;
+      }
+    }
+  }
+
+  // 파일 첨부 - 아이콘
+  .notion-file-icon {
+    fill: var(--fg-color);
+  }
+
+  // 페이지 링크 스타일
+  .notion-page-title-text {
+    border-bottom: none;
+  }
+
+  // 링크
+  .notion-link:focus,
+  .notion-link:hover {
+    border-bottom-color: transparent;
+
+    background-image: linear-gradient(
+      90.68deg,
+      var(--primary-color) 0.26%,
+      var(--primary-gradient-end-color) 102.37%
+    );
+    background-repeat: no-repeat;
+    background-position: 0 100%;
+    background-size: 100% 0.1rem;
+
+    // transition-property: background-position, background-size;
+    // transition-duration: 300ms;
+  }
+
+  // 북마크
+  .notion-bookmark {
+    transition: 250ms border-color;
+
+    &:hover {
+      border-color: var(--primary-color);
+    }
+
+    .notion-bookmark-link-icon img {
+      display: block;
+    }
+
+    .notion-bookmark-link-text {
+      max-width: 30rem;
+    }
+  }
+
+  // 아이콘 (페이지 아이콘, 콜아웃 아이콘)
+  .notion-page-icon {
+    font-family: 'Tossface';
+  }
+
+  // 테이블
+  .notion-simple-table-wrap {
+    max-width: 100%;
+    overflow-x: auto;
+
+    td {
+      border-color: var(--fg-color-lighten);
+    }
+
+    tr:first-child td {
+      background-color: var(--fg-color-lighten);
+    }
+  }
+}
+
+/**
+ * ================ notion 페이지 - 커스텀 블럭 스타일 ================
+ */
+.notion {
+  // 유저 프로필
+  .notion-user-container {
+    display: flex;
+    align-items: center;
+
+    .notion-user {
+      margin-right: 0.3rem;
+    }
+  }
+
+  // 데이터베이스 - 갤러리뷰
+  .postList {
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: 0.5rem;
+
+    > a {
+      background-color: var(--notion-card-background-color);
+      box-shadow: 10px 20px 20px 0 rgb(92 95 112 / 8%);
+      width: calc(25% - 30px * 3 / 4);
+      margin-bottom: 30px;
+      transition: 250ms transform, 250ms background-color;
+
+      &:hover {
+        transform: translateY(-8px);
+      }
+
+      @media (min-width: 1431px) {
+        &:not(:nth-child(4n)) {
+          margin-right: calc(30px);
+        }
+      }
+
+      @media (max-width: 1430px) and (min-width: 1051px) {
+        width: calc(33.33% - (30px * 2) / 3);
+
+        &:not(:nth-child(3n)) {
+          margin-right: calc(30px);
+        }
+      }
+
+      @media (max-width: 1050px) and (min-width: 761px) {
+        width: calc(50% - 30px / 2);
+
+        &:not(:nth-child(2n)) {
+          margin-right: calc(30px);
+        }
+      }
+
+      @media (max-width: 760px) {
+        width: 100%;
+      }
+
+      .notion-collection-card-cover {
+        border-radius: 0;
+        border-top-left-radius: 12px;
+        border-top-right-radius: 12px;
+        box-shadow: none;
+
+        img {
+          border-radius: 0;
+        }
+      }
+
+      .notion-collection-card-property {
+        padding: 0;
+      }
+
+      .notion-property-select-item {
+        margin-bottom: 0.3rem;
+      }
+
+      .notion-property-multi_select-item {
+        &::before {
+          content: '#';
+        }
+      }
+
+      .notion-collection-card-body {
+        display: block;
+        padding: 1rem 1.3rem 1rem;
+
+        .notion-page-icon-image {
+          display: none;
+        }
+
+        .notion-page-title-text {
+          font-size: 1rem;
+          font-weight: 600;
+          margin-bottom: 0.5rem;
+        }
+
+        .notion-property-title {
+          width: 100%;
+          display: block;
+        }
+
+        .notion-property-select {
+          margin-right: 6px;
+        }
+
+        .notion-collection-card-property:last-child {
+          overflow: initial;
+
+          .notion-property-created_time {
+            display: block;
+            width: calc(100% + 1.3rem * 2);
+            margin-left: -1.3rem;
+            padding-left: 1.3rem;
+            padding-top: 1rem;
+            margin-top: 0.9rem;
+            border-top: 1px solid var(--line-color);
+            display: block;
+            opacity: 0.7;
+            line-height: 1;
+          }
+        }
+
+        .notion-collection-card-property:nth-child(2) {
+          height: 85px;
+
+          .notion-property-text {
+            width: 100%;
+            white-space: initial;
+            color: #7a7c85;
+            font-size: 13px;
+            overflow: hidden;
+            display: -webkit-box;
+            -webkit-line-clamp: 3;
+            -webkit-box-orient: vertical;
+            text-overflow: ellipsis;
+          }
+        }
+      }
+    }
+  }
+}
+
+/**
+ * ================ 다크모드 처리 ================
+ */
+.dark-mode {
+  background-color: var(--bg-color);
+
+  // 헤더
+  .notion-header {
+    .breadcrumb {
+      text-shadow: 0 0 3px black;
+    }
+  }
+
+  // 검색
+  .notion-search {
+    color: var(--fg-color);
+    caret-color: var(--fg-color);
+    background-color: var(--bg-color-1);
+
+    input {
+      color: var(--fg-color);
+      caret-color: var(--fg-color);
+      background-color: transparent;
+
+      &::placeholder {
+        color: var(--fg-color-5);
+      }
+    }
+
+    .noResults {
+      color: var(--fg-color-5);
+    }
+
+    .noResultsDetail {
+      color: var(--fg-color-5);
+      opacity: 0.6;
+    }
+  }
+}
diff --git a/styles/custom/vars.scss b/styles/custom/vars.scss
new file mode 100644
index 0000000000..684216c751
--- /dev/null
+++ b/styles/custom/vars.scss
@@ -0,0 +1,140 @@
+// vars
+:root {
+  --notion-font: 'SpoqaHanSansNeo', 'Tossface';
+
+  --base-font-size: 1.125rem;
+
+  --primary-color: #daaa52;
+  --primary-gradient-end-color: #8763ff;
+
+  --line-color: rgba(55, 53, 47, 0.1);
+
+  --fg-color: rgb(55, 53, 47);
+  --fg-color-0: rgba(55, 53, 47, 0.09);
+  --fg-color-1: rgba(55, 53, 47, 0.16);
+  --fg-color-2: rgba(55, 53, 47, 0.4);
+  --fg-color-3: rgba(55, 53, 47, 0.6);
+  --fg-color-4: #000;
+  --fg-color-5: rgba(55, 53, 47, 0.024);
+  --fg-color-6: rgba(55, 53, 47, 0.8);
+  --fg-color-icon: var(--fg-color);
+  --fg-color-lighten: #eff3f7;
+
+  --bg-color: #ffffff;
+  --bg-color-0: rgba(135, 131, 120, 0.15);
+  --bg-color-1: rgb(247, 246, 243);
+  --bg-color-2: rgba(135, 131, 120, 0.15);
+
+  --select-color-0: var(--primary-color);
+  --select-color-1: var(--primary-color);
+  --select-color-2: #d9eff8;
+
+  --notion-red: rgb(224, 62, 62);
+  --notion-pink: rgb(173, 26, 114);
+  --notion-blue: rgb(11, 110, 153);
+  --notion-purple: rgb(105, 64, 165);
+  --notion-teal: rgb(77, 100, 97);
+  --notion-yellow: rgb(223, 171, 1);
+  --notion-orange: rgb(217, 115, 13);
+  --notion-brown: rgb(100, 71, 58);
+  --notion-gray: rgb(155, 154, 151);
+
+  --notion-red_background: rgb(251, 228, 228);
+  --notion-pink_background: rgb(244, 223, 235);
+  --notion-blue_background: rgb(221, 235, 241);
+  --notion-purple_background: rgb(234, 228, 242);
+  --notion-teal_background: rgb(221, 237, 234);
+  --notion-yellow_background: rgb(251, 243, 219);
+  --notion-orange_background: rgb(250, 235, 221);
+  --notion-brown_background: rgb(233, 229, 227);
+  --notion-gray_background: rgb(235, 236, 237);
+
+  --notion-red_background_co: rgba(251, 228, 228, 0.3);
+  --notion-pink_background_co: rgba(244, 223, 235, 0.3);
+  --notion-blue_background_co: rgba(221, 235, 241, 0.3);
+  --notion-purple_background_co: rgba(234, 228, 242, 0.3);
+  --notion-teal_background_co: rgba(221, 237, 234, 0.3);
+  --notion-yellow_background_co: rgba(251, 243, 219, 0.3);
+  --notion-orange_background_co: rgba(250, 235, 221, 0.3);
+  --notion-brown_background_co: rgba(233, 229, 227, 0.3);
+  --notion-gray_background_co: rgba(235, 236, 237, 0.3);
+
+  --notion-item-blue: rgba(0, 120, 223, 0.2);
+  --notion-item-orange: rgba(245, 93, 0, 0.2);
+  --notion-item-green: rgba(0, 135, 107, 0.2);
+  --notion-item-pink: rgba(221, 0, 129, 0.2);
+  --notion-item-brown: rgba(140, 46, 0, 0.2);
+  --notion-item-red: rgba(255, 0, 26, 0.2);
+  --notion-item-yellow: rgba(233, 168, 0, 0.2);
+  --notion-item-default: rgba(206, 205, 202, 0.5);
+  --notion-item-purple: rgba(103, 36, 222, 0.2);
+  --notion-item-gray: rgba(155, 154, 151, 0.4);
+
+  --notion-card-background-color: #ffffff;
+
+  --notion-max-width: 1400px;
+  --notion-header-height: 54px;
+
+  --notion-page-left-right-padding: calc(min(16px, 8vw));
+  --notion-page-fullwith-left-right-padding: calc(min(96px, 8vw));
+
+  --notion-aside-width: 300px;
+  --notion-aside-space-width: 5rem;
+
+  --notion-page-content-inner-width: calc(
+    var(--notion-max-width) - var(--notion-aside-width) - var(--notion-aside-space-width)
+  );
+}
+
+// dark-mode vars
+.dark-mode {
+  --line-color: rgba(255, 255, 255, 0.1);
+
+  --fg-color: rgba(255, 255, 255, 0.9);
+  --fg-color-0: var(--fg-color);
+  --fg-color-1: var(--fg-color);
+  --fg-color-2: var(--fg-color);
+  --fg-color-3: var(--fg-color);
+  --fg-color-4: var(--fg-color);
+  --fg-color-5: rgba(255, 255, 255, 0.7);
+  --fg-color-6: #fff;
+  --fg-color-icon: #fff;
+  --fg-color-lighten: #333339;
+
+  --bg-color: #1a1b1e;
+  --bg-color-0: rgb(71, 76, 80);
+  --bg-color-1: rgb(63, 68, 71);
+  --bg-color-2: rgba(135, 131, 120, 0.15);
+
+  --notion-red: rgb(255, 115, 105);
+  --notion-pink: rgb(226, 85, 161);
+  --notion-blue: rgb(82, 156, 202);
+  --notion-purple: rgb(154, 109, 215);
+  --notion-teal: rgb(77, 171, 154);
+  --notion-yellow: rgb(255, 220, 73);
+  --notion-orange: rgb(255, 163, 68);
+  --notion-brown: rgb(147, 114, 100);
+  --notion-gray: rgba(151, 154, 155, 0.95);
+
+  --notion-red_background: rgb(89, 65, 65);
+  --notion-pink_background: rgb(83, 59, 76);
+  --notion-blue_background: rgb(54, 73, 84);
+  --notion-purple_background: rgb(68, 63, 87);
+  --notion-teal_background: rgb(53, 76, 75);
+  --notion-yellow_background: rgb(89, 86, 59);
+  --notion-orange_background: rgb(89, 74, 58);
+  --notion-brown_background: rgb(67, 64, 64);
+  --notion-gray_background: rgb(69, 75, 78);
+
+  --notion-red_background_co: rgba(89, 65, 65, 0.3);
+  --notion-pink_background_co: rgba(83, 59, 76, 0.3);
+  --notion-blue_background_co: rgba(120, 162, 187, 0.3);
+  --notion-purple_background_co: rgba(68, 63, 87, 0.3);
+  --notion-teal_background_co: rgba(53, 76, 75, 0.3);
+  --notion-yellow_background_co: rgba(89, 86, 59, 0.3);
+  --notion-orange_background_co: rgba(89, 74, 58, 0.3);
+  --notion-brown_background_co: rgba(67, 64, 64, 0.3);
+  --notion-gray_background_co: rgba(69, 75, 78, 0.3);
+
+  --notion-card-background-color: #2b2c31;
+}