feat: match making 화면에 title 추가

MomHelpMe · Aug 22, 2024 · cdac319 · cdac319
1 parent 51bc1fa
commit cdac319
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 8 deletions.
diff --git 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
@@ -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;