[이나경] sprint3

.github/pull_request_template.md

@@ -2,19 +2,38 @@
 
 ### 기본
 
-- [x]
-- []
-- []
+#### 공통
+
+- [x] 브라우저에 현재 보이는 화면의 영역(viewport) 너비를 기준으로 분기되는 반응형 디자인을 적용합니다.
+- [x] PC: 1200px 이상
+- [x] Tablet: 768px ~ 1199px 이하
+- [x] Mobile: 375px 이상 ~ 767px 이하
+- [x] 375px 미만 사이즈의 디자인은 고려하지 않습니다.
+
+#### 랜딩 페이지
+
+- [x] Tablet 사이즈로 작아질 때 “판다마켓” 로고의 왼쪽에 여백 24px, “로그인” 버튼 오른쪽 여백 24px 을 유지할 수 있도록 “판다마켓” 로고와 “로그인” 버튼의 간격이 가까워집니다.
+- [x] Mobile 사이즈로 작아질 때 “판다마켓” 로고의 왼쪽에 여백 16px, “로그인” 버튼 오른쪽 여백 16px 을 유지할 수 있도록 “판다마켓” 로고와 “로그인” 버튼의 간격이 가까워집니다.
+- [x] 화면 영역이 줄어들면 “Privacy Policy”, “FAQ”, “codeit-2024”이 있는 영역과 SNS 아이콘들이 있는 영역의 간격이 줄어듭니다.
+
+#### 로그인, 회원가입 페이지 공통
+
+- [x] Tablet 사이즈에서 내부 디자인은 PC사이즈와 동일합니다.
+- [x] Mobile 사이즈에서 좌우 여백 16px 제외하고 내부 요소들이 너비를 모두 차지합니다.
+- [x] Mobile 사이즈에서 내부 요소들의 너비는 기기의 너비가 커지는 만큼 커지지만 400px을 넘지 않습니다.
+
+---
 
 ### 심화
 
-- [x]
-- []
+- [x] 페이스북, 카카오톡, 디스코드, 트위터 등 SNS에서 Linkbrary 랜딩 페이지(`/`) 공유 시 좌측 예시와 같은 미리보기를 볼 수 있도록 랜딩 페이지 메타 태그를 설정해 주세요.
+- [x] 미리보기에서 제목은 “판다 마켓”, 설명은 “일상의 모든 물건을 거래해보세요”로 설정합니다.  
+       주소와 이미지는 자유롭게 설정하세요.
 
 ## 주요 변경사항
 
--
--
+- 미션 2에서 코드 리뷰 받은 것 p -> div로 수정
+- html 파일 코드가 너무 복잡한 것 같아서 html 코드도 일부 수정하였습니다.
 
 ## 스크린샷
 

src/css/auth.css

@@ -144,3 +144,15 @@ body {
   text-decoration-line: underline;
   cursor: pointer;
 }
+
+@media (max-width: 767px) {
+  .auth__logo {
+    width: 198px;
+    height: 66px;
+  }
+
+  .auth__wrapper {
+    padding: 0 16px;
+    max-width: 400px;
+  }
+}

src/css/global.css

@@ -10,6 +10,13 @@
     'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
 }
 
+html,
+body {
+  width: 100%;
+  max-width: 100vw;
+  overflow-x: hidden;
+}
+
 body {
   background-color: #fff;
   color: #374151;

src/css/index.css

@@ -1,21 +1,15 @@
 /* header */
 
 .header {
+  width: 100%;
   height: 70px;
-  padding: 0 200px;
   background: #fff;
   display: flex;
   align-items: center;
   position: fixed;
-  width: 100%;
-}
-
-.header__navbar {
-  display: flex;
-  gap: 839px;
-  align-items: center;
-  max-width: 1120px;
-  margin: 0 auto;
+  justify-content: space-between;
+  padding: 0 300px;
+  top: 0px;
 }
 
 .header__login-button {
@@ -45,6 +39,7 @@
   background: #cfe5ff;
   display: flex;
   width: 100%;
+  padding-top: 70px;
 }
 
 .banner__container {
@@ -96,6 +91,7 @@
   overflow: hidden;
   white-space: nowrap;
   cursor: pointer;
+  width: fit-content;
 }
 
 .banner__slogan {
@@ -111,6 +107,12 @@
   padding: 138px;
   display: flex;
   justify-content: center;
+  flex-direction: row;
+}
+
+.feature-content {
+  text-align: right;
+  margin-left: 40px;
 }
 
 .highlight__container {
@@ -120,9 +122,11 @@
   justify-content: space-between;
   align-items: center;
   gap: 32px;
-  width: 988px;
   overflow: hidden;
-  height: 444px;
+}
+
+.highlight:nth-child(3) .highlight__container {
+  flex-direction: row-reverse;
 }
 
 .highlight__image,
@@ -181,13 +185,6 @@
   line-height: 32px;
 }
 
-.highlight__search-content {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  padding-left: 38px;
-}
-
 .highlight__search-image {
   margin-right: 14px;
 }
@@ -265,3 +262,134 @@
 .footer__icon--instagram {
   background-image: url('../assets/images/ic_instagram.svg');
 }
