From 607a21ef3413c1b2edf2872a31854e3746ffc238 Mon Sep 17 00:00:00 2001 From: Wonjun Han <119842443+top-chaser@users.noreply.github.com> Date: Thu, 7 Dec 2023 13:31:21 +0900 Subject: [PATCH] =?UTF-8?q?[fix]=20=EB=B0=A9=EC=86=A1=20=EC=A0=9C=EB=AA=A9?= =?UTF-8?q?=20=EC=98=88=EC=99=B8=EC=B2=98=EB=A6=AC=20=EB=B0=8F=20=EB=A7=90?= =?UTF-8?q?=EC=A4=84=EC=9E=84=ED=91=9C=20=EC=A0=81=EC=9A=A9=20(#158)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix : 방송 제목 기본값 설정 * fix : 말줄임표 적용 * fix : 정렬이 안되는 오류 수정 * feat : 시청자 수에 콤마를 붙여주는 기능 구현 * feat : fetch 오류 처리 추가 --- .../components/Broadcast/Broadcast.styles.tsx | 19 +++++++++++--- client/src/components/Broadcast/Broadcast.tsx | 2 +- .../components/Chatting/Chatting.styles.tsx | 6 ++++- client/src/components/Chatting/Chatting.tsx | 2 +- .../Modal/LoginModal/LoginModal.tsx | 5 +++- .../Modal/SettingModal/SettingModal.tsx | 22 ++++++++++++---- .../Modal/ViewerModal/ViewerModal.styles.tsx | 10 +++++--- .../BroadcastPage/BroadcastPage.styles.tsx | 25 +++++++++++-------- .../src/pages/BroadcastPage/BroadcastPage.tsx | 9 ++++--- client/src/pages/MainPage/MainPage.tsx | 13 ++++++++-- 10 files changed, 81 insertions(+), 32 deletions(-) diff --git a/client/src/components/Broadcast/Broadcast.styles.tsx b/client/src/components/Broadcast/Broadcast.styles.tsx index f46845e..2dab5c5 100644 --- 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` ` 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 index f1967af..9d84807 100644 --- 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 {title} {nickname} - 시청자 {viewer}명 + 시청자 {viewer.toLocaleString()}명 ) } diff --git a/client/src/components/Chatting/Chatting.styles.tsx b/client/src/components/Chatting/Chatting.styles.tsx index 004b36c..26b3850 100644 --- 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 index faaac7a..daef856 100644 --- 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 ( {nickname} - {message} + {message} ) } diff --git a/client/src/components/Modal/LoginModal/LoginModal.tsx b/client/src/components/Modal/LoginModal/LoginModal.tsx index 9b5f219..2bf5636 100644 --- 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 index 4b5fac6..e4f93c4 100644 --- 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 index cb0876e..f8f9067 100644 --- 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` 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` ${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 index b71ae29..ad57793 100644 --- 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` 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 index 1d83ea5..63a05b7 100644 --- 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 = () => { {streamer.title} {streamer.nickname} - 시청자 {streamer.viewer}명 + 시청자 {streamer.viewer.toLocaleString()}명 {settingModal && } {loginModal && } diff --git a/client/src/pages/MainPage/MainPage.tsx b/client/src/pages/MainPage/MainPage.tsx index a1897af..14c1d7a 100644 --- 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 (