Skip to content

Commit

Permalink
refactor: 스크롤 로직 변경
Browse files Browse the repository at this point in the history
- useRef 변수를 통해 스크롤 방향이 변할 때만, 리렌더링
  • Loading branch information
pepperdad committed Jan 5, 2025
1 parent b9ed031 commit d2a0d63
Showing 1 changed file with 11 additions and 18 deletions.
29 changes: 11 additions & 18 deletions src/pages/main/components/floating/Floating.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { useLogin, useModal } from "@hooks";
import { requestKakaoLogin } from "@utils/kakaoLogin";
import { useEffect, useState } from "react";
import { useEffect, useRef, useState } from "react";
import { useNavigate } from "react-router-dom";
import * as S from "./Floating.styled";

Expand All @@ -25,26 +25,19 @@ const Floating = () => {

const [width, setWidth] = useState(window.innerWidth);
const [showText, setShowText] = useState(true);
const lastScrollY = useRef(0);

useEffect(() => {
let lastScrollY = window.scrollY;

const handleResize = () => {
setWidth(window.innerWidth);
};

const handleScroll = () => {
const currentScrollY = window.scrollY;

if (currentScrollY > lastScrollY) {
setShowText(false);
} else if (currentScrollY < lastScrollY) {
setShowText(true);
}
const handleResize = () => {
setWidth(window.innerWidth);
};

lastScrollY = currentScrollY;
};
const handleScroll = () => {
const currentScrollY = window.scrollY;
setShowText(currentScrollY < lastScrollY.current);
lastScrollY.current = currentScrollY;
};

useEffect(() => {
window.addEventListener("resize", handleResize);
window.addEventListener("scroll", handleScroll);
return () => {
Expand Down

0 comments on commit d2a0d63

Please sign in to comment.