Hotfix/#scroll-position: 페이지 간 스크롤 복원 기능 수정 사항 대응 및 ScrollRestoration…

… 사용 (#122) * refactor: MobileView 100% 변경에 따른 로그인 페이지 height 변경 * refactor: react router dom의 ScrollRestoration 활용하여 스크롤 복원 수행 MobileView의 height이 100%가 되면서 window scroll Y 값이 기준이 되었다. 따라서 기존에 정상 동작하지 않던 ScrollRestoration을 사용한다. * rename: useConfirm 파일 오타 수정으로 인한 수정 * refactor: Agreement MobileView height 변경사항 대응 * refactor: 글쓰기 및 글쓰기 수정 페이지 MobileView Height 변경 사항 대응 및 불필요한 스타일드 컴포넌트 제거 * refactor: More MobileView Height 변경 사항 대응
ConceptBe · Apr 22, 2024 · 88206ee · 88206ee
1 parent 078f773
commit 88206ee
Show file tree

Hide file tree

Showing 20 changed files with 41 additions and 98 deletions.
diff --git a/src/hooks/useConfrim.tsx → src/hooks/useConfirm.tsx b/src/hooks/useConfrim.tsx → src/hooks/useConfirm.tsx
diff --git a/src/hooks/useInitScrollPosition.ts b/src/hooks/useInitScrollPosition.ts
diff --git a/src/layouts/Back.tsx b/src/layouts/Back.tsx
@@ -2,7 +2,7 @@ import styled from '@emotion/styled';
 import { SVGHeaderBack24B, theme } from 'concept-be-design-system';
 import { useNavigate } from 'react-router-dom';
 
-import useConfirm from '../hooks/useConfrim';
+import useConfirm from '../hooks/useConfirm';
 import useRouteMatched from '../hooks/useRouteMatch';
 
 type Props = {

diff --git a/src/layouts/MobileView.tsx b/src/layouts/MobileView.tsx
@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 import { MutableRefObject, useEffect, useRef } from 'react';
-import { Outlet } from 'react-router-dom';
+import { Outlet, ScrollRestoration } from 'react-router-dom';
 
 import { MobileViewRefContext } from './contexts/MobileViewContext';
 import Navbar from './Navbar';
@@ -37,6 +37,7 @@ const MobileView = () => {
   return (
     <MobileViewRefContext.Provider value={{ mobileViewRef, keyboardHeightRef }}>
       <Wrapper ref={mobileViewRef}>
+        <ScrollRestoration />
         <Outlet />
         <Navbar />
       </Wrapper>

diff --git a/src/pages/Feed/Feed.page.tsx b/src/pages/Feed/Feed.page.tsx
@@ -9,7 +9,6 @@ import NewIdeaCardListSection from './components/NewIdeaCardListSection/NewIdeaC
 import { getUserNickname } from './utils/getUserNickname';
 import Padding from '../../components/Padding';
 import SEOMeta from '../../components/SEOMeta/SEOMeta';
-import useInitScrollPosition from '../../hooks/useInitScrollPosition';
 import Logo from '../../layouts/Logo';
 import { useWritingInfoQuery } from '../Write/hooks/queries/useWritingInfoQuery';
 
@@ -18,8 +17,6 @@ const Feed = () => {
   const [isFilterBottomSheetOpen, setIsFilterBottomSheetOpen] = useState(false);
   const { branches, purposes, recruitmentPlaces, skillCategoryResponses } = useWritingInfoQuery();
 
-  useInitScrollPosition();
-
   const closeFilterBottomSheet = () => {
     setIsFilterBottomSheetOpen(false);
   };

diff --git a/src/pages/Feed/components/NewIdeaCardListSection/NewIdeaCardListSection.tsx b/src/pages/Feed/components/NewIdeaCardListSection/NewIdeaCardListSection.tsx
@@ -3,7 +3,7 @@ import { Spacer, Text } from 'concept-be-design-system';
 import { Fragment, Suspense, useRef } from 'react';
 
 import NewIdeaCardListSkeleton from './NewIdeaCardListSkeleton';
-import useConfirm from '../../../../hooks/useConfrim';
+import useConfirm from '../../../../hooks/useConfirm';
 import { useDeleteIdea } from '../../../components/NewIdeaCard/hooks/mutations/useDeleteIdea';
 import NewIdeaCard from '../../../components/NewIdeaCard/NewIdeaCard';
 import useNavigatePage from '../../../hooks/useNavigatePage';

diff --git a/src/pages/FeedDetail/FeedDetail.page.tsx b/src/pages/FeedDetail/FeedDetail.page.tsx
@@ -8,8 +8,7 @@ import { CommentFocusProvider } from './contexts/CommentFocusContext';
 import useFeedDetailQuery from './hooks/queries/useFeedDetailQuery';
 import ProfileInfo from '../../components/ProfileInfo';
 import SEOMeta from '../../components/SEOMeta/SEOMeta';
-import useConfirm from '../../hooks/useConfrim';
-import useInitScrollPosition from '../../hooks/useInitScrollPosition';
+import useConfirm from '../../hooks/useConfirm';
 import Back from '../../layouts/Back';
 import Logo from '../../layouts/Logo';
 import { useDeleteIdea } from '../components/NewIdeaCard/hooks/mutations/useDeleteIdea';
@@ -42,8 +41,6 @@ const FeedDetailPage = () => {
   const openConfirm = useConfirm();
   const { deleteIdea } = useDeleteIdea();
 
-  useInitScrollPosition();
-
   const onModifyFeedDetail = () => {
     navigate('/write-edit', { state: { ideaId: memberId } });
   };

diff --git a/src/pages/FeedDetail/components/Comment.tsx b/src/pages/FeedDetail/components/Comment.tsx
@@ -6,7 +6,7 @@ import EditComment from './EditComment';
 import ModifyDropdown from './ModifyDropdown';
 import Recomment from './Recomment';
 import WriteRecomment from './WriteRecomment';
-import useConfirm from '../../../hooks/useConfrim';
+import useConfirm from '../../../hooks/useConfirm';
 import { get999PlusCount } from '../../utils';
 import useDeleteCommentMutation from '../hooks/mutations/useDeleteComment';
 import useFocusEditComment from '../hooks/useFocusEditComment';

diff --git a/src/pages/FeedDetail/components/Recomment.tsx b/src/pages/FeedDetail/components/Recomment.tsx
@@ -4,7 +4,7 @@ import { useState } from 'react';
 import CommentProfileInfo from './CommentProfileInfo';
 import EditComment from './EditComment';
 import ModifyDropdown from './ModifyDropdown';
-import useConfirm from '../../../hooks/useConfrim';
+import useConfirm from '../../../hooks/useConfirm';
 import { get999PlusCount } from '../../utils';
 import useDeleteCommentMutation from '../hooks/mutations/useDeleteComment';
 import useFocusEditComment from '../hooks/useFocusEditComment';

diff --git a/src/pages/Login/Agreement.tsx b/src/pages/Login/Agreement.tsx
@@ -44,10 +44,12 @@ const Agreement = () => {
     <>
       <SEOMeta title="컨셉비 | 약관동의" description="컨셉비 시작하기 (로그인/회원가입)" />
 
-      <Wrapper height="100%" direction="column" padding="20px 22px">
-        <Box maxWidth={375} maxHeight={375}>
-          <ImageView src={PNGAgreementBackground} alt="동의 페이지 이미지" />
-        </Box>
+      <Wrapper height="100dvh" direction="column" padding="20px 22px">
+        <Flex justifyContent="center" alignItems="center">
+          <Box maxWidth={300} maxHeight={300}>
+            <ImageView src={PNGAgreementBackground} alt="동의 페이지 이미지" />
+          </Box>
+        </Flex>
         <Spacer size={50} />
 
         <Text

diff --git a/src/pages/Login/Login.tsx b/src/pages/Login/Login.tsx
@@ -15,7 +15,7 @@ const Login = () => {
     <>
       <SEOMeta title="컨셉비 | 로그인" description="컨셉비 시작하기 (로그인/회원가입)" />
 
-      <Flex direction="column" justifyContent="center" alignItems="center" height="100%">
+      <Flex direction="column" justifyContent="center" alignItems="center" height="100dvh">
         <SVGLoginLogo />
         <Spacer size={40} />
         <ButtonWrapper onClick={onClickOauthKakao}>

diff --git a/src/pages/Profile/More.page.tsx b/src/pages/Profile/More.page.tsx
@@ -7,7 +7,7 @@ import SEOMeta from '../../components/SEOMeta/SEOMeta';
 import Spinner from '../../components/Spinner/Spinner';
 import Privacy from '../../components/Terms/Privacy';
 import UsageTerms from '../../components/Terms/UsageTerms';
-import useConfirm from '../../hooks/useConfrim';
+import useConfirm from '../../hooks/useConfirm';
 import Back from '../../layouts/Back';
 import useNavigatePage from '../hooks/useNavigatePage';
 
@@ -119,15 +119,12 @@ export default More;
 const Container = styled.div`
   display: flex;
   flex-direction: column;
-  height: 100%;
-  /* height: calc(var(--vh, 1vh) * 100); */
+  height: 100dvh;
   overflow: hidden;
   background-color: ${theme.color.bg1};
 `;
 
 const MainWrapper = styled.section`
-  /* background-color: ${theme.color.bg1}; */
-  /* height: 100svh; */
   padding: 84px 30px 0 30px;
   overflow: hidden;
 `;

diff --git a/src/pages/Profile/Profile.page.tsx b/src/pages/Profile/Profile.page.tsx
@@ -5,15 +5,12 @@ import OtherProfile from './components/OtherProfile/OtherProfile.page';
 import { useMemberInfoQuery } from './hooks/queries/useMemberInfoQuery';
 import { getUserId } from './utils/getUserId';
 import SEOMeta from '../../components/SEOMeta/SEOMeta';
-import useInitScrollPosition from '../../hooks/useInitScrollPosition';
 
 const Profile = () => {
   const { id: userIdFromParams } = useParams();
   const userId = userIdFromParams ?? getUserId();
   const memberInfo = useMemberInfoQuery(userId);
 
-  useInitScrollPosition();
-
   return memberInfo.isMyProfile === true ? (
     <>
       <SEOMeta title="컨셉비 | MY" description="내가 작성하고 스크랩한 글&프로필을 열람해요." />

diff --git a/src/pages/Profile/components/MyProfile/IdeaSection.tsx b/src/pages/Profile/components/MyProfile/IdeaSection.tsx
@@ -3,7 +3,7 @@ import { Box, Spacer, SVGProfileMessageDots } from 'concept-be-design-system';
 import { useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import useConfirm from '../../../../hooks/useConfrim';
+import useConfirm from '../../../../hooks/useConfirm';
 import { useDeleteIdea } from '../../../components/NewIdeaCard/hooks/mutations/useDeleteIdea';
 import NewIdeaCard from '../../../components/NewIdeaCard/NewIdeaCard';
 import { useFeedInfiniteFetch } from '../../../Feed/hooks/useFeedInfiniteFetch';

diff --git a/src/pages/Profile/hooks/mutations/useDeleteAccount.ts b/src/pages/Profile/hooks/mutations/useDeleteAccount.ts
@@ -2,7 +2,7 @@ import { useMutation } from '@tanstack/react-query';
 import { AxiosError } from 'axios';
 
 import { http } from '../../../../api/http';
-import useConfirm from '../../../../hooks/useConfrim';
+import useConfirm from '../../../../hooks/useConfirm';
 import useNavigatePage from '../../../hooks/useNavigatePage';
 import { getUserId } from '../../utils/getUserId';
 

diff --git a/src/pages/ProfileEdit/ProfileEdit.page.tsx b/src/pages/ProfileEdit/ProfileEdit.page.tsx
@@ -23,7 +23,6 @@ import { FormEvent } from 'react';
 import useProfileEditQuery from './hooks/useProfileEditQuery.ts';
 import usePutProfileMutation from './hooks/usePutProfileMutation.ts';
 import { DropdownValue, FieldValue } from './types';
-import useInitScrollPosition from '../../hooks/useInitScrollPosition.ts';
 import Back from '../../layouts/Back.tsx';
 import { getUserId } from '../Profile/utils/getUserId.ts';
 import useCheckDuplicateNickname from '../SignUp/hooks/useCheckDuplicateNickname.ts';
@@ -65,8 +64,6 @@ const ProfileEdit = () => {
   });
   const { putProfile } = usePutProfileMutation(getUserId(), fieldValue.nickname);
 
-  useInitScrollPosition();
-
   useCheckDuplicateNickname({ nickname: fieldValue.nickname, setFieldErrorValue });
 
   const validateInput = () => {

diff --git a/src/pages/SignUp/SignUp.page.tsx b/src/pages/SignUp/SignUp.page.tsx
@@ -28,7 +28,6 @@ import useSignUpQuery from './hooks/useSignUpQuery.ts';
 import useValidateUserInfo from './hooks/useValidateUserInfo.ts';
 import { DropdownValue, FieldValue } from './types';
 import SEOMeta from '../../components/SEOMeta/SEOMeta.tsx';
-import useInitScrollPosition from '../../hooks/useInitScrollPosition.ts';
 import { OauthMemberInfo } from '../../types/login.ts';
 
 interface CheckboxValue {
@@ -67,8 +66,6 @@ const SignUpPage = () => {
     onResetDropdown,
   });
 
-  useInitScrollPosition();
-
   useValidateUserInfo(memberInfo);
   useCheckDuplicateNickname({ nickname: fieldValue.nickname, setFieldErrorValue });
 

diff --git a/src/pages/SignUp/hooks/useValidateUserInfo.ts b/src/pages/SignUp/hooks/useValidateUserInfo.ts
@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import useConfirm from '../../../hooks/useConfrim';
+import useConfirm from '../../../hooks/useConfirm';
 import { OauthMemberInfo } from '../../../types/login';
 
 const useValidateUserInfo = (userInfo: OauthMemberInfo | null) => {

diff --git a/src/pages/Write/Write.page.tsx b/src/pages/Write/Write.page.tsx
@@ -16,6 +16,7 @@ import {
   SVGRadioUncheck24,
   Flex,
   useDropdown,
+  Box,
 } from 'concept-be-design-system';
 import { useState } from 'react';
 
@@ -28,7 +29,6 @@ import { Info } from './types';
 import { get2DepthCountsBy1Depth } from './utils/get2DepthCountsBy1Depth';
 import SEOMeta from '../../components/SEOMeta/SEOMeta';
 import useAlert from '../../hooks/useAlert';
-import useInitScrollPosition from '../../hooks/useInitScrollPosition';
 
 const cooperationWays = [
   { id: 1, name: '상관없음' },
@@ -79,8 +79,6 @@ const WritePage = () => {
   const cooperationWay = radioValue.cooperationWays.find((cooperationWay) => cooperationWay.checked)?.name;
   const canSubmit = branchIds.length > 0 && purposeIds.length > 0 && !!cooperationWay;
 
-  useInitScrollPosition();
-
   if (!sheetRightItems) {
     console.error('sheetRightItems is null');
     return null;
@@ -176,25 +174,25 @@ const WritePage = () => {
 
         <Divider color="bg1" height={8} bottom={30} />
         <BottomWrapper>
-          <BottomBox>
+          <Box>
             <CheckboxContainer
               label="분야"
               checkboxKey="branches"
               options={checkboxValue.branches}
               onChange={onChangeCheckbox}
               required
             />
-          </BottomBox>
-          <BottomBox>
+          </Box>
+          <Box>
             <CheckboxContainer
               label="목적"
               checkboxKey="purposes"
               options={checkboxValue.purposes}
               onChange={onChangeCheckbox}
               required
             />
-          </BottomBox>
-          <BottomBox>
+          </Box>
+          <Box>
             <RadioContainer
               label="협업방식"
               radioKey="cooperationWays"
@@ -203,16 +201,16 @@ const WritePage = () => {
               gap="large"
               required
             />
-          </BottomBox>
-          <BottomBox>
+          </Box>
+          <Box>
             <RecruitmentPlaceSection
               places={recruitmentPlaces}
               selectedPlace={dropdownValue.recruitmentPlace}
               onPlaceChange={(selectedPlace) => onClickDropdown(selectedPlace, 'recruitmentPlace')}
             />
-          </BottomBox>
+          </Box>
 
-          <BottomBox>
+          <Box height={144}>
             <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between' }}>
               <Text font="suit15m" color="b9">
                 팀원 모집
@@ -245,7 +243,7 @@ const WritePage = () => {
             </TeamLabelBox>
 
             <Spacer size={40} />
-          </BottomBox>
+          </Box>
         </BottomWrapper>
 
         <BottomSheet isOpen={isOpenBottomSheet} onClose={() => setIsOpenBottomSheet(false)}>
@@ -316,8 +314,6 @@ const BottomWrapper = styled.div`
   gap: 35px;
 `;
 
-const BottomBox = styled.div``;
-
 const Sheet_TopBox = styled.div`
   box-sizing: border-box;
   display: flex;