Merge pull request #41 from Team-Vivio/fix/LoginAndSignin

[fix] Login, Signup, MyPage fix
Team-Vivio · May 20, 2024 · 548067f · 548067f
2 parents e8bef21 + cb3109a
commit 548067f
Show file tree

Hide file tree

Showing 6 changed files with 67 additions and 50 deletions.
diff --git a/src/styles/LoginPage.module.css b/src/styles/LoginPage.module.css
@@ -10,7 +10,7 @@
 }
 
 .page {
-	margin-top: 141px;
+	margin-top: 14.462vh;
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
@@ -19,7 +19,7 @@
 
 .blurpage {
 	filter: blur(5px);
-	margin-top: 141px;
+	margin-top: 14.462vh;
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
@@ -29,36 +29,38 @@
 
 .logo {
 	cursor: pointer;
+	width: 18vw;
+	height: auto;
 }
 
 .titleWrap {
-	margin-top: 38px;
+	margin-top: 3.897vh;
 	color: #626262;
 	font-family: "NanumSquareRoundOTF";
-	font-size: 25px;
+	font-size: 2.564vh;
 	justify-content: center;
 	font-weight: 800;
-	margin-bottom: 40px;
+	margin-bottom: 4.103vh;
 }
 
 .margin1 {
-	margin-bottom: 20px;
+	margin-bottom: 2.051vh;
 }
 
 .margin2 {
-	margin-bottom: 23px;
+	margin-bottom: 2.359vh;
 }
 
 .btnGoogle {
-	gap: 10px;
+	gap: 1.026vh;
 	box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
 	border: none;
 	background-color: #ffffff;
-	width: 380px;
-	height: 50px;
+	width: 19.792vw;
+	height: 5.128vh;
 	border-radius: 20px;
 	font-family: "NanumSquareRoundOTF";
-	font-size: 15px;
+	font-size: 1.538vh;
 	font-weight: bold;
 	display: flex;
 	justify-content: center;
@@ -67,15 +69,15 @@
 }
 
 .btnKakao {
-	gap: 10px;
+	gap: 1.26vh;
 	box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
 	border: none;
-	width: 380px;
+	width: 19.792vw;
 	background-color: #fee500;
-	height: 50px;
+	height: 5.128vh;
 	border-radius: 20px;
 	font-family: "NanumSquareRoundOTF";
-	font-size: 15px;
+	font-size: 1.538vh;
 	font-weight: bold;
 	display: flex;
 	justify-content: center;
@@ -90,97 +92,97 @@
 .inputWrap {
 	display: flex;
 	flex-direction: row;
-	margin-bottom: 17px;
+	margin-bottom: 1.744vh;
 }
 
 .inputTitle {
-	gap: 8px;
+	gap: 0.821vh;
 	width: 100%;
 	display: flex;
 	justify-content: center;
 	align-items: center;
 	font-family: "NanumSquareRoundOTF";
-	font-size: 15px;
+	font-size: 1.538vh;
 	font-weight: bold;
 }
 
 .textEP1 {
-	padding-left: 10px;
+	padding-left: 0.521vw;
 	font-weight: bold;
 	font-family: "NanumSquareRoundOTF";
-	font-size: 15px;
+	font-size: 1.538vh;
 	border: 1px solid #b2b2b2;
-	width: 370px;
-	height: 41px;
-	margin-right: 55px;
+	width: 19.271vw;
+	height: 4.205vh;
+	margin-right: 2.865vw;
 	border-radius: 20px;
 }
 
 .textEP2 {
-	padding-left: 10px;
+	padding-left: 0.521vw;
 	font-family: "NanumSquareRoundOTF";
 	font-weight: bold;
-	font-size: 15px;
+	font-size: 1.538vh;
 	border: 1px solid #b2b2b2;
-	width: 370px;
-	height: 41px;
-	margin-right: 70px;
+	width: 19.271vw;
+	height: 4.205vh;
+	margin-right: 3.646vw;
 	border-radius: 20px;
 }
 
 .btnLogin {
 	box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
 	border: none;
 	border: none;
-	width: 380px;
-	height: 50px;
+	width: 19.792vw;
+	height: 5.128vh;
 	border-radius: 20px;
 	background-color: #ffd439;
-	margin-bottom: 5%;
+	margin-bottom: 5vh;
 	font-family: "NanumSquareRoundOTF";
-	font-size: 15px;
+	font-size: 1.538vh;
 	font-weight: bold;
 	cursor: pointer;
 }
 
 .bottomText1 {
-	gap: 10px;
+	gap: 0.521vw;
 	text-align: center;
 	justify-content: center;
 	display: flex;
 	font-family: "NanumSquareRoundOTF";
 	font-style: normal;
 	font-weight: 800;
-	font-size: 12px;
+	font-size: 1.231vh;
 	line-height: 160%;
 	/* or 19px */
 
 	color: #bbbbbb;
 }
 
 .bottomText2 {
-	margin-top: 3px;
-	gap: 10px;
+	margin-top: 0.308vh;
+	gap: 0.521vw;
 	text-align: center;
 	justify-content: center;
 	display: flex;
 
 	font-family: "NanumSquareRoundOTF";
 	font-style: normal;
 	font-weight: 800;
-	font-size: 12px;
+	font-size: 1.231vh;
 	line-height: 160%;
 	/* or 19px */
 
 	color: #bbbbbb;
-	padding-right: 40px;
+	padding-right: 2.083vw;
 }
 
 .bottomfont {
 	font-family: "NanumSquareRoundOTF";
 	font-style: normal;
 	font-weight: 800;
-	font-size: 13px;
+	font-size: 1.333vh;
 	line-height: 160%;
 	cursor: default;
 	/* or 21px */

diff --git a/src/styles/Mypage.module.css b/src/styles/Mypage.module.css
@@ -4,6 +4,8 @@
 }
 
 .blurpage {
+	width: 100%;
+	height: 100%;
 	filter: blur(5px);
 	display: flex;
 	overflow: hidden;
@@ -25,15 +27,14 @@
 	overflow-y: hidden;
 	display: flex;
 	flex-direction: column;
-	width: 729px;
+	width: 820px;
 	height: 540px;
 	background: rgba(245, 245, 245, 0.5);
 	border-radius: 60px;
 	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
 }
 
 .scrollbar_Y {
-	width: 729px;
 	overflow-y: scroll;
 }
 
@@ -226,10 +227,11 @@
 	margin-top: 118px;
 	margin-right: 70px;
 	border-left: 1px solid #ffffff;
-	height: 721px;
+	height: 820px;
 }
 
 .informationDiv {
+	margin-left: 130px;
 	margin-top: 100px;
 	height: 800px;
 	width: 640px;

diff --git a/src/styles/Signup.module.css b/src/styles/Signup.module.css
@@ -32,6 +32,8 @@
 }
 
 .logo {
+	width: 350px;
+	height: auto;
 	cursor: pointer;
 }
 

diff --git a/src/views/page/LoginPage/HorizontalLine.js b/src/views/page/LoginPage/HorizontalLine.js
@@ -4,14 +4,24 @@ const HorizonLine = ({ text }) => {
 	return (
 		<div
 			style={{
-				width: "380px",
+				width: "19.792vw",
 				textAlign: "center",
 				borderBottom: "1px solid #aaa",
 				lineHeight: "0.1em",
-				margin: "10px 0 20px",
+				margin: "1.026vh 0 2.051vh",
 			}}
 		>
-			<span style={{ background: "#fff", padding: "0 10px" }}>{text}</span>
+			<span style={{ 
+				background: "#fff",
+			 	padding: "0 10px",
+				fontweight: 500,
+				fontSize: "2.564vh",
+				// lineHeight: "140%",
+				letterSpacing: "0.02em",
+				textTransform: "capitalize",
+				color: "#626262"
+
+			 }}>{text}</span>
 		</div>
 	);
 };

diff --git a/src/views/page/LoginPage/LoginPage.js b/src/views/page/LoginPage/LoginPage.js
@@ -113,13 +113,13 @@ function Home() {
 				</div>
 				<div className={styles.margin1}>
 					<button onClick={googleLoginClick} className={styles.btnGoogle}>
-						<img src={google} alt="googleLogo" />
+						<img src={google} style={{width:"1.25vw", height:"auto"}} alt="googleLogo" />
 						구글로 시작하기
 					</button>
 				</div>
 				<div className={styles.margin2}>
 					<button onClick={kakaoLoginClick} className={styles.btnKakao}>
-						<img src={kakao} alt="kakaoLogo" />
+						<img src={kakao} style={{width:"1.25vw", height:"auto"}} alt="kakaoLogo" />
 						카카오로 시작하기
 					</button>
 				</div>

diff --git a/src/views/page/MyPage/MyPage.js b/src/views/page/MyPage/MyPage.js
@@ -284,16 +284,17 @@ function MyPage() {
 					src={background}
 					style={{
 						position: "fixed",
-						width: window.innerWidth,
-						height: window.innerHeight,
+						width: "100%",
+						height: "100%",
+						overflow:"hidden",
 						objectFit: "cover",
 						zIndex: -1,
 					}}
 				/>
 				<div
 					className={styles.scrollbar_Y}
 					style={{
-						width: 729,
+						width: "42vw",
 						height: window.innerHeight - 178,
 						paddingRight: 30,
 						overflowX: "hidden",
-Original file line number
+Diff line change
@@ Expand Up / @@ -32,6 +32,8 @@ @@
     }
     .logo {
+    	width: 350px;
+    	height: auto;
     	cursor: pointer;
     }
@@ Expand Down @@