[김소영] sprint7

src/components/BestItem.css

@@ -1,10 +1,27 @@
 .Bestitem {
-  display: flex;
-  flex-direction: row;
+  display: grid;
+  grid-template-rows: 1fr;
+  grid-template-columns: repeat(4, 1fr);
   gap: 24px;
   margin-top: 16px;
-  overflow: hidden;
-  /* flex-wrap: wrap; */
+
+  @media (max-width: 1199px) {
+    grid-template-columns: repeat(2, 1fr);
+    .BestiemContainer:nth-child(n + 3) {
+      display: none;
+    }
+    padding-left: 24px;
+    padding-right: 24px;
+  }
+
+  @media (max-width: 767px) {
+    grid-template-columns: repeat(1, 1fr);
+    .BestiemContainer:nth-child(n + 2) {
+      display: none;
+    }
+    padding-left: 16px;
+    padding-right: 16px;
+  }
 }
 
 .Bestitem > div {
@@ -17,10 +34,13 @@
 }
 
 .Bestitem .itemImg img {
-  width: 282px;
-  height: 282px;
+  width: 100%;
+  height: auto;
   border-radius: 16px;
   margin-bottom: 10px;
+  object-fit: cover;
+  aspect-ratio: 1;
+  /* overflow: hidden; */
 }
 
 .itemName {

src/components/Bestitem.jsx

@@ -2,9 +2,11 @@ import favorit_img from '../assets/heart_favorit.png';
 import './BestItem.css';
 
 const Bestitem = ({ items }) => {
+  const limiteData = items.slice(0, 4);
+
   return (
     <div className="Bestitem">
-      {items.map((item) => {
+      {limiteData.map((item) => {
         return (
           <div className="BestiemContainer">
             <div className="itemImg">{<img src={item.images} />}</div>

src/components/Button.jsx

@@ -1,7 +1,11 @@
 import './Button.css';
 
 const Button = ({ text, type }) => {
-  return <button className={`Button Button_${type}`}>{text}</button>;
+  return (
+    <button type={type} className={`Button Button_${type}`}>
+      {text}
+    </button>
+  );
 };
 
 export default Button;

src/components/Editinput.jsx

@@ -7,11 +7,24 @@ const Editinput = ({ type, info, placeholder }) => {
   const imgRef = useRef();
 
   const saveImgFile = () => {
+    if (!imgRef.current || !imgRef.current.files[0]) {
+      console.error('파일이 선택되지 않았습니다.');
+      return;
+    }
+
     const file = imgRef.current.files[0];
     const reader = new FileReader();
+
     reader.readAsDataURL(file);
+
     reader.onloadend = () => {
-      setImgFile(reader.result);
+      if (reader.result) {
+        setImgFile(reader.result); // reader.result는 base64 데이터 URL
+      }
+    };
+
+    reader.onerror = () => {
+      console.error('파일을 읽는 도중 에러가 발생했습니다.');
     };
   };
 

src/components/Itemtitle.css

@@ -4,6 +4,28 @@
   gap: 12px;
   height: 32px;
   white-space: nowrap;
+  flex-wrap: wrap;
+  align-items: stretch;
+}
+
+@media (max-width: 767px) {
+  .search {
+    height: 92px;
+  }
+  .Item_text:nth-child(1) {
+    order: 1;
+  }
+
+  .Item_input:nth-child(2) {
+    order: 3;
+  }
+
+  .Item_button:nth-child(3) {
+    order: 2;
+  }
+  .Item_select:nth-child(4) {
+    order: 4;
+  }
 }
 
 .Itemtitle .Item_text {

src/components/Nav.css

@@ -3,12 +3,8 @@
   align-items: center;
   border-bottom: 1px solid #dfdfdf;
   gap: 47px;
-  padding: 10px 0 9px;
+  padding: 10px 200px 9px 200px;
 
-  @media (max-width: 1920px) {
-    padding-left: 200px;
-    padding-right: 200px;
-  }
   @media (max-width: 1199px) {
     padding-left: 24px;
     padding-right: 24px;

src/components/Nav.jsx

@@ -1,12 +1,21 @@
 import './Nav.css';
+import Button from './Button';
+import Nav_logo from '../assets/nav_panda_logo_img.png';
+import Nav_user from '../assets/nav_user_img.png';
+import { Link } from 'react-router-dom';
 
-const Nav = ({ leftChild, center, rightChild }) => {
+const Nav = () => {
   return (
-    <nav className="Nav">
-      <div className="nav_logo">{leftChild}</div>
-      <div className="nav_center">{center}</div>
-      <div className="nav_user">{rightChild}</div>
-    </nav>
+    <div className="Nav">
+      <img src={Nav_logo} />
+      <div className="nav_button nav_center">
+        <Button text={'자유게시판'} />
+        <Link to="/items">
+          <Button text={'중고마켓'} type={'nav_activate'} />
+        </Link>
+      </div>
+      <img className="nav_user" src={Nav_user} />
+    </div>
   );
 };
 

src/components/Totalitem.css

@@ -1,9 +1,27 @@
 .Totalitems {
-  display: flex;
-  flex-direction: row;
+  display: grid;
+  grid-template-rows: 2fr;
+  grid-template-columns: repeat(5, 1fr);
   gap: 24px;
   margin-top: 16px;
-  flex-wrap: wrap;
+
+  @media (max-width: 1199px) {
+    grid-template-columns: repeat(3, 1fr);
+    .TotaliemContainer:nth-child(n + 7) {
+      display: none;
+    }
+    padding-left: 24px;
+    padding-right: 24px;
+  }
+
+  @media (max-width: 767px) {
+    grid-template-columns: repeat(2, 1fr);
+    .TotaliemContainer:nth-child(n + 5) {
+      display: none;
+    }
+    padding-left: 16px;
+    padding-right: 16px;
+  }
 }
 
 .Totalitems > div {
@@ -16,10 +34,12 @@
 }
 
 .Totalitems .itemImg img {
-  width: 221px;
-  height: 221px;
+  width: 100%;
+  height: auto;
   border-radius: 16px;
   margin-bottom: 10px;
+  object-fit: cover;
+  aspect-ratio: 1;
 }
 
 .itemName {

src/pages/Additem.css

@@ -1,12 +1,9 @@
 form {
-  @media (max-width: 1920px) {
-    padding-left: 200px;
-    padding-right: 200px;
-  }
   @media (max-width: 1199px) {
     padding-left: 24px;
     padding-right: 24px;
   }
+
   @media (max-width: 767px) {
     padding-left: 16px;
     padding-right: 16px;

src/pages/Additem.jsx

@@ -1,29 +1,14 @@
 import './Additem.css';
 import Nav from '../components/Nav';
-import Nav_logo from '../assets/nav_panda_logo_img.png';
-import Nav_user from '../assets/nav_user_img.png';
 import Button from '../components/Button';
 import Itemtitle from '../components/Itemtitle';
 import Editsection from '../components/Editsection';
-import Edittext from '../components/Edittext';
 import Editinput from '../components/Editinput';
-import { Link } from 'react-router-dom';
 
 const Additem = () => {
   return (
     <div className="Additem">
-      <Nav
-        leftChild={<img src={Nav_logo} />}
-        center={
-          <div className="nav_button">
-            <Button text={'자유게시판'} />
-            <Link to="/items">
-              <Button text={'중고마켓'} type={'nav_activate'} />
-            </Link>
-          </div>
-        }
-        rightChild={<img src={Nav_user} />}
-      />
+      <Nav />
       {/* 아래는 상품등록 페이지 구현 */}
       <form className="edit">
         <div className="edit_title">
@@ -34,17 +19,17 @@ const Additem = () => {
         </div>
         <div className="edit_info">
           <Editsection
-            topChlid={<Edittext text={'상품 이미지'} />}
+            topChlid={'상품이미지'}
             center={<Editinput type={'img'} />}
           />
           <Editsection
-            topChlid={<Edittext text={'상품명'} />}
+            topChlid={'상품명'}
             center={
               <Editinput info={'name'} placeholder={'상품명을 입력해주세요'} />
             }
           />
           <Editsection
-            topChlid={<Edittext text={'상품 소개'} />}
+            topChlid={'상품 소개'}
             center={
               <Editinput
                 info={'info'}
@@ -53,7 +38,7 @@ const Additem = () => {
             }
           />
           <Editsection
-            topChlid={<Edittext text={'판매가격'} />}
+            topChlid={'판매가격'}
             center={
               <Editinput
                 info={'price'}
@@ -62,7 +47,7 @@ const Additem = () => {
             }
           />
           <Editsection
-            topChlid={<Edittext text={'태그'} />}
+            topChlid={'태그'}
             center={
               <Editinput info={'tag'} placeholder={'태그를 입력해주세요'} />
             }

src/pages/Home.css

@@ -1,23 +1,16 @@
-form {
-  @media (max-width: 1920px) {
-    padding-left: 200px;
-    padding-right: 200px;
-  }
-  @media (max-width: 1199px) {
-    padding-left: 24px;
-    padding-right: 24px;
-  }
-  @media (max-width: 767px) {
-    padding-left: 16px;
-    padding-right: 16px;
-  }
-}
-
 .item_title {
   margin-top: 24px;
   font-size: 20px;
   font-weight: 700;
   line-height: 32px;
+
+  @media (max-width: 1199px) {
+    padding: 0 24px;
+  }
+
+  @media (max-width: 767px) {
+    padding: 0 16px;
+  }
 }
 
 .Home .item {
@@ -29,3 +22,26 @@ form {
 a:link {
   text-decoration: none;
 }
+
+.pagenation_box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  padding: 43px 0 53px;
+}
+
+.page_button {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  border: 1px solid #e5e7eb;
+  outline: none;
+  color: #6b7280;
+  cursor: pointer;
+}
+
+.active {
+  background-color: #2f80ed;
+  color: #f9fafb;
+}