From 33859b27c5ef3631748f36259ea7f409b0620fba Mon Sep 17 00:00:00 2001
From: jyjy1229 <kimjy18@kaist.ac.kr>
Date: Tue, 12 Mar 2024 23:31:34 +0900
Subject: [PATCH 1/9] Add click event to profile image

---
 .../Chat/MessagesBody/MessageSet/index.tsx    | 87 ++++++++++---------
 1 file changed, 47 insertions(+), 40 deletions(-)

diff --git a/packages/web/src/components/Chat/MessagesBody/MessageSet/index.tsx b/packages/web/src/components/Chat/MessagesBody/MessageSet/index.tsx
index 5bd3cf8f5..af9d369bf 100644
--- a/packages/web/src/components/Chat/MessagesBody/MessageSet/index.tsx
+++ b/packages/web/src/components/Chat/MessagesBody/MessageSet/index.tsx
@@ -1,9 +1,10 @@
-import { memo, useCallback } from "react";
+import { memo, useCallback, useState } from "react";
 
 import type { BotChat, LayoutType, UserChat } from "@/types/chat";
 
 import { useValueRecoilState } from "@/hooks/useFetchRecoilState";
 
+import { ModalChatReport } from "@/components/ModalPopup";
 import ProfileImage from "@/components/User/ProfileImage";
 
 import MessageAccount from "./MessageAccount";
