From c4682c3f0915376bed23982d384cab539fe84835 Mon Sep 17 00:00:00 2001 From: HopeFullee Date: Thu, 1 Jan 2026 20:51:36 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20=EB=AA=A8=EC=9E=84=EC=8B=A0=EC=B2=AD=20?= =?UTF-8?q?=EC=9D=B4=ED=9B=84=20=EB=8C=80=EA=B8=B0=EC=A4=91=20=EB=B2=84?= =?UTF-8?q?=ED=8A=BC=20=EC=9E=91=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/group/[groupId]/page.tsx | 21 +----- .../group-buttons/finished-button/index.tsx | 5 ++ .../pages/group/group-buttons/index.tsx | 64 ++++++------------- .../group-buttons/joining-button/index.tsx | 23 +++++++ .../group-buttons/members-button/index.tsx | 36 +++++++++++ .../group-buttons/pending-button/index.tsx | 22 +++++++ .../description-profile/index.tsx | 15 +++-- .../pages/group/group-descriptions/index.tsx | 6 +- .../pages/group/group-modal/index.tsx | 8 ++- 9 files changed, 130 insertions(+), 70 deletions(-) create mode 100644 src/components/pages/group/group-buttons/finished-button/index.tsx create mode 100644 src/components/pages/group/group-buttons/joining-button/index.tsx create mode 100644 src/components/pages/group/group-buttons/members-button/index.tsx create mode 100644 src/components/pages/group/group-buttons/pending-button/index.tsx diff --git a/src/app/group/[groupId]/page.tsx b/src/app/group/[groupId]/page.tsx index 24476481..91cf7c5e 100644 --- a/src/app/group/[groupId]/page.tsx +++ b/src/app/group/[groupId]/page.tsx @@ -22,31 +22,14 @@ const GroupDetailPage = ({ params }: Props) => { if (!data) return null; - const { - images, - status, - joinPolicy, - myMembership, - joinedMembers, - participantCount, - maxParticipants, - } = data; + const { images, status, joinPolicy, myMembership, joinedMembers } = data; return (
- = maxParticipants || status === 'FINISHED', - }} - /> +
); }; diff --git a/src/components/pages/group/group-buttons/finished-button/index.tsx b/src/components/pages/group/group-buttons/finished-button/index.tsx new file mode 100644 index 00000000..8e992966 --- /dev/null +++ b/src/components/pages/group/group-buttons/finished-button/index.tsx @@ -0,0 +1,5 @@ +import { Button } from '@/components/ui'; + +export const FinishedButton = () => { + return ; +}; diff --git a/src/components/pages/group/group-buttons/index.tsx b/src/components/pages/group/group-buttons/index.tsx index a6ecf1f6..c9cb18c0 100644 --- a/src/components/pages/group/group-buttons/index.tsx +++ b/src/components/pages/group/group-buttons/index.tsx @@ -1,58 +1,34 @@ 'use client'; -// import { useRouter } from 'next/navigation'; - -import { GroupModal } from '@/components/pages/group/group-modal'; -import { Button } from '@/components/ui/button'; -import { useModal } from '@/components/ui/modal'; +import { FinishedButton } from '@/components/pages/group/group-buttons/finished-button'; +import { JoiningButton } from '@/components/pages/group/group-buttons/joining-button'; +import { MembersButton } from '@/components/pages/group/group-buttons/members-button'; +import { PendingButton } from '@/components/pages/group/group-buttons/pending-button'; +import { GetGroupDetailsResponse } from '@/types/service/group'; interface Props { - conditions: { - isJoined: boolean; - isHost: boolean; - isPast: boolean; - isPending: boolean; - isAttendDisabled: boolean; - isFreeGroup: boolean; - }; + statuses: Pick; } -export const GroupButtons = ({ - conditions: { isJoined, isHost, isPast, isFreeGroup, isAttendDisabled }, -}: Props) => { - const { open } = useModal(); - // const { push } = useRouter(); +export const GroupButtons = ({ statuses: { status, myMembership, joinPolicy } }: Props) => { + const isMember = myMembership?.status === 'ATTEND' && status !== 'FINISHED'; + + const isPending = myMembership?.status === 'PENDING' && status !== 'FINISHED'; + + const isFinished = status === 'FINISHED'; - // 그룹 채팅방 아이디 추가해야됨 - const onEnterChatClick = () => { - alert('채팅 파업'); - // push('/message/id'); - }; + const canJoin = !isMember && !isPending && !isFinished; return (
- {isJoined ? ( -
- - -
- ) : ( - + {canJoin && ( + )} + {isPending && } + {isMember && } + {isFinished && }
); }; diff --git a/src/components/pages/group/group-buttons/joining-button/index.tsx b/src/components/pages/group/group-buttons/joining-button/index.tsx new file mode 100644 index 00000000..b610305f --- /dev/null +++ b/src/components/pages/group/group-buttons/joining-button/index.tsx @@ -0,0 +1,23 @@ +import { GroupModal } from '@/components/pages/group/group-modal'; +import { Button } from '@/components/ui'; +import { useModal } from '@/components/ui'; + +interface Props { + conditions: { + isGroupFull: boolean; + isFreeGroup: boolean; + }; +} + +export const JoiningButton = ({ conditions: { isGroupFull, isFreeGroup } }: Props) => { + const { open } = useModal(); + + return ( + + ); +}; diff --git a/src/components/pages/group/group-buttons/members-button/index.tsx b/src/components/pages/group/group-buttons/members-button/index.tsx new file mode 100644 index 00000000..2ea55283 --- /dev/null +++ b/src/components/pages/group/group-buttons/members-button/index.tsx @@ -0,0 +1,36 @@ +// import { useRouter } from 'next/navigation'; + +import { GroupModal } from '@/components/pages/group/group-modal'; +import { Button, useModal } from '@/components/ui'; + +interface Props { + conditions: { + isHost: boolean; + }; +} + +export const MembersButton = ({ conditions: { isHost } }: Props) => { + const { open } = useModal(); + // const { push } = useRouter(); + + // 그룹 채팅방 아이디 추가해야됨 + const onEnterChatClick = () => { + alert('채팅 파업'); + // push('/message/id'); + }; + + return ( +
+ + +
+ ); +}; diff --git a/src/components/pages/group/group-buttons/pending-button/index.tsx b/src/components/pages/group/group-buttons/pending-button/index.tsx new file mode 100644 index 00000000..440ebaed --- /dev/null +++ b/src/components/pages/group/group-buttons/pending-button/index.tsx @@ -0,0 +1,22 @@ +import { GroupModal } from '@/components/pages/group/group-modal'; +import { Button } from '@/components/ui'; +import { useModal } from '@/components/ui'; + +export const PendingButton = () => { + const { open } = useModal(); + + return ( +
+ + +
+ ); +}; diff --git a/src/components/pages/group/group-descriptions/description-sections/description-profile/index.tsx b/src/components/pages/group/group-descriptions/description-sections/description-profile/index.tsx index 9db1b88d..4cc36c80 100644 --- a/src/components/pages/group/group-descriptions/description-sections/description-profile/index.tsx +++ b/src/components/pages/group/group-descriptions/description-sections/description-profile/index.tsx @@ -1,22 +1,26 @@ import Link from 'next/link'; import { ImageWithFallback } from '@/components/ui'; +import { PendingBadge } from '@/components/ui'; import { GetGroupDetailsResponse } from '@/types/service/group'; interface Props { hostInfo: GetGroupDetailsResponse['createdBy']; + groupId: number; conditions: { isHost: boolean; - isPast: boolean; + isPending: boolean; + isFinished: boolean; }; - groupId: number; } export const DescriptionProfile = ({ hostInfo: { userId, nickName, profileImage, profileMessage }, - conditions: { isHost, isPast }, + conditions: { isHost, isPending, isFinished }, groupId, }: Props) => { + const isEditable = isHost && !isFinished; + return (
@@ -33,8 +37,9 @@ export const DescriptionProfile = ({ {profileMessage &&

{profileMessage}

}
- {isPast &&

모임 마감

} - {isHost && !isPast && ( + {isFinished &&

모임 마감

} + {isPending && } + {isEditable && ( diff --git a/src/components/pages/group/group-modal/index.tsx b/src/components/pages/group/group-modal/index.tsx index ca65b9ec..f6e84de1 100644 --- a/src/components/pages/group/group-modal/index.tsx +++ b/src/components/pages/group/group-modal/index.tsx @@ -11,7 +11,7 @@ import { useKickGroupMember } from '@/hooks/use-group/use-group-kick'; import { useLeaveGroup } from '@/hooks/use-group/use-group-leave'; import { AttendGroupPayload } from '@/types/service/group'; -type ModalType = 'attend' | 'approval' | 'leave' | 'delete' | 'kick'; +type ModalType = 'attend' | 'approval' | 'pending' | 'leave' | 'delete' | 'kick'; interface BaseProps { type: Exclude; @@ -46,6 +46,7 @@ export const GroupModal = (props: Props) => { const mutateByType = { attend: () => attendMutate(undefined), approval: (message: AttendGroupPayload) => attendMutate(message), + pending: () => leaveMutate(), leave: () => leaveMutate(), delete: async () => { await deleteMutate(); @@ -88,6 +89,11 @@ const MODAL_CONTENTS = { description: '참여 신청 메세지', confirmMessage: '신청하기', }), + pending: () => ({ + title: '참여 신청을 취소하시겠어요?', + description: '조금만 더 기다려 보는건 어떨까요?', + confirmMessage: '취소하기', + }), leave: () => ({ title: '모임을 정말 탈퇴하시겠어요?', description: '탈퇴 시 그룹채팅과 모임 활동이 종료돼요.',