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

42manito/src/RTK/Apis/User.ts

@@ -38,11 +38,12 @@ export const userApi = createApi({
     }),
     setIsHide: builder.mutation<
       MentorProfileDto,
-      { id: number; isHide: boolean }
+      { id: number; isHide: boolean; socialLink?: string }
     >({
-      query: (args: { id: number; isHide: boolean }) => {
+      query: (args: { id: number; isHide: boolean; socialLink?: string }) => {
         const body = {
           isHide: args.isHide,
+          socialLink: args?.socialLink,
         };
         return {
           url: `/mentor_profiles/${args.id}`,

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/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;
 }

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 && (
+              <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,32 @@ 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,
+            socialLink: socialLink,
+          });
       }
+    }
   };
 
   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

@@ -97,9 +97,10 @@ export default function NextProgressButton({
                 "확인되었습니다.",
                 "요청에 실패했습니다."
               );
+              // window.open("멘티 프로필");
             }}
           >
-            확인
+            진행하기
           </Button>
         );
       /* 리뷰 등록에 대해서 별도의 모달이 필요함*/

42manito/src/pages/ProfileUpdate/[userId].tsx

@@ -23,6 +23,8 @@ import CategoryUpdateMultiple from "@/components/Profile/Update/CategoryUpdateMu
 import HashtagUpdateInput from "@/components/Profile/Update/HashtagUpdateInput";
 import { ButtonType } from "@/Types/General/ButtonType";
 import CardHashtag from "@/components/Global/CardHashtag";
+import { QuestionCircleOutlined } from "@ant-design/icons";
+import Link from "next/link";
 
 const { TextArea } = Input;
 
@@ -31,6 +33,7 @@ export default function ProfileUpdate() {
   const { userId } = route.query;
   const [shortDescription, setShortDescription] = useState<string>("");
   const [Description, setDescription] = useState<string>("");
+  const [socialLink, setSocialLink] = useState<string>("");
   const { data: allCategories, isLoading, error } = useGetCategoriesQuery();
   const dispatch = useAppDispatch();
   const formData = useSelector(
@@ -61,6 +64,7 @@ export default function ProfileUpdate() {
       form.categories = formData.categories;
       form.shortDescription = shortDescription;
       form.description = Description;
+      form.socialLink = socialLink;
       UserUpdate({
         id: Number(userId as string),
         profile: form,
@@ -92,8 +96,14 @@ export default function ProfileUpdate() {
           UserData.mentorProfile.categories
         )
       );
+      dispatch(
+        ProfileUpdateSlice.actions.setSocialLink(
+          UserData.mentorProfile.socialLink
+        )
+      );
       setDescription(UserData.mentorProfile.description);
       setShortDescription(UserData.mentorProfile.shortDescription);
+      setSocialLink(UserData.mentorProfile.socialLink);
     }
   }, [UserData, dispatch]);
 
@@ -170,6 +180,24 @@ export default function ProfileUpdate() {
               <HashtagUpdateInput hashtags={formData.hashtags} />
             </div>
 
+            <div className="w-[100%] profile-social-link-wrapper">
+              <span className="profile-title">
+                슬랙 링크
+                <a href="/Guide" target="_blank">
+                  <QuestionCircleOutlined className="text-gray-400 align-middle pb-1.5 pl-1 text-lg" />
+                </a>
+              </span>
+              <span className="profile-small-message">
+                슬랙 프로필 링크를 입력해주세요
+              </span>
+              <TextArea
+                className="profile-social-link-input-wrapper"
+                placeholder="슬랙 프로필 링크를 입력해주세요"
+                value={socialLink}
+                onChange={(e) => setSocialLink(e.target.value)}
+              />
+            </div>
+
             <div className="profile-description-wrapper">
               <div className="profile-title mb-5">소개글</div>
               <div className="profile-description">

42manito/src/styles/profile.css

@@ -36,13 +36,24 @@
 .profile-tag-wrapper {
   @apply flex flex-col
                 justify-start items-center
-                overflow-ellipsis mb-5 w-[80%]
-                ;
-    .profile-tag-list {
-        @apply flex flex-wrap
+                overflow-ellipsis mb-5;
+  .profile-tag-list {
+    @apply flex flex-wrap
         justify-center items-center
-        w-[100%] overflow-hidden
-    }
+        w-[90%] overflow-hidden;
+  }
+}
+
+.profile-social-link-wrapper {
+  @apply flex flex-col
+                justify-start items-center
+                overflow-ellipsis mb-5;
+}
+
+.profile-social-link-input-wrapper {
+  @apply w-[80%] flex flex-row
+                justify-center items-center
+                mt-5;
 }
 
 .profile-title {
@@ -52,8 +63,6 @@
                 dark:text-bg_color-200;
 }
 
-
-
 .profile-description-wrapper {
   @apply flex flex-col
                 items-center justify-center