From a0cb193ea6cf0e4a07006c45bd896b086bba66bb Mon Sep 17 00:00:00 2001 From: kimsayhi Date: Mon, 1 Jul 2024 16:51:42 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20=EB=9D=BC=EC=9A=B0=ED=8A=B8=20=EA=B5=AC?= =?UTF-8?q?=EC=A1=B0=20=EB=B3=80=EA=B2=BD=20=EB=B0=8F=20=EB=8F=99=EC=A0=81?= =?UTF-8?q?=20=EB=9D=BC=EC=9A=B0=ED=8C=85=20=EC=B6=94=EA=B0=80=20(?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=AF=B8=EA=B5=AC=ED=98=84)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.jsx | 21 ++++------- src/assets/styles/header-nav.css | 1 + src/components/addItem/AddItemInputs.jsx | 1 + src/components/addItem/AddItemMain.jsx | 18 +++++++--- src/components/addItem/Tagbox.jsx | 3 ++ src/components/{Apis.jsx => apis.js} | 0 src/components/items/BestItemsLists.jsx | 25 +++++++------ src/components/items/SellingItemList.jsx | 25 +++++++------ .../items/itemsDetail/DetailItem.jsx | 33 +++++++++++++++++ src/components/reusable/HeaderNav.jsx | 35 ++++++++++++------- src/components/reusable/NavButton.jsx | 25 ------------- src/main.jsx | 21 ++++++++++- src/pages/AddItem.jsx | 1 - src/pages/Auth.jsx | 3 +- src/pages/Home.jsx | 2 -- src/pages/Items.jsx | 17 +-------- 16 files changed, 131 insertions(+), 100 deletions(-) rename src/components/{Apis.jsx => apis.js} (100%) create mode 100644 src/components/items/itemsDetail/DetailItem.jsx delete mode 100644 src/components/reusable/NavButton.jsx diff --git a/src/App.jsx b/src/App.jsx index 0892d3a4e..7cdfa3ca6 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,23 +1,16 @@ -import { BrowserRouter, Routes, Route } from "react-router-dom"; +import { Outlet, useLocation } from "react-router-dom"; import "./assets/styles/common.css"; - -import Home from "./pages/Home"; -import Auth from "./pages/Auth"; -import Items from "./pages/Items"; -import AddItem from "./pages/AddItem"; +import HeaderNav from "./components/reusable/HeaderNav"; function App() { + const location = useLocation(); + const here = location.pathname; + return ( <> - - - } /> - } /> - } /> - } /> - - + {here !== "/auth" && } + ); } diff --git a/src/assets/styles/header-nav.css b/src/assets/styles/header-nav.css index 85c1a43bc..4ed4904ea 100644 --- a/src/assets/styles/header-nav.css +++ b/src/assets/styles/header-nav.css @@ -64,6 +64,7 @@ @media (max-width: 767px) { .header-nav { padding: 0 16px; + min-width: 375px; } .header-logo img:first-child { display: none; diff --git a/src/components/addItem/AddItemInputs.jsx b/src/components/addItem/AddItemInputs.jsx index 57e456f52..a93014c43 100644 --- a/src/components/addItem/AddItemInputs.jsx +++ b/src/components/addItem/AddItemInputs.jsx @@ -65,5 +65,6 @@ export const InputContainer = styled.div` textarea { height: 200px; border: none; + resize: none; } `; diff --git a/src/components/addItem/AddItemMain.jsx b/src/components/addItem/AddItemMain.jsx index c472e5b97..fefd7915b 100644 --- a/src/components/addItem/AddItemMain.jsx +++ b/src/components/addItem/AddItemMain.jsx @@ -69,16 +69,26 @@ function AddItemMain() { }; const handleKeydownTag = (e) => { - e.preventDefault(); - if (e.key === "Enter") { + if (e.key !== "Enter") { + return; + } + if (!tagValue.trim("")) { + setTagValue(""); + return; + } + if (values.tags.length > 5) { setValues((prevValues) => ({ ...prevValues, - tags: [...prevValues.tags, tagValue], + tags: [...prevValues.tags.slice(1, prevValues.tags.length), tagValue], })); setTagValue(""); - } else { return; } + setValues((prevValues) => ({ + ...prevValues, + tags: [...prevValues.tags, tagValue], + })); + setTagValue(""); }; const handleDeleteImg = (i) => { diff --git a/src/components/addItem/Tagbox.jsx b/src/components/addItem/Tagbox.jsx index 97b30cc5f..f39ed5b6c 100644 --- a/src/components/addItem/Tagbox.jsx +++ b/src/components/addItem/Tagbox.jsx @@ -23,12 +23,15 @@ function Tagbox({ tags, onClick }) { const TagsWrapper = styled.div` display: flex; gap: 12px; + font-size: 16px; + font-weight: 400; span { background-color: var(--gray-50); padding: 12px 12px 12px 16px; align-items: center; height: 48px; display: flex; + border-radius: 26px; } button { display: inline-block; diff --git a/src/components/Apis.jsx b/src/components/apis.js similarity index 100% rename from src/components/Apis.jsx rename to src/components/apis.js diff --git a/src/components/items/BestItemsLists.jsx b/src/components/items/BestItemsLists.jsx index 8657316c3..bec38e7cd 100644 --- a/src/components/items/BestItemsLists.jsx +++ b/src/components/items/BestItemsLists.jsx @@ -1,22 +1,25 @@ import styled from "styled-components"; import icHeart from "../../assets/images/ic_heart.svg"; +import { Link } from "react-router-dom"; function BestItemsList({ items }) { return ( {items.map((item) => { return ( -
  • -
    - -

    {item.name} 팝니다

    - {item.price}원 - - - {item.favoriteCount} - -
    -
    • + +
  • +
    + +

    {item.name} 팝니다

    + {item.price}원 + + + {item.favoriteCount} + +
    +
    • + ); })}     diff --git a/src/components/items/SellingItemList.jsx b/src/components/items/SellingItemList.jsx index 9aaf1b605..24948a0d4 100644 --- a/src/components/items/SellingItemList.jsx +++ b/src/components/items/SellingItemList.jsx @@ -1,22 +1,25 @@ import styled from "styled-components"; import icHeart from "../../assets/images/ic_heart.svg"; +import { Link } from "react-router-dom"; function SellingItemList({ items }) { return ( {items.map((item) => { return ( -
  • -
    - -

    {item.name} 팝니다

    - {item.price}원 - - - {item.favoriteCount} - -
    -
    • + +
  • +
    + +

    {item.name} 팝니다

    + {item.price}원 + + + {item.favoriteCount} + +
    +
    • + ); })}     diff --git a/src/components/items/itemsDetail/DetailItem.jsx b/src/components/items/itemsDetail/DetailItem.jsx new file mode 100644 index 000000000..078fc4569 --- /dev/null +++ b/src/components/items/itemsDetail/DetailItem.jsx @@ -0,0 +1,33 @@ +import React, { useEffect, useState } from "react"; +import { useParams } from "react-router-dom"; +import { getItemInfo } from "../../apis"; +import styled from "styled-components"; + +function DetailItem() { + const [itemInfo, setItemInfo] = useState(null); + const { itemId } = useParams(); + + useEffect(() => { + const getItem = async () => { + try { + const item = await getItemInfo(itemId); + setItemInfo(item); + } catch (err) { + console.log(err); + } + }; + getItem(); + }, []); + + console.log(); + return ( + {itemInfo &&
    {itemInfo.name}
    }     + ); +} + +export default DetailItem; + +const DetailContainer = styled.div` + margin: 70px 0 0 0; + font-size: 100px; +`; diff --git a/src/components/reusable/HeaderNav.jsx b/src/components/reusable/HeaderNav.jsx index 2f5e04351..2273bbda7 100644 --- a/src/components/reusable/HeaderNav.jsx +++ b/src/components/reusable/HeaderNav.jsx @@ -1,28 +1,23 @@ -import { Link } from "react-router-dom"; +import { Link, NavLink } from "react-router-dom"; import logoImg from "../../assets/images/logo.svg"; import logoTxt from "../../assets/images/logo-txt.svg"; import "../../assets/styles/header-nav.css"; -import NavButton from "./NavButton"; +import styled from "styled-components"; -function HeaderNav({ nowPath }) { +function HeaderNav() { return (
    - + - +
    - - 자유게시판 - - - - 중고마켓 - - + 자유게시판 + + 중고마켓
    로그인 @@ -33,3 +28,17 @@ function HeaderNav({ nowPath }) { } export default HeaderNav; + +const NavLinkButton = styled(NavLink)` + font-size: 18px; + font-weight: 700; + cursor: pointer; + padding-left: 39px; + &.active { + color: var(--blue); + } + @media (max-width: 764px) { + padding: 0; + font-size: 16px; + } +`; diff --git a/src/components/reusable/NavButton.jsx b/src/components/reusable/NavButton.jsx deleted file mode 100644 index 67e45d588..000000000 --- a/src/components/reusable/NavButton.jsx +++ /dev/null @@ -1,25 +0,0 @@ -import { useEffect, useState } from "react"; -import styled from "styled-components"; - -function NavButton({ children, nowPath, thisPath }) { - return ( - - {children} - - ); -} - -export default NavButton; - -const StyledButton = styled.button` - color: ${({ $nowPath, $thisPath }) => - $nowPath === $thisPath ? "var(--blue)" : "var(--gray-600)"}; - font-size: 18px; - font-weight: 700; - cursor: pointer; - padding-left: 39px; - @media (max-width: 764px) { - padding: 0; - font-size: 16px; - } -`; diff --git a/src/main.jsx b/src/main.jsx index 569fdf2fd..e17490d76 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -1,9 +1,28 @@ import React from "react"; import ReactDOM from "react-dom/client"; import App from "./App.jsx"; +import { BrowserRouter, Routes, Route } from "react-router-dom"; + +import Home from "./pages/Home"; +import Auth from "./pages/Auth"; +import Items from "./pages/Items"; +import AddItem from "./pages/AddItem"; +import DetailItem from "./components/items/itemsDetail/DetailItem.jsx"; ReactDOM.createRoot(document.getElementById("root")).render( - + + + }> + } /> + } /> + + }> + }> + + } /> + + + ); diff --git a/src/pages/AddItem.jsx b/src/pages/AddItem.jsx index 26dfdd658..487cf61f0 100644 --- a/src/pages/AddItem.jsx +++ b/src/pages/AddItem.jsx @@ -5,7 +5,6 @@ import AddItemMain from "../components/addItem/AddItemMain"; function AddItem(props) { return ( <> - ); diff --git a/src/pages/Auth.jsx b/src/pages/Auth.jsx index 92e944301..9e3f95545 100644 --- a/src/pages/Auth.jsx +++ b/src/pages/Auth.jsx @@ -8,8 +8,7 @@ import AuthContainer from "../components/auth/AuthContainer"; import AuthHeader from "../components/auth/AuthHeader"; function Auth() { - const { state } = useLocation(); - const [isLogin, setIsLogin] = useState(state.isLogin); + const [isLogin, setIsLogin] = useState(true); const authPageHandle = () => { setIsLogin(!isLogin); diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx index eeef70b2c..c840b2df2 100644 --- a/src/pages/Home.jsx +++ b/src/pages/Home.jsx @@ -1,12 +1,10 @@ import "../assets/styles/home.css"; import HomeFooter from "../components/home/HomeFooter"; -import HeaderNav from "../components/reusable/HeaderNav"; import HomeMain from "../components/home/HomeMain"; function Home() { return ( <> - diff --git a/src/pages/Items.jsx b/src/pages/Items.jsx index 62f237223..888917906 100644 --- a/src/pages/Items.jsx +++ b/src/pages/Items.jsx @@ -1,10 +1,8 @@ -import { useLocation } from "react-router"; import { useEffect, useState } from "react"; - -import HeaderNav from "../components/reusable/HeaderNav"; import ItemsMain from "../components/items/ItemsMain"; function Items() { + console.log(itemId); const [sizeName, setSizeName] = useState( window.innerWidth > 1200 ? "large" @@ -22,18 +20,6 @@ function Items() { } }; - // let timer - // const onResize = () => { - // if (timer) { - // clearTimeout(timer); - // } - - // timer = setTimeout(() => { - // sizeNaming(); - // }, 200); - // }; - // 디바운싱 - let timer = false; const onResize = () => { if (!timer) { @@ -53,7 +39,6 @@ function Items() { }, []); return ( <> - );