-
+
+ {src ? (
+
+ ) : (
+ 이미지 없음
+ )}
);
}
diff --git a/react/my-react-app/src/components/Layout.jsx b/react/my-react-app/src/components/Layout.jsx
new file mode 100644
index 00000000..3f1c211a
--- /dev/null
+++ b/react/my-react-app/src/components/Layout.jsx
@@ -0,0 +1,36 @@
+import React from "react";
+import { Outlet, useLocation } from "react-router-dom";
+import styled from "styled-components";
+import Header from "./Header";
+import Footer from "./Footer";
+
+const LayoutContainer = styled.div`
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+`;
+
+const MainContent = styled.main`
+ flex: 1;
+ padding-top: 30px; // 줄인 패딩
+`;
+
+function Layout() {
+ const location = useLocation();
+ // Hide footer on /additem, /items, and product detail pages (/items/:productId)
+ const hideFooter = location.pathname === "/additem" ||
+ location.pathname === "/items" ||
+ location.pathname.startsWith("/items/");
+
+ return (
+
+
+
+
+
+ {!hideFooter && }
+
+ );
+}
+
+export default Layout;
diff --git a/react/my-react-app/src/components/Pagination.jsx b/react/my-react-app/src/components/Pagination.jsx
index fdec80a4..e2dff370 100644
--- a/react/my-react-app/src/components/Pagination.jsx
+++ b/react/my-react-app/src/components/Pagination.jsx
@@ -16,7 +16,7 @@ const PageButton = styled.button`
justify-content: center;
width: 36px;
height: 36px;
- border-radius: 8px;
+ border-radius: 50%;
border: 1px solid #e5e8ec;
background-color: #ffffff;
color: #4e5968;
diff --git a/react/my-react-app/src/components/SearchForm.jsx b/react/my-react-app/src/components/SearchForm.jsx
index 9dae9d47..53dcc639 100644
--- a/react/my-react-app/src/components/SearchForm.jsx
+++ b/react/my-react-app/src/components/SearchForm.jsx
@@ -3,20 +3,22 @@ import styled from "styled-components";
const SearchFormContainer = styled.form`
width: 100%; /* Use full width on mobile */
- max-width: 400px; /* Allow it to grow larger on mobile */
+ max-width: 300px; /* Reduced max-width */
+ flex-shrink: 1;
@media (min-width: 768px) {
width: 242px;
}
@media (min-width: 1280px) {
- width: 470px;
+ width: 300px;
}
@media (max-width: 767px) {
flex-grow: 1; /* Take up available space */
flex-shrink: 1;
- width: calc(100% - 54px); /* Leave room for the dropdown */
+ width: 100%; /* Full width on mobile */
+ margin-top: 10px;
}
`;
diff --git a/react/my-react-app/src/components/comment/CommentItem.jsx b/react/my-react-app/src/components/comment/CommentItem.jsx
new file mode 100644
index 00000000..cdf27197
--- /dev/null
+++ b/react/my-react-app/src/components/comment/CommentItem.jsx
@@ -0,0 +1,125 @@
+import React from "react";
+import styled from "styled-components";
+
+const CommentItemContainer = styled.div`
+ margin-bottom: 20px;
+ padding-bottom: 16px;
+ border-bottom: 1px solid #f0f0f0;
+`;
+
+const CommentHeader = styled.div`
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+ margin-bottom: 8px;
+`;
+
+const CommentText = styled.p`
+ margin: 0;
+ font-size: 14px;
+ line-height: 1.5;
+ color: #333;
+ flex-grow: 1;
+`;
+
+const CommentFooter = styled.div`
+ display: flex;
+ align-items: center;
+ margin-top: 8px;
+ font-size: 12px;
+ color: #999;
+`;
+
+const CommentAvatar = styled.div`
+ width: 24px;
+ height: 24px;
+ border-radius: 50%;
+ background-color: #f0f0f0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: #666;
+ font-weight: 600;
+ flex-shrink: 0;
+ margin-right: 8px;
+`;
+
+const CommentAuthor = styled.span`
+ font-weight: 500;
+ margin-right: 8px;
+`;
+
+const CommentDate = styled.span`
+ color: #999;
+`;
+
+const CommentKebabMenu = styled.div`
+ position: relative;
+ cursor: pointer;
+`;
+
+const KebabIcon = styled.div`
+ width: 24px;
+ height: 24px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: #666;
+
+ &:hover {
+ color: #333;
+ }
+`;
+
+const KebabMenuDropdown = styled.div`
+ position: absolute;
+ top: 100%;
+ right: 0;
+ background-color: white;
+ border: 1px solid #e5e8ec;
+ border-radius: 4px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+ z-index: 10;
+ min-width: 100px;
+`;
+
+const KebabMenuItem = styled.button`
+ width: 100%;
+ text-align: left;
+ padding: 8px 12px;
+ background: none;
+ border: none;
+ font-size: 14px;
+ color: #333;
+ cursor: pointer;
+
+ &:hover {
+ background-color: #f5f5f5;
+ }
+`;
+
+function CommentItem({ comment, onToggleMenu }) {
+ return (
+
+
+ {comment.content}
+
+ onToggleMenu(comment.id)}>⋮
+ {comment.showMenu && (
+
+ 수정하기
+ 삭제하기
+
+ )}
+
+
+
+ {comment.avatar}
+ {comment.author}
+ {comment.timeAgo}
+
+
+ );
+}
+
+export default CommentItem;
diff --git a/react/my-react-app/src/components/comment/CommentSection.jsx b/react/my-react-app/src/components/comment/CommentSection.jsx
new file mode 100644
index 00000000..d35011da
--- /dev/null
+++ b/react/my-react-app/src/components/comment/CommentSection.jsx
@@ -0,0 +1,133 @@
+import React from "react";
+import styled from "styled-components";
+import CommentItem from "./CommentItem";
+
+const CommentsContainer = styled.div`
+ margin-top: 40px;
+ width: 100%;
+`;
+
+const SectionTitle = styled.h3`
+ font-size: 18px;
+ font-weight: 600;
+ color: #222;
+ margin-bottom: 16px;
+`;
+
+const CommentForm = styled.form`
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ margin-bottom: 24px;
+ padding: 0;
+ border-radius: 8px;
+`;
+
+const CommentInput = styled.textarea`
+ width: 100%;
+ height: 104px;
+ border-radius: 8px;
+ border: 1px solid #e5e8ec;
+ background-color: #f4f6fa;
+ padding: 16px;
+ font-size: 14px;
+ resize: none;
+ box-sizing: border-box;
+ color: #333333;
+ font-family: inherit;
+
+ &:focus {
+ border-color: #007aff;
+ outline: none;
+ }
+
+ &::placeholder {
+ color: #666;
+ opacity: 1;
+ }
+`;
+
+const SubmitButton = styled.button`
+ align-self: flex-end;
+ padding: 8px 16px;
+ background-color: #6c757d;
+ color: white;
+ border: none;
+ border-radius: 4px;
+ font-weight: 500;
+ cursor: pointer;
+ transition: background-color 0.2s;
+
+ &:hover {
+ background-color: #5a6268;
+ }
+`;
+
+const CommentList = styled.div`
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+`;
+
+const MessageParagraph = styled.p`
+ text-align: center;
+ color: #8b95a1;
+ padding: 20px;
+ font-size: 14px;
+`;
+
+// 디폴트 문구 정의
+const DEFAULT_COMMENT =
+ "개인정보를 공유 및 요청하거나, 명예 훼손, 무단 광고, 불법 정보 유포시 모니터링 후 삭제될 수 있으며, 이에 대한 민형사상 책임은 게시자에게 있습니다.";
+
+function CommentSection({
+ comments,
+ newComment,
+ loadingComments,
+ commentError,
+ onCommentChange,
+ onCommentSubmit,
+ onCommentFocus,
+ onCommentBlur,
+ onToggleMenu
+}) {
+ return (
+
+ 문의하기
+
+
+ 등록
+
+
+
+ {loadingComments ? (
+ 댓글을 불러오는 중...
+ ) : commentError ? (
+
+ 댓글을 불러오는데 오류가 발생했습니다.
+
+ ) : comments.length === 0 ? (
+
+ 아직 댓글이 없습니다. 처음으로 댓글을 남겨보세요!
+
+ ) : (
+ comments.map((comment) => (
+
+ ))
+ )}
+
+
+ );
+}
+
+export default CommentSection;
diff --git a/react/my-react-app/src/components/product/ProductDetails.jsx b/react/my-react-app/src/components/product/ProductDetails.jsx
new file mode 100644
index 00000000..fffc036f
--- /dev/null
+++ b/react/my-react-app/src/components/product/ProductDetails.jsx
@@ -0,0 +1,34 @@
+import React from "react";
+import styled from "styled-components";
+import ProductInfo from "./ProductInfo";
+import ProductTags from "./ProductTags";
+import SellerInfo from "./SellerInfo";
+
+const ProductDetailsContainer = styled.div`
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+`;
+
+function ProductDetails({ product, onFavoriteClick }) {
+ return (
+
+
+
+
+
+ );
+}
+
+export default ProductDetails;
diff --git a/react/my-react-app/src/components/product/ProductImages.jsx b/react/my-react-app/src/components/product/ProductImages.jsx
new file mode 100644
index 00000000..6418e166
--- /dev/null
+++ b/react/my-react-app/src/components/product/ProductImages.jsx
@@ -0,0 +1,85 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+
+const ImageContainer = styled.div`
+ width: 343px;
+ height: 343px;
+ margin: 0 auto;
+
+ /* 태블릿 화면 */
+ @media (min-width: 768px) and (max-width: 1023px) {
+ width: 340px;
+ height: 340px;
+ }
+
+ /* 데스크톱 화면 */
+ @media (min-width: 1024px) {
+ width: 486px;
+ height: 486px;
+ }
+`;
+
+const MainImage = styled.img`
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ border-radius: 8px;
+`;
+
+const ThumbnailContainer = styled.div`
+ display: flex;
+ gap: 8px;
+ margin-top: 8px;
+ overflow-x: auto;
+`;
+
+const Thumbnail = styled.img`
+ width: 60px;
+ height: 60px;
+ object-fit: cover;
+ border-radius: 4px;
+ cursor: pointer;
+ opacity: ${(props) => (props.$active ? 1 : 0.6)};
+ border: ${(props) => (props.$active ? "2px solid #4a80f0" : "none")};
+ transition: all 0.2s;
+
+ &:hover {
+ opacity: 1;
+ }
+`;
+
+function ProductImages({ images }) {
+ const [activeIndex, setActiveIndex] = useState(0);
+
+ // 이미지가 없을 경우 기본 이미지 사용
+ const imageList = images && images.length > 0
+ ? images
+ : ['/placeholder-image.jpg'];
+
+ return (
+
+
+
+
+
+ {imageList.length > 1 && (
+
+ {imageList.map((image, index) => (
+ setActiveIndex(index)}
+ />
+ ))}
+
+ )}
+
+ );
+}
+
+export default ProductImages;
diff --git a/react/my-react-app/src/components/product/ProductInfo.jsx b/react/my-react-app/src/components/product/ProductInfo.jsx
new file mode 100644
index 00000000..dbf8655e
--- /dev/null
+++ b/react/my-react-app/src/components/product/ProductInfo.jsx
@@ -0,0 +1,170 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+import { formatPrice, formatDate } from "../../utils/format";
+
+const Container = styled.div`
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+`;
+
+const Divider = styled.hr`
+ border: none;
+ border-top: 1px solid #DFDFDF;
+ width: 100%;
+ margin: 16px 0;
+`;
+
+const SectionTitle = styled.h3`
+ font-size: 16px;
+ font-weight: 600;
+ color: #222;
+ margin: 0;
+ margin-bottom: 8px;
+`;
+
+const TitleContainer = styled.div`
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ width: 100%;
+`;
+
+const Title = styled.h2`
+ font-size: 24px;
+ font-weight: 600;
+ color: #222;
+ margin: 0;
+`;
+
+const Price = styled.div`
+ font-size: 32px;
+ font-weight: 700;
+ color: #222;
+`;
+
+const Description = styled.p`
+ font-size: 16px;
+ line-height: 1.6;
+ color: #4e5968;
+ margin: 0;
+ white-space: pre-wrap;
+`;
+
+const MetaInfo = styled.div`
+ display: flex;
+ align-items: center;
+ margin-top: 8px;
+`;
+
+const CreatedAt = styled.span`
+ color: #8b95a1;
+ font-size: 14px;
+ margin-left: auto; /* 오른쪽 정렬 */
+`;
+
+const FavoriteButton = styled.button`
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ padding: 8px 16px;
+ border: none;
+ background: ${(props) => (props.$isFavorite ? "#FFE8EC" : "#F4F6FA")};
+ color: ${(props) => (props.$isFavorite ? "#FF597B" : "#4e5968")};
+ border-radius: 8px;
+ cursor: pointer;
+ font-weight: 600;
+ transition: all 0.2s;
+
+ &:hover {
+ background: ${(props) => (props.$isFavorite ? "#FFD5DE" : "#E8EBF2")};
+ }
+`;
+
+function ProductInfo({
+ name,
+ price,
+ description,
+ favoriteCount,
+ isFavorite,
+ createdAt,
+ onFavoriteClick,
+}) {
+ const [menuOpen, setMenuOpen] = useState(false);
+ // 케밥 메뉴 아이콘 컴포넌트
+ const KebabMenuIcon = () => (
+
+ );
+
+ const KebabMenuButton = styled.button`
+ background: none;
+ border: none;
+ cursor: pointer;
+ color: #4e5968;
+ padding: 8px;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ position: relative;
+
+ &:hover {
+ background: #f4f6fa;
+ }
+ `;
+
+ const MenuDropdown = styled.div`
+ position: absolute;
+ top: 100%;
+ right: 0;
+ background: white;
+ border-radius: 8px;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+ width: 120px;
+ z-index: 10;
+ overflow: hidden;
+ `;
+
+ const MenuItem = styled.button`
+ width: 100%;
+ text-align: left;
+ padding: 12px 16px;
+ background: none;
+ border: none;
+ font-size: 14px;
+ color: #333;
+ cursor: pointer;
+ transition: background-color 0.2s;
+
+ &:hover {
+ background-color: #f5f5f5;
+ }
+ `;
+
+ return (
+
+
+ {name}
+ setMenuOpen(!menuOpen)}>
+
+ {menuOpen && (
+
+
+
+
+ )}
+
+
+ {formatPrice(price)}원
+
+ 상품 소개
+ {description}
+
+ );
+}
+
+export default ProductInfo;
diff --git a/react/my-react-app/src/components/product/ProductTags.jsx b/react/my-react-app/src/components/product/ProductTags.jsx
new file mode 100644
index 00000000..a79840c2
--- /dev/null
+++ b/react/my-react-app/src/components/product/ProductTags.jsx
@@ -0,0 +1,50 @@
+import React from "react";
+import styled from "styled-components";
+
+const Container = styled.div`
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+`;
+
+const SectionTitle = styled.h3`
+ font-size: 16px;
+ font-weight: 600;
+ color: #222;
+ margin: 0;
+ margin-bottom: 8px;
+`;
+
+const TagsContainer = styled.div`
+ display: flex;
+ flex-wrap: wrap;
+ gap: 8px;
+ margin: 8px 0;
+`;
+
+const Tag = styled.span`
+ display: inline-block;
+ padding: 6px 12px;
+ background: #f4f6fa;
+ color: #4e5968;
+ border-radius: 16px;
+ font-size: 14px;
+ font-weight: 500;
+`;
+
+function ProductTags({ tags }) {
+ if (!tags || tags.length === 0) return null;
+
+ return (
+
+ 상품 태그
+
+ {tags.map((tag, index) => (
+ #{tag}
+ ))}
+
+
+ );
+}
+
+export default ProductTags;
diff --git a/react/my-react-app/src/components/product/SellerInfo.jsx b/react/my-react-app/src/components/product/SellerInfo.jsx
new file mode 100644
index 00000000..9d9ae5bd
--- /dev/null
+++ b/react/my-react-app/src/components/product/SellerInfo.jsx
@@ -0,0 +1,117 @@
+import React from "react";
+import styled from "styled-components";
+
+const Container = styled.div`
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+`;
+
+const SectionTitle = styled.h3`
+ font-size: 16px;
+ font-weight: 600;
+ color: #222;
+ margin: 0;
+ margin-bottom: 8px;
+`;
+
+
+
+const SellerProfile = styled.div`
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ justify-content: space-between;
+`;
+
+const ProfileImage = styled.div`
+ width: 48px;
+ height: 48px;
+ border-radius: 50%;
+ background: ${(props) =>
+ props.$image ? `url(${props.$image}) center/cover` : "#F4F6FA"};
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: #8b95a1;
+ font-size: 20px;
+ border: 1px solid #e8ebf2;
+`;
+
+const SellerInfoContainer = styled.div`
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ gap: 4px;
+`;
+
+const SellerName = styled.div`
+ font-size: 16px;
+ font-weight: 500;
+ color: #222;
+`;
+
+const SellerDate = styled.div`
+ font-size: 14px;
+ color: #8b95a1;
+`;
+
+const FavoriteButton = styled.button`
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ padding: 8px 16px;
+ border: 1px solid #e5e8ec;
+ background: transparent;
+ color: ${(props) => (props.$isFavorite ? "#FF597B" : "#4e5968")};
+ border-radius: 8px;
+ cursor: pointer;
+ font-weight: 600;
+ transition: all 0.2s;
+
+ &:hover {
+ background: #f9f9f9;
+ }
+`;
+
+const FavoriteIcon = styled.img`
+ width: 15px;
+ height: 15px;
+ margin-right: 4px;
+ object-fit: contain;
+ vertical-align: middle;
+`;
+
+
+
+function SellerInfo({ nickname, image, createdAt, favoriteCount, isFavorite, onFavoriteClick }) {
+ // 프로필 이미지가 없을 경우 이니셜을 표시
+ const initial = nickname ? nickname[0].toUpperCase() : "?";
+
+ // 날짜 포맷팅 함수
+ const formatDate = (dateString) => {
+ const date = new Date(dateString);
+ return `${date.getFullYear()}.${String(date.getMonth() + 1).padStart(2, '0')}.${String(date.getDate()).padStart(2, '0')}`;
+ };
+
+ return (
+
+ 판매자 정보
+
+
+
{!image && initial}
+
+ {nickname}
+ {createdAt ? formatDate(createdAt) : '2024.01.02'}
+
+