diff --git a/src/assets/arrow_left.svg b/src/assets/arrow_left.svg new file mode 100644 index 000000000..647018946 --- /dev/null +++ b/src/assets/arrow_left.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/arrow_right.svg b/src/assets/arrow_right.svg new file mode 100644 index 000000000..0323512cf --- /dev/null +++ b/src/assets/arrow_right.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/BestItem.css b/src/components/BestItem.css index b85884e16..1a5b264d9 100644 --- a/src/components/BestItem.css +++ b/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 { diff --git a/src/components/Bestitem.jsx b/src/components/Bestitem.jsx index 0c859cc2b..9f4de7803 100644 --- a/src/components/Bestitem.jsx +++ b/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 (
- {items.map((item) => { + {limiteData.map((item) => { return (
{}
diff --git a/src/components/Button.jsx b/src/components/Button.jsx index f8fa2507b..f3f8287e1 100644 --- a/src/components/Button.jsx +++ b/src/components/Button.jsx @@ -1,7 +1,11 @@ import './Button.css'; const Button = ({ text, type }) => { - return ; + return ( + + ); }; export default Button; diff --git a/src/components/Editinput.jsx b/src/components/Editinput.jsx index 060c33148..a5a5424af 100644 --- a/src/components/Editinput.jsx +++ b/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('파일을 읽는 도중 에러가 발생했습니다.'); }; }; diff --git a/src/components/Edittext.jsx b/src/components/Edittext.jsx deleted file mode 100644 index 6d8482a10..000000000 --- a/src/components/Edittext.jsx +++ /dev/null @@ -1,5 +0,0 @@ -const Edittext = ({ text }) => { - return
{text}
; -}; - -export default Edittext; diff --git a/src/components/Itemtitle.css b/src/components/Itemtitle.css index a58683bb9..e7299e847 100644 --- a/src/components/Itemtitle.css +++ b/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 { diff --git a/src/components/Nav.css b/src/components/Nav.css index 0fa76abf8..f5b84841e 100644 --- a/src/components/Nav.css +++ b/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; diff --git a/src/components/Nav.jsx b/src/components/Nav.jsx index dbcb31636..45a1e9e03 100644 --- a/src/components/Nav.jsx +++ b/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 ( - +
+ +
+
+ +
); }; diff --git a/src/components/Pagenation.jsx b/src/components/Pagenation.jsx deleted file mode 100644 index 7823e1277..000000000 --- a/src/components/Pagenation.jsx +++ /dev/null @@ -1,5 +0,0 @@ -const Pagenation = () => { - return
Pagenation
; -}; - -export default Pagenation; diff --git a/src/components/Totalitem.css b/src/components/Totalitem.css index b4a544bed..7540b9d21 100644 --- a/src/components/Totalitem.css +++ b/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 { diff --git a/src/pages/Additem.css b/src/pages/Additem.css index 69c81eddf..c5d85a876 100644 --- a/src/pages/Additem.css +++ b/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; diff --git a/src/pages/Additem.jsx b/src/pages/Additem.jsx index 8777ee06c..2b5e7ade7 100644 --- a/src/pages/Additem.jsx +++ b/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 (
-