diff --git a/src/App.jsx b/src/App.jsx
index 5b686173..3480b905 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -3,6 +3,7 @@ import Items from "./pages/Items";
 import "./App.css";
 import Header from "./components/Header";
 import AddItem from "./pages/AddItem";
+import ItemDetail from "./pages/ItemDetail";
 
 /**
  *
@@ -18,6 +19,7 @@ function App() {
         <Route path="/board" element={<h1>자유게시판</h1>} />
         <Route path="/items" element={<Items />} />
         <Route path="/additem" element={<AddItem />} />
+        <Route path="items/:productId" element={<ItemDetail />} />
       </Routes>
     </BrowserRouter>
   );
diff --git a/src/api/productApi.js b/src/api/productApi.js
index 173da04d..a7741d1f 100644
--- a/src/api/productApi.js
+++ b/src/api/productApi.js
@@ -1,6 +1,31 @@
+// 전체를 가져오며, params를 사용하여 특정 조건에 맞는 제품을 가져올 수 있ㄷ ㅏ.
 export const getProducts = async (params = {}) => {
   const query = new URLSearchParams(params).toString();
   const response = await fetch(`https://panda-market-api.vercel.app/products?${query}`);
   const data = await response.json();
   return data;
 };
+
+// 특정 상품에 대한 정보를 가져올 수 있다.
+export const getProductById = async (productId) => {
+  const response = await fetch(`https://panda-market-api.vercel.app/products/${productId}`);
+
+  if (!response.ok) {
+    throw new Error("Failed to fetch product");
+  }
+
+  const data = await response.json();
+  return data;
+};
+
+// 댓글 리스트 가져오는 함수 :: 필수값: id/limit
+export const getComments = async (productId, limit) => {
+  const response = await fetch(`https://panda-market-api.vercel.app/products/${productId}/comments?limit=${limit}`);
+
+  if (!response.ok) {
+    throw new Error("Failed to fetch comments");
+  }
+
+  const data = await response.json();
+  return data;
+};
diff --git a/src/assets/Img_inquiry_empty.png b/src/assets/Img_inquiry_empty.png
new file mode 100644
index 00000000..76fe524d
Binary files /dev/null and b/src/assets/Img_inquiry_empty.png differ
diff --git a/src/assets/ic_back.png b/src/assets/ic_back.png
new file mode 100644
index 00000000..706c218a
Binary files /dev/null and b/src/assets/ic_back.png differ
diff --git a/src/assets/ic_kebab.png b/src/assets/ic_kebab.png
new file mode 100644
index 00000000..d4676503
Binary files /dev/null and b/src/assets/ic_kebab.png differ
diff --git a/src/assets/like.png b/src/assets/like.png
new file mode 100644
index 00000000..c5df7e17
Binary files /dev/null and b/src/assets/like.png differ
diff --git a/src/components/BestProducts.css b/src/components/BestProducts.css
index 5d410462..e37d5407 100644
--- a/src/components/BestProducts.css
+++ b/src/components/BestProducts.css
@@ -14,57 +14,6 @@
   grid-template-columns: repeat(4, 1fr);
 }
 
-.best-products__card {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 100%;
-  max-width: none;
-  gap: 16px;
-}
-
-.best-products__image-wrapper {
-  width: 100%;
-  height: 282px;
-  border-radius: 16px;
-  overflow: hidden;
-}
-
-.best-products__image {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  border-radius: 16px;
-}
-
-.best-products__text-group {
-  display: flex;
-  /* margin-top: 8px; */
-  flex-direction: column;
-  align-items: flex-start;
-  width: 100%;
-  text-align: left;
-  gap: 10px;
-}
-
-.best-products__title-text {
-  font-size: 14px;
-  font-weight: 500;
-  color: #1f2937;
-}
-
-.best-products__price {
-  font-size: 16px;
-  font-weight: 700;
-  color: #1f2937;
-}
-
-.best-products__favorite {
-  font-size: 12px;
-  font-weight: 500;
-  color: #4b5563;
-}
-
 /* 태블릿 사이즈*/
 @media (max-width: 1199px) {
   .best-products__grid {
@@ -73,14 +22,6 @@
     justify-content: space-between;
     gap: 16px;
   }
-
-  .best-products__card {
-    width: 343px;
-  }
-  .best-products__image-wrapper {
-    width: 343px;
-    height: 343px;
-  }
 }
 
 /* 모바일 사이즈 */
