Feature/주는 사람 Intro API 연결

src/App.tsx

@@ -23,7 +23,7 @@ function App() {
         <Route path="/" element={<Intro />} />
         <Route path="/target/:targetId" element={<Intro />} />
         <Route path="/gift/:targetId" element={<Gift />} />
-        <Route path="/card" element={<Card />} />
+        <Route path="/card/:targetId" element={<Card />} />
         <Route path="/result/:targetId" element={<ProviderResult />} />
         <Route path="/confirm/:targetId" element={<Confirm />} />
         <Route path="/target/:targetId/gift" element={<GiftForConsumer />} />

src/api/consumer.ts

@@ -1,13 +1,15 @@
 import axios from "axios";
 import { GetCardInfo, GetTargetInfo } from "types/remote";
 
+// 타겟 조회
 export const getCardInfo = async (targetId: number): Promise<GetCardInfo> => {
   const response = await axios.get(
     `${process.env.REACT_APP_BASE_URL}/target/${targetId}`,
   );
   return response.data;
 };
 
+// 타겟 최종 결정된 선물 조회
 export const getTargetInfo = async (
   targetId: number,
 ): Promise<GetTargetInfo> => {

src/api/provider.ts

@@ -1,4 +1,5 @@
 import axios from "axios";
+import { PostTarget } from "types/remote";
 
 // 선물 조회
 export const getGiftList = async (targetId: number) => {
@@ -33,3 +34,18 @@ export const putGiftItem = async (formData: FormData) => {
     },
   );
 };
+
+// 타겟 생성
+export const postTarget = async ({
+  consumerName,
+  providerName,
+}: PostTarget) => {
+  const response = await axios.post(
+    `${process.env.REACT_APP_BASE_URL}/target`,
+    {
+      consumerName,
+      providerName,
+    },
+  );
+  return response.data;
+};

src/components/consumer/ConsumerIntro.tsx

@@ -42,7 +42,7 @@ function ConsumerIntro() {
           />
         </ImageWrapper>
         <TextWrapper>
-          <Text contents={data?.cardMeesage ?? "취업 축하해 타몽~!"} />
+          <Text contents={data?.cardMessage ?? "취업 축하해 타몽~!"} />
         </TextWrapper>
       </CardWrapper>
       <TextWrapper>

src/components/provider/ProviderCard.tsx

@@ -1,15 +1,16 @@
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 import { useRecoilValue } from "recoil";
 import styled from "styled-components";
 import Icon from "components/common/Icon";
 import { imgUrlSelector } from "stores/cardAtom";
 
 function ProviderCard() {
   const navigate = useNavigate();
+  const { targetId } = useParams();
   const imgUrl = useRecoilValue(imgUrlSelector);
 
   const handleNextToPage = () => {
-    navigate("/card");
+    navigate(`/card/${targetId}`);
   };
   return (
     <CardWrapper>

src/components/provider/ProviderIntro.tsx

@@ -2,6 +2,7 @@ import Button from "components/common/Button";
 import Icon from "components/common/Icon";
 import Input from "components/common/Input";
 import Text from "components/common/Text";
+import usePostTarget from "hooks/queries/usePostTarget";
 import useInputFormValidation from "hooks/useInputValidation";
 import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
@@ -12,6 +13,7 @@ function ProviderIntro() {
   const navigate = useNavigate();
   const [form, errors, handleFormChange] = useInputFormValidation();
   const [showContent, setShowContent] = useState(false);
+  const { mutate } = usePostTarget();
 
   useEffect(() => {
     const timer = setTimeout(() => {
@@ -22,14 +24,20 @@ function ProviderIntro() {
   }, []);
 
   const handleClick = () => {
-    if (!form.providerName || !form.consumerName) {
+    const { providerName, consumerName } = form;
+    if (!providerName || !consumerName) {
       handleFormChange({
         ...form,
         type: "all",
       });
       return;
     }
-    navigate("/gift");
+    mutate(
+      { consumerName, providerName },
+      {
+        onSuccess: data => navigate(`/gift/${data}`),
+      },
+    );
   };
 
   return (

src/hooks/queries/usePostTarget.tsx

@@ -0,0 +1,8 @@
+import { postTarget } from "api/provider";
+import { useMutation } from "react-query";
+
+export const usePostTarget = () => {
+  return useMutation(postTarget);
+};
+
+export default usePostTarget;

src/pages/Card.tsx

@@ -1,5 +1,5 @@
 import { useState, ChangeEvent } from "react";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 import COLOR from "style/color";
 import styled from "styled-components";
 import Button from "components/common/Button";
@@ -12,6 +12,7 @@ import CardBasic from "components/provider/CardBasic";
 
 function Card() {
   const navigate = useNavigate();
+  const { targetId } = useParams();
   const [toggleType, setToggleType] = useState<"basic" | "custom">("basic");
   const [cardTxt, setCardTxt] = useState("");
   const [imageURL, setImageURL] = useState<string | null>("");
@@ -45,11 +46,11 @@ function Card() {
   };
 
   const handleCancel = () => {
-    navigate("/gift");
+    navigate(`/gift/${targetId}`);
   };
 
   const handleSuccess = () => {
-    navigate("/gift");
+    navigate(`/gift/${targetId}`);
   };
 
   return (

src/types/remote.ts

@@ -1,7 +1,7 @@
 export type GetCardInfo = {
   providerName: string;
   cardImageUrl: string;
-  cardMeesage: string;
+  cardMessage: string;
 };
 
 export type GetTargetInfo = {
@@ -11,3 +11,8 @@ export type GetTargetInfo = {
     giftImageUrl: string;
   };
 };
+
+export type PostTarget = {
+  providerName: string;
+  consumerName: string;
+};