[김희진] sprint 8

package.json

@@ -6,6 +6,11 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^29.5.14",
+    "@types/node": "^22.13.5",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
+    "@types/styled-components": "^5.1.34",
     "axios": "^1.7.9",
     "lodash.debounce": "^4.0.8",
     "react": "^18.2.0",
@@ -39,5 +44,10 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@types/lodash.debounce": "^4.0.9",
+    "@types/react-js-pagination": "^3.0.7",
+    "typescript": "^4.9.5"
   }
 }

src/api/comment.tsx

@@ -0,0 +1,24 @@
+import api from "./index";
+
+export interface Comment {
+  id: number;
+  content: string;
+  createdAt: string;
+  updatedAt: string;
+  writer: {
+    id: number;
+    image: string | null;
+    nickname: string;
+  };
+}
+
+export async function getComments(
+  productId: string,
+  limit: number = 3
+): Promise<Comment[]> {
+  const response = await api.get(
+    `/products/${productId}/comments?limit=${limit}`
+  );
+
+  return response.data.list;
+}

src/api/index.tsx

@@ -0,0 +1,12 @@
+import axios from "axios";
+
+const BASE_URL = process.env.REACT_APP_BASE_URL;
+
+const api = axios.create({
+  baseURL: BASE_URL,
+  headers: {
+    "Content-Type": "application/json",
+  },
+});
+
+export default api;

src/api/products.tsx

@@ -0,0 +1,40 @@
+import { AddItem } from "../components/pages/AddItemPage/AddItemPage";
+import api from "./index";
+
+export interface Items {
+  id: string;
+  images: string;
+  name: string;
+  price: number;
+  favoriteCount: number;
+}
+
+interface Params {
+  page: number;
+  pageSize: number;
+  orderBy: string;
+  keyword: string;
+}
+
+export interface DetailItem extends Omit<AddItem, "images"> {
+  images: string | null;
+  favoriteCount: number;
+  createdAt: string;
+  updatedAt: string;
+  ownerNickname: string;
+}
+
+export async function getProducts(params: Params) {
+  const { page, pageSize, orderBy, keyword } = params;
+  const response = await api.get(`/products`, {
+    params: { page, pageSize, orderBy, keyword },
+  });
+
+  return response.data;
+}
+
+export async function getProductInfo(productId: string): Promise<DetailItem> {
+  const response = await api.get(`/products/${productId}`);
+
+  return response.data;
+}

src/components/Comment/CommentInput.jsx → src/components/Comment/CommentInput.tsx

@@ -3,7 +3,7 @@ import * as S from "./CommentInput.styles";
 import { useState } from "react";
 
 export default function CommentInput() {
-  const [comment, setComment] = useState("");
+  const [comment, setComment] = useState<string>("");
 
   return (
     <S.CommentContainer>
@@ -14,7 +14,9 @@ export default function CommentInput() {
         largeHeight="140px"
         isTextarea
         value={comment}
-        onChange={(e) => setComment(e.target.value)}
+        onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+          setComment(e.target.value)
+        }
       />
       <S.RegisterBtn>
         <button disabled={!comment.trim()} onClick={() => setComment("")}>