Feature/#308 팀페이지 설명글 반응형 수정 (#309)

* fix: tablet, mobile 화면에서 설명글이 안 보이는 버그 수정

* design: 모바일 환경일 때 호버 시 설명글이 뜨도록 변경

* design: align 가운데 정렬

src/components/Title/index.tsx

@@ -1,10 +1,13 @@
 import { Text, Flex, Avatar, Box } from '@chakra-ui/react';
+import { useState } from 'react';
 
 import S3_URL from '@/constants/s3Url';
 
 import { TitleProps } from './types';
 
 const Title = ({ isTeam, name, description, imageUrl }: TitleProps) => {
+  const [isHovered, setIsHovered] = useState(false);
+
   return (
     <Flex pos="relative" align="center" gap="3">
       {isTeam && (
@@ -16,7 +19,10 @@ const Title = ({ isTeam, name, description, imageUrl }: TitleProps) => {
           src={imageUrl ? S3_URL(imageUrl) : '/images/doore_logo.png'}
         />
       )}
-      <Text textStyle="bold_3xl">{name}</Text>
+      <Text textStyle="bold_3xl" onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>
+        {name}
+      </Text>
+
       <Box pos="relative" display={{ base: 'none', lg: 'block' }} w="10" h="12" px="2">
         <Box pos="absolute" zIndex="1" top="50%" w="5" h="5" bg="white" transform="translate(0%, -50%) rotate(45deg)" />
         <Flex
@@ -35,6 +41,23 @@ const Title = ({ isTeam, name, description, imageUrl }: TitleProps) => {
           </Text>
         </Flex>
       </Box>
+
+      <Box
+        pos="absolute"
+        zIndex="2"
+        top="100%"
+        left={isTeam ? '10' : '0'}
+        alignContent="center"
+        display={{ base: isHovered ? 'block' : 'none', lg: 'none' }}
+        w={{ base: '72', '2xl': '96' }}
+        h="100%"
+        p="2"
+        bg="white"
+        borderRadius="base"
+        shadow="md"
+      >
+        <Text>{description}</Text>
+      </Box>
     </Flex>
   );
 };