[fix] 방송 제목 예외처리 및 말줄임표 적용 (#158)

* fix : 방송 제목 기본값 설정 * fix : 말줄임표 적용 * fix : 정렬이 안되는 오류 수정 * feat : 시청자 수에 콤마를 붙여주는 기능 구현 * feat : fetch 오류 처리 추가
boostcampwm2023 · Dec 7, 2023 · 607a21e · 607a21e
1 parent 9748852
commit 607a21e
Show file tree

Hide file tree

Showing 10 changed files with 81 additions and 32 deletions.
diff --git a/client/src/components/Broadcast/Broadcast.styles.tsx b/client/src/components/Broadcast/Broadcast.styles.tsx
@@ -23,7 +23,6 @@ export const Broadcast = styled.div<BroadcastProps>`
 `
 
 export const Thumbnail = styled.img`
-  border: 0.0625rem solid #000000;
   position: absolute;
   top: 1.875rem;
   left: 1.875rem;
@@ -34,28 +33,40 @@ export const Thumbnail = styled.img`
 
 export const Title = styled.div`
   ${TYPO.BOLD_L}
-  justify-content: right;
+  text-align: right;
   position: absolute;
   top: 1.875rem;
   right: 1.875rem;
+  width: 31.25rem;
   line-height: 4rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 `
 
 export const Nickname = styled.div`
   ${TYPO.LIGHT_R}
-  justify-content: right;
+  text-align: right;
   position: absolute;
   right: 1.875rem;
   bottom: 4.125rem;
+  width: 31.25rem;
   line-height: 2.25rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 `
 
 export const Viewer = styled.div`
   ${TYPO.LIGHT_R}
-  justify-content: right;
+  text-align: right;
   position: absolute;
   right: 1.875rem;
   bottom: 1.875rem;
+  width: 31.25rem;
   line-height: 2.25rem;
   color: #db0000;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 `
diff --git a/client/src/components/Broadcast/Broadcast.tsx b/client/src/components/Broadcast/Broadcast.tsx
@@ -18,7 +18,7 @@ const Broadcast = ({ thumbnail, title, nickname, viewer, index }: BroadcastProps
       <styles.Thumbnail src={thumbnail} />
       <styles.Title>{title}</styles.Title>
       <styles.Nickname>{nickname}</styles.Nickname>
-      <styles.Viewer>시청자 {viewer}명</styles.Viewer>
+      <styles.Viewer>시청자 {viewer.toLocaleString()}명</styles.Viewer>
     </styles.Broadcast>
   )
 }

diff --git a/client/src/components/Chatting/Chatting.styles.tsx b/client/src/components/Chatting/Chatting.styles.tsx
@@ -12,11 +12,15 @@ export const Chatting = styled.div`
 
 export const Nickname = styled.div`
   ${TYPO.BOLD_R}
+  max-width: 5rem;
   line-height: 2rem;
   cursor: pointer;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 `
 
-export const Text = styled.div`
+export const Message = styled.div`
   ${TYPO.LIGHT_R}
   word-break:break-all;
   line-height: 2rem;

diff --git a/client/src/components/Chatting/Chatting.tsx b/client/src/components/Chatting/Chatting.tsx
@@ -10,7 +10,7 @@ const Chatting = ({ nickname, message, onNickname }: ChattingProps) => {
   return (
     <styles.Chatting>
       <styles.Nickname onClick={onNickname}>{nickname}</styles.Nickname>
-      <styles.Text>{message}</styles.Text>
+      <styles.Message>{message}</styles.Message>
     </styles.Chatting>
   )
 }

diff --git a/client/src/components/Modal/LoginModal/LoginModal.tsx b/client/src/components/Modal/LoginModal/LoginModal.tsx
@@ -27,7 +27,10 @@ const LoginModal = ({ onCancle, currentTheme }: LoginModalProps) => {
             localStorage.setItem('user', JSON.stringify({ id: userId, nickname: userNickname }))
             window.location.reload()
           })
-          .catch((err) => console.error(err))
+          .catch((err) => {
+            alert('로그인을 실패 했습니다.')
+            console.error(err)
+          })
           .finally(() => window.removeEventListener('focus', popupEvent))
       }
     }

diff --git a/client/src/components/Modal/SettingModal/SettingModal.tsx b/client/src/components/Modal/SettingModal/SettingModal.tsx
@@ -57,7 +57,10 @@ const SettingModal = ({ onConfirm }: SettingModalProps) => {
         setUser({ id: userId, nickname: userNickname })
         localStorage.setItem('user', JSON.stringify({ id: userId, nickname: userNickname }))
       })
-      .catch((err) => console.error(err))
+      .catch((err) => {
+        alert('ID변경에 실패 했습니다.')
+        console.error(err)
+      })
   }
 
   const onNicknameInputButton = () => {
@@ -95,13 +98,22 @@ const SettingModal = ({ onConfirm }: SettingModalProps) => {
         setUser({ id: userId, nickname: userNickname })
         localStorage.setItem('user', JSON.stringify({ id: userId, nickname: userNickname }))
       })
-      .catch((err) => console.error(err))
+      .catch((err) => {
+        alert('닉네임변경에 실패 했습니다.')
+        console.error(err)
+      })
   }
 
   const onKeyInputButton = () => {
-    navigator.clipboard.writeText(streamKey).then(() => {
-      alert('방송 비밀 키가 클립보드에 복사되었습니다.')
-    })
+    navigator.clipboard
+      .writeText(streamKey)
+      .then(() => {
+        alert('방송 비밀 키가 클립보드에 복사되었습니다.')
+      })
+      .catch((err) => {
+        alert('방송 비밀키 복사에 실패 했습니다.')
+        console.error(err)
+      })
   }
 
   useEffect(() => {

diff --git a/client/src/components/Modal/ViewerModal/ViewerModal.styles.tsx b/client/src/components/Modal/ViewerModal/ViewerModal.styles.tsx
@@ -59,16 +59,18 @@ export const Modal = styled.div<ViewerModalProps>`
 
 export const Nickname = styled.div`
   ${TYPO.BOLD_M}
-  display: flex;
-  justify-content: center;
+  text-align: center;
   width: 100%;
+  padding: 0rem 1rem 0rem 1rem;
   line-height: 3rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 `
 
 export const Content = styled.div<ThemeInterface>`
   ${TYPO.MEDIUM_M}
-  display: flex;
-  justify-content: left;
+  text-align: left;
   padding: 0rem 1rem 0rem 1rem;
   border-top: ${(props) => {
     if (props.currentTheme === ThemeFlag.light) return '0.0625rem solid #000000'

diff --git a/client/src/pages/BroadcastPage/BroadcastPage.styles.tsx b/client/src/pages/BroadcastPage/BroadcastPage.styles.tsx
@@ -20,7 +20,6 @@ export const Access = styled.div`
 `
 
 export const Broadcast = styled.div`
