diff --git a/src/components/dashboard/Card.tsx b/src/components/dashboard/Card.tsx index 32dd5b9..89c67aa 100644 --- a/src/components/dashboard/Card.tsx +++ b/src/components/dashboard/Card.tsx @@ -1,6 +1,7 @@ import Image from 'next/image'; import { Card } from '@/src/types/card'; +import formatDateTime from '@/src/util/formatDateTime'; import ColorTagChip from '../ui/Chips/ColorTagChip'; import DefaultProfileImage from '../ui/DefaultProfileImage'; @@ -48,14 +49,24 @@ export default function Card({ cardData }: CardDataProps) { className='sm:size-[14px] lg:size-[18px] ' />
- {dueDate} + {formatDateTime(dueDate)}
- - + {assignee.profileImageUrl ? ( +
+ {assignee.nickname} +
+ ) : ( + + )} diff --git a/src/components/dashboard/CardList.tsx b/src/components/dashboard/CardList.tsx index a4d054f..d24cdc0 100644 --- a/src/components/dashboard/CardList.tsx +++ b/src/components/dashboard/CardList.tsx @@ -9,6 +9,7 @@ import { useModal } from '@/src/contexts/ModalProvider'; import { Card as CardType } from '@/src/types/card'; import { Column } from '@/src/types/dashboard'; +import CardDetailModal from '../ui/Modal/CardDetailModal'; import TodoModal from '../ui/Modal/TodoModal'; import Card from './Card'; interface CardListProps { @@ -91,6 +92,17 @@ export default function CardList({ ); }; + const handleCardDetailModal = (cardId: number) => { + openModal( + closeModal(modalId)} + />, + modalId, + ); + }; + useEffect(() => { void fetchData(); }, []); @@ -143,8 +155,12 @@ export default function CardList({ className='w-full py-2' onClick={handleCreateCard} /> - {data.cards.map((cardData, index) => ( - ))} diff --git a/src/components/ui/Chips/DotNameTagChip.tsx b/src/components/ui/Chips/DotNameTagChip.tsx index 6b5b58c..a4491cb 100644 --- a/src/components/ui/Chips/DotNameTagChip.tsx +++ b/src/components/ui/Chips/DotNameTagChip.tsx @@ -12,9 +12,11 @@ export default function DotNameTagChip({ alt='보라색 점 아이콘' width={2} height={2} - className='size-1.5' + className='size-1.5 sm:hidden' /> -
{children}
+
+ {children} +
); } diff --git a/src/components/ui/Modal/CardDetails.tsx b/src/components/ui/Modal/CardDetailModal.tsx similarity index 75% rename from src/components/ui/Modal/CardDetails.tsx rename to src/components/ui/Modal/CardDetailModal.tsx index dbad212..221fd3e 100644 --- a/src/components/ui/Modal/CardDetails.tsx +++ b/src/components/ui/Modal/CardDetailModal.tsx @@ -2,6 +2,7 @@ import Image from 'next/image'; import React, { useEffect, useState } from 'react'; import { useGetCommentList } from '@/src/apis/card/useGetCommentList'; +import { useModal } from '@/src/contexts/ModalProvider'; import { useGetCardDetail } from '@/src/hooks/Card/useGetCardDetail'; import { useGetColumnList } from '@/src/hooks/dashboard/useGetColumnList'; import { Card } from '@/src/types/card'; @@ -11,27 +12,37 @@ import ColorTagChip from '../Chips/ColorTagChip'; import DotNameTagChip from '../Chips/DotNameTagChip'; import DefaultProfileImage from '../DefaultProfileImage'; import ModalTextarea from '../ModalInput/ModalTextarea'; +import TodoModal from './TodoModal'; interface CardDetailsProps { + boardid: string | string[] | undefined; cardId: number; + onClose: () => void; } -const CardDetails: React.FC = ({ cardId }) => { +const CardDetailModal: React.FC = ({ + boardid, + cardId, + onClose, +}) => { const [cardData, setCardData] = useState(null); const [comment, setComment] = useState(''); const [isMenuOpen, setIsMenuOpen] = useState(false); + const { openModal, closeModal } = useModal(); + const modalId = crypto.randomUUID(); + // const { commentListInfo, execute: executeGetComment } = useGetCommentList( // 99, // cardId, // ); const { commentListInfo } = useGetCommentList(99, cardId); - const { data } = useGetColumnList(); - const currentColumnTitle = data?.find( + const { data: columnData } = useGetColumnList(); + const currentColumnTitle = columnData?.find( (item) => item.id === cardData?.columnId, )?.title; - // const { execute: executePostComment } = usePostComment(); + // const { execute: executePostComment } = usePostComment(); useEffect(() => { const fetchData = async () => { try { @@ -52,18 +63,47 @@ const CardDetails: React.FC = ({ cardId }) => { setIsMenuOpen(!isMenuOpen); }; - const handleClose = () => {}; + const handleEditCard = () => { + openModal( + closeModal(modalId)} + mode='수정' + postData={{ + assigneeUserId: 0, + dashboardId: Number(boardid), + columnId: cardData.columnId, + title: '', + description: '', + dueDate: '', + tags: [], + imageUrl: '', + }} + getData={{ + assigneeUserId: cardData.assignee.id, + dashboardId: Number(boardid), + columnId: cardData.columnId, + title: cardData.title, + description: cardData.description, + dueDate: cardData.dueDate, + tags: cardData.tags, + imageUrl: cardData.imageUrl, + }} + />, + modalId, + ); + }; const handlePostComment = () => { if (comment) { // executePostComment(comment, cardId, cardData?.columnId); // console.log('!', comment, cardId, cardData?.columnId); } + alert(comment); }; return ( -
-
+
+

{cardData.title}

@@ -76,12 +116,15 @@ const CardDetails: React.FC = ({ cardId }) => { src='/icons/close.svg' fill={true} alt='menu' - onClick={handleClose} + onClick={onClose} /> {isMenuOpen && (
-
-
+
-
+
{currentColumnTitle}
-
+
{cardData.tags.map((tag, index) => ( {tag} ))} @@ -106,14 +149,16 @@ const CardDetails: React.FC = ({ cardId }) => {
{cardData.description}
-
- {cardData.title} -
+ {cardData.imageUrl && ( +
+ {cardData.title} +
+ )}
{commentListInfo && (
@@ -204,4 +249,4 @@ const CardDetails: React.FC = ({ cardId }) => { ); }; -export default CardDetails; +export default CardDetailModal; diff --git a/src/components/ui/Modal/TodoModal.tsx b/src/components/ui/Modal/TodoModal.tsx index 42621a4..42b30ca 100644 --- a/src/components/ui/Modal/TodoModal.tsx +++ b/src/components/ui/Modal/TodoModal.tsx @@ -13,7 +13,8 @@ interface TodoModalProps { onClose: () => void; mode: string; postData: PostData; - onCreated: (message: string) => void; + getData?: GetData; + onCreated?: (message: string) => void; } interface PostData { @@ -27,10 +28,22 @@ interface PostData { imageUrl: string | File; } +interface GetData { + assigneeUserId: number; + dashboardId: number; + columnId: number; + title: string; + description: string; + dueDate: string; + tags: string[]; + imageUrl: string | File; +} + const TodoModal: React.FC = ({ onClose, mode, postData, + getData, onCreated, }) => { const [formData, setFormData] = useState({ @@ -123,45 +136,67 @@ const TodoModal: React.FC = ({
{mode === '생성' && ( - - )} - - {/* mode가 '수정'일 때도 보이도록 */} - {mode === '수정' && ( -
- + <> -
+ + + + + + + + + )} - - - - - - - + {/* mode가 '수정'일 때도 보이도록 */} + {mode === '수정' && ( + <> +
+ + +
+ + + + + + + + + )}
diff --git a/src/components/ui/ModalInput/ModalDropdown.tsx b/src/components/ui/ModalInput/ModalDropdown.tsx index 871614e..e38217c 100644 --- a/src/components/ui/ModalInput/ModalDropdown.tsx +++ b/src/components/ui/ModalInput/ModalDropdown.tsx @@ -80,7 +80,6 @@ export default function ModalDropdown({ }: ModalDropdownProps) { const [open, setOpen] = useState(false); const [options, setOptions] = useState(data); - const [selectedOption, setSelectedOption] = useState( data.find((item) => item.id === currentId), ); @@ -93,15 +92,18 @@ export default function ModalDropdown({ setOptions(data); }, [data]); + useEffect(() => { + setSelectedOption(data.find((item) => item.id === currentId)); + }, [options]); + const handleClose = () => { setOpen(false); }; // 담당자 이름 검색 기능 const handleInputChange = (event: ChangeEvent) => { - const filteredData = data.filter( - (datum) => - 'nickname' in datum && datum?.nickname?.includes(event.target.value), + const filteredData = data.filter((datum) => + datum?.nickname?.includes(event.target.value), ); setOptions([...filteredData]); }; @@ -158,7 +160,6 @@ export default function ModalDropdown({ /> )}
- {label === '담당자' ? ( 입력 diff --git a/src/components/ui/ModalInput/inputClassNames.ts b/src/components/ui/ModalInput/inputClassNames.ts index f3d67f7..506285a 100644 --- a/src/components/ui/ModalInput/inputClassNames.ts +++ b/src/components/ui/ModalInput/inputClassNames.ts @@ -11,6 +11,7 @@ export const inputClassNames = { type: { dropdown: 'h-12 w-[217px]', input: 'h-12 w-[450px]', - textarea: 'min-h-[110px] w-[450px] sm:w-[287px] sm:min-h-[70px]', + textarea: + 'min-h-[110px] w-[450px] md:w-[420px] sm:w-[287px] sm:min-h-[70px]', }, }; diff --git a/src/components/ui/ModalWrapper.tsx b/src/components/ui/ModalWrapper.tsx index 6633eed..19dd74d 100644 --- a/src/components/ui/ModalWrapper.tsx +++ b/src/components/ui/ModalWrapper.tsx @@ -40,7 +40,7 @@ function ModalWrapper({ children, id, onRemove }: Props) { }, [id]); return ( - + {children} );