Merge pull request #174 from Make-A-Wish-Sopt/develop

Develop
Make-A-Wish-Sopt · Dec 24, 2023 · a4d4b04 · a4d4b04
2 parents 8ac80ca + 60b9355
commit a4d4b04
Show file tree

Hide file tree

Showing 21 changed files with 162 additions and 71 deletions.
diff --git a/api/user.ts b/api/user.ts
@@ -3,15 +3,15 @@ import { client } from './common/axios';
 import { API_VERSION_01, PATH_USER } from './path';
 import { UseFormReturn } from 'react-hook-form';
 
-import { UserAccountDataResponseType } from '@/types/api/response';
+import { DefaultResponseType, UserAccountDataResponseType } from '@/types/api/response';
 import { WishesDataInputType } from '@/types/wishesType';
 
 const ACCESS_TOKEN = getAccessToken();
 
 export const putUserAccount = async (
   methods: UseFormReturn<WishesDataInputType, any, undefined>,
 ) => {
-  const data = await client.put(
+  const data = await client.put<DefaultResponseType>(
     `${API_VERSION_01}${PATH_USER.ACCOUNT}`,
     {
       accountInfo: {

diff --git a/components/Cakes/CakesForm.tsx b/components/Cakes/CakesForm.tsx
@@ -13,6 +13,7 @@ import { CakeListType } from '@/types/cakes/cakeListType';
 import { useGetPublicWishes } from '@/hooks/queries/public';
 import { UseMutateFunction } from 'react-query';
 import theme from '@/styles/theme';
+import { useEffect, useState } from 'react';
 
 interface CakesFormProps {
   methods: UseFormReturn<CakesDataInputType, any, undefined>;
@@ -39,11 +40,25 @@ export default function CakesForm(props: CakesFormProps) {
   const { methods, selectedCake, selectedIndex, selectCake, wishesId, postPublicCakesData } = props;
 
   const { publicWishesData } = useGetPublicWishes(wishesId);
+  const [btnState, setBtnState] = useState(false);
 
   const handleClickFn = () => {
+    if (!btnState) return;
     postPublicCakesData();
   };
 
+  useEffect(() => {
+    if (
+      methods.watch('letter') !== '' &&
+      methods.watch('letter').length <= 300 &&
+      methods.watch('giverName')
+    ) {
+      setBtnState(true);
+    } else {
+      setBtnState(false);
+    }
+  }, [methods.watch()]);
+
   return (
     <>
       <Styled.HeaderWrapper>
@@ -80,7 +95,11 @@ export default function CakesForm(props: CakesFormProps) {
       </InputContainer>
 
       <Styled.ButtonWrapper>
-        <Button boxType="large" colorSystem="mainBlue_white" handleClickFn={handleClickFn}>
+        <Button
+          boxType="large"
+          colorSystem={btnState ? 'mainBlue_white' : 'gray1_gray2'}
+          handleClickFn={handleClickFn}
+        >
           {'케이크 주문하기'}
         </Button>
       </Styled.ButtonWrapper>
@@ -107,7 +126,10 @@ const Styled = {
 
   HintBox: styled(StyledBox)`
     width: 100%;
-    height: 12.6rem;
+    min-height: 12.6rem;
+    max-height: 16rem;
+
+    overflow: scroll;
 
     ${theme.fonts.body14};
 

diff --git a/components/Cakes/CakesPay.tsx b/components/Cakes/CakesPay.tsx
@@ -35,7 +35,8 @@ export default function CakesPay(props: CakesPayProps) {
       alert('계좌번호에 오류가 있습니다!');
       return;
     }
-    const accountInfoText = `${publicWishesData.bank} ${publicWishesData.accountNumber}` || '';
+    const accountInfoText =
+      `${publicWishesData.bank} ${publicWishesData.accountNumber} ${selectedCake.price}원` || '';
     const isClipboardSupported = () => navigator?.clipboard != null;
 
     try {

diff --git a/components/Common/Box/ImageBox.tsx b/components/Common/Box/ImageBox.tsx
@@ -15,7 +15,7 @@ export default function ImageBox(props: PropsWithChildren<ImageBoxProps>) {
   return <StyledImageBox className={`${colorSystem} ${boxType}`}>{children}</StyledImageBox>;
 }
 
-const StyledImageBox = styled(StyledBox)`
+export const StyledImageBox = styled(StyledBox)`
   width: 100%;
   height: 15rem;
 

diff --git a/components/Common/Input/Input.tsx b/components/Common/Input/Input.tsx
@@ -15,12 +15,14 @@ interface InputProps {
   inputType?: HTMLInputTypeAttribute;
   placeholder?: string;
   readOnly?: boolean;
+  disabled?: boolean;
   register: UseFormRegisterReturn<keyof WishesDataInputType | keyof CakesDataInputType>;
   errors?: FieldError;
 }
 
 export default function Input(props: PropsWithChildren<InputProps>) {
-  const { width, inputType, boxType, placeholder, readOnly, register, errors, children } = props;
+  const { width, inputType, boxType, placeholder, readOnly, disabled, register, errors, children } =
+    props;
 
   return (
     <>
@@ -30,6 +32,7 @@ export default function Input(props: PropsWithChildren<InputProps>) {
           pattern={inputType === 'number' ? '\\d*' : undefined}
           placeholder={placeholder}
           readOnly={readOnly}
+          disabled={disabled}
           {...register}
         />
         {children}
@@ -39,10 +42,10 @@ export default function Input(props: PropsWithChildren<InputProps>) {
   );
 }
 
-export const StyledInput = styled.input`
+export const StyledInput = styled.input<{ disabled?: boolean }>`
   width: 100%;
   height: 100%;
 
   ${theme.fonts.body12};
-  color: ${theme.colors.dark_blue};
+  color: ${(props) => (props.disabled ? theme.colors.gray1 : theme.colors.dark_blue)};
 `;
diff --git a/components/Common/Input/InputLength.tsx b/components/Common/Input/InputLength.tsx
@@ -10,15 +10,16 @@ export default function InputLength(props: InputLengthProps) {
   const { inputLength, limitLength } = props;
 
   return (
-    <Styled.Container>
+    <Styled.Container inputLength={inputLength} limitLength={limitLength}>
       {inputLength}/{limitLength}
     </Styled.Container>
   );
 }
 
 const Styled = {
-  Container: styled.div`
-    color: ${theme.colors.gray2};
+  Container: styled.div<{ inputLength: number; limitLength: number }>`
+    color: ${(props) =>
+      props.inputLength > props.limitLength ? theme.colors.warning_red : theme.colors.gray2};
     ${theme.fonts.body12};
 
     padding-left: 1rem;

diff --git a/components/Common/Input/TextareaBox.tsx b/components/Common/Input/TextareaBox.tsx
@@ -12,15 +12,21 @@ interface TextareaBoxProps {
   inputLength?: number;
   limitLength?: number;
   readOnly?: boolean;
+  disabled?: boolean;
   register: UseFormRegisterReturn<keyof WishesDataInputType | keyof CakesDataInputType>;
 }
 
 export default function TextareaBox(props: TextareaBoxProps) {
-  const { placeholder, inputLength, limitLength, readOnly, register } = props;
+  const { placeholder, inputLength, limitLength, readOnly, disabled, register } = props;
 
   return (
     <ImageBox boxType="imageBox--textarea" colorSystem="pastelBlue_darkBlue">
-      <Styled.Textarea placeholder={placeholder} readOnly={readOnly} {...register} />
+      <Styled.Textarea
+        placeholder={placeholder}
+        readOnly={readOnly}
+        disabled={disabled}
+        {...register}
+      />
       <Styled.InputLengthWrapper>
         <EmptyBox />
         {limitLength && <InputLength inputLength={inputLength || 0} limitLength={limitLength} />}
@@ -35,11 +41,12 @@ const Styled = {
     justify-content: space-between;
   `,
 
-  Textarea: styled.textarea`
+  Textarea: styled.textarea<{ disabled?: boolean }>`
     width: 100%;
     height: 10.5rem;
 
     ${theme.fonts.body12};
+    color: ${(props) => (props.disabled ? theme.colors.gray1 : theme.colors.dark_blue)};
 
     resize: none;
   `,

diff --git a/components/Common/Modal/BankInput.tsx b/components/Common/Modal/BankInput.tsx
@@ -5,7 +5,7 @@ import styled from 'styled-components';
 
 import { UseFormReturn } from 'react-hook-form';
 
-import { WishesDataInputType } from '@/types/wishesType';
+import { MainProgressDataType, WishesDataInputType } from '@/types/wishesType';
 import { ArrowDownIc } from '@/public/assets/icons';
 import Image from 'next/image';
 
@@ -18,6 +18,7 @@ import { validation } from '@/validation/input';
 
 interface BankInputProps {
   methods: UseFormReturn<WishesDataInputType, any, undefined>;
+  progressData?: MainProgressDataType;
 }
 
 export default function BankInput(props: BankInputProps) {
@@ -39,7 +40,6 @@ export default function BankInput(props: BankInputProps) {
           boxType="inputBox--large"
           placeholder="은행 선택"
           register={methods.register('bank')}
-          readOnly
         >
           <Image src={ArrowDownIc} alt="더 보기" />
         </Input>

diff --git a/components/Main/MainCenterContent.tsx b/components/Main/MainCenterContent.tsx
@@ -11,12 +11,11 @@ import {
 import theme from '@/styles/theme';
 import { useGetMainProgressData } from '@/hooks/queries/wishes';
 import { convertMoneyText } from '@/utils/common/convertMoneyText';
+import router from 'next/router';
 
 export default function MainCenterContent() {
   const { progressData } = useGetMainProgressData();
 
-  console.log(progressData);
-
   const ChatImg = () => {
     if (!progressData) {
       return MainChatImg;
@@ -31,6 +30,10 @@ export default function MainCenterContent() {
     }
   };
 
+  const handleMoveLetterPage = () => {
+    progressData && router.push(`mypage/letters/${progressData?.wishId}`);
+  };
+
   return (
     <Styled.Container>
       <Styled.CenterContentWrapper>
@@ -55,12 +58,12 @@ export default function MainCenterContent() {
             <Styled.CakeText>총 ???개</Styled.CakeText>
           </>
         ) : (
-          <>
+          <div onClick={handleMoveLetterPage}>
             {'예상 케이크 금액 >\n'}
             <Styled.CakeText>{`총 ${convertMoneyText(
               progressData?.price.toString() || '0',
             )}원`}</Styled.CakeText>
-          </>
+          </div>
         )}
       </Styled.CakeTextWrapper>
     </Styled.Container>

diff --git a/components/Main/MainTopContent.tsx b/components/Main/MainTopContent.tsx
@@ -24,8 +24,8 @@ export default function MainTopContent() {
       return 'D-Day';
     } else {
       return progressData.dayCount < 0
-        ? `D${progressData?.dayCount}`
-        : `D+${progressData?.dayCount}`;
+        ? `D+${Math.abs(progressData?.dayCount)}`
+        : `D-${progressData?.dayCount}`;
     }
   };