From 18f430ae3a323209b942baf752384bd5eb392340 Mon Sep 17 00:00:00 2001
From: Yehyeok Bang <qkddpgur318@gmail.com>
Date: Wed, 12 Jun 2024 01:27:26 +0900
Subject: [PATCH] =?UTF-8?q?[#100]=20feat:=20=EA=B0=9C=EB=B3=84=20=EA=B3=B5?=
 =?UTF-8?q?=EC=A7=80=EC=82=AC=ED=95=AD=20=EC=9E=91=EC=84=B1=20=EA=B8=B0?=
 =?UTF-8?q?=EB=8A=A5=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 각 인원에게 개별적으로 메시지를 전송합니다.
---
 src/containers/group/detail/GroupDetail.tsx   |  2 +-
 .../group/detail/contents/MemberManage.tsx    | 36 +++++++++++++++++--
 src/services/notice/notice.ts                 | 24 +++++++++++++
 3 files changed, 59 insertions(+), 3 deletions(-)

diff --git a/src/containers/group/detail/GroupDetail.tsx b/src/containers/group/detail/GroupDetail.tsx
index ec0af38..40015f6 100644
--- a/src/containers/group/detail/GroupDetail.tsx
+++ b/src/containers/group/detail/GroupDetail.tsx
@@ -97,7 +97,7 @@ export default function GroupDetail() {
   function renderComponent(id: number, groupData: groupInfo | null) {
     switch (selectedAction) {
       case "manage":
-        return <MemberManage id={id} />;
+        return <MemberManage id={id} groupData={groupData} />;
       case "attendance":
         return <Attendance id={id} />;
       case "notice":
diff --git a/src/containers/group/detail/contents/MemberManage.tsx b/src/containers/group/detail/contents/MemberManage.tsx
index 3f04493..d54d14f 100644
--- a/src/containers/group/detail/contents/MemberManage.tsx
+++ b/src/containers/group/detail/contents/MemberManage.tsx
@@ -20,11 +20,14 @@ import {
 import usePagination from "@/hooks/usePagination";
 import MemberInvite from "./MemberInvite";
 import { getGroupMembers } from "@/services/member/member";
+import { groupInfo } from "@/types/group/group";
+import { createNoticeToMember } from "@/services/notice/notice";
 
 type ManageType = "info" | "invite";
 
 type MemberManageProps = {
   id: number;
+  groupData: groupInfo | null;
 };
 
 export default function MemberManage(props: MemberManageProps) {
@@ -32,6 +35,7 @@ export default function MemberManage(props: MemberManageProps) {
   const [currentMembers, setCurrentMembers] = useState<member[]>([]);
   const [selectedMember, setSelectedMember] = useState<member | null>(null);
   const [searchKeyword, setSearchKeyword] = useState("");
+  const [message, setMessage] = useState("");
   const { isOpen, onOpen, onOpenChange } = useDisclosure();
   const [selectedModal, setSelectedModal] = useState<string>("");
   const [selectedPage, setSelectedPage] = useState<ManageType>("info");
@@ -83,6 +87,19 @@ export default function MemberManage(props: MemberManageProps) {
     console.log(`Send message to member ${id}`);
   };
 
+  const requestSendMessageToMember = (id: number, message: string) => {
+    const data = createNoticeToMember({
+      memberId: id,
+      groupId: props.id,
+      title: `[${props.groupData?.name}]에서 메시지가 도착했습니다.`,
+      content: message,
+    });
+    data.then(() => {
+      alert("메시지가 전송되었습니다.");
+      setMessage("");
+    });
+  };
+
   return (
     <>
       <div className={styles.title}>인원 관리</div>
@@ -237,15 +254,30 @@ export default function MemberManage(props: MemberManageProps) {
                             <textarea
                               className={styles.message_textarea}
                               placeholder="메시지를 입력해주세요."
+                              value={message}
+                              onChange={(e) => setMessage(e.target.value)}
                             ></textarea>
                           </>
                         )}
                       </ModalBody>
                       <ModalFooter>
-                        <Button color="secondary" onPress={onClose}>
+                        <Button
+                          color="secondary"
+                          onPress={onClose}
+                          onClick={() => setMessage("")}
+                        >
                           돌아가기
                         </Button>
-                        <Button color="primary" onPress={onClose}>
+                        <Button
+                          color="primary"
+                          onPress={onClose}
+                          onClick={() =>
+                            requestSendMessageToMember(
+                              selectedMember!.id,
+                              message!
+                            )
+                          }
+                        >
                           전송하기
                         </Button>
                       </ModalFooter>
diff --git a/src/services/notice/notice.ts b/src/services/notice/notice.ts
index f59dc91..ecc481d 100644
--- a/src/services/notice/notice.ts
+++ b/src/services/notice/notice.ts
@@ -43,4 +43,28 @@ export const createNotice = async (request: RequestCreateNotice) => {
     } catch (error) {
         console.error(error);
     }
+};
+
+export type RequestCreateNoticeToMember = {
+    memberId: number;
+    groupId: number;
+    title: string;
+    content: string;
+};
+
+export const createNoticeToMember = async (request: RequestCreateNoticeToMember) => {
+    try {
+        const response = await axios.post(`/api/announcements/${request.memberId}?groupId=${request.groupId}`, {
+            title: request.title,
+            content: request.content,
+        }, {
+            headers: {
+                "Content-Type": "application/json",
+                "Authorization": `Bearer ${localStorage.getItem("accessToken")}`,
+            }
+        });
+        return response.data;
+    } catch (error) {
+        console.error(error);
+    }
 };
\ No newline at end of file