feat : 사인 s3에서 가져오기

src/components/common/bottomSheets/sheetContents/Signature.tsx

@@ -28,6 +28,8 @@ function Signature({ setDisabledNext, setSign }: SignatureProps) {
           canvasProps={{ className: 'sigCanvas' }}
           ref={canvasRef}
           onEnd={onEndSign}
+          minWidth={1.5}
+          maxWidth={3.5}
         />
       </CanvasContainer>
       <p>이곳에 사인을 하면 계약이 진행돼요</p>

src/components/common/modals/QuinaryModal.tsx

@@ -13,6 +13,7 @@ import CheckButton from '../buttons/CheckButton';
 import { getContractEndDate } from '@lib/utils/common/getContractEndDate';
 import renderItemIllust from '@lib/utils/common/renderItemIllust';
 import getWeekNumberByMonth from '@lib/utils/common/getWeekNumberByMonth';
+import { AWS_S3_URL } from '@lib/constants';
 
 interface QuinaryModalProps {
   /**
@@ -28,6 +29,7 @@ interface QuinaryModalProps {
   totalPrice: number;
   weekPrice: number;
   weeks: number;
+  fileName: string;
 }
 
 // 모달 내부에 표시될 UI 작성
@@ -41,6 +43,7 @@ function QuinaryModal({
   totalPrice = 150000,
   weekPrice = 10000,
   weeks = 15,
+  fileName,
 }: QuinaryModalProps) {
   const reactModalParams = {
     isOpen: true,
@@ -158,7 +161,9 @@ function QuinaryModal({
             </div>
           </div>
 
-          <SignatureWrapper>Signature</SignatureWrapper>
+          <SignatureWrapper>
+            <img src={`${AWS_S3_URL}${fileName}`} />
+          </SignatureWrapper>
         </Bottom>
         <PerforatedLineBottom fill={theme.palette.greyScale.white} />
         <CheckButtonWrapper>
@@ -447,8 +452,11 @@ const SignatureWrapper = styled.div`
 
   width: ${calcRatio(146, 324)};
   height: 173px; // TODO: delete height (temporary)
-  background: rgba(36, 39, 41, 0.1);
-
+  & > img {
+    max-width: 100%;
+    margin-top: 50px;
+    height: 120px;
+  }
   display: flex;
   justify-content: center;
   align-items: center;

src/components/common/modals/SenaryModal.tsx

@@ -13,6 +13,7 @@ import Button from '../buttons/Button';
 import renderItemIllust from '@lib/utils/common/renderItemIllust';
 import { getContractEndDate } from '@lib/utils/common/getContractEndDate';
 import getWeekNumberByMonth from '@lib/utils/common/getWeekNumberByMonth';
+import { AWS_S3_URL } from '@lib/constants';
 
 interface SenaryModalProps {
   /**
@@ -29,6 +30,7 @@ interface SenaryModalProps {
   weekPrice: number;
   weeks: number;
   comment: string;
+  fileName: string;
 }
 
 // 모달 내부에 표시될 UI 작성
@@ -43,6 +45,7 @@ function SenaryModal({
   weekPrice = 10000,
   weeks = 15,
   comment = '큰 이자를 줄만한 목표가 아닌것 같다~',
+  fileName,
 }: SenaryModalProps) {
   const reactModalParams = {
     isOpen: true,
@@ -163,7 +166,9 @@ function SenaryModal({
             </div>
           </div>
 
-          <SignatureWrapper>Signature</SignatureWrapper>
+          <SignatureWrapper>
+            <img src={`${AWS_S3_URL}${fileName}`} />
+          </SignatureWrapper>
         </Bottom>
         <Comment>
           <div className="header">부모님의 한줄평</div>
@@ -479,8 +484,11 @@ const SignatureWrapper = styled.div`
 
   width: ${calcRatio(146, 324)};
   height: 173px; // TODO: delete height (temporary)
-  background: rgba(36, 39, 41, 0.1);
-
+  & > img {
+    max-width: 100%;
+    margin-top: 50px;
+    height: 120px;
+  }
   display: flex;
   justify-content: center;
   align-items: center;

src/components/common/modals/quaternaryModal/QuaternaryModal.tsx

@@ -13,6 +13,7 @@ import renderItemIllust from '@lib/utils/common/renderItemIllust';
 import { getContractEndDate } from '@lib/utils/common/getContractEndDate';
 import Button from '@components/common/buttons/Button';
 import getWeekNumberByMonth from '@lib/utils/common/getWeekNumberByMonth';
+import { AWS_S3_URL } from '@lib/constants';
 
 interface QuaternaryModalProps {
   /**
@@ -37,20 +38,25 @@ interface QuaternaryModalProps {
   totalPrice: number;
   weekPrice: number;
   weeks: number;
+  fileName: string;
+  /** (데모데이) 계약하자마자 뜨는 모달에서는 리스폰스에서 받아오는게 아닌 datauri를 바로 렌더링합니다 */
+  isSubmit?: boolean;
 }
 
 // 모달 내부에 표시될 UI 작성
 function QuaternaryModal({
   onSubmit,
-  createdAt = '2022/07/05 05:05:05',
-  interestRate = 30,
-  isMom = true,
-  itemName = '전자제품',
-  title = '에어팟 사기',
-  totalPrice = 150000,
-  weekPrice = 10000,
-  weeks = 15,
-  isKid = true,
+  createdAt,
+  interestRate,
+  isMom,
+  itemName,
+  title,
+  totalPrice,
+  weekPrice,
+  weeks,
+  isKid,
+  fileName,
+  isSubmit = false,
   onExtraSubmit,
 }: QuaternaryModalProps) {
   const reactModalParams = {
@@ -173,7 +179,9 @@ function QuaternaryModal({
             </div>
           </div>
 
-          <SignatureWrapper>Signature</SignatureWrapper>
+          <SignatureWrapper>
+            <img src={isSubmit ? fileName : `${AWS_S3_URL}${fileName}`} />
+          </SignatureWrapper>
         </Bottom>
         <PerforatedLineBottom fill={theme.palette.greyScale.white} />
         <ButtonWrapper>
@@ -481,8 +489,11 @@ const SignatureWrapper = styled.div`
 
   width: ${calcRatio(146, 324)};
   height: 173px; // TODO: delete height (temporary)
-  background: rgba(36, 39, 41, 0.1);
-
+  & > img {
+    max-width: 100%;
+    margin-top: 50px;
+    height: 120px;
+  }
   display: flex;
   justify-content: center;
   align-items: center;

src/components/home/create/steps/Step1.tsx

@@ -3,7 +3,7 @@ import { useParams, useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
 import { kidMock } from '@lib/mocks/kid';
 import { useAppDispatch } from '@store/app/hooks';
-import { dispatchParent } from '@store/slices/createChallenge';
+import { dispatchParent } from '@store/slices/createChallengeSlice';
 import RoleButton from '@components/common/buttons/RoleButton';
 
 function Step1({ currentStep }: { currentStep: number }) {

src/components/home/create/steps/Step2.tsx

@@ -1,7 +1,7 @@
 import { useLocation, useNavigate } from 'react-router-dom';
 import { useAppDispatch } from '@store/app/hooks';
 import styled from 'styled-components';
-import { dispatchItemName } from '@store/slices/createChallenge';
+import { dispatchItemName } from '@store/slices/createChallengeSlice';
 import SelectItemNameButton from '../SelectItemNameButton';
 import { TItemName } from '@lib/types/kid';
 

src/components/home/create/steps/Step3.tsx

@@ -11,7 +11,7 @@ import {
   dispatchTitle,
   dispatchTotalPrice,
   selectStep3InitData,
-} from '@store/slices/createChallenge';
+} from '@store/slices/createChallengeSlice';
 import SheetButton from '@components/common/buttons/SheetButton';
 import getCommaThreeDigits from '@lib/utils/kid/getCommaThreeDigits';
 import InputForm from '@components/common/InputForm';

src/components/home/create/steps/Step4.tsx

@@ -12,7 +12,7 @@ import {
   dispatchWeeks,
   selectStep4InitData,
   selectTotalPrice,
-} from '@store/slices/createChallenge';
+} from '@store/slices/createChallengeSlice';
 import { ReactComponent as Divider } from '@assets/borders/create-challenge-dashed-divider.svg';
 import { ReactComponent as Alert } from '@assets/icons/alert.svg';
 import RangeInput from '@components/common/bottomSheets/sheetContents/RangeInput';

src/components/home/create/steps/Step5.tsx

@@ -8,15 +8,19 @@ import { useAppDispatch, useAppSelector } from '@store/app/hooks';
 import {
   dispatchResetChallengePayload,
   postChallenge,
+  selectCreateChallenge,
   selectPostChallengeResponse,
-} from '@store/slices/createChallenge';
+} from '@store/slices/createChallengeSlice';
+import moment from 'moment';
 import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 function Step5({ currentStep }: { currentStep: number }) {
   const navigate = useNavigate();
   const dispatch = useAppDispatch();
-  const { responseData, status } = useAppSelector(selectPostChallengeResponse);
+  //const { responseData, status } = useAppSelector(selectPostChallengeResponse);
+  const { interestRate, isMom, itemName, title, totalPrice, weekPrice, weeks } =
+    useAppSelector(selectCreateChallenge);
   const [disabledNext, setDisabledNext] = useState<boolean>(true);
   const [sign, setSign] = useState();
   const axiosPrivate = useAxiosPrivate();
@@ -34,6 +38,17 @@ function Step5({ currentStep }: { currentStep: number }) {
         closeModal(modals.quaternaryModal);
         navigate('/', { replace: true });
       },
+      createdAt: moment().format('YYYY/MM/DD hh:mm:ss'),
+      interestRate,
+      isMom,
+      itemName,
+      title,
+      totalPrice,
+      weekPrice,
+      weeks,
+      isKid: true,
+      filename: sign,
+      isSubmit: true,
     });
   };
 

src/components/home/pending/PendingDongilItem.tsx

@@ -31,6 +31,7 @@ function PendingDongilItem({
     weekPrice,
     weeks,
     comment,
+    fileName,
   } = pendingDongil;
 
   // 제안중
@@ -44,6 +45,7 @@ function PendingDongilItem({
       totalPrice: totalPrice,
       weekPrice: weekPrice,
       weeks: weeks,
+      fileName,
     });
   }
 
@@ -63,6 +65,7 @@ function PendingDongilItem({
       weekPrice: weekPrice,
       weeks: weeks,
       comment: comment?.content,
+      fileName,
     });
   }
 

src/components/home/proposed/ProposedDongilItem.tsx

@@ -28,6 +28,7 @@ function ProposedDongilItem({
     totalPrice,
     weekPrice,
     weeks,
+    fileName,
   } = proposedDongil;
 
   const navigate = useNavigate();
@@ -49,6 +50,7 @@ function ProposedDongilItem({
       totalPrice: totalPrice,
       weekPrice: weekPrice,
       weeks: weeks,
+      fileName,
     });
   }
 

src/lib/constants/index.tsx

@@ -6,3 +6,5 @@ export const DOMAIN = 'http://localhost:3000';
 export const REST_API_KEY = `${process.env.REACT_APP_KAKAO_REST_API_KEY}`;
 export const REDIRECT_URI = `${DOMAIN}/auth/kakao/callback`;
 export const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code`;
+
+export const AWS_S3_URL = `${process.env.REACT_APP_AWS_S3_URL}`;

src/store/app/store.ts

@@ -1,7 +1,7 @@
 import { configureStore, ThunkAction, Action } from '@reduxjs/toolkit';
 import logger from 'redux-logger';
 import authReducer from '../slices/authSlice';
-import createChallengeReducer from '../slices/createChallenge';
+import createChallengeReducer from '../slices/createChallengeSlice';
 import kidSummaryReducer from '../slices/kidSummarySlice';
 import walkingDongilsReducer from '../slices/walkingDongilsSlice';
 import pendingDongilsReducer from '../slices/pendingDongilsSlice';

src/store/slices/createChallenge.tsx → src/store/slices/createChallengeSlice.tsx

@@ -127,8 +127,8 @@ export const {
   dispatchResetChallengePayload,
 } = createChallengeSlice.actions;
 
-export const selectChallengePayload = (state: RootState) =>
-  state.createChallenge;
+export const selectCreateChallenge = (state: RootState) =>
+  state.createChallenge.challenge;
 export const selectStep3InitData = (state: RootState) => {
   return {
     contractName: state.createChallenge.challenge.title,