[FE] 방 참여 조건에 대한 모달 변경(#758) (#759)

woowacourse-teams · Nov 13, 2024 · 722a6dd · 722a6dd
2 parents 19e996b + 42337a0
commit 722a6dd
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 25 deletions.
diff --git a/frontend/src/components/shared/roomCard/RoomCard.tsx b/frontend/src/components/shared/roomCard/RoomCard.tsx
@@ -4,13 +4,12 @@ import useModal from "@/hooks/common/useModal";
 import Icon from "@/components/common/icon/Icon";
 import ImageWithFallback from "@/components/common/img/ImageWithFallback";
 import Label from "@/components/common/label/Label";
-import AlertModal from "@/components/common/modal/alertModal/AlertModal";
+import ConfirmModal from "@/components/common/modal/confirmModal/ConfirmModal";
 import ClassificationBadge from "@/components/shared/classificationBadge/ClassificationBadge";
 import * as S from "@/components/shared/roomCard/RoomCard.style";
 import RoomCardModal from "@/components/shared/roomCardModal/RoomCardModal";
 import { RoomInfo } from "@/@types/roomInfo";
 import { MAX_KEYWORDS } from "@/constants/room";
-import { HoverStyledLink } from "@/styles/common";
 import { theme } from "@/styles/theme";
 import { convertdDayToKorean } from "@/utils/convertToKorean";
 import { convertDateToKorean, formatDday, formatLeftTime } from "@/utils/dateFormatter";
@@ -66,36 +65,16 @@ interface RoomCardProps {
 
 const RoomCard = React.memo(({ roomInfo }: RoomCardProps) => {
   const { isModalOpen, handleOpenModal, handleCloseModal } = useModal();
-  const [isNoticeModalOpen, setIsNoticeModalOpen] = useState(false);
-
-  const handleNoticeModal = () => {
-    if (isNoticeModalOpen) {
-      handleOpenModal();
-    }
-
-    setIsNoticeModalOpen((prev) => !prev);
-  };
 
   const displayedKeywords = roomInfo.keywords
     .filter((keyword) => keyword !== "")
     .slice(0, MAX_KEYWORDS);
 
   return (
     <>
-      <AlertModal isOpen={isNoticeModalOpen} onClose={handleNoticeModal}>
-        해당 링크를 참고하여 본인 레포에 PR을 남겨주세요 <br /> (본인 레포에 PR을 작성하지 않으면 방
-        매칭이 안돼요 😥)
-        <HoverStyledLink
-          to={"https://github.com/2024-Code-Review-Area/description-convenience-store-7"}
-          target="_blank"
-          rel="noreferrer"
-        >
-          🔗 방 참여방법 보러가기
-        </HoverStyledLink>
-      </AlertModal>
       <RoomCardModal isOpen={isModalOpen} onClose={handleCloseModal} roomInfo={roomInfo} />
 
-      <S.RoomCardContainer onClick={handleNoticeModal}>
+      <S.RoomCardContainer onClick={handleOpenModal}>
         <S.ClassificationBadgeWrapper>
           <ClassificationBadge text={roomInfo.classification} />
         </S.ClassificationBadgeWrapper>

diff --git a/frontend/src/components/shared/roomCardModal/RoomCardModalButton.tsx b/frontend/src/components/shared/roomCardModal/RoomCardModalButton.tsx
@@ -3,8 +3,10 @@ import { useNavigate } from "react-router-dom";
 import useMutateRoom from "@/hooks/mutations/useMutateRoom";
 import Button from "@/components/common/button/Button";
 import Checkbox from "@/components/common/checkbox/Checkbox";
+import ConfirmModal from "@/components/common/modal/confirmModal/ConfirmModal";
 import * as S from "@/components/shared/roomCardModal/RoomCardModal.style";
 import { Role, RoomInfo } from "@/@types/roomInfo";
+import { HoverStyledLink } from "@/styles/common";
 
 interface RoomCardModalButtonProps {
   roomInfo: RoomInfo;
@@ -16,11 +18,16 @@ const RoomCardModalButton = ({ roomInfo }: RoomCardModalButtonProps) => {
   const navigate = useNavigate();
 
   const [matchingSize, setMatchingSize] = useState(roomInfo.matchingSize);
+  const [isNoticeModalOpen, setIsNoticeModalOpen] = useState(false);
   const { postParticipateInMutation } = useMutateRoom();
   const isLoggedIn = !!localStorage.getItem("accessToken");
   const isReviewer = localStorage.getItem("memberRole") === "REVIEWER";
   const userRole = isReviewer ? "REVIEWER" : "BOTH";
 
+  const handleNoticeModal = () => {
+    setIsNoticeModalOpen((prev) => !prev);
+  };
+
   const handleParticipateRoomClick = () => {
     postParticipateInMutation.mutate(
       {
@@ -60,6 +67,22 @@ const RoomCardModalButton = ({ roomInfo }: RoomCardModalButtonProps) => {
 
   return (
     <S.ButtonContainer>
+      <ConfirmModal
+        isOpen={isNoticeModalOpen}
+        onClose={handleNoticeModal}
+        onConfirm={handleParticipateRoomClick}
+        onCancel={handleNoticeModal}
+      >
+        해당 링크를 참고하여 본인 레포에 PR을 남겨주세요 <br /> (본인 레포에 PR을 작성하지 않으면 방
+        매칭이 안돼요 😥)
+        <HoverStyledLink
+          to={"https://github.com/2024-Code-Review-Area/description-convenience-store-7"}
+          target="_blank"
+          rel="noreferrer"
+        >
+          🔗 방 참여방법 보러가기
+        </HoverStyledLink>
+      </ConfirmModal>
       <S.FormContainer>
         <S.FormWrapper onClick={(e) => e.stopPropagation()}>
           <S.MatchingSizeContainer>
@@ -104,7 +127,7 @@ const RoomCardModalButton = ({ roomInfo }: RoomCardModalButtonProps) => {
         </S.FormWrapper>
       </S.FormContainer>
 
-      <Button variant="primary" size="small" onClick={handleParticipateRoomClick}>
+      <Button variant="primary" size="small" onClick={handleNoticeModal}>
         참여하기
       </Button>
     </S.ButtonContainer>

diff --git a/frontend/src/mocks/mockResponse/roomInfos.json b/frontend/src/mocks/mockResponse/roomInfos.json
@@ -61,7 +61,7 @@
       "message": "방 실패했습니다."
     },
     {
-      "id": 2,
+      "id": 1,
       "title": "자바 레이싱 카 - MVC",
       "content": "MVC 패턴을 아시나요?",
       "manager": "최거짓",