Merge pull request #333 from Sookyeong02/Next-장수경-sprint11

[장수경] sprint11

Author: baeggmin

api/api.tsx

@@ -21,7 +21,7 @@ export async function getProducts({
   }
 }
 
-export async function getDetailComments(productId: string) {
+export async function getDetailComments(productId: number) {
   if (!productId) {
     throw new Error("Invalid product ID");
   }
@@ -52,10 +52,15 @@ export async function getProductComments({
     throw new Error("Invalid product ID");
   }
 
+  const params = {
+    limit: String(limit),
+  };
+
   try {
     // 올바르게 URLSearchParams 생성
     // const query = new URLSearchParams().toString(); // 빈 쿼리 문자열을 생성
-    const query = `limit=${limit}`;
+    // const query = `limit=${limit}`;
+    const query = new URLSearchParams(params).toString();
     const response = await fetch(
       `https://panda-market-api.vercel.app/products/${productId}/comments?${query}`
     ); // api 호출

components/board/AllArticle.tsx

@@ -4,6 +4,7 @@ import { useEffect, useState } from "react";
 import ArticleItem from "./ArticleItem";
 import Search from "@/components/ui/Search";
 import Dropdown from "@/components/ui/Dropdown";
+import Link from "next/link";
 
 interface AllArticlesProps {
   initialArticles: Article[];
@@ -52,7 +53,7 @@ const AllArticle = ({ initialArticles }: AllArticlesProps) => {
     <div>
       <div>
         <h2>게시글</h2>
-        <button>글쓰기</button>
+        <Link href="/addboard">글쓰기</Link>
       </div>
 
       <div>

components/board/ArticleContent.tsx

@@ -1,6 +1,7 @@
 import { Article } from "@/types/Types";
 import Kebob from "@/public/images/ic_kebab.svg";
 import ArticleInfo from "./ArticleInfo";
+import Image from "next/image";
 
 interface ArticleContentProps {
   article: Article;
@@ -13,7 +14,7 @@ const ArticleContent = ({ article }: ArticleContentProps) => {
         <h3>{article.title}</h3>
 
         <button>
-          <Kebob />
+          <Image src={Kebob} alt="kebob" width={24} height={24} />
         </button>
 
         <div>

components/board/ArticleInfo.tsx

@@ -1,6 +1,7 @@
 import Profile from "@/public/images/profile.svg";
 import { Article } from "@/types/Types";
 import { formatDate } from "date-fns";
+import Image from "next/image";
 
 interface ArticleInfoProps {
   article: Article;
@@ -11,7 +12,7 @@ const ArticleInfo = ({ article }: ArticleInfoProps) => {
 
   return (
     <div>
-      <Profile width={24} heigt={24} />
+      <Image src={Profile} alt="프로필" width={24} height={24} />
       {article.writer.nickname} {formetDate}
     </div>
   );

components/board/ArticleItem.tsx

@@ -17,10 +17,12 @@ const ArticleItem = ({ article }: ArticleItemProps) => {
             <div>
               <div>
                 <Image
-                  fill
                   src={article.image}
                   alt={`${article.id}번 게시글 이미지`}
                   style={{ objectFit: "contain" }}
+                  layout="responsive"
+                  width={1} // 비율 유지 (가로 1)
+                  height={1} // 비율 유지 (세로 1)
                 />
               </div>
             </div>

components/board/BestArticle.tsx

@@ -12,7 +12,7 @@ const BestArticleCard = ({ article }: { article: Article }) => {
     <>
       <Link href={`/board/${article.id}`}>
         <div>
-          <MedalIcon alt="베스트 게시글" />
+          <Image src={MedalIcon} alt="베스트 게시글" width={24} height={24} />
           Best
         </div>
 
@@ -22,10 +22,11 @@ const BestArticleCard = ({ article }: { article: Article }) => {
             {article.image && (
               <div>
                 <Image
-                  fill
                   src={article.image}
                   alt={`${article.id}번 게시글 이미지`}
-                  style={{ objectFit: "contain" }}
+                  // style={{ objectFit: "contain" }}
+                  width="24"
+                  height="24"
                 />
               </div>
             )}

components/market/AllProduct.tsx

@@ -4,13 +4,14 @@ import Link from "next/link";
 import SearchIcon from "@/public/images/ic_search.svg";
 // import Image from "next/image";
 import Dropdown from "@/components/ui/Dropdown";
-import "@/styles/AllProduct.module.css";
+// import styles from "@/styles/AllProduct.module.css";
 import { useEffect, useState } from "react";
 import ItemCard from "@/components/market/ItemCard";
 import { getProducts } from "@/api/api";
 import Pagination from "@/components/ui/Pagination";
 import { Product, ProductListResponse, ProductSortOption } from "@/types/Types";
 import { useRouter } from "next/router";
+import Image from "next/image";
 
 // 화면 사이즈
 const getPageSize = (width: number) => {
@@ -152,7 +153,7 @@ const AllProduct = () => {
             width={24}
             height={24}
           /> */}
-          <SearchIcon alt="Search Icon" />
+          <Image src={SearchIcon} alt="Search Icon" width={24} height={24} />
           <input
             className="searchInput"
             // onSearch={handleSearch}

components/market/ItemCard.tsx

@@ -15,12 +15,15 @@ const ItemCard = ({ item }: ItemCardProps) => {
         src={item.images[0]}
         alt={`${item.name} 상품 썸네일`}
         className="itemCardImg"
+        layout="responsive"
+        width={1} // 비율 유지 (가로 1)
+        height={1} // 비율 유지 (세로 1)
       />
       <div>
         <h2 className="itemName">{item.name}</h2>
         <p className="itemPrice">{item.price.toLocaleString()}원</p>
         <div className="favoriteCount">
-          <HeartIcon />
+          <Image src={HeartIcon} alt="좋아요" width={24} height={24} />
           {/* <Image
             src="/images/ic_heart.svg"
             alt="Heart Icon"

components/productdetail/DetailComment.tsx

@@ -4,19 +4,7 @@ import { getProductComments } from "@/api/api";
 import InquiryEmpty from "../../../public/images/inquiry_empty.svg";
 import ProfileImg from "../../../images/profile.png";
 import Kebab from "../../../public/images/ic_kebab.svg";
-
-// 댓글 데이터 타입 정의
-interface Comment {
-  id: string;
-  content: string;
-  updatedAt: Date;
-  createdAt: Date;
-  writer: {
-    image: string | null;
-    nickname: string;
-    id: string;
-  };
-}
+import { Comment } from "@/types/Types";
 
 // CommentItem 컴포넌트
 type CommentItemProps = {
@@ -106,7 +94,7 @@ const EmptyState = () => {
 
 // DetailComment 컴포넌트
 type DetailCommentProps = {
-  productId: string;
+  productId: number;
 };
 
 interface ProductCommentList {
@@ -126,9 +114,9 @@ function DetailComment({ productId }: DetailCommentProps) {
       setIsLoading(true);
 
       try {
-        const response: ProductCommentList = await getProductComments(
-          productId
-        );
+        const response: ProductCommentList = await getProductComments({
+          productId,
+        });
         setComments(response.list);
         setError(null);
       } catch (error) {

components/productdetail/DetailInput.tsx

@@ -1,10 +1,14 @@
-import React, { useState } from "react";
+import React, { ChangeEvent, useState } from "react";
 import DetailComment from "./DetailComment";
 
-function DetailInput({ productId }) {
+interface DetailInputProps {
+  productId: number;
+}
+
+function DetailInput({ productId }: DetailInputProps) {
   const [inputValue, setInputValue] = useState("");
 
-  const handleInputChange = (e) => {
+  const handleInputChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
     setInputValue(e.target.value);
   };