refactor(hooks): extract common hooks from web

README.md

@@ -1,45 +1,33 @@
-# slam/frontend
+<div><img src="https://user-images.githubusercontent.com/84858773/147056456-b9bf8e99-0b5b-46fe-bd86-01e9cba8e6ca.png" width="300px"></div>
 
-<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
-[![All Contributors](https://img.shields.io/badge/all_contributors-9-orange.svg?style=flat-square)](#contributors-)
-<!-- ALL-CONTRIBUTORS-BADGE:END -->
-
-## 📼 슬램 발표 영상
-
-[![Slam 슬램 발표](http://img.youtube.com/vi/V5akCEYSyGQ/0.jpg)](https://youtu.be/V5akCEYSyGQ)
-
-<div align="center"><img src="https://user-images.githubusercontent.com/84858773/147056456-b9bf8e99-0b5b-46fe-bd86-01e9cba8e6ca.png" width="250px"></div>
-
-<div align="center">
 <div>같이 농구할 사람이 없다고? ⛹🏻‍♀️</div>
+길거리 농구인들이 쉽고 빠르게 게임할 수 있도록 주변 농구장의 인원 현황을 제공하는 커뮤니티 웹앱 서비스입니다.
 
 <br>
-<div>
-
-<img alt="TypeScript" src="https://img.shields.io/badge/typescript-3178C6?style=for-the-badge&logo=typescript&logoColor=white">
-<img alt="React" src="https://img.shields.io/badge/react-61DAFB?style=for-the-badge&logo=react&logoColor=black">
-<img alt="Next" src="https://img.shields.io/badge/Next-000000?style=for-the-badge&logo=next.js&logoColor=white">
-<img alt="Recoil" src="https://img.shields.io/badge/recoil-3677E5.svg?&style=for-the-badge&logo=react&logoColor=white">
-<img alt="React-Query" src="https://img.shields.io/badge/reactquery-111827.svg?&style=for-the-badge&logo=reactquery&logoColor=EF4444">
-<img alt="React-Hook-Form" src="https://img.shields.io/badge/reacthookform-EC5990.svg?&style=for-the-badge&logo=reacthookform&logoColor=white">
-<img alt="Vercel" src="https://img.shields.io/badge/Vercel-000000.svg?&style=for-the-badge&logo=Vercel&logoColor=white">
-</div>
-
 <br>
 
-## 🏀 프로젝트 소개
+<div>
 
-*Slam*은 길거리 농구인들이 쉽고 빠르게 게임할 수 있도록 주변 농구장의 인원 현황을 제공하는 커뮤니티 웹앱 서비스입니다.
+![Turborepo](https://img.shields.io/static/v1?style=for-the-badge&message=Turborepo&color=000000&logo=Turborepo&logoColor=FF2956&label=)
+![TypeScript](https://img.shields.io/static/v1?style=for-the-badge&message=TypeScript&color=3178C6&logo=TypeScript&logoColor=FFFFFF&label=)
+![React](https://img.shields.io/static/v1?style=for-the-badge&message=React&color=222222&logo=React&logoColor=61DAFB&label=)
+![Next](https://img.shields.io/static/v1?style=for-the-badge&message=Next&color=000000&logo=Next.js&logoColor=FFFFFF&label=)
+![Recoil](https://img.shields.io/static/v1?style=for-the-badge&message=Recoil&color=3677E5&logo=React&logoColor=white&label=)
+![React Query](https://img.shields.io/static/v1?style=for-the-badge&message=React+Query&color=111827&logo=React+Query&logoColor=EF4444&label=)
+![React Hook Form](https://img.shields.io/static/v1?style=for-the-badge&message=React+Hook+Form&color=EC5990&logo=React+Hook+Form&logoColor=FFFFFF&label=)
+![Vercel](https://img.shields.io/static/v1?style=for-the-badge&message=Vercel&color=000000&logo=Vercel&logoColor=FFFFFF&label=)
 
-<br>
+</div>
 
-## 📝 요구사항 명세
+[슬램 모노레포 의존성 그래프](./dependencies-graph.html)
 
-💁‍ [요구사항 명세 보러가기](https://github.com/slamapp/frontend/wiki/%EC%8A%AC%EB%9E%A8-%EC%9A%94%EA%B5%AC%EC%82%AC%ED%95%AD-%EB%AA%85%EC%84%B8)
+## 📼 슬램 발표 영상
+
+[![Slam 슬램 발표](http://img.youtube.com/vi/V5akCEYSyGQ/0.jpg)](https://youtu.be/V5akCEYSyGQ)
 
 <br>
 
-# ✨ 주요 기능 및 페이지 소개
+# 주요 기능 및 페이지 소개
 
 | 스플래시                                                                                                                                                | 로그인 페이지                                                                                                                                            |
 | ------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
@@ -77,6 +65,12 @@
 
 Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
 
+<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
+
+[![All Contributors](https://img.shields.io/badge/all_contributors-9-orange.svg?style=flat-square)](#contributors-)
+
+<!-- ALL-CONTRIBUTORS-BADGE:END -->
+
 <!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
 <!-- prettier-ignore-start -->
 <!-- markdownlint-disable -->

apps/web/package.json

@@ -18,9 +18,9 @@
     "@hookform/devtools": "^4.2.2",
     "@hookform/resolvers": "^2.9.8",
     "@sentry/nextjs": "^7.15.0",
+    "@slam/hooks": "workspace:*",
     "@slam/types": "workspace:*",
     "@slam/utility-types": "workspace:*",
-    "@slam/ui": "workspace:*",
     "@suspensive/react": "^1.9.2",
     "@suspensive/react-query": "^1.9.2",
     "@tanstack/react-query": "^4.13.0",
@@ -44,6 +44,7 @@
   "devDependencies": {
     "@babel/core": "^7.0.0",
     "@slam/eslint": "workspace:*",
+    "@slam/tsconfig": "workspace:*",
     "@stylelint/postcss-css-in-js": "^0.38.0",
     "@types/feather-icons": "^4.7.0",
     "@types/node": "18.7.18",
@@ -63,7 +64,6 @@
     "stylelint-config-recommended": "^9.0.0",
     "stylelint-config-styled-components": "^0.1.1",
     "stylelint-processor-styled-components": "^1.10.0",
-    "tsconfig": "workspace:*",
     "typescript": "4.8.3"
   }
 }

apps/web/src/apis/core/index.ts

@@ -1,4 +1,5 @@
-import axios, { AxiosInstance, AxiosPromise, AxiosRequestConfig, InternalAxiosRequestConfig } from 'axios'
+import type { AxiosInstance, AxiosPromise, AxiosRequestConfig } from 'axios'
+import axios from 'axios'
 import { PROXY_PRE_FIX, env } from '~/constants'
 
 type RequestType = 'DEFAULT' | 'FILE'

apps/web/src/apis/courts/index.ts

@@ -1,4 +1,4 @@
-import { APICourt, APINewCourt, APIReservation, APIUser } from '@slam/types'
+import type { APICourt, APINewCourt, APIReservation, APIUser } from '@slam/types'
 import { http } from '~/apis/core'
 
 const courtApi = {

apps/web/src/apis/favorites/index.ts

@@ -1,4 +1,4 @@
-import { APICourt, APIFavorite, List } from '@slam/types'
+import type { APICourt, APIFavorite, List } from '@slam/types'
 import { http } from '~/apis/core'
 
 export default {

apps/web/src/apis/follows/index.ts

@@ -1,4 +1,4 @@
-import { APIFollower, APIFollowing, APIUser, CursorList, CursorListRequestOption } from '@slam/types'
+import type { APIFollower, APIFollowing, APIUser, CursorList, CursorListRequestOption } from '@slam/types'
 import { http } from '~/apis/core'
 
 export default {

apps/web/src/apis/notifications/index.ts

@@ -1,5 +1,5 @@
-import { APINotification, CursorListRequestOption } from '@slam/types'
-import { AxiosPromise } from 'axios'
+import type { APINotification, CursorListRequestOption } from '@slam/types'
+import type { AxiosPromise } from 'axios'
 import { http } from '~/apis/core'
 
 export default {

apps/web/src/apis/reservations/index.ts

@@ -1,4 +1,4 @@
-import { APICourt, APIReservation, APIUser, CursorList, CursorListRequestOption, List } from '@slam/types'
+import type { APICourt, APIReservation, APIUser, CursorList, CursorListRequestOption, List } from '@slam/types'
 import { http } from '~/apis/core'
 
 export default {

apps/web/src/apis/users/index.ts

@@ -1,4 +1,4 @@
-import { APICourt, APINotification, APIUser } from '@slam/types'
+import type { APICourt, APINotification, APIUser } from '@slam/types'
 import { http } from '~/apis/core'
 
 export default {

apps/web/src/components/common/OpenGraph/index.tsx

@@ -1,4 +1,5 @@
-import { ComponentType, Fragment } from 'react'
+import type { ComponentType } from 'react'
+import { Fragment } from 'react'
 
 interface Props {
   title?: string

apps/web/src/components/domains/CourtItem/index.tsx

@@ -1,8 +1,8 @@
-import { ReactNode } from 'react'
+import type { ReactNode } from 'react'
 import Link from 'next/link'
 import { Box, HStack, Text } from '@chakra-ui/react'
 import { css, useTheme } from '@emotion/react'
-import { APIChatRoom, APICourt, APIFavorite } from '@slam/types'
+import type { APIChatRoom, APICourt, APIFavorite } from '@slam/types'
 import { Icon, IconButton } from '~/components/uis'
 import { useCancelFavoriteMutation, useCreateFavoriteMutation } from '~/features/favorites'
 import { withShareClick } from '~/hocs'

apps/web/src/components/domains/DatePicker/index.tsx

@@ -1,7 +1,8 @@
 import { useMemo, useRef, useState } from 'react'
 import { HStack, Text, VStack } from '@chakra-ui/react'
 import { css, useTheme } from '@emotion/react'
-import dayjs, { Dayjs } from 'dayjs'
+import type { Dayjs } from 'dayjs'
+import dayjs from 'dayjs'
 import { motion } from 'framer-motion'
 
 const week = ['일', '월', '화', '수', '목', '금', '토'] as const

apps/web/src/components/domains/EssentialImagePreload/index.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import { css } from '@emotion/react'
-import { useTimeout } from '~/hooks'
+import { useTimeout } from '@slam/hooks'
 
 type Props = {
   lazyLoadTime: number

apps/web/src/components/domains/FollowListItem/index.tsx

@@ -1,5 +1,5 @@
 import { HStack, Text } from '@chakra-ui/react'
-import { APIUser } from '@slam/types'
+import type { APIUser } from '@slam/types'
 import { Button } from '~/components/uis'
 import ProfileAvatar from '../ProfileAvatar'
 

apps/web/src/components/domains/ProfileAvatar/index.tsx

@@ -1,6 +1,6 @@
 import Link from 'next/link'
 import { Avatar } from '@chakra-ui/react'
-import { APIUser } from '@slam/types'
+import type { APIUser } from '@slam/types'
 import { DEFAULT_PROFILE_IMAGE_URL } from '~/constants'
 
 const ProfileAvatar = ({ user }: { user: Pick<APIUser, 'id' | 'profileImage'> }) => {

apps/web/src/components/domains/ReservationItem/index.tsx

@@ -1,5 +1,5 @@
 import { Box, Center, Flex, HStack, Text, VStack } from '@chakra-ui/react'
-import { APIReservation } from '@slam/types'
+import type { APIReservation } from '@slam/types'
 import { useQueryClient } from '@tanstack/react-query'
 import dayjs from 'dayjs'
 import { AnimatePresence, motion } from 'framer-motion'

apps/web/src/components/domains/ReservationTable/index.tsx

@@ -1,22 +1,36 @@
-import { ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import type { Dispatch, ReactNode, SetStateAction } from 'react'
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'
 import { useRouter } from 'next/router'
 import { Box, Center, Flex, VStack } from '@chakra-ui/react'
 import { css, useTheme } from '@emotion/react'
 import styled from '@emotion/styled'
-import { APICourt } from '@slam/types'
-import dayjs, { Dayjs } from 'dayjs'
+import { useIntersectionObserver } from '@slam/hooks'
+import type { APICourt } from '@slam/types'
+import type { Dayjs } from 'dayjs'
+import dayjs from 'dayjs'
 import { motion } from 'framer-motion'
 import { useGetReservationsInfiniteQuery } from '~/features/reservations'
-import { useIntersectionObserver } from '~/hooks'
 import { useScrollContainer } from '~/layouts'
 import { useSetNavigation } from '~/layouts/Layout/navigations'
-import { Context, ContextProps, useReservationTable } from './context'
 import 'dayjs/locale/ko'
 
 dayjs.locale('ko')
 
 const DATE_QUERY_STRING_FORMAT = 'YYYY-MM-DD'
 
+export interface ContextProps {
+  isNeedToScrollUnderDisabledCell: boolean
+  tableCellHeight: number
+  setDates: Dispatch<SetStateAction<string[]>>
+  dates: string[]
+  replaceNewDate: (option: 'add' | 'subtract', callback?: ({ isAddedCells }: { isAddedCells: boolean }) => void) => void
+  courtId: APICourt['id']
+}
+
+export const Context = createContext({} as ContextProps)
+
+export const useReservationTable = () => useContext(Context)
+
 interface ReservationTableProps {
   courtId: APICourt['id']
   date: string

apps/web/src/components/kakaos/Map/Button/CurrentLocation/index.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/react'
-import { Coord } from '@slam/types'
+import type { Coord } from '@slam/types'
 import { motion } from 'framer-motion'
 import { IconButton } from '~/components/uis'
 import { useMap } from '../../context'

apps/web/src/components/kakaos/Map/Button/ZoomInOut/index.tsx

@@ -1,4 +1,4 @@
-import { ComponentProps, ReactNode } from 'react'
+import type { ComponentProps, ReactNode } from 'react'
 import { css } from '@emotion/react'
 import { motion } from 'framer-motion'
 import { IconButton } from '~/components/uis'

apps/web/src/components/kakaos/Map/Container/index.tsx

@@ -1,4 +1,4 @@
-import { CSSProperties, ReactNode } from 'react'
+import type { CSSProperties, ReactNode } from 'react'
 import { useMap } from '../context'
 import useMapEvent from '../hooks/useMapEvent'
 

apps/web/src/components/kakaos/Map/Marker/CustomMarkerOverlay.tsx

@@ -1,4 +1,5 @@
-import { ReactNode, forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from 'react'
+import type { ReactNode } from 'react'
+import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from 'react'
 import { createPortal } from 'react-dom'
 import { useMap } from '../context'
 

apps/web/src/components/kakaos/Map/context/Provider.tsx

@@ -1,5 +1,6 @@
-import { ReactNode, useEffect, useMemo, useRef, useState } from 'react'
-import { useDebounce } from '~/hooks'
+import type { ReactNode } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { useDebounce } from '@slam/hooks'
 import { Context } from '.'
 
 type Props = {

apps/web/src/components/kakaos/Map/context/index.ts

@@ -1,4 +1,5 @@
-import { RefObject, createContext, useContext } from 'react'
+import type { RefObject } from 'react'
+import { createContext, useContext } from 'react'
 
 export const Context = createContext({
   map: null,

apps/web/src/components/kakaos/Map/index.tsx

@@ -1,4 +1,4 @@
-import { CSSProperties, ReactNode } from 'react'
+import type { CSSProperties, ReactNode } from 'react'
 import Button from './Button'
 import Container from './Container'
 import { Provider } from './context/Provider'

apps/web/src/components/uis/Badge/index.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react'
+import type { ReactNode } from 'react'
 import { css } from '@emotion/react'
 import styled from '@emotion/styled'
 

apps/web/src/components/uis/BottomModal/index.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react'
+import type { ReactNode } from 'react'
 import { Box } from '@chakra-ui/react'
 
 type Props = {

apps/web/src/components/uis/Button/index.tsx

@@ -1,8 +1,8 @@
-import { ComponentPropsWithoutRef, ReactNode } from 'react'
+import type { ComponentPropsWithoutRef, ReactNode } from 'react'
 import { Flex, Spinner } from '@chakra-ui/react'
 import { useTheme } from '@emotion/react'
 import { motion } from 'framer-motion'
-import { EmotionTheme } from '~/styles/emotionTheme'
+import type { EmotionTheme } from '~/styles/emotionTheme'
 
 interface Props
   extends Partial<Pick<ComponentPropsWithoutRef<typeof Flex>, 'onClick' | 'style'>>,

apps/web/src/components/uis/FullHeight/index.tsx

@@ -1,6 +1,7 @@
-import { HTMLAttributes, ReactNode, useState } from 'react'
+import type { HTMLAttributes, ReactNode } from 'react'
+import { useState } from 'react'
 import { css } from '@emotion/react'
-import { useIsomorphicLayoutEffect } from '~/hooks'
+import { useIsomorphicLayoutEffect } from '@slam/hooks'
 
 const FullHeight = ({ children, ...props }: { children: ReactNode } & HTMLAttributes<HTMLDivElement>) => {
   const [height, setHeight] = useState(0)

apps/web/src/components/uis/Icon/index.tsx

@@ -1,7 +1,7 @@
 import Image from 'next/image'
 import { css, useTheme } from '@emotion/react'
 import Icons from 'feather-icons'
-import { EmotionTheme } from '~/styles/emotionTheme'
+import type { EmotionTheme } from '~/styles/emotionTheme'
 
 interface Props {
   name: FeatherIconNameType

apps/web/src/components/uis/IconButton/index.tsx

@@ -1,4 +1,4 @@
-import { ComponentProps, MouseEventHandler } from 'react'
+import type { ComponentProps, MouseEventHandler } from 'react'
 import { Center } from '@chakra-ui/react'
 import { useTheme } from '@emotion/react'
 import { motion } from 'framer-motion'

apps/web/src/components/uis/InfiniteScrollSensor/index.tsx

@@ -1,5 +1,6 @@
-import { ReactElement, RefObject, useEffect, useRef } from 'react'
-import { useIntersectionObserver } from '~/hooks'
+import type { ReactElement, RefObject } from 'react'
+import { useEffect, useRef } from 'react'
+import { useIntersectionObserver } from '@slam/hooks'
 
 const InfiniteScrollSensor = ({
   onIntersected,

apps/web/src/components/uis/LayerOver/index.tsx

@@ -1,4 +1,5 @@
-import { ReactNode, createContext, useMemo } from 'react'
+import type { ReactNode } from 'react'
+import { createContext, useMemo } from 'react'
 import { createPortal } from 'react-dom'
 import { useDisclosure } from './hooks'
 

apps/web/src/components/uis/Tab/index.tsx

@@ -1,4 +1,5 @@
-import { Children, PropsWithChildren, createContext, isValidElement, useContext, useMemo, useState } from 'react'
+import type { PropsWithChildren } from 'react'
+import { Children, createContext, isValidElement, useContext, useMemo, useState } from 'react'
 import { Box, HStack } from '@chakra-ui/react'
 import { css } from '@emotion/react'
 import { motion } from 'framer-motion'

apps/web/src/components/uis/Upload/index.tsx

@@ -1,4 +1,5 @@
-import { ChangeEvent, DragEvent, InputHTMLAttributes, ReactNode, useEffect, useRef, useState } from 'react'
+import type { ChangeEvent, DragEvent, InputHTMLAttributes, ReactNode } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { css } from '@emotion/react'
 
 interface Props extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'children'> {

apps/web/src/contexts/AnalyticsProvider/index.tsx

@@ -1,4 +1,5 @@
-import { ReactNode, createContext, useEffect, useMemo } from 'react'
+import type { ReactNode } from 'react'
+import { createContext, useEffect, useMemo } from 'react'
 import { useRouter } from 'next/router'
 import GA from 'react-ga4'
 import { env } from '~/constants'