diff --git a/components/Common/VerticalProgressBar.tsx b/components/Common/VerticalProgressBar.tsx
index 3c7d1f01..fc647f2c 100644
--- 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) {
+ {/* 리팩토링 1순위 ㅋㅋㅋ */}
+ {percent && percent >= 100 && (
+
+ )}
@@ -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
index a8535e4f..a9f2c060 100644
--- a/components/Main/MainCenterContent.tsx
+++ b/components/Main/MainCenterContent.tsx
@@ -1,7 +1,13 @@
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';
@@ -9,6 +15,8 @@ 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() {
-
+
-
+ {/* */}
+
diff --git a/components/Main/MainTopContent.tsx b/components/Main/MainTopContent.tsx
index 3cf1099a..16115e51 100644
--- 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/public/assets/icons/fireIcImg.png b/public/assets/icons/fireIcImg.png
new file mode 100644
index 00000000..fc3ddff6
Binary files /dev/null and b/public/assets/icons/fireIcImg.png differ
diff --git a/public/assets/icons/index.ts b/public/assets/icons/index.ts
index b5ad3325..74cfd82c 100644
--- a/public/assets/icons/index.ts
+++ b/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';
diff --git a/public/assets/images/chat/mainEndChatImg.svg b/public/assets/images/chat/mainEndChatImg.svg
index 5a854ef8..2361639e 100644
--- a/public/assets/images/chat/mainEndChatImg.svg
+++ b/public/assets/images/chat/mainEndChatImg.svg
@@ -18,11 +18,15 @@
-
-
+
+
+
+
+
+
-
+
diff --git a/public/assets/images/mainEndCakeImg.png b/public/assets/images/mainEndCakeImg.png
index 1fb38440..1f2e930b 100644
Binary files a/public/assets/images/mainEndCakeImg.png and b/public/assets/images/mainEndCakeImg.png differ