[송미진] sprint7

.vscode/settings.json

@@ -0,0 +1,8 @@
+{
+  "cSpell.words": [
+    "kakao",
+    "maincomponents",
+    "Pretendard",
+    "selectbox"
+  ]
+}

jsconfig.json

@@ -0,0 +1,6 @@
+{
+  "compilerOptions": {
+    "baseUrl": "src"
+  },
+  "include": ["src"]
+}

package.json

@@ -3,13 +3,20 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@tanstack/react-query": "^5.74.4",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.8.4",
+    "classnames": "^2.5.1",
+    "clsx": "^2.1.1",
+    "framer-motion": "^12.7.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-scripts": "5.0.1",
-    "web-vitals": "^2.1.4"
+    "react-router-dom": "^7.4.0",
+    "react-scripts": "^5.0.1",
+    "web-vitals": "^2.1.4",
+    "webpack": "^5.98.0"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -34,5 +41,10 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.21",
+    "postcss": "^8.5.3",
+    "tailwindcss": "^3.4.17"
   }
-}
+}

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/Main.js → src/Main.jsx

@@ -1,14 +1,16 @@
+import React from 'react';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import App from './components/App';
 import HomePage from './pages/HomePage';
 import Faq from './pages/Faq';
 import Privacy from './pages/Privacy';
 import Login from './pages/Login';
-import ItemsBox from './pages/ItemsBox.js';
+import ItemsBox from './pages/ItemsBox';
 import Signup from './pages/Signup';
 import Additem from './pages/Additem';
 import Boards from './pages/Boards';
 import ItemsDetail from './pages/ItemsDetail';
+import { useScreenType } from 'hooks/useScreenType';
 
 
 function Main() {
@@ -21,7 +23,7 @@ function Main() {
           <Route path="Faq" element={<Faq />} />
           <Route path="ItemsBox" >
             <Route index element={<ItemsBox />} />
-            <Route path="ItemsDetail" element={<ItemsDetail />} />
+            <Route path="ItemsDetail/:id" element={<ItemsDetail />} />
             <Route path="Additem" element={<Additem />} />  
           </Route>
           <Route path="Boards" element={<Boards />} />

src/api/index.jsx

@@ -0,0 +1,92 @@
+import axios from 'axios';
+
+const requestor = axios.create({
+  baseURL: 'https://panda-market-api.vercel.app',
+  timeout: 60000,
+  headers: {
+    'Content-Type': 'application/json',
+    Accept: 'application/json',
+  },
+});
+
+// 상품 리스트 가져오기
+export async function getProducts(query) {
+  const objectToQueryString = (obj) => {
+    const params = new URLSearchParams();
+    Object.entries(obj).forEach(([key, value]) => {
+      if (value !== undefined && value !== null && value !== "") {
+        params.set(key, String(value));
+      }
+    });
+    return params.toString();
+  };
+
+  const queryString = objectToQueryString(query);
+
+  try {
+    const response = await requestor.get(`/products?${queryString}`);
+    return response.data;
+  } catch (error) {
+    console.error("상품 목록 조회 실패:", error);
+    throw error;
+  }
+}
+
+// 상품 상세
+export async function getProductsDetail(id) {
+  try {
+    const response = await requestor.get(`/products/${id}`);
+    return response.data;
+  } catch (error) {
+    console.error("상품 상세 조회 실패:", error);
+    throw error;
+  }
+}
+
+// 상품 댓글
+export async function getProductsComments(id, limit = 4, cursor = 0) {
+  try {
+    const response = await requestor.get(`/products/${id}/comments?limit=${limit}&cursor=${cursor}`);
+    return response.data;
+  } catch (error) {
+    console.error("댓글 목록 조회 실패:", error);
+    throw error;
+  }
+}
+
+// 댓글 수정
+export async function updateComment(commentId, content) {
+  console.log('updateComments',commentId);
+  try {
+    const response = await requestor.patch(`/comments/${commentId}`, {
+      content,
+    });
+    return response.data;
+  } catch (error) {
+    console.error(" 댓글 수정 실패:", error);
+    throw error;
+  }
+}
+// 댓글 삭제
+export async function deleteComment(commentId) {
+  console.log('deleteComments',commentId);
+  try {
+    await requestor.delete(`/comments/${commentId}`);
+  } catch (error) {
+    console.error('댓글 삭제 실패:', error);
+    throw error;
+  }
+}
+// 댓글 등록
+export async function postProductComment(id, content) {
+  console.log('postComments',id);
+  try {
+    const response = await requestor.post(`/products/${id}/comments`, {
+      content,
+    });
+    return response.data;
+  } catch (error) {
+    console.error('댓글 작성 실패:', error);
+    throw error;
+  }
+}

src/components/App.jsx

@@ -0,0 +1,33 @@
+import React, { useState } from 'react';
+import { Outlet,useLocation } from 'react-router-dom';
+import Nav from './layout/Nav';
+import Footer from './layout/Footer';
+import ProductNav from './layout/ProductNav';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+function App({ Component, pageProps }) {
+  const [queryClient] = useState(() => new QueryClient());
+
+  const location = useLocation();
+  const isItemsDetail = /^\/ItemsBox\/ItemsDetail\/\d+$/.test(location.pathname);
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <div>
+        {
+        location.pathname === '/ItemsBox' ||
+        location.pathname === '/ItemsDetail' || 
+        location.pathname === '/Boards' ||  
+        isItemsDetail ? 
+        <ProductNav/> 
+        : 
+        <Nav/> 
+        }
+        <div><Outlet /></div>
+        <Footer/>
+      </div>
+    </QueryClientProvider>
+  );
+}
+
+export default App;