[조아라] sprint7

css/auth.css

@@ -0,0 +1,175 @@
+/* 로그인 & 회원가입 공통 화면 */
+.user_auth_page {
+  display: flex;
+  justify-content: start;
+  align-items: center;
+  flex-direction: column;
+  min-height: 100vh;
+}
+.user_auth_page .logo {
+  width: 396px;
+  height: 132px;
+  background: url('/img/login_signup_logo.png') no-repeat center / contain;
+  margin: 60px 0 40px;
+}
+.user_auth_page .user_auth_container {
+  max-width: 640px;
+  width: 100%;
+}
+.user_auth_page .input_wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.user_auth_page form label {
+  font-weight: 700;
+  font-size: 18px;
+  line-height: 26px;
+  color: var(--gray800);
+}
+.user_auth_page form input {
+  width: 100%;
+  height: 56px;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 56px;
+  color: var(--gray800);
+  padding: 0 24px;
+
+  background-color: var(--gray100);
+  border: none;
+  border-radius: 12px;
+}
+.user_auth_page form input::placeholder {color: var(--gray400);}
+.user_auth_page form input::-webkit-input-placeholder {color: var(--gray400);}
+.user_auth_page form input:-ms-input-placeholder {color: var(--gray400);}
+.user_auth_page form input.error {outline: none; border: 1px solid var(--red);}
+
+.user_auth_page form .input_box {
+  position: relative;
+}
+.user_auth_page form .eye_btn {
+  position: absolute;
+  top: 50%;
+  right: 24px;
+  transform: translateY(-50%);
+  width: 24px;
+  height: 24px;
+  background-image: url('/img/eye_off_ico.svg');
+  background-repeat: no-repeat; 
+  background-position: center;
+  background-size: contain;
+}
+.user_auth_page form .eye_btn.active {
+  background-image: url('/img/eye_on_ico.svg');
+}
+.user_auth_page form .input_wrap + .input_wrap {
+  margin-top: 24px;
+}
+.user_auth_page form .btn {
+  width: 100%;
+  height: 56px;
+  font-weight: 600;
+  font-size: 20px;
+  line-height: 32px;
+  text-align: center;
+  color: var(--gray100);
+  margin-top: 24px;
+  background-color: var(--gray400);
+  border-radius: 40px;;
+}
+.user_auth_page form .btn.active {
+  background-color: var(--blue);
+}
+.user_auth_page .easy_signin_wrap {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  height: 74px;
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 26px;
+  color: var(--gray800);
+  padding: 24px 16px;
+  margin-top: 24px;
+  background-color: #E6F2FF;
+  border-radius: 8px;
+}
+.user_auth_page .easy_signin_btns {
+  display: flex;
+  gap: 16px;
+}
+.user_auth_page .easy_signin_btn {
+  display: flex;
+  gap: 16px;
+  width: 42px;
+  height: 42px;
+  background-repeat: no-repeat; 
+  background-position: center;
+  background-size: contain;
+}
+.user_auth_page .easy_signin_btn.google {
+  background-image: url('/img/login_google_ico.svg');
+}
+.user_auth_page .easy_signin_btn.kakao {
+background-image: url('/img/login_kakao_ico.svg');
+}
+.user_auth_page .go_to_signup, .user_auth_page .go_to_signin {
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 24px;
+  text-align: center;
+  margin-top: 24px;
+}
+.user_auth_page .go_to_signup .signup_btn, .user_auth_page .go_to_signin .signin_btn {
+  color: var(--blue);
+  text-decoration: underline;
+  margin-left: 4px;
+}
+.user_auth_page .error_message {
+  display: none;
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 24px;
+  color: var(--red);
+  margin-top: 8px;
+  padding-left: 16px;
+}
+.user_auth_page .error_message.active {
+  display: block;
+}
+
+@media (max-width: 1199px) {
+  .user_auth_page .user_auth_container {
+    padding: 0 52px;
+  }
+  .user_auth_page .logo {
+    margin: 48px 0 40px;
+  }
+}
+
+@media (max-width: 767px) {
+  .user_auth_page .user_auth_container {
+    max-width: 400px;
+    padding: 0 16px;
+  }
+  .user_auth_page .logo {
+    width: 198px;
+    height: 66px;
+    margin: 24px 0;
+  }
+  .user_auth_page form .input_wrap + .input_wrap {
+    margin-top: 16px;
+  }
+  .user_auth_page .input_wrap {
+    gap: 8px;
+  }
+  .user_auth_page form label{
+    font-size: 14px;
+    line-height: 24px;
+  }
+  .user_auth_page form .btn {
+    margin-top: 16px;
+  }
+}

