[fix] 멘토링 확인 프로세스 변경

42manito/src/RTK/Slices/ProfileUpdate.ts

@@ -10,6 +10,7 @@ interface InitialState {
   categories: CategoriesResponseDto[];
   disabled: boolean;
   viewConnectModal: boolean;
+  socialLink: string;
 }
 
 const ProfileUpdate: InitialState = {
@@ -20,6 +21,7 @@ const ProfileUpdate: InitialState = {
   categories: [] as CategoriesResponseDto[],
   disabled: false,
   viewConnectModal: false,
+  socialLink: "",
 };
 
 export const ProfileUpdateSlice = createSlice({
@@ -52,7 +54,7 @@ export const ProfileUpdateSlice = createSlice({
     addCategory(state, action: PayloadAction<HashtagResponseDto>) {
       if (
         state.categories.some(
-          (category) => category.name === action.payload.name,
+          (category) => category.name === action.payload.name
         )
       ) {
         return;
@@ -65,14 +67,17 @@ export const ProfileUpdateSlice = createSlice({
     setViewConnectModal(state, action: PayloadAction<boolean>) {
       state.viewConnectModal = action.payload;
     },
+    setSocialLink(state, action: PayloadAction<string>) {
+      state.socialLink = action.payload;
+    },
     deleteOneHashtag(state, action: PayloadAction<string>) {
       state.hashtags = state.hashtags.filter(
-        (hashtag) => hashtag.name !== action.payload,
+        (hashtag) => hashtag.name !== action.payload
       );
     },
     deleteOneCategory(state, action: PayloadAction<string>) {
       state.categories = state.categories.filter(
-        (category) => category.name !== action.payload,
+        (category) => category.name !== action.payload
       );
     },
     deleteAll(state) {
@@ -93,6 +98,7 @@ export const {
   deleteOneCategory,
   setDisabled,
   setViewConnectModal,
+  setSocialLink,
 } = ProfileUpdateSlice.actions;
 
 export default ProfileUpdateSlice.reducer;

42manito/src/RTK/Slices/Reservation.ts

@@ -6,13 +6,15 @@ interface currMentorType {
   isReservationModalOpen: boolean;
   isFeedbackModalOpen: boolean;
   isCancelModalOpen: boolean;
+  isSocialLinkModalOpen: boolean;
   selectedReservation: ReservationDefaultDto;
 }
 
 const InitialState: currMentorType = {
   isReservationModalOpen: false,
   isFeedbackModalOpen: false,
   isCancelModalOpen: false,
+  isSocialLinkModalOpen: false,
   selectedReservation: {
     id: 0,
     mentorId: 0,
@@ -48,7 +50,7 @@ export const ReservationSlice = createSlice({
     closeFeedbackModal(state) {
       state.isFeedbackModalOpen = false;
     },
-    openCancelModal(state ) {
+    openCancelModal(state) {
       state.isCancelModalOpen = true;
     },
     closeCancelModal(state) {
@@ -57,6 +59,12 @@ export const ReservationSlice = createSlice({
     setSelectedReservation(state, action) {
       state.selectedReservation = action.payload;
     },
+    openSocialLinkModal(state) {
+      state.isSocialLinkModalOpen = true;
+    },
+    closeSocialLinkModal(state) {
+      state.isSocialLinkModalOpen = false;
+    },
   },
 });
 
@@ -68,4 +76,6 @@ export const {
   openCancelModal,
   closeCancelModal,
   setSelectedReservation,
+  openSocialLinkModal,
+  closeSocialLinkModal,
 } = ReservationSlice.actions;

42manito/src/Types/MentorProfiles/MentorProfile.dto.ts

@@ -16,4 +16,5 @@ export interface MentorProfileDto {
     nickname: string;
     profileImage: string;
   };
+  socialLink?: string;
 }

42manito/src/Types/MentorProfiles/MentorProfilePatchReq.dto.ts

@@ -8,4 +8,5 @@ export interface MentorProfilePatchReqDto {
   description?: string;
   hashtags?: HashtagResponseDto[];
   categories?: CategoriesResponseDto[];
+  socialLink?: string | null;
 }

42manito/src/Types/Users/UserDefault.dto.ts

@@ -20,5 +20,6 @@ export interface UserDefaultDto {
     updatedAt: string;
     hashtags: HashtagResponseDto[];
     categories: CategoriesResponseDto[];
+    socialLink: string;
   };
 }

42manito/src/components/Profile/Info.tsx

@@ -1,17 +1,30 @@
+import Image from "next/image";
 import React from "react";
 
 interface props {
   nickname: string;
   count?: number;
+  socialLink?: string;
 }
 
-export default function ProfileInfo({ nickname, count }: props) {
+export default function ProfileInfo({ nickname, count, socialLink }: props) {
   return (
     <div className="profile-info-wrapper">
       <div className="" id="Count">
         <div className="profile-info-container">
-          <div className="text-4xl font-bold flex justify-center items-center flex-col">
+          <div className="text-4xl font-bold flex justify-center items-center">
             {nickname}
+            {socialLink !== undefined && socialLink && (
+              <a href={socialLink} target="_blank">
+                <Image
+                  alt="slack-icon"
+                  width={24}
+                  height={24}
+                  className="ml-2"
+                  src="/Slack-mark-RGB.png"
+                ></Image>
+              </a>
+            )}
           </div>
         </div>
       </div>

42manito/src/components/Profile/Toggle.tsx

@@ -7,30 +7,31 @@ export default function ManitoToggle() {
   const [isHide, setIsHide] = useState(false);
   const [setIsHideMutation, {}] = useSetIsHideMutation();
   const userId = useSelector(
-    (state: RootState) => state.rootReducers.global.uId,
+    (state: RootState) => state.rootReducers.global.uId
   );
   const { data: userData, isLoading: userLoading } = useGetUserQuery(
     { id: userId as number },
-    { skip: userId === undefined },
+    { skip: userId === undefined }
   );
 
   const changeToggle = (e: React.ChangeEvent<HTMLInputElement>) => {
-      if (e.target.checked === false){
-          setIsHideMutation({ id: userId as number, isHide: true });
-      }
-      else{
-          if (userData) {
-              const {categories, hashtags} = userData.mentorProfile;
-              if(categories.length == 0 && hashtags.length == 0)
-                  alert("멘토링 분야와 관심 분야를 각각 최소한 하나 이상 설정해야 합니다.");
-              else if (categories.length == 0)
-                  alert("멘토링 분야를 최소한 하나 이상 설정해야 합니다.");
-              else if (hashtags.length == 0)
-                  alert("관심 분야를 최소한 하나 이상 설정해야 합니다.");
-              else
-                  setIsHideMutation({ id: userId as number, isHide: false });
-          }
+    if (e.target.checked === false) {
+      setIsHideMutation({ id: userId as number, isHide: true });
+    } else {
+      if (userData) {
+        const { categories, hashtags, socialLink } = userData.mentorProfile;
+        if (categories.length == 0)
+          alert("멘토링 분야를 최소한 하나 이상 설정해야 합니다.");
+        else if (hashtags.length == 0)
+          alert("관심 분야를 최소한 하나 이상 설정해야 합니다.");
+        else if (socialLink == "") alert("슬랙 프로필 링크를 추가해야 합니다.");
+        else
+          setIsHideMutation({
+            id: userId as number,
+            isHide: false,
+          });
       }
+    }
   };
 
   useEffect(() => {

42manito/src/components/Profile/UserProfile.tsx

@@ -5,8 +5,9 @@ import DescriptionComponent from "@/components/Profile/Description";
 import { useProfileDetailModal } from "@/hooks/Profile/Component";
 import { useRouter } from "next/router";
 import CardHashtag from "@/components/Global/CardHashtag";
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { CurrMentorSlice } from "@/RTK/Slices/CurrMentor";
+import { RootState } from "@/RTK/store";
 
 interface props {
   UserId: number;
@@ -17,13 +18,17 @@ export default function UserProfile({ UserId, children }: props) {
   const { UserData, UserLoading } = useProfileDetailModal(UserId);
   const router = useRouter();
   const dispatch = useDispatch();
+  const loginId = useSelector(
+    (state: RootState) => state.rootReducers.global.uId
+  );
   if (typeof window === "undefined") {
     return <div>로딩 중...</div>; // 로딩 표시를 보여주셔도 되고, 아무것도 보여주지 않으셔도 됩니다.
   }
   const handleClick = (name: string) => {
     router.push(`/Search/${name}`);
     dispatch(CurrMentorSlice.actions.closeMentorModal());
   };
+  const uid = Number(router.query.userId);
 
   return (
     <>
@@ -34,6 +39,7 @@ export default function UserProfile({ UserId, children }: props) {
             <ProfileInfo
               nickname={UserData.user.nickname}
               count={UserData.mentoringCount}
+              socialLink={uid === loginId ? UserData.socialLink : undefined}
             />
           </div>
           <div className="short-description-container">

42manito/src/components/Reservation/NextProgressButton.tsx

@@ -10,6 +10,7 @@ import { BaseQueryError } from "@reduxjs/toolkit/src/query/baseQueryTypes";
 import { useDispatch } from "react-redux";
 import {
   openFeedbackModal,
+  openSocialLinkModal,
   setSelectedReservation,
 } from "@/RTK/Slices/Reservation";
 
@@ -39,7 +40,7 @@ export default function NextProgressButton({
     try {
       const res = await patchFunc(data).unwrap();
       dispatch(setSelectedReservation(res));
-      alert(msg ? msg : "Success");
+      msg && alert(msg);
     } catch (e: BaseQueryError<any>) {
       alert(errorMsg ? errorMsg : "Error");
     }
@@ -91,15 +92,11 @@ export default function NextProgressButton({
           <Button
             buttonType={ButtonType.ACCEPT}
             onClick={() => {
-              handlePatchReservation(
-                req,
-                patchMenteeCheckedReservation,
-                "확인되었습니다.",
-                "요청에 실패했습니다."
-              );
+              handlePatchReservation(req, patchMenteeCheckedReservation);
+              dispatch(openSocialLinkModal());
             }}
           >
-            확인
+            진행하기
           </Button>
         );
       /* 리뷰 등록에 대해서 별도의 모달이 필요함*/

42manito/src/components/Reservation/modal/SocialLinkModal.tsx

@@ -0,0 +1,61 @@
+import { useDispatch, useSelector } from "react-redux";
+import { closeSocialLinkModal } from "@/RTK/Slices/Reservation";
+import { useState } from "react";
+import { Button } from "@/common";
+import { ButtonType } from "@/Types/General/ButtonType";
+import { RootState } from "@/RTK/store";
+import { useGetMentorProfileQuery } from "@/RTK/Apis/User";
+
+export default function SocialLinkModal() {
+  const dispatch = useDispatch();
+  const reservation = useSelector(
+    (state: RootState) => state.rootReducers.reservation.selectedReservation
+  );
+  const getMentor = useGetMentorProfileQuery({
+    id: reservation.mentorId,
+  });
+
+  const handleOnClose = () => {
+    dispatch(closeSocialLinkModal());
+  };
+
+  const handleOnAccept = () => {
+    window.open(getMentor.data?.socialLink);
+    dispatch(closeSocialLinkModal());
+  };
+
+  return (
+    <div
+      className="connect-wrapper"
+      id="wrapper"
+      onClick={(e) => e.stopPropagation()}
+    >
+      <section
+        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">
+              멘토의 슬랙프로필 페이지로 이동하시겠습니까?
+            </span>
+          </div>
+          <div className="connect-btn-wrapper">
+            <Button
+              buttonType={ButtonType.CANCEL}
+              onClick={() => handleOnClose()}
+            >
+              닫기
+            </Button>
+            <Button
+              buttonType={ButtonType.ACCEPT}
+              onClick={() => handleOnAccept()}
+            >
+              이동하기
+            </Button>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}

42manito/src/pages/Mentorings/index.tsx

@@ -11,6 +11,7 @@ import { useRouter } from "next/router";
 import Loading from "@/components/Global/Loading";
 import FeedbackModal from "@/components/Reservation/modal/FeedbackModal";
 import CancelModal from "@/components/Cancel/CancelModal";
+import SocialLinkModal from "@/components/Reservation/modal/SocialLinkModal";
 
 const Mentoring = () => {
   const banner = [
@@ -36,7 +37,10 @@ const Mentoring = () => {
     (state: RootState) => state.rootReducers.reservation.isFeedbackModalOpen
   );
   const isCancelModalOpen = useSelector(
-      (state: RootState) => state.rootReducers.reservation.isCancelModalOpen
+    (state: RootState) => state.rootReducers.reservation.isCancelModalOpen
+  );
+  const isSociaLinkModalOpen = useSelector(
+    (state: RootState) => state.rootReducers.reservation.isSocialLinkModalOpen
   );
   const handleRoleSelect = (id: string) => {
     if (id === "mentor") {
@@ -147,6 +151,7 @@ const Mentoring = () => {
         {isReservationModalOpen && <ReservationModal />}
         {isFeedbackModalOpen && <FeedbackModal />}
         {isCancelModalOpen && <CancelModal />}
+        {isSociaLinkModalOpen && <SocialLinkModal />}
       </Layout>
     </>
   );