refactor(member): 활동 2차 QA 피드백 반영 (#233)

kgu-clab · Sep 13, 2024 · f0e322a · f0e322a
1 parent 1925c3a
commit f0e322a
Show file tree

Hide file tree

Showing 39 changed files with 786 additions and 325 deletions.
diff --git a/.changeset/hungry-sloths-press.md b/.changeset/hungry-sloths-press.md
@@ -0,0 +1,7 @@
+---
+"@clab-platforms/auth": patch
+"@clab-platforms/member": patch
+"@clab-platforms/design-system": patch
+---
+
+refactor(member): 활동 2차 QA 피드백 반영
diff --git a/apps/auth/src/utils/service.ts b/apps/auth/src/utils/service.ts
@@ -12,7 +12,7 @@ const SERVICE_MAP: Record<ServiceCode, ServiceMap> = {
   play: { url: 'https://play.clab.page/auth', name: '플레이' },
   members: { url: 'https://members.clab.page/auth', name: '멤버스' },
   test: {
-    url: 'https://members.test.clab.page/auth',
+    url: 'https://members.test.clab.page/test',
     name: '스테이징 멤버스',
   },
 } as const;

diff --git a/apps/member/src/api/activity.ts b/apps/member/src/api/activity.ts
@@ -27,12 +27,14 @@ import { server } from './server';
 import {
   postFilesActivityPhotos,
   postUploadedFileAssignment,
+  postUploadedFileNotice,
+  postUploadedFileSubmit,
   postUploadedFileWeekly,
 } from './uploadedFile';
 
 export interface PatchActivityGroupMemberApplyParams {
   activityGroupId: number;
-  memberId: string;
+  memberId: Array<string>;
   status: string;
 }
 
@@ -278,21 +280,19 @@ export async function postActivityBoard({
 
   if (
     body.category === ACTIVITY_BOARD_CATEGORY_STATE.ASSIGNMENT &&
-    parentId &&
-    memberId &&
+    activityGroupId &&
     files
   ) {
     // 파일이 있을 경우 파일 업로드 진행 (과제 파일)
     const data = await postUploadedFileAssignment({
       groupId: activityGroupId,
-      groupBoardId: parentId,
       files,
     });
 
     fileUrl = data.map((file) => file.fileUrl);
   } else if (
     body.category === ACTIVITY_BOARD_CATEGORY_STATE.WEEKLY_ACTIVITY &&
-    memberId &&
+    activityGroupId &&
     files
   ) {
     // 파일이 있을 경우 파일 업로드 진행 (주차별 파일)
@@ -301,6 +301,32 @@ export async function postActivityBoard({
       files,
     });
 
+    fileUrl = data.map((file) => file.fileUrl);
+  } else if (
+    body.category === ACTIVITY_BOARD_CATEGORY_STATE.NOTICE &&
+    activityGroupId &&
+    files
+  ) {
+    // 파일이 있을 경우 파일 업로드 진행 (공지사항 파일)
+    const data = await postUploadedFileNotice({
+      groupId: activityGroupId,
+      files,
+    });
+
+    fileUrl = data.map((file) => file.fileUrl);
+  } else if (
+    body.category === ACTIVITY_BOARD_CATEGORY_STATE.SUBMIT &&
+    activityGroupId &&
+    parentId &&
+    files
+  ) {
+    // 파일이 있을 경우 파일 업로드 진행 (과제 제출물 파일)
+    const data = await postUploadedFileSubmit({
+      groupId: activityGroupId,
+      groupBoardId: parentId,
+      files,
+    });
+
     fileUrl = data.map((file) => file.fileUrl);
   }
 
@@ -330,20 +356,55 @@ export async function patchActivityBoard({
 }: PatchActivityBoardParams) {
   let fileUrl: Array<string> | null = null;
 
-  if (groupBoardId === null && groupId && files) {
-    // 파일이 있을 경우 파일 업로드 진행 (주차별 활동 파일)
+  if (
+    body.category === ACTIVITY_BOARD_CATEGORY_STATE.ASSIGNMENT &&
+    groupId &&
+    files
+  ) {
+    // 파일이 있을 경우 파일 업로드 진행 (과제 파일)
+    const data = await postUploadedFileAssignment({
+      groupId,
+      files,
+    });
+
+    fileUrl = data.map((file) => file.fileUrl);
+  } else if (
+    body.category === ACTIVITY_BOARD_CATEGORY_STATE.WEEKLY_ACTIVITY &&
+    groupId &&
+    files
+  ) {
+    // 파일이 있을 경우 파일 업로드 진행 (주차별 파일)
     const data = await postUploadedFileWeekly({
-      groupId: groupId,
+      groupId,
       files,
     });
+
     fileUrl = data.map((file) => file.fileUrl);
-  } else if (groupId && groupBoardId && files) {
-    // 파일이 있을 경우 파일 업로드 진행 (과제 파일)
-    const data = await postUploadedFileAssignment({
-      groupId: groupId,
-      groupBoardId: groupBoardId,
+  } else if (
+    body.category === ACTIVITY_BOARD_CATEGORY_STATE.NOTICE &&
+    groupId &&
+    files
+  ) {
+    // 파일이 있을 경우 파일 업로드 진행 (공지사항 파일)
+    const data = await postUploadedFileNotice({
+      groupId,
+      files,
+    });
+
+    fileUrl = data.map((file) => file.fileUrl);
+  } else if (
+    body.category === ACTIVITY_BOARD_CATEGORY_STATE.SUBMIT &&
+    groupId &&
+    groupBoardId &&
+    files
+  ) {
+    // 파일이 있을 경우 파일 업로드 진행 (과제 제출물 파일)
+    const data = await postUploadedFileSubmit({
+      groupId,
+      groupBoardId,
       files,
     });
+
     fileUrl = data.map((file) => file.fileUrl);
   }
 

diff --git a/apps/member/src/api/uploadedFile.ts b/apps/member/src/api/uploadedFile.ts
@@ -59,25 +59,6 @@ export async function postUploadedFileMembershipFee(multipartFile: FormData) {
 
   return data;
 }
-/**
- * 활동 그룹 과제 업로드
- */
-export async function postUploadedFileAssignment({
-  groupId,
-  groupBoardId,
-  files,
-}: PostUploadedFileAssignmentParams) {
-  const url = createURL(
-    END_POINT.UPLOADEDFILE_ACTIVITY_ASSIGNMENT(groupId, groupBoardId),
-    STORAGE_PERIOD(3), // 활동 과제 파일은 3년간 보관
-  );
-  const { data } = await server.post<FormData, BaseResponse<ResponseFile[]>>({
-    url,
-    body: files,
-  });
-
-  return data;
-}
 /**
  * 멤버 프로필 사진 업로드
  */
@@ -109,6 +90,42 @@ export async function postUploadedFileWeekly({
 }: PostUploadedFileWeeklyParams) {
   const url = createURL(
     END_POINT.UPLOADEDFILE_ACTIVITY_WEEKLY(groupId),
+    STORAGE_PERIOD(3), // 활동 주차별활동 파일은 3년간 보관
+  );
+  const { data } = await server.post<FormData, BaseResponse<ResponseFile[]>>({
+    url,
+    body: files,
+  });
+
+  return data;
+}
+/**
+ * 활동 그룹 공지사항 파일 업로드
+ */
+export async function postUploadedFileNotice({
+  groupId,
+  files,
+}: PostUploadedFileWeeklyParams) {
+  const url = createURL(
+    END_POINT.UPLOADEDFILE_ACTIVITY_NOTICE(groupId),
+    STORAGE_PERIOD(3), // 활동 공지사항 파일은 3년간 보관
+  );
+  const { data } = await server.post<FormData, BaseResponse<ResponseFile[]>>({
+    url,
+    body: files,
+  });
+
+  return data;
+}
+/**
+ * 활동 그룹 과제 파일 업로드
+ */
+export async function postUploadedFileAssignment({
+  groupId,
+  files,
+}: PostUploadedFileWeeklyParams) {
+  const url = createURL(
+    END_POINT.UPLOADEDFILE_ACTIVITY_ASSIGNMENT(groupId),
     STORAGE_PERIOD(3), // 활동 과제 파일은 3년간 보관
   );
   const { data } = await server.post<FormData, BaseResponse<ResponseFile[]>>({
@@ -118,3 +135,22 @@ export async function postUploadedFileWeekly({
 
   return data;
 }
+/**
+ * 활동 그룹 과제 제출물 업로드
+ */
+export async function postUploadedFileSubmit({
+  groupId,
+  groupBoardId,
+  files,
+}: PostUploadedFileAssignmentParams) {
+  const url = createURL(
+    END_POINT.UPLOADEDFILE_ACTIVITY_SUBMIT(groupId, groupBoardId),
+    STORAGE_PERIOD(3), // 활동 과제 제출물 파일은 3년간 보관
+  );
+  const { data } = await server.post<FormData, BaseResponse<ResponseFile[]>>({
+    url,
+    body: files,
+  });
+
+  return data;
+}
diff --git a/...icationInfoModal/ApplicationInfoModal.tsx → ...ationListSection/ApplicationInfoModal.tsx b/...icationInfoModal/ApplicationInfoModal.tsx → ...ationListSection/ApplicationInfoModal.tsx
@@ -6,7 +6,7 @@ interface ApplicationInfoModalProps {
   applicationInfo: ApplicationMemberType;
 }
 
-const ApplicationInfoModal = ({
+export const ApplicationInfoModal = ({
   applicationInfo,
 }: ApplicationInfoModalProps) => {
   const {
@@ -39,5 +39,3 @@ const ApplicationInfoModal = ({
     </DetailsList>
   );
 };
-
-export default ApplicationInfoModal;
diff --git a/apps/member/src/components/application/ApplicationListSection/ApplicationListSection.tsx b/apps/member/src/components/application/ApplicationListSection/ApplicationListSection.tsx
@@ -6,7 +6,6 @@ import { Badge, Button, Table } from '@clab-platforms/design-system';
 import Pagination from '@components/common/Pagination/Pagination';
 import { Section } from '@components/common/Section';
 import Select from '@components/common/Select/Select';
-import ApplicationInfoModal from '@components/modal/ApplicationInfoModal/ApplicationInfoModal';
 
 import { TABLE_HEAD } from '@constants/head';
 import useModal from '@hooks/common/useModal';
@@ -19,7 +18,9 @@ import {
   useApplicationPassMutation,
 } from '@hooks/queries/application';
 
-import { ApplicationMemberType } from '@type/application';
+import type { ApplicationMemberType } from '@type/application';
+
+import { ApplicationInfoModal } from './ApplicationInfoModal';
 
 interface RecruitmentItem {
   id: number;

diff --git a/apps/member/src/components/common/File/File.tsx b/apps/member/src/components/common/File/File.tsx
@@ -21,6 +21,7 @@ const File = ({ href, name }: FileProps) => {
       .then((blob) => {
         const href = window.URL.createObjectURL(new Blob([blob]));
         const a = document.createElement('a');
+
         a.href = href;
         a.download = name;
         document.body.appendChild(a);

diff --git a/apps/member/src/components/common/TextCounting/TextCounting.tsx b/apps/member/src/components/common/TextCounting/TextCounting.tsx
@@ -0,0 +1,22 @@
+import { cn } from '@clab-platforms/utils';
+
+interface MaxLengthCounterProps {
+  maxLength: number;
+  text?: string;
+  children?: string;
+}
+
+const TextCounting = ({ maxLength, text, children }: MaxLengthCounterProps) => {
+  return (
+    <p
+      className={cn('mt-2 text-right text-xs', children, {
+        'text-red-500': text && text.length > maxLength,
+      })}
+    >
+      <span>{text ? text.length : '0'}</span>
+      <span>{'/' + maxLength + '자'}</span>
+    </p>
+  );
+};
+
+export default TextCounting;
diff --git a/apps/member/src/components/group/ActivityConfigTableSection/ActivityConfigTableSection.tsx b/apps/member/src/components/group/ActivityConfigTableSection/ActivityConfigTableSection.tsx
@@ -1,15 +1,14 @@
 import { Button, Table } from '@clab-platforms/design-system';
 
 import { Section } from '@components/common/Section';
+import { ActivityBoardEditModal } from '@components/modal';
 
 import { TABLE_HEAD } from '@constants/head';
 import useModal from '@hooks/common/useModal';
 import { useActivityGroupBoardDeleteMutation } from '@hooks/queries';
 import { formattedDate, toKoreaISOString } from '@utils/date';
 
-import { ActivityBoardType } from '@type/activity';
-
-import ActivityBoardEditModal from '../ActivityBoardEditModal/ActivityBoardEditModal';
+import type { ActivityBoardType } from '@type/activity';
 
 interface ActivityConfigTableSectionProps {
   tableList: ActivityBoardType[];

diff --git a/apps/member/src/components/group/ActivityNoticeEditor/ActivityNoticeEditor.tsx b/apps/member/src/components/group/ActivityNoticeEditor/ActivityNoticeEditor.tsx
@@ -1,11 +1,12 @@
-import { useState } from 'react';
+import { useRef, useState } from 'react';
 
 import { Button, Input } from '@clab-platforms/design-system';
 
 import Hr from '@components/common/Hr/Hr';
 import Section from '@components/common/Section/Section';
 import Textarea from '@components/common/Textarea/Textarea';
 
+import { FORM_DATA_KEY } from '@constants/api';
 import useToast from '@hooks/common/useToast';
 import { useActivityGroupBoardMutation } from '@hooks/queries';
 
@@ -32,6 +33,7 @@ const defaultNotice: ActivityBoardType = {
 const ActivityNoticeEditor = ({ groupId, data }: ActivityNoticeEditorProps) => {
   const toast = useToast();
   const [notice, setNotice] = useState<ActivityBoardType>(defaultNotice);
+  const uploaderRef = useRef<HTMLInputElement>(null);
   const { activityGroupBoardMutate, activityGroupBoardIsPending } =
     useActivityGroupBoardMutation();
 
@@ -41,16 +43,27 @@ const ActivityNoticeEditor = ({ groupId, data }: ActivityNoticeEditorProps) => {
     const { name, value } = e.target;
     setNotice((prev) => ({ ...prev, [name]: value }));
   };
+
   const handleAddNoticeButtonClick = () => {
+    const formData = new FormData();
+    const files = uploaderRef.current?.files;
+
     if (!notice.title || !notice.content)
       return toast({
         state: 'error',
         message: '제목, 내용은 필수 입력 요소입니다.',
       });
+    if (files) {
+      Array.from(files).forEach((file) => {
+        formData.append(FORM_DATA_KEY, file);
+      });
+    }
+
     activityGroupBoardMutate(
       {
         activityGroupId: groupId,
         body: notice,
+        files: files?.length ? formData : undefined,
       },
       { onSuccess: () => setNotice(defaultNotice) },
     );
@@ -79,6 +92,7 @@ const ActivityNoticeEditor = ({ groupId, data }: ActivityNoticeEditorProps) => {
               value={notice.content}
               onChange={handleNoticeChange}
             />
+            <input ref={uploaderRef} id="uploader" type="file" multiple />
           </div>
           <Hr>미리보기</Hr>
           <ActivityNoticeSection data={[notice, ...data]} />