-  border: 0.0625rem solid #000000;
   position: absolute;
   top: 6.25rem;
   left: 1.875rem;
@@ -127,37 +126,43 @@ export const Info = styled.div<ThemeInterface>`
 
 export const Title = styled.div`
   ${TYPO.BOLD_L}
-  display: flex;
-  align-items: center;
-  justify-content: left;
+  text-align: left;
   position: absolute;
   top: 0.9375rem;
   left: 1.875rem;
   width: 45rem;
   height: 4rem;
+  line-height: 4rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 `
 
 export const Nickname = styled.div`
   ${TYPO.LIGHT_R}
-  display: flex;
-  align-items: center;
-  justify-content: right;
+  text-align: right;
   position: absolute;
   top: 0.9375rem;
   right: 1.875rem;
   width: 12.5rem;
   height: 2rem;
+  line-height: 2rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 `
 
 export const Viewer = styled.div`
   ${TYPO.LIGHT_R}
-  display: flex;
-  align-items: center;
-  justify-content: right;
+  text-align: right;
   position: absolute;
   right: 1.875rem;
   bottom: 0.9375rem;
   width: 12.5rem;
   height: 2rem;
+  line-height: 2rem;
   color: #db0000;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 `
diff --git a/client/src/pages/BroadcastPage/BroadcastPage.tsx b/client/src/pages/BroadcastPage/BroadcastPage.tsx
@@ -128,9 +128,12 @@ const BroadcastPage = () => {
         }
       })
       .then((res) => {
-        setStreamer({ title: res.title, nickname: res.nickname, viewer: res.viewer })
+        setStreamer({ title: `${res.title === null ? `${res.nickname}의 방송` : res.title}`, nickname: res.nickname, viewer: res.viewer })
+      })
+      .catch((err) => {
+        console.error(err)
+        window.location.reload()
       })
-      .catch((err) => console.error(err))
   }
 
   useEffect(() => {
@@ -186,7 +189,7 @@ const BroadcastPage = () => {
       <styles.Info currentTheme={theme}>
         <styles.Title>{streamer.title}</styles.Title>
         <styles.Nickname>{streamer.nickname}</styles.Nickname>
-        <styles.Viewer>시청자 {streamer.viewer}명</styles.Viewer>
+        <styles.Viewer>시청자 {streamer.viewer.toLocaleString()}명</styles.Viewer>
       </styles.Info>
       {settingModal && <SettingModal onConfirm={onSetting} />}
       {loginModal && <LoginModal onCancle={onLogin} currentTheme={theme} />}

diff --git a/client/src/pages/MainPage/MainPage.tsx b/client/src/pages/MainPage/MainPage.tsx
@@ -51,11 +51,20 @@ const MainPage = () => {
       .then((res) => {
         setBroadcastList(
           res.data.map((broadcast: any): BroadcastInterface => {
-            return { userId: broadcast.userId, nickname: broadcast.nickname, title: broadcast.title, viewer: broadcast.viewer, thumbnail: broadcast.thumbnail }
+            return {
+              userId: broadcast.userId,
+              nickname: broadcast.nickname,
+              title: `${res.title === null ? `${res.nickname}의 방송` : res.title}`,
+              viewer: broadcast.viewer,
+              thumbnail: broadcast.thumbnail,
+            }
           }),
         )
       })
-      .catch((err) => console.error(err))
+      .catch((err) => {
+        console.error(err)
+        window.location.reload()
+      })
   }, [])
 
   return (