+
+/* 태블릿 + 모바일 */
+@media (max-width: 1199px) {
+  .banner__container {
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+  }
+
+  .banner__slogan {
+    align-items: center;
+  }
+
+  .banner__image {
+    margin-top: auto;
+  }
+
+  .highlight__container {
+    flex-direction: column;
+    align-items: flex-start;
+    text-align: left;
+    width: 100%;
+    background: #ffffff;
+  }
+
+  .highlight__image {
+    margin-left: 0;
+  }
+
+  .highlight__image,
+  .highlight__search-image,
+  .highlight__item-image {
+    width: 100%;
+    height: auto;
+    border-radius: 14px;
+  }
+
+  .highlight__image img {
+    width: 100%;
+    border-radius: 14px;
+  }
+
+  .highlight__title br {
+    display: none;
+  }
+
+  .highlight__register-image {
+    width: 100%;
+    height: auto;
+    border-radius: 14px;
+  }
+
+  .banner__container--bottom {
+    gap: 0;
+  }
+}
+
+/* 태블릿 */
+@media (min-width: 768px) and (max-width: 1199px) {
+  .header {
+    padding: 0 24px;
+  }
+
+  .banner {
+    height: 771px;
+  }
+
+  .banner__slogan {
+    margin-top: 54px;
+  }
+
+  .highlight {
+    padding: 24px;
+  }
+
+  .highlight:nth-child(3) .highlight__container {
+    flex-direction: column;
+    align-items: flex-end;
+  }
+
+  .feature-content {
+    text-align: right;
+  }
+
+  .footer {
+    padding: 20px 200px;
+  }
+}
+
+/* 모바일 */
+@media (max-width: 767px) {
+  .header {
+    padding: 0 16px;
+  }
+
+  .banner {
+    height: 700px;
+  }
+
+  .banner__slogan {
+    margin-bottom: 0px;
+    margin-top: 48px;
+  }
+
+  .highlight {
+    padding: 52px 15px;
+  }
+
+  .highlight:nth-child(3) .highlight__container {
+    flex-direction: column;
+    align-items: flex-end;
+  }
+
+  .br-highlight {
+    display: none;
+  }
+
+  .footer {
+    padding: 32px 100px;
+  }
+
+  .footer__section {
+    position: relative;
+  }
+
+  .footer__copyright {
+    position: absolute;
+    top: 60px;
+    left: 0;
+  }
+}

src/html/index.html

@@ -3,19 +3,40 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="일상의 모든 물건을 거래해보세요" />
+    <meta property="og:title" content="판다 마켓" />
+    <meta property="og:description" content="일상의 모든 물건을 거래해보세요" />
+    <meta
+      property="og:image"
+      content="https://sprint3-panda-market.netlify.app/assets/images/logo.png"
+    />
+    <meta
+      property="og:url"
+      content="https://sprint3-panda-market.netlify.app/html/index.html"
+    />
+    <meta name="twitter:title" content="판다 마켓" />
+    <meta
+      name="twitter:description"
+      content="일상의 모든 물건을 거래해보세요"
+    />
+    <meta
+      name="twitter:image"
+      content="https://sprint3-panda-market.netlify.app/assets/images/logo.png"
+    />
+
+    <meta property="og:type" content="website" />
+
     <title>판다마켓</title>
     <link rel="stylesheet" href="../css/global.css" />
     <link rel="stylesheet" href="../css/index.css" />
     <link rel="stylesheet" href="../css/palette.css" />
   </head>
   <body>
     <header class="header">
-      <div class="header__navbar">
-        <a href="/">
-          <img src="../assets/images/logo.svg" alt="메인 로고" class="logo" />
-        </a>
-        <a href="./login.html" class="header__login-button">로그인</a>
-      </div>
+      <a href="/">
+        <img src="../assets/images/logo.svg" alt="메인 로고" class="logo" />
+      </a>
+      <a href="./login.html" class="header__login-button">로그인</a>
     </header>
 
     <main>
@@ -46,7 +67,9 @@
           </div>
           <div class="highlight__content">
             <span class="highlight__keyword">Hot item</span>
-            <p class="highlight__title">인기 상품을<br />확인해 보세요</p>
+            <p class="highlight__title">
+              인기 상품을 <br class="br-highlight" />확인해 보세요
+            </p>
             <p class="highlight__subtitle">
               가장 HOT한 중고거래 물품을<br />
               판다 마켓에서 확인해 보세요
@@ -57,19 +80,19 @@
 
       <section class="highlight">
         <div class="highlight__container">
-          <div class="highlight__search-content">
+          <div class="highlight__image">
+            <img src="../assets/images/search_img.svg" alt="상품검색 이미지" />
+          </div>
+          <div class="feature-content">
             <span class="highlight__keyword">Search</span>
-            <p class="highlight__title align-right">
-              구매를 원하는<br />상품을 검색하세요
+            <p class="highlight__title">
+              구매를 원하는<br class="br-highlight" />상품을 검색하세요
             </p>
-            <p class="highlight__subtitle align-right">
+            <p class="highlight__subtitle">
               구매하고 싶은 물품은 검색해서<br />
               쉽게 찾아보세요
             </p>
           </div>
-          <div class="highlight__search-image">
-            <img src="../assets/images/search_img.svg" alt="상품검색 이미지" />
-          </div>
         </div>
       </section>
 
@@ -98,7 +121,7 @@
       <section class="banner">
         <div class="banner__container banner__container--bottom">
           <p class="banner__description banner__description--bottom">
-            믿을 수 있는<br />
+            믿을 수 있는<br class="br-bottom-banner" />
             판다마켓 중고 거래
           </p>
           <img

src/html/login.html

@@ -56,7 +56,7 @@
         </form>
 
         <div class="auth__social">
-          <p class="auth__social-title">간편 로그인하기</p>
+          <div class="auth__social-title">간편 로그인하기</div>
           <ul class="auth__social-buttons">
             <li>
               <a href="https://www.google.com/" class="auth__social-button">