From cdac319de95b2228e3644fe85f16dcf35ec8a953 Mon Sep 17 00:00:00 2001
From: seonjo1 <tjdgus9684@gmail.com>
Date: Thu, 22 Aug 2024 15:53:36 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20match=20making=20=ED=99=94=EB=A9=B4?=
 =?UTF-8?q?=EC=97=90=20title=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Match-Wait.js |  1 +
 frontend/style.css                    | 28 +++++++++++++++++++--------
 2 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/Match-Wait.js b/frontend/src/components/Match-Wait.js
index 37cc71a..84e8083 100644
--- a/frontend/src/components/Match-Wait.js
+++ b/frontend/src/components/Match-Wait.js
@@ -6,6 +6,7 @@ export class WaitForMatch extends Component {
 	template () {
 		return `
 			<div id="match-box">
+				<div id="match-title">Finding Your Match...</div>
 				<img src="/img/back.png" id="goBack"></img>
 				<div id="matchingRotate">
 					<svg id="blackParticle" xmlns="http://www.w3.org/2000/svg" width="100" height="110" viewBox="0 0 140 150" fill="none">
diff --git a/frontend/style.css b/frontend/style.css
index 80ab28a..0c8b947 100644
--- a/frontend/style.css
+++ b/frontend/style.css
@@ -1391,17 +1391,29 @@ div#match-box {
 	position: relative;
 	display: flex;
 	justify-content: center;
+}
+
+div#match-title {
+	width: 100%;
+	height: 10%;
+	display: flex;
 	align-items: center;
+	justify-content: center;
+	margin-top: 30px;
+	font-weight: 900;
+	color:#31363F;
+    font-size: 3.0rem;
+	text-align: center;
 }
 
 div#matchingRotate {
 	border-radius: 50%;
 	background-color: #5b5775;
-    width: 700px;
-    height: 700px;
+    width: 670px;
+    height: 670px;
     position: absolute;
-    top: calc(50% - 350px);
-    left: calc(50% - 350px);
+    top: calc(50% - 285px);
+    left: calc(50% - 335px);
     border-radius: 50%;
     animation: rotate 2s linear infinite;
 }
@@ -1469,11 +1481,11 @@ svg#whiteBall {
 
 div#matchingText {
 	border-radius: 50%;
-	width: 300px;
-	height: 300px;
+	width: 275px;
+	height: 275px;
 	position: absolute;
-	top: 50% - 250px;
-	left: 50% - 250px;
+	top: calc(50% - 85px);
+	left: calc(50% - 135px);
 	display: flex;
 	justify-content: center;
 	align-items: center;