feat: Update font family for TableOfContent

Author: yuhwan-park

components/TableOfContent.tsx

@@ -67,12 +67,12 @@ export default function TableOfContent({
   return (
     <aside
       className={$(
-        'fixed top-[var(--page-top)] flex max-w-[220px] -translate-x-[230px] translate-y-[140px] flex-col',
+        'fixed top-[var(--page-top)] flex max-w-[220px] -translate-x-[230px] translate-y-[140px] flex-col font-mono',
         'duration-750 transition-opacity lg:block lg:opacity-100',
         'md:hidden md:opacity-0',
       )}
     >
-      <ul {...props} className={$('space-y-2.5 font-sans text-sm', className)}>
+      <ul {...props} className={$('space-y-2.5 text-sm', className)}>
         {toc.map((section, i) => (
           <TOCItem key={i} section={section} currentSectionSlug={currentSectionSlug} />
         ))}

tailwind.config.mjs

@@ -1,10 +1,15 @@
 import typography from '@tailwindcss/typography';
+import { fontFamily } from 'tailwindcss/defaultTheme';
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ['./app/**/*.tsx', './components/**/*.tsx'],
   darkMode: 'class',
   theme: {
+    fontFamily: {
+      sans: ['var(--font-sans)', ...fontFamily.sans],
+      mono: ['var(--font-mono)', ...fontFamily.mono],
+    },
     extend: {
       colors: {
         neutral: {