[박신천] Sprint 8

vite-project/package.json

@@ -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/src/api/api.tsx

@@ -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/src/api/axiosInstance.tsx

@@ -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/components/AllItems.jsx → vite-project/src/components/AllItems.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>

vite-project/src/components/ListItem.jsx → vite-project/src/components/ListItem.tsx

@@ -1,11 +1,15 @@
 import "./ListItem.css";
+import { Items } from "../api/api";
+interface Props {
+  item: Items;
+}
 
-function ListItem({ item }) {
+function ListItem({ item }: Props) {
   return (
     <div>
       <div className="list-item">
         <div className="item-images">
-          <img src={item.images} />
+          <img src={item.images?.[0]} />
         </div>
         <div className="item-text">
           <p>{item.name}</p>

vite-project/src/components/PageItems.jsx → vite-project/src/components/PageItems.tsx

@@ -1,8 +1,10 @@
 import ListItem from "./ListItem";
 import "./ListItem.css";
-
-function PageItems({ items }) {
-  console.log(items);
+import { Items } from "../api/api";
+interface Props {
+  items: Items[];
+}
+function PageItems({ items }: Props) {
   return (
     <ul className="item">
       {items.map((item) => {

vite-project/src/components/svg.d.ts

@@ -0,0 +1,4 @@
+declare module "*.svg" {
+  const value: any;
+  export default value;
+}

vite-project/src/hooks/mediaquery.jsx → vite-project/src/hooks/mediaquery.tsx

@@ -1,18 +1,17 @@
 import { useEffect, useState } from "react";
 
 export default function useMediaQuery() {
-  const [device, setDevice] = useState("mobile"); // 'desktop' | 'tablet' | 'mobile'
+  const [device, setDevice] = useState<string>("mobile"); // 'desktop' | 'tablet' | 'mobile'
 
   useEffect(
     () => {
       const { matches: isTablet } = window.matchMedia(
         "screen and (min-width: 768px) and (max-width: 1023px)"
       );
-      console.log(isTablet, "isTablet");
+
       const { matches: isDesktop } = window.matchMedia(
         "screen and (min-width: 1024px)"
       );
-      console.log(isDesktop, "isDesktop");
 
       if (isTablet) {
         setDevice("tablet");

vite-project/src/main.jsx → vite-project/src/main.tsx

@@ -3,4 +3,4 @@ import { createRoot } from "react-dom/client";
 import "./index.css";
 import App from "./App.jsx";
 
-createRoot(document.getElementById("root")).render(<App />);
+createRoot(document.getElementById("root") as HTMLElement).render(<App />);

vite-project/src/pages/UsedMarketPage.jsx → vite-project/src/pages/UsedMarketPage.tsx

@@ -5,18 +5,21 @@ import PageItems from "../components/PageItems";
 import { getLists } from "../api/api";
 import useMediaQuery from "../hooks/mediaquery";
 import "./UsedMarketPage.css";
-
-const LIMIT = 12;
+import { Items, OrderBy, GetListsParams, GetListsResponse } from "../api/api";
 
 const UsedMarketPage = () => {
-  const [orderBy, setOrderBy] = useState("recent");
-  const [items, setItems] = useState([]);
-  const [bestItems, setBestItems] = useState([]);
+  const LIMIT = 12;
+  const [orderBy, setOrderBy] = useState<OrderBy>("recent");
+  const [items, setItems] = useState<Items[]>([]);
+  const [bestItems, setBestItems] = useState<Items[]>([]);
   const [page, setPage] = useState(1);
   const [search, setSearch] = useState("");
 
+  type DeviceMap = { [key: string]: number }; // 인덱스 시그니처
+
   const { device } = useMediaQuery();
-  const deviceMap = {
+
+  const deviceMap: DeviceMap = {
     mobile: 1,
     tablet: 2,
     desktop: 4,
@@ -36,7 +39,7 @@ const UsedMarketPage = () => {
     fetchlist();
   }, [pageSize]);
 
-  const goPage = async (n) => {
+  const goPage = async (n: number) => {
     const { list } = await getLists({
       page: n,
       pageSize: LIMIT,
@@ -51,13 +54,8 @@ const UsedMarketPage = () => {
     goPage(1);
   }, [orderBy, search]);
 
-  const getFilteredData = () => items;
-  const filteredItems = getFilteredData();
-
   const MAXPAGE = 5;
 
-  const focusPage = (n) => document.getElementById(`page${n}`).focus();
-
   return (
     <>
       <main className="main">
@@ -69,13 +67,13 @@ const UsedMarketPage = () => {
           search={search}
           setSearch={setSearch}
         />
-        <PageItems items={filteredItems} />
+        <PageItems items={items} />
         <div>
           <div className="page_button">
             <button
               onClick={() => {
                 const n = Math.max(1, page - 1);
-                focusPage(n);
+
                 goPage(n);
               }}
             >
@@ -99,7 +97,7 @@ const UsedMarketPage = () => {
             <button
               onClick={() => {
                 const n = Math.min(MAXPAGE, page + 1);
-                focusPage(n);
+
                 goPage(n);
               }}
             >

vite-project/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "outDir": "dist",
+    "strict": true,
+    "moduleDetection": "force",
+    "jsx": "react-jsx",
+    "moduleResolution": "bundler",
+    "traceResolution": true
+  },
+  "include": ["src"]
+}