feat: 상품 등록 단계별 api 호출로직 훅으로 분리

src/hooks/usePost.ts

@@ -1,8 +1,10 @@
 import { GENERAL_ERROR, NETWORK_ERROR } from 'constants/errors';
 
 import { useCommonSnackbar } from 'components/CommonSnackbar/useCommonSnackbar';
+import { ProductId } from 'pages/CreateProduct/types';
 import { useState } from 'react';
 import { useMutation, UseMutationResult } from 'react-query';
+import { ObjectResponse } from 'utils/requestType';
 import { postRequest } from 'utils/requests';
 
 interface Post {
@@ -18,7 +20,7 @@ export const usePost = ({
   errorMessage = GENERAL_ERROR,
   onSuccess,
   onError,
-}: Post): UseMutationResult<void, unknown> => {
+}: Post): UseMutationResult<ObjectResponse<ProductId> | void, unknown> => {
   const [postErrorMessage, setPostErrorMessage] = useState<string>();
 
   useCommonSnackbar({

src/libs/draftjs-utils/inline.ts

@@ -225,10 +225,8 @@ export const changeOriginalStyleToNewStyle = ({
     );
   }
 
-  const editorStateWithNewStyleAndPreviousSelection = EditorState.forceSelection(
-    editorStateWithNewStyle,
-    originalSelection,
-  );
+  const editorStateWithNewStyleAndPreviousSelection =
+    EditorState.forceSelection(editorStateWithNewStyle, originalSelection);
 
   return editorStateWithNewStyleAndPreviousSelection;
 };

src/pages/CreateDesign/Detail/index.tsx

@@ -77,9 +77,8 @@ const Detail = (): React.ReactElement => {
     bottomWidth,
     armholeDepth,
   } = size;
-  const [localCoverImage, setLocalCoverImage] = useRecoilState(
-    localCoverImageAtom,
-  );
+  const [localCoverImage, setLocalCoverImage] =
+    useRecoilState(localCoverImageAtom);
 
   const { SWEATER } = DESIGN;
   const { TEXT, IMAGE, VIDEO } = PATTERN;

src/pages/CreateDesign/Pattern/index.tsx

@@ -133,8 +133,9 @@ const Pattern = (): React.ReactElement => {
     toolbarPlugin,
   ];
 
-  const currentPatternLength = editorState.getCurrentContent().getPlainText('')
-    .length;
+  const currentPatternLength = editorState
+    .getCurrentContent()
+    .getPlainText('').length;
 
   const handleBeforeInput = (
     _chars: string,

src/pages/CreateDesign/components/FontSize/types.ts

@@ -10,17 +10,5 @@ export type FontSizeProps = {
 };
 
 export const fontSizeOptions = [
-  8,
-  10,
-  12,
-  14,
-  16,
-  18,
-  24,
-  30,
-  36,
-  48,
-  60,
-  72,
-  96,
+  8, 10, 12, 14, 16, 18, 24, 30, 36, 48, 60, 72, 96,
 ];

src/pages/CreateDesign/components/Footer/hooks/useStepController.ts

@@ -18,16 +18,8 @@ type StepController = {
 
 export const useStepController = (): StepController => {
   const [currentStep, setCurrentStep] = useRecoilState(currentStepAtom);
-  const {
-    name,
-    stitches,
-    rows,
-    size,
-    needle,
-    yarn,
-    description,
-    techniques,
-  } = useRecoilValue(currentDesignInputAtom);
+  const { name, stitches, rows, size, needle, yarn, description, techniques } =
+    useRecoilValue(currentDesignInputAtom);
   const {
     totalLength,
     sleeveLength,

src/pages/CreateDesign/components/Footer/index.tsx

@@ -5,17 +5,14 @@ import { PAGE } from 'pages/CreateDesign/types';
 import React from 'react';
 import { useRecoilValue } from 'recoil';
 import { FooterContainer } from 'styles/constants';
+
 import { useStepController } from './hooks/useStepController';
 
 const Footer = (): React.ReactElement => {
   const currentStep = useRecoilValue(currentStepAtom);
 
-  const {
-    onPreviousClick,
-    onNextClick,
-    renderNextLabel,
-    isNextDisabled,
-  } = useStepController();
+  const { onPreviousClick, onNextClick, renderNextLabel, isNextDisabled } =
+    useStepController();
 
   return (
     <FooterContainer>

src/pages/CreateProduct/Confirm/index.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { useRecoilValue } from 'recoil';
 import { splitText } from 'utils/splitText';
 
-import { currentProductInputAtom } from '../recoils';
+import { currentProductIdAtom, currentProductInputAtom } from '../recoils';
 
 import {
   ProductCard,
@@ -16,6 +16,7 @@ import {
 const Confirm = (): React.ReactElement => {
   const { name, fullPrice, discountPrice, representativeImageUrl, tags } =
     useRecoilValue(currentProductInputAtom);
+  const currentProductId = useRecoilValue(currentProductIdAtom);
 
   const getRate = (): string => {
     const rate = Math.round((discountPrice / fullPrice) * 100);
@@ -31,8 +32,8 @@ const Confirm = (): React.ReactElement => {
 
   return (
     <>
-      <Grid container justifyContent="center">
-        <ProductCard to="/product/1">
+      <Grid container>
+        <ProductCard to={`/product/${currentProductId}`}>
           {representativeImageUrl && (
             <RepresentativeImage
               src="//via.placeholder.com/500x300"

src/pages/CreateProduct/components/Footer/hooks/useSaveProduct.ts

@@ -0,0 +1,72 @@
+import { FAILED_TO_SAVE_PRODUCT } from 'constants/errors';
+
+import { useCommonSnackbar } from 'components/CommonSnackbar/useCommonSnackbar';
+import { usePost } from 'hooks/usePost';
+import {
+  currentProductIdAtom,
+  currentProductInputAtom,
+  currentStepAtom,
+} from 'pages/CreateProduct/recoils';
+import { PAGE } from 'pages/CreateProduct/types';
+import { useState } from 'react';
+import { useRecoilValue, useSetRecoilState } from 'recoil';
+import { splitText } from 'utils/splitText';
+
+type SaveProduct = {
+  saveProduct: () => void;
+};
+
+export const useSaveProduct = (): SaveProduct => {
+  const setCurrentStep = useSetRecoilState(currentStepAtom);
+  const setCurrentProductId = useSetRecoilState(currentProductIdAtom);
+  const [showError, setShowError] = useState(false);
+
+  const {
+    name,
+    fullPrice,
+    discountPrice,
+    representativeImageUrl,
+    specifiedSalesStartDate,
+    specifiedSalesEndDate,
+    tags,
+    designIds,
+  } = useRecoilValue(currentProductInputAtom);
+
+  const onSuccess = () => {
+    if (data) {
+      setCurrentProductId(data.payload.id);
+    }
+    setCurrentStep(PAGE.INTRODUCTION);
+  };
+
+  const { data, mutate } = usePost({
+    pathname: '/product/package',
+    errorMessage: FAILED_TO_SAVE_PRODUCT,
+    onSuccess,
+    onError: () => setShowError(true),
+  });
+
+  const saveProduct = (): void => {
+    const postProductData = {
+      id: null,
+      name,
+      full_price: fullPrice,
+      discount_price: discountPrice,
+      representative_image_url: representativeImageUrl,
+      specified_sales_start_date: specifiedSalesStartDate,
+      specified_sales_end_date: specifiedSalesEndDate,
+      tags: splitText(tags, '#'),
+      design_ids: designIds,
+    };
+
+    mutate(postProductData);
+  };
+
+  useCommonSnackbar({
+    message: FAILED_TO_SAVE_PRODUCT,
+    severity: 'error',
+    dependencies: [showError],
+  });
+
+  return { saveProduct };
+};

src/pages/CreateProduct/components/Footer/hooks/useStartSale.ts

@@ -0,0 +1,26 @@
+import { MY_INFORMATION_ROUTER_ROOT } from 'constants/path';
+
+import { usePost } from 'hooks/usePost';
+import { currentProductIdAtom } from 'pages/CreateProduct/recoils';
+import { useHistory } from 'react-router-dom';
+import { useRecoilValue } from 'recoil';
+
+type StartSale = {
+  startSale: () => void;
+};
+
+export const useStartSale = (): StartSale => {
+  const currentProductId = useRecoilValue(currentProductIdAtom);
+  const history = useHistory();
+
+  const { mutate } = usePost({
+    pathname: '/product',
+  });
+
+  const startSale = () => {
+    mutate({ id: currentProductId });
+    history.push(MY_INFORMATION_ROUTER_ROOT);
+  };
+
+  return { startSale };
+};

src/pages/CreateProduct/components/Footer/index.tsx

@@ -1,95 +1,19 @@
-import { FAILED_TO_SAVE_PRODUCT } from 'constants/errors';
-import { MY_INFORMATION_ROUTER_ROOT } from 'constants/path';
-
 import { Button as MaterialButton } from '@material-ui/core';
-import { useCommonSnackbar } from 'components/CommonSnackbar/useCommonSnackbar';
 import { Button } from 'dumbs';
-import { usePost } from 'hooks/usePost';
-import {
-  currentProductInputAtom,
-  currentStepAtom,
-} from 'pages/CreateProduct/recoils';
+import { currentStepAtom } from 'pages/CreateProduct/recoils';
 import { PAGE } from 'pages/CreateProduct/types';
-import React, { useState } from 'react';
-import { useRecoilState, useRecoilValue } from 'recoil';
+import React from 'react';
+import { useRecoilState } from 'recoil';
 import { FooterContainer } from 'styles/constants';
-import { request } from 'utils/requests';
-import { splitText } from 'utils/splitText';
+
+import { useSaveProduct } from './hooks/useSaveProduct';
+import { useStartSale } from './hooks/useStartSale';
 
 const Footer = (): React.ReactElement => {
   const { DESIGN, PACKAGE, INTRODUCTION, CONFIRM } = PAGE;
   const [currentStep, setCurrentStep] = useRecoilState(currentStepAtom);
-  const {
-    name,
-    fullPrice,
-    discountPrice,
-    representativeImageUrl,
-    specifiedSalesStartDate,
-    specifiedSalesEndDate,
-    tags,
-    designIds,
-  } = useRecoilValue(currentProductInputAtom);
-
-  const [showError, setShowError] = useState(false);
-
-  const { mutate } = usePost({
-    pathname: '/product/package',
-    errorMessage: FAILED_TO_SAVE_PRODUCT,
-    onSuccess: () => setCurrentStep(INTRODUCTION),
-    onError: () => setShowError(true),
-  });
-
-  useCommonSnackbar({
-    message: FAILED_TO_SAVE_PRODUCT,
-    severity: 'error',
-    dependencies: [showError],
-  });
-
-  const saveProduct = (): void => {
-    const postProductData = {
-      id: null,
-      name,
-      full_price: fullPrice,
-      discount_price: discountPrice,
-      representative_image_url: representativeImageUrl,
-      specified_sales_start_date: specifiedSalesStartDate,
-      specified_sales_end_date: specifiedSalesEndDate,
-      tags: splitText(tags, '#'),
-      design_ids: designIds,
-    };
-
-    mutate(postProductData);
-    pathname: '/product',
-    onError: () => setOpenErrorSnackbar(true),
-  });
-
-  const handleSnackbarClose = () => {
-    setOpenErrorSnackbar(false);
-  };
-
-  const saveProduct = (): void => {
-    mutate({ id: 1 });
-    history.push(MY_INFORMATION_ROUTER_ROOT);
-  };
-
-  const requestSaveProduct = async (): Promise<void> => {
-    await request({
-      pathname: '/product/package',
-      method: 'post',
-      data: {
-        id: null,
-        name,
-        full_price: fullPrice,
-        discount_price: discountPrice,
-        representative_image_url: representativeImageUrl,
-        specified_sales_start_date: specifiedSalesStartDate,
-        specified_sales_end_date: specifiedSalesEndDate,
-        tags: splitText(tags, '#'),
-        design_ids: designIds,
-      },
-      useCurrentToken: true,
-    });
-  };
+  const { saveProduct } = useSaveProduct();
+  const { startSale } = useStartSale();
 
   const handleOnClickPrevious = async (): Promise<void> => {
     switch (currentStep) {
@@ -134,6 +58,7 @@ const Footer = (): React.ReactElement => {
         setCurrentStep(CONFIRM);
         break;
       case CONFIRM:
+        startSale();
         break;
       default:
         break;

src/pages/CreateProduct/recoils.ts

@@ -20,3 +20,8 @@ export const currentProductInputAtom = atom<ProductInput>({
     designIds: [],
   },
 });
+
+export const currentProductIdAtom = atom<number | undefined>({
+  key: 'currentProductId',
+  default: undefined,
+});

src/pages/CreateProduct/types.ts

@@ -7,6 +7,10 @@ export const PAGE = {
 
 export type PAGE_TYPE = typeof PAGE[keyof typeof PAGE];
 
+export type ProductId = {
+  id: number;
+};
+
 export type ProductInput = {
   name: string;
   fullPrice: number;

src/pages/MyInformation/components/MyProfile/index.tsx

@@ -74,7 +74,6 @@ const MyProfile = (): React.ReactElement => {
     dependencies: [error],
   });
 
-  const isLoading = data == null;
   const {
     number_of_products_on_sales: numberOfProductsOnSales,
     number_of_products_sold: numberOfProductsSold,