From 2f17d8ae6bd305b8f961ad581078eabb4df6848d Mon Sep 17 00:00:00 2001 From: chologmaesil Date: Wed, 27 Nov 2024 17:35:13 +0900 Subject: [PATCH 1/7] =?UTF-8?q?=E2=9C=A8=20Feat:=20ON/OFF=20=ED=86=A0?= =?UTF-8?q?=EA=B8=80=20=EB=B2=84=ED=8A=BC=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/common/Toggle/index.tsx | 35 +++++++++++++++++++ 1 file changed, 35 insertions(+) create mode 100644 Frontend/src/components/common/Toggle/index.tsx diff --git a/Frontend/src/components/common/Toggle/index.tsx b/Frontend/src/components/common/Toggle/index.tsx new file mode 100644 index 00000000..31ac9877 --- /dev/null +++ b/Frontend/src/components/common/Toggle/index.tsx @@ -0,0 +1,35 @@ +interface ToggleProps { + checked: boolean; + onChange: (checked: boolean) => void; + className?: string; +} + +function Toggle({ checked, onChange, className = '' }: ToggleProps) { + return ( + + ); +} + +export default Toggle; From e352d13e36f886c4786cbc8a0d50294a1521f16c Mon Sep 17 00:00:00 2001 From: chologmaesil Date: Wed, 27 Nov 2024 17:35:23 +0900 Subject: [PATCH 2/7] =?UTF-8?q?=E2=9C=A8=20Feat:=20=EC=B1=84=ED=8C=85?= =?UTF-8?q?=EB=B0=A9=20=EB=8D=94=EB=B3=B4=EA=B8=B0=20=EB=A9=94=EB=89=B4=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/chat/ChatSettingsMenu.tsx | 50 +++++++++++++++++++ 1 file changed, 50 insertions(+) create mode 100644 Frontend/src/components/chat/ChatSettingsMenu.tsx diff --git a/Frontend/src/components/chat/ChatSettingsMenu.tsx b/Frontend/src/components/chat/ChatSettingsMenu.tsx new file mode 100644 index 00000000..9f311d5d --- /dev/null +++ b/Frontend/src/components/chat/ChatSettingsMenu.tsx @@ -0,0 +1,50 @@ +import { useState } from 'react'; +import { RiRobot2Line } from 'react-icons/ri'; +import { BsBoxArrowUpRight } from 'react-icons/bs'; +import Toggle from '@components/common/Toggle'; + +interface ChatSettingsMenuProps { + onClose?: () => void; + position?: { + top: string; + right: string; + }; +} + +function ChatSettingsMenu({ onClose, position = { top: '50px', right: '8px' } }: ChatSettingsMenuProps) { + const [cleanBot, setCleanBot] = useState(false); + + return ( + <> + + + + ); +} + +export default ChatSettingsMenu; From 030229324a646a225354192d2a0db615c57fa175 Mon Sep 17 00:00:00 2001 From: chologmaesil Date: Wed, 27 Nov 2024 17:36:10 +0900 Subject: [PATCH 3/7] =?UTF-8?q?=F0=9F=92=84=20Style:=20=EB=B2=84=ED=8A=BC?= =?UTF-8?q?=20=ED=98=B8=EB=B2=84=20=EC=8B=9C=20=EB=B0=B0=EA=B2=BD=EC=83=89?= =?UTF-8?q?=20=EB=B3=80=ED=99=94=ED=95=98=EA=B2=8C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Frontend/src/components/chat/ChatHeader.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/Frontend/src/components/chat/ChatHeader.tsx b/Frontend/src/components/chat/ChatHeader.tsx index 0a19127e..a8d1bc78 100644 --- a/Frontend/src/components/chat/ChatHeader.tsx +++ b/Frontend/src/components/chat/ChatHeader.tsx @@ -22,16 +22,16 @@ export default function ChatHeader({ onClose, onSettingsClick }: ChatHeaderProps aria-label="채팅창 닫기" type="button" onClick={onClose} - className="text-lico-gray-2 hover:text-lico-gray-1" + className="rounded-md p-2 text-lico-gray-2 hover:bg-lico-gray-3" > {videoPlayerState && isVerticalMode ? : } -

채팅

+

채팅

From e8f79ec12675cc1a7a13dcf3746c0131e2b787a5 Mon Sep 17 00:00:00 2001 From: chologmaesil Date: Wed, 27 Nov 2024 17:36:51 +0900 Subject: [PATCH 4/7] =?UTF-8?q?=E2=9C=A8=20Feat:=20=EC=B1=84=ED=8C=85?= =?UTF-8?q?=EC=B0=BD=20=EB=8D=94=EB=B3=B4=EA=B8=B0=20=EB=B2=84=ED=8A=BC=20?= =?UTF-8?q?=ED=81=B4=EB=A6=AD=20=EC=8B=9C=20=EB=A9=94=EB=89=B4=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Frontend/src/components/chat/ChatWindow.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/Frontend/src/components/chat/ChatWindow.tsx b/Frontend/src/components/chat/ChatWindow.tsx index 6a9e8e8a..9ac006b2 100644 --- a/Frontend/src/components/chat/ChatWindow.tsx +++ b/Frontend/src/components/chat/ChatWindow.tsx @@ -10,6 +10,7 @@ import { config } from '@config/env'; import ChatProfileModal from '@components/chat/ChatProfileModal'; import PendingMessageNotification from '@components/chat/PendingMessageNotification'; import { chatApi } from '@apis/chat.ts'; +import ChatSettingsMenu from '@components/chat/ChatSettingsMenu'; import type { Message } from '@/types/live'; import ChatMessage from './ChatMessage'; @@ -35,6 +36,7 @@ export default function ChatWindow({ onAir, id }: ChatWindowProps) { const [showScrollButton, setShowScrollButton] = useState(false); const [selectedMessage, setSelectedMessage] = useState(null); const [isScrollPaused, setIsScrollPaused] = useState(false); + const [showChatSettingsMenu, setShowChatSettingsMenu] = useState(false); const [showPendingMessages, setShowPendingMessages] = useState(false); const [pendingMessages, setPendingMessages] = useState([]); const chatRef = useRef(null); @@ -131,9 +133,6 @@ export default function ChatWindow({ onAir, id }: ChatWindowProps) { const socket = io(`${config.chatUrl}`, { transports: ['websocket'], - extraHeaders: { - Authorization: `Bearer ${accessToken}`, // 헤더에 토큰 추가 - }, }); socket.emit('join', { channelId: id }); @@ -162,7 +161,8 @@ export default function ChatWindow({ onAir, id }: ChatWindowProps) { return (
- {}} /> + setShowChatSettingsMenu(!showChatSettingsMenu)} /> + {showChatSettingsMenu && setShowChatSettingsMenu(false)} />}
Date: Wed, 27 Nov 2024 17:38:08 +0900 Subject: [PATCH 5/7] =?UTF-8?q?=F0=9F=92=84=20Style:=20=EC=8A=A4=ED=83=80?= =?UTF-8?q?=EC=9D=BC=20=EC=98=A4=ED=83=80=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Frontend/src/components/common/Toggle/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Frontend/src/components/common/Toggle/index.tsx b/Frontend/src/components/common/Toggle/index.tsx index 31ac9877..d76acb68 100644 --- a/Frontend/src/components/common/Toggle/index.tsx +++ b/Frontend/src/components/common/Toggle/index.tsx @@ -11,7 +11,7 @@ function Toggle({ checked, onChange, className = '' }: ToggleProps) { onClick={() => onChange(!checked)} className={`relative inline-flex h-6 w-14 items-center rounded-full transition-colors duration-200 ease-in-out ${checked ? 'bg-lico-orange-1' : 'bg-lico-gray-3'} ${className}`} > -
+
From b347ace5897b8c4dae2c6ca256dbfd1d984d5a66 Mon Sep 17 00:00:00 2001 From: chologmaesil Date: Wed, 27 Nov 2024 23:43:33 +0900 Subject: [PATCH 6/7] =?UTF-8?q?=E2=9C=A8=20Feat:=20=EC=B1=84=ED=8C=85?= =?UTF-8?q?=EC=B0=BD=20=ED=81=B4=EB=A6=B0=EB=B4=87=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 클린봇 ON/OFF 상태를 ChatWindow에서 관리합니다 - 웹소켓 fitler 이벤트로 받은 chatId로 조회해 메시지 내용을 검열합니다. - Message 타입에 chatId,fiteringResult를 추가했습니다. - ChatMessage에서 필터링 여부에 따라 메세지 색을 다르게 표시하도록 했습니다. - --- Frontend/src/components/chat/ChatMessage.tsx | 14 +++-- .../src/components/chat/ChatSettingsMenu.tsx | 14 +++-- Frontend/src/components/chat/ChatWindow.tsx | 61 +++++++++++++++---- Frontend/src/types/live.ts | 2 + 4 files changed, 71 insertions(+), 20 deletions(-) diff --git a/Frontend/src/components/chat/ChatMessage.tsx b/Frontend/src/components/chat/ChatMessage.tsx index c5f0f290..79ec20b9 100644 --- a/Frontend/src/components/chat/ChatMessage.tsx +++ b/Frontend/src/components/chat/ChatMessage.tsx @@ -1,30 +1,36 @@ interface ChatMessageProps { - id: number; + userId: number; content: string; nickname: string; timestamp?: string; color?: string; onUserClick: (userId: number, element: HTMLElement) => void; + filteringResult: boolean; } export default function ChatMessage({ - id, + userId, content, nickname, timestamp = '', color = 'text-lico-orange-2', onUserClick, + filteringResult, }: ChatMessageProps) { return ( ); diff --git a/Frontend/src/components/chat/ChatSettingsMenu.tsx b/Frontend/src/components/chat/ChatSettingsMenu.tsx index 9f311d5d..08625f91 100644 --- a/Frontend/src/components/chat/ChatSettingsMenu.tsx +++ b/Frontend/src/components/chat/ChatSettingsMenu.tsx @@ -1,4 +1,3 @@ -import { useState } from 'react'; import { RiRobot2Line } from 'react-icons/ri'; import { BsBoxArrowUpRight } from 'react-icons/bs'; import Toggle from '@components/common/Toggle'; @@ -9,11 +8,16 @@ interface ChatSettingsMenuProps { top: string; right: string; }; + cleanBotEnabled: boolean; + onCleanBotChange: (enabled: boolean) => void; } -function ChatSettingsMenu({ onClose, position = { top: '50px', right: '8px' } }: ChatSettingsMenuProps) { - const [cleanBot, setCleanBot] = useState(false); - +function ChatSettingsMenu({ + onClose, + position = { top: '50px', right: '8px' }, + cleanBotEnabled, + onCleanBotChange, +}: ChatSettingsMenuProps) { return ( <>
- +