codeit-bootcamp-frontend · addiescode-sj · May 27, 2025 · May 22, 2025 · May 22, 2025 · May 24, 2025
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^7.6.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="ko">
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>판다마켓</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/public/robots.txt b/public/robots.txt
diff --git a/src/App.css b/src/App.css
diff --git a/src/App.js b/src/App.js
@@ -1,24 +1,23 @@
-import logo from './logo.svg';
-import './App.css';
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+import Header from "./components/Header";
+import HomePage from "./pages/Homepage/HomePage";
+import CommunityPage from "./pages/CommunityPage/CommunityPage";
+import ProductsPage from "./pages/ProductsPage/ProductsPage";
+import LoginPage from "./pages/LoginPage/LoginPage";
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <BrowserRouter>
+      <Header />
+      <div className="container">
+        <Routes>
+          <Route index element={<HomePage />} />
+          <Route path="community" element={<CommunityPage />} />
+          <Route path="items" element={<ProductsPage />} />
+          <Route path="login" element={<LoginPage />} />
+        </Routes>
+      </div>
+    </BrowserRouter>
   );
 }
 

diff --git a/src/App.test.js b/src/App.test.js
diff --git a/src/api.js b/src/api.js
@@ -0,0 +1,12 @@
+const BASE_URL = "https://panda-market-api.vercel.app";
+
+export async function getProducts(params = {}) {
+  const query = new URLSearchParams(params).toString();
+
+  const response = await fetch(`${BASE_URL}/products?${query}`);
+  if (!response.ok) {
+    throw new Error("상품을 불러오는데 실패했습니다.");
+  }
+  const body = await response.json();
+  return body;
+}
diff --git a/src/assets/heart.svg b/src/assets/heart.svg
diff --git a/src/assets/leftBtn.svg b/src/assets/leftBtn.svg
diff --git a/src/assets/logo.png b/src/assets/logo.png
diff --git a/src/assets/rightBtn.svg b/src/assets/rightBtn.svg
diff --git a/src/assets/searchicon.svg b/src/assets/searchicon.svg
diff --git a/src/assets/sorticon.svg b/src/assets/sorticon.svg
diff --git a/src/assets/userMenu.png b/src/assets/userMenu.png
diff --git a/src/components/Header.css b/src/components/Header.css
@@ -0,0 +1,54 @@
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.headerLeft {
+  display: flex;
+  align-items: center;
+}
+
+.logo {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+}
+.logo a {
+  color: var(--primary-color);
+  font-size: var(--text-xl);
+  font-weight: 700;
+  line-height: 100%;
+  cursor: pointer;
+}
+
+.headerNav {
+  display: flex;
+  list-style: none;
+  gap: 10px;
+  margin-left: 16px;
+}
+
+.headerNav a {
+  color: var(--gray);
+  font-size: var(--text-base);
+  line-height: 26px;
+  font-weight: 600;
+}
+
+.headerUser {
+  width: 40px;
+  height: 40px;
+}
+
+@media (min-width: 768px) {
+  .logo a {
+    font-size: 25.63px;
+  }
+  .headerNav a {
+    font-size: var(--text-lg);
+  }
+}
+
+@media (min-width: 1280px) {
+}
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
@@ -0,0 +1,35 @@
+import { Link, NavLink } from "react-router-dom";
+import "./Header.css";
+import usermenu from "../assets/userMenu.png";
+import logo from "../assets/logo.png";
+
+function Header() {
+  return (
+    <header className="header">
+      <div className="headerLeft">
+        <Link to="/" className="logo">
+          <img src={logo} alt="판다마켓 로고" width="40px" />
+          <a href="/" aria-label="홈으로 이동">
+            판다마켓
+          </a>
+        </Link>
+        <nav>
+          <ul className="headerNav">
+            <li>
+              <NavLink to="/community">자유게시판</NavLink>
+            </li>
+            <li>
+              <NavLink to="/items">중고마켓</NavLink>
+            </li>
+          </ul>
+        </nav>
+      </div>
+
+      <Link className="headerUser" to="/login">
+        <img src={usermenu} alt="유저메뉴" />
+      </Link>
+    </header>
+  );
+}
+
+export default Header;
diff --git a/src/index.css b/src/index.css
diff --git a/src/index.js b/src/index.js
@@ -1,17 +1,11 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+import "./styles/global.css";
 
-const root = ReactDOM.createRoot(document.getElementById('root'));
+const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>
 );
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
diff --git a/src/logo.svg b/src/logo.svg
diff --git a/src/pages/CommunityPage/CommunityPage.jsx b/src/pages/CommunityPage/CommunityPage.jsx
@@ -0,0 +1,5 @@
+function CommunityPage() {
+  return <div>CommunityPage</div>;
+}
+
+export default CommunityPage;
diff --git a/src/pages/Homepage/HomePage.jsx b/src/pages/Homepage/HomePage.jsx
@@ -0,0 +1,5 @@
+function HomaPage() {
+  return <div>HomePage</div>;
+}
+
+export default HomaPage;
diff --git a/src/pages/LoginPage/LoginPage.jsx b/src/pages/LoginPage/LoginPage.jsx
@@ -0,0 +1,5 @@
+function LoginPage() {
+  return <div>LoginPage</div>;
+}
+
+export default LoginPage;