refactor(scrollContainer): rename to object with methods simply

slamapp · Feb 9, 2023 · 6ba5761 · 6ba5761
1 parent 5fa9ea2
commit 6ba5761
Show file tree

Hide file tree

Showing 10 changed files with 33 additions and 42 deletions.
diff --git 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) => {
                     />
                     <Box
                       width="90%"
-                      maxWidth={`${scrollContainerWidth - 60}px`}
+                      maxWidth={`${scrollContainer.width - 60}px`}
                       bgColor="white"
                       borderRadius="16px"
                       p="16px"

diff --git a/apps/web/components/domains/ReservationTable/components/Cell.tsx b/apps/web/components/domains/ReservationTable/components/Cell.tsx
@@ -78,7 +78,7 @@ const Cell = ({ timeNumber, date, onClick }: 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
@@ -11,7 +11,7 @@ const BottomFixedGradient = ({
   children,
 }: ComponentPropsWithoutRef<typeof Flex>) => {
   const theme = useTheme()
-  const { scrollContainerWidth, scrollContainerRef } = useScrollContainer()
+  const scrollContainer = useScrollContainer()
 
   const [portal, setPortal] = useState<ReactPortal | null>(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}
           </Box>
         </>,
-        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
@@ -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 = () => {
         <div
           css={css`
             position: fixed;
-            width: ${scrollContainerWidth}px;
+            width: ${scrollContainer.width}px;
             height: 100%;
           `}
         >

diff --git 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<HTMLDivElement>
-  scrollContainerHeight: number
-  scrollContainerWidth: number
+  to: (top: number) => void
+  toTop: () => void
+  ref: RefObject<HTMLDivElement>
+  height: number
+  width: number
 }
 
 const Context = createContext({} as Value)
@@ -20,24 +20,17 @@ type Props = {
 
 const ScrollContainer = ({ children }: Props) => {
   const ref = useRef<HTMLDivElement>(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 (
     <Context.Provider
       value={{
-        scrollTo,
-        scrollToTop,
-        scrollContainerRef: ref,
-        scrollContainerHeight,
-        scrollContainerWidth,
+        to,
+        toTop: () => to(0),
+        ref,
+        height: ref.current?.getClientRects()[0].height ?? 0,
+        width: ref.current?.getClientRects()[0].width ?? 0,
       }}
     >
       <div

diff --git a/apps/web/layouts/Layout/navigations/TopNavigation/index.tsx b/apps/web/layouts/Layout/navigations/TopNavigation/index.tsx
@@ -21,7 +21,7 @@ const TopNavigation = ({ isShrink }: Props) => {
   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) => {
 
           <AnimatePresence mode="wait" key={navigation.top.title}>
             <motion.div
-              onClick={scrollToTop}
+              onClick={scrollContainer.toTop}
               css={css`
                 display: flex;
                 align-items: center;

diff --git a/apps/web/pages/courts/create.tsx b/apps/web/pages/courts/create.tsx
@@ -39,8 +39,7 @@ type FieldValues = Pick<
 const Page = () => {
   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 }
           }
         >
           <Button
@@ -193,7 +192,7 @@ const Page = () => {
             )}
             fullWidth
             size="lg"
-            style={{ borderRadius: scrollContainerHeight > 400 ? 16 : 0 }}
+            style={{ borderRadius: scrollContainer.height > 400 ? 16 : 0 }}
           >
             새 농구장 추가 제안하기
           </Button>
@@ -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
@@ -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) {
                       />
                       <Box
                         width="90%"
-                        maxWidth={`${scrollContainerWidth - 60}px`}
+                        maxWidth={`${scrollContainer.width - 60}px`}
                         bgColor="white"
                         borderRadius="16px"
                         p="16px"

diff --git a/apps/web/pages/user/edit/index.tsx b/apps/web/pages/user/edit/index.tsx
@@ -63,7 +63,7 @@ const Contents = () => {
 }
 
 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 }
             }
           >
             <Button
@@ -248,7 +248,7 @@ const EditForm = ({ initialData }: { initialData: APIUser }) => {
               loading={isSubmitting || isSubmitSuccessful}
               disabled={!isDirty || !isValid || isSubmitSuccessful}
               onClick={handleSubmit(onSubmit)}
-              style={{ borderRadius: scrollContainerHeight > 400 ? 16 : 0 }}
+              style={{ borderRadius: scrollContainer.height > 400 ? 16 : 0 }}
             >
               {!isDirty || !isValid
                 ? "프로필을 먼저 수정하세요"

diff --git a/apps/web/pages/user/menu/index.tsx b/apps/web/pages/user/menu/index.tsx
@@ -17,7 +17,7 @@ const Page: NextPage<InferGetStaticPropsType<typeof getStaticProps>> = ({
   buildTime,
 }) => {
   const router = useRouter()
-  const { scrollContainerWidth } = useScrollContainer()
+  const scrollContainer = useScrollContainer()
   const queryClient = useQueryClient()
 
   return (
@@ -62,7 +62,7 @@ const Page: NextPage<InferGetStaticPropsType<typeof getStaticProps>> = ({
                     />
                     <Box
                       width="90%"
-                      maxWidth={`${scrollContainerWidth - 60}px`}
+                      maxWidth={`${scrollContainer.width - 60}px`}
                       bgColor="white"
                       borderRadius="16px"
                       p="16px"