css/global.css

@@ -0,0 +1,155 @@
+/* :root에 컬러 & 기본 값 변수 세팅 */
+:root {
+  --red: #F74747;
+  --blue: #3692FF;
+  --white: #FFF;
+  --gray900: #111827;
+  --gray800: #1F2937;
+  --gray700: #374151;
+  --gray600: #4B5563;
+  --gray500: #6B7280;
+  --gray400: #9CA3AF;
+  --gray200: #E5E7EB;
+  --gray100: #F3F4F6;
+  --gray50: #F9FAFB;
+}
+
+body {
+  font-family: "Pretendard", sans-serif;
+}
+
+header {
+  position: sticky;
+  top: 0;
+  height: 70px;
+  background-color: var(--white);
+  border-bottom: 1px solid #DFDFDF;
+}
+header .container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  max-width: 1920px;
+  width: 100%;
+  height: 100%;
+  margin: 0 auto;
+  padding: 0 200px;
+}
+header .logo img {
+  width: 153px;
+}
+header .logo img.mo_img {
+  display: none; 
+}
+header .login_btn {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 128px;
+  height: 48px;
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--gray100);
+  border-radius: 8px;
+  background-color: var(--blue);
+}
+
+footer {
+  width: 100%;
+  padding: 32px 32px 108px;
+  background-color: var(--gray900);
+}
+footer .container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  max-width: 1120px;
+  margin: 0 auto;
+}
+footer .copyright {
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 100%;
+  color: var(--gray400);
+  text-align: center;
+}
+footer .popup_box {
+  display: flex;
+  gap: 30px;
+}
+footer .popup_box a {
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 100%;
+  color: var(--gray200);
+}
+footer .link_box {
+  display: flex;
+  gap: 12px;
+}
+footer .link_box a {
+  width: 20px;
+  height: 20px;
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-position: center;
+}
+footer .link_box a.facebook {
+  background-image: url('/img/facebook_ico.svg');
+}
+footer .link_box a.twitter {
+  background-image: url('/img/twitter_ico.svg');
+}
+footer .link_box a.insta {
+  background-image: url('/img/insta_ico.svg');
+}
+footer .link_box a.youtube {
+  background-image: url('/img/youtube_ico.svg');
+}
+
+@media (max-width: 1199px) {
+  header .container {
+    padding: 0 24px;
+  }
+
+  footer .container {
+    max-width: 536px;
+  }
+  footer .copyright {
+    color: var(--gray200);
+  }
+}
+
+@media (max-width: 767px) {
+  header .container {
+    padding: 0 16px;
+  }
+  header .logo img.pc_img {
+    display: none; 
+  }
+  header .logo img.mo_img {
+    display: block; 
+    width: 103px;
+  }
+
+  footer {
+    padding: 32px 32px 30px;
+  }
+  footer .container {
+    flex-wrap: wrap;
+    justify-content: space-between;
+    gap: 59px 0;
+    max-width: none;
+  }
+  footer .copyright {
+    order: 3;
+    width: 100%;
+    text-align: left;
+  }
+  footer .popup_box {
+    order: 1;
+  }
+  footer .link_box {
+    order: 2;
+  }
+}