Merge pull request #615 from TEAM-TATTOUR/S1/#614/refacCustomApplyApi

[S1/Custom] CustomApply Post haveDesign 값 전달 방식 수정 / haveDesign 플래그 값 변동

src/Router.tsx

@@ -1,29 +1,29 @@
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import DetailPage from './page/DetailPage';
 import ListPage from './page/ListPage';
-import MainPage from './page/MainPage';
 import LoginPage from './page/Login/LoginPage';
-import DetailPage from './page/DetailPage';
+import MainPage from './page/MainPage';
 import MyTattoo from './page/MyTattoo';
 import MyTattooDetail from './page/MyTattooDetail';
 import CompletePage from './page/Order/CompletePage';
 import OrderPage from './page/Order/OrderPage';
 
 import OnBoardingPage from './page/Custom/Common/OnBoardingPage';
 
-import SearchPage from './page/Search/SearchPage';
-import SearchResultPage from './page/Search/SearchResultPage';
-import ScrollToTop from './libs/hooks/ScrollTop';
 import LoginCallback from './components/Login/LoginCallback';
-import SavePage from './page/SavePage';
-import NoDesignCustomPage from './page/Custom/NoDesign/NoDesignCustomPage';
-import HaveDesignCustomPage from './page/Custom/HaveDesign/HaveDesignCustomPage';
+import Interceptors from './libs/hooks/Interceptors';
+import ScrollToTop from './libs/hooks/ScrollTop';
+import CartPage from './page/CartPage';
 import CommonCustomPage from './page/Custom/Common/CommonCustomPage';
+import HaveDesignCustomPage from './page/Custom/HaveDesign/HaveDesignCustomPage';
+import NoDesignCustomPage from './page/Custom/NoDesign/NoDesignCustomPage';
 import ErrorPage from './page/Error/ErrorPage';
-import MagazinePage from './page/MagazinePage';
-import CartPage from './page/CartPage';
 import ExpirationPage from './page/Expiration/ExpirationPage';
+import MagazinePage from './page/MagazinePage';
 import OrderDepositPage from './page/Order/OrderDepositPage';
-import Interceptors from './libs/hooks/Interceptors';
+import SavePage from './page/SavePage';
+import SearchPage from './page/Search/SearchPage';
+import SearchResultPage from './page/Search/SearchResultPage';
 
 const Router = () => {
   return (

src/components/Custom/Common/Select/SelectCustom.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { styled } from 'styled-components';
 import SelectCustomBtn from './SelectCustomBtn';
 
@@ -10,14 +10,14 @@ interface SelectCustomProps {
 const SelectCustom = ({ setIsActiveNext, setHaveDesign }: SelectCustomProps) => {
   const CASE_BTN_DATA = [
     {
-      id: 'noDesign',
+      id: 'haveDesign',
       firstTitle: '내 도안',
       secondTitle: '그대로 만들기',
       firstDetail: '이미지 파일',
       secondDetail: '그대로 제작해드려요',
     },
     {
-      id: 'haveDesign',
+      id: 'noDesign',
       firstTitle: '타투어에게',
       secondTitle: '도안 의뢰하기',
       firstDetail: '참고 이미지, 간단 스케치를',

src/components/Custom/Common/Select/SelectCustomFooter.tsx

@@ -1,5 +1,6 @@
+import { useNavigate } from 'react-router-dom';
 import { styled } from 'styled-components';
-import usePostCustomApply from '../../../../libs/hooks/usePostCustomApply';
+import { api } from '../../../../libs/api';
 
 interface SelectCustomFooterProps {
   isActiveNext: boolean;
@@ -14,15 +15,26 @@ const SelectCustomFooter = ({
   setStep,
   setCustomId,
 }: SelectCustomFooterProps) => {
-  const { response } = usePostCustomApply(haveDesign);
+  const navigate = useNavigate();
+
+  // 선택된 커스텀 타투 플로우 케이스 값(haveDesign)이 있을 때, 통신을 해주기 위한 함수
+  const fetchCustomApply = async () => {
+    try {
+      const { data } = await api.post('/custom/apply', {
+        haveDesign: haveDesign,
+      });
+      setCustomId(data.data.customId);
+    } catch (err) {
+      navigate('/error');
+    }
+  };
 
   const handleClickFooter = () => {
     if (!isActiveNext) return;
 
-    if (response) {
-      setCustomId(response.customId);
-      setStep((prev) => prev + 1);
-    }
+    // 선택 된 값 있음 === isActiveNext일 때 custom/apply post 통신
+    fetchCustomApply();
+    setStep((prev) => prev + 1);
   };
 
   return (

src/page/Custom/Common/CommonCustomPage.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
+import { useLocation } from 'react-router-dom';
 import SelectCustomLayout from '../../../components/Custom/Common/Select/SelectCustomLayout';
 import CustomSizeLayout from '../../../components/Custom/Common/Size/CustomSizeLayout';
-import { useLocation } from 'react-router-dom';
 
 const CommonCustomPage = () => {
   const location = useLocation();
@@ -10,7 +10,7 @@ const CommonCustomPage = () => {
   const [step, setStep] = useState(state ? state.step : 0);
   // step 0 : SelectPage - noDesign인지, haveDesign인지 상황 판단 플래그 state
   const [haveDesign, setHaveDesign] = useState(
-    state && state.haveDesign !== undefined ? state.haveDesign : false,
+    state && state.haveDesign !== undefined ? state.haveDesign : true,
   );
   const [customId, setCustomId] = useState<number>(
     state && state.customId !== undefined ? state.customId : 0,