[이승민] Sprint2

.github/pull_request_template.md

@@ -2,14 +2,23 @@
 
 ### 기본
 
-- [x]
-- []
-- []
+- [0] 아래로 스크롤 해도 상단 네비게이션 바(Global Navigation Bar)가 최상단에 고정됩니다.
+- [0] 판다마켓" 클릭 시 루트 페이지("/")로 이동합니다.(새로고침)
+- [0] 로그인 페이지, 회원가입 페이지 모두 로고 위 상단 여백이 동일합니다.
+- [0] SNS 아이콘들은 클릭시 각각 실제 서비스 홈페이지로 이동합니다.
+
+### 로그인 페이지
+
+- [0] "회원가입"버튼 클릭 시 "/signup" 페이지로 이동합니다.
+
+### 회원가입 페이지
+
+- [0] "로그인"버튼 클릭 시 "/login" 페이지로 이동합니다.
 
 ### 심화
 
-- [x]
-- []
+- [x] palette에 있는 color값들을 css 변수로 등록하고 사용해 주세요.
+- [0] 비밀번호 input 요소 위에 비밀번호를 확인할 수 있는 아이콘을 추가해 주세요.
 
 ## 주요 변경사항
 

css/auth.css

@@ -0,0 +1,103 @@
+.auth-container {
+  max-width: 640px;
+  margin: 60px auto;
+  text-align: center;
+}
+
+.logo-container {
+  margin-bottom: 40px;
+}
+
+.auth-form {
+  width: 100%;
+  max-width: 640px;
+  margin: 0 auto;
+}
+
+.input-group {
+  margin-bottom: 24px;
+  text-align: left;
+}
+
+.input-group label {
+  display: block;
+  font-weight: 500;
+  margin-bottom: 16px;
+  font-size: 16px;
+  color: #1f2937;
+}
+
+.input-group input {
+  width: 100%;
+  max-width: 640px;
+  padding: 12px;
+  font-size: 16px;
+  background-color: #f5f5f5;
+  color: #1f2937;
+  border: none;
+  border-radius: 5px;
+  box-sizing: border-box;
+  outline: none;
+}
+
+.input-group input:focus {
+  background-color: #e0e0e0;
+  color: #1f2937;
+}
+
+.password-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.password-wrapper input {
+  width: 100%;
+  padding-right: 40px;
+}
+
+.toggle-password {
+  position: absolute;
+  right: 12px;
+  cursor: pointer;
+}
+
+.auth-button {
+  width: 100%;
+  max-width: 640px;
+  padding: 16px;
+  font-size: 18px;
+  font-weight: 600;
+  border-radius: 40px;
+  background-color: #3692ff;
+  color: white;
+  cursor: pointer;
+  border: none;
+}
+
+.auth-button:hover {
+  background-color: #1967d6;
+}
+
+.social-login {
+  background-color: #e6f2ff;
+  border-radius: 8px;
+  padding: 16px 23px;
+  margin: 24px auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  max-width: 640px;
+}
+
+.social-icons {
+  display: flex;
+  gap: 16px;
+}
+
+.auth-footer {
+  font-weight: 500;
+  font-size: 15px;
+  max-width: 640px;
+  margin: 0 auto;
+}

css/components.css

@@ -0,0 +1,32 @@
+.button {
+  background-color: #3692ff;
+  color: #ffffff;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 12px 24px;
+  border-radius: 8px;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.button:hover {
+  background-color: #1967d6;
+}
+
+.button:focus {
+  background-color: #1251aa;
+}
+
+.button:disabled {
+  background-color: #9ca3af;
+  cursor: default;
+  pointer-events: none;
+}
+
+.pill-button {
+  font-size: 20px;
+  font-weight: 700;
+  border-radius: 999px;
+  padding: 16px 124px;
+}

css/forms.css

@@ -0,0 +1,21 @@
+input {
+  width: 100%;
+  padding: 12px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  font-size: 16px;
+}
+
+input:focus {
+  border-color: #3692ff;
+  outline: none;
+}
+
+.form-container {
+  max-width: 400px;
+  margin: auto;
+  padding: 20px;
+  background: #f9f9f9;
+  border-radius: 8px;
+  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
+}

css/global.css

@@ -0,0 +1,30 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  color: #374151;
+  word-break: keep-all;
+  font-family: "Pretendard", sans-serif;
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
+}
+
+button {
+  background: none;
+  border: none;
+  outline: none;
+  box-shadow: none;
+  cursor: pointer;
+}
+
+.wrapper {
+  max-width: 1200px;
+  margin: 0 auto;
+  width: 100%;
+}

css/home.css

@@ -0,0 +1,52 @@
+.banner {
+  background-color: #cfe5ff;
+  height: 540px;
+  display: flex;
+  align-items: center;
+  background-repeat: no-repeat;
+  background-position: 80% bottom;
+  background-size: 55%;
+}
+
+#hero {
+  background-image: url("../images/home/Img_home_top.png");
+}
+
+#bottomBanner {
+  background-image: url("../images/home/Img_home_bottom.png");
+}
+
+#features {
+  padding-bottom: 138px;
+}
+
+.feature {
+  padding: 138px 0;
+  display: flex;
+  align-items: center;
+  gap: 5%;
+}
+
+.feature:nth-child(2) {
+  text-align: right;
+}
+
+.feature-content {
+  flex: 1;
+}
+
+.feature-tag {
+  color: #3692ff;
+  font-size: 18px;
+  line-height: 25px;
+  font-weight: 700;
+  margin-bottom: 12px;
+}
+
+.feature-description {
+  font-size: 24px;
+  font-weight: 500;
+  line-height: 120%;
+  letter-spacing: 0.08em;
+  margin-top: 24px;
+}

css/layout.css

@@ -0,0 +1,40 @@
+header {
+  position: fixed;
+  width: 100%;
+  height: 70px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 200px;
+  background-color: #ffffff;
+  border-bottom: 1px solid #dfdfdf;
+  z-index: 1000;
+}
+
+#loginLinkButton {
+  font-size: 16px;
+  font-weight: 600;
+  border-radius: 8px;
+  padding: 11.5px 23px;
+}
+
+footer {
+  background-color: #111827;
+  color: #9ca3af;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 32px 200px 108px 200px;
+  font-size: 16px;
+}
+
+#footerMenu {
+  display: flex;
+  gap: 30px;
+  color: #e5e7eb;
+}
+
+#socialMedia {
+  display: flex;
+  gap: 12px;
+}