diff --git a/.changeset/happy-clocks-shave.md b/.changeset/happy-clocks-shave.md new file mode 100644 index 00000000..59aef5e6 --- /dev/null +++ b/.changeset/happy-clocks-shave.md @@ -0,0 +1,5 @@ +--- +"@clab-platforms/member": patch +--- + +refactor(member): 활동 2차 QA 피드백 반영 수정 diff --git a/apps/member/src/api/activity.ts b/apps/member/src/api/activity.ts index dbe6c69c..b4002586 100644 --- a/apps/member/src/api/activity.ts +++ b/apps/member/src/api/activity.ts @@ -274,7 +274,7 @@ export async function postActivityBoard({ activityGroupId: activityGroupId, }; - let fileUrl: string | null = null; + let fileUrl: Array | null = null; if ( body.category === ACTIVITY_BOARD_CATEGORY_STATE.ASSIGNMENT && @@ -289,7 +289,7 @@ export async function postActivityBoard({ files, }); - fileUrl = data[0].fileUrl; + fileUrl = data.map((file) => file.fileUrl); } else if ( body.category === ACTIVITY_BOARD_CATEGORY_STATE.WEEKLY_ACTIVITY && memberId && @@ -301,7 +301,7 @@ export async function postActivityBoard({ files, }); - fileUrl = data[0].fileUrl; + fileUrl = data.map((file) => file.fileUrl); } const { data } = await server.post< @@ -311,7 +311,7 @@ export async function postActivityBoard({ url: createPagination(END_POINT.ACTIVITY_GROUP_BOARD, params), body: { ...body, - fileUrls: fileUrl ? [fileUrl] : undefined, + fileUrls: fileUrl ? fileUrl : undefined, }, }); @@ -328,7 +328,7 @@ export async function patchActivityBoard({ body, files, }: PatchActivityBoardParams) { - let fileUrl: string | null = null; + let fileUrl: Array | null = null; if (groupBoardId === null && groupId && files) { // 파일이 있을 경우 파일 업로드 진행 (주차별 활동 파일) @@ -336,8 +336,7 @@ export async function patchActivityBoard({ groupId: groupId, files, }); - - fileUrl = data[0].fileUrl; + fileUrl = data.map((file) => file.fileUrl); } else if (groupId && groupBoardId && files) { // 파일이 있을 경우 파일 업로드 진행 (과제 파일) const data = await postUploadedFileAssignment({ @@ -345,8 +344,7 @@ export async function patchActivityBoard({ groupBoardId: groupBoardId, files, }); - - fileUrl = data[0].fileUrl; + fileUrl = data.map((file) => file.fileUrl); } const { data } = await server.patch< @@ -358,7 +356,7 @@ export async function patchActivityBoard({ }), body: { ...body, - fileUrls: fileUrl ? [fileUrl] : undefined, + fileUrls: fileUrl ? fileUrl : undefined, }, }); diff --git a/apps/member/src/components/common/File/File.tsx b/apps/member/src/components/common/File/File.tsx index 6a1afc16..78c1d0ff 100644 --- a/apps/member/src/components/common/File/File.tsx +++ b/apps/member/src/components/common/File/File.tsx @@ -1,24 +1,47 @@ import { createURL } from '@clab-platforms/utils'; import { SERVER_BASE_URL } from '@constants/api'; +import useToast from '@hooks/common/useToast'; interface FileProps extends React.PropsWithChildren { href: string; + name: string; } -const File = ({ children, href }: FileProps) => { +const File = ({ href, name }: FileProps) => { + const toast = useToast(); + if (!href.startsWith(SERVER_BASE_URL)) { href = createURL(SERVER_BASE_URL, href); } + const handleClickImgLink = () => { + fetch(href) + .then((res) => res.blob()) + .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); + a.click(); + window.URL.revokeObjectURL(href); + a.remove(); + }) + .catch(() => { + toast({ state: 'error', message: '파일 다운로드에 실패했습니다' }); + }); + }; + return ( - {children} + {name} ); }; diff --git a/apps/member/src/components/common/Notice/Notice.tsx b/apps/member/src/components/common/Notice/Notice.tsx index b186708c..917ff3c8 100644 --- a/apps/member/src/components/common/Notice/Notice.tsx +++ b/apps/member/src/components/common/Notice/Notice.tsx @@ -42,7 +42,7 @@ const Notice = ({ }, )} > - D-{dDay} + {dDay === 0 ? 'D-Day' : `D-${dDay}`} ); } diff --git a/apps/member/src/components/group/ActivityAssignmentEditor/ActivityAssignmentEditor.tsx b/apps/member/src/components/group/ActivityAssignmentEditor/ActivityAssignmentEditor.tsx index 1d83ea53..b17f8762 100644 --- a/apps/member/src/components/group/ActivityAssignmentEditor/ActivityAssignmentEditor.tsx +++ b/apps/member/src/components/group/ActivityAssignmentEditor/ActivityAssignmentEditor.tsx @@ -40,15 +40,17 @@ const ActivityAssignmentEditor = ({ parentId, activityGroupId }: Props) => { }; const handleAddAssignmentClick = () => { const formData = new FormData(); - const file = uploaderRef.current?.files?.[0]; + const files = uploaderRef.current?.files; if (!board.title || !board.content || !board.dueDateTime) return toast({ state: 'error', message: '제목, 내용, 종료 일시는 필수 입력 요소입니다.', }); - if (file) { - formData.append(FORM_DATA_KEY, file); + if (files) { + Array.from(files).forEach((file) => { + formData.append(FORM_DATA_KEY, file); + }); } activityGroupBoardMutate( @@ -60,7 +62,7 @@ const ActivityAssignmentEditor = ({ parentId, activityGroupId }: Props) => { category: ACTIVITY_BOARD_CATEGORY_STATE.ASSIGNMENT, ...board, }, - files: file ? formData : undefined, + files: files?.length ? formData : undefined, }, { onSuccess: () => setBoard(defaultBoard) }, ); @@ -68,17 +70,7 @@ const ActivityAssignmentEditor = ({ parentId, activityGroupId }: Props) => { return (
- -
- -
- +
{ - +
+
); diff --git a/apps/member/src/components/group/ActivityBoardEditModal/ActivityBoardEditModal.tsx b/apps/member/src/components/group/ActivityBoardEditModal/ActivityBoardEditModal.tsx index 06fb28da..ce678cda 100644 --- a/apps/member/src/components/group/ActivityBoardEditModal/ActivityBoardEditModal.tsx +++ b/apps/member/src/components/group/ActivityBoardEditModal/ActivityBoardEditModal.tsx @@ -21,7 +21,7 @@ interface Props { groupId: number; } interface FileUploaderProps { - uploadedFile: ResponseFile | null; + uploadedFile: Array | null; uploaderRef: React.RefObject; handleDeleteFileClick: () => void; } @@ -32,8 +32,8 @@ const ActivityBoardEditModal = ({ prevData, groupId }: Props) => { const [board, setBoard] = useState(prevData); const uploaderRef = useRef(null); - const [uploadedFile, setUploadedFile] = useState( - prevData?.files?.[0] || null, + const [uploadedFile, setUploadedFile] = useState | null>( + prevData?.files || null, ); const { activityGroupBoardPatchMutate, activityGroupBoardPatchIsPending } = useActivityGroupBoardPatchMutation(); @@ -49,7 +49,7 @@ const ActivityBoardEditModal = ({ prevData, groupId }: Props) => { }; const handleEditButtonClick = () => { const formData = new FormData(); - const file = uploaderRef.current?.files?.[0]; + const files = uploaderRef.current?.files; if (!board.title || !board.content) { return toast({ @@ -57,8 +57,10 @@ const ActivityBoardEditModal = ({ prevData, groupId }: Props) => { message: '제목과 내용을 입력해주세요.', }); } - if (file) { - formData.append(FORM_DATA_KEY, file); + if (files?.length) { + Array.from(files).forEach((file) => { + formData.append(FORM_DATA_KEY, file); + }); } activityGroupBoardPatchMutate({ @@ -70,7 +72,7 @@ const ActivityBoardEditModal = ({ prevData, groupId }: Props) => { content: board.content, dueDateTime: board.dueDateTime, }, - files: file ? formData : undefined, + files: files?.length ? formData : undefined, }); closeModal(); }; @@ -134,22 +136,28 @@ const FileUploader = ({ }: FileUploaderProps) => { return ( <> - {uploadedFile && ( -
- - {uploadedFile.originalFileName} - + {uploadedFile?.length ? ( +
+ {uploadedFile?.map((file) => ( + + ))}
+ ) : ( + )} - ); }; diff --git a/apps/member/src/components/group/ActivityDetailSection/ActivityDetailSection.tsx b/apps/member/src/components/group/ActivityDetailSection/ActivityDetailSection.tsx index 431e310a..3f270134 100644 --- a/apps/member/src/components/group/ActivityDetailSection/ActivityDetailSection.tsx +++ b/apps/member/src/components/group/ActivityDetailSection/ActivityDetailSection.tsx @@ -20,14 +20,14 @@ const ActivityDetailSection = ({ data }: ActivityDetailSectionProps) => {
{data.name} -
+

{data.name}

-

{data.content}

+

{data.content}

{data.category} diff --git a/apps/member/src/components/group/ActivityNoticeEditor/ActivityNoticeEditor.tsx b/apps/member/src/components/group/ActivityNoticeEditor/ActivityNoticeEditor.tsx index ad1c1816..c4556011 100644 --- a/apps/member/src/components/group/ActivityNoticeEditor/ActivityNoticeEditor.tsx +++ b/apps/member/src/components/group/ActivityNoticeEditor/ActivityNoticeEditor.tsx @@ -59,17 +59,7 @@ const ActivityNoticeEditor = ({ groupId, data }: ActivityNoticeEditorProps) => { return ( <>
- -
- -
- +
{
미리보기 +
diff --git a/apps/member/src/components/group/ActivityNoticeSection/ActivityNoticeSection.tsx b/apps/member/src/components/group/ActivityNoticeSection/ActivityNoticeSection.tsx index 3db00634..97087fe2 100644 --- a/apps/member/src/components/group/ActivityNoticeSection/ActivityNoticeSection.tsx +++ b/apps/member/src/components/group/ActivityNoticeSection/ActivityNoticeSection.tsx @@ -18,7 +18,7 @@ interface ActivityNoticeSectionProps { interface ActivityNoticeSectionItemProps { className?: string; - onClick: (content: string) => void; + onClick: (content: string, title?: string) => void; data: ActivityBoardType; } @@ -37,9 +37,9 @@ const ActivityNoticeSection = ({ data }: ActivityNoticeSectionProps) => { const latestNotice = sortedNotices[0]; const otherNotices = sortedNotices.slice(1); - const onClickAlert = (content: string) => { + const onClickAlert = (content: string, title?: string) => { openModal({ - title: '📣 공지사항', + title: `📣 ${title}`, content: content, }); }; @@ -94,11 +94,13 @@ ActivityNoticeSection.Item = ({ >
onClick(data.content)} + onClick={() => onClick(data.content, data.title)} >

{data.title}

- {formattedDate(toKoreaISOString(data.updatedAt))} + {formattedDate( + data.updatedAt ? toKoreaISOString(data.updatedAt) : String(dayjs()), + )}

diff --git a/apps/member/src/components/group/ActivityPostEditor/ActivityPostEditor.tsx b/apps/member/src/components/group/ActivityPostEditor/ActivityPostEditor.tsx index b1522195..930ffdef 100644 --- a/apps/member/src/components/group/ActivityPostEditor/ActivityPostEditor.tsx +++ b/apps/member/src/components/group/ActivityPostEditor/ActivityPostEditor.tsx @@ -66,7 +66,7 @@ const ActivityPostEditor = ({ }; const handleAddWeeklyClick = () => { const formData = new FormData(); - const file = uploaderRef.current?.files?.[0]; + const files = uploaderRef.current?.files; if (!post.title || !post.content) { return toast({ @@ -74,8 +74,10 @@ const ActivityPostEditor = ({ message: '제목, 내용은 필수 입력 요소입니다.', }); } - if (file) { - formData.append(FORM_DATA_KEY, file); + if (files?.length) { + Array.from(files).forEach((file) => { + formData.append(FORM_DATA_KEY, file); + }); } const activityBoardItem: SubmitBoardType = { @@ -87,7 +89,7 @@ const ActivityPostEditor = ({ activityGroupId: groupId, memberId: myProfile.id, body: activityBoardItem, - files: file ? formData : undefined, + files: files?.length ? formData : undefined, }, { onSuccess: () => setPost(defaultPost) }, ); @@ -109,15 +111,7 @@ const ActivityPostEditor = ({ return ( <>
- - - +
첨부 파일 - +
미리보기 @@ -155,6 +149,13 @@ const ActivityPostEditor = ({ isParticipant /> + {activities.map((weeklyData, index) => ( @@ -166,7 +167,7 @@ const ActivityPostEditor = ({ color="orange" onClick={() => handleAssignmentEditClick(index)} > - 과제 관리 + {editAssignment[index] ? '과제 닫기' : '과제 열기'} )} - + {(!isAlreadySubmitted || editMode) && ( + + )}
); diff --git a/apps/member/src/components/group/GroupCard/GroupCard.tsx b/apps/member/src/components/group/GroupCard/GroupCard.tsx index a280ffb8..6397c345 100644 --- a/apps/member/src/components/group/GroupCard/GroupCard.tsx +++ b/apps/member/src/components/group/GroupCard/GroupCard.tsx @@ -1,6 +1,6 @@ import { useNavigate } from 'react-router-dom'; -import { Grid } from '@clab-platforms/design-system'; +import { Badge, Grid } from '@clab-platforms/design-system'; import { CertificateSolidOutline, DateRangeOutline, @@ -10,11 +10,14 @@ import { cn } from '@clab-platforms/utils'; import Image from '@components/common/Image/Image'; import { PATH_FINDER } from '@constants/path'; +import { createImageUrl } from '@utils/api'; import { getDateSemester } from '@utils/date'; import type { ActivityGroupItem } from '@type/activity'; -interface GroupCardProps extends ActivityGroupItem {} +interface GroupCardProps extends ActivityGroupItem { + applied?: boolean; +} interface InfoCardProps { title: string; @@ -67,28 +70,32 @@ const GroupCard = ({ participantCount, weeklyActivityCount, createdAt, + applied, }: GroupCardProps) => { const navigate = useNavigate(); - const leaderName = leaders[0].name; - const leaderId = leaders[0].id; + const leaderName = leaders ? leaders[0].name : ''; + const leaderId = leaders ? leaders[0].id : ''; return ( navigate(PATH_FINDER.ACTIVITY_DETAIL(id))} > {name}
-

{name}

-

+

+

{name}

+ {applied && 내가 지원한 활동} +
+

{content}

@@ -107,7 +114,9 @@ const GroupCard = ({
- {`${leaderName}(${leaderId})`} + + {leaders ? `${leaderName}(${leaderId})` : '-'} +
diff --git a/apps/member/src/components/group/GroupCreateSection/GroupCreateSection.tsx b/apps/member/src/components/group/GroupCreateSection/GroupCreateSection.tsx index d1bed515..5e370db4 100644 --- a/apps/member/src/components/group/GroupCreateSection/GroupCreateSection.tsx +++ b/apps/member/src/components/group/GroupCreateSection/GroupCreateSection.tsx @@ -16,11 +16,11 @@ import { PATH } from '@constants/path'; import { SELECT_ACTIVITY_GROUP_CATEGORY_TYPE } from '@constants/select'; import { ACTIVITY_GROUP_CONTENT_MAX_LENGTH, - BOARD_CONTENT_MAX_LENGTH, BOARD_TITLE_MAX_LENGTH, } from '@constants/state'; import useToast from '@hooks/common/useToast'; import { useActivityGroupMutation } from '@hooks/queries'; +import { toKoreaActivityGroupCategory } from '@utils/string'; import type { ActivityGroupCategoryType } from '@type/activity'; @@ -72,7 +72,7 @@ const ComponentWithLabel = ({ const CategoryOptions = Object.entries(SELECT_ACTIVITY_GROUP_CATEGORY_TYPE).map( ([key, value]) => ({ - name: key, + name: toKoreaActivityGroupCategory(key as ActivityGroupCategoryType), value, }), ); @@ -127,13 +127,13 @@ const GroupCreateSection = () => { } else if (content.length > ACTIVITY_GROUP_CONTENT_MAX_LENGTH) { return toast({ state: 'error', - message: '내용은 200자 이내로 작성해주세요.', + message: `내용은 ${ACTIVITY_GROUP_CONTENT_MAX_LENGTH}자 이내로 작성해주세요.`, }); } else if (curriculum) { - if (curriculum.length > BOARD_CONTENT_MAX_LENGTH) { + if (curriculum.length > ACTIVITY_GROUP_CONTENT_MAX_LENGTH) { return toast({ state: 'error', - message: '커리큘럼은 200자 이내로 작성해주세요.', + message: `커리큘럼은 ${ACTIVITY_GROUP_CONTENT_MAX_LENGTH}자 이내로 작성해주세요.`, }); } } @@ -268,11 +268,13 @@ const GroupCreateSection = () => { />

BOARD_CONTENT_MAX_LENGTH, + ' text-red-500': + curriculum && + curriculum.length > ACTIVITY_GROUP_CONTENT_MAX_LENGTH, })} > - {content.length} - {'/' + BOARD_CONTENT_MAX_LENGTH + '자'} + {curriculum ? curriculum.length : '0'} + {'/' + ACTIVITY_GROUP_CONTENT_MAX_LENGTH + '자'}

diff --git a/apps/member/src/components/group/WeeklyActivityCard/WeeklyActivityCard.tsx b/apps/member/src/components/group/WeeklyActivityCard/WeeklyActivityCard.tsx index 10117763..178a82d6 100644 --- a/apps/member/src/components/group/WeeklyActivityCard/WeeklyActivityCard.tsx +++ b/apps/member/src/components/group/WeeklyActivityCard/WeeklyActivityCard.tsx @@ -3,9 +3,11 @@ import { useNavigate } from 'react-router-dom'; import { RegularFileAltOutline } from '@clab-platforms/icon'; import File from '@components/common/File/File'; +import Image from '@components/common/Image/Image'; import { PATH_FINDER } from '@constants/path'; import useToast from '@hooks/common/useToast'; +import { isImageFile } from '@utils/api'; import { ActivityBoardType } from '@type/activity'; import type { ResponseFile } from '@type/api'; @@ -44,7 +46,6 @@ const WeeklyActivityCard = ({ }); } }; - return (
@@ -54,13 +55,29 @@ const WeeklyActivityCard = ({
-
+

{content}

- {files?.map((file) => ( - -

{file.originalFileName}

- - ))} +
+
+ {files?.map((file) => ( +
+ {isImageFile(file.fileUrl) ? ( + {file.originalFileName} + ) : ( + + )} +
+ ))} +
{assignments?.map(({ id: assignmentId, title: assignmentTitle }) => (
{ + return ( +
  • + {label} + {text || '-'} +
    • + ); +}; const ActivityInfoModal = ({ id }: MemberInfoModalProps) => { const { data, isLoading } = useActivityGroup(+id); @@ -18,17 +31,22 @@ const ActivityInfoModal = ({ id }: MemberInfoModalProps) => { data; return ( -
    +
    - {name} + {name}
    - + {category} {name} {subject} - {content} - {curriculum} - {techStack} + + + {techStack || '-'}
    ); diff --git a/apps/member/src/constants/state.ts b/apps/member/src/constants/state.ts index f84a91ea..c56f86cf 100644 --- a/apps/member/src/constants/state.ts +++ b/apps/member/src/constants/state.ts @@ -58,9 +58,9 @@ export const BOARD_TITLE_MAX_LENGTH = 100; export const BOARD_CONTENT_MAX_LENGTH = 5000; /** * 활동 내용의 최대 길이 - * 200자 + * 1000자 */ -export const ACTIVITY_GROUP_CONTENT_MAX_LENGTH = 200; +export const ACTIVITY_GROUP_CONTENT_MAX_LENGTH = 1000; /** * 활동 그룹 멤버 역할을 정의합니다. */ diff --git a/apps/member/src/hooks/queries/activity/useActivityGroupBoardMutation.ts b/apps/member/src/hooks/queries/activity/useActivityGroupBoardMutation.ts index 6a923f46..9e4fc49d 100644 --- a/apps/member/src/hooks/queries/activity/useActivityGroupBoardMutation.ts +++ b/apps/member/src/hooks/queries/activity/useActivityGroupBoardMutation.ts @@ -31,6 +31,7 @@ export function useActivityGroupBoardMutation() { ACTIVITY_QUERY_KEY.BOARD({ id: data.id }), ACTIVITY_QUERY_KEY.BOARD({ id: data.parentId, parent: true }), ACTIVITY_QUERY_KEY.DETAIL(data.groupId), + ACTIVITY_QUERY_KEY.MY_ASSIGNMENT(data.parentId), ]; queryKeys.forEach((queryKey) => { @@ -69,6 +70,7 @@ export function useActivityGroupBoardPatchMutation() { ACTIVITY_QUERY_KEY.BOARD({ id: data.id }), ACTIVITY_QUERY_KEY.BOARD({ id: data.parentId, parent: true }), ACTIVITY_QUERY_KEY.DETAIL(data.groupId), + ACTIVITY_QUERY_KEY.MY_ASSIGNMENT(data.parentId), ]; queryKeys.forEach((queryKey) => { diff --git a/apps/member/src/hooks/queries/activity/useActivityGroupDeleteMutation.ts b/apps/member/src/hooks/queries/activity/useActivityGroupDeleteMutation.ts index 879eae2b..3903e051 100644 --- a/apps/member/src/hooks/queries/activity/useActivityGroupDeleteMutation.ts +++ b/apps/member/src/hooks/queries/activity/useActivityGroupDeleteMutation.ts @@ -2,6 +2,7 @@ import { useMutation, useQueryClient } from '@tanstack/react-query'; import { deleteActivityGroup } from '@api/activity'; import { ACTIVITY_QUERY_KEY } from '@constants/key'; +import { ACTIVITY_STATE } from '@constants/state'; import useToast from '@hooks/common/useToast'; /** @@ -25,9 +26,15 @@ export function useActivityGroupDeleteMutation() { message: '활동 그룹 삭제에 성공했습니다.', }); } + const queryKeys = [ + ACTIVITY_QUERY_KEY.STATUS(ACTIVITY_STATE.END), + ACTIVITY_QUERY_KEY.STATUS(ACTIVITY_STATE.PROGRESSING), + ACTIVITY_QUERY_KEY.STATUS(ACTIVITY_STATE.WAITING), + ACTIVITY_QUERY_KEY.DETAIL(data), + ]; - queryClient.invalidateQueries({ - queryKey: ACTIVITY_QUERY_KEY.DETAIL(data), + queryKeys.forEach((queryKey) => { + queryClient.invalidateQueries({ queryKey }); }); }, }); diff --git a/apps/member/src/hooks/queries/activity/useActivityGroupMemberMutation.ts b/apps/member/src/hooks/queries/activity/useActivityGroupMemberMutation.ts index 82238773..1a9ec48e 100644 --- a/apps/member/src/hooks/queries/activity/useActivityGroupMemberMutation.ts +++ b/apps/member/src/hooks/queries/activity/useActivityGroupMemberMutation.ts @@ -33,6 +33,9 @@ export function useActivityGroupMemberMutation() { queryClient.invalidateQueries({ queryKey: ACTIVITY_QUERY_KEY.APPLICATION(data), }); + queryClient.invalidateQueries({ + queryKey: ACTIVITY_QUERY_KEY.MY_APPLIED(), + }); }, }); diff --git a/apps/member/src/pages/GroupApplyPage/GroupApplyPage.tsx b/apps/member/src/pages/GroupApplyPage/GroupApplyPage.tsx index 80a2a62a..511f1e9d 100644 --- a/apps/member/src/pages/GroupApplyPage/GroupApplyPage.tsx +++ b/apps/member/src/pages/GroupApplyPage/GroupApplyPage.tsx @@ -1,4 +1,4 @@ -import { useEffect, useState } from 'react'; +import { useState } from 'react'; import { useNavigate } from 'react-router-dom'; import { Button } from '@clab-platforms/design-system'; @@ -17,6 +17,7 @@ import { useActivityGroupMember, useActivityGroupMemberMutation, } from '@hooks/queries'; +import { toKoreaActivityGroupCategory } from '@utils/string'; const GroupApplyPage = () => { const navigate = useNavigate(); @@ -25,11 +26,10 @@ const GroupApplyPage = () => { useActivityGroupMemberMutation(); const toast = useToast(); - const [groupID, setGroupID] = useState(0); + const [groupID, setGroupID] = useState('none'); const [reason, setReason] = useState(''); - const options = groupData.items.map((item) => ({ - name: item.name, + name: `${toKoreaActivityGroupCategory(item.category)} / ${item.name} / ${item.leaders[0].name}`, value: item.id, })); @@ -42,7 +42,7 @@ const GroupApplyPage = () => { }; const handleApplyButtonClick = () => { - if (groupID === 0 || reason.length === 0) { + if (typeof groupID !== 'number' || reason.length === 0) { return toast({ state: 'error', message: '필수 입력 사항을 모두 입력해주세요.', @@ -51,7 +51,7 @@ const GroupApplyPage = () => { activityGroupMemberMutate( { - activityGroupId: groupID, + activityGroupId: +groupID, body: { applyReason: reason, }, @@ -60,18 +60,13 @@ const GroupApplyPage = () => { ); }; - useEffect(() => { - if (groupData.items.length && groupData.items[0].id) - setGroupID(groupData.items[0].id); - }, [groupData.items]); - return (