@@ -58,7 +59,11 @@ type MessageSetProps = {
 };
 
 const MessageSet = ({ chats, layoutType, roomInfo }: MessageSetProps) => {
+  const [isOpenReport, setIsOpenReport] = useState<boolean>(false);
   const { oid: userOid } = useValueRecoilState("loginInfo") || {};
+
+  const onClickReport = useCallback(() => setIsOpenReport(true), []);
+
   const authorId = chats?.[0]?.authorId;
   const authorProfileUrl =
     "authorProfileUrl" in chats?.[0] ? chats?.[0].authorProfileUrl : "";
@@ -135,48 +140,50 @@ const MessageSet = ({ chats, layoutType, roomInfo }: MessageSetProps) => {
   };
 
   return (
-    <div css={style}>
-      <div css={styleProfileSection}>
-        {authorId !== userOid && (
-          <div
-            css={styleProfile}
-            onClick={() => {
-              /* @fixme @todo */
-            }}
-          >
-            {authorId === "bot" ? (
-              <TaxiIcon css={{ width: "100%", height: "100%" }} />
-            ) : (
-              <ProfileImage url={authorProfileUrl} />
-            )}
-          </div>
-        )}
-      </div>
-      <div css={styleMessageSection}>
-        {authorId !== userOid && (
-          <div css={styleName} className="selectable">
-            {authorName}
-          </div>
-        )}
-        {chats.map((chat, index) => (
-          <div key={getChatUniquewKey(chat)} css={styleMessageWrap}>
-            <div css={styleChat(chat.type)}>
-              <MessageBody
-                type={chat.type}
-                content={chat.content}
-                roomInfo={roomInfo}
-                color={authorId === userOid ? theme.white : theme.black}
-              />
+    <>
+      <div css={style}>
+        <div css={styleProfileSection}>
+          {authorId !== userOid && (
+            <div css={styleProfile} onClick={onClickReport}>
+              {authorId === "bot" ? (
+                <TaxiIcon css={{ width: "100%", height: "100%" }} />
+              ) : (
+                <ProfileImage url={authorProfileUrl} />
+              )}
             </div>
-            {index === chats.length - 1 && (
-              <div css={styleTime} className="selectable">
-                {dayjs(chat.time).format("H시 mm분")}
+          )}
+        </div>
+        <div css={styleMessageSection}>
+          {authorId !== userOid && (
+            <div css={styleName} className="selectable">
+              {authorName}
+            </div>
+          )}
+          {chats.map((chat, index) => (
+            <div key={getChatUniquewKey(chat)} css={styleMessageWrap}>
+              <div css={styleChat(chat.type)}>
+                <MessageBody
+                  type={chat.type}
+                  content={chat.content}
+                  roomInfo={roomInfo}
+                  color={authorId === userOid ? theme.white : theme.black}
+                />
               </div>
-            )}
-          </div>
-        ))}
+              {index === chats.length - 1 && (
+                <div css={styleTime} className="selectable">
+                  {dayjs(chat.time).format("H시 mm분")}
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
       </div>
-    </div>
+      <ModalChatReport
+        roomInfo={roomInfo}
+        isOpen={isOpenReport}
+        onChangeIsOpen={setIsOpenReport}
+      />
+    </>
   );
 };
 

From 38abfbdaa63b24802382cd664bb660d43dcf4e98 Mon Sep 17 00:00:00 2001
From: jyjy1229 <kimjy18@kaist.ac.kr>
Date: Tue, 12 Mar 2024 23:52:40 +0900
Subject: [PATCH 2/9] Remove click event to taxi bot profile image

---
 .../Chat/MessagesBody/MessageSet/index.tsx     | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/packages/web/src/components/Chat/MessagesBody/MessageSet/index.tsx b/packages/web/src/components/Chat/MessagesBody/MessageSet/index.tsx
index af9d369bf..baa0e287d 100644
--- a/packages/web/src/components/Chat/MessagesBody/MessageSet/index.tsx
+++ b/packages/web/src/components/Chat/MessagesBody/MessageSet/index.tsx
@@ -101,6 +101,9 @@ const MessageSet = ({ chats, layoutType, roomInfo }: MessageSetProps) => {
     alignItems: "flex-end",
     gap: "4px",
   };
+  const styleHover = {
+    cursor: "pointer",
+  };
   const styleChat = useCallback(
     (type: (UserChat | BotChat)["type"]) => ({
       maxWidth: "max(75%, 210px)",
@@ -144,13 +147,20 @@ const MessageSet = ({ chats, layoutType, roomInfo }: MessageSetProps) => {
       <div css={style}>
         <div css={styleProfileSection}>
           {authorId !== userOid && (
-            <div css={styleProfile} onClick={onClickReport}>
+            <>
               {authorId === "bot" ? (
-                <TaxiIcon css={{ width: "100%", height: "100%" }} />
+                <div css={styleProfile}>
+                  <TaxiIcon css={{ width: "100%", height: "100%" }} />
+                </div>
               ) : (
-                <ProfileImage url={authorProfileUrl} />
+                <div
+                  css={{ ...styleProfile, ...styleHover }}
+                  onClick={onClickReport}
+                >
+                  <ProfileImage url={authorProfileUrl} />
+                </div>
               )}
-            </div>
+            </>
           )}
         </div>
         <div css={styleMessageSection}>

From d993f20b2353c8e583223886e1e5220059e5d49f Mon Sep 17 00:00:00 2001
From: jyjy1229 <kimjy18@kaist.ac.kr>
Date: Tue, 19 Mar 2024 23:00:14 +0900
Subject: [PATCH 3/9] Fix jsx code

---
 .../Chat/MessagesBody/MessageSet/index.tsx    | 22 +++++++++----------
 1 file changed, 10 insertions(+), 12 deletions(-)

diff --git a/packages/web/src/components/Chat/MessagesBody/MessageSet/index.tsx b/packages/web/src/components/Chat/MessagesBody/MessageSet/index.tsx
index baa0e287d..f5153be90 100644
--- a/packages/web/src/components/Chat/MessagesBody/MessageSet/index.tsx
+++ b/packages/web/src/components/Chat/MessagesBody/MessageSet/index.tsx
@@ -69,6 +69,8 @@ const MessageSet = ({ chats, layoutType, roomInfo }: MessageSetProps) => {
     "authorProfileUrl" in chats?.[0] ? chats?.[0].authorProfileUrl : "";
   const authorName = "authorName" in chats?.[0] ? chats?.[0].authorName : "";
 
+  const isBot = authorId === "bot";
+
   const style = {
     position: "relative" as any,
     display: "flex",
@@ -147,20 +149,16 @@ const MessageSet = ({ chats, layoutType, roomInfo }: MessageSetProps) => {
       <div css={style}>
         <div css={styleProfileSection}>
           {authorId !== userOid && (
-            <>
-              {authorId === "bot" ? (
-                <div css={styleProfile}>
-                  <TaxiIcon css={{ width: "100%", height: "100%" }} />
-                </div>
+            <div
+              css={{ ...styleProfile, ...(!isBot && styleHover) }}
+              onClick={() => !isBot && onClickReport()}
+            >
+              {isBot ? (
+                <TaxiIcon css={{ width: "100%", height: "100%" }} />
               ) : (
-                <div
-                  css={{ ...styleProfile, ...styleHover }}
-                  onClick={onClickReport}
-                >
-                  <ProfileImage url={authorProfileUrl} />
-                </div>
+                <ProfileImage url={authorProfileUrl} />
               )}
-            </>
+            </div>
           )}
         </div>
         <div css={styleMessageSection}>

From 35a9e2c331c8687fd04b39bbfb882d6aa21893c9 Mon Sep 17 00:00:00 2001
From: jyjy1229 <kimjy18@kaist.ac.kr>
Date: Tue, 19 Mar 2024 23:01:04 +0900
Subject: [PATCH 4/9] Add userOid props to modal

---
 .../web/src/components/Chat/MessagesBody/MessageSet/index.tsx    | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/web/src/components/Chat/MessagesBody/MessageSet/index.tsx b/packages/web/src/components/Chat/MessagesBody/MessageSet/index.tsx
index f5153be90..df55ab7ea 100644
--- a/packages/web/src/components/Chat/MessagesBody/MessageSet/index.tsx
+++ b/packages/web/src/components/Chat/MessagesBody/MessageSet/index.tsx
@@ -190,6 +190,7 @@ const MessageSet = ({ chats, layoutType, roomInfo }: MessageSetProps) => {
         roomInfo={roomInfo}
         isOpen={isOpenReport}
         onChangeIsOpen={setIsOpenReport}
+        userOid={authorId}
       />
     </>
   );

From 1a861cbb184533f17a693f49ac97cfd4e03fd934 Mon Sep 17 00:00:00 2001
From: jyjy1229 <kimjy18@kaist.ac.kr>
Date: Tue, 19 Mar 2024 23:02:26 +0900
Subject: [PATCH 5/9] Rename function

---
 .../web/src/components/Chat/MessagesBody/MessageSet/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/web/src/components/Chat/MessagesBody/MessageSet/index.tsx b/packages/web/src/components/Chat/MessagesBody/MessageSet/index.tsx
index df55ab7ea..e6749d7a5 100644
--- a/packages/web/src/components/Chat/MessagesBody/MessageSet/index.tsx
+++ b/packages/web/src/components/Chat/MessagesBody/MessageSet/index.tsx
@@ -62,7 +62,7 @@ const MessageSet = ({ chats, layoutType, roomInfo }: MessageSetProps) => {
   const [isOpenReport, setIsOpenReport] = useState<boolean>(false);
   const { oid: userOid } = useValueRecoilState("loginInfo") || {};
 
-  const onClickReport = useCallback(() => setIsOpenReport(true), []);
+  const onClickProfileImage = useCallback(() => setIsOpenReport(true), []);
 
   const authorId = chats?.[0]?.authorId;
   const authorProfileUrl =
@@ -151,7 +151,7 @@ const MessageSet = ({ chats, layoutType, roomInfo }: MessageSetProps) => {
           {authorId !== userOid && (
             <div
               css={{ ...styleProfile, ...(!isBot && styleHover) }}
-              onClick={() => !isBot && onClickReport()}
+              onClick={() => !isBot && onClickProfileImage()}
             >
               {isBot ? (
                 <TaxiIcon css={{ width: "100%", height: "100%" }} />

From 719f9a3e29da573a70b84173ce9d72435c54409f Mon Sep 17 00:00:00 2001
From: jyjy1229 <kimjy18@kaist.ac.kr>
Date: Tue, 19 Mar 2024 23:21:20 +0900
Subject: [PATCH 6/9] Fix css

---
 .../src/components/Chat/MessagesBody/MessageSet/index.tsx   | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/web/src/components/Chat/MessagesBody/MessageSet/index.tsx b/packages/web/src/components/Chat/MessagesBody/MessageSet/index.tsx
index e6749d7a5..ab62a70a1 100644
--- a/packages/web/src/components/Chat/MessagesBody/MessageSet/index.tsx
+++ b/packages/web/src/components/Chat/MessagesBody/MessageSet/index.tsx
@@ -103,9 +103,7 @@ const MessageSet = ({ chats, layoutType, roomInfo }: MessageSetProps) => {
     alignItems: "flex-end",
     gap: "4px",
   };
-  const styleHover = {
-    cursor: "pointer",
-  };
+
   const styleChat = useCallback(
     (type: (UserChat | BotChat)["type"]) => ({
       maxWidth: "max(75%, 210px)",
@@ -150,7 +148,7 @@ const MessageSet = ({ chats, layoutType, roomInfo }: MessageSetProps) => {
         <div css={styleProfileSection}>
           {authorId !== userOid && (
             <div
-              css={{ ...styleProfile, ...(!isBot && styleHover) }}
+              css={{ ...styleProfile, cursor: !isBot ? "pointer" : undefined }}
               onClick={() => !isBot && onClickProfileImage()}
             >
               {isBot ? (

From 5736a6ca58c4c7d03215d5aa990b8fb805e3de7d Mon Sep 17 00:00:00 2001
From: jyjy1229 <kimjy18@kaist.ac.kr>
Date: Tue, 26 Mar 2024 23:06:28 +0900
Subject: [PATCH 7/9] Keep the selected user when press the previous button

---
 .../Body/BodyChatReportSelectType.tsx         |  6 +++---
 .../Body/BodyChatReportSelectUser.tsx         | 19 +++++++++++--------
 .../components/ModalPopup/ModalChatReport.tsx |  9 +++++++--
 3 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/packages/web/src/components/ModalPopup/Body/BodyChatReportSelectType.tsx b/packages/web/src/components/ModalPopup/Body/BodyChatReportSelectType.tsx
index 523a853a7..1227eeedf 100644
--- a/packages/web/src/components/ModalPopup/Body/BodyChatReportSelectType.tsx
+++ b/packages/web/src/components/ModalPopup/Body/BodyChatReportSelectType.tsx
@@ -32,7 +32,7 @@ import EditRoundedIcon from "@mui/icons-material/EditRounded";
 type BodyChatReportSelectTypeProps = {
   roomInfo: Room;
   reportedId: Report["reportedId"];
-  clearReportedId: () => void;
+  setIsSelected: Dispatch<SetStateAction<boolean>>;
   setIsSubmitted: Dispatch<SetStateAction<boolean>>;
 };
 
@@ -45,7 +45,7 @@ const selectOptions = [
 const BodyChatReportSelectType = ({
   roomInfo,
   reportedId,
-  clearReportedId,
+  setIsSelected,
   setIsSubmitted,
 }: BodyChatReportSelectTypeProps) => {
   const axios = useAxios();
@@ -228,7 +228,7 @@ const BodyChatReportSelectType = ({
             borderRadius: "8px",
             ...theme.font14,
           }}
-          onClick={clearReportedId}
+          onClick={() => setIsSelected(false)}
         >
           이전
         </Button>
diff --git a/packages/web/src/components/ModalPopup/Body/BodyChatReportSelectUser.tsx b/packages/web/src/components/ModalPopup/Body/BodyChatReportSelectUser.tsx
index c27eff87f..6a3599936 100644
--- a/packages/web/src/components/ModalPopup/Body/BodyChatReportSelectUser.tsx
+++ b/packages/web/src/components/ModalPopup/Body/BodyChatReportSelectUser.tsx
@@ -1,7 +1,8 @@
-import { Dispatch, SetStateAction, useState } from "react";
+import { Dispatch, SetStateAction } from "react";
 
 import type { Report } from "@/types/report";
 
+import { useValueRecoilState } from "@/hooks/useFetchRecoilState";
 import useIsTimeOver from "@/hooks/useIsTimeOver";
 
 import Button from "@/components/Button";
@@ -15,17 +16,19 @@ import CheckRoundedIcon from "@mui/icons-material/CheckRounded";
 
 type BodyChatReportSelectUserProps = {
   roomInfo: Room;
+  reportedId: Nullable<Report["reportedId"]>;
   setReportedId: Dispatch<SetStateAction<Nullable<Report["reportedId"]>>>;
+  setIsSelected: Dispatch<SetStateAction<boolean>>;
   onChangeIsOpen?: (isOpen: boolean) => void;
 };
 
 const BodyChatReportSelectUser = ({
   roomInfo,
+  reportedId,
   setReportedId,
+  setIsSelected,
   onChangeIsOpen,
 }: BodyChatReportSelectUserProps) => {
-  const [selectedUser, setSelectedUser] =
-    useState<Nullable<Report["reportedId"]>>(null);
   const isDeparted = useIsTimeOver(dayServerToClient(roomInfo.time)); // 방 출발 여부
 
   const styleText = {
@@ -84,16 +87,16 @@ const BodyChatReportSelectUser = ({
           <div
             key={user._id}
             css={styleUser}
-            onClick={() => setSelectedUser(user._id)}
+            onClick={() => setReportedId(user._id)}
           >
             <div
               css={{
                 ...styleCheckBox,
                 background:
-                  selectedUser === user._id ? theme.purple : theme.purple_light,
+                  reportedId === user._id ? theme.purple : theme.purple_light,
               }}
             >
-              {selectedUser === user._id && (
+              {reportedId === user._id && (
                 <CheckRoundedIcon style={styleCheckBoxIcon} />
               )}
             </div>
@@ -122,8 +125,8 @@ const BodyChatReportSelectUser = ({
             borderRadius: "8px",
             ...theme.font14_bold,
           }}
-          onClick={() => setReportedId(selectedUser)}
-          disabled={!selectedUser}
+          onClick={() => setIsSelected(true)}
+          disabled={!reportedId}
         >
           다음
         </Button>
diff --git a/packages/web/src/components/ModalPopup/ModalChatReport.tsx b/packages/web/src/components/ModalPopup/ModalChatReport.tsx
index 68dca9a16..fa241eb4e 100644
--- a/packages/web/src/components/ModalPopup/ModalChatReport.tsx
+++ b/packages/web/src/components/ModalPopup/ModalChatReport.tsx
@@ -24,14 +24,17 @@ const ModalChatReport = ({
 }: ModalChatReportProps) => {
   const [reportedId, setReportedId] =
     useState<Nullable<Report["reportedId"]>>();
+  const [isSelected, setIsSelected] = useState<boolean>(false);
   const [isSubmitted, setIsSubmitted] = useState<boolean>(false);
 
   useEffect(() => {
     if (userOid && roomInfo.part.find((user) => user._id === userOid)) {
       setReportedId(userOid);
+      setIsSelected(true);
       setIsSubmitted(false);
     } else {
       setReportedId(undefined);
+      setIsSelected(false);
       setIsSubmitted(false);
     }
   }, [roomInfo, userOid, modalProps.isOpen]);
@@ -53,17 +56,19 @@ const ModalChatReport = ({
         <ReportGmailerrorredRoundedIcon style={styleIcon} />
         신고하기
       </div>
-      {!reportedId ? (
+      {!reportedId || !isSelected ? (
         <BodyChatReportSelectUser
           roomInfo={roomInfo}
+          reportedId={reportedId}
           setReportedId={setReportedId}
+          setIsSelected={setIsSelected}
           onChangeIsOpen={modalProps?.onChangeIsOpen}
         />
       ) : !isSubmitted ? (
         <BodyChatReportSelectType
           roomInfo={roomInfo}
           reportedId={reportedId}
-          clearReportedId={() => setReportedId(undefined)}
+          setIsSelected={setIsSelected}
           setIsSubmitted={setIsSubmitted}
         />
       ) : (

From 39574e46a353e4b95ec9e4499826958ccbb5eaa1 Mon Sep 17 00:00:00 2001
From: jyjy1229 <kimjy18@kaist.ac.kr>
Date: Tue, 26 Mar 2024 23:07:16 +0900
Subject: [PATCH 8/9] Remove own account in report modal

---
 .../Body/BodyChatReportSelectUser.tsx         | 46 +++++++++++--------
 1 file changed, 26 insertions(+), 20 deletions(-)

diff --git a/packages/web/src/components/ModalPopup/Body/BodyChatReportSelectUser.tsx b/packages/web/src/components/ModalPopup/Body/BodyChatReportSelectUser.tsx
index 6a3599936..ef684168f 100644
--- a/packages/web/src/components/ModalPopup/Body/BodyChatReportSelectUser.tsx
+++ b/packages/web/src/components/ModalPopup/Body/BodyChatReportSelectUser.tsx
@@ -29,6 +29,7 @@ const BodyChatReportSelectUser = ({
   setIsSelected,
   onChangeIsOpen,
 }: BodyChatReportSelectUserProps) => {
+  const { oid: userOid } = useValueRecoilState("loginInfo") || {};
   const isDeparted = useIsTimeOver(dayServerToClient(roomInfo.time)); // 방 출발 여부
 
   const styleText = {
@@ -83,26 +84,31 @@ const BodyChatReportSelectUser = ({
       <div css={styleText}>신고할 사용자를 선택해주세요.</div>
       <DottedLine />
       <div css={styleUsers}>
-        {roomInfo.part.map((user) => (
-          <div
-            key={user._id}
-            css={styleUser}
-            onClick={() => setReportedId(user._id)}
-          >
-            <div
-              css={{
-                ...styleCheckBox,
-                background:
-                  reportedId === user._id ? theme.purple : theme.purple_light,
-              }}
-            >
-              {reportedId === user._id && (
-                <CheckRoundedIcon style={styleCheckBoxIcon} />
-              )}
-            </div>
-            <User value={user} isDeparted={isDeparted} />
-          </div>
-        ))}
+        {roomInfo.part.map(
+          (user) =>
+            user._id !== userOid && (
+              <div
+                key={user._id}
+                css={styleUser}
+                onClick={() => setReportedId(user._id)}
+              >
+                <div
+                  css={{
+                    ...styleCheckBox,
+                    background:
+                      reportedId === user._id
+                        ? theme.purple
+                        : theme.purple_light,
+                  }}
+                >
+                  {reportedId === user._id && (
+                    <CheckRoundedIcon style={styleCheckBoxIcon} />
+                  )}
+                </div>
+                <User value={user} isDeparted={isDeparted} />
+              </div>
+            )
+        )}
       </div>
       <div css={styleButtons}>
         <Button

From e01914201346fc3a09dfffc86f4d28bf5f68a8ca Mon Sep 17 00:00:00 2001
From: jyjy1229 <kimjy18@kaist.ac.kr>
Date: Tue, 26 Mar 2024 23:23:27 +0900
Subject: [PATCH 9/9] Remove legacy code

---
 .../components/ModalPopup/Body/BodyChatReportSelectType.tsx | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/packages/web/src/components/ModalPopup/Body/BodyChatReportSelectType.tsx b/packages/web/src/components/ModalPopup/Body/BodyChatReportSelectType.tsx
index 1227eeedf..c8b6bb9d1 100644
--- a/packages/web/src/components/ModalPopup/Body/BodyChatReportSelectType.tsx
+++ b/packages/web/src/components/ModalPopup/Body/BodyChatReportSelectType.tsx
@@ -11,7 +11,6 @@ import {
 
 import type { Report } from "@/types/report";
 
-import { useValueRecoilState } from "@/hooks/useFetchRecoilState";
 import useIsTimeOver from "@/hooks/useIsTimeOver";
 import { useAxios } from "@/hooks/useTaxiAPI";
 
@@ -50,7 +49,6 @@ const BodyChatReportSelectType = ({
 }: BodyChatReportSelectTypeProps) => {
   const axios = useAxios();
   const setAlert = useSetRecoilState(alertAtom);
-  const { oid: userOid } = useValueRecoilState("loginInfo") || {};
   const wrapRef = useRef<HTMLDivElement>(null);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const [height, setHeight] = useState<CSSProperties["height"]>("28px");
@@ -76,10 +74,8 @@ const BodyChatReportSelectType = ({
         ? "기타 사유를 입력해주세요."
         : type === "etc-reason" && !regExpTest.reportMsg(etcDetail)
         ? "기타 사유는 1500자 까지 입력이 허용됩니다."
-        : userOid === reportedUser?._id
-        ? "나 자신은 신고할 수 없습니다."
         : null,
-    [type, etcDetail, isDeparted, userOid, reportedUser]
+    [type, etcDetail, isDeparted, reportedUser]
   );
 
   const resizeEvent = useCallback(() => {