style: 전체 글꼴 변경, pagination 버튼 스타일 추가, 배경색 추가, navBar 하단 추가, 아이콘 간격 추가

src/components/App.css

@@ -3,11 +3,11 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  border: 2px dashed blue; 
   border-radius: 10px;
-  margin-left: 15%;
-  margin-right: 15%;
+  padding-left: 15%;
+  padding-right: 15%;
   overflow: hidden;
+  background-color: var(--secondary-color-gray100) ;
 }
 
 .best-product-title, .on-sale-product-title {

src/components/BestProducts.css

@@ -30,7 +30,7 @@
 .best-product-info {
     display: flex;
     flex-direction: column;
-    gap: 10px;
+    gap: 20px;
     margin-top: 10px;
 }
 
@@ -50,8 +50,20 @@
     color: var(--secondary-color-gray500);
 }
 
-@media (max-width: 768px) {
+@media only screen and (max-width: 768px) {
+    .best-products-container {
+        grid-template-columns: repeat(1, 1fr);
+    } 
+}
+
+@media only screen and (min-width: 769px) and (max-width: 1024px) {
     .best-products-container {
         grid-template-columns: repeat(2, 1fr);
     } 
+}
+
+@media only screen and (min-width: 1025px) {
+    .best-products-container {
+        grid-template-columns: repeat(4, 1fr);
+    } 
 }

src/components/BestProducts.js

@@ -37,7 +37,7 @@ export function BestProducts() {
             <img className="best-product-image"src={product.images} alt={product.name} />
             <div className="best-product-info">
               <h3>{product.name}</h3>
-              <p>{product.price}원</p>
+              <p>{product.price.toLocaleString()}원</p>
               <div className="best-product-favorite">
                 <button className="best-favorite-button">
                   <img src={empty_heart} alt="favorite"></img>

src/components/DropDown.css

@@ -6,10 +6,11 @@
 .dropdown-button {
     padding: 10px 15px;
     font-size: 16px;
-    background-color: #f0f0f0;
     border: 1px solid #ccc;
+    background-color: white;
     border-radius: 4px;
     cursor: pointer;
+    border-radius: 10px;
 }
 
 .dropdown-button:hover {

src/components/Footer.css

@@ -54,6 +54,8 @@
 }
 
 .footer_sns_icons {
+    display: flex;
     margin-right: 200px;
     margin-top: -50px;
+    gap: 5px;
 }

src/components/NavBar.css

@@ -28,7 +28,7 @@ nav {
     width: 100%;
     z-index: 1;
     padding-bottom: 7px;
-    border-bottom:#111827 2px solid;
+    border-bottom: 1px solid #E5E7EB;
 }
 
 .navbar-tap {

src/components/OnSaleProducts.css

@@ -39,7 +39,7 @@
 .on-sale-product-info {
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 20px;
   margin-top: 10px;
 }
 
@@ -59,8 +59,20 @@
   color: var(--secondary-color-gray500);
 }
 
-@media (max-width: 768px) {
-  .best-products-container {
-      grid-template-columns: repeat(2, 1fr);
-  } 
+@media only screen and (max-width: 768px) {
+    .on-sale-products-container {
+        grid-template-columns: repeat(2, 1fr);
+    } 
+}
+
+@media only screen and (min-width: 769px) and (max-width: 1024px) {
+    .on-sale-products-container {
+        grid-template-columns: repeat(3, 1fr);
+    } 
+}
+
+@media only screen and (min-width: 1025px) {
+    .on-sale-products-container {
+        grid-template-columns: repeat(5, 1fr);
+    } 
 }

src/components/OnSaleProducts.js

@@ -57,7 +57,7 @@ export function OnSaleProducts({ sort, page, keyword }) {
               <img className="on-sale-product-image" src={product.images || no_image_available} alt={product.name} />
               <div className="on-sale-product-info">
                 <h3>{product.name}</h3>
-                <p>{product.price}원</p>
+                <p>{product.price.toLocaleString()}원</p>
                 <div className="on-sale-product-favorite">
                   <button className="on-sale-favorite-button">
                     <img src={empty_heart} alt="favorite"></img>

src/components/Pagination.css

@@ -5,4 +5,23 @@
   padding: 0;
   margin-bottom: 100px;
   margin-top: 100px;
-}
+  gap: 10px;
+}
+
+.pagination button {
+  width: 42px;
+  height: 42px;
+  border-radius: 50px;
+  border-width: 0px;
+  background-color: white;
+  color: var(--secondary-color-gray600);
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.pagination button:hover {
+  background-color: var(--primary-color-100);
+  color: white;
+}
+

src/components/SearchBar.css

@@ -5,7 +5,8 @@
   font-size: 16px;
   border-radius: 10px;
   box-sizing: border-box;
-  background: #f5f5f5;
+  background: white;
+  border: 1px solid #ccc;
   border: none;
 }
 

src/index.css

@@ -1,13 +1,22 @@
+@font-face {
+  font-family: 'Pretendard-Regular';
+  src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/[email protected]/Pretendard-Regular.woff') format('woff');
+  font-weight: 400;
+  font-style: normal;
+}
+
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  font-family: 'Pretendard-Regular', sans-serif;
 }
 
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+