#157[Fix] Revise, sections 페이지 api 연결

package.json

@@ -48,6 +48,7 @@
     "framer-motion": "^11.0.12",
     "moment": "^2.30.1",
     "qrcode.react": "^3.1.0",
+    "query-string": "^9.0.0",
     "react": "^18.2.0",
     "react-bootstrap-icons": "^1.11.3",
     "react-datepicker": "^6.4.0",

src/api/@types/Retrospectives.ts

@@ -12,14 +12,14 @@ export interface onlyGetRetrospectiveResponse {
 }
 
 export interface RetrospectiveData {
-  retrospectiveId: number;
-  title: string;
-  templateId: number;
-  teamId: number;
-  userId: number;
   description: string;
+  retrospectiveId: number;
   status: keyof TStatus;
+  teamId: number;
+  templateId: number;
   thumbnail: string;
+  title: string;
+  userId: number;
 }
 
 // get

src/api/@types/Section.ts

@@ -86,6 +86,6 @@ export interface SectionClient {
   get(request: GetSectionRequest): Promise<GetSectionResponse>;
   create(request: CreateSectionRequest): Promise<PostSectionResponse>;
   patch(request: PatchSectionRequest): Promise<PatchSectionResponse>;
-  delete(request: DeleteSectionRequest): Promise<void>;
+  delete(request: DeleteSectionRequest): Promise<DeleteSectionResponse>;
   likePost(request: PostLikesSectionRequest): Promise<PostLikeSectionResponse>;
 }

src/api/__mock__/retrospective.ts

