Merge pull request #128 from oodd-team/feat/OD-159

[OD-159] 채팅 UI 수정

Author: gustn99

src/assets/default/send-message.svg

@@ -7,6 +7,8 @@ import { useSocket } from '@context/SocketProvider';
 import { OtherUserAtom } from '@recoil/util/OtherUser';
 import { getCurrentUserId } from '@utils/getCurrentUserId';
 
+import SendIcon from '@assets/default/send-message.svg';
+
 import { ChatBoxContainer, Textarea, SendButton } from './styles';
 
 const ChatBox: React.FC = () => {
@@ -75,7 +77,9 @@ const ChatBox: React.FC = () => {
 				onKeyDown={handleEnterKeyDown}
 				onSubmit={handleNewMessageSubmit}
 			/>
-			<SendButton $isOtherUserValid={isOtherUserValid} onClick={handleNewMessageSubmit} />
+			<SendButton $isOtherUserValid={isOtherUserValid} onClick={handleNewMessageSubmit}>
+				<img src={SendIcon} alt="" />
+			</SendButton>
 		</ChatBoxContainer>
 	);
 };

src/pages/Chats/ChatRoom/ChatBox/index.tsx

@@ -1,7 +1,5 @@
 import { styled } from 'styled-components';
 
-import SendIcon from '@assets/default/send-message.svg';
-
 export const ChatBoxContainer = styled.div`
 	${({ theme }) => theme.breakPoints};
 	position: fixed;
@@ -14,7 +12,7 @@ export const ChatBoxContainer = styled.div`
 	padding: 0.5rem 1.12rem;
 	background-color: ${({ theme }) => theme.colors.background.primary};
 	gap: 0.5rem;
-	border-top: 1px solid ${({ theme }) => theme.colors.gray[300]};
+	/* border-top: 1px solid ${({ theme }) => theme.colors.gray[300]}; */
 	align-items: center;
 `;
 
@@ -39,12 +37,9 @@ export const Textarea = styled.textarea<{ $isOtherUserValid: boolean }>`
 `;
 
 export const SendButton = styled.button<{ $isOtherUserValid: boolean }>`
-	padding: 1.12rem;
+	width: 2rem;
+	height: 2rem;
 	border-radius: 50%;
-	background-color: ${({ theme }) => theme.colors.brand.primaryLight};
-	background-image: url(${SendIcon});
-	background-repeat: no-repeat;
-	background-position: center;
-	background-size: 1.2rem 1.2rem;
+	/* background-color: ${({ theme }) => theme.colors.brand.primaryLight}; */
 	cursor: ${({ $isOtherUserValid }) => ($isOtherUserValid ? 'pointer' : '')};
 `;

src/pages/Chats/ChatRoom/ChatBox/styles.tsx

@@ -10,7 +10,7 @@ export const FirstMessageLayout = styled.div<{ $isSenderChanged: boolean }>`
 
 export const MessageLayout = styled.div`
 	display: flex;
-	margin: 0 auto 0.5rem 2.938rem;
+	margin: 0 auto 0.5rem 2rem;
 `;
 
 export const UserImage = styled.img`