main 브랜치 병합

98OO · Nov 9, 2024 · bdab70a · bdab70a
2 parents 64cac9e + cab1ec7
commit bdab70a
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 16 deletions.
diff --git 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
@@ -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}
 							/>
 						</Flex>

diff --git 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
@@ -26,7 +26,7 @@ const MyMessageBox = (props: MyMessageBoxProps) => {
 			)}
 			<S.MyMessageBoxWrapper state={state} type={type}>
 				{type === 'TEXT' && (
-					<Text size='lg' weight='semiBold' color='iInverse'>
+					<Text size='lg' weight='medium' color='iInverse'>
 						{content}
 					</Text>
 				)}

diff --git 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
@@ -19,7 +19,7 @@ const OtherMessageBox = (props: OtherMessageBoxProps) => {
 	const { name, profile, type, content, date, file, state } = props;
 
 	return (
-		<S.OtherMessageBoxContainer>
+		<S.OtherMessageBoxContainer state={state}>
 			<Flex direction='column' width='32'>
 				{state && (
 					<Avatar profile={profile} initial={name} size='md' shape='circle' />
@@ -33,7 +33,7 @@ const OtherMessageBox = (props: OtherMessageBoxProps) => {
 				)}
 				<S.OtherMessageBoxWrapper state={state} type={type}>
 					{type === 'TEXT' && (
-						<Text size='lg' weight='semiBold' color='secondary'>
+						<Text size='lg' weight='medium' color='secondary'>
 							{content}
 						</Text>
 					)}