@@ -8,7 +8,7 @@ export const MockRetrospective: RetrospectiveResponse = {
     id: 0,
     title: 'hee',
     userId: 0,
-    teamId: 0,
+    teamId: 1,
     templateId: 1,
     status: Status.NOT_STARTED,
     isBookmarked: true,

src/api/__mock__/teamMembers.ts

@@ -0,0 +1,15 @@
+import { GetTeamMembersResponse, TeamMembersData } from '../@types/TeamController';
+
+export const MockTeamMembers: GetTeamMembersResponse = {
+  code: 1,
+  message: 'no',
+  data: [
+    { userId: 1, username: 'gg', profileImage: 'gggg' },
+    { userId: 1, username: 'ff', profileImage: 'gggg' },
+  ],
+};
+
+export const MockTeamMembersData: TeamMembersData[] = [
+  { userId: 1, username: 'gg', profileImage: 'gggg' },
+  { userId: 1, username: 'ff', profileImage: 'gggg' },
+];

src/api/client.ts

@@ -1,10 +1,12 @@
 import axios from 'axios';
+
 import axiosInstance from './axiosConfig';
 import { logRequest } from './interceptors/request';
 import { unwrapResponse } from './interceptors/response';
 // import { logAndProcessError, logResponse, unwrapResponse } from './interceptors/response';
 // import { flow } from '@/utils/flow';
 
+
 export const mswInstance = axios.create({
   baseURL: '/',
   timeout: 4000,
@@ -18,7 +20,10 @@ export const mswInstance = axios.create({
 //   withCredentials: true,
 // });
 
+
+
 axiosInstance.interceptors.request.use(logRequest);
 // axiosInstance.interceptors.response.use(flow([logResponse, unwrapResponse]), logAndProcessError);
 
+
 mswInstance.interceptors.response.use(unwrapResponse);

src/api/services/Retrospectives.ts

@@ -1,25 +1,60 @@
-import { RetrospectivesClient } from '../@types/Retrospectives';
+import {
+  DeleteRetrospectiveRequest,
+  GetRetrospectiveData,
+  GetRetrospectiveRequest,
+  onlyGetRetrospectiveRequest,
+  onlyGetRetrospectiveResponse,
+  PostRetrospectivesRequest,
+  PostRetrospectivesResponse,
+  RetrospectivesClient,
+} from '../@types/Retrospectives';
 import axiosInstance from '../axiosConfig';
 import { mswInstance } from '../client';
 
 const ROUTE = 'retrospectives';
 
 export const RetrospectiveService: RetrospectivesClient = {
-  onlyGet: async ({ retrospectiveId }) => {
-    return await axiosInstance.get(`${ROUTE}/${retrospectiveId}`);
+  onlyGet: async ({ retrospectiveId }: onlyGetRetrospectiveRequest): Promise<onlyGetRetrospectiveResponse> => {
+    try {
+      const response = await axiosInstance.get<onlyGetRetrospectiveResponse>(`${ROUTE}/${retrospectiveId}`);
+      return response.data;
+    } catch (error) {
+      throw new Error('템플릿 조회 실패');
+    }
   },
-  create: async request => {
-    return await mswInstance.post(`${ROUTE}/`, request);
+  create: async (request: PostRetrospectivesRequest): Promise<PostRetrospectivesResponse> => {
+    try {
+      const response = await axiosInstance.post<PostRetrospectivesResponse>(`${ROUTE}/`, request);
+      return response.data;
+    } catch (error) {
+      throw new Error(error as string);
+    }
   },
-  get: async request => {
-    return await mswInstance.get(`${ROUTE}/`, {
-      params: request,
-    });
+  get: async (request: GetRetrospectiveRequest): Promise<GetRetrospectiveData> => {
+    try {
+      const response = await mswInstance.get(`${ROUTE}/`, {
+        params: request,
+      });
+      return response.data;
+    } catch (error) {
+      throw new Error(error as string);
+    }
   },
-  delete: async ({ retrospectiveId }) => {
-    return await mswInstance.delete(`${ROUTE}/${retrospectiveId}`);
+
+  delete: async ({ retrospectiveId }: DeleteRetrospectiveRequest): Promise<void> => {
+    try {
+      const response = await mswInstance.delete(`${ROUTE}/${retrospectiveId}`);
+      return response.data;
+    } catch (error) {
+      throw new Error(error as string);
+    }
   },
   put: async ({ retrospectiveId }, ...request) => {
-    return await axiosInstance.put(`${ROUTE}/${retrospectiveId}`, request);
+    try {
+      const response = await axiosInstance.put(`${ROUTE}/${retrospectiveId}`, request);
+      return response.data;
+    } catch (error) {
+      throw new Error(error as string);
+    }
   },
 };

src/api/services/Section.ts

@@ -1,22 +1,57 @@
-import { SectionClient } from '../@types/Section';
+import {
+  CreateSectionRequest,
+  DeleteSectionRequest,
+  DeleteSectionResponse,
+  GetSectionRequest,
+  GetSectionResponse,
+  PostLikeSectionResponse,
+  PostLikesSectionRequest,
+  PostSectionResponse,
+  SectionClient,
+} from '../@types/Section';
 import axiosInstance from '../axiosConfig';
 
 const ROUTE = 'sections';
 
 export const SectionServices: SectionClient = {
-  get: async request => {
-    return await axiosInstance.get(`${ROUTE}`, { params: request });
+  get: async (request: GetSectionRequest): Promise<GetSectionResponse> => {
+    try {
+      const response = await axiosInstance.get<GetSectionResponse>(`${ROUTE}`, { params: request });
+      return response.data;
+    } catch (error) {
+      throw new Error(error as string);
+    }
   },
-  create: async request => {
-    return await axiosInstance.post(`${ROUTE}/`, request);
+  create: async (request: CreateSectionRequest): Promise<PostSectionResponse> => {
+    try {
+      const response = await axiosInstance.post<PostSectionResponse>(`${ROUTE}/`, request);
+      return response.data;
+    } catch (error) {
+      throw new Error(error as string);
+    }
   },
   patch: async ({ sectionId, ...request }) => {
-    return await axiosInstance.patch(`${ROUTE}/${sectionId}`, request);
+    try {
+      const response = await axiosInstance.patch(`${ROUTE}/${sectionId}`, request);
+      return response.data;
+    } catch (error) {
+      throw new Error(error as string);
+    }
   },
-  delete: async ({ sectionId }) => {
-    return await axiosInstance.delete(`${ROUTE}/${sectionId}`);
+  delete: async ({ sectionId }: DeleteSectionRequest): Promise<DeleteSectionResponse> => {
+    try {
+      const response = await axiosInstance.delete<DeleteSectionResponse>(`${ROUTE}/${sectionId}`);
+      return response.data;
+    } catch (error) {
+      throw new Error(error as string);
+    }
   },
-  likePost: async ({ sectionId }) => {
-    return await axiosInstance.post(`${ROUTE}/${sectionId}/likes`);
+  likePost: async ({ sectionId }: PostLikesSectionRequest): Promise<PostLikeSectionResponse> => {
+    try {
+      const response = await axiosInstance.post<PostLikeSectionResponse>(`${ROUTE}/${sectionId}/likes`);
+      return response.data;
+    } catch (error) {
+      throw new Error(error as string);
+    }
   },
 };

src/api/services/TeamController.ts

@@ -1,10 +1,15 @@
-import { TeamControllerClient } from '../@types/TeamController';
-import { mswInstance } from '../client';
+import { GetTeamMembersRequest, TeamControllerClient } from '../@types/TeamController';
+import axiosInstance from '../axiosConfig';
 
 const ROUTE = 'teams';
 
 export const TeamControllerServices: TeamControllerClient = {
-  get: async ({ teamId, ...request }) => {
-    return await mswInstance.get(`${ROUTE}/${teamId}/users`, { params: request });
+  get: async ({ teamId, ...request }: GetTeamMembersRequest) => {
+    try {
+      const response = await axiosInstance.get(`${ROUTE}/${teamId}/users`, { params: request });
+      return response.data;
+    } catch (error) {
+      throw new Error(error as string);
+    }
   },
 };

src/components/writeRetro/revise/DeleteRetrospective.tsx

@@ -1,20 +1,31 @@
 import { FC } from 'react';
+import { IoIosInformationCircle } from 'react-icons/io';
 import { useNavigate } from 'react-router-dom';
-import { Button, Popover, PopoverTrigger, PopoverContent, PopoverBody, PopoverFooter, Portal } from '@chakra-ui/react';
-import { MockRetrospective } from '@/api/__mock__/retrospective';
+import {
+  Button,
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverBody,
+  PopoverFooter,
+  Portal,
+  Flex,
+} from '@chakra-ui/react';
 import { RetrospectiveService } from '@/api/services/Retrospectives';
 import { useCustomToast } from '@/hooks/useCustomToast';
+import * as L from '@/styles/writeRetroStyles/Layout.style';
+import * as S from '@/styles/writeRetroStyles/ReviseLayout.style';
 
-// interface Props {
-//   fetch: RetrospectiveData;
-// }
+interface Props {
+  retrospectiveId: number;
+}
 
-const DeleteRetrospective: FC = () => {
+const DeleteRetrospective: FC<Props> = ({ retrospectiveId }) => {
   const toast = useCustomToast();
   const navigate = useNavigate();
   const handleDeleteRetrospective = async () => {
     try {
-      await RetrospectiveService.delete({ retrospectiveId: MockRetrospective.data.id });
+      await RetrospectiveService.delete({ retrospectiveId: retrospectiveId });
       navigate('/retrolist');
       toast.info('회고가 삭제되었습니다.');
     } catch (e) {
@@ -23,23 +34,31 @@ const DeleteRetrospective: FC = () => {
   };
   return (
     <>
-      <Popover>
-        <PopoverTrigger>
-          <Button colorScheme="red" variant="outline">
-            회고 삭제
-          </Button>
-        </PopoverTrigger>
-        <Portal>
-          <PopoverContent>
-            <PopoverBody margin="0 auto">회고를 정말 삭제하시겠습니까?</PopoverBody>
-            <PopoverFooter display="flex" flexDirection="row-reverse" margin="0 auto">
-              <Button colorScheme="red" onClick={handleDeleteRetrospective}>
-                네
-              </Button>
-            </PopoverFooter>
-          </PopoverContent>
-        </Portal>
-      </Popover>
+      <L.reviseTitleText>회고 삭제</L.reviseTitleText>
+      <S.SettingLine />
+      <Flex margin="20px 10px">
+        <IoIosInformationCircle color="#FF4646" size={20} style={{ margin: 'auto 0' }} />
+        <S.SettingDetailText>삭제 후 복구할 수 없습니다.</S.SettingDetailText>
+      </Flex>
+      <Flex flexDirection="row-reverse" margin="30px">
+        <Popover>
+          <PopoverTrigger>
+            <Button colorScheme="red" variant="outline">
+              회고 삭제
+            </Button>
+          </PopoverTrigger>
+          <Portal>
+            <PopoverContent>
+              <PopoverBody margin="0 auto">회고를 정말 삭제하시겠습니까?</PopoverBody>
+              <PopoverFooter display="flex" flexDirection="row-reverse" margin="0 auto">
+                <Button colorScheme="red" onClick={handleDeleteRetrospective}>
+                  네
+                </Button>
+              </PopoverFooter>
+            </PopoverContent>
+          </Portal>
+        </Popover>
+      </Flex>
     </>
   );
 };