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

This reverts commit 3900df1.

Author: lazy-dinosaur

components/code-block.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState, memo } from "react";
+import React, { useState, useEffect } from "react";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import {
   oneDark,
@@ -17,65 +17,23 @@ interface CodeBlockProps {
   filename?: string;
 }
 
-// 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({
+export default function CodeBlock({
   language,
   code,
   filename,
 }: CodeBlockProps) {
   const [isCopied, setIsCopied] = useState(false);
   const [isCollapsed, setIsCollapsed] = useState(false);
+  const [mounted, setMounted] = useState(false);
   const { resolvedTheme } = useTheme();
-  
-  // 테마를 직접 체크 (서버와 클라이언트 모두에서 작동)
-  const isDark = resolvedTheme === "dark";
+
+  // 서버/클라이언트 하이드레이션 불일치 방지
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  // 실제 사용할 테마 (마운트 전에는 기본값 사용)
+  const isDark = mounted ? resolvedTheme === "dark" : false;
 
   const handleCopy = async () => {
     await navigator.clipboard.writeText(code);
@@ -112,7 +70,12 @@ function CodeBlock({
   };
 
   return (
-    <div className="relative spacing-section rounded-lg overflow-hidden border border-primary/20 shadow-md">
+    <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="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"
@@ -186,18 +149,59 @@ 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>
 
-          {/* 항상 CodeHighlighter 렌더링 */}
-          <CodeHighlighter language={language} code={code} isDark={isDark} />
+          {/* 마운트 전까지는 로딩 상태 표시 */}
+          {!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>
+          )}
         </div>
       </motion.div>
-    </div>
+    </motion.div>
   );
 }
-
-export default memo(CodeBlock, (prevProps, nextProps) => {
-  return (
-    prevProps.code === nextProps.code && 
-    prevProps.language === nextProps.language &&
-    prevProps.filename === nextProps.filename
-  );
-});