@@ -91,11 +32,4 @@
     justify-content: center;
     gap: 16px;
   }
-
-  .best-products__card {
-    width: 343px;
-  }
-  .best-products__image-wrapper {
-    width: 343px;
-  }
 }
diff --git a/src/components/BestProducts.jsx b/src/components/BestProducts.jsx
index 27a29ab9..9f1ae716 100644
--- a/src/components/BestProducts.jsx
+++ b/src/components/BestProducts.jsx
@@ -1,6 +1,7 @@
 import { getProducts } from "../api/productApi";
 import { useState, useEffect, useCallback } from "react";
 import "./BestProducts.css";
+import ProductCard from "./ProductCard";
 
 /**
  *
@@ -40,16 +41,7 @@ const BestProduct = () => {
       <h3 className="best-products__title">베스트 상품</h3>
       <div className="best-products__grid">
         {bestProducts.slice(0, visibleCount).map((item) => (
-          <div key={item.id} className="best-products__card">
-            <div className="best-products__image-wrapper">
-              <img src={item.images.length > 0 ? item.images[0] : ""} alt={item.name} className="best-products__image" />
-            </div>
-            <div className="best-products__text-group">
-              <p className="best-products__title-text">{item.name}</p>
-              <p className="best-products__price">{item.price.toLocaleString()}원</p>
-              <p className="best-products__favorite">❤️ {item.favoriteCount}</p>
-            </div>
-          </div>
+          <ProductCard key={item.id} item={item} variant="best" />
         ))}
       </div>
     </section>
diff --git a/src/components/CommentList.css b/src/components/CommentList.css
new file mode 100644
index 00000000..5290f38b
--- /dev/null
+++ b/src/components/CommentList.css
@@ -0,0 +1,200 @@
+.comment-list {
+  margin-top: 32px;
+  max-width: 1200px;
+  margin-left: auto;
+  margin-right: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.comment-list__item {
+  border-bottom: 1px solid #e5e7eb;
+  padding-bottom: 16px;
+  position: relative;
+}
+
+.comment-list__content {
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 24px;
+  color: #1f2937;
+  margin-bottom: 12px;
+}
+
+.comment-list__info {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.comment-list__user {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.comment-list__user-image {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+}
+
+.comment-list__nickname {
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 18px;
+  color: #4b5563;
+}
+
+.comment-list__created-at {
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 18px;
+  color: #9ca3af;
+}
+
+.comment-list__actions {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+.comment-list__kebab {
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+}
+
+.comment-list__dropdown-toggle {
+  position: relative;
+  display: inline-block;
+}
+
+.comment-list__dropdown {
+  width: 139px;
+  height: 46px;
+  justify-content: center;
+  flex-direction: column;
+  position: absolute;
+  top: 24px;
+  right: 0;
+  background-color: white;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  z-index: 10;
+  display: flex;
+}
+
+.comment-list__dropdown button {
+  background: none;
+  border: none;
+  padding: 10px 16px;
+  text-align: left;
+  font-size: 14px;
+  color: #374151;
+  cursor: pointer;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* 수정하기 */
+.comment-list__edit-box {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-bottom: -35px;
+}
+
+.comment-list__edit-textarea {
+  width: 100%;
+  height: 80px;
+  resize: none;
+  border: none;
+  border-radius: 12px;
+  padding: 16px 24px;
+  font-size: 14px;
+  font-weight: 400;
+  background-color: #f3f4f6;
+  color: #1f2937;
+  outline: none;
+}
+
+.comment-list__edit-buttons {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.comment-list__edit-buttons button {
+  padding: 6px 16px;
+  border: none;
+  cursor: pointer;
+}
+
+.comment-list__edit-buttons button:first-child {
+  background-color: transparent;
+  color: #737373;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 26px;
+}
+
+.comment-list__edit-buttons button:last-child {
+  background-color: #3692ff;
+  padding: 12px 23px;
+  border-radius: 16px;
+  height: 42px;
+  color: #f3f4f6;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 26px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* 댓글, 문의가 없는 경우 */
+.comment-list__empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 40px;
+  gap: 8px;
+}
+
+.comment-list__empty img {
+  width: 196px;
+  height: 196px;
+}
+
+.comment-list__empty p {
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 26px;
+  color: #9ca3af;
+}
+
+.comment-list__return-button {
+  background-color: #4f91ff;
+  color: white;
+  border: none;
+  border-radius: 999px;
+  padding: 12px 24px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+/* tablet */
+@media (max-width: 1199px) {
+  .comment-list {
+    margin: 24px;
+  }
+}
+
+/* mobile */
+@media (max-width: 767px) {
+}
diff --git a/src/components/CommentList.jsx b/src/components/CommentList.jsx
new file mode 100644
index 00000000..0801c701
--- /dev/null
+++ b/src/components/CommentList.jsx
@@ -0,0 +1,104 @@
+import { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+import { getComments } from "../api/productApi";
+import { formatTime } from "../utils/formatTime";
+import ic_kebab from "../assets/ic_kebab.png";
+import userImage from "../assets/userImage.png";
+import "./CommentList.css";
+import Img_inquiry_empty from "../assets/Img_inquiry_empty.png";
+
+const CommentList = () => {
+  const { productId } = useParams();
+  const [comments, setComments] = useState([]);
+  const [editCommentId, setEditCommentId] = useState(null);
+  const [openDropdownId, setOpenDropdownId] = useState(null);
+
+  useEffect(() => {
+    const fetchComments = async () => {
+      try {
+        const data = await getComments(productId, 3);
+        setComments(data.list);
+      } catch (err) {
+        console.error("댓글을 불러오지 못했습니다.", err);
+      }
+    };
+
+    fetchComments();
+  }, [productId]);
+
+  // 드롭다운 토글 함수
+  const toggleDropdown = (commentId) => {
+    setOpenDropdownId(openDropdownId === commentId ? null : commentId);
+  };
+
+  // 외부 클릭 시 드롭다운 닫기
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (openDropdownId && !event.target.closest(".comment-list__dropdown-toggle")) {
+        setOpenDropdownId(null);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [openDropdownId]);
+
+  return (
+    <div className="comment-list">
+      {comments.length === 0 ? (
+        <div className="comment-list__empty">
+          <img src={Img_inquiry_empty} alt="empty" />
+          <p>아직 문의가 없어요</p>
+        </div>
+      ) : (
+        comments.map((comment) => (
+          <div key={comment.id} className="comment-list__item">
+            {editCommentId === comment.id ? (
+              <div className="comment-list__edit-box">
+                <textarea className="comment-list__edit-textarea" defaultValue={comment.content} />
+                <div className="comment-list__edit-buttons">
+                  <button onClick={() => setEditCommentId(null)}>취소</button>
+                  <button>수정 완료</button>
+                </div>
+              </div>
+            ) : (
+              <p className="comment-list__content">{comment.content}</p>
+            )}
+            <div className="comment-list__info">
+              <div className="comment-list__user">
+                <img src={userImage} alt="userProfile" className="comment-list__user-image" />
+                <div>
+                  <p className="comment-list__nickname">{comment.writer.nickname}</p>
+                  <p className="comment-list__created-at">{formatTime(new Date(comment.createdAt))}</p>
+                </div>
+              </div>
+              <div className="comment-list__actions">
+                {editCommentId !== comment.id && (
+                  <div className="comment-list__dropdown-toggle">
+                    <img src={ic_kebab} alt="kebab" className="comment-list__kebab" onClick={() => toggleDropdown(comment.id)} />
+                    {openDropdownId === comment.id && (
+                      <div className="comment-list__dropdown">
+                        <button
+                          onClick={() => {
+                            setEditCommentId(comment.id);
+                            setOpenDropdownId(null);
+                          }}
+                        >
+                          수정하기
+                        </button>
+                      </div>
+                    )}
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+        ))
+      )}
+    </div>
+  );
+};
+
+export default CommentList;
diff --git a/src/components/InquiryInput.css b/src/components/InquiryInput.css
new file mode 100644
index 00000000..abe71d55
--- /dev/null
+++ b/src/components/InquiryInput.css
@@ -0,0 +1,76 @@
+.inquiry-input {
+  margin-top: 40px;
+  max-width: 1200px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.inquiry-input__title {
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 26px;
+  margin-bottom: 12px;
+  color: #111827;
+}
+
+.inquiry-input__notice {
+  width: 100%;
+  height: 104px;
+  background-color: #f3f4f6;
+  color: #9ca3af;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 26px;
+  padding: 16px 24px;
+  border-radius: 12px;
+  border: none;
+  resize: none;
+  outline: none;
+}
+
+.inquiry-input__notice::placeholder {
+  color: #9ca3af;
+}
+
+.inquiry-input__form {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 12px;
+}
+
+.inquiry-input__submit {
+  background-color: #9ca3af;
+  height: 42px;
+  color: #f3f4f6;
+  border: none;
+  border-radius: 8px;
+  padding: 12px 23px;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 26px;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.inquiry-input__submit--active {
+  background-color: #3692ff;
+}
+
+/* tablet */
+@media (max-width: 1199px) {
+  .inquiry-input {
+    margin: 24px;
+  }
+}
+
+/* mobile */
+@media (max-width: 767px) {
+  .inquiry-input__notice {
+    width: 343px;
+    height: 129px;
+    font-size: 14px;
+    line-height: 24px;
+  }
+}
diff --git a/src/components/InquiryInput.jsx b/src/components/InquiryInput.jsx
new file mode 100644
index 00000000..2a6d409a
--- /dev/null
+++ b/src/components/InquiryInput.jsx
@@ -0,0 +1,23 @@
+import { useState } from "react";
+import "./InquiryInput.css";
+
+const InquiryInput = () => {
+  const [text, setText] = useState("");
+
+  return (
+    <div className="inquiry-input">
+      <h4 className="inquiry-input__title">문의하기</h4>
+      <textarea
+        className="inquiry-input__notice"
+        placeholder="개인정보를 공유 및 요청하거나, 명예 훼손, 무단 광고, 불법 정보 유포시 모니터링 후 삭제될 수 있으며, 이에 대한 민형사상 책임은 게시자에게 있습니다."
+        value={text}
+        onChange={(e) => setText(e.target.value)}
+      />
+      <div className="inquiry-input__form">
+        <button className={`inquiry-input__submit ${text.trim() ? "inquiry-input__submit--active" : ""}`}>등록</button>
+      </div>
+    </div>
+  );
+};
+
+export default InquiryInput;
diff --git a/src/components/ProductCard.css b/src/components/ProductCard.css
index 8cd8b938..19acea66 100644
--- a/src/components/ProductCard.css
+++ b/src/components/ProductCard.css
@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: column;
   gap: 16px;
-  width: 218px;
+  cursor: pointer;
 }
 
 .product-card__image-wrapper {
@@ -12,6 +12,22 @@
   overflow: hidden;
 }
 
+.product-card--best {
+  width: 282px;
+}
+
+.product-card--best .product-card__image-wrapper {
+  height: 282px;
+}
+
+.product-card--list {
+  width: 221px;
+}
+
+.product-card--list .product-card__image-wrapper {
+  height: 221px;
+}
+
 .product-card__text-group {
   display: flex;
   gap: 10px;
@@ -40,14 +56,21 @@
 }
 
 @media (max-width: 1199px) {
+  .product-card--best {
+    width: 343px;
+  }
+
+  .product-card--best .product-card__image-wrapper {
+    height: 343px;
+  }
 }
 
 @media (max-width: 767px) {
-  .product-card {
+  .product-card--list {
     width: 168px;
   }
 
-  .product-card__image-wrapper {
-    width: 100%;
+  .product-card--list .product-card__image-wrapper {
+    height: 168px;
   }
 }
diff --git a/src/components/ProductCard.jsx b/src/components/ProductCard.jsx
index 85e1960c..43fe1004 100644
--- a/src/components/ProductCard.jsx
+++ b/src/components/ProductCard.jsx
@@ -1,14 +1,17 @@
 import "./ProductCard.css";
 import noImage from "../assets/noImage.jpg";
+import { useNavigate } from "react-router-dom";
 
 /**
  *  단일 상품 정보를 카드 형태로 표시하는 컴포넌트 입니다.
  *  상품 이미지, 상품명, 가격, 좋아요 수를 표시합니다.
  * 이미지가 없거나 에러가 발생하는 경우, 대체 이미지를 처리할 수 있도록 onError를 사용하였습니다.
  */
-const ProductCard = ({ item }) => {
+const ProductCard = ({ item, variant }) => {
+  const nav = useNavigate();
+  const isBest = variant === "best";
   return (
-    <div className="product-card">
+    <div className={`product-card ${isBest ? "product-card--best" : "product-card--list"}`} onClick={() => nav(`/items/${item.id}`)}>
       <div className="product-card__image-wrapper">
         <img
           src={item.images.length > 0 ? item.images[0] : noImage}
diff --git a/src/components/ProductInfo.css b/src/components/ProductInfo.css
new file mode 100644
index 00000000..76ff0ba1
--- /dev/null
+++ b/src/components/ProductInfo.css
@@ -0,0 +1,248 @@
+.product-info {
+  display: flex;
+  gap: 40px;
+  margin: 40px auto;
+  max-width: 1200px;
+  align-items: flex-start;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.product-info__image img {
+  width: 486px;
+  height: 486px;
+  border-radius: 12px;
+  object-fit: cover;
+  margin-bottom: 20px;
+}
+
+.product-info__details {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.product-info__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.product-info__ic_kebab {
+  width: 24px;
+  height: 24px;
+  /* cursor: pointer; */
+}
+
+.product-info__name {
+  font-size: 24px;
+  font-weight: 600;
+  line-height: 32px;
+  color: #1f2937;
+}
+
+.product-info__price {
+  font-size: 40px;
+  font-weight: 600;
+  color: #1f2937;
+}
+
+.product-info__line {
+  margin: 3px 0;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.product-info__description > .product-info__intro {
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 26px;
+  color: #4b5563;
+  margin-bottom: 10px;
+}
+
+.product-info__description > .product-info__content {
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 26px;
+  color: #4b5563;
+}
+
+.product-info__tags > h4 {
+  font-size: 16px;
+  margin: 10px 0;
+  font-weight: 600;
+  line-height: 26px;
+  color: #4b5563;
+}
+
+.product-info__tags ul {
+  list-style: none;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.product-info__tags li {
+  background-color: #f3f4f6;
+  border-radius: 26px;
+  padding: 6px 12px;
+  font-size: 16px;
+  font-weight: 400;
+  color: #1f2937;
+}
+
+.product-info__meta {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 45px;
+}
+
+.product-info__user {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.product-info__user-image {
+  width: 40px;
+  height: 40px;
+}
+
+.product-info__user-text {
+  display: flex;
+  flex-direction: column;
+  color: #6b7280;
+  font-size: 14px;
+  gap: 8px;
+}
+
+.product-info__nickname {
+  font-weight: 500;
+  color: #374151;
+}
+
+.product-info__date {
+  font-size: 14px;
+  color: #9ca3af;
+}
+
+.product-info__like-box {
+  display: flex;
+  align-items: center;
+  height: 40px;
+  gap: 10px;
+  border: 1px solid #e5e7eb;
+  padding: 4px 12px;
+  border-radius: 35px;
+}
+
+.product-info__like-icon {
+  width: 26.8px;
+  height: 23.3px;
+}
+
+.product-info__like-count {
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 26px;
+  color: #6b7280;
+}
+
+/* tablet */
+@media (max-width: 1199px) {
+  .product-info {
+    margin: 24px;
+  }
+
+  .product-info__image img {
+    width: 340px;
+    height: 340px;
+    border-radius: 16px;
+    object-fit: cover;
+    margin-bottom: 20px;
+  }
+
+  .product-info__name {
+    font-size: 20px;
+    font-weight: 600;
+    line-height: 32px;
+    color: #1f2937;
+  }
+
+  .product-info__price {
+    font-size: 32px;
+    font-weight: 600;
+    color: #1f2937;
+  }
+
+  .product-info__description > .product-info__intro {
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 26px;
+    color: #4b5563;
+    margin-bottom: 10px;
+  }
+
+  .product-info__tags > h4 {
+    font-size: 14px;
+    margin: 10px 0;
+    font-weight: 600;
+    line-height: 24px;
+    color: #4b5563;
+  }
+
+  .product-info__meta {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin: 25px 0;
+  }
+
+  .product-info__like-box {
+    display: flex;
+    align-items: center;
+    height: 32px;
+    gap: 10px;
+    border: 1px solid #e5e7eb;
+    padding: 4px 12px;
+    border-radius: 35px;
+  }
+
+  .product-info__like-icon {
+    width: 20.1px;
+    height: 17.48px;
+  }
+}
+
+/* mobile */
+@media (max-width: 767px) {
+  .product-info {
+    flex-direction: column;
+    margin: 15px;
+  }
+
+  .product-info__image img {
+    width: 343px;
+    height: 343px;
+    border-radius: 12px;
+    object-fit: cover;
+    margin-bottom: -20px;
+  }
+
+  .product-info__header {
+    justify-content: space-between;
+    gap: 12px;
+  }
+
+  .product-info__price {
+    font-size: 24px;
+    font-weight: 600;
+    line-height: 32px;
+  }
+
+  .product-info__description > .product-info__intro {
+    line-height: 24px;
+  }
+}
diff --git a/src/components/ProductInfo.jsx b/src/components/ProductInfo.jsx
new file mode 100644
index 00000000..326b83ed
--- /dev/null
+++ b/src/components/ProductInfo.jsx
@@ -0,0 +1,76 @@
+import { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+import { getProductById } from "../api/productApi";
+import "./ProductInfo.css";
+import userImage from "../assets/userImage.png";
+import like from "../assets/like.png";
+import ic_kebab from "../assets/ic_kebab.png";
+
+const ProductInfo = () => {
+  const { productId } = useParams();
+  const [product, setProduct] = useState(null);
+
+  useEffect(() => {
+    const fetchProduct = async () => {
+      try {
+        const data = await getProductById(productId);
+        setProduct(data);
+      } catch (error) {
+        console.error("상품 정보를 불러오는 데 실패했습니다.", error);
+      }
+    };
+
+    fetchProduct();
+  }, [productId]);
+
+  if (!product) return <div>로딩 중...</div>;
+
+  return (
+    <div className="product-info">
+      <div className="product-info__image">
+        <img src={product.images[0]} alt={product.name} />
+      </div>
+
+      <div className="product-info__details">
+        <div className="product-info__header">
+          <p className="product-info__name">{product.name}</p>
+          <img src={ic_kebab} alt="ic_kebab" className="product-info__ic_kebab" />
+        </div>
+        <p className="product-info__price">{product.price.toLocaleString()}원</p>
+
+        <div className="product-info__line" />
+
+        <div className="product-info__description">
+          <p className="product-info__intro">상품 소개</p>
+          <p className="product-info__content">{product.description}</p>
+        </div>
+
+        <div className="product-info__tags">
+          <h4>상품 태그</h4>
+          <ul>
+            {product.tags.map((tag, index) => (
+              <li key={index}>#{tag}</li>
+            ))}
+          </ul>
+        </div>
+
+        <div className="product-info__meta">
+          <div className="product-info__user">
+            <img src={userImage} alt="user" className="product-info__user-image" />
+            <div className="product-info__user-text">
+              <span className="product-info__nickname">{product.ownerNickname}</span>
+              <span className="product-info__date">{new Date(product.createdAt).toLocaleDateString()}</span>
+            </div>
+          </div>
+
+          <div className="product-info__like-box">
+            <img src={like} alt="like" className="product-info__like-icon" />
+            <span className="product-info__like-count">{product.favoriteCount}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ProductInfo;
diff --git a/src/components/ProductList.jsx b/src/components/ProductList.jsx
index c2acdec6..5d0bccb7 100644
--- a/src/components/ProductList.jsx
+++ b/src/components/ProductList.jsx
@@ -107,7 +107,7 @@ const ProductList = () => {
 
       <div className="product-list__grid">
         {paginatedProducts.map((item) => (
-          <ProductCard key={item.id} item={item} />
+          <ProductCard key={item.id} item={item} variant="list" />
         ))}
       </div>
 
diff --git a/src/pages/ItemDetail.css b/src/pages/ItemDetail.css
new file mode 100644
index 00000000..fc7f0e5a
--- /dev/null
+++ b/src/pages/ItemDetail.css
@@ -0,0 +1,37 @@
+.item-detail__container {
+  padding-bottom: 40px;
+}
+
+.item-detail__back-button {
+  margin: 40px auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  background-color: #3692ff;
+  color: #f3f4f6;
+  border: none;
+  border-radius: 40px;
+  padding: 12px 64px;
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 26px;
+  cursor: pointer;
+}
+
+.item-detail__back-button:hover {
+  background-color: #397be7;
+}
+
+.item-detail__back-icon {
+  width: 24px;
+  height: 24px;
+}
+
+/* tablet */
+@media (max-width: 1199px) {
+}
+
+/* mobile */
+@media (max-width: 767px) {
+}
diff --git a/src/pages/ItemDetail.jsx b/src/pages/ItemDetail.jsx
new file mode 100644
index 00000000..494ad935
--- /dev/null
+++ b/src/pages/ItemDetail.jsx
@@ -0,0 +1,32 @@
+import { useNavigate } from "react-router-dom";
+import CommentList from "../components/CommentList";
+import InquiryInput from "../components/InquiryInput";
+import ProductInfo from "../components/ProductInfo";
+import ic_back from "../assets/ic_back.png";
+import "./ItemDetail.css";
+
+const ItemDetail = () => {
+  const navigate = useNavigate();
+
+  const handleGoBack = () => {
+    if (window.history.length > 1) {
+      navigate(-1);
+    } else {
+      navigate("/items");
+    }
+  };
+
+  return (
+    <div className="item-detail__container">
+      <ProductInfo />
+      <InquiryInput />
+      <CommentList />
+      <button className="item-detail__back-button">
+        <span>목록으로 돌아가기</span>
+        <img src={ic_back} alt="뒤로가기" className="item-detail__back-icon" onClick={handleGoBack} />
+      </button>
+    </div>
+  );
+};
+
+export default ItemDetail;
diff --git a/src/utils/formatTime.js b/src/utils/formatTime.js
new file mode 100644
index 00000000..5f625cd8
--- /dev/null
+++ b/src/utils/formatTime.js
@@ -0,0 +1,19 @@
+// 문의 댓글에 대한 시간을 계산해주는 함수
+
+export const formatTime = (createdAt) => {
+  const milliSeconds = new Date() - createdAt;
+  const seconds = milliSeconds / 1000;
+  if (seconds < 60) return `방금 전`;
+  const minutes = seconds / 60;
+  if (minutes < 60) return `${Math.floor(minutes)}분 전`;
+  const hours = minutes / 60;
+  if (hours < 24) return `${Math.floor(hours)}시간 전`;
+  const days = hours / 24;
+  if (days < 7) return `${Math.floor(days)}일 전`;
+  const weeks = days / 7;
+  if (weeks < 5) return `${Math.floor(weeks)}주 전`;
+  const months = days / 30;
+  if (months < 12) return `${Math.floor(months)}개월 전`;
+  const years = days / 365;
+  return `${Math.floor(years)}년 전`;
+};