fix: 채팅방 resize에 따른 스크롤 설정

Mallang-Trip · Dec 17, 2024 · aa66d34 · aa66d34
1 parent 68d3b08
commit aa66d34
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 23 deletions.
diff --git a/src/pages/TalkPage/TalkRoom/TalkRoomBody/index.tsx b/src/pages/TalkPage/TalkRoom/TalkRoomBody/index.tsx
@@ -35,36 +35,52 @@ function TalkRoomBody({
   const user = useSelector((state: RootState) => state.user);
   const [showScrollButton, setShowScrollButton] = useState(false);
 
-  const scrollDownHandler = useCallback(() => {
-    const talkRoomSpace = talkRoomRef.current;
-    if (talkRoomSpace) {
-      const { scrollHeight, clientHeight } = talkRoomSpace;
-      talkRoomSpace.scrollTo({
-        top: scrollHeight - clientHeight,
-        behavior: "smooth",
-      });
-    }
-  }, [talkRoomRef]);
+  const scrollDownHandler = useCallback(
+    (smooth: boolean = false) => {
+      const talkRoomSpace = talkRoomRef.current;
+      if (talkRoomSpace) {
+        const { scrollHeight, clientHeight } = talkRoomSpace;
+        talkRoomSpace.scrollTo({
+          top: scrollHeight - clientHeight,
+          behavior: smooth ? "smooth" : "auto",
+        });
+      }
+    },
+    [talkRoomRef]
+  );
+
+  useEffect(() => {
+    const handleResize = () => {
+      scrollDownHandler();
+    };
+
+    window.addEventListener("resize", handleResize);
+    scrollDownHandler();
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [scrollDownHandler]);
 
   useEffect(() => {
     const handleScroll = () => {
       if (!talkRoomRef.current) return;
       const { scrollHeight, clientHeight, scrollTop } = talkRoomRef.current;
       const isScrolledToBottom = scrollHeight - clientHeight <= scrollTop + 200;
-
       setShowScrollButton(!isScrolledToBottom);
     };
 
-    talkRoomRef.current?.addEventListener("scroll", handleScroll);
+    const currentRef = talkRoomRef.current;
+    currentRef?.addEventListener("scroll", handleScroll);
     return () => {
-      talkRoomRef.current?.removeEventListener("scroll", handleScroll);
+      currentRef?.removeEventListener("scroll", handleScroll);
     };
   }, []);
 
   useEffect(() => {
-    if (showScrollButton) return;
-    scrollDownHandler();
-  }, [messages]);
+    if (!showScrollButton) {
+      scrollDownHandler(true);
+    }
+  }, [messages, showScrollButton, scrollDownHandler]);
 
   return (
     <div
@@ -107,7 +123,7 @@ function TalkRoomBody({
             width: `${talkRoomRef.current?.clientWidth}px`,
           }}
         >
-          <button onClick={scrollDownHandler}>
+          <button onClick={() => scrollDownHandler(true)}>
             <img
               src={chatArrowIcon}
               alt="chat-down"

diff --git a/src/pages/TalkPage/TalkRoom/TalkRoomWrapper/index.tsx b/src/pages/TalkPage/TalkRoom/TalkRoomWrapper/index.tsx
@@ -40,11 +40,11 @@ function TalkRoomWrapper({ children }: Props) {
   }, []);
 
   useEffect(() => {
-    document.body.style.overflow = "hidden";
+    document.documentElement.style.height = styleHeight;
     return () => {
-      document.body.style.overflow = "auto";
+      document.documentElement.style.height = "";
     };
-  }, []);
+  }, [styleHeight]);
 
   return (
     <div

diff --git a/src/pages/TalkPage/index.tsx b/src/pages/TalkPage/index.tsx
@@ -80,10 +80,9 @@ function TalkPage() {
   useEffect(() => {
     getChatListFunc();
 
-    document.body.classList.add("overflow-hidden");
+    document.body.style.overflow = "hidden";
     return () => {
-      document.body.classList.remove("overflow-hidden");
-      if (client.current) client.current.deactivate();
+      document.body.style.overflow = "auto";
     };
   }, []);