Fix/#95: 페이지 별로 마지막 스크롤 위치 복원 기능 오류 수정 (#121)

* refactor: useInitScrollPosition 훅 인지로 pageName 받는 대신 내부에서 location 객체 활용

* fix: 스크롤 도중 라우팅 시 빈화면이 보이는 오류 해결

height에 vh, dvh 단위를 쓴 것이 원인으로 보입니다. 주소창 영역을 감지하지 못해 하단 일부가 잘려보일 것으로 우려했으나, 시뮬에서 정상적으로 보여 실제 기기에서 테스트를 위해 배포를 진행해봅니다.

src/hooks/useInitScrollPosition.ts

@@ -1,19 +1,15 @@
 import { useLayoutEffect } from 'react';
+import { useLocation } from 'react-router-dom';
 
 import useRouteMatched from './useRouteMatch';
 import { useMobileViewRefContext } from '../layouts/contexts/MobileViewContext';
 
-const getPageScrollPosition = (pageName: string) => {
-  return JSON.parse(sessionStorage.getItem(pageName) || '{}');
-};
-
-const setPageScrollPosition = (pageName: string, position: number) => {
-  sessionStorage.setItem(pageName, JSON.stringify(position));
-};
+const scrollPosition: Record<string, number> = {};
 
-const useInitScrollPosition = (pageName: string) => {
+const useInitScrollPosition = () => {
   const { mobileViewRef } = useMobileViewRefContext();
   const { hasMatched } = useRouteMatched();
+  const { pathname } = useLocation();
 
   useLayoutEffect(() => {
     const mobileView = mobileViewRef.current;
@@ -22,17 +18,17 @@ const useInitScrollPosition = (pageName: string) => {
 
     // 이전 스크롤 위치가 있다면 세션 스토리지에서 가져와 이전 스크롤 위치로 조정합니다.
     // 단, 글쓰기, 글쓰기 수정, 프로필 수정, 회원가입 페이지는 스크롤 위치를 기록하지 않고 0으로 초기화합니다.
-    const prevScrollPosition = getPageScrollPosition(pageName) || 0;
+    const prevScrollPosition = scrollPosition[pathname] || 0;
     const isNotRecordScrollPosition = hasMatched('/write', '/write-edit', 'profile-edit', 'sign-up');
 
     mobileView.scroll({ top: prevScrollPosition, behavior: 'instant' });
 
     return () => {
       if (isNotRecordScrollPosition) return;
 
-      setPageScrollPosition(pageName, mobileView.scrollTop);
+      scrollPosition[pathname] = mobileView.scrollTop;
     };
-  }, [mobileViewRef, pageName, hasMatched]);
+  }, [mobileViewRef, pathname, hasMatched]);
 };
 
 export default useInitScrollPosition;

src/layouts/MobileView.tsx

@@ -48,9 +48,8 @@ export default MobileView;
 
 const Wrapper = styled.main`
   width: 100%;
-  height: 100dvh;
+  height: 100%;
   max-width: 420px;
-  max-height: 100%;
   overflow: auto;
   margin: 0 auto;
   -ms-overflow-style: none; /* IE and Edge */

src/pages/Feed/Feed.page.tsx

@@ -18,7 +18,7 @@ const Feed = () => {
   const [isFilterBottomSheetOpen, setIsFilterBottomSheetOpen] = useState(false);
   const { branches, purposes, recruitmentPlaces, skillCategoryResponses } = useWritingInfoQuery();
 
-  useInitScrollPosition('feed');
+  useInitScrollPosition();
 
   const closeFilterBottomSheet = () => {
     setIsFilterBottomSheetOpen(false);

src/pages/FeedDetail/FeedDetail.page.tsx

@@ -42,7 +42,7 @@ const FeedDetailPage = () => {
   const openConfirm = useConfirm();
   const { deleteIdea } = useDeleteIdea();
 
-  useInitScrollPosition(`feed/${feedId}`);
+  useInitScrollPosition();
 
   const onModifyFeedDetail = () => {
     navigate('/write-edit', { state: { ideaId: memberId } });

src/pages/Profile/Profile.page.tsx

@@ -12,7 +12,7 @@ const Profile = () => {
   const userId = userIdFromParams ?? getUserId();
   const memberInfo = useMemberInfoQuery(userId);
 
-  useInitScrollPosition(`profile/${userIdFromParams}`);
+  useInitScrollPosition();
 
   return memberInfo.isMyProfile === true ? (
     <>

src/pages/ProfileEdit/ProfileEdit.page.tsx

@@ -65,7 +65,7 @@ const ProfileEdit = () => {
   });
   const { putProfile } = usePutProfileMutation(getUserId(), fieldValue.nickname);
 
-  useInitScrollPosition('profileEdit');
+  useInitScrollPosition();
 
   useCheckDuplicateNickname({ nickname: fieldValue.nickname, setFieldErrorValue });
 

src/pages/SignUp/SignUp.page.tsx

@@ -67,7 +67,7 @@ const SignUpPage = () => {
     onResetDropdown,
   });
 
-  useInitScrollPosition('signUp');
+  useInitScrollPosition();
 
   useValidateUserInfo(memberInfo);
   useCheckDuplicateNickname({ nickname: fieldValue.nickname, setFieldErrorValue });

src/pages/Write/Write.page.tsx

@@ -79,7 +79,7 @@ const WritePage = () => {
   const cooperationWay = radioValue.cooperationWays.find((cooperationWay) => cooperationWay.checked)?.name;
   const canSubmit = branchIds.length > 0 && purposeIds.length > 0 && !!cooperationWay;
 
-  useInitScrollPosition('write');
+  useInitScrollPosition();
 
   if (!sheetRightItems) {
     console.error('sheetRightItems is null');

src/pages/WriteEdit/WriteEdit.page.tsx

@@ -98,7 +98,7 @@ const WriteEditPage = () => {
   const cooperationWay = radioValue.cooperationWays.find((cooperationWay) => cooperationWay.checked)?.name;
   const canSubmit = branchIds.length > 0 && purposeIds.length > 0 && !!cooperationWay;
 
-  useInitScrollPosition('writeEdit');
+  useInitScrollPosition();
 
   if (!sheetRightItems) {
     console.error('sheetRightItems is null');