feat: 코드블럭 복사 버튼 추가

Author: cobocho

src/app/layout.tsx

@@ -3,7 +3,6 @@ import type { Metadata } from 'next'
 import { Noto_Sans_KR, Poppins } from 'next/font/google'
 import { GoogleAnalytics } from '@next/third-parties/google'
 
-import { AutoScroll } from '@/components/layout/AutoScroll'
 import { OutLineMenu } from '@/components/layout/OutLineMenu'
 
 import './globals.css'
@@ -64,7 +63,6 @@ export default function RootLayout({
           >
             {children}
           </div>
-          <AutoScroll />
         </OutLineMenu>
         <GoogleAnalytics gaId={GA_TRACKING_ID} />
       </body>

src/components/post/PostContent/ContentElements/PostCodeBlock.tsx

@@ -1,5 +1,7 @@
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
-import React from 'react'
+'use client'
+
+import React, { useState } from 'react'
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
 import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism'
 
@@ -9,18 +11,68 @@ interface PostCodeBlockProps {
 }
 
 export const PostCodeBlock = ({ children, language }: PostCodeBlockProps) => {
+  const [copied, setCopied] = useState(false)
+
+  const handleCopy = () => {
+    void navigator.clipboard.writeText(children).then(() => {
+      setCopied(true)
+      setTimeout(() => setCopied(false), 2000)
+    })
+  }
+
   return (
-    <SyntaxHighlighter
-      language={language}
-      style={vscDarkPlus}
-      PreTag="div"
-      showLineNumbers
-      customStyle={{
-        borderRadius: '1rem',
-        marginBottom: '3rem',
-      }}
-    >
-      {children}
-    </SyntaxHighlighter>
+    <div className="relative mb-12">
+      <button
+        onClick={handleCopy}
+        className="absolute right-3 top-3 z-10 rounded-md bg-gray-700 p-1.5 text-gray-300 transition-colors hover:bg-gray-600 hover:text-white"
+        aria-label="Copy code"
+      >
+        {copied ? (
+          <span className="flex items-center gap-1.5 text-sm text-gray-300">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="18"
+              height="18"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
+              <polyline points="20 6 9 17 4 12" />
+            </svg>
+            Copied
+          </span>
+        ) : (
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="18"
+            height="18"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
+            <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
+          </svg>
+        )}
+      </button>
+      <SyntaxHighlighter
+        language={language}
+        style={vscDarkPlus}
+        wrapLongLines
+        PreTag="div"
+        customStyle={{
+          borderRadius: '1rem',
+          marginBottom: '0',
+        }}
+      >
+        {children}
+      </SyntaxHighlighter>
+    </div>
   )
 }