feat: 진행 상태 변경시 연락요청 메세지 추가 (#267)

* feat: 진행 상태 변경시 연락요청 메세지 추가 * fix: 멘토의 수락 alert를 멘티의 진행 모달과 동일하게 수정 * fix: modal close
manito42 · Oct 31, 2023 · f19b195 · f19b195
1 parent c563b50
commit f19b195
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 23 deletions.
diff --git a/42manito/src/components/Reservation/NextProgressButton.tsx b/42manito/src/components/Reservation/NextProgressButton.tsx
@@ -31,18 +31,12 @@ export default function NextProgressButton({
     usePatchReservationMenteeCheckMutation();
 
   const dispatch = useDispatch();
-  const handlePatchReservation = async (
-    data: any,
-    patchFunc: any,
-    msg?: string,
-    errorMsg?: string
-  ) => {
+  const handlePatchReservation = async (data: any, patchFunc: any) => {
     try {
       const res = await patchFunc(data).unwrap();
       dispatch(setSelectedReservation(res));
-      msg && alert(msg);
     } catch (e: BaseQueryError<any>) {
-      alert(errorMsg ? errorMsg : "Error");
+      alert("Error");
     }
   };
 
@@ -53,12 +47,8 @@ export default function NextProgressButton({
           <Button
             buttonType={ButtonType.ACCEPT}
             onClick={() => {
-              handlePatchReservation(
-                req,
-                patchAcceptReservation,
-                "수락되었습니다.",
-                "수락에 실패하였습니다."
-              );
+              handlePatchReservation(req, patchAcceptReservation);
+              dispatch(openSocialLinkModal());
             }}
           >
             수락하기

diff --git a/42manito/src/components/Reservation/modal/SocialLinkModal.tsx b/42manito/src/components/Reservation/modal/SocialLinkModal.tsx
@@ -1,10 +1,11 @@
 import { useDispatch, useSelector } from "react-redux";
 import { closeSocialLinkModal } from "@/RTK/Slices/Reservation";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { Button } from "@/common";
 import { ButtonType } from "@/Types/General/ButtonType";
 import { RootState } from "@/RTK/store";
 import { useGetMentorProfileQuery } from "@/RTK/Apis/User";
+import { useProfileDetailModal } from "@/hooks/Profile/Component";
 
 export default function SocialLinkModal() {
   const dispatch = useDispatch();
@@ -14,17 +15,30 @@ export default function SocialLinkModal() {
   const getMentor = useGetMentorProfileQuery({
     id: reservation.mentorId,
   });
+  const userId = useSelector(
+    (state: RootState) => state.rootReducers.global.uId
+  );
+  const { UserData } = useProfileDetailModal(reservation.menteeId);
+  const targetRole = userId === reservation.mentorId ? "멘티" : "멘토";
+  const step = userId === reservation.mentorId ? "수락" : "진행";
 
   const handleOnClose = () => {
     dispatch(closeSocialLinkModal());
   };
 
   const handleOnAccept = () => {
-    getMentor.data?.socialLink !== ""
-      ? window.open(getMentor.data?.socialLink)
-      : window.open(
+    if (targetRole === "멘토") {
+      if (getMentor.data?.socialLink !== "")
+        window.open(getMentor.data?.socialLink);
+      else
+        window.open(
           `https://profile.intra.42.fr/users/${getMentor.data?.user.nickname}`
         );
+    } else {
+      window.open(
+        `https://profile.intra.42.fr/users/${UserData?.user.nickname}`
+      );
+    }
     dispatch(closeSocialLinkModal());
   };
 
@@ -38,11 +52,45 @@ export default function SocialLinkModal() {
         className={`connect-modal-section`}
         onClick={(e) => e.stopPropagation()}
       >
-        <div className="connect-container">
-          <div className="connect-content-wrapper mt-5 self-center flex">
-            <span className="break-keep text-center mx-auto">
-              멘토의
-              {getMentor.data?.socialLink !== ""
+        <div className="connect-container md:w-full">
+          <div className="w-full mt-5 self-center flex-col">
+            <span className="connect-text text-lg font-bold pb-3">
+              <svg
+                width="20"
+                height="20"
+                viewBox="0 0 20 20"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+                className="w-9 h-9 flex justify-center mx-auto mb-2"
+              >
+                <path
+                  d="M1 10C1 5.02944 5.02944 1 10 1C14.9706 1 19 5.02944 19 10C19 14.9706 14.9706 19 10 19C5.02944 19 1 14.9706 1 10Z"
+                  stroke="#94C942"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+                <path
+                  d="M6 10L9 13L14 8"
+                  stroke="#94C942"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </svg>
+              {step} 상태로 변경되었습니다.
+            </span>
+            {targetRole === "멘토" && (
+              <span className="connect-text mt-2">
+                아직 멘토와 연락이 닿지 않으셨나요?
+              </span>
+            )}
+            <span className="connect-text">
+              {targetRole}에게 슬랙메시지를 보내 일정을 잡아주세요.
+            </span>
+            <span className="connect-text mt-4 mb-2">
+              {targetRole}의
+              {getMentor.data?.socialLink !== "" && targetRole === "멘토"
                 ? " 슬랙 프로필 "
                 : " 인트라 프로필 "}
               페이지로 이동하시겠습니까?

diff --git a/42manito/src/styles/connect.css b/42manito/src/styles/connect.css
@@ -56,3 +56,7 @@
         mt-5 mb-2;
   }
 }
+
+.connect-text {
+  @apply break-keep text-center mx-auto block;
+}