Fix: 깜빡임 문제 해결중

lazy-dinosaur · lazy-dinosaur · commit 445f507198b1 · 2025-03-11T19:30:22.000+09:00
diff --git a/app/globals.css b/app/globals.css
@@ -231,6 +231,29 @@
   }
 }
 
+/* iOS Safari 특화 스타일 */
+@supports (-webkit-touch-callout: none) {
+  .motion-gpu {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    -webkit-perspective: 1000;
+    perspective: 1000;
+  }
+  
+  body {
+    -webkit-overflow-scrolling: touch;
+  }
+  
+  /* iOS에서 애니메이션 시간 추가 단축 */
+  [class*="animate-"], 
+  [class*="motion-"] {
+    transition-duration: 0.1s !important;
+    animation-duration: 0.1s !important;
+  }
+}
+
 /* 사용자가 애니메이션 축소 선호 설정을 켠 경우 */
 @media (prefers-reduced-motion: reduce) {
   * {
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -56,6 +56,25 @@ export default async function RootLayout({
 
   return (
     <html lang="ko" suppressHydrationWarning>
+      <head>
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+              // iOS Safari 깜빡임 방지를 위한 즉시 실행 스크립트
+              (function() {
+                if (/iPhone|iPad|iPod/i.test(navigator.userAgent)) {
+                  document.documentElement.style.opacity = '0.99';
+                  window.addEventListener('load', function() {
+                    setTimeout(function() {
+                      document.documentElement.style.opacity = '1';
+                    }, 100);
+                  });
+                }
+              })();
+            `,
+          }}
+        />
+      </head>
       <body
         className={`${geistSans.variable} ${geistMono.variable} ${inter.variable} ${notoSansKr.variable} antialiased transition-all`}
       >
diff --git a/components/page-loader.tsx b/components/page-loader.tsx
@@ -12,10 +12,16 @@ export default function PageLoader() {
   // 초기 로딩 처리
   useEffect(() => {
     setLoading(true);
+    
+    // iOS Safari 감지
+    const isIOS = /iPhone|iPad|iPod/i.test(
+      typeof navigator !== 'undefined' ? navigator.userAgent : ''
+    );
+    
     const timer = setTimeout(() => {
       setLoading(false);
       setFirstRender(false);
-    }, 600); // 600ms 정도의 로딩 시간
+    }, isIOS ? 300 : 600); // iOS에서는 로딩 시간 단축
 
     return () => clearTimeout(timer);
   }, [pathname]);
