codeit-bootcamp-frontend · arthurkimdev · Aug 5, 2024 · Jul 7, 2024 · Jul 31, 2024 · Jul 31, 2024
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,7 +11,7 @@
     "react-router-dom": "^6.24.0",
     "react-scripts": "^5.0.1",
     "sass": "^1.77.6",
-    "styled-components": "^6.1.11",
+    "styled-components": "^6.1.12",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

diff --git a/src/images/carrot_panda.png → public/carrot_panda.png b/src/images/carrot_panda.png → public/carrot_panda.png
diff --git a/public/index.html b/public/index.html
@@ -2,7 +2,17 @@
 <html lang="ko">
   <head>
     <meta charset="utf-8" />
-    <title>중고마켓</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta property="og:url" content="https://pandamarket-choiys.netlify.app/" />
+    <meta property="og:title" content="판다마켓" />
+    <meta property="og:type" content="website" />
+    <meta
+      property="og:image"
+      content="https://pandamarket-choiys.netlify.app/preview_img.png"
+    />
+    <meta property="og:description" content="일상의 모든 물건을 거래해보세요" />
+    <title>판다마켓</title>
+    <link rel="icon" href="/panda_face.png" />
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/images/panda_face.png → public/panda_face.png b/src/images/panda_face.png → public/panda_face.png
diff --git a/src/images/preview_img.png → public/preview_img.png b/src/images/preview_img.png → public/preview_img.png
diff --git a/src/App.js b/src/App.js
@@ -3,6 +3,7 @@ import MarketPage from "./pages/Market/MarketPage";
 import AddItemPage from "./pages/AddItems/AddItemPage";
 import HomePage from "./pages/Home/HomePage";
 import ProductdetailPage from "./pages/ProductDetail/ProductDetailPage";
+import "../src/css/global.css";
 
 function App() {
   return (

diff --git a/src/api.js b/src/api.js
@@ -1,12 +1,12 @@
+const API_BASE_URL = "https://panda-market-api.vercel.app/";
+
 export async function getProducts({
-  order = "favoriteCount",
-  offset = 0,
-  limit = 10,
+  orderBy = "recent",
+  page = 1,
+  pageSize = 10,
 }) {
-  const query = `order=${order}&offset=${offset}&limit=${limit}`;
-  const response = await fetch(
-    `https://panda-market-api.vercel.app/Products?${query}`
-  );
+  const query = `orderBy=${orderBy}&page=${page}&pageSize=${pageSize}`;
+  const response = await fetch(`${API_BASE_URL}Products?${query}`);
   if (!response.ok) {
     throw new Error("상품 목록을 불러오는 데 실패했습니다.");
   }
@@ -15,9 +15,7 @@ export async function getProducts({
 }
 
 export async function getProductById(productId) {
-  const response = await fetch(
-    `https://panda-market-api.vercel.app/Products/${productId}`
-  );
+  const response = await fetch(`${API_BASE_URL}Products/${productId}`);
   if (!response.ok) {
     throw new Error("상세 페이지를 불러오는 데 실패했습니다.");
   }
@@ -27,7 +25,7 @@ export async function getProductById(productId) {
 
 export async function getCommentById(productId) {
   const response = await fetch(
-    `https://panda-market-api.vercel.app/Products/${productId}/comments?limit=3`
+    `${API_BASE_URL}Products/${productId}/comments?limit=3`
   );
   if (!response.ok) {
     throw new Error("댓글 목록을 불러오는 데 실패했습니다.");

diff --git a/src/components/Button.jsx b/src/components/Button.jsx
@@ -0,0 +1,18 @@
+import styled from "styled-components";
+
+const StyledCommonButton = styled.button`
+  height: 42px;
+  padding: 12px 20px;
+  border-radius: 8px;
+  margin: auto 0;
+  border: none;
+  color: var(--gray-50);
+  background-color: var(--blue-100);
+  cursor: pointer;
+  text-align: center;
+  align-items: center;
+  font-size: 18px;
+  font-weight: 600;
+`;
+
+export default StyledCommonButton;
diff --git a/src/components/Nav.css b/src/components/Nav.css
diff --git a/src/components/Nav.js b/src/components/Nav.js
@@ -1,20 +1,55 @@
-import "./Nav.css";
 import pandaIcon from "../images/logo_image.png";
+import styled from "styled-components";
+import { Link } from "react-router-dom";
+import StyledCommonButton from "./Button";
+
+const StyledNavContainer = styled.nav`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 10px 100px;
+  border-bottom: 1px solid var(--gray-200);
+`;
+
+const FrontNavContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 0;
+`;
+
+const StyledLogo = styled.img`
+  margin-right: 10px;
+`;
+
+const StyledLink = styled(Link)`
+  text-decoration: none;
+  margin-left: 10px;
+  color: var(--gray-600);
+  font-size: 18px;
+  font-weight: 700;
+`;
+
+const StyledButton = styled(StyledCommonButton)`
+  font-size: 16px;
+  font-weight: 700;
+`;
 
 function Nav() {
   return (
-    <div className="nav-container">
-      <img className="logo-img" src={pandaIcon} alt="판다마켓 로고" />
-      <div className="link-container">
-        <a className="link link-community" href="https://www.google.com/">
-          자유게시판
-        </a>
-        <a className="link link-market" href="https://www.google.com/">
-          중고마켓
-        </a>
-      </div>
-      <button>로그인</button>
-    </div>
+    <StyledNavContainer>
+      <FrontNavContainer>
+        <Link to={`/`}>
+          <StyledLogo src={pandaIcon} alt="판다마켓 로고" />
+        </Link>
+        <div>
+          <StyledLink href="https://www.google.com/">자유게시판</StyledLink>
+          <StyledLink to={`/market`}>중고마켓</StyledLink>
+        </div>
+      </FrontNavContainer>
+      <StyledButton>로그인</StyledButton>
+    </StyledNavContainer>
   );
 }
 

diff --git a/src/css/global.css b/src/css/global.css
@@ -0,0 +1,25 @@
+html,
+body {
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  /* Gray scale */
+  --gray-900: #111827;
+  --gray-800: #1f2937;
+  --gray-700: #374151;
+  --gray-600: #4b5563;
+  --gray-500: #6b7280;
+  --gray-400: #9ca3af;
+  --gray-200: #e5e7eb;
+  --gray-100: #f3f4f6;
+  --gray-50: #f9fafb;
+
+  /* Primary color */
+  --blue-100: #3692ff;
+  --blue-200: #1967d6;
+  --blue-300: #1251aa;
+}
diff --git a/src/hooks/useFetch.js b/src/hooks/useFetch.js
@@ -0,0 +1,28 @@
+import { useState, useCallback, useEffect } from "react";
+
+const useFetch = (fetchCallback, dependencies = []) => {
+  const [data, setData] = useState(null);
+  const [error, setError] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  const fetchData = useCallback(async () => {
+    setLoading(true);
+    try {
+      const result = await fetchCallback();
+      setData(result);
+      setError(null);
+    } catch (error) {
+      setError(error.message);
+    } finally {
+      setLoading(false);
+    }
+  }, dependencies);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  return { data, error, loading };
+};
+
+export default useFetch;
diff --git a/src/images/empty_comment_img.png b/src/images/empty_comment_img.png
diff --git a/src/images/x_icon.png b/src/images/x_icon.png
diff --git a/src/pages/AddItems/AddItemPage.css b/src/pages/AddItems/AddItemPage.css