diff --git a/src/components/Chat/Chatting/Chatting.styled.ts b/src/components/Chat/Chatting/Chatting.styled.ts index c47ec45..8d08dd8 100644 --- a/src/components/Chat/Chatting/Chatting.styled.ts +++ b/src/components/Chat/Chatting/Chatting.styled.ts @@ -42,7 +42,8 @@ export const ChattingInputContainer = styled.div` border-radius: ${theme.units.radius.radius12}; display: flex; flex-direction: column; - padding: ${theme.units.spacing.space12}; + padding: ${theme.units.spacing.space12} ${theme.units.spacing.space8} + ${theme.units.spacing.space6} ${theme.units.spacing.space8}; `; export const ChattingInputWrapper = styled.textarea` diff --git a/src/components/Chat/Chatting/Chatting.tsx b/src/components/Chat/Chatting/Chatting.tsx index f3a0041..7986dd3 100644 --- a/src/components/Chat/Chatting/Chatting.tsx +++ b/src/components/Chat/Chatting/Chatting.tsx @@ -316,13 +316,10 @@ const Chatting = (props: ChattingProps) => { if (event.key === 'Enter' && event.shiftKey) { event.preventDefault(); setChatMessage((prev) => `${prev}\n`); - } else if ( - event.key === 'Enter' && - !event.shiftKey && - chatMessage.length > 0 - ) { + } else if (event.key === 'Enter' && !event.shiftKey) { event.preventDefault(); - handleText(); + + if (chatMessage.trim().length > 0) handleText(); } }; @@ -481,7 +478,7 @@ const Chatting = (props: ChattingProps) => { variant='primary' size='sm' isFull - disabled={chatMessage.length === 0} + disabled={chatMessage.trimStart().length === 0} onClick={handleText} /> diff --git a/src/components/Chat/MyMessageBox/MyMessageBox.styled.ts b/src/components/Chat/MyMessageBox/MyMessageBox.styled.ts index 9b66fc2..6cee541 100644 --- a/src/components/Chat/MyMessageBox/MyMessageBox.styled.ts +++ b/src/components/Chat/MyMessageBox/MyMessageBox.styled.ts @@ -5,7 +5,7 @@ export const MyMessageBoxContainer = styled.div` display: flex; width: 100%; justify-content: flex-end; - padding-top: ${theme.units.spacing.space4}; + padding: ${theme.units.spacing.space4}; gap: ${theme.units.spacing.space8}; `; @@ -23,7 +23,7 @@ export const MyMessageBoxWrapper = styled.div<{ state: boolean; type: string }>` max-width: 250px; line-height: 18px; word-break: break-all; - white-space: pre-line; + white-space: pre; `; export const ImageWrapper = styled.div` diff --git a/src/components/Chat/MyMessageBox/MyMessageBox.tsx b/src/components/Chat/MyMessageBox/MyMessageBox.tsx index 8d1de60..e4a2b82 100644 --- a/src/components/Chat/MyMessageBox/MyMessageBox.tsx +++ b/src/components/Chat/MyMessageBox/MyMessageBox.tsx @@ -26,7 +26,7 @@ const MyMessageBox = (props: MyMessageBoxProps) => { )} {type === 'TEXT' && ( - + {content} )} diff --git a/src/components/Chat/OtherMessageBox/OtherMessageBox.styled.ts b/src/components/Chat/OtherMessageBox/OtherMessageBox.styled.ts index 0aa38a6..9715893 100644 --- a/src/components/Chat/OtherMessageBox/OtherMessageBox.styled.ts +++ b/src/components/Chat/OtherMessageBox/OtherMessageBox.styled.ts @@ -1,10 +1,15 @@ import styled from 'styled-components'; import theme from '@styles/theme'; -export const OtherMessageBoxContainer = styled.div` +export const OtherMessageBoxContainer = styled.div<{ + state: boolean; +}>` display: flex; width: 100%; - padding-top: ${theme.units.spacing.space4}; + padding: ${(props) => + props.state + ? `${theme.units.spacing.space12} ${theme.units.spacing.space4} ${theme.units.spacing.space4} ${theme.units.spacing.space4}` + : `${theme.units.spacing.space4}`}; gap: ${theme.units.spacing.space8}; `; @@ -27,7 +32,7 @@ export const OtherMessageBoxWrapper = styled.div<{ max-width: 250px; line-height: 18px; word-break: break-all; - white-space: pre-line; + white-space: pre; `; export const ImageWrapper = styled.div` diff --git a/src/components/Chat/OtherMessageBox/OtherMessageBox.tsx b/src/components/Chat/OtherMessageBox/OtherMessageBox.tsx index 789cb6a..eaa230f 100644 --- a/src/components/Chat/OtherMessageBox/OtherMessageBox.tsx +++ b/src/components/Chat/OtherMessageBox/OtherMessageBox.tsx @@ -19,7 +19,7 @@ const OtherMessageBox = (props: OtherMessageBoxProps) => { const { name, profile, type, content, date, file, state } = props; return ( - + {state && ( @@ -33,7 +33,7 @@ const OtherMessageBox = (props: OtherMessageBoxProps) => { )} {type === 'TEXT' && ( - + {content} )}