feat: 매칭 수락/거절 버튼 UI 구현

Author: gustn99

src/pages/Chats/MatchingRoom/MatchingMessage/index.tsx

@@ -16,7 +16,7 @@ const MatchingMessage: React.FC<MatchingData> = ({ id, message, createdAt, chatR
 		fromUserNickname: '오딩이',
 		profilePictureUrl: '',
 		content: '얘가 너 소개받고 싶대',
-		isSenderChanged: true,
+		isSenderChanged: false,
 		isProfileImageVisible: true,
 		isTimeVisible: false,
 		formattedTime,

src/pages/Chats/MatchingRoom/ResponseMessage/index.tsx

@@ -0,0 +1,16 @@
+import { ResponseButton, ResponseContainer } from './styles';
+
+export interface ResponseMessageProps {
+	requestStatus: 'accepted' | 'rejected' | 'pending';
+}
+
+const ResponseMessage: React.FC<ResponseMessageProps> = ({ requestStatus }) => {
+	return (
+		<ResponseContainer>
+			{(requestStatus === 'pending' || 'accepted') && <ResponseButton>거절</ResponseButton>}
+			{(requestStatus === 'pending' || 'rejected') && <ResponseButton>수락</ResponseButton>}
+		</ResponseContainer>
+	);
+};
+
+export default ResponseMessage;

src/pages/Chats/MatchingRoom/ResponseMessage/styles.tsx

@@ -0,0 +1,15 @@
+import { styled } from 'styled-components';
+
+export const ResponseContainer = styled.div`
+	display: flex;
+	gap: 0.5rem;
+	justify-content: flex-end;
+`;
+
+export const ResponseButton = styled.button`
+	padding: 0.4rem 0.8rem;
+	margin: 0.5rem 0;
+	background-color: #f2f2f2;
+	border-radius: 0.5rem;
+	overflow-wrap: break-word;
+`;

src/pages/Chats/MatchingRoom/index.tsx

@@ -10,8 +10,11 @@ import Back from '@assets/arrow/left.svg';
 import { OODDFrame } from '@components/Frame/Frame';
 import TopBar from '@components/TopBar';
 
+import ChatBox from '../ChatBox';
+
 import MatchingMessage from './MatchingMessage';
 import NoMatchingMessage from './NoMatchingMessage';
+import ResponseMessage from './ResponseMessage';
 import { MessagesContainer } from './styles';
 
 const MatchingRoom: React.FC = () => {
@@ -92,11 +95,17 @@ const MatchingRoom: React.FC = () => {
 				) : (
 					allMatchings.map((matching: MatchingData) => {
 						// TODO: 매칭 상태에 따라 응답 버튼 렌더링
-						return <MatchingMessage key={matching.id} {...matching} />;
+						return (
+							<div key={matching.id}>
+								<MatchingMessage {...matching} />
+								<ResponseMessage requestStatus={matching.requestStatus} />
+							</div>
+						);
 					})
 				)}
 				<div ref={chatWindowRef} />
 			</MessagesContainer>
+			<ChatBox />
 		</OODDFrame>
 	);
 };