From 3a0c87ec40443faed303f7b110fb0df747fb7d24 Mon Sep 17 00:00:00 2001 From: Lee Seo Young Date: Mon, 12 Feb 2024 04:20:36 +0900 Subject: [PATCH 1/4] =?UTF-8?q?feat=20:=20CardDetails.tsx=20=EC=9E=91?= =?UTF-8?q?=EC=84=B1=20=EB=8F=84=EC=A4=91=20=EC=9E=84=EC=8B=9C=20=EC=A0=80?= =?UTF-8?q?=EC=9E=A5=20-=20Get=20=EC=99=84=EB=B9=84=20-=20Style=20?= =?UTF-8?q?=EC=99=84=EB=B9=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/test/index.tsx | 12 +- public/icons/more_vert.svg | 5 + src/components/ui/Modal/CardDetails.tsx | 155 ++++++++++++++++-- .../ui/ModalInput/ModalTextarea.tsx | 8 +- .../ui/ModalInput/inputClassNames.ts | 2 +- src/hooks/Card/useGetCardDetail.ts | 13 ++ src/hooks/Card/useGetComments.ts | 19 +++ src/types/card.ts | 19 +++ 8 files changed, 202 insertions(+), 31 deletions(-) create mode 100644 public/icons/more_vert.svg create mode 100644 src/hooks/Card/useGetCardDetail.ts create mode 100644 src/hooks/Card/useGetComments.ts diff --git a/pages/test/index.tsx b/pages/test/index.tsx index bc0014a..ab6ae1d 100644 --- a/pages/test/index.tsx +++ b/pages/test/index.tsx @@ -1,19 +1,9 @@ import BasicLayout from '@/src/components/layout/BasicLayout'; import CardDetails from '@/src/components/ui/Modal/CardDetails'; -import { useModal } from '@/src/contexts/ModalProvider'; - export default function MyDashboardPage() { - const { openModal, closeModal } = useModal(); - const modalId = crypto.randomUUID(); - const cardId = 2742; - const handleClickOpenModal = () => { - openModal(, modalId); - }; return ( - + ); } diff --git a/public/icons/more_vert.svg b/public/icons/more_vert.svg new file mode 100644 index 0000000..1ddb0b1 --- /dev/null +++ b/public/icons/more_vert.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/components/ui/Modal/CardDetails.tsx b/src/components/ui/Modal/CardDetails.tsx index 3e2d3e1..75ec854 100644 --- a/src/components/ui/Modal/CardDetails.tsx +++ b/src/components/ui/Modal/CardDetails.tsx @@ -1,7 +1,13 @@ +import Image from 'next/image'; import React, { useEffect, useState } from 'react'; -import { useGetCardDetail } from '@/src/hooks/Card/useGetCardList'; +import { useGetCardDetail } from '@/src/hooks/Card/useGetCardDetail'; +import { useGetCommentList } from '@/src/hooks/Card/useGetComments'; import { Card } from '@/src/types/card'; +import formatDateTime from '@/src/util/formatDateTime'; + +import DefaultProfileImage from '../DefaultProfileImage'; +import ModalTextarea from '../ModalInput/ModalTextarea'; interface CardDetailsProps { cardId: number; @@ -9,6 +15,13 @@ interface CardDetailsProps { const CardDetails: React.FC = ({ cardId }) => { const [cardData, setCardData] = useState(null); + const [comment, setComment] = useState(''); + const [isMenuOpen, setIsMenuOpen] = useState(false); + const { commentListInfo, execute } = useGetCommentList(99, cardId); + + commentListInfo?.comments.map((comment, index) => + console.log(index, ':', comment), + ); useEffect(() => { const fetchData = async () => { @@ -27,23 +40,135 @@ const CardDetails: React.FC = ({ cardId }) => { } // 여기에서 cardData를 사용하여 컴포넌트를 렌더링할 수 있습니다. + const handleMenu = () => { + setIsMenuOpen(!isMenuOpen); + }; return ( -
-
버튼 케밥 absolute
-
close 버튼
- 제목 들어갈자리 -
- 담당자 assignee 이름 프로필 이미지 마감일 duedate 자리 sm일때는 flex로 - 변환 해야하므로 위치 설정{' '} +
+
+

+ {cardData.title} +

+
+ + + {isMenuOpen && ( +
+ + +
+ )} +
+
+
+
+
+
+
{cardData.columnId}
+
+
{cardData.tags}
+
+
+ {cardData.description} +
+
+ {cardData.title} +
+
+ {commentListInfo && ( +
+ + {commentListInfo?.comments.map((comment, index) => ( +
+
+ {comment.author.profileImageUrl ? ( + {comment.author.nickname} + ) : ( + + )} +
+
+

+ {comment.author.nickname} + + {formatDateTime(comment.createdAt)} + +

+

+ {comment.content} +

+
+ + +
+
+
+ ))} +
+ )} +
+
+
+

+ 담당자 +

+
+
+ {cardData.assignee.profileImageUrl ? ( + {cardData.assignee.nickname} + ) : ( + + )} +
+

+ {cardData.assignee.nickname} +

+
+
+
+

+ 마감일 +

+

+ {formatDateTime(cardData.dueDate)} +

+
+
-
태그 들어갈자리
- -
내용들어갈자리
-
이미지 들어갈 자리
- 댓글 -
텍스트 에어리어 들어갈 자리 그안에 입력 버튼
-
댓글에 대한 정보 profileimage 이름 날짜 내용 수정 삭제 버튼
); }; diff --git a/src/components/ui/ModalInput/ModalTextarea.tsx b/src/components/ui/ModalInput/ModalTextarea.tsx index 3403a3f..ab41969 100644 --- a/src/components/ui/ModalInput/ModalTextarea.tsx +++ b/src/components/ui/ModalInput/ModalTextarea.tsx @@ -5,7 +5,7 @@ import { inputClassNames } from './inputClassNames'; interface ModalTextareaProps { label: string; - required: boolean; + required?: boolean; isButton: boolean; onTextChange: (value: string) => void; onButtonClick?: () => void; // 새로 추가한 함수 @@ -13,7 +13,7 @@ interface ModalTextareaProps { export default function ModalTextarea({ label, - required, + required = false, isButton, onTextChange, onButtonClick, // 새로 추가한 함수 @@ -35,7 +35,7 @@ export default function ModalTextarea({ return (
-