[황혜진] sprint7

src/App.js

@@ -3,26 +3,32 @@ import HomePage from "./pages/HomePage/HomePage";
 import LoginPage from "./pages/LoginPage/LoginPage";
 import MarketPage from "./pages/MarketPage/MarketPage";
 import AddItemPage from "./pages/AddItemPage/AddItemPage";
+import ItemDetailPage from "./pages/ItemsDetailPage/ItemsDetailPage";
 import CommunityFeedPage from "./pages/CommunityFeedPage/CommunityFeedPage";
+import { ThemeProvider } from "styled-components";
 import Header from "./components/Layout/Header";
+import theme from "./styles/theme";
 
 function App() {
   return (
-    <BrowserRouter>
-      {/* Global Navigation Bar */}
-      <Header />
+    <ThemeProvider theme={theme}>
+      <BrowserRouter>
+        {/* Global Navigation Bar */}
+        <Header />
 
-      <div className="withHeader">
-        <Routes>
-          {/* React Router v6부터는 path="/" 대신 간단하게 `index`라고 표기하면 돼요 */}
-          <Route index element={<HomePage />} />
-          <Route path="login" element={<LoginPage />} />
-          <Route path="items" element={<MarketPage />} />
-          <Route path="additem" element={<AddItemPage />} />
-          <Route path="community" element={<CommunityFeedPage />} />
-        </Routes>
-      </div>
-    </BrowserRouter>
+        <div className="withHeader">
+          <Routes>
+            {/* React Router v6부터는 path="/" 대신 간단하게 `index`라고 표기하면 돼요 */}
+            <Route index element={<HomePage />} />
+            <Route path="login" element={<LoginPage />} />
+            <Route path="items" element={<MarketPage />} />
+            <Route path="additem" element={<AddItemPage />} />
+            <Route path="community" element={<CommunityFeedPage />} />
+            <Route path="/products/:productId" element={<ItemDetailPage />} />
+          </Routes>
+        </div>
+      </BrowserRouter>
+    </ThemeProvider>
   );
 }
 

src/api/commentApi.js

@@ -0,0 +1,12 @@
+//commentApi.js
+import axios from "axios";
+
+const BASE_URL = process.env.REACT_APP_BASE_URL;
+
+export async function getComments(productId) {
+  const response = await axios.get(
+    `${BASE_URL}/products/${productId}/comments?limit=3`
+  );
+
+  return response.data.list || [];
+}

src/api/itemApi.js

@@ -14,3 +14,9 @@ export async function getProducts({ page, pageSize, orderBy, keyword }) {
     throw new Error(`HTTP error: ${error.response?.status || error.message}`);
   }
 }
+
+export async function getProductInfo(productId) {
+  const response = await axios.get(`${BASE_URL}/products/${productId}`);
+
+  return response.data;
+}

src/components/Comments.jsx

@@ -0,0 +1,45 @@
+import * as S from "./Comments.styles";
+import ic_user from "../assets/images/icons/ic_user.svg";
+import EditDropdown from "./common/EditDropdown";
+
+export default function Comments({ comments }) {
+  return (
+    <S.CommentContainer>
+      {comments.map((comment) => (
+        <S.InquiryItem key={comment.id}>
+          <S.CommentHeader>
+            <S.CommentText>{comment.content}</S.CommentText>
+            <EditDropdown />
+          </S.CommentHeader>
+          <S.UserInfo>
+            <S.ProfileImage src={ic_user} alt="프로필" />
+            <S.UserDetails>
+              <S.Nickname>
+                {comment.writer?.nickname || "알 수 없음"}
+              </S.Nickname>
+              <S.TimeAgo>{getTimeAgo(comment.createdAt)}</S.TimeAgo>
+            </S.UserDetails>
+          </S.UserInfo>
+        </S.InquiryItem>
+      ))}
+    </S.CommentContainer>
+  );
+}
+
+function getTimeAgo(createdAt) {
+  if (!createdAt) return "방금 전";
+
+  const now = new Date();
+  const createdDate = new Date(createdAt);
+  const diffInMs = now - createdDate; // 밀리초 단위 차이
+  const diffInHours = diffInMs / (1000 * 60 * 60); // 시간 단위 변환
+
+  if (diffInHours < 1) {
+    return "방금 전";
+  } else if (diffInHours < 24) {
+    return `${Math.floor(diffInHours)}시간 전`; // 24시간 미만이면 "n시간 전"
+  } else {
+    const diffInDays = Math.floor(diffInHours / 24);
+    return `${diffInDays}일 전`; // 1일 이상이면 "n일 전"
+  }
+}

