From 2c4614ac496cae9ce63a8aba2651531ef64ffb85 Mon Sep 17 00:00:00 2001 From: andyye <63383967+0ev@users.noreply.github.com> Date: Tue, 12 Mar 2024 23:23:25 +0900 Subject: [PATCH 01/25] Add: open channeltalk on specific query --- .../skeleton/useChannelTalkEffect/channelService.js | 3 +++ packages/web/src/pages/Mypage/index.tsx | 13 ++++++++++++- 2 files changed, 15 insertions(+), 1 deletion(-) diff --git a/packages/web/src/hooks/skeleton/useChannelTalkEffect/channelService.js b/packages/web/src/hooks/skeleton/useChannelTalkEffect/channelService.js index c6a7638b4..de03ed840 100644 --- 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 index f2d4e3005..5dedac1d3 100644 --- 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(); + } + }, []); + const onClickProfileModify = useCallback( () => setIsOpenProfileModify(true), [] From 33859b27c5ef3631748f36259ea7f409b0620fba Mon Sep 17 00:00:00 2001 From: jyjy1229 Date: Tue, 12 Mar 2024 23:31:34 +0900 Subject: [PATCH 02/25] 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(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 ( -
-
- {authorId !== userOid && ( -
{ - /* @fixme @todo */ - }} - > - {authorId === "bot" ? ( - - ) : ( - - )} -
- )} -
-
- {authorId !== userOid && ( -
- {authorName} -
- )} - {chats.map((chat, index) => ( -
-
- + <> +
+
+ {authorId !== userOid && ( +
+ {authorId === "bot" ? ( + + ) : ( + + )}
- {index === chats.length - 1 && ( -
- {dayjs(chat.time).format("H시 mm분")} + )} +
+
+ {authorId !== userOid && ( +
+ {authorName} +
+ )} + {chats.map((chat, index) => ( +
+
+
- )} -
- ))} + {index === chats.length - 1 && ( +
+ {dayjs(chat.time).format("H시 mm분")} +
+ )} +
+ ))} +
-
+ + ); }; From 38abfbdaa63b24802382cd664bb660d43dcf4e98 Mon Sep 17 00:00:00 2001 From: jyjy1229 Date: Tue, 12 Mar 2024 23:52:40 +0900 Subject: [PATCH 03/25] 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) => {
{authorId !== userOid && ( -
+ <> {authorId === "bot" ? ( - +
+ +
) : ( - +
+ +
)} -
+ )}
From d993f20b2353c8e583223886e1e5220059e5d49f Mon Sep 17 00:00:00 2001 From: jyjy1229 Date: Tue, 19 Mar 2024 23:00:14 +0900 Subject: [PATCH 04/25] 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) => {
{authorId !== userOid && ( - <> - {authorId === "bot" ? ( -
- -
+
!isBot && onClickReport()} + > + {isBot ? ( + ) : ( -
- -
+ )} - +
)}
From 35a9e2c331c8687fd04b39bbfb882d6aa21893c9 Mon Sep 17 00:00:00 2001 From: jyjy1229 Date: Tue, 19 Mar 2024 23:01:04 +0900 Subject: [PATCH 05/25] 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 Date: Tue, 19 Mar 2024 23:02:26 +0900 Subject: [PATCH 06/25] 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(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 && (
!isBot && onClickReport()} + onClick={() => !isBot && onClickProfileImage()} > {isBot ? ( From 719f9a3e29da573a70b84173ce9d72435c54409f Mon Sep 17 00:00:00 2001 From: jyjy1229 Date: Tue, 19 Mar 2024 23:21:20 +0900 Subject: [PATCH 07/25] 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) => {
{authorId !== userOid && (
!isBot && onClickProfileImage()} > {isBot ? ( From 5392a332ea7ede17fcba663f01b0dbe589cd81e2 Mon Sep 17 00:00:00 2001 From: andyye <63383967+predict-woo@users.noreply.github.com> Date: Tue, 19 Mar 2024 23:22:45 +0900 Subject: [PATCH 08/25] Test: test netlify --- .../src/hooks/skeleton/useChannelTalkEffect/channelService.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/web/src/hooks/skeleton/useChannelTalkEffect/channelService.js b/packages/web/src/hooks/skeleton/useChannelTalkEffect/channelService.js index de03ed840..94c6d094b 100644 --- a/packages/web/src/hooks/skeleton/useChannelTalkEffect/channelService.js +++ b/packages/web/src/hooks/skeleton/useChannelTalkEffect/channelService.js @@ -1,5 +1,6 @@ /** {@link https://developers.channel.io/docs/web-installation} */ + class ChannelService { constructor() { this.loadScript(); From 95186036863d257d287b3f81b09cec5418ab9946 Mon Sep 17 00:00:00 2001 From: andyye <63383967+0ev@users.noreply.github.com> Date: Tue, 26 Mar 2024 19:24:50 +0900 Subject: [PATCH 09/25] Add: requested changes --- packages/web/src/pages/Mypage/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/web/src/pages/Mypage/index.tsx b/packages/web/src/pages/Mypage/index.tsx index 5dedac1d3..9d2aa60d3 100644 --- a/packages/web/src/pages/Mypage/index.tsx +++ b/packages/web/src/pages/Mypage/index.tsx @@ -52,7 +52,7 @@ const Mypage = () => { if (channeltalk === "true") { channelService.showMessenger(); } - }, []); + }, [search]); const onClickProfileModify = useCallback( () => setIsOpenProfileModify(true), From e2cd4937f990c37d7a795c1e1ced2235dabba036 Mon Sep 17 00:00:00 2001 From: andyye <63383967+0ev@users.noreply.github.com> Date: Tue, 26 Mar 2024 19:26:24 +0900 Subject: [PATCH 10/25] Remove: two newlines --- .../src/hooks/skeleton/useChannelTalkEffect/channelService.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/web/src/hooks/skeleton/useChannelTalkEffect/channelService.js b/packages/web/src/hooks/skeleton/useChannelTalkEffect/channelService.js index 94c6d094b..de03ed840 100644 --- a/packages/web/src/hooks/skeleton/useChannelTalkEffect/channelService.js +++ b/packages/web/src/hooks/skeleton/useChannelTalkEffect/channelService.js @@ -1,6 +1,5 @@ /** {@link https://developers.channel.io/docs/web-installation} */ - class ChannelService { constructor() { this.loadScript(); From c065077c405e10bd45deee1b8b7ff6492ec8df84 Mon Sep 17 00:00:00 2001 From: ybmin Date: Tue, 26 Mar 2024 20:26:42 +0900 Subject: [PATCH 11/25] Add: channelTalk openChat with given message --- .../useChannelTalkEffect/channelService.js | 3 +++ .../hooks/skeleton/useChannelTalkEffect/index.tsx | 11 +++++++++++ packages/web/src/pages/Mypage/Menu.tsx | 3 +++ packages/web/src/pages/Mypage/index.tsx | 15 ++++++++++++--- packages/web/src/pages/Mypage/langs/en.json | 1 + packages/web/src/pages/Mypage/langs/ko.json | 1 + 6 files changed, 31 insertions(+), 3 deletions(-) diff --git a/packages/web/src/hooks/skeleton/useChannelTalkEffect/channelService.js b/packages/web/src/hooks/skeleton/useChannelTalkEffect/channelService.js index c6a7638b4..ea3b249a9 100644 --- a/packages/web/src/hooks/skeleton/useChannelTalkEffect/channelService.js +++ b/packages/web/src/hooks/skeleton/useChannelTalkEffect/channelService.js @@ -42,6 +42,9 @@ class ChannelService { updateUser(options) { window.ChannelIO("updateUser", options); } + openChat(message) { + window.ChannelIO("openChat", undefined, message); + } shutdown() { window.ChannelIO("shutdown"); } diff --git a/packages/web/src/hooks/skeleton/useChannelTalkEffect/index.tsx b/packages/web/src/hooks/skeleton/useChannelTalkEffect/index.tsx index 3f2dec5b8..21e8ed292 100644 --- a/packages/web/src/hooks/skeleton/useChannelTalkEffect/index.tsx +++ b/packages/web/src/hooks/skeleton/useChannelTalkEffect/index.tsx @@ -36,4 +36,15 @@ export default () => { }); } }, [pathname, error]); + + const openWithdraw = () => { + if (channelTalkPluginKey) { + ChannelService.openChat({ + chatId: undefined, + message: + "스팍스 택시 서비스의 계정 탈퇴를 신청하고 싶습니다.\n신청 사유는 다음과 같습니다: ", + }); + } + }; + return { openWithdraw }; }; diff --git a/packages/web/src/pages/Mypage/Menu.tsx b/packages/web/src/pages/Mypage/Menu.tsx index fcc0dddf1..d63d2d08a 100644 --- a/packages/web/src/pages/Mypage/Menu.tsx +++ b/packages/web/src/pages/Mypage/Menu.tsx @@ -12,6 +12,7 @@ import ExitToAppRoundedIcon from "@mui/icons-material/ExitToAppRounded"; import HelpOutlineRoundedIcon from "@mui/icons-material/HelpOutlineRounded"; import KeyboardArrowLeftRoundedIcon from "@mui/icons-material/KeyboardArrowLeftRounded"; import LanguageRoundedIcon from "@mui/icons-material/LanguageRounded"; +import PersonRemoveRoundedIcon from "@mui/icons-material/PersonRemoveRounded"; import PortraitRoundedIcon from "@mui/icons-material/PortraitRounded"; import StarRoundedIcon from "@mui/icons-material/StarRounded"; @@ -46,6 +47,8 @@ const getIcon = (icon: string) => { return ; case "logout": return ; + case "withdraw": + return ; case "beta": return ; } diff --git a/packages/web/src/pages/Mypage/index.tsx b/packages/web/src/pages/Mypage/index.tsx index f2d4e3005..725d82647 100644 --- a/packages/web/src/pages/Mypage/index.tsx +++ b/packages/web/src/pages/Mypage/index.tsx @@ -1,6 +1,7 @@ import { useCallback, useState } from "react"; import { useTranslation } from "react-i18next"; +import useChannelTalkEffect from "@/hooks/skeleton/useChannelTalkEffect"; import { useValueRecoilState } from "@/hooks/useFetchRecoilState"; import AdaptiveDiv from "@/components/AdaptiveDiv"; @@ -63,6 +64,9 @@ const Mypage = () => { ); const onClickEventPolicy = useCallback(() => setIsOpenEventPolicy(true), []); const onClickMembers = useCallback(() => setOpenIsMembers(true), []); + const onClickWithdraw = useCallback(() => { + useChannelTalkEffect().openWithdraw(); + }, []); const styleProfImg = { width: "50px", @@ -194,9 +198,14 @@ const Mypage = () => { {t("credit")} {userId && ( - - {t("logout")} - + <> + + {t("withdraw")} + + + {t("logout")} + + )}
diff --git a/packages/web/src/pages/Mypage/langs/en.json b/packages/web/src/pages/Mypage/langs/en.json index 365791c93..fe6dddb8d 100644 --- a/packages/web/src/pages/Mypage/langs/en.json +++ b/packages/web/src/pages/Mypage/langs/en.json @@ -16,6 +16,7 @@ "terms_privacy": "Collection and Use of Personal Information", "privacy_policy": "Privacy Policy", "credit": "Credit", + "withdraw": "Withdraw Account", "logout": "Logout", "page_modify": { "cancel": "Cancel", diff --git a/packages/web/src/pages/Mypage/langs/ko.json b/packages/web/src/pages/Mypage/langs/ko.json index 99afcaebe..e6c52dbab 100644 --- a/packages/web/src/pages/Mypage/langs/ko.json +++ b/packages/web/src/pages/Mypage/langs/ko.json @@ -16,6 +16,7 @@ "terms_privacy": "개인정보 수집 및 이용", "privacy_policy": "개인정보 처리방침", "credit": "만든 사람들", + "withdraw": "회원 탈퇴하기", "logout": "로그아웃", "page_modify": { "cancel": "취소", From 2c67424934f61c2864b7134464c813583bc80de6 Mon Sep 17 00:00:00 2001 From: ybmin Date: Tue, 26 Mar 2024 20:39:33 +0900 Subject: [PATCH 12/25] Fix: conflict with dev --- .../src/hooks/skeleton/useChannelTalkEffect/index.tsx | 11 ----------- packages/web/src/pages/Mypage/index.tsx | 8 ++++++-- 2 files changed, 6 insertions(+), 13 deletions(-) diff --git a/packages/web/src/hooks/skeleton/useChannelTalkEffect/index.tsx b/packages/web/src/hooks/skeleton/useChannelTalkEffect/index.tsx index 21e8ed292..3f2dec5b8 100644 --- a/packages/web/src/hooks/skeleton/useChannelTalkEffect/index.tsx +++ b/packages/web/src/hooks/skeleton/useChannelTalkEffect/index.tsx @@ -36,15 +36,4 @@ export default () => { }); } }, [pathname, error]); - - const openWithdraw = () => { - if (channelTalkPluginKey) { - ChannelService.openChat({ - chatId: undefined, - message: - "스팍스 택시 서비스의 계정 탈퇴를 신청하고 싶습니다.\n신청 사유는 다음과 같습니다: ", - }); - } - }; - return { openWithdraw }; }; diff --git a/packages/web/src/pages/Mypage/index.tsx b/packages/web/src/pages/Mypage/index.tsx index 725d82647..4937a2d83 100644 --- a/packages/web/src/pages/Mypage/index.tsx +++ b/packages/web/src/pages/Mypage/index.tsx @@ -1,7 +1,7 @@ import { useCallback, useState } from "react"; import { useTranslation } from "react-i18next"; -import useChannelTalkEffect from "@/hooks/skeleton/useChannelTalkEffect"; +import channelService from "@/hooks/skeleton/useChannelTalkEffect/channelService"; import { useValueRecoilState } from "@/hooks/useFetchRecoilState"; import AdaptiveDiv from "@/components/AdaptiveDiv"; @@ -65,7 +65,11 @@ const Mypage = () => { const onClickEventPolicy = useCallback(() => setIsOpenEventPolicy(true), []); const onClickMembers = useCallback(() => setOpenIsMembers(true), []); const onClickWithdraw = useCallback(() => { - useChannelTalkEffect().openWithdraw(); + channelService.openChat({ + chatId: undefined, + message: + "스팍스 택시 서비스의 계정 탈퇴를 신청하고 싶습니다.\n신청 사유는 다음과 같습니다:\n", + }); }, []); const styleProfImg = { From 5736a6ca58c4c7d03215d5aa990b8fb805e3de7d Mon Sep 17 00:00:00 2001 From: jyjy1229 Date: Tue, 26 Mar 2024 23:06:28 +0900 Subject: [PATCH 13/25] 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>; setIsSubmitted: Dispatch>; }; @@ -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)} > 이전 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; setReportedId: Dispatch>>; + setIsSelected: Dispatch>; onChangeIsOpen?: (isOpen: boolean) => void; }; const BodyChatReportSelectUser = ({ roomInfo, + reportedId, setReportedId, + setIsSelected, onChangeIsOpen, }: BodyChatReportSelectUserProps) => { - const [selectedUser, setSelectedUser] = - useState>(null); const isDeparted = useIsTimeOver(dayServerToClient(roomInfo.time)); // 방 출발 여부 const styleText = { @@ -84,16 +87,16 @@ const BodyChatReportSelectUser = ({
setSelectedUser(user._id)} + onClick={() => setReportedId(user._id)} >
- {selectedUser === user._id && ( + {reportedId === user._id && ( )}
@@ -122,8 +125,8 @@ const BodyChatReportSelectUser = ({ borderRadius: "8px", ...theme.font14_bold, }} - onClick={() => setReportedId(selectedUser)} - disabled={!selectedUser} + onClick={() => setIsSelected(true)} + disabled={!reportedId} > 다음 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>(); + const [isSelected, setIsSelected] = useState(false); const [isSubmitted, setIsSubmitted] = useState(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 = ({ 신고하기
- {!reportedId ? ( + {!reportedId || !isSelected ? ( ) : !isSubmitted ? ( setReportedId(undefined)} + setIsSelected={setIsSelected} setIsSubmitted={setIsSubmitted} /> ) : ( From 39574e46a353e4b95ec9e4499826958ccbb5eaa1 Mon Sep 17 00:00:00 2001 From: jyjy1229 Date: Tue, 26 Mar 2024 23:07:16 +0900 Subject: [PATCH 14/25] 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 = ({
신고할 사용자를 선택해주세요.
- {roomInfo.part.map((user) => ( -
setReportedId(user._id)} - > -
- {reportedId === user._id && ( - - )} -
- -
- ))} + {roomInfo.part.map( + (user) => + user._id !== userOid && ( +
setReportedId(user._id)} + > +
+ {reportedId === user._id && ( + + )} +
+ +
+ ) + )}
From c106ec1f9ebbb9688a22b30ef58485b371e8a3df Mon Sep 17 00:00:00 2001 From: jinhyeonkwon Date: Tue, 2 Apr 2024 23:04:30 +0900 Subject: [PATCH 18/25] Add: shortcut button in the modal of already joined room --- .../src/components/ModalPopup/Body/BodyRoomSelection.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/web/src/components/ModalPopup/Body/BodyRoomSelection.tsx b/packages/web/src/components/ModalPopup/Body/BodyRoomSelection.tsx index 306f1a2cc..edf92ce34 100644 --- a/packages/web/src/components/ModalPopup/Body/BodyRoomSelection.tsx +++ b/packages/web/src/components/ModalPopup/Body/BodyRoomSelection.tsx @@ -125,6 +125,11 @@ const BodyRoomSelection = ({ roomInfo }: BodyRoomSelectionProps) => { const isDepart = useIsTimeOver(dayServerToClient(roomInfo.time)); // 방 출발 여부 const requestJoin = useCallback(async () => { + if (isAlreadyPart) { + // 이미 참여 중인 방에서 버튼을 누르면 API 호출 관련 로직을 건너뛰고 해당 방으로 이동합니다. + history.push(`/myroom/${roomInfo._id}`); + return; + } if (onCall.current) return; onCall.current = true; await axios({ @@ -204,7 +209,7 @@ const BodyRoomSelection = ({ roomInfo }: BodyRoomSelectionProps) => { {isLogin || isRoomFull || isDepart ? (
diff --git a/packages/web/src/components/Chat/MessagesBody/MessageSet/index.tsx b/packages/web/src/components/Chat/MessagesBody/MessageSet/index.tsx index ab62a70a1..06864f170 100644 --- a/packages/web/src/components/Chat/MessagesBody/MessageSet/index.tsx +++ b/packages/web/src/components/Chat/MessagesBody/MessageSet/index.tsx @@ -70,6 +70,7 @@ const MessageSet = ({ chats, layoutType, roomInfo }: MessageSetProps) => { const authorName = "authorName" in chats?.[0] ? chats?.[0].authorName : ""; const isBot = authorId === "bot"; + const isAlone = roomInfo.part.length === 1; const style = { position: "relative" as any, @@ -148,8 +149,11 @@ const MessageSet = ({ chats, layoutType, roomInfo }: MessageSetProps) => {
{authorId !== userOid && (
!isBot && onClickProfileImage()} + css={{ + ...styleProfile, + cursor: !isBot && !isAlone ? "pointer" : undefined, + }} + onClick={() => !isBot && !isAlone && onClickProfileImage()} > {isBot ? ( From 27b101f80e5b7fa771bcfd31e7d6da1c8f681044 Mon Sep 17 00:00:00 2001 From: ybmin Date: Thu, 25 Apr 2024 16:03:46 +0900 Subject: [PATCH 25/25] Fix: show only on mobile --- packages/web/src/pages/Mypage/Menu.tsx | 2 +- packages/web/src/pages/Mypage/index.tsx | 20 ++++++++++---------- packages/web/src/pages/Mypage/langs/en.json | 2 +- packages/web/src/pages/Mypage/langs/ko.json | 2 +- 4 files changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/web/src/pages/Mypage/Menu.tsx b/packages/web/src/pages/Mypage/Menu.tsx index d63d2d08a..4c809a4ca 100644 --- a/packages/web/src/pages/Mypage/Menu.tsx +++ b/packages/web/src/pages/Mypage/Menu.tsx @@ -47,7 +47,7 @@ const getIcon = (icon: string) => { return ; case "logout": return ; - case "withdraw": + case "cancel_account": return ; case "beta": return ; diff --git a/packages/web/src/pages/Mypage/index.tsx b/packages/web/src/pages/Mypage/index.tsx index 067fba6f3..ac10c4073 100644 --- a/packages/web/src/pages/Mypage/index.tsx +++ b/packages/web/src/pages/Mypage/index.tsx @@ -25,7 +25,7 @@ import WhiteContainerSuggestLogin from "@/components/WhiteContainer/WhiteContain import Menu from "./Menu"; -import { eventMode, isDev } from "@/tools/loadenv"; +import { deviceType, eventMode, isDev } from "@/tools/loadenv"; import theme from "@/tools/theme"; import { isNotificationOn } from "@/tools/trans"; @@ -74,7 +74,7 @@ const Mypage = () => { ); const onClickEventPolicy = useCallback(() => setIsOpenEventPolicy(true), []); const onClickMembers = useCallback(() => setOpenIsMembers(true), []); - const onClickWithdraw = useCallback(() => { + const onClickCancelAccount = useCallback(() => { channelService.openChat( "SPARCS Taxi 서비스의 계정 탈퇴를 신청하고 싶습니다.\n신청 사유는 다음과 같습니다:\n" ); @@ -210,14 +210,14 @@ const Mypage = () => { {t("credit")} {userId && ( - <> - - {t("logout")} - - - {t("withdraw")} - - + + {t("logout")} + + )} + {userId && deviceType.startsWith("app/") && ( + + {t("cancel_account")} + )}
diff --git a/packages/web/src/pages/Mypage/langs/en.json b/packages/web/src/pages/Mypage/langs/en.json index fe6dddb8d..7c8413599 100644 --- a/packages/web/src/pages/Mypage/langs/en.json +++ b/packages/web/src/pages/Mypage/langs/en.json @@ -16,7 +16,7 @@ "terms_privacy": "Collection and Use of Personal Information", "privacy_policy": "Privacy Policy", "credit": "Credit", - "withdraw": "Withdraw Account", + "cancel_account": "Cancel Account", "logout": "Logout", "page_modify": { "cancel": "Cancel", diff --git a/packages/web/src/pages/Mypage/langs/ko.json b/packages/web/src/pages/Mypage/langs/ko.json index e6c52dbab..c235bb6f7 100644 --- a/packages/web/src/pages/Mypage/langs/ko.json +++ b/packages/web/src/pages/Mypage/langs/ko.json @@ -16,7 +16,7 @@ "terms_privacy": "개인정보 수집 및 이용", "privacy_policy": "개인정보 처리방침", "credit": "만든 사람들", - "withdraw": "회원 탈퇴하기", + "cancel_account": "회원 탈퇴하기", "logout": "로그아웃", "page_modify": { "cancel": "취소",