[ fix ] 메인화면 QA

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``,
 };

components/Main/MainCenterContent.tsx

@@ -1,14 +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;
@@ -29,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>

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}`;
     }
   };
 

public/assets/icons/index.ts

@@ -25,3 +25,4 @@ export { default as ArrowRightIc } from '@/public/assets/icons/arrowRightIc.svg'
 export { default as ArrowLargeDownIc } from '@/public/assets/icons/arrowLargeDownIc.svg';
 export { default as CheckedBoxIc } from '@/public/assets/icons/checkedBoxIc.svg';
 export { default as UnCheckedBoxIc } from '@/public/assets/icons/unCheckedBoxIc.svg';
+export { default as FireIcImg } from '@/public/assets/icons/fireIcImg.png';