[유선향]-sprint7

package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.7.9",
     "firebase": "^11.1.0",
     "lodash.throttle": "^4.1.1",
     "react": "^18.2.0",

src/Hooks/useAutoClose.jsx

@@ -0,0 +1,21 @@
+import { useState, useEffect, useRef } from "react";
+
+export function useAutoClose(initialState) {
+  const [isOpen, setIsOpen] = useState(initialState);
+  const ref = useRef(null);
+
+  const handleOutsideClick = (e) => {
+    if (ref.current && !ref.current.contains(e?.target)) {
+      setIsOpen(false);
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener("click", handleOutsideClick, true);
+    return () => {
+      document.removeEventListener("click", handleOutsideClick, true);
+    };
+  }, []);
+
+  return { ref, isOpen, setIsOpen };
+}

src/Hooks/useFormatting.jsx

@@ -0,0 +1,33 @@
+export function useFormatDate(data) {
+  const date = new Date(data);
+  const formattedDate = `${date.getFullYear()}.${String(
+    date.getMonth() + 1
+  ).padStart(2, "0")}.${String(date.getDate()).padStart(2, "0")}`;
+  return formattedDate;
+}
+
+export const useFormatPrice = (data, currency = "KRW") => {
+  if (typeof data !== "number") return "가격 정보 없음";
+  return data.toLocaleString("ko-KR", {
+    style: "decimal",
+    currency: currency,
+  });
+};
+
+export const useFormatUpDate = (timestamp) => {
+  const now = new Date();
+  const past = new Date(timestamp);
+  const diff = (now - past) / 1000;
+
+  if (diff < 60) {
+    return "1분전";
+  } else if (diff < 3600) {
+    return `${Math.floor(diff / 60)}분 전`; // 1시간 미만
+  } else if (diff < 86400) {
+    return `${Math.floor(diff / 3600)}시간 전`; // 24시간 미만
+  } else if (diff < 30 * 86400) {
+    return `${Math.floor(diff / 86400)}일 전`; // 30일 미만
+  } else {
+    return past.toISOString().split("T")[0]; // YYYY-MM-DD 형식 (한 달 이상 지난 경우)
+  }
+};

src/Main.jsx

@@ -0,0 +1,70 @@
+import { Route, BrowserRouter, Routes } from "react-router-dom";
+import { createGlobalStyle } from "styled-components";
+//
+import LandingPage from "./pages/LandingPage/LandingPage.jsx";
+import App from "./App.js";
+import HomePage from "./pages/HomePage/HomePage.jsx";
+import AddItem from "./pages/AddItem/AddItem.jsx";
+import Product from "./pages/ProductPage/Product.jsx";
+import Test from "./components/TestPage.jsx";
+//
+//
+const GlobalStyle = createGlobalStyle`
+  * {
+    box-sizing: border-box;
+  }
+  body {
+    font-family: 'Pretendard', sans-serif;
+    font-display: swap;
+    margin: 0; 
+    padding: 0;
+  }
+  html {
+  margin: 0; 
+  padding: 0;
+  }
+  a {
+    text-decoration: none; 
+    color: #ffffff;
+  }
+  p{
+    margin: 0px;
+  }
+  @font-face {
+  font-family: 'Pretendard';
+  src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff2') format('woff2');
+  src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
+  font-display: swap;
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+font-family: "Pretendard";
+src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Bold.woff2') format('woff2');
+src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Bold.woff') format('woff');
+  font-display: swap;
+  font-weight: 600;
+  font-style: normal;
+}
+`;
+//
+function Main() {
+  return (
+    <>
+      <GlobalStyle />
+      <BrowserRouter>
+        <Routes>
+          <Route path="/" element={<LandingPage />} />
+          <Route element={<App />}>
+            <Route path="/test" element={<Test />} />
+            <Route path="/items" element={<HomePage />} />
+            <Route path="/items/:productId" element={<Product />} />
+            <Route path="/additem" element={<AddItem />} />
+          </Route>
+        </Routes>
+      </BrowserRouter>
+    </>
+  );
+}
+export default Main;

src/api/comment.api.jsx

@@ -0,0 +1,17 @@
+import axios from "axios";
+const BASE_URL = "https://panda-market-api.vercel.app";
+
+export async function getProductComments(productId, limit = 3) {
+  try {
+    const res = await axios.get(
+      `${BASE_URL}/products/${productId}/comments?limit=${limit}`
+    );
+    if (!res) {
+      throw new Error("리뷰 불러오기 실패");
+    }
+    return res.data;
+  } catch (error) {
+    console.error(error);
+    return null;
+  }
+}

src/api.js → src/api/product.api.jsx

@@ -1,3 +1,4 @@
+import axios from "axios";
 const BASE_URL = "https://panda-market-api.vercel.app";
 
 export async function getProducts({
@@ -28,3 +29,14 @@ export async function bestProducts({ device }) {
   const body = await response.json();
   return body;
 }
+
+export async function getProductInfo(productId) {
+  try {
+    const response = await axios.get(`${BASE_URL}/products/${productId}`);
+    if (!response) throw new Error("제품정보 get api 실패");
+    return response.data;
+  } catch (error) {
+    console.error(error, "제품정보 api 실패");
+    return null;
+  }
+}