[fix] 멘토링 확인 프로세스 변경 (#237)

* feat: 프로필에 소셜 링크 추가 * feat: 소셜링크 받아와지는 것 확인 * [Fix] #208,#206,#197 (#220) * [fix]: tag 가 width를 넘치는 문제 해소 * [fix]: 불필요한 slice로 복사 붙여넣기 느려지는 문제 해소 * [fix]: # trimming, hashtag 12자 제한 * [fix]: #197, review length 조절 및 ui 일부 변경 UI: input box size row = 6 설정 UI: counter 제공 fid: maxLength 300 제한 * [fix]: 해시태그 문자 제한 제거 * [fix]: 멘토링 분야 선택 #224 * feat: 프로필에 소셜 링크 추가 * feat: 멘토 프로필에 socialLink 추가, 토글 활성화 조건 추가 * refactor: css * fix: 진행버튼 * fix: build error * fix: socialLink 공백인 경우 null 처리 * feat: 멘토링 진행하기 버튼 클릭시 슬랙 프로필 링크 이동여부 모달 * fix: 테스트 * fix: css 제대로 병합 * fix: 소셜링크 없을 때 undefined, 프로필 슬랙 이미지 비활성화 * fix: 진행 alert 제거, socialLink Regex 검사 * fix: 이번엔 진짜 진행하기... , dto 변경 * fix: success alert 제거 * ✨ [Feat]: mentorProfile activation --------- Co-authored-by: Photogrammer <81505228+JuneParkCode@users.noreply.github.com> Co-authored-by: myukang <myunghwan0421@gmail.com>
manito42 · Oct 6, 2023 · 3faf0d3 · 3faf0d3
1 parent 45336fe
commit 3faf0d3
Show file tree

Hide file tree

Showing 17 changed files with 238 additions and 51 deletions.
diff --git a/42manito/public/Slack-mark-RGB.png b/42manito/public/Slack-mark-RGB.png
diff --git a/42manito/src/RTK/Apis/User.ts b/42manito/src/RTK/Apis/User.ts
@@ -45,7 +45,7 @@ export const userApi = createApi({
           isHide: args.isHide,
         };
         return {
-          url: `/mentor_profiles/${args.id}`,
+          url: `/mentor_profiles/${args.id}/activation`,
           data: body,
           method: "PATCH",
         };

diff --git a/42manito/src/RTK/Slices/ProfileUpdate.ts b/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;
diff --git a/42manito/src/RTK/Slices/Reservation.ts b/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;
diff --git a/42manito/src/Types/MentorProfiles/MentorProfile.dto.ts b/42manito/src/Types/MentorProfiles/MentorProfile.dto.ts
@@ -16,4 +16,5 @@ export interface MentorProfileDto {
     nickname: string;
     profileImage: string;
   };
+  socialLink?: string;
 }
diff --git a/42manito/src/Types/MentorProfiles/MentorProfilePatchReq.dto.ts b/42manito/src/Types/MentorProfiles/MentorProfilePatchReq.dto.ts
@@ -8,4 +8,5 @@ export interface MentorProfilePatchReqDto {
   description?: string;
   hashtags?: HashtagResponseDto[];
   categories?: CategoriesResponseDto[];
+  socialLink?: string | null;
 }
diff --git a/42manito/src/Types/Users/UserDefault.dto.ts b/42manito/src/Types/Users/UserDefault.dto.ts
@@ -20,5 +20,6 @@ export interface UserDefaultDto {
     updatedAt: string;
     hashtags: HashtagResponseDto[];
     categories: CategoriesResponseDto[];
+    socialLink: string;
   };
 }
diff --git a/42manito/src/components/Profile/Info.tsx b/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>

diff --git a/42manito/src/components/Profile/Toggle.tsx b/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(() => {

diff --git a/42manito/src/components/Profile/UserProfile.tsx b/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">

diff --git a/42manito/src/components/Reservation/NextProgressButton.tsx b/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>
         );
       /* 리뷰 등록에 대해서 별도의 모달이 필요함*/

diff --git a/42manito/src/components/Reservation/modal/SocialLinkModal.tsx b/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>
+  );
+}
diff --git a/42manito/src/pages/Mentorings/index.tsx b/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>
     </>
   );