[이수지] sprint11 (#132)

* fix: hasImage prop 오류로 인한 라이브러리 설지 및 수정

* fix: react, react dom 라이브러리 버전 변경(18 -> 18.2.0)

React의 18버전에서 `fetchPriority` prop이 DOM 요소에서 인식되지 않는 버그로 인함

* refactor: 이미지 업로드 관련 함수들 커스텀훅으로 분리

* fix: svg를 컴포넌트화해서 사용하는 부분에 오류가 있어, Image 컴포넌트로 수정

* feat: 로그인 기능 구현

* feat: 토큰 유무에 따라 프로필 이미지 렌더링 처리

---------

Co-authored-by: Suzy-Lee <>

Author: mulddang2

api/itemApi.ts

@@ -0,0 +1,78 @@
+import { ProductListFetcherParams } from '@/types/productTypes';
+
+export async function getProducts({
+  orderBy,
+  pageSize,
+  page = 1,
+}: ProductListFetcherParams) {
+  const params = new URLSearchParams({
+    orderBy,
+    pageSize: String(pageSize),
+    page: String(page),
+  });
+
+  try {
+    const response = await fetch(
+      `http://panda-market-api.vercel.app/products?${params}`
+    );
+    if (!response.ok) {
+      throw new Error(`HTTP error: ${response.status}`);
+    }
+
+    const body = await response.json();
+    return body;
+  } catch (error) {
+    console.error('Failed to fetch products:', error);
+    throw error;
+  }
+}
+
+export async function getProductDetail(productId: number) {
+  if (!productId) {
+    throw new Error('상품 아이디가 유효가지 않습니다');
+  }
+
+  try {
+    const response = await fetch(
+      `https://panda-market-api.vercel.app/products/${productId}`
+    );
+    if (!response.ok) {
+      throw new Error(`HTTP error: ${response.status}`);
+    }
+
+    const body = await response.json();
+    return body;
+  } catch (error) {
+    console.error('Failed to fetch product detail:', error);
+    throw error;
+  }
+}
+
+export async function getProductComments({
+  productId,
+  limit = 10,
+}: {
+  productId: number;
+  limit?: number;
+}) {
+  const params = new URLSearchParams({
+    limit: String(limit),
+    productId: String(productId),
+  });
+
+  try {
+    const query = new URLSearchParams(params).toString();
+    const response = await fetch(
+      `https://panda-market-api.vercel.app/products/${productId}/comments?${query}`
+    );
+    if (!response.ok) {
+      throw new Error(`HTTP error: ${response.status}`);
+    }
+
+    const body = await response.json();
+    return body;
+  } catch (error) {
+    console.error('Failed to fetch product comments:', error);
+    throw error;
+  }
+}

components/boards/BestArticlesSection.tsx

@@ -49,7 +49,8 @@ const BestArticleCard = ({ article }: { article: Article }) => {
   return (
     <CardContainer href={`/boards/${article.id}`}>
       <BestSticker>
-        <MedalIcon alt="베스트 게시글" />
+        {/* <MedalIcon alt="베스트 게시글" /> */}
+        <Image src={MedalIcon} alt="베스트 게시글" />
         Best
       </BestSticker>
 

components/items/itemPage/CommentThread.tsx

@@ -10,6 +10,7 @@ import {
   ProductCommentListResponse,
 } from "@/types/commentTypes";
 import EmptyState from "@/components/ui/EmptyState";
+import Image from "next/image";
 
 const CommentContainer = styled.div`
   padding: 24px 0;
@@ -64,7 +65,8 @@ const CommentItem: React.FC<CommentItemProps> = ({ item }) => {
       <CommentContainer>
         {/* 참고: 더보기 버튼 기능은 추후 요구사항에 따라 추가 예정 */}
         <SeeMoreButton>
-          <SeeMoreIcon />
+          {/* <SeeMoreIcon /> */}
+          <Image src={SeeMoreIcon} alt="더보기" />
         </SeeMoreButton>
 
         <CommentContent>{item.content}</CommentContent>

components/items/itemPage/ItemProfileSection.tsx

@@ -126,7 +126,8 @@ const ItemProfileSection: React.FC<ItemProfileSectionProps> = ({ product }) => {
         <MainDetails>
           {/* 참고: 더보기 버튼 기능은 추후 요구사항에 따라 추가 예정 */}
           <SeeMoreButton>
-            <SeeMoreIcon />
+            {/* <SeeMoreIcon /> */}
+            <Image src={SeeMoreIcon} alt="더보기" />
           </SeeMoreButton>
 
           <div>

components/layout/Header.tsx

@@ -1,8 +1,11 @@
-import Logo from "@/public/images/logo/logo.svg";
-import Link from "next/link";
-import { useRouter } from "next/router";
-import styled from "styled-components";
-import { StyledLink } from "@/styles/CommonStyles";
+import Logo from '@/public/images/logo/logo.svg';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import styled from 'styled-components';
+import { StyledLink } from '@/styles/CommonStyles';
+import Image from 'next/image';
+import { useEffect, useState } from 'react';
+import DefaultProfile from '@/public/images/ui/ic_profile.svg';
 
 const GlobalHeader = styled.header`
   display: flex;
@@ -15,8 +18,7 @@ const HeaderLeft = styled.div`
   align-items: center;
 `;
 
-// Next.js에서는 next/link의 Link 컴포넌트를 사용해 주세요.
-// 참고: Next.js 버전 13부터는 Link 자체가 anchor 태그의 역할을 해요. Link 요소 내에 <a> 태그가 중첩되어 있으면 hydration 오류가 발생하니 주의해 주세요.
+
 const HeaderLogo = styled(Link)`
   margin-right: 16px;
 
@@ -52,31 +54,38 @@ const NavItem = styled.li`
 const LoginLink = styled(StyledLink)``;
 
 function getLinkStyle(isActive: boolean) {
-  return { color: isActive ? "var(--blue)" : undefined };
+  return { color: isActive ? 'var(--blue)' : undefined };
 }
 
 const Header: React.FC = () => {
   const { pathname } = useRouter();
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+
+  useEffect(() => {
+    // 컴포넌트가 마운트될 때 sessionStorage에서 토큰을 확인
+    const token = sessionStorage.getItem('token');
+    setIsLoggedIn(!!token); // 토큰이 있으면 true, 없으면 false 설정
+  }, []);
 
   return (
     <GlobalHeader>
       <HeaderLeft>
-        <HeaderLogo href="/" aria-label="홈으로 이동">
-          <Logo alt="판다마켓 로고" width="153" />
+        <HeaderLogo href='/' aria-label='홈으로 이동'>
+          <Image src={Logo} alt='leftBtn' width={153} height={51} />
         </HeaderLogo>
 
         <nav>
           <NavList>
             <NavItem>
-              <Link href="/boards" style={getLinkStyle(pathname === "/boards")}>
+              <Link href='/boards' style={getLinkStyle(pathname === '/boards')}>
                 자유게시판
               </Link>
             </NavItem>
             <NavItem>
               <Link
-                href="/items"
+                href='/items'
                 style={getLinkStyle(
-                  pathname.includes("/items") || pathname === "/additem"
+                  pathname.includes('/items') || pathname === '/additem'
                 )}
               >
                 중고마켓
@@ -85,8 +94,12 @@ const Header: React.FC = () => {
           </NavList>
         </nav>
       </HeaderLeft>
-
-      <LoginLink href="/login">로그인</LoginLink>
+      {isLoggedIn ? (
+        // 로그인이 되어 있으면 판다 이미지 렌더링
+        <Image src={DefaultProfile} alt='판다마켓 기본 프로필' width={40} height={40} />
+      ) : (
+        <LoginLink href='/login'>로그인</LoginLink>
+      )}
     </GlobalHeader>
   );
 };

components/ui/DropdownMenu.tsx

@@ -1,6 +1,7 @@
 import { useState } from "react";
 import styled from "styled-components";
 import SortIcon from "@/public/images/icons/ic_sort.svg";
+import Image from "next/image";
 
 const SortButtonWrapper = styled.div`
   position: relative;
@@ -54,7 +55,8 @@ const DropdownMenu: React.FC<DropdownMenuProps> = ({
   return (
     <SortButtonWrapper>
       <SortDropdownTriggerButton onClick={toggleDropdown}>
-        <SortIcon alt="정렬" />
+        {/* <SortIcon alt="정렬" /> */}
+        <Image src={SortIcon} alt="정렬" />
       </SortDropdownTriggerButton>
 
       {isDropdownVisible && (

components/ui/Icon.tsx

@@ -1,4 +1,5 @@
-import styled from "styled-components";
+import Image from 'next/image';
+import styled from 'styled-components';
 
 // SVG 이미지 형식을 이용하는 큰 장점 중 하나는 비슷한 아이콘을 색상별로 저장할 필요 없이 하나의 파일로 유연하게 변경할 수 있다는 거예요.
 // SVG 파일 내에 정의된 크기 또는 선 및 배경색을 동적으로 변경할 수 있는 컴포넌트를 만들어 볼게요.
@@ -15,21 +16,21 @@ const IconWrapper = styled.div<IconWrapperProps>`
   justify-content: center;
 
   svg {
-    fill: ${({ $fillColor }) => $fillColor || "current"}; // 색 채움
-    width: ${({ $size }) => ($size ? `${$size}px` : "auto")};
-    height: ${({ $size }) => ($size ? `${$size}px` : "auto")};
+    fill: ${({ $fillColor }) => $fillColor || 'current'}; // 색 채움
+    width: ${({ $size }) => ($size ? `${$size}px` : 'auto')};
+    height: ${({ $size }) => ($size ? `${$size}px` : 'auto')};
   }
 
   /* 선(stroke)의 색상 변경은 svg 내의 path 요소에 넣어줘야 적용돼요 */
   /* - 채움색이 있을 때는 아웃라인 색상도 함께 바꿔주는 것이 일반적이기 때문에 선에 대한 속성이지만 fillColor를 outlineColor보다 우선적으로 적용하도록 했어요 */
   svg path {
     stroke: ${({ $fillColor, $outlineColor }) =>
-      $fillColor || $outlineColor || "currentColor"};
+      $fillColor || $outlineColor || 'currentColor'};
   }
 `;
 
 interface IconProps {
-  iconComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
+  iconComponent: string;
   size?: number;
   fillColor?: string;
   outlineColor?: string;
@@ -40,11 +41,12 @@ const Icon: React.FC<IconProps> = ({
   // - 통일성을 위해 prop 이름에는 camelCase를 사용했지만, SVG를 ReactComponent 형태로 전달하고 있기 때문에 PascalCase으로 바꿔 사용
   iconComponent: IconComponent,
   size, // Optional props이며, prop이 생략될 경우 SVG 파일의 기본 크기를 사용함
-  fillColor = "currentColor",
-  outlineColor = "currentColor",
+  fillColor = 'currentColor',
+  outlineColor = 'currentColor',
 }) => (
   <IconWrapper $size={size} $fillColor={fillColor} $outlineColor={outlineColor}>
-    <IconComponent />
+    {/* <IconComponent /> */}
+    <Image src={IconComponent} alt='더보기' />
   </IconWrapper>
 );
 

components/ui/LikeCountDisplay.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import styled from "styled-components";
 import HeartIcon from "@/public/images/icons/ic_heart.svg";
 import { FlexRowCentered } from "@/styles/CommonStyles";
+import Image from "next/image";
 
 const LikeCountWrapper = styled(FlexRowCentered)<{
   $fontSize: number;
@@ -37,7 +38,8 @@ const LikeCountDisplay: React.FC<LikeCountDisplayProps> = ({
 
   return (
     <LikeCountWrapper className={className} $fontSize={fontSize} $gap={gap}>
-      <HeartIcon width={iconWidth} alt="좋아요 아이콘" />
+      {/* <HeartIcon width={iconWidth} alt="좋아요 아이콘" /> */}
+      <Image src={HeartIcon} width={iconWidth} alt="좋아요 아이콘"  />
       {displayCount}
     </LikeCountWrapper>
   );

components/ui/PaginationBar.tsx

@@ -1,6 +1,7 @@
 import styled from "styled-components";
 import LeftArrow from "@/public/images/icons/arrow_left.svg";
 import RightArrow from "@/public/images/icons/arrow_right.svg";
+import Image from "next/image";
 
 const PaginationBarContainer = styled.div`
   display: flex;
@@ -59,7 +60,8 @@ const PaginationBar: React.FC<PaginationBarProps> = ({
         onClick={() => onPageChange(activePageNum - 1)}
         aria-label="이전 페이지로 이동 버튼"
       >
-        <LeftArrow />
+        {/* <LeftArrow /> */}
+        <Image src={LeftArrow} alt='이전 페이지로 이동 버튼 이미지' />
       </PaginationButton>
       {pages.map((page) => (
         <PaginationButton
@@ -75,7 +77,8 @@ const PaginationBar: React.FC<PaginationBarProps> = ({
         onClick={() => onPageChange(activePageNum + 1)}
         aria-label="다음 페이지로 이동 버튼"
       >
-        <RightArrow />
+        {/* <RightArrow /> */}
+        <Image src={RightArrow} alt="다음페이지로 이동버튼 이미지" />
       </PaginationButton>
     </PaginationBarContainer>
   );

components/ui/SearchBar.tsx

@@ -3,6 +3,7 @@ import { FlexRowCentered } from "@/styles/CommonStyles";
 import SearchIcon from "@/public/images/icons/ic_search.svg";
 import { useEffect, useState } from "react";
 import { useRouter } from "next/router";
+import Image from "next/image";
 
 const Container = styled(FlexRowCentered)`
   background-color: var(--gray-100);
@@ -57,7 +58,8 @@ const SearchBar: React.FC<SearchBarProps> = ({
 
   return (
     <Container>
-      <SearchIcon alt="검색" />
+      {/* <SearchIcon alt="검색" /> */}
+      <Image src={SearchIcon} alt="검색" />
       <SearchBarInput
         value={keyword}
         onChange={handleInputChange}