[feat] 채팅을 보내면 초점을 잃는 기능 추가 (#214)

* fix : 코드에 있는 console.log 제거 * feat : 채팅을 보내고 나면 초점을 잃는 기능 추가 * fix : 닉네임을 변경하고 채팅을 치지 못하는 오류 수정 * feat : 필터링 기본값 false로 수정 * refactor : 다크모드 토글 관련 코드 리팩토링 * fix : 필터링 토글과 실제 필터링 여부가 맞지 않는 오류 수정 * feat : 테마 기본값 light로 설정
boostcampwm2023 · Dec 14, 2023 · d78350d · d78350d
1 parent aac07bd
commit d78350d
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 15 deletions.
diff --git a/client/src/components/HlsPlayer/HlsPlayer.tsx b/client/src/components/HlsPlayer/HlsPlayer.tsx
@@ -13,7 +13,7 @@ const HlsPlayer = ({ id }: HlsPlayerProps) => {
   useEffect(() => {
     const video = videoRef.current
     let hls: Hls
-    console.log(videoSrc)
+
     if (video) {
       if (video.canPlayType('application/vnd.apple.mpegurl')) {
         video.src = videoSrc

diff --git a/client/src/components/Modal/SettingModal/SettingModal.tsx b/client/src/components/Modal/SettingModal/SettingModal.tsx
@@ -28,7 +28,7 @@ const SettingModal = ({ onConfirm }: SettingModalProps) => {
   }
 
   const onThemeToggle = () => {
-    localStorage.setItem('theme', `${currentTheme}`)
+    localStorage.setItem('theme', `${!isDarkMode}`)
     setTheme(isDarkMode ? ThemeFlag.light : ThemeFlag.dark)
   }
 

diff --git a/client/src/pages/BroadcastPage/BroadcastPage.tsx b/client/src/pages/BroadcastPage/BroadcastPage.tsx
@@ -58,7 +58,7 @@ const BroadcastPage = () => {
     if (settingModal === true) {
       setTimeout(() => {
         setSettingModal(false)
-      }, 199)
+      }, 190)
     } else {
       setSettingModal(true)
     }
@@ -69,14 +69,24 @@ const BroadcastPage = () => {
       }
 
       socket.current = io(`${import.meta.env.VITE_API_URL}`, { withCredentials: true })
+      socket.current.emit('join', { room: id })
+      socket.current.on('chat', (chatting: ChattingInterface) => {
+        setChattingList((chattingList) => [chatting, ...chattingList])
+      })
+      socket.current.on('kick', (kickInfo: KickInterface) => {
+        if (user.nickname === kickInfo.nickname) {
+          setConfirmModalMessage('방송에서 강퇴되었습니다.')
+          setConfirmModal(true)
+        }
+      })
     }
   }
 
   const onLogin = () => {
     if (loginModal === true) {
       setTimeout(() => {
         setLoginModal(false)
-      }, 199)
+      }, 190)
     } else {
       setLoginModal(true)
     }
@@ -91,7 +101,7 @@ const BroadcastPage = () => {
     if (viewerModal === true) {
       setTimeout(() => {
         setViewerModal(false)
-      }, 199)
+      }, 190)
     } else {
       setViewerModal(true)
     }
@@ -121,14 +131,18 @@ const BroadcastPage = () => {
   }
 
   const onSend = () => {
+    if (document.activeElement) {
+      ;(document.activeElement as HTMLElement).blur()
+    }
+
     if (user.id === '') {
       setConfirmModalMessage('채팅을 입력하기 전 로그인을 해주세요.')
       setConfirmModal(true)
     } else if (chatting.trim() === '') {
       setConfirmModalMessage('채팅을 입력해주신 후 보내주세요.')
       setConfirmModal(true)
-    } else if (chatting.trim().length > 300) {
-      setConfirmModalMessage('채팅은 최대 300글자까지 보낼 수 있습니다.')
+    } else if (chatting.trim().length > 50) {
+      setConfirmModalMessage('채팅은 최대 50글자까지 보낼 수 있습니다.')
       setConfirmModal(true)
     } else {
       socket.current.emit('chat', { message: chatting, useFilter: filter })
@@ -148,7 +162,7 @@ const BroadcastPage = () => {
   const onConfirm = () => {
     setTimeout(() => {
       setConfirmModal(false)
-    }, 199)
+    }, 190)
 
     if (confirmModalMessage === '채팅을 입력하기 전 로그인을 해주세요.') {
       onLogin()
@@ -214,6 +228,7 @@ const BroadcastPage = () => {
       if (socket.current) {
         socket.current.disconnect()
       }
+
       if (interval) {
         clearInterval(interval)
       }

diff --git a/client/src/pages/MainPage/MainPage.tsx b/client/src/pages/MainPage/MainPage.tsx
@@ -29,22 +29,20 @@ const MainPage = () => {
   const user = useRecoilValue(userState)
 
   const onSetting = () => {
-    console.log('setting')
     if (settingModal === true) {
       setTimeout(() => {
         setSettingModal(false)
-      }, 199)
+      }, 190)
     } else {
       setSettingModal(true)
     }
   }
 
   const onLogin = () => {
-    console.log('login')
     if (loginModal === true) {
       setTimeout(() => {
         setLoginModal(false)
-      }, 199)
+      }, 190)
     } else {
       setLoginModal(true)
     }
@@ -58,7 +56,7 @@ const MainPage = () => {
   const onConfirm = () => {
     setTimeout(() => {
       setConfirmModal(false)
-    }, 199)
+    }, 190)
     window.location.reload()
   }
 

diff --git a/client/src/states/filter.ts b/client/src/states/filter.ts
@@ -2,5 +2,5 @@ import { atom } from 'recoil'
 
 export const filterState = atom<boolean>({
   key: 'FILTER_STATE',
-  default: localStorage.getItem('filter') === `${false}` ? false : true,
+  default: localStorage.getItem('filter') === `${true}` ? true : false,
 })
diff --git a/client/src/states/theme.ts b/client/src/states/theme.ts
@@ -3,5 +3,5 @@ import { ThemeFlag } from '@/types/theme'
 
 export const themeState = atom<ThemeFlag>({
   key: 'THEME_STATE',
-  default: localStorage.getItem('theme') === `${ThemeFlag.light}` ? ThemeFlag.light : ThemeFlag.dark,
+  default: localStorage.getItem('theme') === `${ThemeFlag.dark}` ? ThemeFlag.dark : ThemeFlag.light,
 })