Merge(feature): 뒤로 가기 시 스크롤 위치 복원

feature: 뒤로 가기 시 스크롤 위치 복원

Author: gitul0515

src/hooks/useLocalToken.jsx src/hooks/useLocalToken.jssrc/hooks/useLocalToken.jsx renamed to src/hooks/useLocalToken.js

@@ -0,0 +1,5 @@
+import useSessionStorage from './useSessionStorage';
+
+const SCROLL_POSITION_KEY = 'prevPostIndex';
+
+export default () => useSessionStorage(SCROLL_POSITION_KEY, 0);

src/hooks/useScrollPosition.js

@@ -0,0 +1,14 @@
+import { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+
+const useScrollToTop = () => {
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [pathname]);
+
+  return null;
+};
+
+export default useScrollToTop;

src/hooks/useScrollToTop.js

@@ -0,0 +1,26 @@
+import { useState } from 'react';
+
+const useSessionStorage = (key, initialValue) => {
+  const [storedValue, setStoredValue] = useState(() => {
+    try {
+      const item = sessionStorage.getItem(key);
+      return item ? JSON.parse(item) : initialValue;
+    } catch (error) {
+      console.error(error);
+      return initialValue;
+    }
+  });
+
+  const setValue = (value) => {
+    try {
+      setStoredValue(value);
+      sessionStorage.setItem(key, JSON.stringify(value));
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  return [storedValue, setValue];
+};
+
+export default useSessionStorage;

src/hooks/useSessionStorage.js

@@ -8,45 +8,52 @@ import theme from 'styles/theme';
 import { setLike, setDisLike } from 'utils/apis/postApi';
 import { setNotification } from 'utils/apis/userApi';
 import useLocalToken from 'hooks/useLocalToken';
+import useScrollPosition from 'hooks/useScrollPosition';
 import { useUserContext } from 'contexts/UserContext';
 import { IMAGE_URLS } from 'utils/constants/images';
 import displayedAt from 'utils/functions/displayedAt';
 
-const PostBody = ({ post, isDetailPage = false }) => {
+const PostBody = ({ index, post, isDetailPage = false }) => {
   const { _id: postId, image, likes, comments, createdAt, author } = post || {};
-  const { content, contents, tags } = JSON.parse(post?.title);
+  const { content, tags } = JSON.parse(post?.title);
   const [onHeart, setOnHeart] = useState(false);
   const [heartCount, setHeartCount] = useState(likes.length);
   const [likeId, setLikeId] = useState('');
   const [isShown, setIsShown] = useState(false);
   const [localToken] = useLocalToken();
   const { currentUser } = useUserContext();
-
+  const [, setCurrentPostIndex] = useScrollPosition();
   const navigate = useNavigate();
 
-  const handleTodetailpage = useCallback(() => {
+  useEffect(() => {
+    let likeId;
+    const isMyLikePost =
+      likes.filter(({ user, _id }) => {
+        if (user === currentUser.id) {
+          likeId = _id;
+          return true;
+        }
+      }).length > 0;
+    if (isMyLikePost) {
+      setOnHeart(true);
+      setLikeId(likeId);
+    }
+  }, [currentUser, likes]);
+
+  const navigateToDetailPage = useCallback(() => {
     if (isDetailPage) {
       return;
     }
+    setCurrentPostIndex(index + 1);
     navigate(`/post/detail/${postId}`, {
       state: {
         post,
+        index,
       },
     });
-  }, [postId, post, isDetailPage, navigate]);
+  }, [setCurrentPostIndex, index, postId, post, isDetailPage, navigate]);
 
-  const handleTagClick = useCallback(
-    (tag) => {
-      navigate(`/tag/${tag.slice(1)}`, {
-        state: {
-          tag,
-        },
-      });
-    },
-    [navigate],
-  );
-
-  const handleHeartClick = useCallback(async () => {
+  const handleClickHeart = useCallback(async () => {
     setOnHeart(!onHeart);
     if (!onHeart) {
       setHeartCount(heartCount + 1);
@@ -66,28 +73,25 @@ const PostBody = ({ post, isDetailPage = false }) => {
     }
   }, [onHeart, heartCount, postId, likeId, author._id, currentUser, localToken]);
 
-  useEffect(() => {
-    let likeId;
-    const isMyLikePost =
-      likes.filter(({ user, _id }) => {
-        if (user === currentUser.id) {
-          likeId = _id;
-          return true;
-        }
-      }).length > 0;
-    if (isMyLikePost) {
-      setOnHeart(true);
-      setLikeId(likeId);
-    }
-  }, [currentUser, likes]);
+  const handleClickTag = useCallback(
+    (tag) => {
+      setCurrentPostIndex(index + 1);
+      navigate(`/tag/${tag.slice(1)}`, {
+        state: {
+          tag,
+        },
+      });
+    },
+    [index, setCurrentPostIndex, navigate],
+  );
 
-  const handleMoreClick = () => {
+  const handleClickMore = () => {
     setIsShown(true);
   };
 
   return (
     <Container>
-      <ImageWrapper onClick={handleTodetailpage} isDetailPage={isDetailPage}>
+      <ImageWrapper onClick={navigateToDetailPage} isDetailPage={isDetailPage}>
         <Image
           src={image ? image : IMAGE_URLS.POST_DEFAULT_IMG}
           defaultImageUrl={IMAGE_URLS.POST_DEFAULT_IMG}
@@ -98,13 +102,12 @@ const PostBody = ({ post, isDetailPage = false }) => {
       <Contents>
         <IconButtons>
           <IconButton
-            className="heart-button"
             name={onHeart ? 'HEART_RED' : 'HEART'} // Todo: 상수화
-            onClick={handleHeartClick}
+            onClick={handleClickHeart}
           >
             <IconButtonText>{heartCount}</IconButtonText>
           </IconButton>
-          <IconButton className="comment-button" name="COMMENT" onClick={handleTodetailpage}>
+          <IconButton name="COMMENT" onClick={navigateToDetailPage}>
             <IconButtonText>{comments.length}</IconButtonText>
           </IconButton>
         </IconButtons>
@@ -113,12 +116,12 @@ const PostBody = ({ post, isDetailPage = false }) => {
             {content}
           </Paragraph>
           {!isDetailPage && content?.length > 50 && !isShown && (
-            <MoreText onClick={handleMoreClick}>더보기</MoreText>
+            <MoreText onClick={handleClickMore}>더보기</MoreText>
           )}
         </TextContainer>
         <Tags>
           {tags.map((tag, i) => (
-            <Tag key={i} onClick={() => handleTagClick(tag)}>
+            <Tag key={i} onClick={() => handleClickTag(tag)}>
               {tag[0] === '#' ? tag : `#${tag}`}
             </Tag>
           ))}
@@ -155,7 +158,7 @@ const IconButtons = styled.div`
   display: flex;
 `;
 
-const IconButton = ({ name, className, children, onClick }) => {
+const IconButton = ({ name, children, onClick }) => {
   const style = {
     padding: 0,
     borderRadius: '0',
@@ -167,7 +170,7 @@ const IconButton = ({ name, className, children, onClick }) => {
     color: theme.color.fontBlack,
   };
   return (
-    <button className={className} style={style} onClick={onClick}>
+    <button style={style} onClick={onClick}>
       <Icon name={name} size={22} />
       {children}
     </button>

src/pages/MainPage/PostBody.jsx

@@ -3,11 +3,11 @@ import PostBody from './PostBody';
 import styled from '@emotion/styled';
 import theme from 'styles/theme';
 
-const PostItem = ({ post, isDetailPage }) => {
+const PostItem = ({ index, post, isDetailPage }) => {
   return (
     <Article>
       <PostHeader post={post} isDetailPage={isDetailPage} />
-      <PostBody post={post} isDetailPage={isDetailPage} />
+      <PostBody index={index} post={post} isDetailPage={isDetailPage} />
     </Article>
   );
 };

src/pages/MainPage/PostItem.jsx

@@ -3,50 +3,60 @@ import { PageWrapper } from 'components';
 import { getPostsPart } from 'utils/apis/postApi';
 import PostItem from './PostItem';
 import { useState, useEffect, useCallback, useRef } from 'react';
+import useScrollPosition from 'hooks/useScrollPosition';
 
 const LIMIT = 5;
 
 const MainPage = () => {
   const [posts, setPosts] = useState([]);
-  const [isLoding, setIsLoding] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
   const [offset, setOffset] = useState(0);
   const [max, setMax] = useState(0);
   const targetRef = useRef(null);
+  const [prevPostIndex, setPrevPostIndex] = useScrollPosition();
 
   useEffect(() => {
+    const limit = prevPostIndex ? prevPostIndex : LIMIT;
     (async () => {
       const nextPosts = await getPostsPart({
         offset,
-        limit: LIMIT,
+        limit,
       }).then((res) => res.data);
       setPosts(nextPosts);
-      setOffset(offset + 5);
       setMax(nextPosts[0].channel.posts.length);
+      setOffset(prevPostIndex ? prevPostIndex : 5);
     })();
   }, []);
 
+  useEffect(() => {
+    if (targetRef.current && prevPostIndex) {
+      window.scrollTo(0, document.body.scrollHeight);
+      setPrevPostIndex(0);
+    }
+  }, [targetRef, prevPostIndex, setPrevPostIndex]);
+
   const onIntersect = useCallback(
     async ([entry], observer) => {
-      if (entry.isIntersecting && !isLoding && offset < max) {
+      if (entry.isIntersecting && !isLoading && offset < max) {
         observer.disconnect();
-        setIsLoding(true);
+        setIsLoading(true);
         setOffset(offset + 5);
         const nextPosts = await getPostsPart({
           offset,
           limit: LIMIT,
         }).then((res) => res.data);
         setPosts([...posts, ...nextPosts]);
-        setIsLoding(false);
+        setIsLoading(false);
       }
     },
-    [isLoding, offset, max, posts],
+    [isLoading, offset, max, posts],
   );
 
   useEffect(() => {
     let observer;
     if (targetRef.current) {
       observer = new IntersectionObserver(onIntersect, {
-        threshold: 0.4,
+        threshold: 0.5,
       });
       observer.observe(targetRef.current);
     }
@@ -60,13 +70,13 @@ const MainPage = () => {
           if (posts.length - 1 === i) {
             return (
               <li key={i} ref={targetRef}>
-                <PostItem key={i} post={post} />
+                <PostItem key={i} index={i} post={post} />
               </li>
             );
           } else {
             return (
               <li key={i}>
-                <PostItem key={i} post={post} />
+                <PostItem key={i} index={i} post={post} />
               </li>
             );
           }

src/pages/MainPage/index.jsx

@@ -4,7 +4,6 @@ import { Avatar, Icon, Modal, PageWrapper } from 'components';
 import theme from 'styles/theme';
 import { useRef, useCallback, useState, useEffect } from 'react';
 import { addComment } from 'utils/apis/postApi';
-import { IMAGE_URLS } from 'utils/constants/images';
 import useLocalToken from 'hooks/useLocalToken';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { getPostData, deleteComment } from 'utils/apis/postApi';
@@ -97,7 +96,7 @@ const PostDetailPage = () => {
       {post && (
         <PageWrapper header nav prev title={post.author.fullName + '님의 게시물'}>
           <Container>
-            <PostItem post={post} isDetailPage={true} />
+            <PostItem post={post} isDetailPage={true} index={location.state?.index} />
             <CommentInputForm onSubmit={handleSubmit}>
               <CommentInput
                 ref={inputRef}

src/pages/PostDetailPage/index.jsx

@@ -2,6 +2,7 @@ import { useEffect } from 'react';
 import useLocalToken from 'hooks/useLocalToken';
 import { Routes, Route, useNavigate } from 'react-router-dom';
 import { useUserContext } from 'contexts/UserContext';
+import useScrollToTop from 'hooks/useScrollToTop';
 import {
   LoginPage,
   SignupPage,
@@ -22,6 +23,7 @@ const Router = () => {
   const navigate = useNavigate();
   const [token] = useLocalToken();
   const { onKeepLoggedIn } = useUserContext();
+  useScrollToTop();
 
   useEffect(() => {
     if (!token) {

src/routes/Router.jsx

@@ -1,20 +1,8 @@
 import styled from '@emotion/styled';
-import { useEffect, useState } from 'react';
 
 const DefaultTemplate = ({ children }) => {
-  const [height, setHeight] = useState(window.innerHeight);
-
-  const handleResize = () => {
-    setHeight(window.innerHeight);
-  };
-
-  useEffect(() => {
-    window.addEventListener('resize', handleResize);
-    return () => window.removeEventListener('resize', handleResize);
-  });
-
   return (
-    <Container id="default-template-container" height={height}>
+    <Container id="default-template-container">
       <StyledMain>{children}</StyledMain>
     </Container>
   );
@@ -29,11 +17,10 @@ const Container = styled.div`
   flex-direction: column;
   position: relative;
   width: 500px;
+  min-height: 100vh;
   overflow-x: hidden;
   margin: 0 auto;
-  height: ${({ height }) => `${height}`}px;
   background-color: ${({ theme }) => theme.color.mainWhite};
-
   -ms-overflow-style: none;
 
   ::-webkit-scrollbar {