#149 [Fix] API 수정 (#156)

* Comment: comment api type 설정 (1차 작업) * 🐛Fix: comment 비동기 함수 객체 생성 및 TeamController type 설정+비동기 함수 객체 생성 * chore: 자잘한 수정 (파일명 수정, 주석처리, toast.error -> console.error 수정) * fix: 자잘한 api 코드 수정( 타입 수정 및 함수 수정) * fix: 컴포넌트 생성 * ✨ Feat: webpack proxy 설정, axiosConfig 추가, api 추가 (#151) # Conflicts: # src/api/@types/@asConst.ts * 🐛fix: revise, sections page api connect * 💄 Design: Main 페이지 디자인 수정 (#154) * 💄Design: 자잘한 css 수정 --------- Co-authored-by: 공정민 <[email protected]> Co-authored-by: Yena Kim <[email protected]>
donga-it-club · Apr 16, 2024 · c5797ed · c5797ed
1 parent 79a2c43
commit c5797ed
Show file tree

Hide file tree

Showing 25 changed files with 448 additions and 21,564 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/api/@types/Comment.ts b/src/api/@types/Comment.ts
@@ -1,15 +1,48 @@
-// 임시 API
-
-export interface CommentRequest {
+export interface GetCommentRequest {
   id: string;
 }
 
-export interface CommentResponse {
-  id: string;
-  name: string;
-  text: string;
+export interface GetCommentResponse {
+  code: number;
+  message: string;
+  data: {
+    id: number;
+    content: string;
+  };
+}
+
+//put
+export interface PutCommentRequest {
+  id: number;
 }
 
+//delete
+export interface DeleteCommentRequest {
+  id: number;
+}
+
+export interface DeleteCommentResponse {
+  code: number;
+  message: string;
+  data: object;
+}
+
+//GetAllComment
+export interface AllGetCommentResponse {
+  code: number;
+  message: string;
+  data: CommentData[];
+}
+
+export interface CommentData {
+  id: number;
+  comment: string;
+}
+
+//Post
+
 export interface CommentClient {
-  getComment(): Promise<CommentResponse>;
+  getComment(request: GetCommentRequest): Promise<GetCommentResponse>;
+  delete(request: DeleteCommentRequest): Promise<DeleteCommentResponse>;
+  getAllComment(): Promise<AllGetCommentResponse>;
 }
diff --git a/src/api/@types/Retrospectives.ts b/src/api/@types/Retrospectives.ts
@@ -1,5 +1,28 @@
 import { TRetrospective, TStatus } from './@asConst';
 
+
+//onlyGet
+export interface onlyGetRetrospectiveRequest {
+  retrospectiveId: number;
+}
+
+export interface onlyGetRetrospectiveResponse {
+  code: number;
+  message: string;
+  data: RetrospectiveData;
+}
+
+export interface RetrospectiveData {
+  retrospectiveId: number;
+  title: string;
+  templateId: number;
+  teamId: number;
+  userId: number;
+  description: string;
+  status: keyof TStatus;
+  thumbnail: string;
+}
+
 // get
 export interface GetRetrospectiveRequest {
   page: number;
@@ -75,6 +98,7 @@ export interface RetrospectiveResponse {
 }
 
 export interface RetrospectivesClient {
+  onlyGet(request: onlyGetRetrospectiveRequest): Promise<onlyGetRetrospectiveResponse>;
   create(request: PostRetrospectivesRequest): Promise<PostRetrospectivesResponse>;
   get(request: GetRetrospectiveRequest): Promise<GetRetrospectiveData>;
   delete(request: DeleteRetrospectiveRequest): Promise<void>;

diff --git a/src/api/@types/Section.ts b/src/api/@types/Section.ts
@@ -1,16 +1,23 @@
 //get
 export interface GetSectionRequest {
   retrospectiveId: number;
-  teamId?: number;
+  teamId: number | null;
 }
 
 export interface sectionData {
   sectionId: number;
   username: string;
   content: string;
-  createdDate: string;
   likeCnt: number;
   sectionName: string;
+  createdDate: string;
+  comments: CommentData[];
+}
+
+export interface CommentData {
+  commentId: number;
+  content: string;
+  username: string;
 }
 
 export interface GetSectionResponse {

diff --git a/src/api/@types/TeamController.tsx b/src/api/@types/TeamController.tsx
@@ -0,0 +1,20 @@
+export interface GetTeamMembersRequest {
+  teamId: number;
+  retrospectiveId: number;
+}
+
+export interface GetTeamMembersResponse {
+  code: number;
+  message: string;
+  data: TeamMembersData[];
+}
+
+export interface TeamMembersData {
+  userId: number;
+  username: string;
+  profileImage: string;
+}
+
+export interface TeamControllerClient {
+  get(request: GetTeamMembersRequest): Promise<GetTeamMembersResponse>;
+}
diff --git a/src/api/__mock__/retrospective.ts b/src/api/__mock__/retrospective.ts
@@ -1,5 +1,5 @@
 import { Status } from '../@types/@asConst';
-import { RetrospectiveResponse } from '../@types/Retrospectives';
+import { onlyGetRetrospectiveResponse, RetrospectiveResponse } from '../@types/Retrospectives';
 
 export const MockRetrospective: RetrospectiveResponse = {
   code: 202,
@@ -18,3 +18,18 @@ export const MockRetrospective: RetrospectiveResponse = {
     updatedDate: '2024-04-12T04:20:54.835Z',
   },
 };
+
+export const MockOnlyGetRetrospective: onlyGetRetrospectiveResponse = {
+  code: 202,
+  message: 'string',
+  data: {
+    retrospectiveId: 1,
+    title: 'heeeeee',
+    templateId: 2,
+    teamId: 1,
+    userId: 1,
+    description: 'heeee',
+    status: Status.COMPLETED,
+    thumbnail: '3fa85f64-5717-4562-b3fc-2c963f66afa6',
+  },
+};
diff --git a/src/api/__mock__/section.ts b/src/api/__mock__/section.ts
@@ -11,6 +11,7 @@ export const mockSection: GetSectionResponse = {
       likeCnt: 3,
       sectionName: 'Keep',
       createdDate: '2024-03-31T16:05:20.983Z',
+      comments: [],
     },
     {
       sectionId: 2,
@@ -19,6 +20,7 @@ export const mockSection: GetSectionResponse = {
       likeCnt: 3,
       sectionName: 'Problem',
       createdDate: '2024-03-31T16:05:20.983Z',
+      comments: [],
     },
     {
       sectionId: 3,
@@ -27,6 +29,7 @@ export const mockSection: GetSectionResponse = {
       likeCnt: 3,
       sectionName: 'Keep',
       createdDate: '2024-03-31T16:05:20.983Z',
+      comments: [],
     },
     {
       sectionId: 1,
@@ -35,6 +38,7 @@ export const mockSection: GetSectionResponse = {
       likeCnt: 3,
       sectionName: 'Keep',
       createdDate: '2024-03-31T16:05:20.983Z',
+      comments: [],
     },
     {
       sectionId: 4,
@@ -43,6 +47,7 @@ export const mockSection: GetSectionResponse = {
       likeCnt: 3,
       sectionName: 'Keep',
       createdDate: '2024-03-31T16:05:20.983Z',
+      comments: [],
     },
     {
       sectionId: 3,
@@ -51,6 +56,7 @@ export const mockSection: GetSectionResponse = {
       likeCnt: 3,
       sectionName: 'Try',
       createdDate: '2024-03-31T16:05:20.983Z',
+      comments: [],
     },
     {
       sectionId: 2,
@@ -59,6 +65,7 @@ export const mockSection: GetSectionResponse = {
       likeCnt: 3,
       sectionName: 'Try',
       createdDate: '2024-03-31T16:05:20.983Z',
+      comments: [],
     },
     {
       sectionId: 1,
@@ -67,6 +74,7 @@ export const mockSection: GetSectionResponse = {
       likeCnt: 3,
       sectionName: 'Try',
       createdDate: '2024-03-31T16:05:20.983Z',
+      comments: [],
     },
     {
       sectionId: 1,
@@ -75,6 +83,7 @@ export const mockSection: GetSectionResponse = {
       likeCnt: 3,
       sectionName: 'Action Items',
       createdDate: '2024-03-31T16:05:20.983Z',
+      comments: [],
     },
     {
       sectionId: 1,
@@ -83,6 +92,7 @@ export const mockSection: GetSectionResponse = {
       likeCnt: 3,
       sectionName: 'Action Items',
       createdDate: '2024-03-31T16:05:20.983Z',
+      comments: [],
     },
     {
       sectionId: 4,
@@ -91,6 +101,7 @@ export const mockSection: GetSectionResponse = {
       likeCnt: 3,
       sectionName: 'Keep',
       createdDate: '2024-03-31T16:05:20.983Z',
+      comments: [],
     },
   ],
 };
diff --git a/src/api/client.ts b/src/api/client.ts
@@ -1,4 +1,5 @@
 import axios from 'axios';
+import axiosInstance from './axiosConfig';
 import { logRequest } from './interceptors/request';
 import { logAndProcessError, logResponse, unwrapResponse } from './interceptors/response';
 import { flow } from '@/utils/flow';
@@ -10,12 +11,11 @@ export const mswInstance = axios.create({
   withCredentials: true,
 });
 
-export const axiosInstance = axios.create({
-  // baseURL: 'http://-forward-load-balancer-1892345872.us-west-2.elb.amazonaws.com/',
-  baseURL: 'https://localhost:3000/api',
-  timeout: 4000,
-  withCredentials: true,
-});
+// export const axiosInstance = axios.create({
+//   baseURL: 'https://localhost:3000/api',
+//   timeout: 4000,
+//   withCredentials: true,
+// });
 
 axiosInstance.interceptors.request.use(logRequest);
 axiosInstance.interceptors.response.use(flow([logResponse, unwrapResponse]), logAndProcessError);

diff --git a/src/api/services/Comment.ts b/src/api/services/Comment.ts
@@ -4,7 +4,13 @@ import { mswInstance } from '../client';
 const ROUTE = '/comments';
 
 export const CommentService: CommentClient = {
-  getComment: async () => {
-    return await mswInstance.get(`${ROUTE}/get`);
+  getComment: async id => {
+    return await mswInstance.get(`/api/${ROUTE}/${id}`);
+  },
+  delete: async id => {
+    return await mswInstance.delete(`/api/${ROUTE}/${id}`);
+  },
+  getAllComment: async () => {
+    return await mswInstance.get(`api/${ROUTE}`);
   },
 };
diff --git a/src/api/services/Retrospectives.ts b/src/api/services/Retrospectives.ts
@@ -1,9 +1,13 @@
 import { 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}`);
+  },
   create: async request => {
     return await mswInstance.post(`${ROUTE}/`, request);
   },
@@ -12,10 +16,10 @@ export const RetrospectiveService: RetrospectivesClient = {
       params: request,
     });
   },
-  delete: async id => {
-    return await mswInstance.delete(`${ROUTE}/${id}`);
+  delete: async ({ retrospectiveId }) => {
+    return await mswInstance.delete(`${ROUTE}/${retrospectiveId}`);
   },
-  put: async (retrospectiveId, ...request) => {
-    return await mswInstance.put(`${ROUTE}/${retrospectiveId}`, request);
+  put: async ({ retrospectiveId }, ...request) => {
+    return await axiosInstance.put(`${ROUTE}/${retrospectiveId}`, request);
   },
 };
diff --git a/src/api/services/Section.ts b/src/api/services/Section.ts
@@ -1,11 +1,11 @@
 import { SectionClient } from '../@types/Section';
-import { axiosInstance } from '../client';
+import axiosInstance from '../axiosConfig';
 
 const ROUTE = 'sections';
 
 export const SectionServices: SectionClient = {
   get: async request => {
-    return await axiosInstance.get(`${ROUTE}/`, { params: request });
+    return await axiosInstance.get(`${ROUTE}`, { params: request });
   },
   create: async request => {
     return await axiosInstance.post(`${ROUTE}/`, request);

diff --git a/src/api/services/TeamController.ts b/src/api/services/TeamController.ts
@@ -0,0 +1,10 @@
+import { TeamControllerClient } from '../@types/TeamController';
+import { mswInstance } from '../client';
+
+const ROUTE = 'teams';
+
+export const TeamControllerServices: TeamControllerClient = {
+  get: async ({ teamId, ...request }) => {
+    return await mswInstance.get(`${ROUTE}/${teamId}/users`, { params: request });
+  },
+};
diff --git a/src/components/layout/parts/MainNavBar.tsx b/src/components/layout/parts/MainNavBar.tsx
@@ -1,9 +1,11 @@
 import { PersonCircle } from 'react-bootstrap-icons';
+import { GiHamburgerMenu } from 'react-icons/gi';
 import { useNavigate } from 'react-router-dom';
-import { Button } from '@chakra-ui/react';
+import { Button, Drawer, DrawerContent, DrawerOverlay, useDisclosure } from '@chakra-ui/react';
 import { useRecoilState } from 'recoil';
 import LogoBox from './LogoBox';
 import MenuBar from './MenuBar';
+import PageSideBar from './PageSideBar';
 import UserNickname from '@/components/user/UserNickname';
 import { useAuth } from '@/hooks/useAuth';
 import { userNicknameState } from '@/recoil/user/userAtom';
@@ -12,6 +14,7 @@ import * as S from '@/styles/layout/layout.style';
 const MainNavBar = () => {
   const { isLoggedIn, handleLoginOrLogout } = useAuth();
   const [userNickname, setUserNickname] = useRecoilState(userNicknameState);
+  const { isOpen, onOpen, onClose } = useDisclosure();
 
   const navigate = useNavigate();
 
@@ -27,6 +30,15 @@ const MainNavBar = () => {
     <>
       <div style={{ backgroundColor: 'white', zIndex: 1 }}>
         <S.Container>
+          <Button colorScheme="brand" onClick={onOpen} margin="0 10px">
+            <GiHamburgerMenu />
+          </Button>
+          <Drawer placement="left" onClose={onClose} isOpen={isOpen}>
+            <DrawerOverlay />
+            <DrawerContent>
+              <PageSideBar />
+            </DrawerContent>
+          </Drawer>
           <MenuBar />
           <LogoBox />