[ merge into dev ] 홈 탭 낫투두 타이틀 미노출 및 텍스트 스타일 변경

홈 탭 낫투두 타이틀 미노출 및 텍스트 스타일 변경
bsideproject · Sep 9, 2023 · 48855cb · 48855cb
2 parents 40b980b + f57e389
commit 48855cb
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 8 deletions.
diff --git a/src/components/banner/MainBanner.tsx b/src/components/banner/MainBanner.tsx
@@ -1,6 +1,7 @@
 import { ReactComponent as Eyes } from '@/assets/img/icn_eyes.svg';
 import Carousel from '@/components/carousel/Carousel';
 import { useState, MouseEventHandler, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
 
 export type NotToDoBannerItemProps = {
     id: number;
@@ -17,16 +18,25 @@ type BannerItemProps = {
 };
 
 export const BannerItem = ({ isOddIndex, info, clickHandler }: BannerItemProps) => {
+    const isGoal = info.description && info.description !== '';
+    const navigation = useNavigate();
+
+    const handleMoveEditPage = () => {
+        return !isGoal ? navigation(`/nottodo/edit/${info.id}`) : null;
+    };
     return (
         <div
             className={`flex flex-col justify-center items-center w-full h-full ${
                 isOddIndex ? 'bg-gray-900' : 'bg-primary'
             }`}
             onClick={clickHandler}
         >
-            <div className={`flex flex-col items-center mt-20  ${isOddIndex ? 'text-gray-0' : 'text-gray-900'}`}>
+            <div
+                className={`flex flex-col items-center mt-20  ${isOddIndex ? 'text-gray-0' : 'text-gray-900'}`}
+                onClick={handleMoveEditPage}
+            >
                 <p className="text-2xl font-bold">{info.title}</p>
-                <p className="text-base">{info.description}</p>
+                <p className="text-base">{isGoal ? info.description : '최종 목표를 입력해주세요'}</p>
             </div>
             <div
                 className={`rounded border-[1px] border-gray-900 relative px-3 py-1 mt-10 mb-[60px] ${

diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx
@@ -90,10 +90,11 @@ export default function HomePage() {
                 .filter((item) => item.progressState === 'IN_PROGRESS')
                 .map((item) => ({
                     id: item.notToDoId,
-                    title: item.goal,
-                    description: item.notToDoText,
-                    totalDate: diffDay(item.endDate, item.startDate),
-                    success: diffDay(new Date(), item.startDate),
+                    title: item.notToDoText,
+                    description: item.goal,
+                    // TODO 성공일자 날짜 계산 해야함
+                    success: diffDay(item.endDate, item.startDate),
+                    totalDate: diffDay(new Date(), item.startDate),
                 })),
         );
     };

diff --git a/src/pages/nottodo/NotTodoCreatePage.tsx b/src/pages/nottodo/NotTodoCreatePage.tsx
@@ -222,7 +222,7 @@ export default function NotTodoCreatePage() {
                         필수
                     </div>
                     <div className="title1 ml-2">언제까지 도전하시나요?</div>
-                    <div className="title2 text-accent ml-auto">총 {diffDay(startDate, endDate)}일</div>
+                    <div className="title2 text-accent ml-auto">총 {diffDay(startDate, endDate) + 1}일</div>
                 </div>
                 <div className="w-full flex items-center">
                     <Input

diff --git a/src/utils/datepicker.ts b/src/utils/datepicker.ts
@@ -137,7 +137,7 @@ export const diffDay = (startDate: Date | string, endDate: Date | string) => {
     const diffInMilliseconds = Math.abs(end - start);
     const diffInDays = Math.ceil(diffInMilliseconds / oneDay);
 
-    return diffInDays + 1;
+    return diffInDays;
 };
 
 export const dateToyyyymmdd = (date: Date, separator: '-' | '/' | '' = '') => {