Merge pull request #165 from Make-A-Wish-Sopt/feature/163-errorfix

Feature/163 errorfix

api/user.ts

@@ -2,8 +2,9 @@ import { getAccessToken } from '@/utils/common/token';
 import { client } from './common/axios';
 import { API_VERSION_01, PATH_USER } from './path';
 import { UseFormReturn } from 'react-hook-form';
-import { WishesDataInputType } from '@/types/common/input/wishesInput';
+
 import { UserAccountDataResponseType } from '@/types/api/response';
+import { WishesDataInputType } from '@/types/wishesType';
 
 const ACCESS_TOKEN = getAccessToken();
 

api/wishes.ts

@@ -2,9 +2,10 @@ import { MainProgressDataResponseType, WishesProgressDataResponseType } from '@/
 import { client } from './common/axios';
 import { getAccessToken } from '@/utils/common/token';
 import { API_VERSION_01, PATH_WISHES } from './path';
-import { WishesDataInputType } from '@/types/common/input/wishesInput';
+
 import { UseFormReturn } from 'react-hook-form';
 import { SiteDataType } from '@/types/siteDataType';
+import { WishesDataInputType } from '@/types/wishesType';
 
 const ACCESS_TOKEN = getAccessToken();
 
@@ -51,6 +52,7 @@ export const postWishes = async (methods: UseFormReturn<WishesDataInputType, any
       title: methods.getValues('title'),
       hint: methods.getValues('hint'),
       initial: methods.getValues('initial'),
+      phone: methods.getValues('phone'),
       startDate: methods.getValues('startDate'),
       endDate: methods.getValues('endDate'),
     },

components/Cakes/CakesForm.tsx

@@ -0,0 +1,120 @@
+import TextareaBox from '../Common/Input/TextareaBox';
+import styled from 'styled-components';
+import { LIMIT_TEXT } from '@/constant/limitText';
+import SelectCakes from './SelectCakes';
+import Button from '../Common/Button';
+import Input from '../Common/Input/Input';
+import { UseFormReturn } from 'react-hook-form';
+import InputContainer from '../Common/Input/InputContainer';
+import { CakesDataInputType } from '@/types/common/input/cakesInput';
+import { StyledBox } from '../Common/Box';
+import BackBtn from '../Common/Button/BackBtn';
+import { CakeListType } from '@/types/cakes/cakeListType';
+import { useGetPublicWishes } from '@/hooks/queries/public';
+import { UseMutateFunction } from 'react-query';
+import theme from '@/styles/theme';
+
+interface CakesFormProps {
+  methods: UseFormReturn<CakesDataInputType, any, undefined>;
+  selectedCake: CakeListType;
+  selectedIndex: number;
+  selectCake: (index: number) => void;
+  wishesId: string | string[] | undefined;
+  postPublicCakesData: UseMutateFunction<
+    {
+      cakeId: number;
+      imageUrl: string;
+      hint: string;
+      initial: string;
+      contribute: string;
+      wisher: string;
+    },
+    unknown,
+    void,
+    unknown
+  >;
+}
+
+export default function CakesForm(props: CakesFormProps) {
+  const { methods, selectedCake, selectedIndex, selectCake, wishesId, postPublicCakesData } = props;
+
+  const { publicWishesData } = useGetPublicWishes(wishesId);
+
+  const handleClickFn = () => {
+    postPublicCakesData();
+  };
+
+  return (
+    <>
+      <Styled.HeaderWrapper>
+        <BackBtn />
+        <span>{`D-${publicWishesData?.dayCount}`}</span>
+      </Styled.HeaderWrapper>
+
+      <Styled.Title>{publicWishesData?.title}</Styled.Title>
+
+      <InputContainer title={`${publicWishesData?.name}님이 남긴 선물에 대한 힌트`}>
+        <Styled.HintBox className={'pastelBlue_darkBlue'}>{publicWishesData?.hint}</Styled.HintBox>
+      </InputContainer>
+
+      <InputContainer title={'본인의 실명 작성하기'}>
+        <Input
+          placeholder="이름을 정확하게 작성해주세요. ex. 홍길동"
+          register={methods.register('giverName')}
+        />
+      </InputContainer>
+
+      <SelectCakes
+        selectedCake={selectedCake}
+        selectedIndex={selectedIndex}
+        selectCake={selectCake}
+      />
+
+      <InputContainer title={'친구에게 편지 남기기'}>
+        <TextareaBox
+          placeholder={`ex. 너 도대체 원하는 게 모야?\n나 넘 궁금해. 일단 몸보신 한우 케이크 보태겠어`}
+          inputLength={methods.watch('letter').length}
+          limitLength={LIMIT_TEXT.DESCRIPTION}
+          register={methods.register('letter')}
+        ></TextareaBox>
+      </InputContainer>
+
+      <Styled.ButtonWrapper>
+        <Button boxType="large" colorSystem="mainBlue_white" handleClickFn={handleClickFn}>
+          {'케이크 주문하기'}
+        </Button>
+      </Styled.ButtonWrapper>
+    </>
+  );
+}
+
+const Styled = {
+  HeaderWrapper: styled.div`
+    display: flex;
+    justify-content: space-between;
+
+    width: 100%;
+
+    color: ${theme.colors.main_blue};
+    ${theme.fonts.headline20};
+  `,
+
+  Title: styled.h1`
+    ${theme.fonts.headline24_100};
+    color: ${theme.colors.main_blue};
+    margin: 2.4rem 0 3rem;
+  `,
+
+  HintBox: styled(StyledBox)`
+    width: 100%;
+    height: 12.6rem;
+
+    ${theme.fonts.body14};
+
+    padding: 1.2rem 1rem 1.2rem 1.2rem;
+  `,
+
+  ButtonWrapper: styled.div`
+    padding-bottom: 4.6rem;
+  `,
+};

