Feature/#82 커리큘럼 편집 모달창 구현

package.json

@@ -18,6 +18,7 @@
     "jotai": "^2.6.1",
     "next": "14.0.4",
     "react": "^18",
+    "react-beautiful-dnd": "^13.1.1",
     "react-dom": "^18",
     "react-icons": "^5.0.1",
     "react-textarea-autosize": "^8.5.3",
@@ -27,6 +28,7 @@
     "@swc-jotai/react-refresh": "^0.1.0",
     "@types/node": "^20",
     "@types/react": "^18",
+    "@types/react-beautiful-dnd": "^13.1.8",
     "@types/react-dom": "^18",
     "eslint": "^8.56.0",
     "eslint-config-airbnb": "^19.0.4",

src/app/team/[teamId]/study/[studyId]/page.tsx

@@ -1,8 +1,8 @@
 import { Flex, Grid } from '@chakra-ui/react';
 
-import CurriculumCard from '@/components/CurriculumCard';
 import StudyAssetCard from '@/components/StudyAssetCard';
 import Title from '@/components/Title';
+import CurriculumCard from '@/containers/study/CurriculumCard';
 import Feed from '@/containers/study/Feed';
 import Participant from '@/containers/study/Participant';
 import StudyInfoCard from '@/containers/study/StudyInfoCard';

src/containers/study/CurriculumCard/index.tsx

@@ -0,0 +1,81 @@
+'use client';
+
+import { Flex, Image, Card, IconButton, useDisclosure } from '@chakra-ui/react';
+import { BiArrowBack } from 'react-icons/bi';
+
+import CurriculumCardData from '@/mocks/curriculum';
+
+import CurriculumItem from './CurriculumItem';
+import ActionModal from '../../../components/Modal/ActionModal';
+import CurriculumModal from '../CurriculumModal';
+
+const CurriculumCard = () => {
+  const { isOpen: isActionModalOpen, onOpen: onActionModalOpen, onClose: onActionModalClose } = useDisclosure();
+
+  return (
+    <Flex direction="column" w="100%">
+      <IconButton
+        color="white"
+        bg="green_dark"
+        _hover={{ bg: 'green_dark' }}
+        aria-label=""
+        icon={<BiArrowBack />}
+        onClick={onActionModalOpen}
+        size="icon_sm"
+      />
+      <Flex h={{ base: '30vh', lg: '35vh', '2xl': '40vh' }}>
+        <Image
+          display={{ base: 'none', md: 'block' }}
+          w={{ base: '30vh', lg: '35vh', '2xl': '40vh' }}
+          borderTopRightRadius="0"
+          borderTopLeftRadius="2xl"
+          borderBottomLeftRadius="2xl"
+          borderBottomRightRadius="0"
+          alt="curriculum card"
+          src="/images/curriculumCrops/carrot_5.png"
+        />
+        <Card
+          direction="row"
+          w="100%"
+          py="4"
+          pr="1"
+          borderTopRightRadius="2xl"
+          borderTopLeftRadius={{ base: '2xl', md: '0' }}
+          borderBottomLeftRadius={{ base: '2xl', md: '0' }}
+          borderBottomRightRadius="2xl"
+        >
+          <Flex className="scroll" 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>
+      <ActionModal
+        isOpen={isActionModalOpen}
+        onClose={onActionModalClose}
+        title="커리큘럼"
+        subButtonText="이전"
+        onSubButtonClick={() => {
+          onActionModalClose();
+        }}
+        mainButtonText="다음"
+        onMainButtonClick={() => {
+          onActionModalClose();
+        }}
+      >
+        <CurriculumModal />
+      </ActionModal>
+    </Flex>
+  );
+};
+
+export default CurriculumCard;