diff --git a/src/app/team/[teamId]/page.tsx b/src/app/team/[teamId]/page.tsx index 2fa774e7..50c421b9 100644 --- a/src/app/team/[teamId]/page.tsx +++ b/src/app/team/[teamId]/page.tsx @@ -12,6 +12,7 @@ import { StudyCardProps } from '@/components/StudyCard/types'; import TabButton from '@/components/TabButton'; import Title from '@/components/Title'; import { CARD_PER_PAGE, TEAM_CATEGORY_INFOS } from '@/constants/team'; +import StudyModal from '@/containers/study/Modal/StudyModal'; import AssetGridView from '@/containers/team/AssetGridView'; import AttendanceRate from '@/containers/team/AttendanceRate'; import NavigationButton from '@/containers/team/NavigationButton'; @@ -21,7 +22,7 @@ import { gardenInfos1 } from '@/mocks/Garden3D'; import studyAssetCardData from '@/mocks/studyAssetCard'; import studyCardData from '@/mocks/studyCard'; -const Page = () => { +const Page = ({ params }: { params: { teamId: number } }) => { const [category, setCategory] = useState(TEAM_CATEGORY_INFOS[0].name); const [cardIdx, setCardIdx] = useState(0); @@ -30,6 +31,8 @@ const Page = () => { const [assetArray, setAssetArray] = useState([]); const [assetLength, setAssetLength] = useState(0); + const [isCreateStudyModalOpen, setIsCreateStudyModalOpen] = useState(false); + const getCardData = (start: number) => { if (category === '스터디') { // TODO: 스터디 목록 조회하기. @@ -66,7 +69,7 @@ const Page = () => { const handlePlusClick = () => { if (category === '스터디') { - // TODO: create study modal 띄우기 + setIsCreateStudyModalOpen(true); } else if (category === '학습자료') { // TODO: create study asset modal 띄우기 } @@ -78,52 +81,55 @@ const Page = () => { }; return ( - - - - {/* TODO 팀원 목록, 초대링크 버튼 */} - <Flex align="center" gap={{ base: '2', lg: '8' }}> - <TeamMember /> - <Button color="white" bg="orange_dark" rightIcon={<BsLink45Deg size="24px" />} rounded="full" size="sm"> - 초대 - </Button> + <> + <Flex direction="column" gap="8" w="100%" p="8"> + <Flex justify="space-between"> + <Title isTeam name="열사모" description="팀입니다" /> + {/* TODO 팀원 목록, 초대링크 버튼 */} + <Flex align="center" gap={{ base: '2', lg: '8' }}> + <TeamMember /> + <Button color="white" bg="orange_dark" rightIcon={<BsLink45Deg size="24px" />} rounded="full" size="sm"> + 초대 + </Button> + </Flex> </Flex> - </Flex> - <Flex pos="relative" align="center" flex="1" gap="8"> - {/* TODO 잔디 */} - <Box pos="relative" overflow="hidden" w="100%" h={{ base: '250px', md: '300px', xl: '320px' }}> - <Box pos="absolute" w="100%" h="100%"> - <Garden3D - rotate - rotateY={0} - cubeGap={useBreakpointValue({ base: 3, xl: 4 }) || 3} - cubeSize={useBreakpointValue({ base: 20, md: 26, xl: 30 }) || 20} - gardenInfos={gardenInfos1} - /> + <Flex pos="relative" align="center" flex="1" gap="8"> + {/* TODO 잔디 */} + <Box pos="relative" overflow="hidden" w="100%" h={{ base: '250px', md: '300px', xl: '320px' }}> + <Box pos="absolute" w="100%" h="100%"> + <Garden3D + rotate + rotateY={0} + cubeGap={useBreakpointValue({ base: 3, xl: 4 }) || 3} + cubeSize={useBreakpointValue({ base: 20, md: 26, xl: 30 }) || 20} + gardenInfos={gardenInfos1} + /> + </Box> </Box> - </Box> - {/* TODO 진행도 */} - <AttendanceRate attendanceRate={75} /> - </Flex> + {/* TODO 진행도 */} + <AttendanceRate attendanceRate={75} /> + </Flex> - <Flex direction="column" flex="1" gap="4"> - {/* TODO 스터디, 학습자료, 작물창고 버튼 */} - <TabButton currentTab={category} changeTab={handleCategoryChange} categoryInfos={TEAM_CATEGORY_INFOS} /> - {category !== '작물창고' && ( - <NavigationButton - handlePrevClick={handlePrevClick} - handleNextClick={handleNextClick} - handlePlusClick={handlePlusClick} - /> - )} - {/* TODO 전체보기, 네비게이션 이동 버튼 */} - {/* TODO 스터디 카드 */} - {category === '스터디' && <StudyGridView studyArray={studyArray} />} - {category === '학습자료' && <AssetGridView assetArray={assetArray} />} + <Flex direction="column" flex="1" gap="4"> + {/* TODO 스터디, 학습자료, 작물창고 버튼 */} + <TabButton currentTab={category} changeTab={handleCategoryChange} categoryInfos={TEAM_CATEGORY_INFOS} /> + {category !== '작물창고' && ( + <NavigationButton + handlePrevClick={handlePrevClick} + handleNextClick={handleNextClick} + handlePlusClick={handlePlusClick} + /> + )} + {/* TODO 전체보기, 네비게이션 이동 버튼 */} + {/* TODO 스터디 카드 */} + {category === '스터디' && <StudyGridView studyArray={studyArray} />} + {category === '학습자료' && <AssetGridView assetArray={assetArray} />} + </Flex> </Flex> - </Flex> + <StudyModal teamId={params.teamId} isOpen={isCreateStudyModalOpen} setIsModalOpen={setIsCreateStudyModalOpen} /> + </> ); }; diff --git a/src/app/team/[teamId]/study/[studyId]/page.tsx b/src/app/team/[teamId]/study/[studyId]/page.tsx index ad3f7016..75a63087 100644 --- a/src/app/team/[teamId]/study/[studyId]/page.tsx +++ b/src/app/team/[teamId]/study/[studyId]/page.tsx @@ -1,5 +1,3 @@ -/* eslint-disable @typescript-eslint/no-unused-vars */ - 'use client'; import { Flex, Grid, IconButton, Text, Link } from '@chakra-ui/react'; @@ -12,6 +10,7 @@ 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 StudyModal from '@/containers/study/Modal/StudyModal'; import TerminateStudyModal from '@/containers/study/Modal/TerminateStudyModal'; import Participant from '@/containers/study/Participant'; import StudyControlPanel from '@/containers/study/StudyControlPanel'; @@ -22,7 +21,7 @@ import studyCardData from '@/mocks/studyCard'; const sampleStudy = studyCardData[0]; -const Page = () => { +const Page = ({ params }: { params: { studyId: number } }) => { const [isEditModalOpen, setIsEditModalOpen] = useState<boolean>(false); const [isDeleteModalOpen, setIsDeleteModalOpen] = useState<boolean>(false); const [isTerminateModalOpen, setIsTerminateModalOpen] = useState<boolean>(false); @@ -79,6 +78,7 @@ const Page = () => { </Flex> </Grid> </Flex> + <StudyModal studyId={params.studyId} isOpen={isEditModalOpen} setIsModalOpen={setIsEditModalOpen} /> <TerminateStudyModal studyName={sampleStudy.name} isOpen={isTerminateModalOpen} diff --git a/src/containers/team/CreateStudyModal/index.tsx b/src/containers/study/Modal/StudyModal/index.tsx similarity index 83% rename from src/containers/team/CreateStudyModal/index.tsx rename to src/containers/study/Modal/StudyModal/index.tsx index 305f0ad1..8703425b 100644 --- a/src/containers/team/CreateStudyModal/index.tsx +++ b/src/containers/study/Modal/StudyModal/index.tsx @@ -11,7 +11,7 @@ import Selector from '@/components/Selector'; import StyledDatePicker from '@/components/StyledDatePicker'; import CROP from '@/constants/crop'; -import { CreateStudyModalProps } from './types'; +import { StudyModalProps } from './types'; const AlertContent = ({ message }: { message: string }) => { return ( @@ -21,7 +21,8 @@ const AlertContent = ({ message }: { message: string }) => { ); }; -const CreateStudyModal = ({ isOpen, setIsModalOpen }: CreateStudyModalProps) => { +const StudyModal = ({ teamId, studyId, isOpen, setIsModalOpen }: StudyModalProps) => { + const isEditMode = Boolean(studyId); const [step, setStep] = useState<number>(1); const [name, setName] = useState<string>(''); const [description, setDescription] = useState<string>(''); @@ -34,6 +35,21 @@ const CreateStudyModal = ({ isOpen, setIsModalOpen }: CreateStudyModalProps) => const [alertSelectedCropId, setAlertSelectedCropId] = useState<boolean>(false); const [alertStartDate, setAlertStartDate] = useState<boolean>(false); + const onClose = () => { + setStep(1); + setName(''); + setDescription(''); + setCropName(''); + setCropId(0); + setStartDate(null); + setEndDate(null); + setAlertName(false); + setAlertDescription(false); + setAlertSelectedCropId(false); + setAlertStartDate(false); + setIsModalOpen(false); + }; + const handlePrevButtonClick = () => { setStep(step - 1); }; @@ -43,9 +59,14 @@ const CreateStudyModal = ({ isOpen, setIsModalOpen }: CreateStudyModalProps) => if (name !== '' && description !== '') setStep(step + 1); }; const handleSaveButtonClick = () => { - if (cropName === '') setAlertSelectedCropId(true); - if (startDate === null) setAlertStartDate(true); - if (cropName !== '' && startDate !== null) setIsModalOpen(false); + if (isEditMode) { + if (startDate === null) setAlertStartDate(true); + else onClose(); + } else { + if (cropName === '') setAlertSelectedCropId(true); + if (startDate === null) setAlertStartDate(true); + if (cropName !== '' && startDate !== null) onClose(); + } }; const handleNameChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => { setName(e.target.value); @@ -69,11 +90,11 @@ const CreateStudyModal = ({ isOpen, setIsModalOpen }: CreateStudyModalProps) => return ( <ActionModal isOpen={isOpen} - onClose={() => setIsModalOpen(false)} - title="스터디 생성" + onClose={onClose} + title={`스터디 ${isEditMode ? '수정' : '생성'}`} subButtonText={step === 1 ? '취소' : '이전'} mainButtonText={step === 1 ? '다음' : '저장'} - onSubButtonClick={step === 1 ? () => setIsModalOpen(false) : handlePrevButtonClick} + onSubButtonClick={step === 1 ? onClose : handlePrevButtonClick} onMainButtonClick={step === 1 ? handleNextButtonClick : handleSaveButtonClick} > <Box overflowY="auto" minH="60vh" maxH="60vh"> @@ -113,7 +134,7 @@ const CreateStudyModal = ({ isOpen, setIsModalOpen }: CreateStudyModalProps) => /> </> )} - {step === 2 && ( + {step === 2 && !isEditMode && ( <> <Text textStyle="bold_xl" mt="4" mb="2"> 작물 선택 * @@ -133,6 +154,10 @@ const CreateStudyModal = ({ isOpen, setIsModalOpen }: CreateStudyModalProps) => else setAlertSelectedCropId(true); }} /> + </> + )} + {step === 2 && ( + <> <Text textStyle="bold_xl" mt="8" mb="2"> 날짜 선택 * </Text> @@ -147,4 +172,4 @@ const CreateStudyModal = ({ isOpen, setIsModalOpen }: CreateStudyModalProps) => </ActionModal> ); }; -export default CreateStudyModal; +export default StudyModal; diff --git a/src/containers/study/Modal/StudyModal/types.ts b/src/containers/study/Modal/StudyModal/types.ts new file mode 100644 index 00000000..92269764 --- /dev/null +++ b/src/containers/study/Modal/StudyModal/types.ts @@ -0,0 +1,6 @@ +export interface StudyModalProps { + teamId?: number; + studyId?: number; + isOpen: boolean; + setIsModalOpen: (isOpen: boolean) => void; +} diff --git a/src/containers/team/CreateStudyModal/types.ts b/src/containers/team/CreateStudyModal/types.ts deleted file mode 100644 index a844e831..00000000 --- a/src/containers/team/CreateStudyModal/types.ts +++ /dev/null @@ -1,4 +0,0 @@ -export interface CreateStudyModalProps { - isOpen: boolean; - setIsModalOpen: (isOpen: boolean) => void; -}