feat:typescript로 수정

.gitignore

@@ -1,23 +1,50 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
+### macOS ###
+# General
+.DS_Store
+.AppleDouble
+.LSOverride
 
-# testing
-/coverage
+# Icon must end with two \r
+Icon
 
-# production
-/build
 
-# misc
-.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
+# Thumbnails
+._*
+
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+.com.apple.timemachine.donotpresent
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+
+### macOS Patch ###
+# iCloud generated files
+*.icloud
+
+### react ###
+.DS_*
+*.log
+logs
+**/*.backup.*
+**/*.back.*
+
+node_modules
+bower_components
+
+*.sublime*
+
+psd
+thumb
+sketch
+

package.json

@@ -10,6 +10,7 @@
     "@types/node": "^22.7.6",
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.1",
+    "axios": "^1.7.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.26.1",

src/api/itemApi.tsx

@@ -1,8 +1,8 @@
+import axios from 'axios';
+
 const BASE_URL = 'https://panda-market-api.vercel.app';
 
 export async function getProducts(params = {}) {
-
-    const query = new URLSearchParams(params).toString();
     const allowedParams = ["orderBy", "pageSize", "page", "keyword"];
     const invalidParams = Object.keys(params)
         .filter(key => !allowedParams.includes(key));
@@ -12,70 +12,49 @@ export async function getProducts(params = {}) {
     }
 
     try {
-        const response = await fetch(
-        `${BASE_URL}/products?${query}`
-        );
-        if (!response.ok) {
-        throw new Error(`HTTP error: ${response.status}`);
-        }
-        const body = await response.json();
-        return body;
+        const response = await axios.get(`${BASE_URL}/products`, {
+            params
+        });
+        return response.data; 
     } catch (error) {
         console.error("Failed to fetch products:", error);
         throw error;
     }
 }
 
-export async function getProductDetail(productId) {
+export async function getProductDetail(productId: number) {
     try {
-        const response = await fetch(
-            `${BASE_URL}/products/${productId}` 
-        );
-        if (!response.ok) {
-            throw new Error(`HTTP error: ${response.status}`);
-        }
-
-        const body = await response.json();
-        return body;
+        const response = await axios.get(`${BASE_URL}/products/${productId}`);
+        return response.data; 
     } catch (error) {
         console.error("Failed to fetch product details:", error);
         throw error;
     }
 }
 
-export async function postProductComment(productId, formData) {
+export async function postProductComment(productId: number, formData: FormData) {
     try {
-        const response = await fetch(
-            `${BASE_URL}/products/${productId}/comments`,
-            {
-                method:'POST',
-                body:formData,
-            } 
-        );
-        if (!response.ok) {
-            throw new Error(`HTTP error: ${response.status}`);
-        }
-        const body = await response.json();
-        return body;
+        const response = await axios.post(`${BASE_URL}/products/${productId}/comments`, formData, {
+            headers: {
+                'Content-Type': 'multipart/form-data'
+            }
+        });
+        return response.data; 
     } catch (error) {
-        console.error("Failed to fetch product comments:", error);
+        console.error("Failed to post product comment:", error);
         throw error;
     }
 }
 
-export async function getProductComments(productId, params = {}) {
-    const { limit, cursor } = params;
-    const query = new URLSearchParams({ limit, cursor }).toString(); // limit과 cursor만 query로 사용
-
+export async function getProductComments(productId: number, params = { limit: 10, cursor: 0 }) {
     try {
-        const response = await fetch(
-            `${BASE_URL}/products/${productId}/comments?${query}`
-        );
-        if (!response.ok) {
-            throw new Error(`HTTP error: ${response.status}`);
-        }
-        const body = await response.json();
-        return body;
+        const response = await axios.get(`${BASE_URL}/products/${productId}/comments`, {
+            params: {
+                limit: params.limit,
+                cursor: params.cursor
+            }
+        });
+        return response.data; 
     } catch (error) {
         console.error("Failed to fetch product comments:", error);
         throw error;

src/global.d.ts

@@ -0,0 +1,9 @@
+declare module '*.module.css' {
+    const classes: { [key: string]: string };
+    export default classes;
+}
+declare module '*.png' {
+  const value: string;
+  export default value;
+}
+