Merge pull request #169 from Make-A-Wish-Sopt/qa

Qa
Make-A-Wish-Sopt · Dec 23, 2023 · 5c7f16a · 5c7f16a · vercel · Dec 23, 2023
2 parents cd3566b + 5038595
commit 5c7f16a
Show file tree

Hide file tree

Showing 14 changed files with 213 additions and 47 deletions.
diff --git a/components/Cakes/CakesPay.tsx b/components/Cakes/CakesPay.tsx
@@ -10,7 +10,6 @@ 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;
@@ -36,7 +35,7 @@ export default function CakesPay(props: CakesPayProps) {
       alert('계좌번호에 오류가 있습니다!');
       return;
     }
-    const accountInfoText = `${publicWishesData.bank} ${publicWishesData.accountNumber}`;
+    const accountInfoText = `${publicWishesData.bank} ${publicWishesData.accountNumber}` || '';
     const isClipboardSupported = () => navigator?.clipboard != null;
 
     try {
@@ -52,6 +51,7 @@ export default function CakesPay(props: CakesPayProps) {
         document.body.removeChild(textArea);
       }
       alert('계좌번호가 복사되었습니다.');
+      handleDeepLink(selectedPayment);
     } catch (error) {
       alert('복사하기가 지원되지 않는 환경입니다.');
     }
@@ -65,8 +65,6 @@ export default function CakesPay(props: CakesPayProps) {
       return;
     }
 
