Merge pull request #133 from codeit-sprint-part3-6team/#99_페이지_할-일-수정

#99 페이지 할 일 수정

Author: twtwkim

public/ic/ic_grayCheck.svg

@@ -2,7 +2,7 @@ import { TextField } from '@mui/material';
 import { DateTimePicker, LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 import ko from 'date-fns/locale/ko';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { styled } from '@mui/system';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 import format from 'date-fns/format';
@@ -70,18 +70,24 @@ const StyledTextField = styled(TextField)(({ theme }) => ({
 
 interface DeadlineInputProps {
   onDateChange: (date: string) => void;
+  initialDate: string | null;
 }
 
 export default function DeadlineInput({
   onDateChange,
+  initialDate,
 }: DeadlineInputProps): JSX.Element {
   const [selectedDate, setSelectedDate] = useState<Date | null>(null);
 
+  useEffect(() => {
+    if (initialDate) {
+      setSelectedDate(new Date(initialDate));
+    }
+  }, [initialDate]);
+
   const handleChange = (newValue: Date | null): void => {
     setSelectedDate(newValue);
-    const formattedDate = selectedDate
-      ? format(selectedDate, 'yyyy-MM-dd HH:mm')
-      : '';
+    const formattedDate = newValue ? format(newValue, 'yyyy-MM-dd HH:mm') : '';
     onDateChange(formattedDate);
   };
 

src/components/common/input/info-input/DeadlineInput.tsx

@@ -6,8 +6,9 @@ import KebabIcon from 'public/ic/ic_kebab.svg';
 import getCardDetail from '@/lib/dashboard/getCardDetail';
 import { Card, GetCardsResponse } from '@/type/card';
 import CardImage from '@/components/dashboard/card/CardImage';
-import { useSelector } from 'react-redux';
-import { RootState } from '@/redux/store';
+import { useSelector, useDispatch } from 'react-redux';
+import { RootState, AppDispatch } from '@/redux/store';
+import { setCardInfo } from '@/redux/cardSlice';
 import deleteCard from '@/lib/dashboard/deleteCard';
 import AuthorSection from './AuthorSection';
 import ChipSection from './ChipSection';
@@ -19,6 +20,7 @@ interface DetailCardModalProps {
   columnTitle: string;
   closeModal: () => void;
   setColumnData: React.Dispatch<React.SetStateAction<GetCardsResponse>>;
+  openModifyModal: () => void;
 }
 
 function DetailCardModal({
@@ -27,11 +29,13 @@ function DetailCardModal({
   columnTitle,
   closeModal,
   setColumnData,
+  openModifyModal,
 }: DetailCardModalProps) {
   const {
     user: { id },
   } = useSelector((state: RootState) => state.userInfo);
   const [card, setCard] = useState<Card | null>(null);
+  const dispatch = useDispatch<AppDispatch>();
 
   // 카드 삭제 함수
   const handleCardDelete = async () => {
@@ -49,8 +53,9 @@ function DetailCardModal({
 
   const handleMenuClick = async (value: string) => {
     closeModal();
-    if (value === 'edit') alert('수정하기 모달 오픈');
-    else if (value === 'delete') {
+    if (value === 'edit') {
+      openModifyModal();
+    } else if (value === 'delete') {
       await handleCardDelete();
     }
   };
@@ -59,6 +64,7 @@ function DetailCardModal({
     try {
       const cardDetail = await getCardDetail({ cardId });
       setCard(cardDetail);
+      dispatch(setCardInfo(cardDetail));
     } catch (error) {
       console.error('데이터 요청 실패:', error);
     }

src/components/common/modal/detail-cards/DetailCardModal.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import styles from '@/components/dashboard/card/Card.module.css';
 import Chip from '@/components/common/chip/Chip';
 import CardImage from '@/components/dashboard/card/CardImage';
@@ -7,6 +8,7 @@ import useModal from '@/hooks/useModal';
 import OverlayContainer from '@/components/common/modal/overlay-container/OverlayContainer';
 import DetailCardModal from '@/components/common/modal/detail-cards/DetailCardModal';
 import UserProfile from '@/components/common/userprofile/UserProfile';
+import ModifyCard from '@/components/product/dashboard/modify-card/ModifyCard';
 import { GetCardsResponse } from '@/type/card';
 
 interface CardProps {
@@ -18,7 +20,9 @@ interface CardProps {
   nickname: string;
   profileImage: string | null;
   columnTitle: string;
+  columnId: number;
   setColumnData: React.Dispatch<React.SetStateAction<GetCardsResponse>>;
+  onUpdate: () => void;
 }
 
 function Card({
@@ -30,10 +34,17 @@ function Card({
   nickname,
   profileImage,
   columnTitle,
+  columnId,
   setColumnData,
+  onUpdate,
 }: CardProps) {
   const { isOpen, openModal, closeModal } = useModal();
   const fomattedDueDate = formatDate(dueDate);
+  const [isModifyModalOpen, setIsModifyModalOpen] = useState(false); // 할 일 수정 모달 관련
+
+  const handleCloseModifyModal = () => {
+    setIsModifyModalOpen(false);
+  };
 
   return (
     <>
@@ -79,6 +90,17 @@ function Card({
             columnTitle={columnTitle}
             closeModal={closeModal}
             setColumnData={setColumnData}
+            openModifyModal={() => setIsModifyModalOpen(true)}
+          />
+        </OverlayContainer>
+      )}
+      {isModifyModalOpen && (
+        <OverlayContainer>
+          <ModifyCard
+            closeModal={handleCloseModifyModal}
+            columnTitle={columnTitle}
+            columnId={columnId}
+            onUpdate={onUpdate}
           />
         </OverlayContainer>
       )}

src/components/dashboard/card/Card.tsx

@@ -11,7 +11,7 @@ import useModal from '@/hooks/useModal';
 import deleteColumns from '@/lib/dashboard/deleteColumns';
 import { Column as ColumnType } from '@/type/column';
 import DeleteCardsModal from '@/components/common/modal/delete-cards/DeleteCardsModal';
-import CreateCard from '@/components/product/dashboard/card/CreateCard';
+import CreateCard from '@/components/product/dashboard/create-card/CreateCard';
 
 interface ColumnProp {
   columnId: number;
@@ -85,7 +85,7 @@ function Column({
   const handleObserver = useCallback(
     ([entry]) => {
       if (entry.isIntersecting && columnData.cursorId)
-        fetchCards(columnData.cursorId);
+        fetchCards({ cursor: columnData.cursorId });
     },
     [fetchCards, columnData.cursorId],
   );
@@ -132,7 +132,11 @@ function Column({
               nickname={nickname}
               profileImage={profileImageUrl}
               columnTitle={columnTitle}
+              columnId={columnId}
               setColumnData={setColumnData}
+              onUpdate={() =>
+                fetchCards({ size: columnData.totalCount + 1, reset: true })
+              }
             />
           ),
         )}
@@ -173,7 +177,9 @@ function Column({
           onClose={() => {
             setModal(false);
           }}
-          onUpdate={() => fetchCards(null, columnData.totalCount + 1, true)}
+          onUpdate={() =>
+            fetchCards({ size: columnData.totalCount + 1, reset: true })
+          }
         />
       )}
     </div>

src/components/dashboard/column/Column.tsx

@@ -78,3 +78,12 @@
 .option:hover {
   background-color: var(--gray-background);
 }
+
+.calculate {
+  display: flex;
+  gap: 5px;
+}
+
+.space {
+  width: 22px;
+}

…ashboard/card/AssigneeSection.module.css …d/create-card/AssigneeSection.module.csssrc/components/product/dashboard/card/AssigneeSection.module.css renamed to src/components/product/dashboard/create-card/AssigneeSection.module.css src/components/product/dashboard/card/AssigneeSection.module.css renamed to src/components/product/dashboard/create-card/AssigneeSection.module.css

@@ -1,6 +1,7 @@
 import React from 'react';
 import UserProfile from '@/components/common/userprofile/UserProfile';
 import ToggleButton from 'public/ic/ic_dropdown.svg';
+import Check from 'public/ic/ic_grayCheck.svg';
 import styles from './AssigneeSection.module.css';
 
 interface AssigneeSectionProps {
@@ -67,12 +68,19 @@ export default function AssigneeSection({
                 }
               }}
             >
-              <UserProfile
-                type="todo-create"
-                nickname={member.nickname}
-                profileImageUrl={member.profileImageUrl}
-                onlyImg={false}
-              />
+              <div className={styles.calculate}>
+                {member.nickname === selectedMemberNickname ? (
+                  <Check width={22} height={22} />
+                ) : (
+                  <div className={styles.space}></div>
+                )}
+                <UserProfile
+                  type="todo-create"
+                  nickname={member.nickname}
+                  profileImageUrl={member.profileImageUrl}
+                  onlyImg={false}
+                />
+              </div>
             </div>
           ))}
         </div>