From 6ba5761d04eddf92ff72ca80e4ad5212a2d4e675 Mon Sep 17 00:00:00 2001 From: Jonghyeon Ko Date: Fri, 10 Feb 2023 01:19:13 +0900 Subject: [PATCH] refactor(scrollContainer): rename to object with methods simply --- .../domains/ReservationItem/index.tsx | 4 +-- .../ReservationTable/components/Cell.tsx | 2 +- .../web/layouts/BottomFixedGradient/index.tsx | 10 +++---- .../Layout/components/PageLoader/index.tsx | 4 +-- .../components/ScrollContainer/index.tsx | 29 +++++++------------ .../navigations/TopNavigation/index.tsx | 4 +-- apps/web/pages/courts/create.tsx | 8 ++--- .../reservations/courts/[courtId]/index.tsx | 4 +-- apps/web/pages/user/edit/index.tsx | 6 ++-- apps/web/pages/user/menu/index.tsx | 4 +-- 10 files changed, 33 insertions(+), 42 deletions(-) diff --git a/apps/web/components/domains/ReservationItem/index.tsx b/apps/web/components/domains/ReservationItem/index.tsx index 0b6153de..94f2b0c7 100644 --- a/apps/web/components/domains/ReservationItem/index.tsx +++ b/apps/web/components/domains/ReservationItem/index.tsx @@ -15,7 +15,7 @@ interface Props { } const ReservationItem = ({ reservation }: Props) => { - const { scrollContainerWidth } = useScrollContainer() + const scrollContainer = useScrollContainer() const getFavoritesQuery = useGetFavoritesQuery() const deleteReservationMutation = useDeleteReservationMutation() const queryClient = useQueryClient() @@ -87,7 +87,7 @@ const ReservationItem = ({ reservation }: Props) => { /> { isNeedToScrollToThisCell ) { const rect = ref.current.getBoundingClientRect() - scrollContainer.scrollTo(rect.bottom + tableCellHeight * 3) + scrollContainer.to(rect.bottom + tableCellHeight * 3) } }, []) diff --git a/apps/web/layouts/BottomFixedGradient/index.tsx b/apps/web/layouts/BottomFixedGradient/index.tsx index 05b47531..accd9a40 100644 --- a/apps/web/layouts/BottomFixedGradient/index.tsx +++ b/apps/web/layouts/BottomFixedGradient/index.tsx @@ -11,7 +11,7 @@ const BottomFixedGradient = ({ children, }: ComponentPropsWithoutRef) => { const theme = useTheme() - const { scrollContainerWidth, scrollContainerRef } = useScrollContainer() + const scrollContainer = useScrollContainer() const [portal, setPortal] = useState(null) @@ -23,7 +23,7 @@ const BottomFixedGradient = ({ as={motion.div} initial={{ opacity: 0 }} animate={{ opacity: 1 }} - w={`${scrollContainerWidth}px`} + w={`${scrollContainer.width}px`} h="120px" pos="fixed" bottom={0} @@ -39,7 +39,7 @@ const BottomFixedGradient = ({ as={motion.div} initial={{ opacity: 0 }} animate={{ opacity: 1 }} - w={`${scrollContainerWidth}px`} + w={`${scrollContainer.width}px`} pos="fixed" bottom={0} maxW="640px" @@ -48,10 +48,10 @@ const BottomFixedGradient = ({ {children} , - scrollContainerRef.current! + scrollContainer.ref.current! ) ) - }, [children, scrollContainerWidth, scrollContainerRef, theme.colors.white]) + }, [children, scrollContainer.width, scrollContainer.ref, theme.colors.white]) return portal } diff --git a/apps/web/layouts/Layout/components/PageLoader/index.tsx b/apps/web/layouts/Layout/components/PageLoader/index.tsx index fa96234a..f965fb28 100644 --- a/apps/web/layouts/Layout/components/PageLoader/index.tsx +++ b/apps/web/layouts/Layout/components/PageLoader/index.tsx @@ -14,7 +14,7 @@ const PageLoader = () => { }) const [isProgressBar, setIsProgressBar] = useState(false) - const { scrollContainerWidth } = useScrollContainer() + const scrollContainer = useScrollContainer() const setNavigation = useSetNavigation() useEffect(() => { @@ -55,7 +55,7 @@ const PageLoader = () => {
diff --git a/apps/web/layouts/Layout/components/ScrollContainer/index.tsx b/apps/web/layouts/Layout/components/ScrollContainer/index.tsx index 52588aba..1f876f74 100644 --- a/apps/web/layouts/Layout/components/ScrollContainer/index.tsx +++ b/apps/web/layouts/Layout/components/ScrollContainer/index.tsx @@ -3,11 +3,11 @@ import { createContext, useContext, useRef } from "react" import { css, useTheme } from "@emotion/react" type Value = { - scrollTo: (top: number) => void - scrollToTop: () => void - scrollContainerRef: RefObject - scrollContainerHeight: number - scrollContainerWidth: number + to: (top: number) => void + toTop: () => void + ref: RefObject + height: number + width: number } const Context = createContext({} as Value) @@ -20,24 +20,17 @@ type Props = { const ScrollContainer = ({ children }: Props) => { const ref = useRef(null) - const theme = useTheme() - - const scrollTo = (top: number) => - ref.current?.scrollTo({ top, behavior: "smooth" }) - const scrollToTop = () => scrollTo(0) - - const scrollContainerHeight = ref.current?.getClientRects()[0].height ?? 0 - const scrollContainerWidth = ref.current?.getClientRects()[0].width ?? 0 + const to = (top: number) => ref.current?.scrollTo({ top, behavior: "smooth" }) return ( to(0), + ref, + height: ref.current?.getClientRects()[0].height ?? 0, + width: ref.current?.getClientRects()[0].width ?? 0, }} >
{ const router = useRouter() const currentUserQuery = useCurrentUserQuery() - const { scrollToTop } = useScrollContainer() + const scrollContainer = useScrollContainer() const navigation = useNavigationValue() if (!navigation.top) { @@ -127,7 +127,7 @@ const TopNavigation = ({ isShrink }: Props) => { { const router = useRouter() const courtCreateMutation = useCourtCreateMutation() - - const { scrollContainerHeight } = useScrollContainer() + const scrollContainer = useScrollContainer() const { control, @@ -159,7 +158,7 @@ const Page = () => { as={motion.div} initial={{ padding: 16 }} animate={ - scrollContainerHeight > 400 ? { padding: 16 } : { padding: 0 } + scrollContainer.height > 400 ? { padding: 16 } : { padding: 0 } } > @@ -267,7 +266,6 @@ const MapEditor = ({ height: isEdited ? 200 : 400, borderRadius: 16, zIndex: 0, - // transition: "height 1s ease 200ms", }} onBoundChange={(map) => { map.relayout() diff --git a/apps/web/pages/reservations/courts/[courtId]/index.tsx b/apps/web/pages/reservations/courts/[courtId]/index.tsx index 2e9e49c2..6e595b32 100644 --- a/apps/web/pages/reservations/courts/[courtId]/index.tsx +++ b/apps/web/pages/reservations/courts/[courtId]/index.tsx @@ -44,7 +44,7 @@ const Contents = withSuspense.CSROnly(Suspended, { fallback: undefined }) function Suspended({ courtId, date }: Props) { const theme = useTheme() const router = useRouter() - const { scrollContainerWidth } = useScrollContainer() + const scrollContainer = useScrollContainer() const queryClient = useQueryClient() const createReservationMutation = useCreateReservationMutation(courtId) @@ -265,7 +265,7 @@ function Suspended({ courtId, date }: Props) { /> { } const EditForm = ({ initialData }: { initialData: APIUser }) => { - const { scrollContainerHeight } = useScrollContainer() + const scrollContainer = useScrollContainer() const router = useRouter() const myProfileMutation = useMyProfileMutation() @@ -239,7 +239,7 @@ const EditForm = ({ initialData }: { initialData: APIUser }) => { as={motion.div} initial={{ padding: 16 }} animate={ - scrollContainerHeight > 400 ? { padding: 16 } : { padding: 0 } + scrollContainer.height > 400 ? { padding: 16 } : { padding: 0 } } >