refactor(homepage): Add favicon and Reflect code review received

1. Add favicon 2. Separate homepage css (home.css -> global.css, reset.css, home.css) 3. Edit HTML class name to kebab case 4. Add error-red color value to global.css 5. Fix decimal unit px to int unit
codeit-bootcamp-frontend · May 29, 2024 · 5602ddf · 5602ddf
1 parent f6e4a88
commit 5602ddf
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 54 deletions.
diff --git a/css/base/global.css b/css/base/global.css
@@ -16,6 +16,7 @@
   --cool-gray-200: #e5e7eb;
   --cool-gray-100: #f3f4f6;
   --cool-gray-50: #f9fafb;
+  --error-red: #f74747; 
 
   /* arbitrarily named color value */
   --gray-00: #ffffff;

diff --git a/css/home.css b/css/home.css
@@ -1,59 +1,28 @@
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-:root {
-  --brand-blue: #3692ff;
-  --cool-gray-900: #111827;
-  --cool-gray-800: #1f2937;
-  --cool-gray-700: #374151;
-  --cool-gray-600: #4B5563;
-  --cool-gray-500: #6B7280;
-  --cool-gray-400: #9ca3af;
-  --cool-gray-300: #d1d5db;
-  --cool-gray-200: #e5e7eb;
-  --cool-gray-100: #f3f4f6;
-  --cool-gray-50: #f9fafb;
-
-  /* arbitrarily named color value */
-  --gray-00: #ffffff;
-  --main-background-color: #cfe5ff;
-}
-
-html {
-  font-size: 32px;
-  font-family: Pretendard, sans-serif;
-}
-
-body {
-  margin: 0;
-}
-
 header {
   background-color: var(--gray-00);
   display: flex;
-  padding: 0 200px;
+  padding: 10px 200px;
   justify-content: space-between;
   align-items: center;
   position: sticky;
   top: 0;
   z-index: 1;
 }
 
+.main-logo-block {
+  display: flex;
+  justify-content: center;
+}
+
 .main-logo {
   display: inline-block;
   width: 153px;
   height: 51px;
   cursor: pointer;
-
-  margin-top: 5px;
-  margin-bottom: -5px;
 }
 
 .main-top > div,
-.mainpage,
+.main-page,
 .main-bottom > div {
   width: 1200px;
   margin: 0 auto;
@@ -65,7 +34,7 @@ header {
   height: 720px;
 }
 
-.mainpage {
+.main-page {
   display: flex;
   gap: 64px;
   margin-top: 138;
@@ -83,12 +52,12 @@ p, h3 {
   justify-content: center;
 }
 
-.rightmain .content-block h3,
-.rightmain .content-block p {
+.right-main .content-block h3,
+.right-main .content-block p {
   text-align: right;
 }
 
-.mainpage.rightmain {
+.main-page.right-main {
   justify-content: end;
   flex-flow: row-reverse;
 }
@@ -103,7 +72,7 @@ p.main-content {
 p.sub-content {
   font-size: 24px;
   font-weight: 500;
-  line-height: 28.8px;
+  line-height: 29px;
 }
 
 p {
@@ -198,16 +167,17 @@ footer {
 }
 
 .privacy-faq-link {
-  margin-top: -10px;
+  display: flex;
+  justify-content: center;
  }
 
 .external-link {
   cursor: pointer;
   text-decoration: none;
 }
 
-.toppage,
-.bottompage {
+.top-page,
+.bottom-page {
   position: relative;
   height: 540px;
   display: flex;

diff --git a/images/logo.png b/images/logo.png
diff --git a/pages/index.html b/pages/index.html
@@ -3,36 +3,39 @@
 <html lang="ko">
   <head>
     <meta charset="utf-8">
+    <link rel="icon" href="/images/logo.png?v=2"/>
     <title>판다마켓</title>
-    <link rel="icon" href=""/>
     <link rel="stylesheet"
      as="style"
      crossorigin
      href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css"
     />
+    <link rel="stylesheet" href="/css/base/reset.css" />
+    <link rel="stylesheet" href="/css/base/global.css" />
     <link rel="stylesheet" href="/css/home.css"/>
   </head>
   <body>
     <header>
       <div>
-        <a href="./">
+        <a class="main-logo-block" href="./">
           <img class="main-logo" src="/images/logo_with_typo.png" alt="로고 이미지"/>
         </a>
       </div>
       <button class="login-button" onclick="location.href='./login'">로그인</button>
     </header>
     <main>
       <div class="main-top">
-        <div class="toppage">
+        <div class="top-page">
           <div>
             <p class="main-content">일상의 모든 물건을<br>거래해 보세요</p>
             <button class="item-button" onclick="location.href='./items'">구경하러가기</button>
           </div>
-          <img class="top-img" src="/images/img_home_top.png" alt="홈 페이지 상단 이미지" />
+          <img
+           class="top-img" src="/images/img_home_top.png" alt="홈 페이지 상단 이미지" />
         </div>
       </div>
       <div class="main-page1">
-        <div class="mainpage leftmain">
+        <div class="main-page left-main">
           <div>
             <img class="main-page-img" src="/images/img_home_01.png" alt="홈 이미지 1" />
           </div>
@@ -44,7 +47,7 @@ <h3>Hot item</h3>
         </div>
       </div>
       <div class="main-page2">
-        <div class="mainpage rightmain">
+        <div class="main-page right-main">
           <div>
             <img class="main-page-img" src="/images/img_home_02.png" alt="홈 이미지 2" />
           </div>
@@ -56,7 +59,7 @@ <h3>Search</h3>
         </div>
       </div>
       <div class="main-page3">
-        <div class="mainpage leftmain">
+        <div class="main-page left-main">
           <div>
             <img class="main-page-img" src="/images/Img_home_03.png" alt="홈 이미지 3" />
           </div>
@@ -68,7 +71,7 @@ <h3>Register</h3>
         </div>
       </div>
       <div class="main-bottom">
-        <div class="bottompage">
+        <div class="bottom-page">
           <p class="main-content">믿을 수 있는<br>판다마켓 중고거래</p>
           <img class="bottom-img" src="/images/Img_home_bottom.png" alt="홈 페이지 하단 이미지" />
         </div>

diff --git a/pages/login/index.html b/pages/login/index.html
@@ -2,6 +2,7 @@
 <html lang="ko">
   <head>
     <meta charset="utf-8">
+    <link rel="icon" href="/images/logo.png?v=2"/>
     <title>"판다마켓"</title>
     <link
       rel="stylesheet"

diff --git a/pages/login/signup.html b/pages/login/signup.html
@@ -2,6 +2,7 @@
 <html lang="ko">
   <head>
     <meta charset="utf-8">
+    <link rel="icon" href="/images/logo.png?v=2"/>
     <title>"판다마켓"</title>
     <link
       rel="stylesheet"