codeit-bootcamp-frontend · GANGYIKIM · Mar 19, 2025 · Mar 12, 2025 · Mar 12, 2025 · Mar 15, 2025
diff --git a/README.md b/README.md
@@ -1,43 +1,50 @@
-## 판다마켓 2
+## 판다마켓 3
 
 **🌐 배포 주소 : https://myungjiwoo-pandamarket.netlify.app/**
 
 ### 기본 요구사항
 
 - [x] Github의 PR을 만들어서 미션을 제출한다.
-- [x] Netlify에 파일 배포가 아닌 포크한 Github 레포지토리로 연결한다.
 - [x] 피그마 디자인에 맞게 페이지를 만든다.
 - [x] UI 라이브러리를 사용하지 않고 진행한다.
 
 ### 체크 리스트 (기본)
 
 **공통**
 
-- [x] 아래로 스크롤 해도 상단 navbar가 최상단에 고정된다.
-- [x] "판다마켓" 클릭 시 루트 페이지("/")로 이동한다. (새로고침)
-- [x] 로그인 페이지, 회원가입 페이지 모두 로고 위 상단 여백이 동일하다.
-- [x] SNS 아이콘들은 클릭시 각각 실제 서비스 홈페이지로 이동한다.
+- [x] 브라우저에 현재 보이는 화면의 영역 너비를 기준으로 분기되는 반응형 디자인을 적용한다.
+  - PC: 1200px ~
+  - Tablet: 768px ~ 1199px
+  - Mobile: 375px ~ 767px
+  - 375px 미만 사이즈의 디자인은 고려하지 않는다.
 
-**로그인 페이지**
+**랜딩 페이지**
 
-- [x] "회원가입" 버튼 클릭 시 "/signup" 페이지로 이동한다.
+- [x] Tablet 사이즈로 작아질 때 "판다마켓" 로고의 왼쪽에 여백 "24px", "로그인" 버튼 오른쪽 여백 "24px"을 유지할 수 있도록 "판다마켓" 로고와 "로그인" 버튼의 간격이 가까워진다.
+- [x] Mobile 사이즈로 작아질 때 "판다마켓" 로고의 왼쪽에 여백 "16px", "로그인" 버튼 오른쪽 여백 "16px"을 유지할 수 있도록 "판다마켓" 로고와 "로그인" 버튼의 간격이 가까워진다.
+- [x] 화면 영역이 줄어들면 "Privacy Policy", "FAQ", "codeit-2024"이 있는 영역과 SNS 아이콘들이 있는 영역의 간격이 줄어든다.
 
-**회원가입 페이지**
+**로그인, 회원가입 페이지 공통**
 
-- [x] "로그인" 버튼 클릭 시 "/login" 페이지로 이동한다.
+- [x] Tablet 사이즈에서 내부 디자인은 PC 사이즈와 동일하다.
+- [x] Mobile 사이즈에서 좌우 여백 16px을 제외하고 내부 요소들이 너비를 모두 차지한다.
+- [x] Mobile 사이즈에서 내부 요소들의 너비는 기기의 너비가 커지는 만큼 커지지만 400px을 넘지 않는다.
 
 ### 체크 리스트 (심화)
 
-- [x] palette에 있는 color 값들을 css 변수로 등록하고 사용한다.
-- [x] 비밀번호 input 요소 위에 비밀번호를 확인할 수 있는 아이콘을 추가한다.
+- [x] 페이스북, 카카오톡, 디스코드, 트위터 등 SNS에서 Linkbrary 랜딩 페이지("/") 공유 시 미리보기를 볼 수 있는 랜딩 페이지 메타 태그를 설정한다.
+- [x] 미리보기에서 제목은 "판다 마켓", 설명은 "일상의 모든 물건을 거래해보세요"로 설정한다.
+- [x] 주소와 이미지는 자유롭게 설정한다.
 
 ### 지난 코드 리뷰
 