components/cakes/CakesPay.tsx → components/Cakes/CakesPay.tsx

@@ -4,13 +4,12 @@ import { BackBtnIc } from '@/public/assets/icons';
 import Image from 'next/image';
 import { CakeListType } from '@/types/cakes/cakeListType';
 import { convertMoneyText } from '@/utils/common/convertMoneyText';
-import PaymentItemSelect from '../common/Select/PaymentItemSelect';
+import PaymentItemSelect from '../Common/Select/PaymentItemSelect';
 import { BANK_LIST } from '@/constant/bankList';
 import { BankListType } from '@/types/bankListType';
-import Button from '../common/button';
+import Button from '../Common/Button';
 import { useState } from 'react';
 import { useGetPublicWishes } from '@/hooks/queries/public';
-import router from 'next/router';
 
 interface CakesPayProps {
   handlePrevStep: () => void;
@@ -90,7 +89,7 @@ export default function CakesPay(props: CakesPayProps) {
 
       <Styled.ButtonWrapper>
         <Button
-          boxType="btn--large"
+          boxType="large"
           colorSystem="mainBlue_white"
           handleClickFn={() => handleDeepLink(selectedPayment)}
         >

components/cakes/CakesResult.tsx → components/Cakes/CakesResult.tsx

@@ -1,13 +1,10 @@
 import theme from '@/styles/theme';
 import styled from 'styled-components';
-import ImageBox from '@/components/common/box/imageBox';
-import ItemImageBox from '@/components/common/box/itemImageBox';
-import Contribution from './Result/contribution';
+import ItemImageBox from '@/components/Common/Box/ItemImageBox';
+import Contribution from './Result/Contribution';
 import { CakeListType } from '@/types/cakes/cakeListType';
-import { useGetPublicWishes } from '@/hooks/queries/public';
 import Image from 'next/image';
-import Button from '../common/button';
-import { StyledBox } from '../common/box';
+import Button from '../Common/Button';
 import router from 'next/router';
 
 interface CakesResultProps {
@@ -59,7 +56,7 @@ export default function CakesResult(props: CakesResultProps) {
           </>
         ) : (
           <>
-            <ItemImageBox src={cakesResultData?.imageUrl} alt="실제 선물 이미지" />
+            <ItemImageBox src={cakesResultData?.imageUrl || ''} alt="실제 선물 이미지" />
             <Styled.WishText>사실 내가 갖고 싶었던 건...이거야❤</Styled.WishText>
           </>
         )}
@@ -68,7 +65,7 @@ export default function CakesResult(props: CakesResultProps) {
         )}
       </Styled.Container>
       <Styled.ButtonWrapper>
-        <Button boxType="btn--large" colorSystem="mainBlue_white" handleClickFn={handleMoveHome}>
+        <Button boxType="large" colorSystem="mainBlue_white" handleClickFn={handleMoveHome}>
           {'당신도 받고 싶은 선물이 있나요?'}
         </Button>
       </Styled.ButtonWrapper>

components/cakes/Result/contribution.tsx → components/Cakes/Result/Contribution.tsx

@@ -1,5 +1,5 @@
 import styled, { css } from 'styled-components';
-import ProgressBar from '../../common/progressBar';
+import ProgressBar from '../../Common/ProgressBar';
 import theme from '@/styles/theme';
 
 interface ContributionProps {

components/cakes/SelectCakes.tsx → components/Cakes/SelectCakes.tsx

@@ -1,12 +1,12 @@
 import { CAKE_LIST } from '@/constant/cakeList';
 import { CakeListType } from '@/types/cakes/cakeListType';
-import InputContainer from '../common/input/inputContainer';
+import InputContainer from '../Common/Input/InputContainer';
 import styled from 'styled-components';
 import Image from 'next/image';
 import theme from '@/styles/theme';
 import { convertMoneyText } from '@/utils/common/convertMoneyText';
-import ImageBox from '../common/box/imageBox';
-import { StyledBox } from '../common/box';
+import ImageBox from '../Common/Box/ImageBox';
+import { StyledBox } from '../Common/Box';
 
 interface SelectCakesProps {
   selectedCake: CakeListType;

components/common/box/imageBox.tsx → components/Common/Box/ImageBox.tsx

@@ -1,28 +1,24 @@
 import styled from 'styled-components';
-import { BoxSize, StyledBox } from '.';
+import { StyledBox } from './index';
 import theme from '@/styles/theme';
 import { ColorSystemType, ImageBoxTypes } from '@/types/common/box/boxStyleType';
 import { PropsWithChildren } from 'react';
 
 interface ImageBoxProps {
-  width?: number;
-  height?: number;
   boxType?: ImageBoxTypes;
   colorSystem: ColorSystemType;
 }
 
 export default function ImageBox(props: PropsWithChildren<ImageBoxProps>) {
-  const { width, height, boxType, colorSystem, children } = props;
+  const { boxType, colorSystem, children } = props;
 
-  return (
-    <StyledImageBox className={`${colorSystem} ${boxType}`} width={width} height={height}>
-      {children}
-    </StyledImageBox>
-  );
+  return <StyledImageBox className={`${colorSystem} ${boxType}`}>{children}</StyledImageBox>;
 }
 
-const StyledImageBox = styled(StyledBox)<{ width?: number; height: number }>`
-  ${BoxSize.Image}
+const StyledImageBox = styled(StyledBox)`
+  width: 100%;
+  height: 15rem;
+
   padding: 1rem 1rem 1rem 1.2rem;
   border: 0.1rem solid ${theme.colors.main_blue};
 

components/common/box/inputBox.tsx → components/Common/Box/InputBox.tsx

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { BoxSize, StyledBox } from '.';
+import { StyledBox } from './index';
 import theme from '@/styles/theme';
 import { ColorSystemType, InputBoxTypes } from '@/types/common/box/boxStyleType';
 import { PropsWithChildren } from 'react';
@@ -29,11 +29,11 @@ const StyledInputBox = styled(StyledBox)<{ width?: string }>`
 
   //InputBox Style System
   &.inputBox--half {
-    ${BoxSize.Half}
+    width: calc(100% / 2);
   }
 
   &.inputBox--large {
-    ${BoxSize.Large}
+    width: 100%;
 
     display: flex;
     align-items: center;

components/common/box/itemImageBox.tsx → components/Common/Box/ItemImageBox.tsx

@@ -1,5 +1,5 @@
 import Image from 'next/image';
-import ImageBox from './imageBox';
+import ImageBox from './ImageBox';
 
 interface ItemImageBoxProps {
   src: string;

components/common/box/index.tsx → components/Common/Box/index.tsx

@@ -1,8 +1,9 @@
 import theme from '@/styles/theme';
 import { BoxTypes, ColorSystemType } from '@/types/common/box/boxStyleType';
-import styled, { CSSProperties } from 'styled-components';
+import styled from 'styled-components';
 
 interface BoxProps {
+  width?: number;
   boxType?: BoxTypes;
   colorSystem: ColorSystemType;
   children: React.ReactNode;
@@ -14,43 +15,27 @@ export default function Box(props: BoxProps) {
   return <StyledBox className={`${colorSystem} ${boxType}`}>{children}</StyledBox>;
 }
 
-type BoxSizeType = 'Small' | 'Half' | 'Large' | 'Image';
-export const BoxSize: Record<BoxSizeType, CSSProperties> = {
-  Small: {
-    width: '7.4rem',
-    height: '4.6rem',
-  },
-  Half: {
-    width: 'calc(100%/2)',
-    height: '5rem',
-  },
-  Large: {
-    width: '100%',
-    height: '5rem',
-  },
-  Image: {
-    width: '100%',
-    height: '15rem',
-  },
-};
-
 export const StyledBox = styled.div`
   border-radius: 1rem;
 
   .small {
-    ${BoxSize.Small}
+    width: 7.4rem;
+    height: 4.6rem;
   }
 
   .half {
-    ${BoxSize.Half}
+    width: calc(100% / 2);
+    height: 5rem;
   }
 
   .large {
-    ${BoxSize.Large}
+    width: 100%;
+    height: 5rem;
   }
 
   .image {
-    ${BoxSize.Image}
+    width: 100%;
+    height: 15rem;
   }
 
   // Color System

components/Common/Button/index.tsx

@@ -0,0 +1,33 @@
+import { ReactNode } from 'react';
+import { BoxTypes, ColorSystemType } from '@/types/common/box/boxStyleType';
+import styled from 'styled-components';
+import { StyledBox } from '../Box';
+import theme from '@/styles/theme';
+
+interface ButtonProps {
+  boxType: BoxTypes;
+  colorSystem: ColorSystemType;
+  handleClickFn?: (parameter?: unknown) => void | unknown;
+  children: ReactNode;
+}
+
+export default function Button(props: ButtonProps) {
+  const { boxType, colorSystem, handleClickFn, children } = props;
+
+  return (
+    <StyledBtnBox as="button" className={`${boxType} ${colorSystem} `} onClick={handleClickFn}>
+      {children}
+    </StyledBtnBox>
+  );
+}
+
+const StyledBtnBox = styled(StyledBox)<{ width?: number }>`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  width: 100%;
+  height: 5rem;
+
+  ${theme.fonts.button18};
+`;