Merge pull request #283 from WeGo-Together/somang-feat/group-details

[Feat] 참가자 추방 기능 적용

Author: HopeFullee

src/api/service/group-service/index.ts

@@ -1,5 +1,6 @@
 import { apiV2 } from '@/api/core';
 import {
+  AttendGroupPayload,
   CreateGroupPayload,
   CreateGroupResponse,
   GetGroupDetailsResponse,
@@ -70,7 +71,11 @@ export const groupServiceRemote = () => ({
     return apiV2.get<GetGroupDetailsResponse>(`/groups/${params.groupId}`);
   },
 
-  attendGroup: (params: GroupIdParams) => {
+  attendGroup: (params: GroupIdParams, payload?: AttendGroupPayload) => {
+    // 승인제 모임 신청 시 message 포함해서 API 요청
+    if (payload?.message) {
+      return apiV2.post<GetGroupDetailsResponse>(`/groups/${params.groupId}/attend`, payload);
+    }
     return apiV2.post<GetGroupDetailsResponse>(`/groups/${params.groupId}/attend`);
   },
 

src/app/group/[groupId]/page.tsx

@@ -28,7 +28,11 @@ const GroupDetailPage = ({ params }: Props) => {
     <div>
       <GroupBannerImages images={images} />
       <GroupDescriptions descriptions={data} />
-      <GroupMembers members={joinedMembers} />
+      <GroupMembers
+        groupId={groupId}
+        isHost={myMembership?.role === 'HOST'}
+        members={joinedMembers}
+      />
       <GroupButtons
         conditions={{
           isHost: myMembership?.role === 'HOST',

src/components/pages/create-group/fields/policy-field/index.tsx

@@ -0,0 +1,43 @@
+import { AnyFieldApi } from '@tanstack/react-form';
+
+import { Label } from '@/components/ui';
+
+interface Props {
+  field: AnyFieldApi;
+}
+
+export const GroupPolicyField = ({ field }: Props) => {
+  return (
+    <div className='mt-6 space-y-4'>
+      <Label htmlFor='create-group-policy'>참여 방식</Label>
+      {POLICY_OPTIONS.map(({ type, name, description }) => {
+        return (
+          <div key={name} className='flex items-start gap-2'>
+            <input
+              id={name}
+              className='size-6'
+              checked={field.state.value === type}
+              name='create-group-policy'
+              type='radio'
+              value={type}
+              onChange={(e) => field.handleChange(e.target.value)}
+            />
+            <Label htmlFor={name}>
+              <p>{name}</p>
+              <p className='text-gray-500'>{description}</p>
+            </Label>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+const POLICY_OPTIONS = [
+  { type: 'FREE', name: '즉시 참여', description: '누구나 바로 모임에 참여할 수 있어요.' },
+  {
+    type: 'APPROVAL_REQUIRED',
+    name: '승인 후 참여',
+    description: '방장이 승인한 사람만 참여할 수 있어요.',
+  },
+];

src/components/pages/group/group-members/index.tsx

@@ -7,23 +7,30 @@ import { useState } from 'react';
 import clsx from 'clsx';
 
 import { Icon } from '@/components/icon';
+import { GroupModal } from '@/components/pages/group/group-modal';
 import { AnimateDynamicHeight } from '@/components/shared';
 import { Button, ImageWithFallback } from '@/components/ui';
-import { GetGroupDetailsResponse } from '@/types/service/group';
+import { useModal } from '@/components/ui';
+import { GetGroupDetailsResponse, KickGroupMemberParams } from '@/types/service/group';
 
 interface Props {
   members: GetGroupDetailsResponse['joinedMembers'];
+  isHost: boolean;
+  groupId: string;
 }
 
-export const GroupMembers = ({ members }: Props) => {
+export const GroupMembers = ({ members, isHost, groupId }: Props) => {
   const [expand, setExpand] = useState(false);
-  const [coverMember, setCoverMember] = useState(2 < Math.ceil(members.length / 3));
-
   const hasMoreMember = 2 < Math.ceil(members.length / 3);
 
+  const { open } = useModal();
+
   const onExpandClick = () => {
     setExpand((prev) => !prev);
-    setCoverMember((prev) => !prev);
+  };
+
+  const onKickMemberClick = (targetUserId: KickGroupMemberParams['targetUserId']) => {
+    open(<GroupModal groupId={groupId} targetUserId={targetUserId} type='kick' />);
   };
 
   return (
@@ -35,41 +42,49 @@ export const GroupMembers = ({ members }: Props) => {
           {members.map(({ nickName, profileImage, userId }, idx) => (
             <li
               key={nickName}
-              className={clsx(
-                'relative',
-                hasMoreMember && !expand ? '[&:nth-child(n+7)]:hidden' : 'block',
-              )}
+              className={hasMoreMember && !expand ? '[&:nth-child(n+6)]:hidden' : 'block'}
             >
               <div className='flex-col-center gap-1.5'>
-                <Link href={`/profile/${userId}`}>
-                  <ImageWithFallback
-                    width={64}
-                    className='object-fit h-16 w-16 rounded-full'
-                    alt='프로필 사진'
-                    draggable={false}
-                    height={64}
-                    src={profileImage ?? ''}
-                  />
-                </Link>
+                <div className='relative'>
+                  <Link href={`/profile/${userId}`}>
+                    <ImageWithFallback
+                      width={64}
+                      className='object-fit h-16 w-16 rounded-full'
+                      alt='프로필 사진'
+                      draggable={false}
+                      height={64}
+                      src={profileImage ?? ''}
+                    />
+                  </Link>
+                  {isHost && idx !== 0 && (
+                    <button
+                      className='absolute top-0 right-0'
+                      type='button'
+                      onClick={() => onKickMemberClick(userId.toString())}
+                    >
+                      <Icon id='kick' className='h-4 w-4' />
+                    </button>
+                  )}
+                </div>
+
                 <p
                   className={clsx(
                     'text-text-xs-medium line-clamp-1 w-full text-center break-all text-gray-800',
-                    coverMember && idx === 5 ? 'hidden' : 'block',
+                    hasMoreMember && !expand && idx === 5 ? 'hidden' : 'block',
                   )}
                 >
                   {nickName}
                 </p>
               </div>
-
-              {coverMember && idx === 5 && (
-                <div className='absolute inset-0'>
-                  <span className='flex-center text-text-md-semibold mx-auto h-[65px] w-[65px] rounded-full bg-gray-200 text-gray-600'>
-                    {members.length - 5}+
-                  </span>
-                </div>
-              )}
             </li>
           ))}
+          {hasMoreMember && !expand && (
+            <li className='mx-auto'>
+              <div className='flex-center h-16 w-16 rounded-full bg-gray-200'>
+                <span className='text-text-md-semibold text-gray-600'>{members.length - 5}+</span>
+              </div>
+            </li>
+          )}
         </ul>
       </AnimateDynamicHeight>
 

src/components/pages/group/group-modal/index.tsx

@@ -1,36 +1,39 @@
 'use client';
 
-import { useRouter } from 'next/navigation';
-
 import { Button } from '@/components/ui';
 import { ModalContent, ModalDescription, ModalTitle, useModal } from '@/components/ui/modal';
 import { useAttendGroup } from '@/hooks/use-group/use-group-attend';
 import { useDeleteGroup } from '@/hooks/use-group/use-group-delete';
+import { useKickGroupMember } from '@/hooks/use-group/use-group-kick';
 import { useLeaveGroup } from '@/hooks/use-group/use-group-leave';
 
 interface Props {
-  type: 'attend' | 'leave' | 'delete';
+  type: 'attend' | 'leave' | 'delete' | 'kick';
   groupId: string;
+  targetUserId?: string;
 }
 
-export const GroupModal = ({ type, groupId }: Props) => {
-  const { replace } = useRouter();
+export const GroupModal = ({ type, groupId, targetUserId = '' }: Props) => {
   const { close } = useModal();
-  const { mutate: attendMutate, isPending: isAttending } = useAttendGroup({ groupId }, close);
-  const { mutate: leaveMutate, isPending: isCanceling } = useLeaveGroup({ groupId }, close);
-  const { mutate: deleteMutate, isPending: isDeleting } = useDeleteGroup({ groupId }, () => {
-    close();
-    replace('/');
+  const { mutateAsync: attendMutate, isPending: isAttending } = useAttendGroup({ groupId });
+  const { mutateAsync: leaveMutate, isPending: isCanceling } = useLeaveGroup({ groupId });
+  const { mutateAsync: deleteMutate, isPending: isDeleting } = useDeleteGroup({ groupId });
+  const { mutateAsync: kickMutate, isPending: isKicking } = useKickGroupMember({
+    groupId,
+    targetUserId,
   });
 
-  const isPending = isAttending || isCanceling || isDeleting;
+  const isPending = isAttending || isCanceling || isDeleting || isKicking;
 
   const { title, description, confirm } = MODAL_MESSAGE[type];
 
-  const handleConfirmClick = () => {
-    if (type === 'attend') attendMutate();
-    else if (type === 'leave') leaveMutate();
-    else if (type === 'delete') deleteMutate();
+  const handleConfirmClick = async () => {
+    if (type === 'attend') await attendMutate();
+    else if (type === 'leave') await leaveMutate();
+    else if (type === 'delete') await deleteMutate();
+    else if (type === 'kick') await kickMutate();
+
+    close();
   };
 
   return (
@@ -75,4 +78,9 @@ const MODAL_MESSAGE = {
     description: '취소 후에는 다시 복구할 수 없어요.',
     confirm: '취소하기',
   },
+  kick: {
+    title: `을 내보내시겠어요?`,
+    description: '이 작업은 취소할 수 없습니다.',
+    confirm: '내보내기',
+  },
 };

src/hooks/use-group/use-group-attend/index.ts

@@ -4,14 +4,13 @@ import { API } from '@/api';
 import { groupKeys } from '@/lib/query-key/query-key-group';
 import { GroupIdParams } from '@/types/service/group';
 
-export const useAttendGroup = (params: GroupIdParams, callback: () => void) => {
+export const useAttendGroup = (params: GroupIdParams) => {
   const queryClient = useQueryClient();
 
   const query = useMutation({
     mutationFn: () => API.groupService.attendGroup(params),
     onSuccess: async () => {
       await queryClient.invalidateQueries({ queryKey: groupKeys.detail(params.groupId) });
-      callback();
       console.log('모임 참여 성공.');
     },
     onError: () => {

src/hooks/use-group/use-group-delete/index.ts

@@ -3,12 +3,11 @@ import { useMutation } from '@tanstack/react-query';
 import { API } from '@/api';
 import { GroupIdParams } from '@/types/service/group';
 
-export const useDeleteGroup = (params: GroupIdParams, callback: () => void) => {
+export const useDeleteGroup = (params: GroupIdParams) => {
   const query = useMutation({
     mutationFn: () => API.groupService.deleteGroup(params),
     onSuccess: async () => {
       console.log('모임 삭제 성공.');
-      callback();
     },
     onError: () => {
       console.log('모임 삭제 실패.');

src/hooks/use-group/use-group-kick/index.ts

@@ -0,0 +1,21 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import { API } from '@/api';
+import { groupKeys } from '@/lib/query-key/query-key-group';
+import { KickGroupMemberParams } from '@/types/service/group';
+
+export const useKickGroupMember = (params: KickGroupMemberParams) => {
+  const queryClient = useQueryClient();
+
+  const query = useMutation({
+    mutationFn: () => API.groupService.kickGroupMember(params),
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({ queryKey: groupKeys.detail(params.groupId) });
+      console.log('강퇴 성공.');
+    },
+    onError: () => {
+      console.log('강퇴 실패.');
+    },
+  });
+  return query;
+};

src/hooks/use-group/use-group-leave/index.ts

@@ -4,14 +4,13 @@ import { API } from '@/api';
 import { groupKeys } from '@/lib/query-key/query-key-group';
 import { GroupIdParams } from '@/types/service/group';
 
-export const useLeaveGroup = (params: GroupIdParams, callback: () => void) => {
+export const useLeaveGroup = (params: GroupIdParams) => {
   const queryClient = useQueryClient();
 
   const query = useMutation({
     mutationFn: () => API.groupService.leaveGroup(params),
     onSuccess: async () => {
       await queryClient.invalidateQueries({ queryKey: groupKeys.detail(params.groupId) });
-      callback();
       console.log('모임 탈퇴 성공.');
     },
     onError: () => {

src/lib/formatDateTime.ts

@@ -33,7 +33,8 @@ export const formatTimeAgo = (isoString: string) => {
 
 // 모임 시작 시간을 Card 컴포넌트용 형식으로 변환 (예: "25. 12. 25 - 19:00")
 export const formatDateTime = (startTime: string, customFormat?: string): string => {
-  const start = new Date(startTime);
+  let start = new Date(startTime);
+  if (!startTime.endsWith('Z')) start = new Date(startTime + 'Z');
 
   const fullYear = start.getFullYear().toString();
   const shortYear = fullYear.slice(-2);