[ merge into main ] QA 수정

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] ${

src/pages/home/components/moderationList.tsx

@@ -36,12 +36,10 @@ export const ModerationListItem = ({ recordType, content, date, onClick }: Moder
     const time = dateToAmPmTimeFormat(date);
 
     return (
-        <li className="flex justify-between mb-3" onClick={onClick}>
-            <span className="flex">
-                <span className={`bg-${color} w-1.5 h-6 rounded-md mr-2`} />
-                <span className="text-base">{content}</span>
-            </span>
-            <span className="text-sm leading-6 text-gray-500">{time}</span>
+        <li className="flex mb-3 w-full" onClick={onClick}>
+            <span className={`bg-${color} w-1.5 min-w-[0.375rem] h-6 rounded-md mr-2`} />
+            <span className="block truncate text-base">{content}</span>
+            <span className="ml-auto text-sm leading-6 text-gray-500 whitespace-nowrap">{time}</span>
         </li>
     );
 };

src/pages/home/index.tsx

@@ -18,7 +18,13 @@ import { useNavigate } from 'react-router-dom';
 import { deleteModeration, getModerationList, ModerationType, postModeration, putModeration } from '@/api/moderation';
 
 import { ModerationList } from './components/moderationList';
-import { dateToAmPmTimeFormat, getFirstDateOfMonth, getLastDateOfMonth, isSameDate } from '@/utils/date';
+import {
+    dateToAmPmTimeFormat,
+    getFirstDateOfMonth,
+    getLastDateOfMonth,
+    isSameDate,
+    isTwoHourPassing,
+} from '@/utils/date';
 
 export default function HomePage() {
     const [selectedDate, setSelectedDate] = useState<Date>(new Date());
@@ -90,10 +96,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),
                 })),
         );
     };
@@ -121,7 +128,8 @@ export default function HomePage() {
 
     const handleInputValue = (e: React.ChangeEvent<HTMLInputElement>) => {
         setInputValue(e.target.value);
-        if (e.target.value.length > 4) {
+        if (e.target.value.length >= 4) {
+            console.log('warnnig false');
             setInputWarning(false);
         }
     };
@@ -137,6 +145,7 @@ export default function HomePage() {
     const handleSubmitRecord = async () => {
         if (inputValue.length < 4) {
             setInputWarning(true);
+            return;
         }
         if (isModify && selectedModeration) {
             await putModeration(selectedModeration.moderationId, {
@@ -206,6 +215,11 @@ export default function HomePage() {
         setCurrentDate(date);
     };
 
+    const handleOpenConfirm = () => {
+        setIsOpenConfirm(true);
+        setInputWarning(false);
+    };
+
     if (formattedNotToDoList.length === 0) {
         return <NoNotToDos />;
     }
@@ -237,7 +251,7 @@ export default function HomePage() {
                     </>
                 )}
                 <BottomPopup isOpen={isOpenCreatePopup} setIsOpen={setIsOpenCreatePopup}>
-                    <div className="w-full h-auto flex justify-end mb-6" onClick={() => setIsOpenConfirm(true)}>
+                    <div className="w-full h-auto flex justify-end mb-6" onClick={handleOpenConfirm}>
                         <Plus className="rotate-45" fill="#A2A2A2" />
                     </div>
                     <div className="w-full h-12 rounded-lg flex bg-gray-50 relative">
@@ -310,12 +324,14 @@ export default function HomePage() {
                         >
                             삭제
                         </button>
-                        <button
-                            className="w-full h-[48px] title2 bg-gray-50 rounded-lg text-gray-900"
-                            onClick={handleOpenEdit}
-                        >
-                            수정
-                        </button>
+                        {selectedModeration && !isTwoHourPassing(selectedModeration.regDtm) ? (
+                            <button
+                                className="w-full h-[48px] title2 bg-gray-50 rounded-lg text-gray-900"
+                                onClick={handleOpenEdit}
+                            >
+                                수정
+                            </button>
+                        ) : null}
                     </div>
                 </BottomPopup>
                 <ConfirmPopup

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

src/utils/date.ts

@@ -29,3 +29,14 @@ export const parsingDotDate = (date: Date | string) => {
 
     return `${year}.${month}.${day}`;
 };
+
+export const isTwoHourPassing = (date: string) => {
+    const newDate = new Date(date).getTime();
+    if (isNaN(newDate)) {
+        throw new Error('Invalid date string');
+    }
+    const currentTime = new Date().getTime();
+    const twoHoursInMilliseconds = 2 * 60 * 60 * 1000;
+
+    return currentTime - newDate >= twoHoursInMilliseconds;
+};

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: '-' | '/' | '' = '') => {