[백승렬] Week 3

weekly_mission/css/login_signup.css → css/auth.css

@@ -1,17 +1,6 @@
-/* 전역 설정 */
-*{
-	box-sizing: border-box;
-}
-/*End of: 전역 설정 */
-
-/* 버튼 설정 */
-button{
-	cursor: pointer;
-}
-/* End of: 버튼 설정 */
 
 /* 페이지 전체(배경) 설정 */
-.background{
+.auth-background{
 	background-color: #f0f6ff;
 	width: 100%;
 	height: 982px;
@@ -36,7 +25,6 @@ button{
 	align-items: center;
 	justify-content: space-between;
 }
-
 .signup-content{
 	position: absolute;
 	top: 238px;
@@ -52,21 +40,24 @@ button{
 /* End of: 페이지 컨텐츠 설정 */
 
 /* 프레임 설정(페이지 로그인과 소셜 로그인으로 각각을 구성) */
-.frame1{
+.auth__login-form{
 	width: 100%;
+	height: 393px;
 	display: flex;
 	flex-direction: column;
 	align-items: center;
 	justify-content: space-between;
 }
-.login-content > .frame1{
-	height: 393px;
-}
-.signup-content > .frame1{
+.auth__signup-form{
+	width: 100%;
 	height: 529px;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: space-between;
 }
 
-.frame2{
+.auth__social-auth{
 	width: 100%;
 	height: 66px;
 	background-color: #E7EFFB;
@@ -80,8 +71,8 @@ button{
 }
 /* End of: 프레임 설정(페이지 로그인과 소셜 로그인으로 각각을 구성) */
 
-/* frame1 안의 Linkbrary로고와 연결링크 구성 */
-.logo-and-link{
+/* form 안의 Linkbrary로고와 연결링크 구성 */
+.auth-route{
 	max-width: 218px;
 	width: 100%;
 	height: 78px;
@@ -90,18 +81,17 @@ button{
 	align-items: center;
 	justify-content: space-between;
 }
-.logo-and-link > .logo{
+.auth-route__home{
 	max-width: 210px;
 	width: 100%;
 	height: 38px;
 }
-.logo > img{
+.auth-route__home > img{
 	max-width: 210px;
 	width: 100%;
 	height: 38px;
 }
-
-.logo-and-link > .link-container{
+.auth-route__hyperlink{
 	max-width: 220px;
 	width: 100%;
 	height: 24px;
@@ -110,42 +100,42 @@ button{
 	align-items: flex-start;
 	justify-content: center;
 }
-.link-container > .non-link{
+.auth-route__hyperlink > .non-link{
 	max-width: 123px;
 	width: 100%;
 	height: 24px;
 	font-weight: 400;
-	font-size: min(3vw, 14px);
+	font-size: 14px;
 	font-family: "Pretendard";
 	line-height: 24px;
 	letter-spacing: -1px;
 }
-.link-container > .link{
+.auth-route__hyperlink > .link{
 	max-width: 90px;
 	width: 100%;
 	height: 19px;
 	font-weight: 600;
-	font-size: min(3vw, 15px);
+	font-size: 15px;
 	font-family: "Pretendard";
 	line-height: 19px;
 	color: #6D6AFE;
 	letter-spacing: -1.2px;
 	word-spacing: -1px;
 }
-/* End of: frame1 안의 Linkbrary로고와 연결링크 구성 */
+/* End of: form 안의 Linkbrary로고와 연결링크 구성 */
 
 /* 사용자 입력 폼 */
-.login-content .form{
+.login-contents__input-form{
 	max-width: 400px;
 	width: 100%;
-	height: 202px;
+	height: 225px;
 	display: flex;
 	flex-direction: column;
 	align-items: center;
 	justify-content: space-between;
 }
 
-.signup-content .form{
+.signup-content__input-form{
 	max-width: 400px;
 	width: 100%;
 	height: 338px;
@@ -157,47 +147,76 @@ button{
 /* End of 사용자 입력 폼 */
 
 /* 입력 필드 디자인 */
-.input-frame{
+.auth__input-entry{
 	max-width: 400px;
 	width: 100%;
-	height: 89px;
+	height: 112px;
 	display: flex;
 	flex-direction: column;
 	align-items: flex-start;
 	justify-content: space-between;
 }
 
-.small-text{
+.auth__label{
 	font-weight: 400;
-	font-size: min(3vw, 14px);
+	font-size: 14px;
 	font-family: "Pretendard";
 }
 
-.input-frame > .small-text{
+.auth__input-entry > .auth__label{
 	line-height: 17px;
 }
 
 /* End of 입력 필드 디자인 */
 
+/* 에러메시지 디자인 */
+/* 입력필드 Wrapper: 폼의 입력 + 에러메시지 출력 영역 */
+.auth__input-wrapper{
+	max-width: 400px;
+	width: 100%;
+	height: 83px;
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	justify-content: space-between;
+}
+
+/* 에러 메시지 디자인 */
+.error-message {
+    color: #FF5B56;
+    font-size: 14px;
+	font-weight: 400;
+	font-family: 'Pretendard';
+    height: 17px;
+}
+/* End of: 에러메시지 디자인 */
+
+
 /* 사용자 입력  */
 .input-binder{
 	width: 100%;
 	height: 60px;
 	position: relative;
 }
 
-.user-input{
+.auth__input-field{
 	width: 100%;
 	height: 60px;
 	border-radius: 8px;
-	border: 1px solid #CCD5E3;
+	border: 1px solid ;
 	font-size: 16px;
 	font-weight: 400;
 	line-height: 24px;
 	padding: 18px 15px 18px 15px;
 }
+.auth__input-border--default{
+	border-color: #CCD5E3;
+}
+.auth__input-border--error{
+	border-color: #FF5B56;
+}
 
-.user-input:focus{
+.auth__input-field:focus{
 	border-color: #6D6AFE;
 	outline:none;
 }
@@ -210,7 +229,7 @@ button{
 /* End of: 사용자 입력 */
 
 /* 제출 버튼 */
-.submit-button{
+.auth__submit-button{
 	max-width: 400px;
 	width: 100%;
 	height: 53px;
@@ -223,21 +242,20 @@ button{
 	align-items: center;
 	justify-content: center;
 }
-
-.submit-button > .label{
-	font-size: min(3vw, 18px);
+.auth__submit-button > p{
+	font-size: 18px;
 	font-weight: 600;
 	color: #f5f5f5;
 	font-family: 'Pretendard';
 }
 /* End of: 제출 버튼 */
 
 /* 소셜로그인 */
-.frame2 > .small-text{
+.auth__social-auth > .auth__label{
 	color: #373740;
 }
 
-.frame2 > .logos{
+.auth__social-link{
 	max-width: 100px;
 	width: 100%;
 	height: 42px;
@@ -248,7 +266,6 @@ button{
 }
 /* End of: 소셜로그인 */
 
-
 /* Tablet용 페이지 크기 설정 */
 @media(max-width: 1199px){
 	.login-content{

weekly_mission/css/footer.css → css/footer.css

@@ -1,22 +1,17 @@
-*{
-	box-sizing: border-box;
-}
 
 .footer {
 	width: 100%;
 	height: 280px;
 	padding-top: 120px;
 }
-
-.footer-frame {
+.footer__frame {
 	width: 100%;
 	max-width: 1920px;
 	height: 160px;
 	background-color: #111322;
 	padding: 32px 104px 64px 104px;
 }
-
-.footer-components {
+.footer__contents {
 	height: 20px;
 	display: flex;
 	flex-wrap: wrap;
@@ -27,68 +22,57 @@
 	font-size: 16px;
 	font-weight: 400;
 }
-
-.footer-codeit {
+.footer__codeit {
 	height: 20px;
 	color: #676767;
 }
-
-.footer-linkbox {
+.footer__linkbox {
 	display: flex;
 	height: 20;
 	gap: 30px;
 }
-
-.footer-policy{
+.footer__policy{
 	color: #cfcfcf;
 	text-decoration-line: none;
-	cursor: pointer;
 }
-.footer-FAQ{
+.footer__FAQ{
 	color: #cfcfcf;
 	text-decoration-line: none;
-	cursor: pointer;
 }
-
-.footer-Icons {
+.footer__icon-box {
 	display: flex;
 	gap: 12px;
 }
 
-.footer-icon{
-	width:20px;
-	cursor: pointer;
-}
-
 @media(max-width: 767px){
 	.footer{
 		height: 200px;
 		padding-top: 40px;
 	}
-	.footer-frame{
+	.footer__frame{
 		padding: 32px 32px 32px 32px;
 	}
-	.footer-components {
+	.footer__contents {
 		height: 96px;
 		position: relative;
 		font-family: 'Acme';
 		font-size: 16px;
 		font-weight: 400;
 	}
-	.footer-linkbox {
+	.footer__linkbox {
 		position: absolute;
 		top: 0;
 		left: 0;
 		display: flex;
 		height: 20;
 		gap: 30px;
 	}
-	.footer-codeit {
+	.footer__codeit {
 		position: absolute;
 		bottom: 0;
 		left: 0;
 	}
-	.footer-Icons{
+	.footer__icon-box{
 		position: absolute;
 		top: 0;
 		right: 0;

css/global.css

@@ -0,0 +1,12 @@
+/* 전역 설정 */
+*{
+	box-sizing: border-box;
+}
+
+/* 클릭으로 동작 -> 커서모양 변경으로 알림 */
+a{
+	cursor: pointer;
+}
+button{
+	cursor: pointer;
+}