-- [x] notoSans 폰트 삭제. Pretendard 폰트만 사용.
-- [x] 페이지에 대응하는 css 파일을 만들고 내부적으로 해당 페이지 구현을 위해 필요한 css 들을 import하는 방식으로 수정
-      ➡️ 만약 css를 분리할거라면, 분리된 스타일 파일에 media query 문도 추가하기.
-- [x] alt 속성을 이미지 내용이 드러나도록 수정.
-- [x] sns 아이콘들을 list로 마크업.
-- [x] 이미지 파일명 일관성있게 수정.
-- [x] 디자인 구현에 불필요한 값들은 삭제.
-- [x] css에서 소수점 사용 지양.
+- [x] alt 속성명 수정하기 (가능한 해당 이미지를 잘 표현할 수 있는 문자열)
+- [x] favicon 배경 삭제
+- [x] 여백 없이 로고 이미지 추출
+- [x] 이미지, 아이콘 파일 네이밍 수정
+- [x] 태그 간 계층 구조를 명확하게 개행하기
+- [x] 작성한 비밀번호 확인하는 버튼의 이미지 태그를 button 요소로 변경
+- [x] 불필요한 주석 삭제하기
+- [x] 태그 선택자 대신에 class 사용하기
+- [x] 네이밍 규칙 통일하기 (카멜 케이스 vs 파스칼 케이스)
+- [x] 불필요한 import 삭제하기 (reset.css)
diff --git a/images/Img_logo.png b/images/Img_logo.png
diff --git a/images/Img_home_01.png → images/home_01.png b/images/Img_home_01.png → images/home_01.png
diff --git a/images/Img_home_02.png → images/home_02.png b/images/Img_home_02.png → images/home_02.png
diff --git a/images/Img_home_03.png → images/home_03.png b/images/Img_home_03.png → images/home_03.png
diff --git a/images/img_home_banner_bottom.png → images/home_banner_bottom.png b/images/img_home_banner_bottom.png → images/home_banner_bottom.png
diff --git a/images/img_home_banner_top.png → images/home_banner_top.png b/images/img_home_banner_top.png → images/home_banner_top.png
diff --git a/images/icon_favicon.ico b/images/icon_favicon.ico
diff --git a/images/icon_favicon.png b/images/icon_favicon.png
diff --git a/images/btn_visibility_on.png → images/icon_visibility_on.png b/images/btn_visibility_on.png → images/icon_visibility_on.png
diff --git a/images/logo.png b/images/logo.png
diff --git a/images/preview.png b/images/preview.png
diff --git a/index.html b/index.html
@@ -3,6 +3,27 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="title" content="판다 마켓" />
+    <meta name="description" content="일상의 모든 물건을 거래해보세요" />
+    <meta name="keywords" content="판다 마켓, 중고 거래, 일상 물건" />
+    <meta property="og:title" content="판다 마켓" />
+    <meta property="og:description" content="일상의 모든 물건을 거래해보세요" />
+    <meta
+      property="og:image"
+      content="https://myungjiwoo-pandamarket.netlify.app/images/preview.png"
+    />
+    <meta
+      property="og:url"
+      content="https://myungjiwoo-pandamarket.netlify.app/"
+    />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content="판다 마켓" />
+    <meta
+      name="twitter:description"
+      content="일상의 모든 물건을 거래해보세요"
+    />
+    <meta name="twitter:image" content="/images/preview.png" />
+
     <link
       rel="stylesheet"
       as="style"
@@ -11,13 +32,13 @@
     />
     <link rel="stylesheet" href="styles/index/index.css" />
     <title>판다마켓</title>
-    <link rel="icon" href="/images/icon_favicon.ico" />
+    <link rel="icon" href="/images/icon_favicon.png" />
   </head>
 
   <body>
     <header>
       <a href="/">
-        <img src="images/img_logo.png" alt="판다마켓 로고" class="image-logo" />
+        <img src="images/logo.png" alt="판다마켓" class="image-logo" />
       </a>
       <a href="login.html">
         <div class="btn-login">로그인</div>
@@ -28,15 +49,15 @@
       <div>
         <div class="banner-content">
           <p class="banner-title">
-            일상의 모든 물건을<br />
-            거래해 보세요
+            <span>일상의 모든 물건을</span>
+            <span>거래해 보세요</span>
           </p>
           <a href="items.html">
             <div class="btn-explore">구경하러 가기</div>
           </a>
         </div>
         <img
