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

Develop
Make-A-Wish-Sopt · Dec 23, 2023 · adc702c · adc702c
2 parents cfdfc3d + cd3566b
commit adc702c
Show file tree

Hide file tree

Showing 67 changed files with 459 additions and 239 deletions.
diff --git a/api/common/axios.ts b/api/common/axios.ts
@@ -27,17 +27,17 @@ client.interceptors.response.use(
   async function (error) {
     if (error.response) {
       if (error.response.data.message === '유효하지 않은 토큰입니다.') {
-        // alert('로그인 상태를 확인해주세요!');
-        // window.location.replace('/');
+        alert('로그인 상태를 확인해주세요!');
+        window.location.replace('/');
       } else if (error.response.data.message === '유효하지 않은 소원 링크입니다.') {
-        // alert(error.response.data.message);
-        // window.location.replace('/');
+        alert(error.response.data.message);
+        window.location.replace('/');
       } else if (
         error.response?.data?.message === '이미 진행 중인 소원 링크가 있습니다.' ||
         error.response?.data?.message === '주간이 끝난 소원 링크입니다.'
       ) {
-        // alert(error.response?.data?.message);
-        // window.location.replace('/main');
+        alert(error.response?.data?.message);
+        window.location.replace('/main');
       }
     }
   },

diff --git a/api/user.ts b/api/user.ts
@@ -8,7 +8,7 @@ import { WishesDataInputType } from '@/types/wishesType';
 
 const ACCESS_TOKEN = getAccessToken();
 
-export const patchUserAccount = async (
+export const putUserAccount = async (
   methods: UseFormReturn<WishesDataInputType, any, undefined>,
 ) => {
   const data = await client.put(
@@ -19,6 +19,7 @@ export const patchUserAccount = async (
         bank: methods.getValues('bank'),
         account: methods.getValues('account'),
       },
+      phone: methods.getValues('phone'),
     },
     {
       headers: {

diff --git a/api/wishes.ts b/api/wishes.ts
@@ -133,7 +133,7 @@ export const getProgressWishInfo = async () => {
 /**
  * 진행중인 소원 정보 수정
  */
-export const patchProgressWishInfo = async (
+export const putProgressWishes = async (
   methods: UseFormReturn<WishesDataInputType, any, undefined>,
 ) => {
   const data = await client.put(
@@ -161,6 +161,20 @@ export const patchProgressWishInfo = async (
   return data.data.data;
 };
 
+/**
+ * 진행중인 소원 중단
+ */
+export const patchProgressWishes = async () => {
+  const data = await client.patch(`${API_VERSION_01}${PATH_WISHES.PROGRESS}`, {
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: `Bearer ${ACCESS_TOKEN}`,
+    },
+  });
+
+  return data.data.data;
+};
+
 /**
  * 소원 단건 조회
  */

diff --git a/components/Cakes/CakesPay.tsx b/components/Cakes/CakesPay.tsx
@@ -10,6 +10,7 @@ import { BankListType } from '@/types/bankListType';
 import Button from '../Common/Button';
 import { useState } from 'react';
 import { useGetPublicWishes } from '@/hooks/queries/public';
+import { getMainProgressData } from '@/api/wishes';
 
 interface CakesPayProps {
   handlePrevStep: () => void;
@@ -30,6 +31,32 @@ export default function CakesPay(props: CakesPayProps) {
     setSelected(payment);
   };
 
+  const handleTextCopy = async () => {
+    if (!publicWishesData?.accountNumber || !publicWishesData.bank) {
+      alert('계좌번호에 오류가 있습니다!');
+      return;
+    }
+    const accountInfoText = `${publicWishesData.bank} ${publicWishesData.accountNumber}`;
+    const isClipboardSupported = () => navigator?.clipboard != null;
+
+    try {
+      if (isClipboardSupported()) {
+        await navigator.clipboard.writeText(accountInfoText);
+      } else {
+        const textArea = document.createElement('textarea');
+        textArea.value = accountInfoText;
+        document.body.appendChild(textArea);
+        textArea.select();
+
+        document.execCommand('copy');
+        document.body.removeChild(textArea);
+      }
+      alert('계좌번호가 복사되었습니다.');
+    } catch (error) {
+      alert('복사하기가 지원되지 않는 환경입니다.');
+    }
+  };
+
   const handleDeepLink = (payment: BankListType | undefined) => {
     const ua = navigator.userAgent.toLowerCase();
 
@@ -38,6 +65,8 @@ export default function CakesPay(props: CakesPayProps) {
       return;
     }
 
+    handleTextCopy();
+
     if (window.confirm(`${payment?.name}(으)로 이동할까요?`)) {
       if (payment?.name === '토스뱅크') {
         window.open(
@@ -54,6 +83,7 @@ export default function CakesPay(props: CakesPayProps) {
             : 'https://apps.apple.com/app/id1258016944',
         );
       }
+
       handleNextStep();
     }
   };
@@ -91,7 +121,9 @@ export default function CakesPay(props: CakesPayProps) {
         <Button
           boxType="large"
           colorSystem="mainBlue_white"
-          handleClickFn={() => handleDeepLink(selectedPayment)}
+          handleClickFn={() => {
+            handleDeepLink(selectedPayment);
+          }}
         >
           {'친구 계좌로 케이크 쏘기'}
         </Button>

diff --git a/components/Cakes/index.tsx b/components/Cakes/index.tsx
@@ -33,7 +33,14 @@ export default function CakesContainer() {
   });
 
   useEffect(() => {
-    isSuccess && wishesStep.handleNextStep();
+    if (isSuccess) {
+      if (selectedCake.cakeNumber === 1) {
+        wishesStep.handleNextStep();
+        wishesStep.handleNextStep();
+      } else {
+        wishesStep.handleNextStep();
+      }
+    }
   }, [isSuccess]);
 
   useEffect(() => {

diff --git a/components/Common/Box/InputBox.tsx b/components/Common/Box/InputBox.tsx
@@ -6,7 +6,7 @@ import { PropsWithChildren } from 'react';
 
 interface InputBoxProps {
   width?: string;
-  boxType: InputBoxTypes;
+  boxType?: InputBoxTypes;
   colorSystem: ColorSystemType;
 }
 
@@ -21,6 +21,7 @@ export default function InputBox(props: PropsWithChildren<InputBoxProps>) {
 }
 
 const StyledInputBox = styled(StyledBox)<{ width?: string }>`
+  width: ${(props) => (props.width ? props.width : '100%')};
   height: 5rem;
 
   padding: 1rem 1rem 1rem 1.2rem;
@@ -48,9 +49,4 @@ const StyledInputBox = styled(StyledBox)<{ width?: string }>`
 
     ${theme.fonts.body14};
   }
-
-  &.inputBox--custom {
-    width: ${(props) => props.width};
-    height: 5rem;
-  }
 `;
diff --git a/components/Common/Button/index.tsx b/components/Common/Button/index.tsx
@@ -5,28 +5,34 @@ import { StyledBox } from '../Box';
 import theme from '@/styles/theme';
 
 interface ButtonProps {
-  boxType: BoxTypes;
+  width?: string;
+  boxType?: BoxTypes;
   colorSystem: ColorSystemType;
   handleClickFn?: (parameter?: unknown) => void | unknown;
   children: ReactNode;
 }
 
 export default function Button(props: ButtonProps) {
-  const { boxType, colorSystem, handleClickFn, children } = props;
+  const { width, boxType, colorSystem, handleClickFn, children } = props;
 
   return (
-    <StyledBtnBox as="button" className={`${boxType} ${colorSystem} `} onClick={handleClickFn}>
+    <StyledBtnBox
+      as="button"
+      width={width}
+      className={`${boxType} ${colorSystem} `}
+      onClick={handleClickFn}
+    >
       {children}
     </StyledBtnBox>
   );
 }
 
-const StyledBtnBox = styled(StyledBox)<{ width?: number }>`
+export const StyledBtnBox = styled(StyledBox)<{ width?: string }>`
   display: flex;
   justify-content: center;
   align-items: center;
 
-  width: 100%;
+  width: ${(props) => (props.width ? props.width : '100%')};
   height: 5rem;
 
   ${theme.fonts.button18};

diff --git a/components/Common/Input/Input.tsx b/components/Common/Input/Input.tsx
@@ -1,6 +1,6 @@
 import theme from '@/styles/theme';
 import { WishesDataInputType } from '@/types/wishesType';
-import { PropsWithChildren } from 'react';
+import { HTMLInputTypeAttribute, PropsWithChildren } from 'react';
 import { FieldError, UseFormRegisterReturn } from 'react-hook-form';
 import styled from 'styled-components';
 
@@ -12,23 +12,26 @@ import InputBox from '../Box/InputBox';
 interface InputProps {
   width?: string;
   boxType?: InputBoxTypes;
+  inputType?: HTMLInputTypeAttribute;
   placeholder?: string;
   readOnly?: boolean;
   register: UseFormRegisterReturn<keyof WishesDataInputType | keyof CakesDataInputType>;
   errors?: FieldError;
 }
 
 export default function Input(props: PropsWithChildren<InputProps>) {
-  const { width, boxType, placeholder, readOnly, register, errors, children } = props;
+  const { width, inputType, boxType, placeholder, readOnly, register, errors, children } = props;
 
   return (
     <>
-      <InputBox
-        width={width}
-        boxType={boxType || 'inputBox--large'}
-        colorSystem="pastelBlue_darkBlue"
-      >
-        <StyledInput placeholder={placeholder} readOnly={readOnly} {...register} />
+      <InputBox width={width} boxType={boxType} colorSystem="pastelBlue_darkBlue">
+        <StyledInput
+          type={inputType || 'text'}
+          pattern={inputType === 'number' ? '\\d*' : undefined}
+          placeholder={placeholder}
+          readOnly={readOnly}
+          {...register}
+        />
         {children}
       </InputBox>
       {errors?.message && <AlertTextBox>{errors.message}</AlertTextBox>}

diff --git a/components/Common/Modal/BankInput.tsx b/components/Common/Modal/BankInput.tsx
@@ -11,9 +11,10 @@ import Image from 'next/image';
 
 import theme from '@/styles/theme';
 import Input from '../Input/Input';
-import Button from '../Button';
+import { StyledBtnBox } from '../Button';
 import { StyledBox } from '../Box';
 import AlertTextBox from '../AlertTextBox';
+import { validation } from '@/validation/input';
 
 interface BankInputProps {
   methods: UseFormReturn<WishesDataInputType, any, undefined>;
@@ -34,7 +35,12 @@ export default function BankInput(props: BankInputProps) {
       </Styled.ItemWrapper>
 
       <Styled.ItemWrapper onClick={handleToggle}>
-        <Input placeholder="은행 선택" register={methods.register('bank')} readOnly>
+        <Input
+          boxType="inputBox--large"
+          placeholder="은행 선택"
+          register={methods.register('bank')}
+          readOnly
+        >
           <Image src={ArrowDownIc} alt="더 보기" />
         </Input>
       </Styled.ItemWrapper>
@@ -43,14 +49,17 @@ export default function BankInput(props: BankInputProps) {
         <Styled.InputWrapper>
           <Input
             width="calc(100% - 10.6rem)"
-            boxType="inputBox--custom"
+            inputType="number"
             placeholder="계좌번호를 입력해주세요"
             register={methods.register('account')}
           />
-          <Button boxType="custom" colorSystem="mainBlue_white">
+          <Styled.AccountAuthButton className="mainBlue_white">
             {'계좌번호 확인'}
-          </Button>
+          </Styled.AccountAuthButton>
         </Styled.InputWrapper>
+        {validation.isIncludeHyphen(methods.watch('account')) && (
+          <AlertTextBox>{'(-)없이 숫자만 입력해주세요'}</AlertTextBox>
+        )}
 
         {/* 조건 기능 추가  */}
         {/* {<AlertTextBox>{true ? '정상 계좌입니다' : '존재하지 않는 계좌번호입니다'}</AlertTextBox>} */}
@@ -92,4 +101,10 @@ const Styled = {
     ${theme.fonts.body14};
     line-height: 140%;
   `,
+
+  AccountAuthButton: styled(StyledBtnBox)`
+    width: 10.6rem;
+
+    ${theme.fonts.body14};
+  `,
 };
diff --git a/components/Common/Modal/BankModal.tsx b/components/Common/Modal/BankModal.tsx
@@ -7,7 +7,6 @@ import { WishesDataInputType } from '@/types/wishesType';
 
 interface BankModalProps {
   handleToggle: () => void;
-
   methods: UseFormReturn<WishesDataInputType, any, undefined>;
 }
 
@@ -59,7 +58,7 @@ const Styled = {
 
   BankContainer: styled.ul`
     height: 91.4%;
-    overflow: auto;
+    overflow: scroll;
     ::-webkit-scrollbar {
       display: none;
     }

diff --git a/components/Common/Modal/CancelWishesModal.tsx b/components/Common/Modal/CancelWishesModal.tsx
@@ -0,0 +1,32 @@
+import Image from 'next/image';
+import ConfirmCancleModal from './ModalForm/ConfirmCancleModal';
+import { MainCakeImg } from '@/public/assets/images';
+import styled from 'styled-components';
+import theme from '@/styles/theme';
+
+interface CancleWishesModalProps {
+  handleToggle: () => void;
+  handleCancleWishes: () => void;
+}
+
+export default function CancleWishesModal(props: CancleWishesModalProps) {
+  const { handleToggle, handleCancleWishes } = props;
+  return (
+    <ConfirmCancleModal
+      handleToggle={handleToggle}
+      handleDelete={handleCancleWishes}
+      rightText="중단하기"
+    >
+      <Image src={MainCakeImg} alt={'케이크'} width={60} height={60} />
+      <Styled.DeleteText>진행중인 소원 링크를 중단하시겠습니까?</Styled.DeleteText>
+    </ConfirmCancleModal>
+  );
+}
+
+const Styled = {
+  DeleteText: styled.div`
+    ${theme.fonts.body14};
+    color: ${theme.colors.dark_blue};
+    margin: 0.7rem 0 1rem;
+  `,
+};