Feature/#217 스터디 수정 버튼 구현 (#218)

* feat: 스터디 수정 버튼 추가 #217 * feat: 스터디 페이지에서 해당 컴포넌트 editModalOpen props 추가 #217
BDD-CLUB · May 29, 2024 · 48e7d9b · 48e7d9b
1 parent c322c6b
commit 48e7d9b
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 2 deletions.
diff --git a/src/app/team/[teamId]/study/[studyId]/page.tsx b/src/app/team/[teamId]/study/[studyId]/page.tsx
@@ -21,6 +21,7 @@ import studyCardData from '@/mocks/studyCard';
 const sampleStudy = studyCardData[0];
 
 const Page = () => {
+  const [isEditModalOpen, setIsEditModalOpen] = useState<boolean>(false);
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState<boolean>(false);
   const [isTerminateModalOpen, setIsTerminateModalOpen] = useState<boolean>(false);
 
@@ -35,7 +36,11 @@ const Page = () => {
             endAt={new Date(sampleStudy.endDate)}
           />
         </Flex>
-        <StudyControlPanel terminateModalOpen={setIsTerminateModalOpen} deleteModalOpen={setIsDeleteModalOpen} />
+        <StudyControlPanel
+          editModalOpen={setIsEditModalOpen}
+          terminateModalOpen={setIsTerminateModalOpen}
+          deleteModalOpen={setIsDeleteModalOpen}
+        />
         <Grid gap="4" templateColumns={{ base: '', xl: '2fr 1fr' }} w="100%">
           <Flex direction="column" rowGap={{ base: '6', '2xl': '12' }}>
             <CurriculumCard />

diff --git a/src/containers/study/StudyControlPanel/index.tsx b/src/containers/study/StudyControlPanel/index.tsx
@@ -2,9 +2,23 @@ import { Button, Flex } from '@chakra-ui/react';
 
 import { StudyControlPanelProps } from './types';
 
-const StudyControlPanel = ({ terminateModalOpen, deleteModalOpen }: StudyControlPanelProps) => {
+const StudyControlPanel = ({ editModalOpen, terminateModalOpen, deleteModalOpen }: StudyControlPanelProps) => {
   return (
     <Flex gap="2" mb="8">
+      <Button
+        w="fit-content"
+        px="4"
+        py="1"
+        color="white"
+        bg="orange"
+        shadow="md"
+        _hover={{ bg: 'orange' }}
+        aria-label=""
+        onClick={() => editModalOpen(true)}
+        size="xs"
+      >
+        수정
+      </Button>
       <Button
         w="fit-content"
         px="4"

diff --git a/src/containers/study/StudyControlPanel/types.ts b/src/containers/study/StudyControlPanel/types.ts
@@ -1,4 +1,5 @@
 export interface StudyControlPanelProps {
+  editModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
   terminateModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
   deleteModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
 }