Merge pull request #198 from woowacourse-teams/feat/#187

MoimDetail 페이지에서 필요한 api 통신 연결
woowacourse-teams · Aug 2, 2024 · 2dbabed · 2dbabed
2 parents 205b8d2 + 98da1f0
commit 2dbabed
Show file tree

Hide file tree

Showing 38 changed files with 686 additions and 112 deletions.
diff --git a/frontend/src/apis/deletes.ts b/frontend/src/apis/deletes.ts
@@ -0,0 +1,9 @@
+import ApiClient from './apiClient';
+import { checkStatus } from './apiconfig';
+
+export const deleteCancelChamyo = async (moimId: number) => {
+  const response = await ApiClient.deleteWithAuth(`moim/${moimId}/comment`, {
+    moimId,
+  });
+  await checkStatus(response);
+};
diff --git a/frontend/src/apis/endPoints.ts b/frontend/src/apis/endPoints.ts
@@ -6,5 +6,7 @@ const ENDPOINTS = {
   moim: getEndpoint('v1/moim'),
   moims: getEndpoint('v1/moim'),
   auth: getEndpoint('v1/auth'),
+  chamyo: getEndpoint('v1/chamyo'),
+  zzim: getEndpoint('v1/zzim'),
 };
 export default ENDPOINTS;
diff --git a/frontend/src/apis/fetchs.ts b/frontend/src/apis/fetchs.ts
@@ -0,0 +1,35 @@
+import { TempMoimInputInfo } from '@_types/index';
+import ApiClient from './apiClient';
+import { checkStatus } from './apiconfig';
+
+export const fetchCompleteMoin = async (moimId: number) => {
+  const response = await ApiClient.patchWithAuth(`moim/${moimId}/complete`, {
+    moimId,
+  });
+  await checkStatus(response);
+};
+
+export const fetchCancelMoin = async (moimId: number) => {
+  const response = await ApiClient.patchWithAuth(`moim/${moimId}/cancel`, {
+    moimId,
+  });
+  await checkStatus(response);
+};
+
+export const fetchModifyMoin = async (
+  moimId: number,
+  state: TempMoimInputInfo,
+) => {
+  const response = await ApiClient.patchWithAuth(`moim`, {
+    moimId,
+    ...state,
+  });
+  await checkStatus(response);
+};
+
+export const fetchReopenMoin = async (moimId: number) => {
+  const response = await ApiClient.patchWithAuth(`moim/${moimId}/reopen`, {
+    moimId,
+  });
+  await checkStatus(response);
+};
diff --git a/frontend/src/apis/gets.ts b/frontend/src/apis/gets.ts
@@ -1,7 +1,13 @@
 // ./src/apis/gets.ts
-import { MoimInfo } from '@_types/index';
+import { MoimInfo, Participation } from '@_types/index';
 import ApiClient from './apiClient';
