feat: 라우트 구조 변경 및 동적 라우팅 추가 (페이지 미구현)

codeit-bootcamp-frontend · Jul 1, 2024 · a0cb193 · a0cb193
1 parent aa1e8ca
commit a0cb193
Show file tree

Hide file tree

Showing 16 changed files with 131 additions and 100 deletions.
diff --git 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 (
     <>
-      <BrowserRouter>
-        <Routes>
-          <Route path="/" element={<Home />} />
-          <Route path="/auth" element={<Auth />} />
-          <Route path="/items" element={<Items />} />
-          <Route path="/additem" element={<AddItem />} />
-        </Routes>
-      </BrowserRouter>
+      {here !== "/auth" && <HeaderNav></HeaderNav>}
+      <Outlet></Outlet>
     </>
   );
 }

diff --git 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
@@ -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
@@ -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
@@ -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 → src/components/apis.js b/src/components/Apis.jsx → src/components/apis.js
diff --git 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 (
     <BestUl>
       {items.map((item) => {
         return (
-          <li key={item.id}>
-            <div className="item-container">
-              <img className="item-img" src={item.images} />
-              <p className="item-name">{item.name} 팝니다</p>
-              <span className="item-price">{item.price}원</span>
-              <span className="item-favorite">
-                <img className="heart-img" src={icHeart} />
-                {item.favoriteCount}
-              </span>
-            </div>
-          </li>
+          <Link to={`${item.id}`} key={item.id}>
+            <li>
+              <div className="item-container">
+                <img className="item-img" src={item.images} />
+                <p className="item-name">{item.name} 팝니다</p>
+                <span className="item-price">{item.price}원</span>
+                <span className="item-favorite">
+                  <img className="heart-img" src={icHeart} />
+                  {item.favoriteCount}
+                </span>
+              </div>
+            </li>
+          </Link>
         );
       })}
     </BestUl>

diff --git 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 (
     <SellingUl>
       {items.map((item) => {
         return (
-          <li key={item.id}>
-            <div className="items-container">
-              <img className="item-img" src={item.images} />
-              <p className="item-name">{item.name} 팝니다</p>
-              <span className="item-price">{item.price}원</span>
-              <span className="item-favorite">
-                <img className="heart-img" src={icHeart} />
-                {item.favoriteCount}
-              </span>
-            </div>
-          </li>
+          <Link to={`${item.id}`} key={item.id}>
+            <li>
+              <div className="items-container">
+                <img className="item-img" src={item.images} />
+                <p className="item-name">{item.name} 팝니다</p>
+                <span className="item-price">{item.price}원</span>
+                <span className="item-favorite">
+                  <img className="heart-img" src={icHeart} />
+                  {item.favoriteCount}
+                </span>
+              </div>
+            </li>
+          </Link>
         );
       })}
     </SellingUl>

diff --git a/src/components/items/itemsDetail/DetailItem.jsx 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 (
+    <DetailContainer>{itemInfo && <div>{itemInfo.name}</div>}</DetailContainer>
+  );
+}
+
+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
@@ -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 (
     <header className="header-container">
       <div className="header-nav">
-        <Link to="/" className="header-logo">
+        <NavLink to="/" className="header-logo">
           <img src={logoImg} />
           <img src={logoTxt} />
-        </Link>
+        </NavLink>
 
         <div className="nav-menus">
-          <NavButton thisPath="forum" nowPath={nowPath} className="nav-forum">
-            자유게시판
-          </NavButton>
-          <Link to="/items">
-            <NavButton thisPath="items" nowPath={nowPath} className="nav-items">
-              중고마켓
-            </NavButton>
-          </Link>
+          <NavLinkButton to="/forum">자유게시판</NavLinkButton>
+
+          <NavLinkButton to="/items">중고마켓</NavLinkButton>
         </div>
         <Link to="/auth" state={{ isLogin: true }}>
           <span className="header-login">로그인</span>
@@ -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
diff --git 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(
   <React.StrictMode>
-    <App />
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<App />}>
+          <Route index element={<Home />} />
+          <Route path="auth" element={<Auth />} />
+          <Route path="items">
+            <Route index element={<Items />}></Route>
+            <Route path=":itemId" element={<DetailItem />}></Route>
+          </Route>
+          <Route path="additem" element={<AddItem />} />
+        </Route>
+      </Routes>
+    </BrowserRouter>
   </React.StrictMode>
 );
diff --git a/src/pages/AddItem.jsx b/src/pages/AddItem.jsx
@@ -5,7 +5,6 @@ import AddItemMain from "../components/addItem/AddItemMain";
 function AddItem(props) {
   return (
     <>
-      <HeaderNav nowPath="items" />
       <AddItemMain />
     </>
   );

diff --git 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
@@ -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 (
     <>
-      <HeaderNav />
       <HomeMain />
       <HomeFooter />
     </>

diff --git 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 (
     <>
-      <HeaderNav nowPath="items" />
       <ItemsMain sizeName={sizeName} />
     </>
   );