fix(web): migrate chakra's Box, Text, Spinner, Stack, VStack, HStack …

…to @jsxcss/emotion

apps/web/package.json

@@ -10,12 +10,12 @@
   },
   "dependencies": {
     "@chakra-ui/react": "^2.3.6",
-    "@chakra-ui/styled-system": "^2.3.4",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
     "@hookform/devtools": "^4.2.2",
+    "@hookform/error-message": "^2.0.1",
     "@hookform/resolvers": "^2.9.8",
-    "@jsxcss/emotion": "^0.4.1",
+    "@jsxcss/emotion": "^1.3.6",
     "@sentry/nextjs": "^7.15.0",
     "@slam/hooks": "workspace:*",
     "@slam/types": "workspace:*",

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

@@ -0,0 +1,33 @@
+import { css } from '@emotion/react'
+import { Box, Flex } from '@jsxcss/emotion'
+
+export const Spinner = () => (
+  <Flex.Center position="relative" width={20} height={20}>
+    <Box
+      position="absolute"
+      width={20}
+      height={20}
+      boxSizing="border-box"
+      border="2px solid transparent"
+      borderRadius="50%"
+      borderTopColor="black"
+      borderBottomColor="black"
+      borderLeftColor="black"
+      margin="-10px 0 0 -10px"
+      top="50%"
+      left="50%"
+      css={css`
+        animation: spinner 0.4s linear infinite;
+
+        @keyframes spinner {
+          from {
+            transform: rotate(0deg);
+          }
+          to {
+            transform: rotate(360deg);
+          }
+        }
+      `}
+    />
+  </Flex.Center>
+)

apps/web/src/components/common/index.ts

@@ -1 +1,2 @@
 export { default as OpenGraph } from './OpenGraph'
+export { Spinner } from './Spinner'

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

@@ -1,7 +1,7 @@
 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 { Box, Stack } from '@jsxcss/emotion'
 import type { APIChatRoom, APICourt, APIFavorite } from '@slam/types'
 import { Icon, IconButton } from '~/components/uis'
 import { useCancelFavoriteMutation, useCreateFavoriteMutation } from '~/features/favorites'
@@ -57,32 +57,32 @@ const CourtItem = {
 
   Header: ({ children }: { children: ReactNode }) => {
     return (
-      <HStack spacing="4px">
+      <Stack.Horizontal spacing={4} align="center">
         <Icon name="map-pin" color="#FE6D04" />
-        <Text fontSize="22px" fontWeight="bold" overflow="hidden" whiteSpace="nowrap" textOverflow="ellipsis">
+        <Box fontSize="22px" fontWeight="bold" overflow="hidden" whiteSpace="nowrap" textOverflow="ellipsis">
           {children}
-        </Text>
-      </HStack>
+        </Box>
+      </Stack.Horizontal>
     )
   },
   Address: ({ children }: { children: ReactNode }) => {
     const theme = useTheme()
 
     return (
       <Box>
-        <Text
+        <Box
+          display="box"
+          overflow="hidden"
+          textOverflow="ellipsis"
+          wordWrap="break-word"
           color={theme.colors.gray0700}
           css={css`
-            display: box;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            word-wrap: break-word;
             -webkit-line-clamp: 2;
             -webkit-box-orient: vertical;
           `}
         >
           {children}
-        </Text>
+        </Box>
       </Box>
     )
   },

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

@@ -1,6 +1,6 @@
 import { useMemo, useRef, useState } from 'react'
-import { HStack, Text, VStack } from '@chakra-ui/react'
-import { css, useTheme } from '@emotion/react'
+import { useTheme } from '@emotion/react'
+import { Box, Stack } from '@jsxcss/emotion'
 import type { Dayjs } from 'dayjs'
 import dayjs from 'dayjs'
 import { motion } from 'framer-motion'
@@ -34,18 +34,11 @@ const DatePicker = ({ initialValue, onChange }: Props) => {
   const ref = useRef<HTMLDivElement>(null)
 
   return (
-    <motion.div
-      ref={ref}
-      whileTap={{ cursor: 'grabbing' }}
-      css={css`
-        position: relative;
-        margin: 12px 0;
-      `}
-    >
-      <HStack
+    <motion.div ref={ref} whileTap={{ cursor: 'grabbing' }} css={{ position: 'relative', margin: `12px 0` }}>
+      <Stack.Horizontal
         as={motion.div}
-        ml={`${DATE_ITEM_GAP}px`}
-        spacing={`${DATE_ITEM_GAP}px`}
+        marginLeft={DATE_ITEM_GAP}
+        spacing={DATE_ITEM_GAP}
         drag="x"
         dragConstraints={{
           right: 0,
@@ -57,26 +50,25 @@ const DatePicker = ({ initialValue, onChange }: Props) => {
           const dayOfWeekIndex = date.day()
 
           return (
-            <VStack
+            <Stack.Vertical
               key={date.toISOString()}
               as={motion.div}
               initial={{ x: 40, opacity: 0 }}
               animate={{ x: 0, opacity: 1, transition: { delay: index / 50 } }}
               whileTap={{ scale: 0.9 }}
               whileHover={{ scale: 1.1 }}
               cursor="pointer"
-              bgColor={theme.colors[selected ? 'black' : 'white']}
-              transition="background-color border 200ms"
+              backgroundColor={theme.colors[selected ? 'black' : 'white']}
               boxShadow="0 8px 32px -16px #00000040"
               borderRadius="12px"
               onClick={() => {
                 setSelectedDate(date)
                 onChange(date)
               }}
             >
-              <VStack w={`${DATE_ITEM_WIDTH}px`} spacing="2px" py="8px">
-                <Text
-                  fontSize="16px"
+              <Stack.Vertical align="center" width={DATE_ITEM_WIDTH} spacing={2} padding="8px 0">
+                <Box
+                  fontSize={16}
                   fontWeight="bold"
                   color={
                     dayOfWeekIndex === SUNDAY_INDEX
@@ -89,15 +81,15 @@ const DatePicker = ({ initialValue, onChange }: Props) => {
                   }
                 >
                   {week[dayOfWeekIndex]}
-                </Text>
-                <Text fontSize="21px" fontWeight="bold" color={theme.colors[selected ? 'white' : 'gray0900']}>
+                </Box>
+                <Box fontSize={21} fontWeight="bold" color={theme.colors[selected ? 'white' : 'gray0900']}>
                   {date.date()}
-                </Text>
-              </VStack>
-            </VStack>
+                </Box>
+              </Stack.Vertical>
+            </Stack.Vertical>
           )
         })}
-      </HStack>
+      </Stack.Horizontal>
       <GradientCover position="left" />
       <GradientCover position="right" />
     </motion.div>
@@ -110,18 +102,20 @@ const GradientCover = ({ position }: { position: 'left' | 'right' }) => {
   const theme = useTheme()
 
   return (
-    <motion.div
-      css={css`
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        width: ${DATE_ITEM_GAP}px;
-        background: ${position === 'left'
+    <Box
+      as={motion.div}
+      width={DATE_ITEM_GAP}
+      position="absolute"
+      top={0}
+      bottom={0}
+      left={position === 'left' ? 0 : undefined}
+      right={position === 'right' ? 0 : undefined}
+      background={
+        position === 'left'
           ? `linear-gradient(0.25turn,${theme.colors.gray0050},transparent)`
-          : `linear-gradient(0.25turn,transparent,${theme.colors.gray0050})`};
-        pointer-events: none;
-        ${position}: 0;
-      `}
+          : `linear-gradient(0.25turn,transparent,${theme.colors.gray0050})`
+      }
+      pointerEvents="none"
     />
   )
 }

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

@@ -1,27 +1,27 @@
 import Image from 'next/image'
 import Link from 'next/link'
-import { Text, VStack } from '@chakra-ui/react'
+import { Box, Stack } from '@jsxcss/emotion'
 import { Button, Icon } from '~/components/uis'
 
 interface Props {
   title: string
 }
 
 const ErrorMessage = ({ title }: Props) => (
-  <VStack>
-    <VStack spacing="0">
+  <Stack.Vertical align="center">
+    <Stack.Vertical align="center" spacing={0}>
       <Image src="/assets/error.svg" alt="error" width={60} height={60} />
-      <Text fontSize="lg">{title}</Text>
-    </VStack>
+      <Box fontSize={20}>{title}</Box>
+    </Stack.Vertical>
 
     <Link href="/map" passHref>
       <Button size="lg">
         <Icon name="map" size="sm" color="white" />
         지도에서 내 주변 농구장 찾기
       </Button>
     </Link>
-    <Text fontSize="sm">내 주변 농구장을 찾으러 가보는 건 어떨까요?</Text>
-  </VStack>
+    <Box fontSize={16}>내 주변 농구장을 찾으러 가보는 건 어떨까요?</Box>
+  </Stack.Vertical>
 )
 
 export default ErrorMessage

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

@@ -1,4 +1,4 @@
-import { HStack, Text } from '@chakra-ui/react'
+import { Box, Stack } from '@jsxcss/emotion'
 import type { APIUser } from '@slam/types'
 import { Button } from '~/components/uis'
 import ProfileAvatar from '../ProfileAvatar'
@@ -10,11 +10,11 @@ const FollowListItem = ({
   isFollowed: boolean
   user: Pick<APIUser, 'profileImage' | 'nickname' | 'id'>
 }) => (
-  <HStack width="100%" px="4">
+  <Stack.Horizontal align="center" spacing={8} width="100%" padding="0 4px">
     <ProfileAvatar user={{ id: user.id, profileImage: user.profileImage }} />
-    <Text flex={1}>{user.nickname}</Text>
+    <Box flex={1}>{user.nickname}</Box>
     <div>{isFollowed === undefined ? <></> : isFollowed ? <Button>팔로잉</Button> : <Button>팔로우</Button>}</div>
-  </HStack>
+  </Stack.Horizontal>
 )
 
 export default FollowListItem

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

@@ -1,6 +1,7 @@
 import Image from 'next/image'
 import Link from 'next/link'
-import { Heading, Text, VStack } from '@chakra-ui/react'
+import { useTheme } from '@emotion/react'
+import { Box, Stack } from '@jsxcss/emotion'
 import { Button, Icon } from '~/components/uis'
 
 type Props = {
@@ -11,6 +12,8 @@ type Props = {
 }
 
 const NoItemMessage = ({ title, description, buttonTitle, type }: Props) => {
+  const theme = useTheme()
+
   const src =
     type === 'favorite'
       ? '/assets/basketball/fire_off_favorited.gif'
@@ -21,24 +24,24 @@ const NoItemMessage = ({ title, description, buttonTitle, type }: Props) => {
       : '/assets/basketball/fire_off_400.gif'
 
   return (
-    <VStack spacing={3}>
+    <Stack.Vertical align="center" spacing={3}>
       <Image width={90} height={170} unoptimized src={src} alt="basketball" />
-      <VStack spacing={1}>
-        <Heading as="h5" fontSize="16px">
+      <Stack.Vertical align="center" spacing={1}>
+        <Box as="h5" fontSize={16} fontWeight={700}>
           {title}
-        </Heading>
-        <Text color="gray.500" fontSize="12px">
+        </Box>
+        <Box color={theme.colors.gray0500} fontSize={12}>
           {description}
-        </Text>
-      </VStack>
+        </Box>
+      </Stack.Vertical>
       <Link href="/map" passHref>
         <Button fullWidth>
           <Icon name="map" size="sm" color="white" />
           {buttonTitle}
         </Button>
       </Link>
-      <div style={{ height: 40 }} />
-    </VStack>
+      <Box height={40} />
+    </Stack.Vertical>
   )
 }