Fix: 모바일화면에서 깜빡임 제거

Author: lazy-dinosaur

app/(blog)/posts/[...slug]/post-content.tsx

@@ -8,6 +8,7 @@ import { Post } from "@/lib/posts";
 import Link from "next/link";
 import { motion } from "framer-motion";
 import { ArrowLeft, ArrowRight } from "lucide-react";
+import { useIsMobile } from "@/hooks/use-mobile";
 
 interface PostContentProps {
   content: string;
@@ -28,6 +29,11 @@ export default function PostContent({
   prevPost,
   nextPost,
 }: PostContentProps) {
+  const isMobile = useIsMobile();
+  
+  // 모바일에서 애니메이션 비활성화
+  const disableAnimation = isMobile;
+  
   return (
     <>
       <div className="flex flex-col lg:flex-row gap-6">
@@ -40,6 +46,7 @@ export default function PostContent({
               published={published}
               modified={modified}
               tags={tags}
+              disableAnimation={disableAnimation}
             />
           </div>
 
@@ -49,8 +56,8 @@ export default function PostContent({
               {prevPost ? (
                 <motion.div
                   className="w-full sm:w-auto"
-                  whileHover={{ x: -3 }}
-                  transition={{ type: "spring", stiffness: 400, damping: 15 }}
+                  whileHover={disableAnimation ? {} : { x: -3 }}
+                  transition={{ type: "spring", stiffness: 400, damping: 15, duration: 0.1 }}
                 >
                   <Link
                     href={`/posts/${prevPost.urlPath}`}
@@ -80,8 +87,8 @@ export default function PostContent({
               {nextPost ? (
                 <motion.div
                   className="w-full sm:w-auto text-right"
-                  whileHover={{ x: 3 }}
-                  transition={{ type: "spring", stiffness: 400, damping: 15 }}
+                  whileHover={disableAnimation ? {} : { x: 3 }}
+                  transition={{ type: "spring", stiffness: 400, damping: 15, duration: 0.1 }}
                 >
                   <Link
                     href={`/posts/${nextPost.urlPath}`}

components/left-sidebar.tsx

@@ -5,6 +5,7 @@ import { Button } from "@/components/ui/button";
 import { Menu } from "lucide-react";
 import { TreeView } from "@/components/tree-view";
 import { useState } from "react";
+import { useIsMobile } from "@/hooks/use-mobile";
 import { DialogTitle, DialogDescription } from "@radix-ui/react-dialog";
 import { usePosts } from "@/contexts/posts-context";
 import { buildFolderStructure } from "@/lib/utils";
@@ -21,6 +22,7 @@ export default function LeftSidebar({ className }: LeftSidebarProps) {
   const [open, setOpen] = useState(false);
   const { posts } = usePosts();
   const pathname = usePathname();
+  const isMobile = useIsMobile();
   const folderStructure = buildFolderStructure(posts);
 
   // URL이 변경될 때마다 컴포넌트를 강제로 리렌더링하기 위한 key 생성
@@ -56,21 +58,21 @@ export default function LeftSidebar({ className }: LeftSidebarProps) {
       {/* 데스크톱 버전 */}
       <motion.aside 
         key={sidebarKey}
-        className={cn("hidden xl:block", className)}
-        initial={{ opacity: 0, x: -20 }}
+        className={cn("hidden xl:block motion-gpu", className)}
+        initial={false} // 깜빡임 방지
         animate={{ opacity: 1, x: 0 }}
         transition={{ 
-          duration: 0.15,
+          duration: isMobile ? 0.1 : 0.15,
           ease: "easeOut",
-          delay: 0.05
+          delay: 0
         }}
       >
         <ScrollArea className="h-full">
           <SidebarSection title="카테고리">
             <motion.div
-              initial={{ opacity: 0 }}
+              initial={false}
               animate={{ opacity: 1 }}
-              transition={{ delay: 0.1, duration: 0.1 }}
+              transition={{ duration: isMobile ? 0.05 : 0.1 }}
             >
               <TreeView key={`desktop-tree-${pathname}`} data={folderStructure} />
             </motion.div>

components/markdown-renderer.tsx

@@ -8,13 +8,15 @@ import { Element } from "hast";
 import CodeBlock from "./code-block";
 import { motion } from "framer-motion";
 import remarkCallout from "@r4ai/remark-callout";
+import { useIsMobile } from "@/hooks/use-mobile";
 
 export interface MarkdownRendererProps {
   content: string;
   publish?: string;
   tags?: string[];
   published?: string;
   modified?: string;
+  disableAnimation?: boolean; // 애니메이션 비활성화 옵션 추가
 }
 
 interface LinkMap {
@@ -37,7 +39,11 @@ export default function MarkdownRenderer({
   tags,
   published,
   modified,
+  disableAnimation = false,
 }: MarkdownRendererProps) {
+  // 기본적으로 모바일에서는 애니메이션 비활성화
+  const isMobile = useIsMobile();
+  const shouldDisableAnimation = disableAnimation || isMobile;
   const [linkMap, setLinkMap] = useState<LinkMap>({});
   const [isMapLoaded, setIsMapLoaded] = useState(false);
   useEffect(() => {
@@ -291,10 +297,10 @@ export default function MarkdownRenderer({
     },
     img: ({ src, alt }: { src?: string; alt?: string }) => (
       <motion.div
-        className="spacing-section relative group"
-        initial={{ opacity: 0, scale: 0.95 }}
+        className="spacing-section relative group motion-gpu"
+        initial={shouldDisableAnimation ? false : { opacity: 0, scale: 0.95 }}
         animate={{ opacity: 1, scale: 1 }}
-        transition={{ duration: 0.2 }}
+        transition={{ duration: shouldDisableAnimation ? 0 : 0.2 }}
       >
         <div className="flex flex-col w-full items-center justify-center">
           <div
@@ -396,10 +402,10 @@ export default function MarkdownRenderer({
     blockquote: ({ children }: { children?: React.ReactNode }) => (
       <motion.blockquote
         className="spacing-paragraph border-l-4 border-primary pl-4 sm:pl-5 md:pl-6 py-2 sm:py-3
-          bg-primary/5 rounded-r-lg shadow-sm"
-        initial={{ opacity: 0, x: -5 }}
+          bg-primary/5 rounded-r-lg shadow-sm motion-gpu"
+        initial={shouldDisableAnimation ? false : { opacity: 0, x: -5 }}
         animate={{ opacity: 1, x: 0 }}
-        transition={{ duration: 0.15 }}
+        transition={{ duration: shouldDisableAnimation ? 0 : 0.15 }}
       >
         <div className="text-foreground/80 italic font-medium">{children}</div>
       </motion.blockquote>
@@ -419,10 +425,10 @@ export default function MarkdownRenderer({
     ),
     table: ({ children }: { children?: React.ReactNode }) => (
       <motion.div
-        className="spacing-section overflow-x-auto rounded-md sm:rounded-lg border border-primary/10 shadow-sm"
-        initial={{ opacity: 0 }}
+        className="spacing-section overflow-x-auto rounded-md sm:rounded-lg border border-primary/10 shadow-sm motion-gpu"
+        initial={shouldDisableAnimation ? false : { opacity: 0 }}
         animate={{ opacity: 1 }}
-        transition={{ duration: 0.15 }}
+        transition={{ duration: shouldDisableAnimation ? 0 : 0.15 }}
       >
         <table className="w-full border-collapse text-hierarchy-body">
           {children}
@@ -446,10 +452,10 @@ export default function MarkdownRenderer({
     ),
     hr: () => (
       <motion.hr
-        className="spacing-section border-none h-px bg-gradient-to-r from-transparent via-primary/30 to-transparent"
-        initial={{ width: 0 }}
+        className="spacing-section border-none h-px bg-gradient-to-r from-transparent via-primary/30 to-transparent motion-gpu"
+        initial={shouldDisableAnimation ? false : { width: 0 }}
         animate={{ width: "100%" }}
-        transition={{ duration: 0.2 }}
+        transition={{ duration: shouldDisableAnimation ? 0 : 0.2 }}
       />
     ),
     input: ({ checked }: { checked?: boolean }) => (

components/right-sidebar.tsx

@@ -17,6 +17,7 @@ interface RightSidebarProps {
 
 const RightSidebar = ({ className }: RightSidebarProps) => {
   const pathname = usePathname();
+  const isMobile = useIsMobile();
 
   // 포스트 페이지인지 확인 (/posts/로 시작하는 경로)
   const isPostPage = pathname.startsWith("/posts/");
@@ -27,13 +28,13 @@ const RightSidebar = ({ className }: RightSidebarProps) => {
   return (
     <motion.aside
       key={sidebarKey}
-      className={cn("hidden xl:block", className)}
-      initial={{ opacity: 0, x: 20 }}
+      className={cn("hidden xl:block motion-gpu", className)}
+      initial={false} // 모바일에서 깜빡임 방지를 위해 초기 애니메이션 비활성화
       animate={{ opacity: 1, x: 0 }}
       transition={{
-        duration: 0.15,
+        duration: isMobile ? 0.1 : 0.15,
         ease: "easeOut",
-        delay: 0.05,
+        delay: 0,
       }}
     >
       {isPostPage && (