-          src="images/img_home_banner_top.png"
+          src="images/home_banner_top.png"
           alt="판다마켓 캐릭터"
           class="image-top-banner"
         />
@@ -45,12 +66,12 @@
 
     <section>
       <div class="section-hot-item">
-        <img src="images/img_home_01.png" alt="인기 상품" />
-        <div>
+        <img src="images/home_01.png" alt="인기 상품" />
+        <div class="left">
           <p class="section-badge">Hot item</p>
           <p class="section-title">
-            인기 상품을<br />
-            확인해 보세요
+            <span>인기 상품을</span>
+            <span>확인해 보세요</span>
           </p>
           <p class="section-content">
             가장 HOT한 중고거래 물품을<br />
@@ -63,21 +84,24 @@
         <div class="right">
           <p class="section-badge">Search</p>
           <p class="section-title">
-            구매를 원하는<br />
-            상품을 검색하세요
+            <span>구매를 원하는</span>
+            <span>상품을 검색하세요</span>
           </p>
           <p class="section-content">
             구매하고 싶은 물품은 검색해서<br />쉽게 찾아보세요
           </p>
         </div>
-        <img src="images/img_home_02.png" alt="상품 검색" />
+        <img src="images/home_02.png" alt="상품 검색" />
       </div>
 
       <div class="section-register">
-        <img src="images/img_home_03.png" alt="상품 등록" />
-        <div>
+        <img src="images/home_03.png" alt="상품 등록" />
+        <div class="left">
           <p class="section-badge">Register</p>
-          <p class="section-title">판매를 원하는<br />상품을 등록하세요</p>
+          <p class="section-title">
+            <span>판매를 원하는</span>
+            <span>상품을 등록하세요</span>
+          </p>
           <p class="section-content">
             어떤 물건이든 판매하고 싶은 상품을<br />
             쉽게 등록하세요
@@ -90,7 +114,7 @@
       <div>
         <p class="banner-title">믿을 수 있는<br />판다마켓 중고 거래</p>
         <img
-          src="images/img_home_banner_bottom.png"
+          src="images/home_banner_bottom.png"
           alt="판다마켓 캐릭터"
           class="image-bottom-banner"
         />
@@ -128,5 +152,12 @@
         </ul>
       </div>
     </footer>
+
+    <div class="unsupported-screen">
+      <p>
+        지원하지 않는 화면 크기입니다.<br />
+        브라우저의 크기를 넓혀주세요.
+      </p>
+    </div>
   </body>
 </html>
diff --git a/login.html b/login.html
@@ -11,33 +11,39 @@
     />
     <link rel="stylesheet" href="styles/account/account.css" />
     <title>판다마켓 - 로그인</title>
-    <link rel="icon" href="/images/icon_favicon.ico" />
+    <link rel="icon" href="/images/icon_favicon.png" />
   </head>
 
   <body>
-    <div class="loginContainer">
+    <div class="login-container">
       <header>
         <a href="/">
-          <img
-            src="images/img_logo.png"
-            alt="판다마켓 로고"
-            class="image-logo"
-          />
+          <img src="images/logo.png" alt="판다마켓" class="image-logo" />
         </a>
       </header>
 
-      <form>
-        <label>이메일 <input type="email" /></label>
-        <label
-          >비밀번호 <input type="password" /><img
-            src="/images/btn_visibility_on.png"
-            alt="비밀번호 보기"
-            class="passwordVisibilityOn"
-        /></label>
-        <button type="submit">로그인</button>
+      <form class="form-account">
+        <label class="label-account">
+          이메일
+          <input
+            type="email"
+            placeholder="이메일을 입력해주세요"
+            class="input-account"
+          />
+        </label>
+        <label class="label-account">
+          비밀번호
+          <input
+            type="password"
+            placeholder="비밀번호를 입력해주세요"
+            class="input-account password"
+          />
+          <button class="btn-visibility-on"></button>
+        </label>
+        <button class="btn-submit" type="submit">로그인</button>
       </form>
 
-      <div class="SociaLoginContainer">
+      <div class="social-login-container">
         <p>간편 로그인하기</p>
         <ul>
           <li>
@@ -57,5 +63,12 @@
         판다마켓이 처음이신가요? <a href="/signup.html">회원가입</a>
       </p>
     </div>
