[fix] 채팅창 오류 수정 (#39)

* fix : 채팅 내역이 채팅창을 넘어가는 오류 수정 * fix : 입력을 하지 않아도 채팅을 보낼 수 있는 오류 수정 * fix : 채팅이 채팅창을 넘어가는 오류 수정 * fix : 공백만 입력해도 채팅을 보낼 수 있는 오류 수정 * fix : 채팅이 채팅창을 넘어가는 오류 수정
boostcampwm2023 · Nov 17, 2023 · 41197c0 · 41197c0
1 parent b29c2b2
commit 41197c0
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 11 deletions.
diff --git a/client/src/components/Chatting/Chatting.styles.tsx b/client/src/components/Chatting/Chatting.styles.tsx
@@ -5,7 +5,7 @@ export const Container = styled.div`
   display: flex;
   gap: 0rem 1rem;
   justify-content: left;
-  padding: 0rem 1rem 0rem 1rem;
+  padding: 0rem 0.5rem 0rem 1rem;
   width: 100%;
   height: max-content;
 `
@@ -17,5 +17,6 @@ export const Id = styled.div`
 
 export const Context = styled.div`
   ${TYPO.LIGHT_R}
+  word-break:break-all;
   line-height: 2rem;
 `
diff --git a/client/src/pages/BroadcastPage/BroadcastPage.styles.tsx b/client/src/pages/BroadcastPage/BroadcastPage.styles.tsx
@@ -36,18 +36,29 @@ export const Chatting = styled.div`
   left: 67.75rem;
   width: 24.875rem;
   height: 53.25rem;
-  border-radius: 1.25rem;
 `
 
 export const ChattingList = styled.div`
   display: flex;
   flex-direction: column-reverse;
-  border-bottom: 0.0625rem solid #000000;
+  overflow-y: scroll;
+  width: 100%;
   height: 43.75rem;
+
+  &::-webkit-scrollbar {
+    width: 0.5rem;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #cccccc;
+    border-radius: 0.5rem;
+  }
 `
 
 export const ChattingInput = styled.div`
+  border-top: 0.0625rem solid #000000;
   height: 9.4375rem;
+  width: 100%;
 `
 
 export const InputBox = styled.textarea`
@@ -61,6 +72,10 @@ export const InputBox = styled.textarea`
   border-radius: 0.625rem;
   padding: 1rem;
   resize: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
 `
 
 export const InputSend = styled.div`

diff --git a/client/src/pages/BroadcastPage/BroadcastPage.tsx b/client/src/pages/BroadcastPage/BroadcastPage.tsx
@@ -12,6 +12,16 @@ const BroadcastPage = () => {
   const [registerModal, setRegisterModal] = useState<boolean>(false)
   const [loginModal, setLoginModal] = useState<boolean>(false)
 
+  const onSend = () => {
+    if (chatting.trim() === '') {
+      alert('채팅을 입력해주세요.')
+    } else {
+      setChattingList([chatting, ...chattingList])
+    }
+
+    setChatting('')
+  }
+
   const onRegister = () => {
     setRegisterModal(true)
     setLoginModal(false)
@@ -39,14 +49,7 @@ const BroadcastPage = () => {
         </styles.ChattingList>
         <styles.ChattingInput>
           <styles.InputBox value={chatting} onChange={(event) => setChatting(event.target.value)}></styles.InputBox>
-          <styles.InputSend
-            onClick={() => {
-              setChattingList([...chattingList, chatting])
-              setChatting('')
-            }}
-          >
-            등록하기
-          </styles.InputSend>
+          <styles.InputSend onClick={onSend}>등록하기</styles.InputSend>
         </styles.ChattingInput>
       </styles.Chatting>
       <styles.Info>