-
- 
+
+
- )
+ );
}
-export default Header
+export default Header;
diff --git a/src/components/UI/DeleteButton.jsx b/src/components/UI/DeleteButton.jsx
new file mode 100644
index 00000000..8244426a
--- /dev/null
+++ b/src/components/UI/DeleteButton.jsx
@@ -0,0 +1,27 @@
+import React from "react";
+import styled from "styled-components";
+import { ReactComponent as CloseIcon } from "../../assets/images/icons/ic_x.svg";
+
+const Button = styled.button`
+ background-color: ${({ theme }) => theme.colors.gray[400]};
+ width: 20px;
+ height: 20px;
+ border-radius: 50%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ &:hover {
+ background-color: ${({ theme }) => theme.colors.blue.primary};
+ }
+`;
+
+function DeleteButton({ onClick, label }) {
+ return (
+
+ );
+}
+
+export default DeleteButton;
diff --git a/src/components/UI/DropdownMenu.css b/src/components/UI/DropdownMenu.css
new file mode 100644
index 00000000..1eeae960
--- /dev/null
+++ b/src/components/UI/DropdownMenu.css
@@ -0,0 +1,33 @@
+.sortButtonWrapper {
+ position: relative;
+}
+
+.sortDropdownTriggerButton {
+ border: 1px solid var(--gray-200);
+ border-radius: 12px;
+ padding: 9px;
+ margin-left: 8px;
+}
+
+.dropdownMenu {
+ position: absolute;
+ top: 110%;
+ right: 0;
+ background: #fff;
+ border-radius: 8px;
+ border: 1px solid var(--gray-200);
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ z-index: 99;
+}
+
+.dropdownItem {
+ padding: 12px 44px;
+ border-bottom: 1px solid var(--gray-200);
+ font-size: 16px;
+ color: var(--gray-800);
+ cursor: pointer;
+}
+
+.dropdownItem:last-child {
+ border-bottom: none;
+}
diff --git a/src/components/UI/DropdownMenu.jsx b/src/components/UI/DropdownMenu.jsx
new file mode 100644
index 00000000..9a883fec
--- /dev/null
+++ b/src/components/UI/DropdownMenu.jsx
@@ -0,0 +1,43 @@
+import React, { useState } from "react";
+import "./DropdownMenu.css";
+import { ReactComponent as SortIcon } from "../../assets/images/icons/ic_sort.svg";
+
+function DropdownMenu({ onSortSelection }) {
+ const [isDropdownVisible, setIsDropdownVisible] = useState(false);
+
+ const toggleDropdown = () => {
+ setIsDropdownVisible(!isDropdownVisible);
+ };
+
+ return (
+
+
+)
+
+export default Icon
diff --git a/src/components/UI/ImageUpload.jsx b/src/components/UI/ImageUpload.jsx
new file mode 100644
index 00000000..077ea9d8
--- /dev/null
+++ b/src/components/UI/ImageUpload.jsx
@@ -0,0 +1,122 @@
+import React, { useState } from "react";
+import { Label } from "./InputItem";
+import styled, { css } from "styled-components";
+import { ReactComponent as PlusIcon } from "../../assets/images/icons/ic_plus.svg";
+import DeleteButton from "./DeleteButton";
+
+const ImageUploadContainer = styled.div`
+ display: flex;
+ gap: 8px;
+
+ @media ${({ theme }) => theme.mediaQuery.tablet} {
+ gap: 18px;
+ }
+
+ @media ${({ theme }) => theme.mediaQuery.desktop} {
+ gap: 24px;
+ }
+`;
+
+const squareStyles = css`
+ // 작은 화면에서는 max-width가 되기 전까지는 UploadButton과 ImagePreview가 각각 gap을 포함해 컨테이너 너비의 절반을 차지하도록 함
+ width: calc(50% - 4px);
+ max-width: 200px;
+ aspect-ratio: 1 / 1; // 정사각형 비율 유지
+ border-radius: 12px;
+
+ @media ${({ theme }) => theme.mediaQuery.tablet} {
+ width: 162px;
+ }
+
+ @media ${({ theme }) => theme.mediaQuery.desktop} {
+ width: 282px;
+ }
+`;
+
+// file input과 연관 짓기 위해 버튼이 대신 label로 설정
+const UploadButton = styled.label`
+ background-color: ${({ theme }) => theme.colors.gray[100]};
+ color: ${({ theme }) => theme.colors.gray[400]};
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 12px;
+ font-size: 16px;
+ cursor: pointer; // 버튼이 아닌 label을 사용한 경우 별도로 추가해 주세요
+
+ &:hover {
+ background-color: ${({ theme }) => theme.colors.gray[50]};
+ }
+
+ ${squareStyles}
+`;
+
+const ImagePreview = styled.div`
+ background-image: url(${({ src }) => src});
+ background-size: cover;
+ background-position: center;
+ position: relative; // DeleteButton 포지셔닝을 위해 추가
+
+ ${squareStyles}
+`;
+
+const DeleteButtonWrapper = styled.div`
+ position: absolute;
+ top: 12px;
+ right: 12px;
+`;
+
+// 브라우저 기본 '파일 선택' 버튼 대신 커스텀 버튼을 사용하기 위해 file input을 숨김 처리
+const HiddenFileInput = styled.input`
+ display: none;
+`;
+
+function ImageUpload({ title }) {
+ const [imagePreviewUrl, setImagePreviewUrl] = useState("");
+
+ const handleImageChange = (event) => {
+ const file = event.target.files[0];
+ if (file) {
+ // 미리보기 주소 값(Object URL) 생성
+ const imageUrl = URL.createObjectURL(file);
+ setImagePreviewUrl(imageUrl);
+ }
+ };
+
+ const handleDelete = () => {
+ setImagePreviewUrl(""); // 미리보기 URL 리셋
+ };
+
+ return (
+
+
+
+
+ ) : null
+}
+
+export default LoadingSpinner
diff --git a/src/components/UI/PaginationBar.css b/src/components/UI/PaginationBar.css
index 1841297a..f9f394f7 100644
--- a/src/components/UI/PaginationBar.css
+++ b/src/components/UI/PaginationBar.css
@@ -6,11 +6,11 @@
}
.paginationButton {
- border: 1px solid #e5e7eb;
+ border: 1px solid var(--gray-200);
border-radius: 50%;
width: 40px;
height: 40px;
- color: #6b7280;
+ color: var(--gray-500);
font-weight: 600;
font-size: 16px;
display: flex;
diff --git a/src/components/UI/TagInput.jsx b/src/components/UI/TagInput.jsx
new file mode 100644
index 00000000..7c186ebd
--- /dev/null
+++ b/src/components/UI/TagInput.jsx
@@ -0,0 +1,77 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+import InputItem from "./InputItem";
+import { FlexContainer } from "../../styles/CommonStyles";
+import DeleteButton from "./DeleteButton";
+
+const TagButtonsSection = styled.div`
+ display: flex;
+ gap: 12px;
+ margin-top: 12px;
+ flex-wrap: wrap;
+`;
+
+const Tag = styled(FlexContainer)`
+ background-color: ${({ theme }) => theme.colors.gray[50]};
+ color: ${({ theme }) => theme.colors.gray[800]};
+ padding: 14px 14px 14px 16px;
+ border-radius: 999px;
+ min-width: 100px;
+`;
+
+const TagText = styled.span`
+ font-size: 16px;
+ line-height: 24px;
+ margin-right: 8px;
+ max-width: calc(100% - 28px);
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+`;
+
+function TagInput({ tags, onAddTag, onRemoveTag }) {
+ const [input, setInput] = useState("");
+
+ const onPressEnter = (event) => {
+ if (event.nativeEvent.isComposing) return;
+
+ const inputString = input.trim();
+ if (event.key === "Enter" && inputString) {
+ event.preventDefault();
+ onAddTag(inputString);
+ setInput("");
+ }
+
+ // 입력 포커스를 잃었을때, 이전 까지 입력된 값으로 태그를 추가하도록 추후 변경 검
+ }
+
+ return (
+
-
+
);
diff --git a/src/pages/AddItemPage/AddItemPage.jsx b/src/pages/AddItemPage/AddItemPage.jsx
index e7ba934c..7bef2229 100644
--- a/src/pages/AddItemPage/AddItemPage.jsx
+++ b/src/pages/AddItemPage/AddItemPage.jsx
@@ -1,7 +1,90 @@
-import React from "react";
+import React, { useState } from "react";
+import {
+ Button,
+ Container,
+ FlexContainer,
+ SectionTitle,
+} from "../../styles/CommonStyles";
+import styled from "styled-components";
+import InputItem from "../../components/UI/InputItem";
+import TagInput from "../../components/UI/TagInput";
+import ImageUpload from "../../components/UI/ImageUpload";
+
+const TitleSection = styled(FlexContainer)`
+ margin-bottom: 16px;
+`;
+
+const InputSection = styled.div`
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+
+ @media ${({ theme }) => theme.mediaQuery.tablet} {
+ gap: 24px;
+ }
+`;
function AddItemPage() {
- return
+
+
+ );
}
export default AddItemPage;
diff --git a/src/pages/ItemPage/ItemPage.jsx b/src/pages/ItemPage/ItemPage.jsx
new file mode 100644
index 00000000..cabe21db
--- /dev/null
+++ b/src/pages/ItemPage/ItemPage.jsx
@@ -0,0 +1,78 @@
+import React, { useEffect, useState } from 'react'
+import { useParams } from 'react-router-dom'
+import styled from 'styled-components'
+import { Container, LineDivider, StyledLink } from '../../styles/CommonStyles'
+import { getProductDetail } from '../../api/itemApi'
+import ItemProfileSection from './components/ItemProfileSection'
+import ItemCommentSection from './components/ItemCommentSection'
+import { ReactComponent as BackIcon } from '../../assets/images/icons/ic_back.svg'
+import LoadingSpinner from '../../components/UI/LoadingSpinner'
+
+const BackToMarketPageLink = styled(StyledLink)`
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ font-size: 18px;
+ font-weight: 600;
+ margin: 0 auto;
+`
+
+function ItemPage () {
+ const [product, setProduct] = useState(null)
+ const [isLoading, setIsLoading] = useState(true)
+ const [error, setError] = useState(null)
+
+ const { productId } = useParams()
+
+ useEffect(() => {
+ async function fetchProduct () {
+ if (!productId) {
+ setError('상품 아이디가 제공되지 않았어요.')
+ setIsLoading(false)
+ return
+ }
+
+ setIsLoading(true)
+ try {
+ const data = await getProductDetail(productId)
+ if (!data) {
+ throw new Error('해당 상품의 데이터를 찾을 수 없습니다.')
+ }
+ setProduct(data)
+ } catch (error) {
+ setError(error.message)
+ } finally {
+ setIsLoading(false)
+ }
+ }
+
+ fetchProduct()
+ }, [productId])
+
+ if (error) {
+ alert(`오류: ${error}`)
+ }
+
+ if (!productId || !product) return null
+
+ return (
+ <>
+
+
+ 목록으로 돌아가기
+
+
+
+ )
+}
+
+export default ItemPage
diff --git a/src/pages/ItemPage/components/CommentThread.jsx b/src/pages/ItemPage/components/CommentThread.jsx
new file mode 100644
index 00000000..5c63ca58
--- /dev/null
+++ b/src/pages/ItemPage/components/CommentThread.jsx
@@ -0,0 +1,158 @@
+import React, { useEffect, useState } from 'react'
+import { getProductComments } from '../../../api/itemApi'
+import styled from 'styled-components'
+import { ReactComponent as EmptyStateImage } from '../../../assets/images/ui/empty-comments.svg'
+import { ReactComponent as SeeMoreIcon } from '../../../assets/images/icons/ic_kebab.svg'
+import DefaultProfileImage from '../../../assets/images/ui/ic_profile.svg'
+import { LineDivider } from '../../../styles/CommonStyles'
+import { formatUpdatedAt } from '../../../utils/dateUtils'
+
+const CommentContainer = styled.div`
+ padding: 24px 0;
+ position: relative;
+`
+
+const SeeMoreButton = styled.button`
+ position: absolute;
+ right: 0;
+`
+
+const CommentContent = styled.p`
+ font-size: 16px;
+ line-height: 140%;
+ margin-bottom: 24px;
+`
+
+const AuthorProfile = styled.div`
+ display: flex;
+ align-items: center;
+ gap: 8px;
+`
+
+const UserProfileImage = styled.img`
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ object-fit: cover;
+`
+
+const Username = styled.p`
+ color: var(--gray-600);
+ font-size: 14px;
+ margin-bottom: 4px;
+`
+
+const Timestamp = styled.p`
+ color: ${({ theme }) => theme.colors.gray[400]};
+ font-size: 12px;
+`
+
+const CommentItem = ({ item }) => {
+ const authorInfo = item.writer
+ const formattedTimestamp = formatUpdatedAt(item.updatedAt)
+
+ return (
+ <>
+
+
+
+
+ {item.content}
+
+
+
+
+
+
+ 아직 문의가 없습니다.
+
+ )
+}
+
+const ThreadContainer = styled.div`
+ margin-bottom: 40px;
+`
+
+function CommentThread ({ productId }) {
+ const [comments, setComments] = useState([])
+ const [isLoading, setIsLoading] = useState(false)
+ const [error, setError] = useState(null)
+
+ useEffect(() => {
+ if (!productId) return
+
+ const fetchComments = async () => {
+ setIsLoading(true)
+ const params = {
+ limit: 10 // 페이지당 보여줄 댓글 개수
+ }
+
+ try {
+ const data = await getProductComments({ productId, params })
+ setComments(data.list)
+ setError(null)
+ } catch (error) {
+ console.error('Error fetching comments:', error)
+ setError('상품의 댓글을 불러오지 못했어요.')
+ } finally {
+ setIsLoading(false)
+ }
+ }
+
+ fetchComments()
+ }, [productId])
+
+ if (isLoading) {
+ return
+ {comments.map(item => (
+
+ )
+ }
+}
+
+export default CommentThread
diff --git a/src/pages/ItemPage/components/ItemCommentSection.jsx b/src/pages/ItemPage/components/ItemCommentSection.jsx
new file mode 100644
index 00000000..f5cf80c2
--- /dev/null
+++ b/src/pages/ItemPage/components/ItemCommentSection.jsx
@@ -0,0 +1,86 @@
+import React, { useState } from 'react'
+import styled from 'styled-components'
+import { Button } from '../../../styles/CommonStyles'
+import CommentThread from './CommentThread'
+
+const COMMENT_PLACEHOLDER =
+ '개인정보를 불법으로 무단복제,훼손,유포 시 삭제될 수 있으며, 이에 대한 민형사상 책임은 게시자에게 있습니다.'
+
+const CommentInputSection = styled.section`
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+`
+
+const SectionTitle = styled.h1`
+ font-size: 16px;
+ font-weight: 600;
+`
+
+const TextArea = styled.textarea`
+ background-color: ${({ theme }) => theme.colors.gray[100]};
+ border: none;
+ border-radius: 12px;
+ padding: 16px 24px;
+ height: 104px;
+ resize: none;
+
+ &::placeholder {
+ color: ${({ theme }) => theme.colors.gray[400]};
+ font-size: 14px;
+ line-height: 24px;
+
+ @media ${({ theme }) => theme.mediaQuery.tablet} {
+ font-size: 16px;
+ }
+ }
+
+ &:focus {
+ outline-color: ${({ theme }) => theme.colors.blue.primary};
+ }
+`
+
+const PostCommentButton = styled(Button)`
+ align-self: flex-end;
+ font-weight: 600;
+ font-size: 14px;
+
+ @media ${({ theme }) => theme.mediaQuery.tablet} {
+ font-size: 16px;
+ }
+`
+
+function ItemCommentSection ({ productId }) {
+ const [comment, setComment] = useState('')
+
+ const handleInputChange = e => {
+ setComment(e.target.value)
+ }
+
+ const handlePostComment = () => {}
+
+ return (
+ <>
+
+ 문의하기
+
+
+
+
+ 등록
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+ 상품 태그
+
+
+
+
+
+ )
+}
+
+export default ItemProfileSection
diff --git a/src/pages/ItemPage/components/LikeButton.jsx b/src/pages/ItemPage/components/LikeButton.jsx
new file mode 100644
index 00000000..1819fe3d
--- /dev/null
+++ b/src/pages/ItemPage/components/LikeButton.jsx
@@ -0,0 +1,39 @@
+import React from 'react'
+import styled from 'styled-components'
+import { ReactComponent as HeartSvg } from '../../../assets/images/icons/ic_heart.svg'
+import { FlexContainer } from '../../../styles/CommonStyles'
+import Icon from '../../../components/UI/Icon'
+
+const PillButton = styled.button`
+ color: var(--gray-500);
+ font-size: 16px;
+ padding: 4px 12px;
+ border-radius: 999px;
+ border: 1px solid var(--gray-200);
+
+ &:hover svg path {
+ fill: var(--red);
+ stroke: var(--red);
+ }
+`
+
+const ButtonContent = styled(FlexContainer)`
+ gap: 4px;
+`
+
+function LikeButton ({ productId, isFavorite, favoriteCount }) {
+ return (
+
+
+
+
+ )
+}
+
+export default LikeButton
diff --git a/src/pages/ItemPage/components/TagDisplay.jsx b/src/pages/ItemPage/components/TagDisplay.jsx
new file mode 100644
index 00000000..0635adf9
--- /dev/null
+++ b/src/pages/ItemPage/components/TagDisplay.jsx
@@ -0,0 +1,30 @@
+import React from 'react'
+import styled from 'styled-components'
+
+const TagsDisplaySection = styled.div`
+ display: flex;
+ gap: 8px;
+ flex-wrap: wrap;
+`
+
+const Tag = styled.div`
+ background-color: ${({ theme }) => theme.colors.gray[50]};
+ color: ${({ theme }) => theme.colors.gray[800]};
+ padding: 6px 16px;
+ border-radius: 999px;
+ font-size: 16px;
+`
+
+function TagDisplay ({ tags }) {
+ if (!tags || tags.length === 0) return null
+
+ return (
+
+ {tags.map((tag, index) => (
+ #{tag}
+ ))}
+
+ )
+}
+
+export default TagDisplay
diff --git a/src/pages/MarketPage/MarketPage.css b/src/pages/MarketPage/MarketPage.css
index f304e4a4..557553c8 100644
--- a/src/pages/MarketPage/MarketPage.css
+++ b/src/pages/MarketPage/MarketPage.css
@@ -1,12 +1,12 @@
.sectionTitle {
- color: #111827;
+ color: var(--gray-900);
font-weight: bold;
font-size: 20px;
line-height: normal;
}
.itemCard {
- color: #1f2937;
+ color: var(--gray-800);
overflow: hidden;
cursor: pointer;
}
@@ -46,7 +46,7 @@
display: flex;
align-items: center;
gap: 4px;
- color: #4b5563;
+ color: var(--gray-600);
font-size: 12px;
}
@@ -75,20 +75,9 @@
padding-bottom: 16px;
}
-.sortButtonWrapper {
- position: relative;
-}
-
-.sortDropdownTriggerButton {
- border: 1px solid #e5e7eb;
- border-radius: 12px;
- padding: 9px;
- margin-left: 8px;
-}
-
.searchBarWrapper {
display: flex;
- background-color: #f3f4f6;
+ background-color: var(--gray-100);
border-radius: 12px;
padding: 9px 16px;
flex: 1;
@@ -103,7 +92,7 @@
}
.searchBarInput::placeholder {
- color: #9ca3af;
+ color: var(--gray-400);
font-size: 16px;
}
diff --git a/src/pages/MarketPage/components/AllItemsSection.jsx b/src/pages/MarketPage/components/AllItemsSection.jsx
index c8d06c2c..030ba9d5 100644
--- a/src/pages/MarketPage/components/AllItemsSection.jsx
+++ b/src/pages/MarketPage/components/AllItemsSection.jsx
@@ -1,113 +1,108 @@
-import React, { useEffect, useState } from 'react'
-import { getProducts } from '../../../api/itemApi'
-import ItemCard from './ItemCard'
-import { ReactComponent as SortIcon } from '../../../assets/images/icons/ic_sort.svg'
-import { ReactComponent as SearchIcon } from '../../../assets/images/icons/ic_search.svg'
-import { Link } from 'react-router-dom'
-import DropdownList from '../../../components/UI/DropdownList'
-import PaginationBar from '../../../components/UI/PaginationBar'
+import React, { useEffect, useState } from "react";
+import { getProducts } from "../../../api/itemApi";
+import ItemCard from "./ItemCard";
+import { ReactComponent as SearchIcon } from "../../../assets/images/icons/ic_search.svg";
+import { Link } from "react-router-dom";
+import DropdownMenu from "../../../components/UI/DropdownMenu";
+import PaginationBar from "../../../components/UI/PaginationBar";
+import LoadingSpinner from "../../../components/UI/LoadingSpinner";
const getPageSize = () => {
- const width = window.innerWidth
+ const width = window.innerWidth;
if (width < 768) {
// Mobile viewport
- return 4
+ return 4;
} else if (width < 1280) {
// Tablet viewport
- return 6
+ return 6;
} else {
// Desktop viewport
- return 10
+ return 10;
}
-}
+};
-function AllItemsSection () {
- const [orderBy, setOrderBy] = useState('recent')
- const [page, setPage] = useState(1)
- const [pageSize, setPageSize] = useState(getPageSize())
- const [itemList, setItemList] = useState([])
- const [isDropdownVisible, setIsDropdownVisible] = useState(false)
- const [totalPageNum, setTotalPageNum] = useState()
+function AllItemsSection() {
+ const [orderBy, setOrderBy] = useState("recent");
+ const [page, setPage] = useState(1);
+ const [pageSize, setPageSize] = useState(getPageSize());
+ const [itemList, setItemList] = useState([]);
+ const [totalPageNum, setTotalPageNum] = useState();
+ const [isLoading, setIsLoading] = useState(true);
const fetchSortedData = async ({ orderBy, page, pageSize }) => {
- const products = await getProducts({ orderBy, page, pageSize })
- setItemList(products.list)
- setTotalPageNum(Math.ceil(products.totalCount / pageSize))
- }
+ setIsLoading(true);
+ try {
+ const products = await getProducts({ orderBy, page, pageSize });
+ setItemList(products.list);
+ setTotalPageNum(Math.ceil(products.totalCount / pageSize));
+ } catch (error) {
+ console.error("오류: ", error.message);
+ } finally {
+ setIsLoading(false);
+ }
+ };
- const handleSortSelection = sortOption => {
- setOrderBy(sortOption)
- setIsDropdownVisible(false)
- }
+ const handleSortSelection = (sortOption) => {
+ setOrderBy(sortOption);
+ };
useEffect(() => {
const handleResize = () => {
- setPageSize(getPageSize())
- }
+ setPageSize(getPageSize());
+ };
- // Recalculate and set pageSize whenever the screen size changes
- window.addEventListener('resize', handleResize)
- fetchSortedData({ orderBy, page, pageSize })
+ window.addEventListener("resize", handleResize);
+ fetchSortedData({ orderBy, page, pageSize });
// Cleanup function
return () => {
- window.removeEventListener('resize', handleResize)
- }
- }, [orderBy, page, pageSize])
-
- const toggleDropdown = () => {
- setIsDropdownVisible(!isDropdownVisible)
- }
+ window.removeEventListener("resize", handleResize);
+ };
+ }, [orderBy, page, pageSize]);
- const onPageChange = pageNumber => {
- setPage(pageNumber)
- }
+ const onPageChange = (pageNumber) => {
+ setPage(pageNumber);
+ };
return (
-
+
+
-
+
로그인
+
+
+ {isDropdownVisible && (
+
+ );
+}
+export default DropdownMenu;
diff --git a/src/components/UI/Icon.jsx b/src/components/UI/Icon.jsx
new file mode 100644
index 00000000..4514ee10
--- /dev/null
+++ b/src/components/UI/Icon.jsx
@@ -0,0 +1,32 @@
+import React from 'react'
+import styled from 'styled-components'
+
+const IconWrapper = styled.div`
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+
+ svg {
+ fill: ${({ $fillColor }) => $fillColor || 'current'}; // 색 채움
+ width: ${({ $size }) => ($size ? `${$size}px` : 'auto')};
+ height: ${({ $size }) => ($size ? `${$size}px` : 'auto')};
+ }
+
+ svg path {
+ stroke: ${({ $fillColor, $outlineColor }) =>
+ $fillColor || $outlineColor || 'currentColor'};
+ }
+`
+
+const Icon = ({
+ iconComponent: IconComponent,
+ size,
+ fillColor,
+ outlineColor
+}) => (
+
+
+ )}
+ {
+ onSortSelection("recent");
+ setIsDropdownVisible(false);
+ }}
+ >
+ 최신순
+
+ {
+ onSortSelection("favorite");
+ setIsDropdownVisible(false);
+ }}
+ >
+ 인기순
+
+
+ {title && }
+
+
+ {/* HiddenFileInput의 id와 label의 htmlFor 값을 매칭해 주세요 */}
+
+
+
+
+
+
+
+ )}
+
+
+ );
+}
+
+export default ImageUpload;
diff --git a/src/components/UI/InputItem.jsx b/src/components/UI/InputItem.jsx
new file mode 100644
index 00000000..6d410812
--- /dev/null
+++ b/src/components/UI/InputItem.jsx
@@ -0,0 +1,76 @@
+import React from "react";
+import styled, { css } from "styled-components";
+
+const inputStyle = css`
+ padding: 16px 24px;
+ background-color: ${({ theme }) => theme.colors.gray[100]};
+ color: ${({ theme }) => theme.colors.gray[800]};
+ border: none;
+ border-radius: 12px;
+ font-size: 16px;
+ line-height: 24px;
+ width: 100%;
+
+ &::placeholder {
+ color: ${({ theme }) => theme.colors.gray[400]};
+ }
+
+ &:focus {
+ outline-color: ${({ theme }) => theme.colors.blue.primary};
+ }
+`;
+
+export const Label = styled.label`
+ display: block;
+ font-size: 14px;
+ font-weight: bold;
+ margin-bottom: 12px;
+
+ @media ${({ theme }) => theme.mediaQuery.tablet} {
+ font-size: 18px;
+ }
+`;
+
+const InputField = styled.input`
+ ${inputStyle}
+`;
+
+const TextArea = styled.textarea`
+ ${inputStyle}
+ height: 200px;
+ resize: none;
+`;
+
+function InputItem({
+ id,
+ label,
+ value,
+ onChange,
+ placeholder,
+ onKeyDown,
+ isTextArea,
+}) {
+ return (
+
+ {label && }
+ {isTextArea ? (
+
+ ) : (
+
+ );
+}
+
+export default InputItem;
diff --git a/src/components/UI/LoadingSpinner.jsx b/src/components/UI/LoadingSpinner.jsx
new file mode 100644
index 00000000..69b6b78d
--- /dev/null
+++ b/src/components/UI/LoadingSpinner.jsx
@@ -0,0 +1,52 @@
+import React, { useEffect, useState } from 'react'
+import styled from 'styled-components'
+import { PulseLoader } from 'react-spinners'
+
+const MaskedBackground = styled.div`
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: #fff;
+ z-index: 9998;
+`
+
+const SpinnerOverlay = styled.div`
+ position: fixed;
+ top: 0;
+ left: 0;
+ background: rgba(0, 0, 0, 0.2);
+ width: 100%;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ z-index: 9999;
+`
+
+const LoadingSpinner = ({
+ size = 20,
+ color = 'var(--blue)',
+ minLoadTime = 500
+}) => {
+ const [isVisible, setIsVisible] = useState(true)
+
+ useEffect(() => {
+ const timer = setTimeout(() => {
+ setIsVisible(false)
+ }, minLoadTime)
+
+ return () => clearTimeout(timer)
+ }, [minLoadTime])
+
+ return isVisible ? (
+
+ setInput(e.target.value)}
+ onKeyDown={onPressEnter}
+ placeholder="태그를 입력해 주세요"
+ />
+
+ {tags.length > 0 && (
+
+ {tags.map((tag) => (
+
+ {tag}
+
+ onRemoveTag(tag)}
+ label={`${tag} 태그`}
+ />
+
+ ))}
+
+ )}
+
+ );
+}
+
+export default TagInput;
diff --git a/src/index.js b/src/index.js
index b391783d..cbc45ee8 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,10 +2,16 @@ import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./styles/global.css";
+import { ThemeProvider } from "styled-components";
+import theme from "./styles/theme";
+import GlobalStyle from "./styles/GlobalStyle";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
AddItemPage
;
+ const [name, setName] = useState("");
+ const [description, setDescription] = useState("");
+ const [price, setPrice] = useState("");
+ const [tags, setTags] = useState([]);
+
+ const addTag = (tag) => {
+ if (!tags.includes(tag)) {
+ setTags([...tags, tag]);
+ }
+ };
+
+ const removeTag = (tagToRemove) => {
+ setTags(tags.filter((tag) => tag !== tagToRemove));
+ };
+
+ const isSubmitDisabled = !name || !description || !price || !tags.length;
+
+ return (
+
+ {authorInfo.nickname}
+ {formattedTimestamp}
+
+ 상품 댓글 로딩중...
+ }
+
+ if (error) {
+ return 오류: {error}
+ }
+
+ if (comments && !comments.length) {
+ return
+ {product.name}
+ {product.price.toLocaleString()}원
+
+
+
+ 상품 소개
+ {product.description}
+
+
+
-
-
+ <>
+ 판매 중인 상품
- - 상품 등록하기 - -
-
-
+
- )
+
+ );
}
-export default AllItemsSection
+export default AllItemsSection;
diff --git a/src/pages/MarketPage/components/BestItemsSection.jsx b/src/pages/MarketPage/components/BestItemsSection.jsx
index d4f9e50b..89138c63 100644
--- a/src/pages/MarketPage/components/BestItemsSection.jsx
+++ b/src/pages/MarketPage/components/BestItemsSection.jsx
@@ -1,56 +1,68 @@
-import React, { useEffect, useState } from 'react'
-import ItemCard from './ItemCard'
-import { getProducts } from '../../../api/itemApi'
+import React, { useEffect, useState } from "react";
+import ItemCard from "./ItemCard";
+import { getProducts } from "../../../api/itemApi";
+import LoadingSpinner from "../../../components/UI/LoadingSpinner";
const getPageSize = () => {
- const width = window.innerWidth
+ const width = window.innerWidth;
if (width < 768) {
// Mobile viewport
- return 1
+ return 1;
} else if (width < 1280) {
// Tablet viewport
- return 2
+ return 2;
} else {
// Desktop viewport
- return 4
+ return 4;
}
-}
+};
-function BestItemsSection () {
- const [itemList, setItemList] = useState([])
- const [pageSize, setPageSize] = useState(getPageSize())
+function BestItemsSection() {
+ const [itemList, setItemList] = useState([]);
+ const [pageSize, setPageSize] = useState(getPageSize());
+ const [isLoading, setIsLoading] = useState(true);
const fetchSortedData = async ({ orderBy, pageSize }) => {
- const products = await getProducts({ orderBy, pageSize })
- setItemList(products.list)
- }
+ setIsLoading(true);
+ try {
+ const products = await getProducts({ orderBy, pageSize });
+ setItemList(products.list);
+ } catch (error) {
+ console.error("오류: ", error.message);
+ } finally {
+ setIsLoading(false);
+ }
+ };
useEffect(() => {
const handleResize = () => {
- setPageSize(getPageSize())
- }
+ setPageSize(getPageSize());
+ };
- // Recalculate and set pageSize whenever the screen size changes
- window.addEventListener('resize', handleResize)
- fetchSortedData({ orderBy: 'favorite', pageSize })
+ window.addEventListener("resize", handleResize);
+ fetchSortedData({ orderBy: "favorite", pageSize });
// Cleanup function
return () => {
- window.removeEventListener('resize', handleResize)
- }
- }, [pageSize])
+ window.removeEventListener("resize", handleResize);
+ };
+ }, [pageSize]);
return (
-
+
- 판매 중인 상품
+ + 상품 등록하기 +
-
- {isDropdownVisible && (
-
-
+
-
+
+
- {itemList?.map(item => (
-
+
+ {itemList?.map((item) => (
+
-
-
-
+
-
+
);
}
diff --git a/src/styles/CommonStyles.js b/src/styles/CommonStyles.js
new file mode 100644
index 00000000..ce3c02a7
--- /dev/null
+++ b/src/styles/CommonStyles.js
@@ -0,0 +1,91 @@
+import { Link } from "react-router-dom";
+import styled from "styled-components";
+
+export const Container = styled.div`
+ display: flex;
+ flex-direction: column;
+ padding: 16px;
+
+ @media ${({ theme }) => theme.mediaQuery.tablet} {
+ padding: 16px 24px;
+ }
+
+ @media ${({ theme }) => theme.mediaQuery.desktop} {
+ max-width: 1200px;
+ padding: 24px 0;
+ margin: 0 auto;
+ }
+`;
+
+export const SectionTitle = styled.h1`
+ font-size: 20px;
+ font-weight: bold;
+ color: ${({ theme }) => theme.colors.gray[800]};
+
+ @media ${({ theme }) => theme.mediaQuery.tablet} {
+ font-size: 28px;
+ }
+`;
+
+export const FlexContainer = styled.div`
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+`;
+
+export const Button = styled.button`
+ background-color: ${({ theme }) => theme.colors.blue.primary};
+ color: ${({ theme }) => theme.colors.white};
+ padding: 11.5px 23px;
+ border-radius: 8px;
+ font-size: 16px;
+ font-weight: bold;
+ cursor: pointer;
+
+ &:hover {
+ background-color: ${({ theme }) => theme.colors.blue.hover};
+ }
+
+ &:focus {
+ background-color: ${({ theme }) => theme.colors.blue.focus};
+ }
+
+ &:disabled {
+ background-color: ${({ theme }) => theme.colors.gray[400]};
+ cursor: default;
+ pointer-events: none;
+ }
+`;
+
+export const StyledLink = styled(Link)`
+ background-color: ${({ theme }) => theme.colors.blue.primary};
+ color: ${({ theme }) => theme.colors.white};
+ padding: 11.5px 23px;
+ border-radius: ${(props) => (props.$pill ? "999px" : "8px")};
+ font-size: 16px;
+ font-weight: bold;
+ cursor: pointer;
+
+ &:hover {
+ background-color: ${({ theme }) => theme.colors.blue.hover};
+ }
+
+ &:focus {
+ background-color: ${({ theme }) => theme.colors.blue.focus};
+ }
+
+ &:disabled {
+ background-color: ${({ theme }) => theme.colors.gray[400]};
+ cursor: default;
+ pointer-events: none;
+ }
+`;
+
+export const LineDivider = styled.hr`
+ width: 100%;
+ border: none;
+ height: 1px;
+ background-color: var(--gray-200);
+ margin: ${(props) =>
+ props.$margin || "16px 0"};
+`;
diff --git a/src/styles/GlobalStyle.js b/src/styles/GlobalStyle.js
new file mode 100644
index 00000000..dad88e56
--- /dev/null
+++ b/src/styles/GlobalStyle.js
@@ -0,0 +1,6 @@
+import { createGlobalStyle } from "styled-components";
+
+const GlobalStyle = createGlobalStyle`
+`;
+
+export default GlobalStyle;
diff --git a/src/styles/global.css b/src/styles/global.css
index 851341a1..44f5f2ec 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1,19 +1,23 @@
/* Mobile styles */
+/* Updated color palette */
:root {
/* Gray scale */
- --gray-900: #1b1d1f;
- --gray-800: #26282b;
- --gray-600: #454c53;
- --gray-500: #72787f;
- --gray-400: #9ea4a8;
+ --gray-900: #111827;
+ --gray-800: #1F2937;
+ --gray-700: #374151;
+ --gray-600: #4b5563;
+ --gray-500: #6b7280;
+ --gray-400: #9ca3af;
--gray-200: #e5e7eb;
- --gray-100: #e8ebed;
- --gray-50: #f7f7f8;
+ --gray-100: #f3f4f6;
+ --gray-50: #f9fafb;
/* Primary color */
--blue: #3692ff;
+ --red: #f74747;
+
/* Layout dimensions */
--header-height: 70px;
}
@@ -56,7 +60,7 @@ svg {
}
body {
- color: #374151;
+ color: var(--gray-700);
word-break: keep-all;
font-family: "Pretendard", sans-serif;
}
@@ -81,8 +85,8 @@ header {
}
footer {
- background-color: #111827;
- color: #9ca3af;
+ background-color: var(--gray-900);
+ color: var(--gray-400);
font-size: 16px;
padding: 32px;
display: flex;
@@ -113,13 +117,6 @@ footer {
padding: 0 16px;
}
-h1 {
- font-size: 40px;
- font-weight: 700;
- line-height: 56px;
- letter-spacing: 0.02em;
-}
-
.button {
background-color: var(--blue);
color: #ffffff;
@@ -137,7 +134,7 @@ h1 {
}
.button:disabled {
- background-color: #9ca3af;
+ background-color: var(--gray-400);
cursor: default;
pointer-events: none;
}
diff --git a/src/styles/theme.js b/src/styles/theme.js
new file mode 100644
index 00000000..36e563d0
--- /dev/null
+++ b/src/styles/theme.js
@@ -0,0 +1,31 @@
+// Updated color palette
+const colors = {
+ gray: {
+ 900: "#111827",
+ 800: "#1F2937",
+ 700: "#374151",
+ 600: "#4b5563",
+ 500: "#6b7280",
+ 400: "#9ca3af",
+ 200: "#e5e7eb",
+ 100: "#f3f4f6",
+ 50: "#f9fafb",
+ },
+ blue: { primary: "#3692ff", hover: "#1967D6", focus: "#1251AA" },
+ red: "#f74747",
+ white: "#FFF",
+ black: "#000",
+};
+
+const mediaQuery = {
+ mobile: "screen and (max-width: 767px)",
+ tablet: "screen and (min-width: 768px)",
+ desktop: "screen and (min-width: 1280px)",
+};
+
+const theme = {
+ colors,
+ mediaQuery,
+};
+
+export default theme;
diff --git a/src/utils/dateUtils.js b/src/utils/dateUtils.js
new file mode 100644
index 00000000..a82a64dd
--- /dev/null
+++ b/src/utils/dateUtils.js
@@ -0,0 +1,40 @@
+// 날짜 관련 Util Functions
+// Using "date-fns" library
+// 참고 링크: https://date-fns.org/
+
+// 날짜 포맷팅 참고:
+// - 대문자 'M'은 month, 소문자 'm'은 minute을 뜻해요.
+// - 'MM'은 month를 두 자리 숫자로 나타낸 것, 'M'은 한자리 숫자로 나타낸 것(예: 5월을 '05'가 아닌 '5'로 출력)
+// - 대문자 'HH'는 24시 체계 (예: 14시), 소문자 'hh'는 12시 체계 (예: 2시)
+// - 소문자 'hh'를 사용해 시간을 나타낼 경우, 'a'를 추가해 AM/PM까지 함께 표기해 주세요. (예: "yyyy.MM.dd hh:mm a")
+
+import {
+ format,
+ differenceInDays,
+ differenceInHours,
+ differenceInMinutes,
+ differenceInSeconds
+} from "date-fns";
+
+export const formatUpdatedAt = dateString => {
+ const date = new Date(dateString); // 입력된 날짜 문자열을 Date 객체로 변환
+ const now = new Date(); // 현재 기준 Date 객체 생성
+
+ const diffInDays = differenceInDays(now, date); // 현재 시간과 입력된 날짜의 차이를 일(day) 단위로 계산
+ const diffInHours = differenceInHours(now, date); // 현재 시간과 입력된 날짜의 차이를 시간(hour) 단위로 계산
+ const diffInMinutes = differenceInMinutes(now, date); // 현재 시간과 입력된 날짜의 차이를 분(minute) 단위로 계산
+ const diffInSeconds = differenceInSeconds(now, date); // 현재 시간과 입력된 날짜의 차이를 초(second) 단위로 계산
+
+ if (diffInSeconds < 60) {
+ return "방금 전"; // 차이가 1분 미만인 경우 "방금 전" 형식으로 출력
+ } else if (diffInMinutes < 60) {
+ return `${diffInMinutes}분 전`; // 차이가 1시간 미만인 경우 "N분 전" 형식으로 출력
+ } else if (diffInHours < 24) {
+ return `${diffInHours}시간 전`; // 차이가 1일 미만인 경우 "N시간 전" 형식으로 출력
+ } else if (diffInDays < 7) {
+ return `${diffInDays}일 전`; // 차이가 7일 이내인 경우 "N일 전" 형식으로 출력
+ } else {
+ // 차이가 7일 이상인 경우 포맷팅된 날짜 출력
+ return format(date, "yyyy.MM.dd hh:mm a");
+ }
+};
베스트 상품
+ <> +
+
- )
+
+ );
}
-export default BestItemsSection
+export default BestItemsSection;
diff --git a/src/pages/MarketPage/components/ItemCard.jsx b/src/pages/MarketPage/components/ItemCard.jsx
index 226c06ba..dbda7efe 100644
--- a/src/pages/MarketPage/components/ItemCard.jsx
+++ b/src/pages/MarketPage/components/ItemCard.jsx
@@ -1,10 +1,15 @@
import React from "react";
import { ReactComponent as HeartIcon } from "../../../assets/images/icons/ic_heart.svg";
+import { Link } from "react-router-dom";
function ItemCard({ item }) {
return (
- 베스트 상품
-
- {itemList?.map(item => (
-
-
+ {itemList?.map((item) => (
+
- 
+
+
- {item.name}
{item.price.toLocaleString()}원
@@ -13,7 +18,7 @@ function ItemCard({ item }) { {item.favoriteCount}