-import { GetMoim, GetMoims } from './responseTypes';
+import {
+  GetChamyoAll,
+  GetChamyoMine,
+  GetMoim,
+  GetMoims,
+  GetZzimMine,
+} from './responseTypes';
 import { checkStatus } from './apiconfig';
 
 export const getMoims = async (): Promise<MoimInfo[]> => {
@@ -19,3 +25,31 @@ export const getMoim = async (moimId: number): Promise<MoimInfo> => {
   const json: GetMoim = await response.json();
   return json.data;
 };
+
+export const getChamyoMine = async (
+  moimId: number,
+): Promise<'MOIMER' | 'MOIMEE' | 'NON_MOIMEE'> => {
+  const response = await ApiClient.getWithAuth(`chamyo/mine?moimId=${moimId}`);
+  checkStatus(response);
+
+  const json: GetChamyoMine = await response.json();
+  return json.data.role;
+};
+
+export const getZzimMine = async (moimId: number): Promise<boolean> => {
+  const response = await ApiClient.getWithAuth(`zzim/mine?moimId=${moimId}`);
+  checkStatus(response);
+
+  const json: GetZzimMine = await response.json();
+  return json.data.isZzimed;
+};
+
+export const getChamyoAll = async (
+  moimId: number,
+): Promise<Participation[]> => {
+  const response = await ApiClient.getWithAuth(`chamyo/all?moimId=${moimId}`);
+  checkStatus(response);
+
+  const json: GetChamyoAll = await response.json();
+  return json.data.chamyos;
+};
diff --git a/frontend/src/apis/posts.ts b/frontend/src/apis/posts.ts
@@ -12,10 +12,22 @@ export const postMoim = async (moim: MoimInputInfo): Promise<number> => {
   return json.data;
 };
 
-export const postJoinMoim = async (moimId: number, nickname: string) => {
-  const response = await ApiClient.postWithAuth('moim/join', {
+export const postJoinMoim = async (moimId: number) => {
+  const response = await ApiClient.postWithAuth('chamyo', {
+    moimId,
+  });
+  await checkStatus(response);
+};
+
+export const postChangeZzim = async (moimId: number) => {
+  const response = await ApiClient.postWithAuth('zzim', {
+    moimId,
+  });
+  await checkStatus(response);
+};
+export const postWriteComment = async (moimId: number) => {
+  const response = await ApiClient.postWithAuth(`moim/${moimId}/comment`, {
     moimId,
-    nickname,
   });
   await checkStatus(response);
 };
diff --git a/frontend/src/apis/responseTypes.ts b/frontend/src/apis/responseTypes.ts
@@ -1,4 +1,4 @@
-import { MoimInfo } from '../types';
+import { MoimInfo, Participation } from '../types';
 
 export interface GetMoims {
   data: { moims: MoimInfo[] };
@@ -8,6 +8,24 @@ export interface GetMoim {
   data: MoimInfo;
 }
 
+export interface GetChamyoMine {
+  data: {
+    role: 'MOIMER' | 'MOIMEE' | 'NON_MOIMEE';
+  };
+}
+
+export interface GetChamyoAll {
+  data: {
+    chamyos: Participation[];
+  };
+}
+
+export interface GetZzimMine {
+  data: {
+    isZzimed: boolean;
+  };
+}
+
 export interface PostMoim {
   data: number;
 }
diff --git a/frontend/src/common/theme/colorPalette.ts b/frontend/src/common/theme/colorPalette.ts
@@ -58,7 +58,7 @@ const colorPalette: Colors = {
     300: '#FF9538',
     200: '#FFA557',
     100: '#FFB87A',
-    50: '#FFCB9E',
+    50: '#FFCB9E4D',
   },
   yellow: {
     900: '#CAA802',

diff --git a/frontend/src/components/CommentCard/CommentCard.stories.tsx b/frontend/src/components/CommentCard/CommentCard.stories.tsx
@@ -13,18 +13,18 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   args: {
     comment: {
-      id: 0,
+      commentId: 0,
       nickname: 'nickname',
       content: 'content',
       dateTime: '2023-04-04 14:00',
-      src: '',
+      profile: '',
       child: [
         {
-          id: 0,
+          commentId: 0,
           nickname: 'nickname',
           content: 'content',
           dateTime: '2023-04-04 14:00',
-          src: '',
+          profile: '',
           child: [],
         },
       ],

diff --git a/frontend/src/components/CommentCard/CommentCard.tsx b/frontend/src/components/CommentCard/CommentCard.tsx
@@ -7,35 +7,40 @@ import { HTMLProps } from 'react';
 
 export interface CommentCardProps extends HTMLProps<HTMLDivElement> {
   comment: Comment;
+
+  onWriteClick?: () => void;
 }
 
 export default function CommentCard(props: CommentCardProps) {
   const theme = useTheme();
-  const { comment } = props;
+  const {
+    comment: { profile, nickname, dateTime, content, child },
+    onWriteClick,
+  } = props;
 
   return (
     <div css={S.commentContainer()}>
       <div css={S.commentWrapper()}>
-        <ProfileFrame width={3} height={3} src={comment.src}></ProfileFrame>
+        <ProfileFrame width={3} height={3} src={profile}></ProfileFrame>
         <div css={S.commnetBox()}>
           <div css={S.commnetHeader}>
             <div css={S.commentHeaderLeft}>
-              <div css={theme.typography.small}>{comment.nickname}</div>
-              <div css={S.timestamp({ theme })}>{comment.dateTime}</div>
+              <div css={theme.typography.small}>{nickname}</div>
+              <div css={S.timestamp({ theme })}>{dateTime}</div>
             </div>
             <div css={S.commentHeaderRight({ theme })}>
               <button>수정</button>
               <button>삭제</button>
-              <button>답글쓰기</button>
+              <button onClick={onWriteClick}>답글쓰기</button>
             </div>
           </div>
-          <div>{comment.content}</div>
+          <div>{content}</div>
         </div>
       </div>
-      {comment.child && comment.child.length > 0 && (
+      {child && child.length > 0 && (
         <div css={S.commentChildBox()}>
-          {comment.child.map((childComment) => (
-            <CommentCard key={childComment.id} comment={childComment} />
+          {child.map((childComment) => (
+            <CommentCard key={childComment.commentId} comment={childComment} />
           ))}
         </div>
       )}

diff --git a/frontend/src/components/CommentList/ComentList.tsx b/frontend/src/components/CommentList/ComentList.tsx
diff --git a/frontend/src/components/CommentList/CommentList.stories.tsx b/frontend/src/components/CommentList/CommentList.stories.tsx
@@ -14,40 +14,41 @@ export const Default: Story = {
   args: {
     comments: [
       {
-        id: 0,
+        commentId: 0,
         nickname: 'nickname',
         content: 'content',
         dateTime: '2023-04-04 14:00',
-        src: '',
+        profile: '',
         child: [
           {
-            id: 0,
+            commentId: 0,
             nickname: 'nickname',
             content: 'content',
             dateTime: '2023-04-04 14:00',
-            src: '',
+            profile: '',
             child: [],
           },
         ],
       },
       {
-        id: 3,
+        commentId: 3,
         nickname: 'nickname',
         content: 'content',
         dateTime: '2023-04-04 14:00',
-        src: '',
+        profile: '',
         child: [
           {
-            id: 4,
+            commentId: 4,
             nickname: 'nickname',
             content: 'content',
             dateTime: '2023-04-04 14:00',
-            src: '',
+            profile: '',
             child: [],
           },
         ],
       },
     ],
+    onWriteClick: () => {},
   },
   render: (args) => <CommentList {...args} />,
 };
diff --git a/frontend/src/components/CommentList/CommentList.tsx b/frontend/src/components/CommentList/CommentList.tsx
@@ -5,15 +5,22 @@ import { HTMLProps } from 'react';
 
 interface CommentListProps extends HTMLProps<HTMLDivElement> {
   comments: Comment[];
+  onWriteClick: () => void;
 }
 
 export default function CommentList(props: CommentListProps) {
-  const { comments } = props;
+  const { comments, onWriteClick } = props;
 
   return (
     <div css={S.commentListBox()}>
       {comments.map((comment) => {
-        return <CommentCard key={comment.id} comment={comment} />;
+        return (
+          <CommentCard
+            key={comment.commentId}
+            comment={comment}
+            onWriteClick={onWriteClick}
+          />
+        );
       })}
     </div>
   );

diff --git a/frontend/src/components/Input/MoimInput.tsx b/frontend/src/components/Input/MoimInput.tsx
@@ -7,7 +7,7 @@ export interface LabeledInputProps extends HTMLProps<HTMLInputElement> {
 }
 
 export default function LabeledInput(props: LabeledInputProps) {
-  const { name, title, type, placeholder, required, onChange } = props;
+  const { name, title, type, placeholder, required, onChange, ...args } = props;
 
   return (
     <label htmlFor={title}>
@@ -23,6 +23,7 @@ export default function LabeledInput(props: LabeledInputProps) {
         placeholder={placeholder}
         id={title}
         onChange={onChange}
+        {...args}
       />
     </label>
   );

diff --git a/frontend/src/components/Profile/ProfileCard.stories.tsx b/frontend/src/components/Profile/ProfileCard.stories.tsx
@@ -14,9 +14,9 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {
-    profile: {
+    info: {
       nickname: '치코',
-      src: EmptyProfile,
+      profile: EmptyProfile,
       role: 'moimee',
     },
   },
@@ -25,9 +25,9 @@ export const Default: Story = {
 
 export const WithCustomImage: Story = {
   args: {
-    profile: {
+    info: {
       nickname: '치코',
-      src: Plus,
+      profile: Plus,
       role: 'moimee',
     },
   },
@@ -36,9 +36,9 @@ export const WithCustomImage: Story = {
 
 export const WithErrorHandling: Story = {
   args: {
-    profile: {
+    info: {
       nickname: '치코',
-      src: 'invalid-url.jpg', // 오류를 발생시키기 위한 잘못된 URL
+      profile: 'invalid-url.jpg', // 오류를 발생시키기 위한 잘못된 URL
       role: 'moimee',
     },
   },