refactor: layout shift 최소화를 위한 reflow 작업 제거

woowacourse · Sep 5, 2023 · 176e675 · 176e675
1 parent a40d31b
commit 176e675
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 4 deletions.
diff --git a/src/pages/Home/components/CustomCursor/CustomCursor.tsx b/src/pages/Home/components/CustomCursor/CustomCursor.tsx
@@ -14,8 +14,7 @@ const CustomCursor = ({ text = '' }: CustomCursorProps) => {
 
   useEffect(() => {
     if (cursorRef.current) {
-      cursorRef.current.style.top = `${mousePosition.pageY}px`;
-      cursorRef.current.style.left = `${mousePosition.pageX}px`;
+      cursorRef.current.style.transform = `translate(${mousePosition.pageX}px, ${mousePosition.pageY}px)`;
     }
   }, [mousePosition]);
 

diff --git a/src/pages/Search/components/GifItem/GifItem.module.css b/src/pages/Search/components/GifItem/GifItem.module.css
@@ -14,7 +14,8 @@
 }
 
 .gifItem:hover {
-  top: -0.75rem;
+  /* top: -0.75rem; */
+  transform: translateY(-0.75rem);
 }
 
 .gifImage {

diff --git a/src/pages/Search/components/HelpPanel/HelpPanel.module.css b/src/pages/Search/components/HelpPanel/HelpPanel.module.css
@@ -24,7 +24,7 @@
 }
 
 .selectedItemContainer.showSheet {
-  right: 0;
+  transform: translateX(-320px);
   opacity: 1;
 }