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<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
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
<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
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 (
<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
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<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
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<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
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 = () => {
<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
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 (