Merge pull request #554 from soma0078/React-이송아-sprint8

[이송아] sprint8

package.json

@@ -6,12 +6,16 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "@types/react-router-dom": "^5.3.3",
+    "@types/styled-components": "^5.1.34",
+    "date-fns": "^3.6.0",
     "pretendard": "^1.3.9",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^5.0.1",
     "react-router-dom": "^6.22.3",
     "react-scripts": "5.0.1",
+    "react-spinners": "^0.13.8",
     "styled-components": "^6.1.8",
     "styled-reset": "^4.5.2",
     "web-vitals": "^2.1.4"
@@ -33,5 +37,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "typescript": "^5.4.5"
   }
 }

src/App.tsx

@@ -0,0 +1,30 @@
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import HomePage from './pages/HomePage/HomePage';
+import LoginPage from './pages/LoginPage/LoginPage';
+import MarketPage from './pages/MarketPage/MarketPage';
+import AddItemPage from './pages/AddItemPage/AddItemPage';
+import CommunityFeedPage from './pages/CommunityFeedPage/CommunityFeedPage';
+import Header from './components/Layout/Header';
+import ItemPage from './pages/ItemPage/ItemPage';
+
+function App() {
+  return (
+    <BrowserRouter>
+      {/* Global Navigation Bar */}
+      <Header />
+
+      <div className="withHeader">
+        <Routes>
+          <Route index element={<HomePage />} />
+          <Route path="login" element={<LoginPage />} />
+          <Route path="items" element={<MarketPage />} />
+          <Route path="items/:productId" element={<ItemPage />} />
+          <Route path="additem" element={<AddItemPage />} />
+          <Route path="community" element={<CommunityFeedPage />} />
+        </Routes>
+      </div>
+    </BrowserRouter>
+  );
+}
+
+export default App;

src/api/itemApi.ts

@@ -0,0 +1,88 @@
+interface Entity {
+  id: string;
+  name: string;
+}
+
+interface Product extends Entity {
+  price: number;
+}
+
+interface ProductDetail extends Entity {
+  description: string;
+}
+
+interface Comment extends Entity {
+  productId: string;
+  content: string;
+}
+
+interface ProductResponse {
+  list: Product[];
+  totalCount: number;
+}
+
+export async function getProducts(params: {
+  orderBy: string;
+  page: number;
+  pageSize: number;
+}): Promise<ProductResponse> {
+  const query = new URLSearchParams({
+    orderBy: params.orderBy,
+    page: params.page.toString(),
+    pageSize: params.pageSize.toString(),
+  }).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;
+  }
+}
+
+export async function getProductDetail(productId: string): Promise<ProductDetail> {
+  if (!productId) {
+    throw new Error('Invalid product ID');
+  }
+
+  try {
+    const response = await fetch(`https://panda-market-api.vercel.app/products/${productId}`);
+    if (!response.ok) {
+      throw new Error(`HTTP error: ${response.status}`);
+    }
+    const body = await response.json();
+    return body;
+  } catch (error) {
+    console.error('Failed to fetch product detail:', error);
+    throw error;
+  }
+}
+
+export async function getProductComments(params: {
+  productId: string;
+  params?: Record<string, any>;
+}): Promise<Comment[]> {
+  const { productId, params: queryParams } = params;
+
+  if (!productId) {
+    throw new Error('Invalid product ID');
+  }
+
+  try {
+    const query = new URLSearchParams(queryParams).toString();
+    const response = await fetch(`https://panda-market-api.vercel.app/products/${productId}/comments?${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 product comments:', error);
+    throw error;
+  }
+}