Feature/#81 커리큘럼 구현 (#96)

* design: 작물 이미지 추가

#81

* feat: mocks data추가

#81

* feat: 커리큘럼 카드 구현

#81

src/components/CurriculumCard/CurriculumItem/index.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import { Box, Checkbox, Flex, Text } from '@chakra-ui/react';
+import { useState } from 'react';
+
+import { CurriculumItemProps } from '../types';
+
+const CurriculumItem = ({ id, name, itemOrder, isCompleted }: CurriculumItemProps) => {
+  const [checked, setChecked] = useState(isCompleted);
+
+  const handleCheckboxChange = () => {
+    setChecked(!checked);
+  };
+
+  return (
+    <Flex key={id.toString()} align="center" gap="4" px="4">
+      <Text color={checked ? 'orange' : 'orange_light'} fontSize="xl" fontWeight="bold">
+        {itemOrder.toString().padStart(2, '0')}
+      </Text>
+
+      <Box w="100%" px="3" py="1.5" color="white" fontSize="lg" bg={checked ? 'orange' : 'orange_light'} rounded="3xl">
+        <Text pr="10" fontSize="xl">
+          {name}
+        </Text>
+      </Box>
+      <Checkbox
+        borderColor={checked ? 'orange' : 'orange_light'}
+        bgColor="white"
+        colorScheme="white"
+        defaultChecked={checked}
+        iconColor="orange"
+        onChange={handleCheckboxChange}
+        size="lg"
+      />
+    </Flex>
+  );
+};
+
+export default CurriculumItem;

src/components/CurriculumCard/index.tsx

@@ -0,0 +1,47 @@
+import { Flex, Image, Card } from '@chakra-ui/react';
+
+import CurriculumCardData from '@/mocks/curriculum';
+
+import CurriculumItem from './CurriculumItem';
+
+const CurriculumCard = () => {
+  return (
+    <Flex h="300px">
+      <Image
+        w="300px"
+        borderTopRightRadius="0"
+        borderTopLeftRadius="2xl"
+        borderBottomLeftRadius="2xl"
+        borderBottomRightRadius="0"
+        alt="curriculum card"
+        src="/images/curriculumCrops/carrot_5.png"
+      />
+      <Card
+        direction="row"
+        w="70%"
+        py="4"
+        pr="1"
+        borderTopRightRadius="2xl"
+        borderTopLeftRadius="0"
+        borderBottomLeftRadius="0"
+        borderBottomRightRadius="2xl"
+      >
+        <Flex direction="column" gap="3" overflowY="auto" w="100%">
+          {CurriculumCardData.map((data) => {
+            return (
+              <CurriculumItem
+                key={data.id}
+                id={data.id}
+                name={data.name}
+                itemOrder={data.itemOrder}
+                isCompleted={data.isCompleted}
+              />
+            );
+          })}
+        </Flex>
+      </Card>
+    </Flex>
+  );
+};
+
+export default CurriculumCard;

src/components/CurriculumCard/types.ts

@@ -0,0 +1,6 @@
+export interface CurriculumItemProps {
+  id: number;
+  name: string;
+  itemOrder: number;
+  isCompleted: boolean;
+}

src/mocks/curriculum.ts

@@ -0,0 +1,42 @@
+import { CurriculumItemProps } from '@/components/CurriculumCard/types';
+
+const CurriculumCardData: CurriculumItemProps[] = [
+  {
+    id: 1,
+    name: '커리큘럼1',
+    itemOrder: 1,
+    isCompleted: true,
+  },
+  {
+    id: 2,
+    name: '커리큘럼2',
+    itemOrder: 2,
+    isCompleted: false,
+  },
+  {
+    id: 3,
+    name: '커리큘럼3',
+    itemOrder: 3,
+    isCompleted: true,
+  },
+  {
+    id: 4,
+    name: '커리큘럼4',
+    itemOrder: 4,
+    isCompleted: false,
+  },
+  {
+    id: 5,
+    name: '커리큘럼5',
+    itemOrder: 5,
+    isCompleted: false,
+  },
+  {
+    id: 6,
+    name: '커리큘럼6',
+    itemOrder: 6,
+    isCompleted: true,
+  },
+];
+
+export default CurriculumCardData;