+
+    <div class="unsupported-screen">
+      <p>
+        지원하지 않는 화면 크기입니다.<br />
+        브라우저의 크기를 넓혀주세요.
+      </p>
+    </div>
   </body>
 </html>
diff --git a/signup.html b/signup.html
@@ -11,42 +11,56 @@
     />
     <link rel="stylesheet" href="styles/account/account.css" />
     <title>판다마켓 - 회원가입</title>
-    <link rel="icon" href="/images/icon_favicon.ico" />
+    <link rel="icon" href="/images/icon_favicon.png" />
   </head>
 
   <body>
-    <div class="loginContainer">
+    <div class="login-container">
       <header>
         <a href="/">
-          <img
-            src="images/img_logo.png"
-            alt="판다마켓 로고"
-            class="image-logo"
-          />
+          <img src="images/logo.png" alt="판다마켓" class="image-logo" />
         </a>
       </header>
 
-      <form>
-        <label>이메일 <input type="email" /></label>
-        <label>닉네임 <input type="text" /></label>
-        <label
-          >비밀번호 <input type="password" />
-          <img
-            src="/images/btn_visibility_on.png"
-            alt="비밀번호 보기"
-            class="passwordVisibilityOn"
+      <form class="form-account">
+        <label class="label-account">
+          이메일
+          <input
+            type="email"
+            placeholder="이메일을 입력해주세요"
+            class="input-account"
+          />
+        </label>
+        <label class="label-account">
+          닉네임
+          <input
+            type="text"
+            placeholder="닉네임을 입력해주세요"
+            class="input-account"
+          />
+        </label>
+        <label class="label-account">
+          비밀번호
+          <input
+            type="password"
+            placeholder="비밀번호를 입력해주세요"
+            class="input-account password"
           />
+          <button class="btn-visibility-on"></button>
-          <button class="btn-visibility-on"></button>
+          <button class="btn-visibility-on" type="button"></button>
-          <button class="btn-visibility-on"></button>
+          <button class="btn-visibility-on" type="button"></button>
         </label>
-        <label
-          >비밀번호 확인 <input type="password" /><img
-            src="/images/btn_visibility_on.png"
-            alt="비밀번호 보기"
-            class="passwordVisibilityOn"
-        /></label>
-        <button type="submit">회원가입</button>
+        <label class="label-account">
+          비밀번호 확인
+          <input
+            type="password"
+            placeholder="비밀번호를 다시 입력해주세요"
+            class="input-account password"
+          />
+          <button class="btn-visibility-on"></button>
+        </label>
+        <button class="btn-submit" type="submit">회원가입</button>
       </form>
 
-      <div class="SociaLoginContainer">
+      <div class="social-login-container">
         <p>간편 로그인하기</p>
         <ul>
           <li>
@@ -64,5 +78,12 @@
 
       <p class="footer">이미 회원이신가요? <a href="/login.html">로그인</a></p>
     </div>
+
+    <div class="unsupported-screen">
+      <p>
+        지원하지 않는 화면 크기입니다.<br />
+        브라우저의 크기를 넓혀주세요.
+      </p>
+    </div>
   </body>
 </html>
diff --git a/styles/account/account.css b/styles/account/account.css
@@ -1,12 +1,10 @@
-@import url(/styles/reset.css);
 @import url(/styles/base.css);
 
 @import url(/styles/account/header.css);
 @import url(/styles/account/form.css);
 @import url(/styles/account/soicalLogin.css);
 @import url(/styles/account/footer.css);
 
-@import url(/styles/account/accountTablet.css);
 @import url(/styles/account/accountPhone.css);
 
 body {

diff --git a/styles/account/accountPhone.css b/styles/account/accountPhone.css
@@ -1,8 +1,8 @@
-/* 반응형 : 핸드폰 */
-@media screen and (max-width: 767px) {
-  .loginContainer {
-    width: 60%;
-    min-width: 14rem;
+@media screen and (min-width: 375px) and (max-width: 767px) {
+  .login-container {
+    width: 100%;
+    max-width: 25rem;
+    padding: 0 1rem;
   }
 
   .image-logo {