⚡ :: professordetail #8

src/components/home/matching/professorDetail/index.tsx

@@ -6,9 +6,11 @@ import Image from "next/image";
 import Avartar from "src/asset/Avatar.svg";
 import BestRecommandImg from "src/asset/BestRecommand.svg";
 import useMatching from "@/hooks/matching/useMatching";
+import { useParams } from "next/navigation";
 
 const index = () => {
   const { ...professor } = useMatching();
+  const { id } = useParams();
   const professorDetailList = professor.getProfessorDetail();
   const schoolInfo =
     professorDetailList?.data.schoolName +
@@ -32,7 +34,7 @@ const index = () => {
               <Image src={BestRecommandImg} alt="최다추천 이미지" width={70} height={30} />
             </div>
           </div>
-          <S.ChatButton>채팅하기</S.ChatButton>
+          <S.ChatButton onClick={() => professor.postMatching(1)}>채팅하기</S.ChatButton>
         </S.ProffesorInfoWrap>
         <S.CarrerAndReviewWrap>
           <S.CarrerWrap>

src/components/home/matching/professorDetail/style.ts

@@ -5,6 +5,9 @@ export const ProfessorDetailWrap = styled.div`
   width: 100%;
   height: 100vh;
 
+  max-width: 1920px;
+  max-height: 1080px;
+
   display: flex;
   flex-direction: column;
 
@@ -81,10 +84,10 @@ export const ChatButton = styled.button`
 
   background: ${theme.colors.new};
 
-  border-radius: 12px;
+  border-radius: 15px;
 
   padding: 2%;
-  margin-right: 2%;
+  margin-right: 3%;
 
   display: flex;
   font-size: 1.6rem;

src/hooks/matching/useMatching.ts

@@ -1,7 +1,11 @@
 import { useGetProfileInfo } from "@/queries/profile/query";
 import { useProfessorQuery } from "src/queries/professor/professor.query";
+import { usePostMatching } from "@/queries/matching/matching.query";
+import { useRouter } from "next/navigation";
+import dearToast from "@/libs/Swal/Swal";
 
 const useMatching = () => {
+  const router = useRouter();
   const getProfessorList = (page: number) => {
     const [{ data: professorList }] = useProfessorQuery(page);
 
@@ -15,7 +19,20 @@ const useMatching = () => {
     return professorDetailData;
   };
 
-  return { getProfessorList, getProfessorDetail };
+  const postMatchingMuation = usePostMatching();
+
+  const postMatching = (subjectId: number) => {
+    postMatchingMuation.mutate(subjectId, {
+      onSuccess: () => {
+        router.push("/chat");
+      },
+      onError: () => {
+        dearToast.errorToast("알수없는 문제가 발생하였습니다.");
+      },
+    });
+  };
+
+  return { getProfessorList, getProfessorDetail, postMatching };
 };
 
 export default useMatching;

src/queries/QueryKey.ts

@@ -1,5 +1,3 @@
-import { profile } from "console";
-
 export const QUERY_KEYS = Object.freeze({
   matching: {
     matching: "/matching",

src/queries/matching/matching.query.ts

@@ -0,0 +1,8 @@
+import { useMutation, useQueries } from "react-query";
+import { QUERY_KEYS } from "../QueryKey";
+import matchingRepositoryImpl from "../../repositories/matching/matchingRepositoryImpl";
+
+export const usePostMatching = () => {
+  const mutation = useMutation((subjectId: number) => matchingRepositoryImpl.postMatching(subjectId));
+  return mutation;
+};

src/repositories/matching/matchingRepository.ts

@@ -0,0 +1,3 @@
+export interface matcingRepository {
+  postMatching(subjectId: number): Promise<void>;
+}

src/repositories/matching/matchingRepositoryImpl.ts

@@ -0,0 +1,10 @@
+import { matcingRepository } from "./matchingRepository";
+import { dearV1Axios } from "@/libs/axios/customAxios";
+
+class MatchingRepositoryImpl implements matcingRepository {
+  public async postMatching(subjectId: number): Promise<void> {
+    await dearV1Axios.post("/matching", subjectId);
+  }
+}
+
+export default new MatchingRepositoryImpl();