-    handleTextCopy();
-
     if (window.confirm(`${payment?.name}(으)로 이동할까요?`)) {
       if (payment?.name === '토스뱅크') {
         window.open(
@@ -122,7 +120,7 @@ export default function CakesPay(props: CakesPayProps) {
           boxType="large"
           colorSystem="mainBlue_white"
           handleClickFn={() => {
-            handleDeepLink(selectedPayment);
+            handleTextCopy();
           }}
         >
           {'친구 계좌로 케이크 쏘기'}

diff --git a/components/Common/Modal/MainShareModal.tsx b/components/Common/Modal/MainShareModal.tsx
@@ -5,6 +5,7 @@ import { useGetMainProgressData } from '@/hooks/queries/wishes';
 import Image from 'next/image';
 import { MainCakeImg, MainWishChatImg } from '@/public/assets/images';
 import { CloseWhiteIc } from '@/public/assets/icons';
+import { convertMoneyText } from '@/utils/common/convertMoneyText';
 
 interface MainShareModalProps {
   handleToggle: () => void;
@@ -27,7 +28,9 @@ export default function MainShareModal(props: MainShareModalProps) {
         <Image src={MainCakeImg} alt="메인 케이크 이미지" width={219} />
         <Styled.PriceTextWrapper>
           {'예상 케이크 금액\n'}
-          <Styled.PriceText>{`총 ${progressData?.price}원`}</Styled.PriceText>
+          <Styled.PriceText>{`총 ${convertMoneyText(
+            progressData?.price.toString() || '0',
+          )}원`}</Styled.PriceText>
         </Styled.PriceTextWrapper>
 
         <Styled.DivisionLine />

diff --git a/components/Common/Modal/ShareContent.tsx b/components/Common/Modal/ShareContent.tsx
@@ -10,13 +10,16 @@ import { useRecoilValue } from 'recoil';
 import { LoginUserInfo } from '@/recoil/auth/loginUserInfo';
 import SNSBox from '../Button/SnsBox';
 import InputLink from '../Input/InputLink';
+import { useGetMainProgressData } from '@/hooks/queries/wishes';
 
 export default function ShareContent() {
   const [wishesLink, setWishesLink] = useState('');
   const loginUserInfo = useRecoilValue(LoginUserInfo);
 
+  const { progressData } = useGetMainProgressData();
+
   useEffect(() => {
-    setWishesLink(`https://sunmulzu.store/wishes/${loginUserInfo.wishesId}`);
+    progressData && setWishesLink(`https://sunmulzu.store/wishes/${progressData.wishId}`);
   }, []);
 
   const handleShareSNS = (name: string) => {
@@ -95,6 +98,4 @@ const Styled = {
     color: ${theme.colors.white};
     width: 100%;
   `,
-
-
 };
diff --git a/components/Common/Modal/ShareModal.tsx b/components/Common/Modal/ShareModal.tsx
@@ -11,6 +11,7 @@ interface ShareModalProps {
 export default function ShareModal(props: ShareModalProps) {
   const { handleToggle } = props;
 
+
   return (
     <Styled.Container>
       <Styled.IconContainer>
@@ -25,9 +26,8 @@ export default function ShareModal(props: ShareModalProps) {
 const Styled = {
   Container: styled.div`
     width: 31.6rem;
-    height: 14.3rem;
+
     background-color: ${theme.colors.pastel_blue};
-    padding: 2.2rem 1.5rem 1.6rem;
     border-radius: 1.6rem;
 
     position: absolute;

diff --git a/components/Common/VerticalProgressBar.tsx b/components/Common/VerticalProgressBar.tsx
@@ -1,4 +1,6 @@
+import { FireIcImg } from '@/public/assets/icons';
 import theme from '@/styles/theme';
+import Image from 'next/image';
 import styled, { css } from 'styled-components';
 
 interface ProgressBarProps {
@@ -15,7 +17,21 @@ export default function VerticalProgressBar(props: ProgressBarProps) {
         <Styled.PercentWrapper percent={Number(percent)}></Styled.PercentWrapper>
       </Styled.ProgressBox>
 
+      {/* 리팩토링 1순위 ㅋㅋㅋ */}
       <Styled.BarContainer>
+        {percent && percent >= 100 && (
+          <Image
+            src={FireIcImg}
+            alt="불꽃 아이콘"
+            width={59}
+            style={{
+              position: 'absolute',
+              top: '26rem',
+              right: '-2.5rem',
+              transform: 'rotate(180deg)',
+            }}
+          />
+        )}
         <Styled.Progress percent={Number(percent)} />
       </Styled.BarContainer>
     </>
@@ -68,11 +84,20 @@ const Styled = {
     max-height: 100%;
     width: 100%;
 
-    background-color: ${theme.colors.main_blue};
+    ${(props) =>
+      props.percent > 100
+        ? css`
+            background: linear-gradient(#3ea2ff, #e63323);
+          `
+        : css`
+            background-color: ${theme.colors.main_blue};
+          `}
 
     border-bottom-right-radius: 5rem;
     border-bottom-left-radius: 5rem;
     border-top-right-radius: 5rem;
     border-top-left-radius: 5rem;
   `,
+
+  FireIconWrapper: styled.div``,
 };
diff --git a/components/Main/MainCenterContent.tsx b/components/Main/MainCenterContent.tsx
@@ -1,13 +1,22 @@
 import Image from 'next/image';
 import styled from 'styled-components';
 import VerticalProgressBar from '../Common/VerticalProgressBar';
-import { MainCakeImg, MainChatImg, MainEndChatImg, MainWishChatImg } from '@/public/assets/images';
+import {
+  MainCakeImg,
+  MainChatImg,
+  MainEndCakeImg,
+  MainEndChatImg,
+  MainWishChatImg,
+} from '@/public/assets/images';
 import theme from '@/styles/theme';
 import { useGetMainProgressData } from '@/hooks/queries/wishes';
+import { convertMoneyText } from '@/utils/common/convertMoneyText';
 
 export default function MainCenterContent() {
   const { progressData } = useGetMainProgressData();
 
+  console.log(progressData);
+
   const ChatImg = () => {
     if (!progressData) {
       return MainChatImg;
@@ -28,11 +37,16 @@ export default function MainCenterContent() {
         <Styled.ImageWrapper>
           <Image src={ChatImg()} alt="말풍선" />
           <Styled.CakeImageWrapper>
-            <Image src={MainCakeImg} alt="메인 케이크 이미지" width={219} />
+            <Image
+              src={progressData?.status === 'END' ? MainEndCakeImg : MainCakeImg}
+              alt="메인 케이크 이미지"
+              width={219}
+            />
           </Styled.CakeImageWrapper>
         </Styled.ImageWrapper>
         <Styled.ProgressBarWrapper>
-          <VerticalProgressBar percent={progressData?.percent || 0} />
+          {/* <VerticalProgressBar percent={progressData?.percent || 0} /> */}
+          <VerticalProgressBar percent={125} />
         </Styled.ProgressBarWrapper>
       </Styled.CenterContentWrapper>
       <Styled.CakeTextWrapper>
@@ -44,7 +58,9 @@ export default function MainCenterContent() {
         ) : (
           <>
             {'예상 케이크 금액 >\n'}
-            <Styled.CakeText>{`총 ${progressData.price}원`}</Styled.CakeText>
+            <Styled.CakeText>{`총 ${convertMoneyText(
+              progressData?.price.toString() || '0',
+            )}원`}</Styled.CakeText>
           </>
         )}
       </Styled.CakeTextWrapper>

diff --git a/components/Main/MainTopContent.tsx b/components/Main/MainTopContent.tsx
@@ -23,7 +23,9 @@ export default function MainTopContent() {
     if (progressData?.dayCount === 0) {
       return 'D-Day';
     } else {
-      return `D-${progressData?.dayCount}`;
+      return progressData.dayCount < 0
+        ? `D${progressData?.dayCount}`
+        : `D+${progressData?.dayCount}`;
     }
   };
 

diff --git a/constant/bankList.ts b/constant/bankList.ts
@@ -1,16 +1,133 @@
 import bankImgs from '@/public/assets/images';
 import { BankListType } from '@/types/bankListType';
+import { StaticImageData } from 'next/image';
 
 export const BANK_LIST: BankListType[] = [];
 
+// type BankNameListType =
+//   | 'NH농협'
+//   | '카카오뱅크'
+//   | 'KB국민'
+//   | '신한'
+//   | '우리'
+//   | '토스뱅크'
+//   | 'IBK기업'
+//   | '하나'
+//   | '새마을'
+//   | '부산'
+//   | '대구'
+//   | '케이뱅크'
+//   | '신협'
+//   | '우체국'
+//   | 'SC제일'
+//   | '경남'
+//   | '광주'
+//   | '수협'
+//   | '전북'
+//   | '저축은행'
+//   | '제주'
+//   | '씨티'
+//   | 'KDB산업'
+//   | '산림조합'
+//   | 'SBI저축은행'
+//   | 'BOA'
+//   | '중국'
+//   | 'HSBC'
+//   | '중국공상'
+//   | '도이치'
+//   | 'JP모건'
+//   | 'BNP파리바'
+//   | '중국건설';
+
+// type BankInfoType = {
+//   name: keyof BankNameListType;
+//   bankNumber: number;
+//   logo: StaticImageData;
+// };
+
+// const bank_List: Record<BankNameListType, BankInfoType> = {
+//   NH농협: {
+//     name: 'NH농협',
+//     bankNumber: "0011",
+//     logo:
+//   },
+// };
+
 for (let i = 0; i <= 32; i++) {
   BANK_LIST.push({
-    name:
-      ['NH농협', '카카오뱅크', 'KB국민', '신한', '우리', '토스뱅크', 'IBK기업', '하나', '새마을',
-        '부산', '대구', '케이뱅크', '신협', '우체국', 'SC제일', "경남", "광주", "수협", "전북",
-        "저축은행", "제주", "씨티", "KDB산업", "산림조합", "SBI저축은행", "BOA", "중국", "HSBC",
-        "중국공상", "도이치", "JP모건", "BNP파리바", "중국건설"][i],
+    name: [
+      'NH농협',
+      '카카오뱅크',
+      'KB국민',
+      '신한',
+      '우리',
+      '토스뱅크',
+      'IBK기업',
+      '하나',
+      '새마을',
+      '부산',
+      '대구',
+      '케이뱅크',
+      '신협',
+      '우체국',
+      'SC제일',
+      '경남',
+      '광주',
+      '수협',
+      '전북',
+      '저축은행',
+      '제주',
+      '씨티',
+      'KDB산업',
+      '산림조합',
+      'SBI저축은행',
+      'BOA',
+      '중국',
+      'HSBC',
+      '중국공상',
+      '도이치',
+      'JP모간',
+      'BNP파리바',
+      '중국건설',
+    ][i],
     bankNumber: i + 1,
     logo: bankImgs[`bank${i + 1}Img`],
+    bankCode: '',
   });
-}
+}
+
+//리팩토링 대상 1호 ㅋㅋㅋ
+
+BANK_LIST[0].bankCode = '0011'; //농협
+BANK_LIST[1].bankCode = '0090'; //카카오뱅크
+BANK_LIST[2].bankCode = '0004'; //국민
+BANK_LIST[3].bankCode = '0088'; //신한
+BANK_LIST[4].bankCode = '0020'; //우리
+BANK_LIST[5].bankCode = '0092'; //토스뱅크
+BANK_LIST[6].bankCode = '0003'; //IBK기업
+BANK_LIST[7].bankCode = '0081'; //하나
+BANK_LIST[8].bankCode = '0045'; //새마을
+BANK_LIST[9].bankCode = '0032'; //부산
+BANK_LIST[10].bankCode = '0031'; //대구
+BANK_LIST[11].bankCode = '0089'; //케이뱅크
+BANK_LIST[12].bankCode = '0048'; //신협
+BANK_LIST[13].bankCode = '0071'; //우체국
+BANK_LIST[14].bankCode = '0023'; //sc제일
+BANK_LIST[15].bankCode = '0039'; //경남
+BANK_LIST[16].bankCode = '0034'; //광주
+BANK_LIST[17].bankCode = '0007'; //수협
+BANK_LIST[18].bankCode = '0037'; //전북
+BANK_LIST[19].bankCode = '0050'; //저축은행
+BANK_LIST[20].bankCode = '0035'; //제주
+BANK_LIST[21].bankCode = '0027'; //씨티
+BANK_LIST[22].bankCode = '0002'; //KDB산업
+BANK_LIST[23].bankCode = '0064'; //산림조합
+BANK_LIST[24].bankCode = '0050'; //SBI저축은행
+BANK_LIST[25].bankCode = '0060'; //BOA
+BANK_LIST[26].bankCode = '0062'; //중국
+BANK_LIST[27].bankCode = '0054'; //HSBC
+BANK_LIST[28].bankCode = '0067'; //중국공상
+BANK_LIST[29].bankCode = '0055'; //도이치
+BANK_LIST[30].bankCode = '0057'; //JP모간
+BANK_LIST[31].bankCode = '0061'; //BNP파리바
+BANK_LIST[31].bankCode = '0067'; //중국건설