[여수경] Sprint22 스프린트 미션 2

.gitignore

@@ -0,0 +1,4 @@
+.DS_Store
+._.DS_Store
+**/.DS_Store
+**/._.DS_Store

css/auth.css

@@ -0,0 +1,105 @@
+body {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  gap: 40px;
+}
+.auth-container {
+  display: flex;
+  flex-direction: column;
+  gap: 40px;
+  flex-basis: 640px;
+  flex-shrink: 1;
+}
+.home-link {
+  width: fit-content;
+  margin: 0 auto;
+}
+.logo {
+  width: 396px;
+  height: 132px;
+}
+.auth-form {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  /*  */
+  width: 640px;
+}
+.input-field {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+
+  font-weight: 700;
+  font-size: 18px;
+  line-height: 1.4;
+}
+.input-field input {
+  background-color: var(--secondary-grey-color-100);
+  padding-left: 24px;
+  width: 100%;
+  height: 56px;
+  border-radius: 12px;
+}
+.password-container {
+  position: relative;
+}
+.password-container input {
+  padding-right: 48px;
+}
+.password-container .btn-visibility {
+  position: absolute;
+  top: 50%;
+  right: 24px;
+  transform: translateY(-50%);
+}
+.auth-form .submit-btn {
+  padding: 16px 0;
+  text-align: center;
+  width: 100%;
+  background-color: var(--primary-color-100);
+  color: #fff;
+  border-radius: 40px;
+  font-weight: 600;
+  font-size: 20px;
+  line-height: 1.6;
+}
+.auth-container .short-cut {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #e6f2ff;
+  padding: 16px 23px;
+}
+.auth-container .short-cut p {
+  flex-grow: 1;
+  font-weight: 500;
+  line-height: 26px;
+  color: var(--secondary-grey-color-800);
+}
+.auth-container .short-cut .sns-list {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+}
+.auth-container .short-cut .sns-list .sns {
+  width: 42px;
+}
+.auth-container .helper-text {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 14px;
+  line-height: 24px;
+}
+.auth-container .helper-text p {
+  color: var(--secondary-grey-color-800);
+}
+.auth-container .helper-text p a {
+  color: var(--primary-color-100);
+  text-decoration: underline;
+}

css/common.css

@@ -0,0 +1,51 @@
+/* 공통 스타일 */
+* {
+  margin: 0;
+  padding: 0;
+  font-size: 16px;
+  color: #374151;
+  text-decoration: none;
+  box-sizing: border-box;
+  font-family: 'Pretendard Variable', Pretendard, -apple-system,
+    BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI',
+    'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
+}
+:root {
+  --primary-color-100: #3692ff;
+  --primary-color-200: #1967d6;
+  --primary-color-300: #1251aa;
+  --error-red-color: #f74747;
+  --secondary-grey-color-900: #111827;
+  --secondary-grey-color-800: #1f2937;
+  --secondary-grey-color-700: #374151;
+  --secondary-grey-color-600: #4b5563;
+  --secondary-grey-color-500: #6b7280;
+  --secondary-grey-color-400: #9ca3af;
+  --secondary-grey-color-200: #e5e7eb;
+  --secondary-grey-color-100: #f3f4f6;
+  --secondary-grey-color-50: #f9fafb;
+}
+.btn {
+  cursor: pointer;
+}
+.btn.blue {
+  background-color: var(--primary-color-100);
+  color: #fff;
+}
+.img-wrap {
+  display: flex;
+}
+img {
+  display: block;
+  max-width: 100%;
+}
+
+/* 섹션 공통 스타일 */
+section {
+  display: flex;
+}
+section .inner {
+  margin: 0 auto;
+  display: flex;
+  justify-content: space-evenly;
+}

PandaMatket/css/main.css → css/main.css

@@ -1,42 +1,12 @@
-/* 공통 스타일 */
-* {
-  margin: 0;
-  padding: 0;
-  font-size: 16px;
-  color: #374151;
-  text-decoration: none;
-  box-sizing: border-box;
-  font-family: 'Pretendard Variable', Pretendard, -apple-system,
-    BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI',
-    'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
-}
-:root {
-  --primary-color-100: #3692ff;
-  --primary-color-200: #1967d6;
-  --primary-color-300: #1251aa;
-  --error-red-color: #f74747;
-}
-.btn {
-  cursor: pointer;
-}
-.btn.blue {
-  background-color: var(--primary-color-100);
-  color: #fff;
-}
-ol,
-ul,
-li {
-  list-style: none;
-}
-.img-wrap {
-  display: flex;
-}
 /* 헤더 스타일 */
 header {
+  position: sticky;
+  top: 0;
   height: 70px;
   display: flex;
   justify-content: center;
   align-items: center;
+  background-color: #fff;
 }
 header .gnb {
   display: flex;
@@ -49,6 +19,10 @@ header .gnb .logo {
   align-items: center;
   justify-content: center;
 }
+header .gnb .logo a {
+  width: 153px;
+  height: 53px;
+}
 header .gnb a.btn_login {
   display: flex;
   justify-content: center;
@@ -58,15 +32,6 @@ header .gnb a.btn_login {
   height: 48px;
   border-radius: 8px;
 }
-/* 섹션 공통 스타일 */
-section {
-  display: flex;
-}
-section .inner {
-  margin: 0 auto;
-  display: flex;
-  justify-content: space-evenly;
-}
 /* 배너 섹션 스타일 */
 section.banner {
   align-items: flex-end;
@@ -120,13 +85,14 @@ section.main .inner {
   background-color: #fcfcfc;
   border-radius: 12px;
 }
+section.main .inner img {
+  width: 579px;
+}
 section.main .inner .info {
   display: flex;
   flex-direction: column;
   justify-content: center;
   gap: 12px 24px;
-  /* 자간 확인 필요 */
-  /* letter-spacing: 0.05rem; */
 }
 /* 리버스 스타일 */
 section.main .inner.reverse {
@@ -143,6 +109,7 @@ section.main .inner .info .title {
   font-size: 2.5rem; /* 40px */
   font-weight: 700;
   line-height: 1.4;
+  letter-spacing: 0.08em;
 }
 section.main .inner .info .description {
   font-size: 1.5rem; /* 24px; */