feat: study invite modal

AboutClan · Apr 17, 2024 · c8add5f · c8add5f
1 parent 2e4c94b
commit c8add5f
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 29 deletions.
diff --git a/modals/study/StudyInviteModal.tsx b/modals/study/StudyInviteModal.tsx
@@ -1,10 +1,9 @@
-import { Button, ModalFooter } from "@chakra-ui/react";
+import { Button } from "@chakra-ui/react";
 import { useRouter } from "next/router";
 import { useSession } from "next-auth/react";
 import { useEffect, useState } from "react";
 import styled from "styled-components";
 
-import { SQUARE_RANDOM_IMAGE } from "../../assets/images/imageUrl";
 import { WEB_URL } from "../../constants/system";
 import { ModalSubtitle } from "../../styles/layout/modal";
 import { IModal } from "../../types/components/modalTypes";
@@ -43,7 +42,7 @@ function StudyInviteModal({ setIsModal, place }: IStudyInviteModal) {
         content: {
           title: "같이 스터디 할래?",
           description: place?.fullname,
-          imageUrl: SQUARE_RANDOM_IMAGE[randomNum],
+          imageUrl: place.image,
           link: {
             mobileWebUrl: url,
             webUrl: url,
@@ -68,30 +67,28 @@ function StudyInviteModal({ setIsModal, place }: IStudyInviteModal) {
 
   const footerOptions: IFooterOptions = {
     children: (
-      <ModalFooter p="20px" display="flex" justifyContent="space-between">
-        <ButtonLayout>
-          <Button
-            bg="white"
-            h="100%"
-            border="1.2px solid var(--color-mint)"
-            color="var(--color-mint)"
-            fontSize="16px"
-            onClick={() => setIsModal(false)}
-          >
-            닫기
-          </Button>
-          <Button
-            bg="var(--color-mint)"
-            h="100%"
-            color="white"
-            fontSize="16px"
-            disabled={false}
-            id="kakao-share-button-invite"
-          >
-            친구초대
-          </Button>
-        </ButtonLayout>
-      </ModalFooter>
+      <ButtonLayout>
+        <Button
+          bg="white"
+          h="100%"
+          border="1.2px solid var(--color-mint)"
+          color="var(--color-mint)"
+          fontSize="16px"
+          onClick={() => setIsModal(false)}
+        >
+          닫기
+        </Button>
+        <Button
+          bg="var(--color-mint)"
+          h="100%"
+          color="white"
+          fontSize="16px"
+          disabled={false}
+          id="kakao-share-button-invite"
+        >
+          친구초대
+        </Button>
+      </ButtonLayout>
     ),
   };
 

diff --git a/pageTemplates/study/StudyDateBar.tsx b/pageTemplates/study/StudyDateBar.tsx
@@ -3,15 +3,20 @@ import { faPlus } from "@fortawesome/pro-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import dayjs from "dayjs";
 import { useParams } from "next/navigation";
+import { useState } from "react";
 import styled from "styled-components";
 
+import StudyInviteModal from "../../modals/study/StudyInviteModal";
+import { IPlace } from "../../types/models/studyTypes/studyDetails";
 import { dayjsToFormat } from "../../utils/dateTimeUtils";
 
 interface IStudyDateBar {
   isPrivateStudy: boolean;
+  place: IPlace;
 }
-function StudyDateBar({ isPrivateStudy }: IStudyDateBar) {
+function StudyDateBar({ isPrivateStudy, place }: IStudyDateBar) {
   const { date } = useParams<{ date: string }>();
+  const [isInviteModal, setIsInviteModal] = useState(false);
 
   return (
     <>
@@ -27,11 +32,13 @@ function StudyDateBar({ isPrivateStudy }: IStudyDateBar) {
             rightIcon={<FontAwesomeIcon icon={faPlus} size="xs" />}
             padding="0 var(--gap-2)"
             borderColor="var(--gray-5)"
+            onClick={() => setIsInviteModal(true)}
           >
             친구초대
           </Button>
         )}
       </StudyDateBarContainer>
+      {isInviteModal && <StudyInviteModal setIsModal={setIsInviteModal} place={place} />}
     </>
   );
 }

diff --git a/pages/study/[id]/[date]/index.tsx b/pages/study/[id]/[date]/index.tsx
@@ -78,7 +78,7 @@ export default function Page() {
                 <Divider />
               </>
             )}
-            <StudyDateBar isPrivateStudy={isPrivateStudy} />
+            <StudyDateBar isPrivateStudy={isPrivateStudy} place={place} />
             {!isPrivateStudy && (
               <StudyTimeBoard participants={attendances} studyStatus={study.status} />
             )}