temp

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/pages/CreateDesign/components/Footer/index.tsx

@@ -5,6 +5,7 @@ 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 => {

src/pages/CreateProduct/Confirm/index.tsx

@@ -1,9 +1,9 @@
 import { Box, Grid, Typography } from '@material-ui/core';
 import React from 'react';
-import { useRecoilValue } from 'recoil';
+import { useRecoilState, useRecoilValue } from 'recoil';
 import { splitText } from 'utils/splitText';
 
-import { currentProductInputAtom } from '../recoils';
+import { currentProductIdAtom, currentProductInputAtom } from '../recoils';
 
 import {
   ProductCard,
@@ -14,8 +14,16 @@ import {
 } from './Confirm.css';
 
 const Confirm = (): React.ReactElement => {
-  const { name, fullPrice, discountPrice, representativeImageUrl, tags } =
-    useRecoilValue(currentProductInputAtom);
+  const {
+    name,
+    fullPrice,
+    discountPrice,
+    representativeImageUrl,
+    tags,
+  } = useRecoilValue(currentProductInputAtom);
+  const [currentProductId, setCurrentProductId] = useRecoilState(
+    currentProductIdAtom,
+  );
 
   const getRate = (): string => {
     const rate = Math.round((discountPrice / fullPrice) * 100);
@@ -31,8 +39,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,67 @@
+import { FAILED_TO_SAVE_PRODUCT } from 'constants/errors';
+
+import { usePost } from 'hooks/usePost';
+import {
+  currentProductIdAtom,
+  currentProductInputAtom,
+  currentStepAtom,
+} from 'pages/CreateProduct/recoils';
+import { PAGE } from 'pages/CreateProduct/types';
+import { useState } from 'react';
+import { useRecoilState, useRecoilValue } from 'recoil';
+import { splitText } from 'utils/splitText';
+
+type SaveProduct = {
+  saveProduct: () => void;
+};
+
+export const useSaveProduct = (): SaveProduct => {
+  const [currentStep, setCurrentStep] = useRecoilState(currentStepAtom);
+  const [currentProductId, setCurrentProductId] = useRecoilState(
+    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);
+  };
+
+  return { saveProduct };
+};

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

@@ -0,0 +1,29 @@
+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 { useRecoilState } from 'recoil';
+
+type StartSale = {
+  startSale: () => void;
+};
+
+export const useStartSale = (): StartSale => {
+  const [currentProductId, setCurrentProductId] = useRecoilState(
+    currentProductIdAtom,
+  );
+  const history = useHistory();
+
+  const { mutate } = usePost({
+    pathname: '/product',
+  });
+
+  const startSale = () => {
+    console.log('id', currentProductId);
+    mutate({ id: currentProductId });
+    history.push(MY_INFORMATION_ROUTER_ROOT);
+  };
+
+  return { startSale };
+};

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

@@ -1,96 +1,31 @@
 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 { 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 { saveProduct } = useSaveProduct();
+  const { startSale } = useStartSale();
 
-  const { mutate } = usePost({
-    pathname: '/product/package',
-    errorMessage: FAILED_TO_SAVE_PRODUCT,
-    onSuccess: () => setCurrentStep(INTRODUCTION),
-    onError: () => setShowError(true),
-  });
+  const showError = useState(false);
 
   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 handleOnClickPrevious = async (): Promise<void> => {
     switch (currentStep) {
       case PACKAGE:
@@ -134,6 +69,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,

src/pages/MyInformation/hooks/useGetMySalesSummary.ts

@@ -1,19 +1,17 @@
 import useSWR, { SWRResponse } from 'swr';
-import { getAccessToken } from 'utils/auth';
-import { SingleResponse } from 'utils/requestType';
+import { ObjectResponse } from 'utils/requestType';
 import { request } from 'utils/requests';
 
 import { SalesSummaryResponse } from './types';
 
-type MySalesSummaryQueryResult = SingleResponse<SalesSummaryResponse>;
+type MySalesSummaryQueryResult = ObjectResponse<SalesSummaryResponse>;
 
 const getMySalesSummary = async (
   pathname: string,
 ): Promise<MySalesSummaryQueryResult> => {
   const { data } = await request({
     pathname,
     method: 'get',
-    accessToken: getAccessToken(),
   });
 
   return data;

src/utils/requestType.ts

@@ -5,4 +5,4 @@ export type Meta = {
 };
 
 export type ListResponse<T> = { payload: T[]; meta: Meta };
-export type SingleResponse<T> = { payload: T; meta: Meta };
+export type ObjectResponse<T> = { payload: T; meta: Meta };