Merge pull request #94 from BDD-CLUB/Feature/#83-팀/스터디_타이틀_구현

Feature/#83 팀/스터디 타이틀 구현

src/components/Title/index.tsx

@@ -0,0 +1,46 @@
+import { Text, Flex, Avatar, Box } from '@chakra-ui/react';
+
+import { TitleProps } from './types';
+
+const Title = ({ isTeam = false, teamImg, name, description }: TitleProps) => {
+  return (
+    <Flex pos="relative" align="center">
+      {isTeam && teamImg && <Avatar mr="3" borderWidth="3px" borderColor="gray.100" size="md" src={teamImg} />}
+      {isTeam && !teamImg && <Avatar mr="3" bg="white" borderWidth="3px" borderColor="gray.100" size="md" />}
+      {!isTeam && <Box boxSize="9" mr="3" bg="gray.100" borderRadius="full" />}
+      <Text mr="5" fontSize="3xl" fontWeight="bold">
+        {name}
+      </Text>
+      <Box pos="relative" maxW="96" minH="8" maxH="12">
+        <Box
+          pos="absolute"
+          zIndex="1"
+          top="50%"
+          left="-2"
+          w="4"
+          h="4"
+          bg="white"
+          transform="translate(0%, -50%) rotate(45deg)"
+        />
+        <Box
+          pos="absolute"
+          top="50%"
+          left="0"
+          overflow="hidden"
+          w="96"
+          minH="8"
+          maxH="12"
+          px="2"
+          bg="white"
+          borderRadius="base"
+          shadow="md"
+          transform="translate(0%, -50%)"
+        >
+          <Text>{description}</Text>
+        </Box>
+      </Box>
+    </Flex>
+  );
+};
+
+export default Title;

src/components/Title/types.ts

@@ -0,0 +1,6 @@
+export interface TitleProps {
+  isTeam?: boolean;
+  teamImg?: string;
+  name: string;
+  description: string;
+}