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

* feat: react beautiful dnd 라이브러리 설치
#82

* feat: 커리큘럼 편집 모달창 구현
#82

* refactor: components 필요없는 파일 제거
#82

* refactor: 주석 제거
#82

* feat: 전체보기 버튼 추가

package.json

@@ -18,6 +18,7 @@
     "jotai": "^2.6.1",
     "next": "14.0.4",
     "react": "^18",
+    "react-beautiful-dnd": "^13.1.1",
     "react-datepicker": "^6.6.0",
     "react-dom": "^18",
     "react-icons": "^5.0.1",
@@ -28,6 +29,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

@@ -5,9 +5,9 @@ import NextLink from 'next/link';
 import { useState } from 'react';
 import { MdOutlineArrowForwardIos } from 'react-icons/md';
 
-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 DeleteStudyModal from '@/containers/study/Modal/DeleteStudyModal';
 import TerminateStudyModal from '@/containers/study/Modal/TerminateStudyModal';

src/containers/study/CurriculumCard/index.tsx

@@ -0,0 +1,77 @@
+'use client';
+
+import { Flex, Image, Card, IconButton, useDisclosure, Text } from '@chakra-ui/react';
+import { MdOutlineArrowForwardIos } from 'react-icons/md';
+
+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" gap="3" w="100%">
+      <Flex gap="3" display="flex" w="fit-content" ml="auto" cursor="pointer" onClick={onActionModalOpen}>
+        <IconButton aria-label="" icon={<MdOutlineArrowForwardIos />} size="icon_sm" variant="icon_orange" />
+        <Text>전체 보기</Text>
+      </Flex>
+
+      <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;