[장수경] sprint11

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);
   };
 

components/productdetail/ItemContent.tsx

@@ -1,18 +1,9 @@
 import React from "react";
 import TagList from "./TagList";
 import LikeButton from "./LikeButton";
-import { ReactComponent as Kebab } from "../../../images/ic_kebab.svg";
-
-interface Product {
-  id: string;
-  name: string;
-  description: string;
-  price: number;
-  tags: string[];
-  images: string[];
-  isFavorite: boolean;
-  favoriteCount: number;
-}
+import Kebab from "@/public/images/ic_kebab.svg";
+import { Product } from "@/types/Types";
+import Image from "next/image";
 
 interface ItemContentProps {
   product: Product;
@@ -30,7 +21,13 @@ function ItemContent({ product }: ItemContentProps) {
         <div className="mainDetail">
           {/* 더보기 버튼 */}
           <button className="kebabButton">
-            <Kebab className="kebobIcon" />
+            <Image
+              src={Kebab}
+              alt="kebab"
+              width={24}
+              height={24}
+              className="kebobIcon"
+            />
           </button>
 
           <div>

components/productdetail/LikeButton.tsx

@@ -1,8 +1,8 @@
 import React, { useState } from "react";
-import { ReactComponent as Heart } from "../../../image/ic_heart.svg";
+import Heart from "@/public/images/ic_heart.svg";
 
 interface LikeButtonProps {
-  productId: string;
+  productId: number;
   isFavorite: boolean;
   favoriteCount: number;
 }

components/ui/DeleteButton.tsx

@@ -1,5 +1,6 @@
 import React from "react";
-import CloseIcon from "../public/images/ic_close.svg";
+import CloseIcon from "@/public/images/ic_close.svg";
+import Image from "next/image";
 
 interface DeleteButtonProps {
   onClick: () => void;
@@ -9,7 +10,7 @@ interface DeleteButtonProps {
 function DeleteButton({ onClick, label }: DeleteButtonProps) {
   return (
     <button aria-label={`${label} 삭제`} onClick={onClick}>
-      <CloseIcon />
+      <Image src={CloseIcon} alt="close" width={24} height={24} />
     </button>
   );
 }

components/ui/Dropdown.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 // import "./Dropdown.css";
-// import SortIcon from "../../public/images/ic_sort.svg";
+import SortIcon from "../../public/images/ic_sort.svg";
 import Image from "next/image";
 
 interface DropdownProps {
@@ -18,12 +18,7 @@ function Dropdown({ onSortSelection, sortOptions }: DropdownProps) {
   return (
     <div>
       <button onClick={toggleDropdown}>
-        <Image
-          src="/images/ic_sort.svg"
-          alt="Sort Icon"
-          width={24}
-          height={24}
-        />
+        <Image src={SortIcon} alt="Sort Icon" width={24} height={24} />
       </button>
 
       {isDropdownView && (

components/ui/ImageUpload.tsx

@@ -1,6 +1,6 @@
 import React, { useRef, useState } from "react";
 // import { useEffect } from "react";
-import PlusIcon from "../public/images/ic_plus.svg";
+import PlusIcon from "@/public/images/ic_plus.svg";
 import DeleteButton from "./DeleteButton";
 import Image from "next/image";
 
@@ -60,7 +60,7 @@ const ImageUpload = ({ title }: ImageUploadProps) => {
           >
             <div className="uploadBoxContent">
               <p className="textArea">
-                <PlusIcon />
+                <Image src={PlusIcon} alt="Plus" width={24} height={24} />
                 <br /> 이미지 등록
               </p>
             </div>

components/ui/Pagination.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import Left from "@/public/images/left.svg";
 import Right from "@/public/images/right.svg";
 import "../../styles/Pagination.module.css";
-// import Image from "next/image";
+import Image from "next/image";
 
 interface PaginationProps {
   totalPageNum: number;
@@ -37,7 +37,7 @@ export default function Pagination({
         disabled={activePageNum === 1}
         onClick={() => onPageChange(activePageNum - 1)}
       >
-        <Left />
+        <Image src={Left} alt="Previous" width={40} height={40} />
         {/* <Image src="/images/left.svg" alt="Previous" width={40} height={40} /> */}
       </button>
       {pages.map((page) => (
@@ -56,7 +56,7 @@ export default function Pagination({
         disabled={activePageNum === totalPageNum}
         onClick={() => onPageChange(activePageNum + 1)}
       >
-        <Right />
+        <Image src={Right} alt="Next" width={40} height={40} />
         {/* <Image src="/images/right.svg" alt="Next" width={40} height={40} /> */}
       </button>
     </div>

components/ui/Search.tsx

@@ -1,6 +1,7 @@
 import SearchIcon from "@/public/images/ic_search.svg";
 import { useEffect, useState } from "react";
 import { useRouter } from "next/router";
+import Image from "next/image";
 
 interface SearchProps {
   onSearch: (keyword: string) => void;
@@ -31,7 +32,7 @@ const Search = ({
 
   return (
     <div>
-      <SearchIcon alt="검색" />
+      <Image src={SearchIcon} alt="검색 아이콘" width={24} height={24} />
       <input
         value={keyword}
         onChange={handleInputChange}

next.config.js

@@ -1,6 +1,15 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
+  images: {
+    domains: [
+      "sprint-fe-project.s3.ap-northeast-2.amazonaws.com",
+      "example.com",
+      "image.hanatour.com",
+      "youtube.com",
+      "cafe24.poxo.com",
+    ],
+  },
 };
 
 module.exports = nextConfig;