Fix: 코드블럭 깜빡임 현상 수정

Author: lazy-dinosaur

components/code-block.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState, useEffect } from "react";
+import React, { useState, memo } from "react";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import {
   oneDark,
@@ -17,23 +17,65 @@ interface CodeBlockProps {
   filename?: string;
 }
 
-export default function CodeBlock({
+// SyntaxHighlighter를 별도 컴포넌트로 분리
+const CodeHighlighter = memo(({ 
+  language, 
+  code, 
+  isDark 
+}: { 
+  language: string; 
+  code: string; 
+  isDark: boolean;
+}) => {
+  return (
+    <SyntaxHighlighter
+      language={language}
+      style={isDark ? oneDark : oneLight}
+      customStyle={{
+        margin: 0,
+        padding: "1rem",
+        borderRadius: 0,
+        fontSize: "13px",
+        whiteSpace: "pre-wrap",
+        wordBreak: "break-all",
+        overflowWrap: "anywhere",
+        maxWidth: "100%",
+        overflowX: "visible",
+        background: isDark
+          ? "rgba(30, 30, 30, 0.95)"
+          : "rgba(250, 250, 250, 0.95)",
+        transition: "background 0.3s ease",
+      }}
+      wrapLines={true}
+      wrapLongLines={true}
+      lineProps={{
+        style: { wordBreak: "break-all", whiteSpace: "pre-wrap" },
+      }}
+      className="whitespace-pre-wrap break-all"
+      PreTag={({ children, ...props }) => (
+        <pre {...props} className="transition-colors duration-300">
+          {children}
+        </pre>
+      )}
+    >
+      {code}
+    </SyntaxHighlighter>
+  );
+});
+
+CodeHighlighter.displayName = "CodeHighlighter";
+
+function CodeBlock({
   language,
   code,
   filename,
 }: CodeBlockProps) {
   const [isCopied, setIsCopied] = useState(false);
   const [isCollapsed, setIsCollapsed] = useState(false);
-  const [mounted, setMounted] = useState(false);
   const { resolvedTheme } = useTheme();
-
-  // 서버/클라이언트 하이드레이션 불일치 방지
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  // 실제 사용할 테마 (마운트 전에는 기본값 사용)
-  const isDark = mounted ? resolvedTheme === "dark" : false;
+  
+  // 테마를 직접 체크 (서버와 클라이언트 모두에서 작동)
+  const isDark = resolvedTheme === "dark";
 
   const handleCopy = async () => {
     await navigator.clipboard.writeText(code);
@@ -70,12 +112,7 @@ export default function CodeBlock({
   };
 
   return (
-    <motion.div
-      className="relative spacing-section rounded-lg overflow-hidden border border-primary/20 shadow-md"
-      initial={{ opacity: 0, y: 10 }}
-      animate={{ opacity: 1, y: 0 }}
-      transition={{ duration: 0.4 }}
-    >
+    <div className="relative spacing-section rounded-lg overflow-hidden border border-primary/20 shadow-md">
       <div
         className="flex items-center justify-between bg-gradient-to-r from-primary/20 to-primary/5 text-primary 
         px-3 sm:px-4 py-2 sm:py-2.5 text-xs sm:text-sm font-mono border-b border-primary/15"
@@ -149,59 +186,18 @@ export default function CodeBlock({
           <div className="absolute top-0 right-0 bottom-0 w-4 bg-gradient-to-l from-black/5 to-transparent pointer-events-none"></div>
           <div className="absolute top-0 left-0 bottom-0 w-4 bg-gradient-to-r from-black/5 to-transparent pointer-events-none"></div>
 
-          {/* 마운트 전까지는 로딩 상태 표시 */}
-          {!mounted ? (
-            <div
-              className="p-4 bg-muted/30 text-muted-foreground font-mono text-xs space-y-2 animate-pulse"
-              style={{ minHeight: "8rem" }}
-            >
-              {code
-                .split("\n")
-                .slice(0, 8)
-                .map((_, idx) => (
-                  <div
-                    key={idx}
-                    className="h-4 bg-muted-foreground/20 rounded"
-                    style={{ width: `${Math.floor(Math.random() * 50) + 50}%` }}
-                  ></div>
-                ))}
-            </div>
-          ) : (
-            <SyntaxHighlighter
-              language={language}
-              style={isDark ? oneDark : oneLight}
-              customStyle={{
-                margin: 0,
-                padding: "1rem",
-                borderRadius: 0,
-                fontSize: "13px",
-                whiteSpace: "pre-wrap", // 자동 줄바꿈
-                wordBreak: "break-all", // 단어 중간에서도 줄바꿈
-                overflowWrap: "anywhere", // 어디서든 줄바꿈 허용
-                maxWidth: "100%",
-                overflowX: "visible", // 좌우 스크롤 제거
-                background: isDark
-                  ? "rgba(30, 30, 30, 0.95)"
-                  : "rgba(250, 250, 250, 0.95)",
-                transition: "background 0.3s ease",
-              }}
-              wrapLines={true}
-              wrapLongLines={true}
-              lineProps={{
-                style: { wordBreak: "break-all", whiteSpace: "pre-wrap" },
-              }}
-              className="whitespace-pre-wrap break-all"
-              PreTag={({ children, ...props }) => (
-                <pre {...props} className="transition-colors duration-300">
-                  {children}
-                </pre>
-              )}
-            >
-              {code}
-            </SyntaxHighlighter>
-          )}
+          {/* 항상 CodeHighlighter 렌더링 */}
+          <CodeHighlighter language={language} code={code} isDark={isDark} />
         </div>
       </motion.div>
-    </motion.div>
+    </div>
   );
 }
+
+export default memo(CodeBlock, (prevProps, nextProps) => {
+  return (
+    prevProps.code === nextProps.code && 
+    prevProps.language === nextProps.language &&
+    prevProps.filename === nextProps.filename
+  );
+});