[강성구] Sprint3

README.md

@@ -6,39 +6,43 @@
 - [x] 피그마 디자인에 맞게 페이지를 만들어 주세요.
 - [x] React와 같은 UI 라이브러리를 사용하지 않고 진행합니다.
 
-#### 로그인 페이지, 회원가입 페이지 공통
-
-- [x] “판다마켓" 로고 클릭 시 루트 페이지(“/”)로 이동합니다.
-- [x] 로그인 페이지, 회원가입 페이지 모두 로고 위 상단 여백이 동일합니다.
-- [x] input 요소에 focus in 일 때, 테두리 색상은 #3692FF입니다.
-- [x] input 요소에 focus out 일 때, 테두리는 없습니다.
-- [x] SNS 아이콘들은 클릭시 각각 실제 서비스 홈페이지로 이동합니다.
-
-#### 로그인 페이지
-
-- [x] “회원가입”버튼 클릭 시 “/signup” 페이지로 이동합니다.
-
-#### 회원가입 페이지
-
-- [x] “로그인”버튼 클릭 시 “/login” 페이지로 이동합니다.
-
-
-### 심화
-
-- [x] palette에 있는 color값들을 css 변수로 등록하고 사용해 주세요.
-- [x] 비밀번호 input 요소 위에 비밀번호를 확인할 수 있는 아이콘을 추가해 주세요.
-
+### 공통
+- [x] 브라우저에 현재 보이는 화면의 영역(viewport) 너비를 기준으로 분기되는 반응형 디자인을 적용합니다.
+    * PC: 1200px 이상
+    * Tablet: 768px 이상 ~ 1199px 이하
+    * Mobile: 375px 이상 ~ 767px 이하
+    * 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] 페이스북, 카카오톡, 디스코드, 트위터 등 SNS에서 Linkbrary 랜딩 페이지(“/”) 공유 시 좌측 예시와 같은 미리보기를 볼 수 있도록 랜딩 페이지 메타 태그를 설정해 주세요.
+- [x] 미리보기에서 제목은 “판다 마켓”, 설명은 “일상의 모든 물건을 거래해보세요”로 설정합니다.
+- [x] 주소와 이미지는 자유롭게 설정하세요
 
 
 ## 스크린샷
-![회원가입 페이지](readmeSource/signin-page.png)
-![로그인 페이지](readmeSource/login-page.png)
+- ![랜딩 페이지 pc](./readmeSource/landing-pc_version.png)
+- ![랜딩 페이지 tablet](./readmeSource/landing-tablet_version.png)
+- ![랜딩 페이지 mobile](./readmeSource/landing-mobile_version.png)
+
+- ![랜딩 페이지 pc](./readmeSource/login-pc_version.png)
+- ![랜딩 페이지 mobile](./readmeSource/login-mobile_version.png)
 
+- ![랜딩 페이지 pc](./readmeSource/signin-pc_version.png)
+- ![랜딩 페이지 mobile](./readmeSource/signin-mobile_version.png)
 
 
 ## 사이트 주소
 - https://storepanda.netlify.app
 
 ## 멘토에게
-- 
+- 메타 태그 설정 시 공유 되는 이미지는 어떻게 설정하나요?
 

index.css