src/components/Comments.styles.jsx

@@ -0,0 +1,55 @@
+import styled from "styled-components";
+import theme from "../styles/theme";
+
+export const CommentContainer = styled.div`
+  margin-top: 16px;
+`;
+
+export const InquiryItem = styled.div`
+  padding: 14px;
+  border-bottom: 1px solid ${theme.colors.Gray200};
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+`;
+
+export const CommentHeader = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  padding: 10px;
+`;
+
+export const CommentText = styled.p`
+  font: ${theme.fonts.H6Regular};
+  color: ${theme.colors.Gray800};
+`;
+
+export const UserInfo = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 12px;
+`;
+
+export const ProfileImage = styled.img`
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+`;
+
+export const UserDetails = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+export const Nickname = styled.span`
+  font: ${theme.fonts.H8};
+  color: ${theme.colors.Gray600};
+`;
+
+export const TimeAgo = styled.span`
+  font-size: 12px;
+  color: ${theme.colors.Gray400};
+  margin-top: 4px;
+`;

src/components/ItemDetail.jsx

@@ -0,0 +1,91 @@
+// itemDetail.jsx
+import * as S from "./ItemDetail.styles";
+import { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+import { getProductInfo } from "../api/itemApi";
+import img_default from "../assets/images/icons/img_default.svg";
+import ic_heart from "../assets/images/icons/ic_heart.svg";
+import ic_user from "../assets/images/icons/ic_user.svg";
+import EditDropdown from "./common/EditDropdown";
+
+export default function ItemDetail() {
+  const { productId } = useParams();
+  const [product, setProduct] = useState({
+    name: "",
+    description: "",
+    price: 0,
+    tags: [],
+    images: null,
+    favoriteCount: 0,
+    createdAt: "",
+    updatedAt: "",
+    ownerNickname: "",
+  });
+  const [isImgError, setIsImgError] = useState(false);
+
+  useEffect(() => {
+    getProductInfo(productId)
+      .then((result) => setProduct(result))
+      .catch((error) => console.error(error));
+  }, [productId]);
+
+  return (
+    <S.DetailContainer>
+      {/* 아이템 이미지 */}
+      {product.images && !isImgError ? (
+        <S.Image
+          src={product.images}
+          onLoad={() => setIsImgError(false)}
+          onError={() => setIsImgError(true)}
+        />
+      ) : (
+        <S.NoneImageContainer>
+          <S.NoneImage src={img_default} />
+        </S.NoneImageContainer>
+      )}
+
+      {/* 아이템 정보 */}
+      <S.Detail>
+        <div>
+          <S.Header>
+            <S.TitleWrapper>
+              <S.Title>{product.name}</S.Title>
+              <EditDropdown />
+            </S.TitleWrapper>
+            <S.Price>{product.price.toLocaleString()}원</S.Price>
+          </S.Header>
+          <S.ItemInfo>
+            <div>
+              <S.Label>상품소개</S.Label>
+              <S.Content>{product.description}</S.Content>
+            </div>
+            <S.TagContainer>
+              <S.Label>상품태그</S.Label>
+              <S.TagWrapper>
+                {product.tags.map((tag) => (
+                  <S.Tag key={tag}>#{tag}</S.Tag>
+                ))}
+              </S.TagWrapper>
+            </S.TagContainer>
+          </S.ItemInfo>
+        </div>
+
+        <S.UserWrapper>
+          {/* 판매자 정보 */}
+          <S.SellerContainer>
+            <img src={ic_user} alt="판매자 프로필이미지" />
+            <S.SellerInfo>
+              <S.SellerName>{product.ownerNickname}</S.SellerName>
+              <S.Updated>{product.createdAt}</S.Updated>
+            </S.SellerInfo>
+          </S.SellerContainer>
+          {/* 좋아요버튼 */}
+          <S.LikeWrapper>
+            <S.Like src={ic_heart} />
+            <S.LikeCount>{product.favoriteCount}</S.LikeCount>
+          </S.LikeWrapper>
+        </S.UserWrapper>
+      </S.Detail>
+    </S.DetailContainer>
+  );
+}