From 765b322e086eb9743fa764f0aa669fc31bb1873d Mon Sep 17 00:00:00 2001
From: young <azerosong@gmail.com>
Date: Sun, 5 Jan 2025 19:09:55 +0900
Subject: [PATCH] =?UTF-8?q?Design:=20=EC=B1=84=ED=8C=85=20=EC=9E=85?=
 =?UTF-8?q?=EB=A0=A5=EB=B0=94=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/default/send-message.svg             |  2 +-
 src/pages/Chats/ChatRoom/ChatBox/index.tsx      |  6 +++++-
 src/pages/Chats/ChatRoom/ChatBox/styles.tsx     | 13 ++++---------
 src/pages/Chats/ChatRoom/RcvdMessage/styles.tsx |  2 +-
 4 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/src/assets/default/send-message.svg b/src/assets/default/send-message.svg
index 65db90d7..ca176b2b 100644
--- a/src/assets/default/send-message.svg
+++ b/src/assets/default/send-message.svg
@@ -1,4 +1,4 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
   <path d="M10.3209 14L21.3209 3M10.3209 14L13.8209 21C13.8647 21.0957 13.9352 21.1769 14.0238 21.2338C14.1125 21.2906 14.2156 21.3209 14.3209 21.3209C14.4262 21.3209 14.5293 21.2906 14.6179 21.2338C14.7066 21.1769 14.777 21.0957 14.8209 21L21.3209 3M10.3209 14L3.32087 10.5C3.22513 10.4561 3.144 10.3857 3.08712 10.2971C3.03024 10.2084 3 10.1053 3 10C3 9.89468 3.03024 9.79158 3.08712 9.70295C3.144 9.61431 3.22513 9.54387 3.32087 9.5L21.3209 3" 
-  stroke="#8e8e8e" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" fill="#8e8e8e"/>
+  stroke="#FFBBDA" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" fill="#FFBBDA"/>
 </svg>
diff --git a/src/pages/Chats/ChatRoom/ChatBox/index.tsx b/src/pages/Chats/ChatRoom/ChatBox/index.tsx
index 95b85d7d..8931cc03 100644
--- a/src/pages/Chats/ChatRoom/ChatBox/index.tsx
+++ b/src/pages/Chats/ChatRoom/ChatBox/index.tsx
@@ -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>
 	);
 };
diff --git a/src/pages/Chats/ChatRoom/ChatBox/styles.tsx b/src/pages/Chats/ChatRoom/ChatBox/styles.tsx
index 82fd9c43..d0c1f961 100644
--- a/src/pages/Chats/ChatRoom/ChatBox/styles.tsx
+++ b/src/pages/Chats/ChatRoom/ChatBox/styles.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' : '')};
 `;
diff --git a/src/pages/Chats/ChatRoom/RcvdMessage/styles.tsx b/src/pages/Chats/ChatRoom/RcvdMessage/styles.tsx
index e6b4d31a..1c659f2b 100644
--- a/src/pages/Chats/ChatRoom/RcvdMessage/styles.tsx
+++ b/src/pages/Chats/ChatRoom/RcvdMessage/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`