@@ -16,20 +16,21 @@
 }
 
 html {
-    font-size: 24px;
+    font-size: 62.5%;
 }
 
 body {
-    max-width: 1920px;
-    width: 100%;
+    overflow-x: hidden;
     color: var(--font);
     font-family: "Pretendard-Regular", 'Noto Sans';
     font-weight: 500;
+    font-size: 2.4rem;
     margin: 0;
 }
 
 h3 {
     text-decoration: none;
+    margin: 0;
 }
 
 a {
@@ -46,13 +47,13 @@ header .nav {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 0 200px;
+    padding: 0 20rem;
 }
 
 main section {
-    max-width: 1200px;
-    height: 720px;
-    margin: 0 auto;
+    max-width: 120rem;
+    min-height: 72rem;
+    margin: 2.4rem auto;
     display: flex;
     flex-direction: column;
     align-items: start;
@@ -62,29 +63,46 @@ main section {
 .btn {
     background-color: var(--main-color);
     color: var(--font-buton);
-    font-size: 16px;
-    font-weight: 600;
+    font-size: 2rem;
+    font-weight: 700;
     border: 0;
     cursor: pointer;
 }
 
 header .login {
-    padding: 11.5px 23px;
-    border-radius: 8px;
-    padding: 12px 20px;
+    width: 12.8rem;
+    height: 4.8rem;
+    font-size: 1.6rem;
+    font-weight: 600;
+    padding: 1.2rem 2rem;
+    border-radius: 0.8rem;
+    gap: 1rem;
 }
 
+.nav .logo-img {
+    width: 153px;
+    height: 51px;
+    background-image: url(source/images/logo/[email protected]);
+    background-repeat: no-repeat;
+    background-size: cover;
+    margin: 1.5rem 0;
+}
 
 .headline, .footline {
     background-color: var(--background-color);
+    overflow-x: hidden;
 }
 
+.headline .headline-img, .footline .footline-img  {
+    width: 50%;
+    padding-top: 7.2rem;
+} 
+
 .headline .headline-content,
 .footline .footline-content {
-    max-width: 1920px;
-    margin: 0 auto;
+    max-width: 192rem;
+    margin: auto;
     display: flex;
-    /* align-items: center; */
     justify-content: center;
     flex-wrap: wrap;
 }
@@ -94,29 +112,40 @@ header .login {
     display: flex;
     flex-direction: column;
     font-weight: 700;
-    font-size: 40px;
-    line-height: 56px;
-    gap: 32px;
+    font-size: 4rem;
+    line-height: 5.6rem;
+    max-width: 38.4rem;
+    gap: 3.2rem;
+}
+
+.title {
+    margin: 10rem 0 0;
 }
 
 .headline{
-    padding-top: 100px;
+    padding-top: 10rem;
 }
 
 .headline .headline-btn {
-    border-radius: 40px;
-    padding: 16px 124px;
+    border-radius: 4.55rem;
+    /* padding: 1.6rem 12.4rem; */
+    width: 35.5rem;
+    height: 6rem;
 }
 
 .container {
     display: flex;
+    width: 100%;
     align-items: center;
-    flex-wrap: wrap;
-    gap: 64px;
+    gap: 6.4rem;
+}
+
+.container .info-img {
+    width: 50%;
 }
 
 .category {
-    font-size: 18px;
+    font-size: 1.8rem;
     color: var(--main-color);
     font-weight: 700;
 }
@@ -157,7 +186,7 @@ footer .bottom-info{
     background-color: var(--footer-color);
     max-width: 1920px;
     height: 160px;
-    padding: 1.5rem 10vw;
+    padding: 1.5rem 10rem;
 }
 
 .bottom-info .bottom-content {
@@ -170,11 +199,15 @@ footer .bottom-info{
     align-items: center;
 }
 
+.version {
+    color: #676767;
+}
+
 .bottom-content .bottom-nav {
     display: flex;
     gap: 30px;
     text-decoration: none;
-
+    color: #cfcfcf;
 }
 
 .bottom-nav a {
@@ -186,4 +219,127 @@ footer .bottom-info{
     display: flex;
     gap: 12px;
     width: 116px;
+}
+
+
+@media ( width < 1200px) {
+
+    header .nav {
+        padding: 0 1rem;
+    }
+
+    .headline .headline-title, .footline .footline-title {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        max-width: 100%;
+        text-align: center;
+    }
+
+    .headline-title-br {
+        display: none;
+    }
+
+    .headline .headline-img, .footline .footline-img  {
+        width: 120%;
+    } 
+
+    .container .info-img {
+        display: inline-block;
+        width: 100%;
+    }
+
+    .search .container {
+        flex-direction: column;
+    }
+
+    br.title-br {
+        display: none;
+    }
+
+    main section {
+        align-items: center;
+        margin: 10rem 2.4rem;
+        justify-content: center;
+    }
+
+    section .container {
+        flex-direction: column;
+        align-items: start;
+        margin: 0 2.4rem;
+    }
+
+    .container .section-title {
+        font-size: 40px;
+        font-weight: 700;
+        line-height: 56px;
+        letter-spacing: 0.08rem;
+    }
+
+    .search {
+        align-items: center;
+    }
+
+    .search .content {
+        align-self: end;
+    }
+
+    .footline .footline-title {
+        margin-top: 15rem;
+    }
+
+}
+
+@media (min-width: 375px) and (max-width: 767px) {
+    header .nav {
+        padding: 0 1.6rem;
+    }
+
+    .nav .logo-img {
+        width: 103px;
+        height: 35px;
+        background-image: url(source/images/logo/logo-mobile.png);
+        background-repeat: no-repeat;
+        background-size: cover;
+    }
+
+    .headline-title-br {
+        display: block;
+    }
+
+    section .container {
+        margin: 0 1.6rem;
+    }
+
+    .container {
+        flex-direction: column;
+    }
+
+    footer .bottom-info {
+        padding: 3.2rem 3.2rem 6.4rem 3.2rem;
+    }
+
+    .bottom-info .bottom-content {
+        width: 100%;
+        height: 100%;
+        display: grid;
+        grid-template: repeat(2, 1fr) / 2fr 1fr;
+        grid-template-areas: 
+        "nav nav sns"
+        "version . .";
+    }
+
+    .version {
+        grid-area: version;
+        align-self: end;
+    }
+
+    .bottom-nav {
+        grid-area: nav;
+    }
+
+    .sns {
+        grid-area: sns;
+    }
+
 }