Merge pull request #125 from jeschun/React-박신천-sprint8A

[박신천] Sprint 8

Author: kiJu2

.DS_Store

@@ -10,14 +10,19 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
+    "@types/jest": "^30.0.0",
+    "@types/node": "^24.3.1",
+    "axios": "^1.11.0",
+    "file-loader": "^6.2.0",
+    "install": "^0.13.0",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
     "react-router-dom": "^7.8.2"
   },
   "devDependencies": {
     "@eslint/js": "^9.25.0",
-    "@types/react": "^19.1.2",
-    "@types/react-dom": "^19.1.2",
+    "@types/react": "^19.1.12",
+    "@types/react-dom": "^19.1.9",
     "@vitejs/plugin-react": "^4.7.0",
     "eslint": "^9.25.0",
     "eslint-plugin-react-hooks": "^5.2.0",

vite-project/package-lock.json

@@ -0,0 +1,39 @@
+import instance from "./axiosInstance";
+
+export interface Items {
+  id: number;
+  name: string;
+  price: number;
+  tags: string[];
+  images: string[];
+  favoriteCount: number;
+  createdAt: string;
+  updatedAt: string;
+}
+export type OrderBy = "recent" | "favorite";
+export interface GetListsParams {
+  page: number;
+  pageSize: number;
+  orderBy: OrderBy;
+  keyword?: string;
+}
+
+export interface GetListsResponse {
+  list: Items[];
+}
+
+export async function getLists({
+  page = 1,
+  pageSize = 10,
+  orderBy = "recent",
+  keyword = "",
+}: GetListsParams): Promise<GetListsResponse> {
+  const query = `page=${page}&pageSize=${pageSize}&orderBy=${orderBy}&keyword=${keyword}`;
+
+  try {
+    const { data } = await instance.get(`/products?${query}`);
+    return data;
+  } catch {
+    throw new Error("상품 목록을 가져오는데 실패했습니다.");
+  }
+}

vite-project/package.json

@@ -0,0 +1,10 @@
+import axios from "axios";
+
+const instance = axios.create({
+  baseURL: "https://panda-market-api.vercel.app",
+  headers: {
+    "Content-Type": "application/json",
+  },
+});
+
+export default instance;

vite-project/src/App.jsx renamed to vite-project/src/App.tsx

@@ -1,13 +1,25 @@
 import { useNavigate } from "react-router-dom";
 import "./AllItems.css";
+import { OrderBy } from "../api/api";
 
-const AllItems = ({ orderBy, setOrderBy, search, setSearch }) => {
+interface Props {
+  orderBy: string;
+  setOrderBy: React.Dispatch<React.SetStateAction<OrderBy>>; // AllItems 왼쪽 setOrderBy가 any로 떠서 오른쪽 setOrderBy를 hover 해서 뜬걸 그대로 붙여넣었습니다
+  search: string;
+  setSearch: React.Dispatch<React.SetStateAction<string>>; // ''
+}
+const AllItems = ({ orderBy, setOrderBy, search, setSearch }: Props) => {
   const navigate = useNavigate();
 
   const navigateToRegister = () => {
     navigate("/additem");
   };
 
+  const SetOrderBySelect = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    if (e.target.value === "recent" || e.target.value === "favorite")
+      setOrderBy(e.target.value);
+  }; //OrderBy가 리터럴 유니온 타입인데, e.target.value가 string 으로 타입오류가 떠서 if 문으로 고쳤습니다
+
   return (
     <>
       <div className="allitems_menu">
@@ -29,9 +41,7 @@ const AllItems = ({ orderBy, setOrderBy, search, setSearch }) => {
           <select
             className="dropped-down"
             value={orderBy}
-            onChange={(e) => {
-              setOrderBy(e.target.value);
-            }}
+            onChange={SetOrderBySelect}
           >
             <option value="recent">최신순</option>
             <option value="favorite">좋아요순</option>