[김승석] Sprint8

src/components/DetailBtm.jsx → src/components/DetailBtm.tsx

@@ -5,23 +5,28 @@ import useApi from "./../hooks/useApi";
 import ProfileBox from "./ProfileBox";
 import CommentEmpty from "./../assets/comment_empty.png";
 import useOutSideClick from "../hooks/useOutSideClick";
+import Comment from "../types/Comment";
 
-const DetailBtm = ({ id }) => {
-  const [commentMenu, setCommentMenu] = useState(null);
+interface Props {
+  id?: string;
+}
+
+const DetailBtm = ({ id }: Props) => {
+  const [commentMenu, setCommentMenu] = useState<Props | null>(null);
   const [textValue, setTextValue] = useState("");
 
-  const handleTextChange = (e) => {
+  const handleTextChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     setTextValue(e.target.value);
   };
 
-  const handleCommentMenu = (id) => {
+  const handleCommentMenu = (id: Props) => {
     setCommentMenu((prev) => (prev === id ? null : id));
   };
 
   const menuRef = useRef(null);
   useOutSideClick(menuRef, () => setCommentMenu(null));
 
-  const { data, loading, error } = useApi(`${id}/comments?limit=10`);
+  const { data, loading, error } = useApi<Comment>(`${id}/comments?limit=10`);
 
   if (loading) {
     return <div>Loading...</div>;
@@ -49,19 +54,20 @@ const DetailBtm = ({ id }) => {
         </button>
       </div>
       <ul className="comment_list">
-        {data.list.length <= 0 ? (
+        {data?.list?.length === 0 ? (
           <div className="comment_empty">
             <div className="thum">
               <img src={CommentEmpty} alt="아직 문의가 없어요 이미지" />
             </div>
             <p>아직 문의가 없어요</p>
           </div>
         ) : (
-          data.list.map((el) => {
+          data?.list.map((el) => {
             return (
               <li key={el.id}>
                 <div className="comment_menu">
-                  <button type="button" className="btn_reset" data-menu="button" onClick={() => handleCommentMenu(el.id)}>
+                  <button type="button" className="btn_reset" data-menu="button" onClick={() => handleCommentMenu(el.id as any)}>
+                    {/* 질문하기 <button type="button" className="btn_reset" data-menu="button" onClick={() => handleCommentMenu({ id: String(el.id) })}> */}
                     <img src={menuIcon} alt="댓글 옵션 열고닫기" />
                   </button>
                   {commentMenu === el.id && (

src/components/DetailTop.jsx → src/components/DetailTop.tsx

@@ -3,9 +3,18 @@ import productImg from "./../assets/item.png";
 import wishIcon from "./../assets/icon_wish.svg";
 import useApi from "./../hooks/useApi";
 import ProfileBox from "./ProfileBox";
+import Product from "../types/Product";
 
-const DetailTop = ({ id }) => {
-  const { data, loading, error } = useApi(`${id}`);
+interface ProductDetail extends Product {
+  isFavorite: boolean;
+}
+
+interface Props {
+  id?: string;
+}
+
+const DetailTop = ({ id }: Props) => {
+  const { data, loading, error } = useApi<ProductDetail>(`${id}`);
 
   if (loading) {
     return <div>Loading...</div>;
@@ -22,7 +31,7 @@ const DetailTop = ({ id }) => {
   return (
     <div className="product_detail_item">
       <div className="thum">
-        <img src={data.images && data.images[0] ? data.images[0] : productImg} alt={data.name} onError={(e) => (e.target.src = productImg)} />
+        <img src={data.images && data.images[0] ? data.images[0] : productImg} alt={data.name} onError={(e) => ((e.target as HTMLImageElement).src = productImg)} />
       </div>
       <div className="content">
         <div className="tit">{data.name}</div>
@@ -44,7 +53,7 @@ const DetailTop = ({ id }) => {
 
           <button className="btn_reset wish_area">
             <div className="icon">
-              <img src={wishIcon} alt="" />
+              <img src={wishIcon} alt="좋아요 버튼" />
             </div>
             <div className="numb">{data.favoriteCount}</div>
           </button>

src/components/ProfileBox.jsx → src/components/ProfileBox.tsx

@@ -2,13 +2,19 @@ import profileIcon from "./../assets/icon_profile.png";
 import useDate from "../utils/formatDate";
 import "./ProfileBox.css";
 
-const ProfileBox = ({ img, name, date }) => {
+interface Props {
+  img?: string;
+  name: string;
+  date: Date;
+}
+
+const ProfileBox = ({ img, name, date }: Props) => {
   const formattedDate = useDate(date);
 
   return (
     <div className="name_area">
       <div className="profile">
-        <img src={img ? img : profileIcon} alt={name} onError={(e) => (e.target.src = profileIcon)} />
+        <img src={img ? img : profileIcon} alt={name} onError={(e) => ((e.target as HTMLImageElement).src = profileIcon)} />
       </div>
       <div className="name">
         <p>{name}</p>

src/hooks/useApi.jsx → src/hooks/useApi.tsx

@@ -1,23 +1,22 @@
 import React, { useEffect, useState } from "react";
-import axios from "axios";
+import axios, { AxiosError } from "axios";
 
-// axios 인스턴스 생성
 const api = axios.create({
   baseURL: "https://panda-market-api.vercel.app/products/",
 });
 
-const useApi = (url) => {
-  const [data, setData] = useState(null);
+const useApi = <T,>(url: string) => {
+  const [data, setData] = useState<T | null>(null);
 
   const [loading, setLoading] = useState(true);
-  const [error, setError] = useState(null);
+  const [error, setError] = useState<AxiosError | null>(null);
   useEffect(() => {
     const fetchProduct = async () => {
       try {
-        const response = await api.get(url);
+        const response = await api.get<T>(url);
         setData(response.data);
       } catch (error) {
-        setError(error);
+        setError(error as AxiosError);
       } finally {
         setLoading(false);
       }

src/page/ProductDetailPage.tsx

@@ -8,6 +8,10 @@ import DetailBtm from "../components/DetailBtm";
 const ProductDetailPage = () => {
   const { id } = useParams();
 
+  if (!id) {
+    return <div className="error-message">잘못된 접근입니다.</div>;
+  }
+
   return (
     <main className="main">
       <div className="inner">

src/types/Comment.ts

@@ -0,0 +1,14 @@
+export default interface Comment {
+  nextCursor: number;
+  list: {
+    writer: {
+      image: string;
+      nickname: string;
+      id: number;
+    };
+    updatedAt: Date;
+    createdAt: Date;
+    content: string;
+    id: number;
+  }[];
+}

src/types/Product.ts

@@ -1,5 +1,5 @@
 export default interface Product {
-  createdAt: string;
+  createdAt: Date;
   favoriteCount: number;
   ownerNickname: string;
   ownerId: number;

src/utils/formatDate.js → src/utils/formatDate.ts

@@ -1,4 +1,4 @@
-const useDate = (dateSet) => {
+const useDate = (dateSet: Date) => {
   const dateString = dateSet;
   const date = new Date(dateString);
   const year = date.getFullYear();