Merge pull request #776 from sparcs-kaist/dev

Main branch update from Dev branch
sparcs-kaist · Mar 26, 2024 · d879be5 · d879be5
2 parents 329a8e3 + ef0d15b
commit d879be5
Show file tree

Hide file tree

Showing 7 changed files with 115 additions and 77 deletions.
diff --git 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,12 +59,18 @@ type MessageSetProps = {
 };
 
 const MessageSet = ({ chats, layoutType, roomInfo }: MessageSetProps) => {
+  const [isOpenReport, setIsOpenReport] = useState<boolean>(false);
   const { oid: userOid } = useValueRecoilState("loginInfo") || {};
+
+  const onClickProfileImage = useCallback(() => setIsOpenReport(true), []);
+
   const authorId = chats?.[0]?.authorId;
   const authorProfileUrl =
     "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",
@@ -96,6 +103,7 @@ const MessageSet = ({ chats, layoutType, roomInfo }: MessageSetProps) => {
     alignItems: "flex-end",
     gap: "4px",
   };
+
   const styleChat = useCallback(
     (type: (UserChat | BotChat)["type"]) => ({
       maxWidth: "max(75%, 210px)",
@@ -135,48 +143,54 @@ 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, cursor: !isBot ? "pointer" : undefined }}
+              onClick={() => !isBot && onClickProfileImage()}
+            >
+              {isBot ? (
+                <TaxiIcon css={{ width: "100%", height: "100%" }} />
+              ) : (
+                <ProfileImage url={authorProfileUrl} />
+              )}
+            </div>
+          )}
+        </div>
+        <div css={styleMessageSection}>
+          {authorId !== userOid && (
+            <div css={styleName} className="selectable">
+              {authorName}
             </div>
-            {index === chats.length - 1 && (
-              <div css={styleTime} className="selectable">
-                {dayjs(chat.time).format("H시 mm분")}
+          )}
+          {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}
+        userOid={authorId}
+      />
+    </>
   );
 };
 

diff --git 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";
 
@@ -32,7 +31,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,12 +44,11 @@ const selectOptions = [
 const BodyChatReportSelectType = ({
   roomInfo,
   reportedId,
-  clearReportedId,
+  setIsSelected,
   setIsSubmitted,
 }: 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(() => {
@@ -228,7 +224,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
@@ -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,20 @@ 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 { oid: userOid } = useValueRecoilState("loginInfo") || {};
   const isDeparted = useIsTimeOver(dayServerToClient(roomInfo.time)); // 방 출발 여부
 
   const styleText = {
@@ -80,26 +84,31 @@ const BodyChatReportSelectUser = ({
       <div css={styleText}>신고할 사용자를 선택해주세요.</div>
       <DottedLine />
       <div css={styleUsers}>
-        {roomInfo.part.map((user) => (
-          <div
-            key={user._id}
-            css={styleUser}
-            onClick={() => setSelectedUser(user._id)}
-          >
-            <div
-              css={{
-                ...styleCheckBox,
-                background:
-                  selectedUser === user._id ? theme.purple : theme.purple_light,
-              }}
-            >
-              {selectedUser === 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
@@ -122,8 +131,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
@@ -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}
         />
       ) : (

diff --git a/packages/web/src/hooks/skeleton/useChannelTalkEffect/channelService.js b/packages/web/src/hooks/skeleton/useChannelTalkEffect/channelService.js
@@ -45,6 +45,9 @@ class ChannelService {
   shutdown() {
     window.ChannelIO("shutdown");
   }
+  showMessenger() {
+    window.ChannelIO("showMessenger");
+  }
 }
 
 export default new ChannelService();
diff --git a/packages/web/src/pages/Mypage/index.tsx b/packages/web/src/pages/Mypage/index.tsx
@@ -1,6 +1,8 @@
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
+import { useLocation } from "react-router-dom";
 
+import channelService from "@/hooks/skeleton/useChannelTalkEffect/channelService";
 import { useValueRecoilState } from "@/hooks/useFetchRecoilState";
 
 import AdaptiveDiv from "@/components/AdaptiveDiv";
@@ -43,6 +45,15 @@ const Mypage = () => {
   const [isOpenEventPolicy, setIsOpenEventPolicy] = useState(false);
   const [isOpenMembers, setOpenIsMembers] = useState(false);
 
+  const { search } = useLocation();
+
+  useEffect(() => {
+    const channeltalk = new URLSearchParams(search).get("channeltalk");
+    if (channeltalk === "true") {
+      channelService.showMessenger();
+    }
+  }, [search]);
+
   const onClickProfileModify = useCallback(
     () => setIsOpenProfileModify(true),
     []

diff --git a/packages/web/src/tools/loadenv.ts b/packages/web/src/tools/loadenv.ts
@@ -13,7 +13,7 @@ export const kakaoSDKKey = env.REACT_APP_KAKAO_SDK_KEY; // optional
 export const gaTrackingId = env.REACT_APP_GA_TRACKING_ID; // optional
 export const firebaseConfig: Nullable<FirebaseConfig> =
   env.REACT_APP_FIREBASE_CONFIG && JSON.parse(env.REACT_APP_FIREBASE_CONFIG); // optional
-export const eventMode = env.REACT_APP_EVENT_MODE || "2024spring"; // optional. "2023fall"로 설정 가능
+export const eventMode = env.REACT_APP_EVENT_MODE || null; // optional. "2023fall"로 설정 가능
 
 // devicet-type 감지
 const userAgent = navigator.userAgent.toLowerCase();