[이수연] sprint3

.github/pull_request_template.md

@@ -1,23 +1,30 @@
 ## 요구사항
+
 - Github에 PR(Pull Request)을 만들어서 미션을 제출합니다.
-- Netlify에 파일 배포가 아닌 포크한 Github 레포지토리로 연결합니다.
 - 피그마 디자인에 맞게 페이지를 만들어 주세요.
 - React와 같은 UI 라이브러리를 사용하지 않고 진행합니다.
 
-### 기본
+## 공통
+
+- [x] 브라우저에 현재 보이는 화면의 영역(viewport) 너비를 기준으로 분기되는 반응형 디자인을 적용합니다.
+
+## 랜딩페이지
+
+- [x] Tablet 사이즈로 작아질 때 “판다마켓” 로고의 왼쪽에 여백 24px, “로그인” 버튼 오른쪽 여백 24px을 유지할 수 있도록 “판다마켓” 로고와 “로그인" 버튼의 간격이 가까워집니다.
+- [x] Mobile 사이즈로 작아질 때 “판다마켓” 로고의 왼쪽에 여백 16px, “로그인” 버튼 오른쪽 여백 16px을 유지할 수 있도록 “판다마켓” 로고와 “로그인" 버튼의 간격이 가까워집니다.
+- [x] 화면 영역이 줄어들면 “Privacy Policy”, “FAQ”, “codeit-2024”이 있는 영역과 SNS 아이콘들이 있는 영역의 간격이 줄어듭니다.
 
-- [x] 아래로 스크롤 해도 상단 네비게이션 바(Global Navigation Bar)가 최상단에 고정됩니다.
-- [x] "판다마켓" 클릭 시 루트 페이지("/")로 이동합니다.(새로고침)
-- [x] 로그인 페이지, 회원가입 페이지 모두 로고 위 상단 여백이 동일합니다.
-- [x] SNS 아이콘들은 클릭시 각각 실제 서비스 홈페이지로 이동합니다.
-- [x] "회원가입"버튼 클릭 시 "/signup" 페이지로 이동합니다.
-- [x] "로그인"버튼 클릭 시 "/login" 페이지로 이동합니다.
+## 로그인,회원가입 페이지 공통
 
+- [x] Tablet 사이즈에서 내부 디자인은 PC사이즈와 동일합니다.
+- [x] Mobile 사이즈에서 좌우 여백 16px 제외하고 내부 요소들이 너비를 모두 차지합니다.
+- [x] Mobile 사이즈에서 내부 요소들의 너비는 기기의 너비가 커지는 만큼 커지지만 400px을 넘지 않습니다.
 
 ### 심화
 
-- [x] palette에 있는 color값들을 css 변수로 등록하고 사용해 주세요.
-- [x] 비밀번호 input 요소 위에 비밀번호를 확인할 수 있는 아이콘을 추가해 주세요.
+- [x] 페이스북, 카카오톡, 디스코드, 트위터 등 SNS에서 Linkbrary 랜딩 페이지(“/”) 공유 시 좌측 예시와 같은 미리보기를 볼 수 있도록 랜딩 페이지 메타 태그를 설정해 주세요.
+- [x] 미리보기에서 제목은 “판다 마켓”, 설명은 “일상의 모든 물건을 거래해보세요”로 설정합니다.
+- [x] 주소와 이미지는 자유롭게 설정하세요.
 
 ## 주요 변경사항
 

css/auth.css

@@ -0,0 +1,109 @@
+.auth-page {
+  max-width: 640px;
+  margin: 50px auto;
+}
+
+.auth-logo {
+  display: flex;
+  justify-content: center;
+}
+
+.auth-form {
+  display: flex;
+  flex-direction: column;
+  padding-top: 40px;
+  width: 100%;
+  color: var(--gray900);
+}
+
+.auth-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: var(--lightblue);
+  height: 74px;
+  border-radius: 8px;
+  padding: 16px 23px;
+  color: var(--gray900);
+  font-weight: 500;
+  margin: 24px 0;
+}
+
+.auth-switch {
+  text-align: center;
+}
+
+.logo-img {
+  display: flex;
+  gap: 16px;
+}
+
+input {
+  background-color: var(--gray100);
+  border: none;
+  border-radius: 12px;
+  height: 56px;
+  margin: 16px 0 24px;
+  padding-left: 16px;
+  font-size: 18px;
+  width: 100%;
+}
+
+label {
+  font-size: 18px;
+  font-weight: 600;
+}
+
+#auth-form_btn {
+  background-color: var(--gray400);
+  color: var(--gray100);
+  border: none;
+  border-radius: 40px;
+  padding: 16px 124px 16px;
+  font-size: 20px;
+  font-weight: 600;
+}
+
+#auth-form_btn:hover {
+  background-color: var(--blue);
+}
+
+.toggle-password {
+  position: absolute;
+  right: 24px;
+  cursor: pointer;
+}
+
+.password-wrapper,
+.password-check-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+input:focus {
+  outline-color: var(--blue);
+}
+
+/*Mobile*/
+@media screen and (min-width: 375px) and (max-width: 767px) {
+  .auth-page {
+    padding: 0 16px;
+    max-width: 400px;
+  }
+  .auth-logo > img {
+    max-width: 50%;
+  }
+  label,
+  input {
+    font-size: 14px;
+  }
+}
+
+/*tablet*/
+@media screen and (min-width: 768px) and (max-width: 1199px) {
+  .auth-logo {
+    margin-top: 60px;
+    margin-bottom: 40px;
+  }
+}

css/global.css

@@ -0,0 +1,96 @@
+@import url("https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.min.css");
+
+body {
+  font-family: "Pretendard Variable", Pretendard, -apple-system,
+    BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI",
+    "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Emoji",
+    "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
+  margin: 0 auto;
+  margin-top: 70px;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+:root {
+  --blue: #3692ff;
+  --gray900: #1f2937;
+  --gray700: #374151;
+  --gray600: #4b5563;
+  --gray500: #6b7280;
+  --gray400: #9ca3af;
+  --gray200: #e5e7eb;
+  --gray100: #f3f4f6;
+  --gray50: #f9fafb;
+  --white: #ffffff;
+  --navy: #111827;
+  --background-banner: #cfe5ff;
+  --lightblue: #e6f2ff;
+}
+
+h1 {
+  font-size: 40px;
+  font-weight: 600;
+  line-height: 140%;
+  letter-spacing: 2%;
+  color: var(--gray700);
+}
+
+p {
+  font-size: 24px;
+  line-height: 32px;
+  margin-top: 24px;
+}
+
+nav {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  background: var(--white);
+  margin: 0 auto;
+  padding: 9.5px 200px;
+}
+
+section > img {
+  max-width: 100%;
+}
+
+/*Tablet*/
+@media (max-width: 1199px) {
+  nav {
+    padding: 9.5px 24px;
+  }
+  h1 {
+    font-size: 32px;
+    text-align: left;
+  }
+  h2 {
+    font-size: 18px;
+  }
+  p {
+    font-size: 18px;
+    line-height: 26px;
+  }
+}
+
+/*Mobile*/
+@media (max-width: 767px) {
+  nav {
+    padding: 9.5px 16px;
+  }
+  h1 {
+    font-size: 24px;
+  }
+  h2 {
+    font-size: 16px;
+  }
+  p {
+    font-size: 16px;
+    line-height: 26px;
+  }
+}