codeit-bootcamp-frontend · joodongkim · Sep 7, 2024 · Sep 12, 2024 · Sep 12, 2024 · Sep 14, 2024
diff --git a/.gitignore b/.gitignore
@@ -11,6 +11,10 @@
 # production
 /build
 
+# bacup
+/backups
+.bak
+
 # misc
 .DS_Store
 .env.local

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "fe10-sprint-mission5",
+  "name": "fe10-sprint-mission6",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
@@ -10,6 +10,7 @@
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.22.3",
     "react-scripts": "5.0.1",
+    "styled-components": "^6.1.8",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

diff --git a/public/index.html b/public/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="keywords" content="Codeit - FE10 Sprint Mission 5">
+    <meta name="keywords" content="Codeit - FE10 Sprint Mission 6">
     <meta name="author" content="[email protected]">
     <meta property="og:type" content="website" />
     <meta property="og:title" content="판다마켓" />

diff --git a/public/index.html.bak b/public/index.html.bak
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="keywords" content="Codeit - FE10 Sprint Mission 5">
+    <meta name="author" content="[email protected]">
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="판다마켓" />
+    <meta property="og:description" content="일상의 모든 물건을 거래해 보세요" />
+    <meta property="og:image" content="/og-image.png" />
+    <meta property="og:url" content="" />
+    <title>판다마켓</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/src/api/itemApi.js.bak b/src/api/itemApi.js.bak
@@ -0,0 +1,18 @@
+export async function getProducts(params = {}) {
+  // Using URLSearchParams allows for easy automatic encoding of parameter values.
+  const query = new URLSearchParams(params).toString();
+
+  try {
+    const response = await fetch(
+      `https://panda-market-api.vercel.app/products?${query}`
+    );
+    if (!response.ok) {
+      throw new Error(`HTTP error: ${response.status}`);
+    }
+    const body = await response.json();
+    return body;
+  } catch (error) {
+    console.error("Failed to fetch products:", error);
+    throw error;
+  }
+}
diff --git a/src/assets/images/icons/ic_plus.svg b/src/assets/images/icons/ic_plus.svg
diff --git a/src/assets/images/icons/ic_x.svg b/src/assets/images/icons/ic_x.svg
diff --git a/src/components/Layout/Header.jsx b/src/components/Layout/Header.jsx
@@ -1,13 +1,15 @@
 import React from 'react'
 import Logo from '../../assets/images/logo/logo.svg'
-import { Link, NavLink } from 'react-router-dom'
+import { Link, NavLink, useLocation } from 'react-router-dom'
 import './Header.css'
 
 function getLinkStyle ({ isActive }) {
   return { color: isActive ? 'var(--blue)' : undefined }
 }
 
 function Header () {
+  const location = useLocation() // 현재 경로 정보
+
   return (
     <header className='globalHeader'>
       <div className='headerLeft'>
@@ -23,7 +25,14 @@ function Header () {
               </NavLink>
             </li>
             <li>
-              <NavLink to='/items' style={getLinkStyle}>
+              <NavLink
+                to='/items'
+                style={({ isActive }) =>
+                  location.pathname === '/additem' || isActive
+                    ? { color: 'var(--blue)' }
+                    : {}
+                }
+              >
                 중고마켓
               </NavLink>
             </li>

diff --git a/src/components/Layout/Header.jsx.bak b/src/components/Layout/Header.jsx.bak
@@ -0,0 +1,53 @@
+import React from "react";
+import Logo from "../../assets/images/logo/logo.svg";
+import { Link, NavLink, useLocation } from "react-router-dom";
+import "./Header.css";
+
+
+function getLinkStyle({ isActive }) {
+  return { color: isActive ? "var(--blue)" : undefined };
+}
+
+function Header() {
+  const location = useLocation(); // 현재 경로 정보
+
+  return (
+    <header className="globalHeader">
+      <div className="headerLeft">
+        <Link to="/" className="headerLogo" aria-label="홈으로 이동">
+          <img src={Logo} alt="판다마켓 로고" width="153" />
+        </Link>
+
+        <nav>
+          <ul>
+            <li>
+              <NavLink to="/community" style={getLinkStyle}>
+                자유게시판
+              </NavLink>
+            </li>
+            <li>
+
+
+              <NavLink
+                to="/items"
+                style={({ isActive }) =>
+                  location.pathname === "/additem" || isActive
+                    ? { color: "var(--blue)" }
+                    : {}
+                }
+              >
+                중고마켓
+              </NavLink>
+            </li>
+          </ul>
+        </nav>
+      </div>
+
+      <Link to="/login" className="loginLink button">
+        로그인
+      </Link>
+    </header>
+  );
+}
+
+export default Header;