feat : toc

Author: pjj186

gatsby-config.ts

@@ -120,7 +120,6 @@ module.exports = {
               icon: `<svg aria-hidden="true" height="20" version="1.1" viewBox="0 0 16 16" width="20"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>`,
             },
           },
-          `gatsby-remark-prismjs`,
           {
             resolve: `gatsby-remark-copy-relative-linked-files`,
             options: {
@@ -132,11 +131,11 @@ module.exports = {
                 `bmp`,
                 `tiff`,
                 `webp`,
-                `gif`,
                 `svg`,
               ],
             },
           },
+          `gatsby-remark-prismjs`,
         ],
       },
     },

src/components/layout.tsx

@@ -20,7 +20,7 @@ const Layout = ({
 
       {/* Main Content - flex-grow로 남은 공간을 모두 차지 */}
       <main className="flex-grow">
-        <div className="container max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <div className="container max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
           {children}
         </div>
       </main>

src/components/table-of-contents.tsx

@@ -239,7 +239,7 @@ const TableOfContents: React.FC<TableOfContentsProps> = ({
           </CollapsibleContent>
         </Collapsible>
       ) : (
-        <div className="border rounded-lg p-4 bg-card/30 backdrop-blur-sm">
+        <div className="border rounded-lg p-4 bg-card/50 backdrop-blur-sm shadow-sm">
           <div className="flex items-center space-x-2 mb-4">
             <List className="w-4 h-4" />
             <span className="font-semibold text-sm">목차</span>

src/templates/blog-post.tsx

@@ -72,7 +72,7 @@ const BlogPostTemplate: React.FC<BlogPostTemplateProps> = ({
       <div className="flex flex-col lg:flex-row gap-8">
         {/* 메인 아티클 */}
         <article
-          className="flex-1 max-w-none lg:max-w-3xl"
+          className="flex-1 max-w-none lg:max-w-4xl"
           itemScope
           itemType="http://schema.org/Article"
         >
@@ -185,7 +185,7 @@ const BlogPostTemplate: React.FC<BlogPostTemplateProps> = ({
         <aside className="w-full lg:w-80 lg:shrink-0">
           <TableOfContents
             tableOfContents={post.tableOfContents}
-            className="lg:ml-8"
+            className="lg:ml-0"
           />
         </aside>
       </div>