[feature/#5/ProjectCard] 프로젝트 카드 컴포넌트

src/components/ProjectCard/ProjectCard.tsx

@@ -0,0 +1,107 @@
+import { IoMdHeart, IoMdHeartEmpty } from "react-icons/io"
+import { MdRemoveRedEye } from "react-icons/md"
+
+import { Box, Flex, Heading, Icon, Image, Stack, Text } from "@chakra-ui/react"
+
+interface ProjectCardProps {
+  imgUrl: string
+  viewCount: number
+  heartCount: number
+  isFullHeart: boolean
+  title: string
+  content: string
+}
+
+const ProjectCard = ({
+  imgUrl,
+  viewCount,
+  heartCount,
+  isFullHeart,
+  title,
+  content,
+}: ProjectCardProps) => {
+  return (
+    <Box
+      width="100%"
+      padding="1rem"
+      cursor="pointer">
+      <Box
+        position="relative"
+        overflow="hidden"
+        _hover={{ "& > .hover-overlay": { opacity: 1 } }}
+        borderRadius="1rem">
+        <Image
+          src={imgUrl}
+          alt="projectImg"
+          width="100%"
+        />
+        <Box
+          className="hover-overlay"
+          position="absolute"
+          top="0"
+          left="0"
+          width="100%"
+          height="100%"
+          opacity={0}
+          backgroundColor="rgba(0, 0, 0, 0.5)"
+          display="flex"
+          alignItems="center"
+          justifyContent="center"
+          transition="opacity 0.3s">
+          <Text
+            color="white"
+            fontSize="2rem">
+            더보기
+          </Text>
+        </Box>
+      </Box>
+      <Stack
+        mt="4"
+        paddingLeft=".5rem"
+        spacing="1">
+        <Flex alignItems="center">
+          <Heading size="md">{title}</Heading>
+          <Flex
+            ml="auto"
+            paddingRight={5}>
+            <Icon
+              as={MdRemoveRedEye}
+              w="1.3rem"
+              h="1.3rem"
+            />
+            <Text
+              paddingLeft=".5rem"
+              paddingRight=".5rem">
+              {viewCount}
+            </Text>
+            {isFullHeart ? (
+              <Icon
+                as={IoMdHeart}
+                w="1.3rem"
+                h="1.3rem"
+              />
+            ) : (
+              <Icon
+                as={IoMdHeartEmpty}
+                w="1.3rem"
+                h="1.3rem"
+              />
+            )}
+            <Text
+              paddingLeft=".5rem"
+              paddingRight=".5rem">
+              {heartCount}
+            </Text>
+          </Flex>
+        </Flex>
+        <Text
+          width="95%"
+          noOfLines={1}>
+          {content}
+        </Text>
+      </Stack>
+    </Box>
+  )
+}
+
+export default ProjectCard