From 1e3597fab5a573d0e6c1b1cb2084f76b803dc5e4 Mon Sep 17 00:00:00 2001 From: heejung0413 Date: Sat, 20 Apr 2024 21:08:43 +0900 Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9BFix:=20comment=20API=20=EC=97=B0?= =?UTF-8?q?=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/@types/Comment.ts | 52 ++++---- src/api/@types/Retrospectives.ts | 15 ++- src/api/services/Comment.ts | 31 +++-- src/api/services/Retrospectives.ts | 11 +- .../writeRetro/revise/RetroImageUploader.tsx | 36 ++++-- .../writeRetro/revise/ReviseSetting.tsx | 44 +++++-- .../writeRetro/task/ReviseCommentModal.tsx | 53 ++++++++ src/components/writeRetro/task/TeamTask.tsx | 2 +- .../task/taskMessage/TeamTaskMessage.tsx | 122 +++++++++++++----- src/pages/RevisePage.tsx | 5 +- src/styles/writeRetroStyles/Layout.style.ts | 8 +- 11 files changed, 273 insertions(+), 106 deletions(-) create mode 100644 src/components/writeRetro/task/ReviseCommentModal.tsx diff --git a/src/api/@types/Comment.ts b/src/api/@types/Comment.ts index 5e12045..2a46852 100644 --- a/src/api/@types/Comment.ts +++ b/src/api/@types/Comment.ts @@ -1,48 +1,50 @@ -export interface GetCommentRequest { - id: string; +//post +export interface PostCommentRequest { + sectionId: number; + commentContent: string; } -export interface GetCommentResponse { +export interface PostCommentResponse { code: number; message: string; - data: { - id: number; - content: string; - }; + data: PostCommentData; } -//put -export interface PutCommentRequest { +export interface PostCommentData { id: number; + userId: number; + sectionId: number; + commentContent: string; } -//delete -export interface DeleteCommentRequest { - id: number; +//put +export interface PutCommentRequest { + commentId: number; + commentContent: string; } -export interface DeleteCommentResponse { +export interface PutCommentResponse { code: number; message: string; - data: object; + data: PutCommentData; } -//GetAllComment -export interface AllGetCommentResponse { - code: number; - message: string; - data: CommentData[]; +export interface PutCommentData { + commentId: number; + content: string; } -export interface CommentData { - id: number; - comment: string; +//delete +export interface DeleteCommentRequest { + commentId: number; } -//Post +export interface DeleteCommentResponse { + code: number; +} export interface CommentClient { - getComment(request: GetCommentRequest): Promise; + post(request: PostCommentRequest): Promise; delete(request: DeleteCommentRequest): Promise; - getAllComment(): Promise; + put(request: PutCommentRequest): Promise; } diff --git a/src/api/@types/Retrospectives.ts b/src/api/@types/Retrospectives.ts index 2d30cf3..d0da201 100644 --- a/src/api/@types/Retrospectives.ts +++ b/src/api/@types/Retrospectives.ts @@ -19,7 +19,7 @@ export interface RetrospectiveData { userId: number; leaderName: string; description: string; - status: keyof TStatus; + status: string; thumbnail: string; } @@ -84,7 +84,7 @@ export interface DeleteRetrospectiveRequest { } //put -export interface PutRetrospectiveRequest { +export interface PutTeamRetrospectiveRequest { retrospectiveId: number; title: string; teamId?: number; @@ -93,6 +93,14 @@ export interface PutRetrospectiveRequest { thumbnail?: string; } +export interface PutPersonalRetrospectiveRequest { + retrospectiveId: number; + title: string; + description: string; + status: keyof TStatus; + thumbnail?: string; +} + export interface RetrospectiveResponse { code: number; message: string; @@ -127,6 +135,7 @@ export interface RetrospectivesClient { create(request: PostRetrospectivesRequest): Promise; get(request: GetRetrospectiveRequest): Promise; delete(request: DeleteRetrospectiveRequest): Promise; - put(request: PutRetrospectiveRequest): Promise; + putTeam(request: PutTeamRetrospectiveRequest): Promise; + putPersonal(request: PutPersonalRetrospectiveRequest): Promise; patch(request: PatchRetrospectiveRequest): Promise; } diff --git a/src/api/services/Comment.ts b/src/api/services/Comment.ts index 055e099..cd0db7f 100644 --- a/src/api/services/Comment.ts +++ b/src/api/services/Comment.ts @@ -1,16 +1,31 @@ -import { CommentClient } from '../@types/Comment'; -import { mswInstance } from '../client'; +import { CommentClient, DeleteCommentRequest, PostCommentRequest, PostCommentResponse } from '../@types/Comment'; +import axiosInstance from '../axiosConfig'; const ROUTE = '/comments'; export const CommentService: CommentClient = { - getComment: async id => { - return await mswInstance.get(`/api/${ROUTE}/${id}`); + post: async (request: PostCommentRequest): Promise => { + try { + const response = await axiosInstance.post(`${ROUTE}`, request); + return response.data; + } catch (error) { + throw new Error(error as string); + } }, - delete: async id => { - return await mswInstance.delete(`/api/${ROUTE}/${id}`); + delete: async ({ commentId }: DeleteCommentRequest) => { + try { + const response = await axiosInstance.delete(`${ROUTE}/${commentId}`); + return response.data; + } catch (error) { + throw new Error(error as string); + } }, - getAllComment: async () => { - return await mswInstance.get(`api/${ROUTE}`); + put: async ({ commentId, ...request }) => { + try { + const response = await axiosInstance.put(`${ROUTE}/${commentId}`, request); + return response.data; + } catch (error) { + throw new Error(error as string); + } }, }; diff --git a/src/api/services/Retrospectives.ts b/src/api/services/Retrospectives.ts index c130d58..0bd58a2 100644 --- a/src/api/services/Retrospectives.ts +++ b/src/api/services/Retrospectives.ts @@ -49,7 +49,16 @@ export const RetrospectiveService: RetrospectivesClient = { } }, - put: async ({ retrospectiveId }, ...request) => { + putTeam: async ({ retrospectiveId, ...request }) => { + try { + const response = await axiosInstance.put(`${ROUTE}/${retrospectiveId}`, request); + return response.data; + } catch (error) { + throw new Error(error as string); + } + }, + + putPersonal: async ({ retrospectiveId, ...request }) => { try { const response = await axiosInstance.put(`${ROUTE}/${retrospectiveId}`, request); return response.data; diff --git a/src/components/writeRetro/revise/RetroImageUploader.tsx b/src/components/writeRetro/revise/RetroImageUploader.tsx index bc4959a..5510765 100644 --- a/src/components/writeRetro/revise/RetroImageUploader.tsx +++ b/src/components/writeRetro/revise/RetroImageUploader.tsx @@ -1,40 +1,48 @@ -import { ChangeEventHandler, FC, MouseEventHandler, useRef } from 'react'; +import { ChangeEventHandler, FC, MouseEventHandler, useRef, useState } from 'react'; import { MdOutlineFileUpload } from 'react-icons/md'; import { Button, Image } from '@chakra-ui/react'; +import { v4 as uuidv4 } from 'uuid'; interface Props { image: string; - setImage: (image: string) => void; + setImage: (image: File | null, uuid: string) => void; } const RetroImageUploader: FC = ({ image, setImage }) => { + const [preview, setPreview] = useState(null); + const [_, setImageUUID] = useState(null); // 상태를 활용할 수 있도록 수정 + const inputRef = useRef(null); const handleUploadButtonClick: MouseEventHandler = () => { inputRef.current?.click(); }; const handleImageChange: ChangeEventHandler = async event => { - const files = event.target.files; - if (!files) return; + const files = event.target.files?.[0]; + if (files) { - const file = files[0]; - const imageUrl = URL.createObjectURL(file); - const imageUrlString: string = imageUrl; - setImage(imageUrlString); + const reader = new FileReader(); + const uuid = uuidv4(); + setImage(files, uuid); + + reader.onloadend = () => { + const result = reader.result as string; + setPreview(result); + setImageUUID(uuid); + }; + reader.readAsDataURL(files); } }; const DeleteImage: MouseEventHandler = () => { - setImage(''); + setPreview(null); + setImageUUID(null); + setImage(null, ''); }; return ( <> - {image ? ( - - ) : ( - - )} +
+ + + + ); +}; + +export default ReviseCommentModal; diff --git a/src/components/writeRetro/task/TeamTask.tsx b/src/components/writeRetro/task/TeamTask.tsx index 29969c7..2f6560d 100644 --- a/src/components/writeRetro/task/TeamTask.tsx +++ b/src/components/writeRetro/task/TeamTask.tsx @@ -123,7 +123,7 @@ const TeamTask: FC = ({ section }) => { {messaged ? : } - 0 + {section.comments.length} {/* DaysLeft */} diff --git a/src/components/writeRetro/task/taskMessage/TeamTaskMessage.tsx b/src/components/writeRetro/task/taskMessage/TeamTaskMessage.tsx index 23b3686..ce2cc0a 100644 --- a/src/components/writeRetro/task/taskMessage/TeamTaskMessage.tsx +++ b/src/components/writeRetro/task/taskMessage/TeamTaskMessage.tsx @@ -1,7 +1,23 @@ import { ChangeEvent, FC, useState } from 'react'; import { CgProfile } from 'react-icons/cg'; -import { Flex, Modal, ModalCloseButton, ModalContent, ModalOverlay, useDisclosure } from '@chakra-ui/react'; +import { FaRegTrashAlt } from 'react-icons/fa'; +import { + Button, + Flex, + Popover, + PopoverArrow, + PopoverBody, + PopoverCloseButton, + PopoverContent, + PopoverHeader, + PopoverTrigger, + Portal, +} from '@chakra-ui/react'; +import ReviseCommentModal from '../ReviseCommentModal'; +import { PostCommentData } from '@/api/@types/Comment'; import { sectionData } from '@/api/@types/Section'; +import { CommentService } from '@/api/services/Comment'; +import { useCustomToast } from '@/hooks/useCustomToast'; import * as S from '@/styles/writeRetroStyles/Layout.style'; interface Props { @@ -9,62 +25,100 @@ interface Props { } const TeamTaskMessage: FC = ({ section }) => { - const { isOpen, onOpen, onClose } = useDisclosure(); const [value, setValue] = useState(''); + const [comment, setComment] = useState(); + const toast = useCustomToast(); const handleChange = (e: ChangeEvent) => { setValue(e.target.value); e.target.style.height = 'auto'; e.target.style.height = `${e.target.scrollHeight}px`; }; + const handlePostComment = async () => { + try { + const response = await CommentService.post({ sectionId: section.sectionId, commentContent: value }); + setComment(response.data); + console.log(comment); + } catch (e) { + toast.error(e); + } + }; + + const handleDeleteComment = async (id: number) => { + try { + await CommentService.delete({ commentId: id }); + } catch (e) { + toast.error(e); + } + }; + return ( <> {/* TaskMessage */} {/* TaskMessageTop */} - 0개의 댓글 + {section.comments.length}개의 댓글 {/* TaskMessages */}
- {section.comments.map(data => ( + {section.comments.map(section => ( {/* TaskMessageTop */} - - - {data.username} + + + + {section.username} + {/* 1일 전 */} -
- + + 삭제 - -
- + + + + + + + 삭제요청 + + + + 선택한 회고 카드를 삭제하시겠습니까? + + + + + + + + + + + + {section.content} + {/* (수정됨) */} + + + + + {/* TaskTextModal */} + + + {/* TaskMessageMain */} - - {data.content} - {/* TeamActionItemsTask */} - - {/* MessageModal */} - - - - - - ))} @@ -73,7 +127,7 @@ const TeamTaskMessage: FC = ({ section }) => { {/* AddMessage */} - 확인 + 확인 diff --git a/src/pages/RevisePage.tsx b/src/pages/RevisePage.tsx index 8edef0a..35d86d6 100644 --- a/src/pages/RevisePage.tsx +++ b/src/pages/RevisePage.tsx @@ -27,7 +27,10 @@ const RetroRevisePage = () => { try { const data = await RetrospectiveService.onlyGet({ retrospectiveId: retrospectiveId }); setRetro(data.data); - setStatus(retro?.status); + console.log(retro); + if (retro) { + setStatus(retro.status.toString); + } } catch (e) { toast.error(e); } diff --git a/src/styles/writeRetroStyles/Layout.style.ts b/src/styles/writeRetroStyles/Layout.style.ts index 9cf5618..311d5ce 100644 --- a/src/styles/writeRetroStyles/Layout.style.ts +++ b/src/styles/writeRetroStyles/Layout.style.ts @@ -177,7 +177,7 @@ export const TaskText = styled.p` vertical-align: top; display: inline-block; margin: 20px 0; - margin-top: 5px; + margin-top: 20px; &:hover { cursor: pointer; } @@ -242,16 +242,12 @@ export const TaskMessageLine = styled.div` export const TaskMessageStyle = styled.div` min-height: 35px; - display: flex; margin-top: 10px; `; export const MessageUserProfile = styled.div``; -export const MessageTopStyle = styled.div` - display: flex; - position: relative; -`; +export const MessageTopStyle = styled.div``; export const MessageUserName = styled.p` font-size: 15px;