🐛Fix: comment API 연결

donga-it-club · Apr 20, 2024 · 1e3597f · 1e3597f
1 parent 8057bea
commit 1e3597f
Show file tree

Hide file tree

Showing 11 changed files with 273 additions and 106 deletions.
diff --git 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<GetCommentResponse>;
+  post(request: PostCommentRequest): Promise<PostCommentResponse>;
   delete(request: DeleteCommentRequest): Promise<DeleteCommentResponse>;
-  getAllComment(): Promise<AllGetCommentResponse>;
+  put(request: PutCommentRequest): Promise<PutCommentResponse>;
 }
diff --git 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<PostRetrospectivesResponse>;
   get(request: GetRetrospectiveRequest): Promise<GetRetrospectiveData>;
   delete(request: DeleteRetrospectiveRequest): Promise<void>;
-  put(request: PutRetrospectiveRequest): Promise<RetrospectiveResponse>;
+  putTeam(request: PutTeamRetrospectiveRequest): Promise<RetrospectiveResponse>;
+  putPersonal(request: PutPersonalRetrospectiveRequest): Promise<RetrospectiveResponse>;
   patch(request: PatchRetrospectiveRequest): Promise<PatchRetrospectiveResponse>;
 }
diff --git 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<PostCommentResponse> => {
+    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
@@ -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
@@ -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<Props> = ({ image, setImage }) => {
+  const [preview, setPreview] = useState<string | null>(null);
+  const [_, setImageUUID] = useState<string | null>(null); // 상태를 활용할 수 있도록 수정
+
   const inputRef = useRef<HTMLInputElement>(null);
   const handleUploadButtonClick: MouseEventHandler<HTMLButtonElement> = () => {
     inputRef.current?.click();
   };
 
   const handleImageChange: ChangeEventHandler<HTMLInputElement> = 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<HTMLButtonElement> = () => {
-    setImage('');
+    setPreview(null);
+    setImageUUID(null);
+    setImage(null, '');
   };
 
   return (
     <>
-      {image ? (
-        <Image src={image} maxWidth={400} margin="20px auto" h="auto" aspectRatio="1/1" objectFit="contain" />
-      ) : (
-        <Image src="/logo.svg" maxWidth={400} margin="20px auto" h="auto" aspectRatio="1/1" objectFit="contain" />
-      )}
+      <Image src={preview ?? image} maxWidth={400} margin="20px auto" h="auto" aspectRatio="1/1" objectFit="contain" />
 
       <div style={{ margin: '0 auto' }}>
         <Button colorScheme="brand" variant="outline" margin="0 30px" onClick={handleUploadButtonClick}>

diff --git a/src/components/writeRetro/revise/ReviseSetting.tsx b/src/components/writeRetro/revise/ReviseSetting.tsx
@@ -74,17 +74,30 @@ const ReviseSetting: FC<Props> = ({ retro, status, setStatus }) => {
 
   const handlePutRetrospective = async () => {
     try {
-      const data = await RetrospectiveService.put({
-        retrospectiveId: 102,
-        title: title,
-        teamId: teamId,
-        description: description,
-        thumbnail: image,
-        status: 'COMPLETED',
-      });
-      console.log('put data', data);
-      navigate('/retrolist');
-      toast.info('회고 수정이 정상 처리되었습니다.');
+      if (teamId) {
+        const data = await RetrospectiveService.putTeam({
+          retrospectiveId: 102,
+          title: title ?? retro.title,
+          teamId: teamId,
+          description: description ?? retro.description,
+          thumbnail: image ?? retro.thumbnail,
+          status: 'COMPLETED',
+        });
+        console.log('put data', data);
+        navigate('/retrolist');
+        toast.info('회고 수정이 정상 처리되었습니다.');
+      } else {
+        const data = await RetrospectiveService.putPersonal({
+          retrospectiveId: 102,
+          title: title ?? retro.title,
+          description: description ?? retro.description,
+          thumbnail: image ?? retro.thumbnail,
+          status: 'COMPLETED',
+        });
+        console.log('put data', data);
+        navigate('/retrolist');
+        toast.info('회고 수정이 정상 처리되었습니다.');
+      }
     } catch (e) {
       toast.error(e);
     }
@@ -131,7 +144,12 @@ const ReviseSetting: FC<Props> = ({ retro, status, setStatus }) => {
 
   return (
     <S.SettingContainer>
-      <RetroImageUploader image={image} setImage={setImage} />
+      <RetroImageUploader
+        image={image}
+        setImage={(file, imageUUID) => {
+          setImage(imageUUID);
+        }}
+      />
       {/* 회고명 */}
       <Flex flexDirection="column">
         <L.reviseTitleText>회고명 </L.reviseTitleText>
@@ -157,7 +175,7 @@ const ReviseSetting: FC<Props> = ({ retro, status, setStatus }) => {
           <L.reviseTitleText>회고 템플릿 유형 </L.reviseTitleText>
           <S.NoteChangeText>변경 불가</S.NoteChangeText>
         </Flex>
-        <S.NotTextInput>{templateName && templateName[0].name}</S.NotTextInput>
+        <S.NotTextInput>{templateName && templateName[0].name === 'Keep' ? 'KPT' : 'KUDOS'}</S.NotTextInput>
 
         {/* 회고리더 */}
         <Flex margin="10px 0">

diff --git a/src/components/writeRetro/task/ReviseCommentModal.tsx b/src/components/writeRetro/task/ReviseCommentModal.tsx
@@ -0,0 +1,53 @@
+import { ChangeEvent, FC, useState } from 'react';
+import { Button } from '@chakra-ui/react';
+import { CommentData } from '@/api/@types/Section';
+import { CommentService } from '@/api/services/Comment';
+import * as S from '@/styles/writeRetroStyles/Layout.style';
+
+interface Props {
+  comment: CommentData;
+}
+
+const ReviseCommentModal: FC<Props> = ({ comment }) => {
+  // Input 높이 자동 조절
+  const [value, setValue] = useState('');
+  const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
+    setValue(e.target.value);
+    e.target.style.height = 'auto';
+    e.target.style.height = `${e.target.scrollHeight}px`;
+  };
+
+  const ChangeContent = async () => {
+    try {
+      const data = await CommentService.put({ commentId: comment.commentId, commentContent: value });
+      console.log(data);
+    } catch (e) {
+      console.error(e);
+    }
+  };
+  return (
+    <>
+      <S.ReviseModalStyle>
+        <S.ReviseModalLine>
+          <S.ReviseModalTitle>수정</S.ReviseModalTitle>
+        </S.ReviseModalLine>
+        <S.ReviseModalInput
+          value={value}
+          onChange={handleChange}
+          placeholder={comment.content}
+          rows={1}
+        ></S.ReviseModalInput>
+
+        <S.ReviseModalButtonBox>
+          {/* <S.ReviseModalButton>삭제</S.ReviseModalButton> */}
+
+          <Button colorScheme="brand" marginRight={10} onClick={ChangeContent}>
+            확인
+          </Button>
+        </S.ReviseModalButtonBox>
+      </S.ReviseModalStyle>
+    </>
+  );
+};
+
+export default ReviseCommentModal;
diff --git a/src/components/writeRetro/task/TeamTask.tsx b/src/components/writeRetro/task/TeamTask.tsx
@@ -123,7 +123,7 @@ const TeamTask: FC<Props> = ({ section }) => {
               <S.SubTaskIcon onClick={handleMessaged}>
                 {messaged ? <MdMessage size="20px" color="#111B47" /> : <MdMessage size="20px" color="#DADEE5" />}
               </S.SubTaskIcon>
-              <S.SubTaskCount>0</S.SubTaskCount>
+              <S.SubTaskCount>{section.comments.length}</S.SubTaskCount>
             </S.SubTaskStyle>
             {/* DaysLeft */}
             <S.SubTaskStyle>