React 김준석 sprint7

.gitignore

@@ -0,0 +1,2 @@
+/products/node_modules/
+/products/dist/

css/global.css

@@ -0,0 +1,44 @@
+@import url("./reset.css");
+
+
+:root {
+  --color-banner-bg: #CFE5FF;
+  --color-footer-bg: #111827;
+  --color-section-bg: #fcfcfc;
+  --color-simple-lb: #E6F2FF;
+
+  --white: #FFFFFF;
+
+  --blue-100: #3692FF;
+  --blue-200: #1967D6;
+  --blue-300: #1251AA;
+
+  --red: #f74747;
+
+  --gray-50: #F9FAFB;
+  --gray-100: #F3F4F6;
+  --gray-200: #E5E7EB;
+  --gray-300: #D1D5DB;
+  --gray-400: #9CA3AF;
+  --gray-500: #6B7280;
+  --gray-600: #4B5563;
+  --gray-700: #374151;
+  --gray-800: #1F2937;
+  --gray-900: #111827;
+
+  --login_bt_height: clamp(38px, 3.7vw, 48px);
+}
+
+/*---------------font------------*/
+
+@font-face {
+    font-family: 'ROKAFSans';
+    font-weight: 400;
+    src: url('../fonts/ROKAFSansMedium.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'ROKAFSans';
+    font-weight: 700;
+    src: url('../fonts/ROKAFSansBold.woff') format('woff');
+}

css/pages/auth.css

@@ -0,0 +1,195 @@
+
+
+.container{
+  width: 640px;
+  height: 670px;
+  margin: 0 auto;
+}
+
+
+
+
+.title{
+  width: 396px;
+  height: 132px;
+  margin: 60px auto 40px auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.title img{
+  width: 103.53px;
+  height: 103.88px;
+}
+
+.title h1{
+  font-family: "ROKAFSans";
+  font-weight: 700;
+  font-size: 66.34px;
+  color: var(--blue-100);
+
+}
+
+
+
+
+
+.input_box{
+  margin-bottom: 24px;
+  font-family: "pretendard";
+  color: var(--gray-800);
+}
+
+.input_box label{
+  display: block;
+  font-weight: 700;
+  font-size: 18px;
+  margin-bottom: 16px;
+}
+
+.input_box input{
+  width: 100%;
+  height: 56px;
+  border-radius: 12px;
+  border: none;
+  background-color: var(--gray-100);
+  padding: 16px 24px;
+  font-size: 16px;
+
+}
+
+.password_input_box, .password_confirm_input_box{
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.password_input_box .img_box,
+.password_confirm_input_box .img_box{
+  position: absolute;
+  right: 24px;
+  width: 24px;
+  height: 24px;
+}
+
+button{
+  width: 100%;
+  height: 56px;
+  border: none;
+  border-radius: 40px;
+  background-color: var(--blue-100);
+
+  font-family: "pretendard";
+  font-size: 20px;
+  font-weight: 600;
+  color: var(--gray-100);
+  margin-bottom: 24px;
+}
+
+button.inactive{
+  cursor: default;
+  background-color: var(--gray-400);
+
+}
+
+
+.simple_login_box{
+  width: 100%;
+  height: 74px;
+  padding: 16px 23px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: var(--color-simple-lb);
+  border-radius: 8px;
+  border: none;
+  font-family: "pretendard";
+  font-size: 16px;
+  font-weight: 500;
+  margin-bottom: 24px;
+}
+
+
+.signup_box, .login_box{
+  text-align: center;
+  margin: 0 auto;
+  font-family: "pretendard";
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--gray-800);
+}
+
+.signup_box a{
+  color: var(--blue-100);
+  text-decoration: underline;
+}
+
+.input_box .email_empty, .input_box .email_wrong,
+.input_box .password_empty, .input_box .password_wrong,
+.input_box .password_confirm_wrong, .input_box .nickname_empty{
+  border: 1.5px solid var(--red);
+}
+
+.email_empty_message, .email_wrong_message,
+.password_empty_message, .password_wrong_message,
+.password_confirm_wrong_message, .nickname_empty_message{
+  color: var(--red);
+  display: block;
+  font-family: "pretendard";
+  font-size: 14px;
+  font-weight: 600;
+  padding-top: 16px;
+  padding-left: 16px;
+}
+
+.display_none{
+  display: none;
+}
+
+.display_block{
+  display: block;
+}
+
+
+
+/* -------------------------------------
+--------------  모바일  -----------------
+---------------------------------------- */
+
+
+
+@media (max-width: 767px){
+  .container{
+    width: clamp(343px, 50vw, 400px);
+    height: 553px;
+    margin: 0 auto;
+    padding: 0 16px;
+    box-sizing: content-box;
+  }
+  .input_box{
+    margin-bottom: 16px;
+
+  }
+
+  .title{
+    width: 198px;
+    height: 66px;
+    margin: 24px auto 24px auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .title img{
+    width: 51.76px;
+    height: 51.94px;
+  }
+
+  .title h1{
+
+    font-size: 33.17px;
+    color: var(--blue-100);
+
+  }
+}