Feat: 상품 썸네일 및 판매시작 api 연동

src/pages/CreateProduct/Confirm/Confirm.css.ts

@@ -0,0 +1,35 @@
+import { Typography } from '@material-ui/core';
+import { Link } from 'react-router-dom';
+import styled from 'styled-components';
+import { theme } from 'themes';
+
+export const ProductCard = styled(Link)`
+  color: ${theme.palette.common.black};
+  text-decoration: none;
+  width: ${theme.spacing(55)};
+  border: 5px solid ${theme.palette.grey[200]};
+  border-radius: ${theme.spacing(6)};
+`;
+
+export const RepresentativeImage = styled.img`
+  width: ${theme.spacing(55)};
+  height: ${theme.spacing(46)};
+  border-radius: ${theme.spacing(6)};
+`;
+
+export const Tag = styled.div`
+  display: inline-block;
+  background: ${theme.palette.grey[300]};
+  padding: ${theme.spacing(1)};
+  margin: ${theme.spacing(0.4)};
+  border-radius: ${theme.spacing(2)};
+  font-size: ${theme.spacing(1.5)};
+`;
+
+export const Price = styled(Typography)`
+  margin-left: ${theme.spacing(1)};
+`;
+
+export const InfoMessage = styled.li`
+  margin-top: ${theme.spacing(1)};
+`;

src/pages/CreateProduct/Confirm/index.tsx

@@ -0,0 +1,83 @@
+import { Box, Grid, Typography } from '@material-ui/core';
+import React from 'react';
+import { useRecoilValue } from 'recoil';
+
+import { currentProductInputAtom } from '../recoils';
+
+import {
+  ProductCard,
+  RepresentativeImage,
+  InfoMessage,
+  Price,
+  Tag,
+} from './Confirm.css';
+
+const Confirm = (): React.ReactElement => {
+  const { name, fullPrice, discountPrice, representativeImageUrl, tags } =
+    useRecoilValue(currentProductInputAtom);
+
+  const splitTags = (): string[] => {
+    return tags
+      .split('#')
+      .map((tag) => tag.trim())
+      .filter((value) => value);
+  };
+
+  const getRate = (): string => {
+    const rate = Math.round((discountPrice / fullPrice) * 100);
+
+    return isNaN(rate) ? '' : rate.toString();
+  };
+
+  const getPrice = (): string => {
+    const price = fullPrice - discountPrice;
+
+    return isNaN(price) && Math.sign(price) ? '' : price.toLocaleString();
+  };
+
+  return (
+    <>
+      <Grid container justifyContent="center">
+        <ProductCard to="/product/1">
+          {representativeImageUrl && (
+            <RepresentativeImage
+              src="//via.placeholder.com/500x300"
+              alt="상품 대표 이미지"
+            />
+          )}
+          <Box px={4} py={2}>
+            <Typography variant="h4">{name}</Typography>
+            <Box display="flex" justifyContent="space-between" mt={4}>
+              <div>
+                {splitTags().map((tag: string) => (
+                  <Tag>#{tag}</Tag>
+                ))}
+              </div>
+              <Box display="flex">
+                <Typography color="primary">
+                  <b>{getRate()}%</b>
+                </Typography>
+                <Price variant="h4">{getPrice()}원</Price>
+              </Box>
+            </Box>
+          </Box>
+        </ProductCard>
+      </Grid>
+      <ul>
+        <InfoMessage>
+          상품은 위와 같이 다른 니터들에게 노출될 예정이에요!
+        </InfoMessage>
+        <InfoMessage>클릭하면 상세도 확인해볼 수 있어요!</InfoMessage>
+        <InfoMessage>
+          노출되는 기간은 "
+          <Typography display="inline" color="primary">
+            상품이 등록된 이후부터 계속해서
+          </Typography>
+          " 노출됩니다.
+        </InfoMessage>
+      </ul>
+    </>
+  );
+};
+
+export default Confirm;

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

@@ -1,4 +1,5 @@
 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';
@@ -12,6 +13,7 @@ import { PAGE } from 'pages/CreateProduct/types';
 import React, { useState } from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { FooterContainer } from 'styles/constants';
+import { request } from 'utils/requests';
 
 const Footer = (): React.ReactElement => {
   const { DESIGN, PACKAGE, INTRODUCTION, CONFIRM } = PAGE;
@@ -61,7 +63,7 @@ const Footer = (): React.ReactElement => {
     mutate(postProductData);
   };
 
-  const handleOnClickPrevious = (): void => {
+  const handleOnClickPrevious = async (): Promise<void> => {
     switch (currentStep) {
       case PACKAGE:
         setCurrentStep(DESIGN);

src/pages/CreateProduct/index.tsx

@@ -3,12 +3,19 @@ import Package from 'pages/CreateProduct/Package';
 import SelectDesigns from 'pages/CreateProduct/SelectDesigns';
 import React from 'react';
 import { useRecoilValue } from 'recoil';
+import styled from 'styled-components';
+import { theme } from 'themes';
 
+import Confirm from './Confirm';
 import Footer from './components/Footer';
 import Header from './components/Header';
 import { currentStepAtom } from './recoils';
 import { PAGE } from './types';
 
+const Container = styled.section`
+  margin-top: ${theme.spacing(1)};
+`;
+
 const CreateProduct = (): React.ReactElement => {
   const currentStep = useRecoilValue(currentStepAtom);
 
@@ -21,7 +28,7 @@ const CreateProduct = (): React.ReactElement => {
       case PAGE.INTRODUCTION:
         return <div />;
       case PAGE.CONFIRM:
-        return <div />;
+        return <Confirm />;
       default:
         return <div />;
     }
@@ -30,7 +37,7 @@ const CreateProduct = (): React.ReactElement => {
   return (
     <Layout>
       <Header />
-      {renderContent()}
+      <Container>{renderContent()}</Container>
       <Footer />
     </Layout>
   );

src/themes/palette.ts

@@ -5,6 +5,9 @@ import { deepOrange } from './colors/deepOrange';
 
 export const { palette } = createMuiTheme({
   palette: {
+    common: {
+      black: '#000',
+    },
     primary: {
       light: deepOrange[200],
       main: deepOrange[600],