Merge pull request #27 from MomHelpMe/front/fix/0826-design-modification

Front/fix/0826 design modification
MomHelpMe · Aug 26, 2024 · 6d22bda · 6d22bda
2 parents 56c5092 + 9383f2f
commit 6d22bda
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 22 deletions.
diff --git a/frontend/src/components/Edit-Profile.js b/frontend/src/components/Edit-Profile.js
@@ -110,7 +110,7 @@ export class EditProfile extends Component {
 							</div>
 							<div id="url-upload-wrapper">
 								<label for="image-url">${translations.urlText}</label>
-								<input type="text" class="profile-image-url" value="${this.state.img_url}" placeholder="Enter image URL" readonly>
+								<input type="text" autocomplete="off" class="profile-image-url" value="${this.state.img_url}" placeholder="Enter image URL" readonly>
 							</div>
 						</div>
 						<div id="edit-2FA">
@@ -124,15 +124,15 @@ export class EditProfile extends Component {
 					<div id="changedProfile">
 						<div class="edit" id="edit-nick">
 							<label for="nickname">${translations.nickText}:</label>
-							<input type="text" id="nickname" value="${this.state.nickname}" autocomplete="off" maxlength="10">
+							<input type="text" id="nickname" value="${this.state.nickname}" autocomplete="off" maxlength="8">
 						</div>
 						<div class="edit" id="edit-img">
 							<div id="image-preview">
 								<img id="profile-image" src="${this.state.img_url}" alt="Profile Image"></img>
 							</div>
 							<div id="url-upload-wrapper">
 								<label for="image-url">${translations.urlText}</label>
-								<input type="text" class="profile-image-url" id="image-url" value="${this.state.img_url}" placeholder="Enter image URL">
+								<input type="text" autocomplete="off" class="profile-image-url" id="image-url" value="${this.state.img_url}" placeholder="Enter image URL">
 							</div>
 						</div>
 						<div id="edit-2FA">

diff --git a/frontend/src/components/Tournament-Setting.js b/frontend/src/components/Tournament-Setting.js
@@ -28,11 +28,11 @@ export class TournamentSetting extends Component {
 						<div id="tournament-line2"></div>
 					</div>
 					<div id="tournament-players">
-						<input class="tournament-input" id="tournament-nick1" maxlength="10" placeholder="nickname1"></input>
-						<input class="tournament-input" id="tournament-nick2" maxlength="10" placeholder="nickname2"></input>
+						<input class="tournament-input" autocomplete="off" id="tournament-nick1" maxlength="8" placeholder="nickname1"></input>
+						<input class="tournament-input" autocomplete="off" id="tournament-nick2" maxlength="8" placeholder="nickname2"></input>
 						<div id="tournament-blank"></div>
-						<input class="tournament-input" id="tournament-nick3" maxlength="10" placeholder="nickname3"></input>
-						<input class="tournament-input" id="tournament-nick4" maxlength="10" placeholder="nickname4"></input>
+						<input class="tournament-input" autocomplete="off" id="tournament-nick3" maxlength="8" placeholder="nickname3"></input>
+						<input class="tournament-input" autocomplete="off" id="tournament-nick4" maxlength="8" placeholder="nickname4"></input>
 					</div>
 				</div>
 			</div>

diff --git a/frontend/style.css b/frontend/style.css
@@ -429,19 +429,20 @@ div#online{
 	width: 10px;
 	height: 10px;
 	position:absolute;
-	top: 10px;
+	top: 0px;
 	background-color: rgb(52, 240, 86);
-	left: calc(30%);
+	left: 60px;
 }
 
 div#offline{
 	border-radius: 50%;
 	width: 10px;
 	height: 10px;
 	position:absolute;
-	top: 10px;
+	top: 0px;
 	background-color: rgb(116, 116, 116);
-	left: calc(30%);
+	left: 60px;
+
 }
 
 div#friendNick{
@@ -467,8 +468,9 @@ div#friendImage {
 
 img#friendImage {
 	border-radius: 30px;
-	width: 90%;
-	height: 90%;
+	width: 14vw; /* 화면 크기에 비례한 너비 설정 */
+	aspect-ratio: 1 / 1;
+	min-width: 280px;
 }
 
 div#friendBottom {
@@ -727,8 +729,8 @@ div#profileImgBox {
 
 img#profileImg {
 	border-radius: 20px;
-	width: 70%;
-	height: 80%;
+	width: 75%;
+	aspect-ratio: 1 / 1;
 }
 
 div#match {
@@ -952,12 +954,13 @@ div#opImg {
 
 img#opImg {
 	border-radius: 10px;
-	width: 45%;
-	height: 100%;
+	width: 40%;
+	aspect-ratio: 1 / 1;
 }
 
 span#opNick{
-	margin-right: 30px;
+	display: inline-block;
+	width: 100px;
 	font-size: 20px;
 	font-weight: 700;
 }
@@ -1259,16 +1262,16 @@ div#edit-img {
 
 #presentImage {
 	margin-top: 20px;
-	width: 280px;
-    height: 240px;
+	width: 260px;
+    height: 260px;
     object-fit: cover;
 	border-radius: 10px;
 }
 
 #profile-image {
 	margin-top: 20px;
-	width: 280px;
-    height: 240px;
+	width: 260px;
+    height: 260px;
     object-fit: cover;
 	border-radius: 10px;
 }