From 88206ee8596f6376bf3c30a7d73d713afeae3e24 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EC=84=B8=EB=AF=BC?= <89172499+semnil5202@users.noreply.github.com> Date: Mon, 22 Apr 2024 20:00:20 +0900 Subject: [PATCH] =?UTF-8?q?Hotfix/#scroll-position:=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EA=B0=84=20=EC=8A=A4=ED=81=AC=EB=A1=A4=20=EB=B3=B5?= =?UTF-8?q?=EC=9B=90=20=EA=B8=B0=EB=8A=A5=20=EC=88=98=EC=A0=95=20=EC=82=AC?= =?UTF-8?q?=ED=95=AD=20=EB=8C=80=EC=9D=91=20=EB=B0=8F=20ScrollRestoration?= =?UTF-8?q?=20=EC=82=AC=EC=9A=A9=20(#122)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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 변경 사항 대응 --- src/hooks/{useConfrim.tsx => useConfirm.tsx} | 0 src/hooks/useInitScrollPosition.ts | 34 ------------------- src/layouts/Back.tsx | 2 +- src/layouts/MobileView.tsx | 3 +- src/pages/Feed/Feed.page.tsx | 3 -- .../NewIdeaCardListSection.tsx | 2 +- src/pages/FeedDetail/FeedDetail.page.tsx | 5 +-- src/pages/FeedDetail/components/Comment.tsx | 2 +- src/pages/FeedDetail/components/Recomment.tsx | 2 +- src/pages/Login/Agreement.tsx | 10 +++--- src/pages/Login/Login.tsx | 2 +- src/pages/Profile/More.page.tsx | 7 ++-- src/pages/Profile/Profile.page.tsx | 3 -- .../components/MyProfile/IdeaSection.tsx | 2 +- .../hooks/mutations/useDeleteAccount.ts | 2 +- src/pages/ProfileEdit/ProfileEdit.page.tsx | 3 -- src/pages/SignUp/SignUp.page.tsx | 3 -- src/pages/SignUp/hooks/useValidateUserInfo.ts | 2 +- src/pages/Write/Write.page.tsx | 26 ++++++-------- src/pages/WriteEdit/WriteEdit.page.tsx | 26 ++++++-------- 20 files changed, 41 insertions(+), 98 deletions(-) rename src/hooks/{useConfrim.tsx => useConfirm.tsx} (100%) delete mode 100644 src/hooks/useInitScrollPosition.ts diff --git a/src/hooks/useConfrim.tsx b/src/hooks/useConfirm.tsx similarity index 100% rename from src/hooks/useConfrim.tsx rename to src/hooks/useConfirm.tsx diff --git a/src/hooks/useInitScrollPosition.ts b/src/hooks/useInitScrollPosition.ts deleted file mode 100644 index a51cc97d..00000000 --- a/src/hooks/useInitScrollPosition.ts +++ /dev/null @@ -1,34 +0,0 @@ -import { useLayoutEffect } from 'react'; -import { useLocation } from 'react-router-dom'; - -import useRouteMatched from './useRouteMatch'; -import { useMobileViewRefContext } from '../layouts/contexts/MobileViewContext'; - -const scrollPosition: Record = {}; - -const useInitScrollPosition = () => { - const { mobileViewRef } = useMobileViewRefContext(); - const { hasMatched } = useRouteMatched(); - const { pathname } = useLocation(); - - useLayoutEffect(() => { - const mobileView = mobileViewRef.current; - - if (!mobileView) return; - - // 이전 스크롤 위치가 있다면 세션 스토리지에서 가져와 이전 스크롤 위치로 조정합니다. - // 단, 글쓰기, 글쓰기 수정, 프로필 수정, 회원가입 페이지는 스크롤 위치를 기록하지 않고 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; - - scrollPosition[pathname] = mobileView.scrollTop; - }; - }, [mobileViewRef, pathname, hasMatched]); -}; - -export default useInitScrollPosition; diff --git a/src/layouts/Back.tsx b/src/layouts/Back.tsx index 0bdff0ba..11a5080a 100644 --- 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 index 420c0763..3d7b6e10 100644 --- 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 ( + diff --git a/src/pages/Feed/Feed.page.tsx b/src/pages/Feed/Feed.page.tsx index b420e142..381ae085 100644 --- 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 index 9fd64aad..116e506e 100644 --- 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 index 5368cfc1..6a464533 100644 --- 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 index 22a565c4..b423863c 100644 --- 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 index b3f0e871..edd2e444 100644 --- 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 index 6017ef05..66dca65a 100644 --- a/src/pages/Login/Agreement.tsx +++ b/src/pages/Login/Agreement.tsx @@ -44,10 +44,12 @@ const Agreement = () => { <> - - - - + + + + + + { <> - + diff --git a/src/pages/Profile/More.page.tsx b/src/pages/Profile/More.page.tsx index 5b534bb5..49750096 100644 --- 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 index 6c84db27..54f09a40 100644 --- 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 ? ( <> diff --git a/src/pages/Profile/components/MyProfile/IdeaSection.tsx b/src/pages/Profile/components/MyProfile/IdeaSection.tsx index 9fa3d930..1ff292e1 100644 --- 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 index d204d64f..4ec4c5af 100644 --- 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 index d1969fb2..7ea9823d 100644 --- 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 index f4d6ec1b..2e0ee93f 100644 --- 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 index 2c14ea9e..b1b12e40 100644 --- 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 index ac732f79..20cdbda2 100644 --- 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,7 +174,7 @@ const WritePage = () => { - + { onChange={onChangeCheckbox} required /> - - + + { onChange={onChangeCheckbox} required /> - - + + { gap="large" required /> - - + + onClickDropdown(selectedPlace, 'recruitmentPlace')} /> - + - +
팀원 모집 @@ -245,7 +243,7 @@ const WritePage = () => { - + 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; diff --git a/src/pages/WriteEdit/WriteEdit.page.tsx b/src/pages/WriteEdit/WriteEdit.page.tsx index 98f31a97..1f5fbe2a 100644 --- a/src/pages/WriteEdit/WriteEdit.page.tsx +++ b/src/pages/WriteEdit/WriteEdit.page.tsx @@ -16,6 +16,7 @@ import { SVGRadioUncheck24, Flex, useDropdown, + Box, } from 'concept-be-design-system'; import { useState } from 'react'; import { useLocation } from 'react-router-dom'; @@ -29,7 +30,6 @@ import { useWritingInfoQuery } from './hooks/queries/useWritingInfoQuery'; import { Info } from './types'; import { get2DepthCountsBy1Depth } from './utils/get2DepthCountsBy1Depth'; import useAlert from '../../hooks/useAlert'; -import useInitScrollPosition from '../../hooks/useInitScrollPosition'; const cooperationWays = [ { id: 1, name: '상관없음' }, @@ -98,8 +98,6 @@ const WriteEditPage = () => { 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; @@ -185,7 +183,7 @@ const WriteEditPage = () => { - + { onChange={onChangeCheckbox} required /> - - + + { onChange={onChangeCheckbox} required /> - - + + { gap="large" required /> - - + + onClickDropdown(selectedPlace, 'recruitmentPlace')} /> - + - +
팀원 모집 @@ -254,7 +252,7 @@ const WriteEditPage = () => { - + setIsOpenBottomSheet(false)}> @@ -324,8 +322,6 @@ const BottomWrapper = styled.div` gap: 35px; `; -const BottomBox = styled.div``; - const Sheet_TopBox = styled.div` box-sizing: border-box; display: flex;