+
+ {/* React Router v6๋ถํฐ๋ path="/" ๋์ ๊ฐ๋จํ๊ฒ `index`๋ผ๊ณ ํ๊ธฐํ๋ฉด ๋ผ์ */}
+
- ;
-
+
+
+ 
+
+
+
+
+
+
+ ๋ก๊ทธ์ธ
+
+
+
+
+ {isDropdownVisible && (
+
+ );
+}
+export default DropdownMenu;
diff --git a/src/components/UI/ImageUpload.jsx b/src/components/UI/ImageUpload.jsx
new file mode 100644
index 000000000..4bf12e1c8
--- /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[1]};
+ color: ${({ theme }) => theme.colors.gray[0]};
+ 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[2]};
+ }
+
+ ${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 (
+
+
+ )}
+ {
+ 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 000000000..5b62734b4
--- /dev/null
+++ b/src/components/UI/InputItem.jsx
@@ -0,0 +1,78 @@
+import React from "react";
+import styled, { css } from "styled-components";
+
+// input๊ณผ textarea์ ์คํ์ผ์ด ๋๋ถ๋ถ ์ค๋ณต๋๊ธฐ ๋๋ฌธ์ styled-components์ css ํฌํผ ํจ์๋ฅผ ์ฌ์ฉํด ๊ณตํต ์คํ์ผ์ ์ ์ํ์ด์.
+// `${}`๋ก ์ ์๋ ์คํ์ผ์ ์ฝ์
ํ๋ฉด ์ฌ๋ฌ styled component ๋ด์์ ์ฝ๋๋ฅผ ์ฌ์ฌ์ฉํ ์ ์์ด์.
+const inputStyle = css`
+ padding: 16px 24px;
+ background-color: ${({ theme }) => theme.colors.gray[1]};
+ color: ${({ theme }) => theme.colors.black};
+ border: none;
+ border-radius: 12px;
+ font-size: 16px;
+ line-height: 24px;
+ width: 100%;
+
+ &::placeholder {
+ color: ${({ theme }) => theme.colors.gray[0]};
+ }
+
+ &:focus {
+ outline-color: ${({ theme }) => theme.colors.blue[0]};
+ }
+`;
+
+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; // ๋์์ธ์ ๋ง์ถฐ textarea ์์ญ์ ๊ธฐ๋ณธ ๋์ด๋ฅผ ์ค์ ํด ์ฃผ์ธ์
+ resize: none; // ์ฐ์ธก ํ๋จ ์ฝ๋์ textarea ์์ญ ํฌ๊ธฐ ์กฐ์ ๊ธฐ๋ฅ์ ์์ ์ค๋๋ค
+`;
+
+function InputItem({
+ id,
+ label,
+ value,
+ onChange,
+ placeholder,
+ onKeyDown,
+ isTextArea,
+}) {
+ return (
+
+ {label && }
+ {isTextArea ? (
+
+ ) : (
+
+ );
+}
+
+export default InputItem;
diff --git a/src/components/UI/PaginationBar.css b/src/components/UI/PaginationBar.css
new file mode 100644
index 000000000..1841297a9
--- /dev/null
+++ b/src/components/UI/PaginationBar.css
@@ -0,0 +1,29 @@
+.paginationBar {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 4px;
+}
+
+.paginationButton {
+ border: 1px solid #e5e7eb;
+ border-radius: 50%;
+ width: 40px;
+ height: 40px;
+ color: #6b7280;
+ font-weight: 600;
+ font-size: 16px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.paginationButton:disabled {
+ cursor: default;
+ opacity: 0.5;
+}
+
+.paginationButton.active {
+ background-color: var(--blue);
+ color: #fff;
+}
diff --git a/src/components/UI/PaginationBar.jsx b/src/components/UI/PaginationBar.jsx
new file mode 100644
index 000000000..4116ebb40
--- /dev/null
+++ b/src/components/UI/PaginationBar.jsx
@@ -0,0 +1,53 @@
+import React from "react";
+import "./PaginationBar.css";
+import { ReactComponent as LeftArrow } from "../../assets/images/icons/arrow_left.svg";
+import { ReactComponent as RightArrow } from "../../assets/images/icons/arrow_right.svg";
+
+const PaginationBar = ({ totalPageNum, activePageNum, onPageChange }) => {
+ const maxVisiblePages = 5;
+ let startPage;
+
+ if (totalPageNum <= maxVisiblePages) {
+ startPage = 1;
+ } else {
+ startPage = Math.max(activePageNum - Math.floor(maxVisiblePages / 2), 1);
+ startPage = Math.min(startPage, totalPageNum - maxVisiblePages + 1);
+ }
+
+ const pages = Array.from(
+ { length: Math.min(maxVisiblePages, totalPageNum - startPage + 1) },
+ (_, i) => startPage + i
+ );
+
+ return (
+
+
+ {pages.map((page) => (
+
+ ))}
+
+
+ );
+};
+
+export default PaginationBar;
diff --git a/src/components/UI/TagInput.jsx b/src/components/UI/TagInput.jsx
new file mode 100644
index 000000000..09fea6eaa
--- /dev/null
+++ b/src/components/UI/TagInput.jsx
@@ -0,0 +1,83 @@
+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[2]};
+ color: ${({ theme }) => theme.colors.black};
+ 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); // DeleteButton ๋๋น ๋ฐ margin์ ์ ์ธํ ๊ณต๊ฐ
+ /* ํ๊ทธ์ ํ
์คํธ๊ฐ ๋๋ฌด ๊ธธ์ด ํ ์ค ๋ด์ ํ์ํ๊ธฐ ์ด๋ ค์ด ๊ฒฝ์ฐ ๋ง์ค์ ์ฒ๋ฆฌ */
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+`;
+
+function TagInput({ tags, onAddTag, onRemoveTag }) {
+ const [input, setInput] = useState("");
+
+ // ์ํฐ ํค ๋๋ฅด๋ฉด tags ๋ฐฐ์ด์ input ๊ฐ์ ์ถ๊ฐ
+ const onPressEnter = (event) => {
+ // ์ฌ๋ฌ ์๋ชจ๋ฅผ ๊ฒฐํฉํด ํ๋์ ๊ธ์๋ฅผ ๋ง๋๋ ์์์ ์ธ์ด๊ถ์์๋ IME(์
๋ ฅ ๋ฉ์๋ ์๋ํฐ)๋ฅผ ํตํด ๋ธ๋ผ์ฐ์ ์ ๊ธ์๋ฅผ ์
๋ ฅํด์.
+ // ์ฌ์ฉ์๊ฐ ๊ธ์๋ฅผ ์์ ํ ์กฐํฉํ๊ธฐ ์ ์๋ isComposing์ ๊ฐ์ด true๋ก ์ค์ ๋ฉ๋๋ค.
+ // ํ๊ธ ์
๋ ฅ ์์ ๋ง์ง๋ง ๊ธ์๊ฐ ํ์ด๋ผ์ดํธ๋๋ ํ์์ ๋ณด์ ์ ์์ ๊ฑฐ์์. ์ด๊ฒ ๋ฐ๋ก isComposing์ด true์ธ ์ํ๋ก, ์์ง ์
๋ ฅ์ด ํ์ ๋์ง ์์์์ ์๊ฐ์ ์ผ๋ก ๋ํ๋ด๋ ๊ฑฐ์์.
+ // ๋ง์ฝ ๋ง์ง๋ง ์์ ์ด ํ๊ทธ ๋ฐฐ์ด์ ์ค๋ณต์ผ๋ก ์ถ๊ฐ๋๋ ํ์์ด ์์๋ค๋ฉด ๋ฐ๋ก ์ด ์ด์ ๋๋ฌธ์ด์์ ๊ฑฐ์์.
+ // ์ด ์ฝ๋๋ฅผ ์ถ๊ฐํ๋ฉด ์ฌ์ฉ์๊ฐ ์์ง ์
๋ ฅ์ ์๋ฃํ์ง ์์์ ๋ ํจ์์ ๋๋จธ์ง ๋ถ๋ถ์ด ์คํ๋์ง ์๋๋ก ํ์ฌ, ์์ฑ๋์ง ์์ ์
๋ ฅ์ด ํ๊ทธ๋ก ์๋ชป ์ถ๊ฐ๋๋ ๊ฒ์ ๋ฐฉ์งํ ์ ์์ด์.
+ if (event.nativeEvent.isComposing) return;
+
+ const inputString = input.trim();
+ if (event.key === "Enter" && inputString) {
+ event.preventDefault(); // ์ํฐ ํค ๋๋ ์ ๋ form์ด ์ ์ถ๋์ง ์๋๋ก ๊ผญ ์ถ๊ฐํด ์ฃผ์ธ์!
+ onAddTag(inputString);
+ setInput(""); // ํ๊ทธ ์ถ๊ฐ ํ input field ์ด๊ธฐํ
+ }
+ };
+
+ return (
+
+ setInput(e.target.value)}
+ onKeyDown={onPressEnter}
+ placeholder="ํ๊ทธ๋ฅผ ์
๋ ฅํด ์ฃผ์ธ์"
+ />
+
+ {/* tags ๋ฐฐ์ด์ด ๋น์ด์์ผ๋ฉด TagButtonsSection์ ๋ ๋๋งํ์ง ์์ */}
+ {tags.length > 0 && (
+
+ {tags.map((tag) => (
+
+ {tag}
+
+ onRemoveTag(tag)}
+ label={`${tag} ํ๊ทธ`}
+ />
+
+ ))}
+
+ )}
+
+ );
+}
+
+export default TagInput;
diff --git a/src/hooks/useInquiry.jsx b/src/hooks/useInquiry.jsx
new file mode 100644
index 000000000..397022e53
--- /dev/null
+++ b/src/hooks/useInquiry.jsx
@@ -0,0 +1,28 @@
+import { useState, useEffect } from "react";
+import { getInquery } from "../services/api";
+
+const useInquery = (productId) => {
+ const [inquiries, setInquiries] = useState([]);
+ const [isLoading, setIsLoading] = useState(true);
+ const [error, setError] = useState(null);
+
+ useEffect(() => {
+ const fetchInquiries = async () => {
+ try {
+ setIsLoading(true);
+ const fetchedInquiries = await getInquery(productId);
+ setInquiries(fetchedInquiries.list);
+ } catch (err) {
+ setError(err);
+ } finally {
+ setIsLoading(false);
+ }
+ };
+
+ fetchInquiries();
+ }, [productId]);
+
+ return { inquiries, isLoading, error };
+};
+
+export default useInquery;
diff --git a/src/hooks/useProductId.jsx b/src/hooks/useProductId.jsx
new file mode 100644
index 000000000..6cd11e8e3
--- /dev/null
+++ b/src/hooks/useProductId.jsx
@@ -0,0 +1,38 @@
+import { useState, useEffect } from "react";
+import { getProductById } from "../services/api";
+
+const INITIAL_PRODUCT = {
+ favoriteCount: 0,
+ images: "",
+ tags: [],
+ price: 0,
+ description: "",
+ name: "",
+ isFavorite: false,
+};
+
+const useProductId = (productId) => {
+ const [product, setProduct] = useState(INITIAL_PRODUCT);
+ const [isLoading, setIsLoading] = useState(true);
+ const [error, setError] = useState(null);
+
+ useEffect(() => {
+ const fetchProduct = async () => {
+ try {
+ setIsLoading(true);
+ const fetchedProduct = await getProductById(productId);
+ setProduct(fetchedProduct);
+ } catch (err) {
+ setError(err);
+ } finally {
+ setIsLoading(false);
+ }
+ };
+
+ fetchProduct();
+ }, [productId]);
+
+ return { product, isLoading, error };
+};
+
+export default useProductId;
diff --git a/src/index.js b/src/index.js
index 4f2f2786e..0652386c4 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,7 +1,20 @@
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
-import "./index.css";
+import "./styles/global.css"; // index.js์์ global stylesheet์ importํ๋ฉด ์ ์ญ์ ์ผ๋ก ์คํ์ผ์ด ์ ์ฉ๋ผ์
+import { ThemeProvider } from "styled-components";
+import theme from "./styles/theme";
+import GlobalStyle from "./styles/GlobalStyle";
const root = ReactDOM.createRoot(document.getElementById("root"));
-root.render(CommunityFeedPage
;
+}
+
+export default CommunityFeedPage;
diff --git a/src/pages/HomePage/HomePage.css b/src/pages/HomePage/HomePage.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/pages/HomePage/HomePage.jsx b/src/pages/HomePage/HomePage.jsx
new file mode 100644
index 000000000..26705c224
--- /dev/null
+++ b/src/pages/HomePage/HomePage.jsx
@@ -0,0 +1,7 @@
+import React from "react";
+
+function HomePage() {
+ return HomePage
;
+}
+
+export default HomePage;
diff --git a/src/pages/Item/ItemsPage.css b/src/pages/Item/ItemsPage.css
new file mode 100644
index 000000000..939915e77
--- /dev/null
+++ b/src/pages/Item/ItemsPage.css
@@ -0,0 +1,113 @@
+.product-info-wrap {
+ margin: 25px auto 40px;
+ width: 100%;
+ max-width: 1200px;
+ padding: 0 24px;
+ display: flex;
+ flex-wrap: wrap;
+ gap: 24px;
+ .product-img {
+ width: 486px;
+ max-width: 50%;
+ aspect-ratio: 1/1;
+ border-radius: 1rem;
+ overflow: hidden;
+
+ @media (max-width: 768px) {
+ width: 100%;
+ max-width: 100%;
+ }
+ }
+ .product-info {
+ flex: 1;
+ .product-info-header {
+ font-weight: 500;
+ color: var(--gray800);
+ border-bottom: 1px solid var(--gray200);
+ margin-bottom: 16px;
+ .title {
+ font-size: 24px;
+ margin-bottom: 16px;
+ }
+ .price {
+ font-size: 40px;
+ margin-bottom: 16px;
+ }
+ }
+ .product-info-body {
+ margin-bottom: 16px;
+ label {
+ display: block;
+ font-size: 14px;
+ color: var(--gray600);
+ padding-bottom: 8px;
+ }
+ p {
+ font-size: 16px;
+ line-height: 1.5;
+ font-weight: 300;
+ margin-bottom: 24px;
+ }
+ }
+ }
+}
+.inquiry-wrap {
+ margin: 25px auto 40px;
+ width: 100%;
+ max-width: 1200px;
+ padding: 0 24px;
+ display: flex;
+ flex-direction: column;
+ button.submit {
+ width: 88px;
+ margin-top: 16px;
+ margin-left: auto;
+ }
+ .inquiry-list {
+ ul {
+ li {
+ border-bottom: 1px solid var(--gray200);
+ margin-bottom: 16px;
+ .comment {
+ padding: 0.5em 0;
+ }
+ }
+ .profile-img {
+ img {
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ }
+ }
+ .profile-info {
+ display: flex;
+ gap: 8px;
+ padding: 1.5em 0;
+ }
+ .profile-id {
+ font-size: 14px;
+ color: var(--gray600);
+ line-height: 1.4;
+ }
+ .time-log {
+ font-size: 12px;
+ color: var(--gray400);
+ line-height: 1.4;
+ }
+ }
+ .inquiry-none {
+ text-align: center;
+ img {
+ width: 200px;
+ }
+ p {
+ color: var(--gray500);
+ }
+ }
+ .back {
+ font-size: 18px;
+ width: 240px;
+ margin: 40px auto 150px;
+ }
+ }
+}
diff --git a/src/pages/Item/ItemsPage.jsx b/src/pages/Item/ItemsPage.jsx
new file mode 100644
index 000000000..f39b1ea9f
--- /dev/null
+++ b/src/pages/Item/ItemsPage.jsx
@@ -0,0 +1,45 @@
+import { useParams } from "react-router-dom";
+import { useState } from "react";
+import "./ItemsPage.css";
+
+import Header from "../../components/Layout/Header";
+
+import useProductId from "../../hooks/useProductId";
+import useInquery from "../../hooks/useInquiry";
+
+import ItemDetails from "./components/ItemDetails";
+import InqueryForm from "./components/InqueryForm";
+import InqueryList from "./components/InqueryList";
+
+function ItemsPage() {
+ const { productId } = useParams();
+ const { product } = useProductId(productId);
+ const { inquiries } = useInquery(productId);
+
+ const [newComment, setNewComment] = useState("");
+
+ const handleSubmit = () => {
+ alert("๋ฌธ์ํ๊ธฐ๊ฐ ๋ฑ๋ก๋์์ต๋๋ค.");
+ setNewComment("");
+ };
+
+ return (
+ <>
+
+ 
+
+ );
+
+ return (
+ ์์ง ๋ฌธ์๊ฐ ์์ต๋๋ค.
+
+ {inquiries.length === 0 ? (
+ InqueryNone
+ ) : (
+
+ );
+}
+
+export default InquiryList;
diff --git a/src/pages/Item/components/ItemDetails.jsx b/src/pages/Item/components/ItemDetails.jsx
new file mode 100644
index 000000000..98964fb6b
--- /dev/null
+++ b/src/pages/Item/components/ItemDetails.jsx
@@ -0,0 +1,43 @@
+import React, { useState } from "react";
+
+function ItemDetails({ product }) {
+ const { favoriteCount, images, tags, price, description, name } = product;
+ const [isFavorite, setIsFavorite] = useState(false);
+
+ const toggleFavorite = () => {
+ setIsFavorite((prevState) => !prevState);
+ };
+
+ return (
+ -
+ {inquiries.map((inquiry) => (
+
-
+ {inquiry.content}+++++
+
++{inquiry.writer.nickname}++ {timeAgo(inquiry.createdAt)} +{" "} + {/* ์๊ฐ ๋ณํ ํจ์ ์ฌ์ฉ */} +
+ ))}
+
+
+
+
+ {name}
+
+
+ {price.toLocaleString()}์
+
+
+
+
+ {description}
+ +
+ {tags.map((tag, index) => (
+ {tag}
+ ))}
+
+ LoginPage
;
+}
+
+export default LoginPage;
diff --git a/src/pages/MarketPage/MarketPage.css b/src/pages/MarketPage/MarketPage.css
new file mode 100644
index 000000000..1a1dcbc8d
--- /dev/null
+++ b/src/pages/MarketPage/MarketPage.css
@@ -0,0 +1,134 @@
+.sectionTitle {
+ color: #111827;
+ font-weight: bold;
+ font-size: 20px;
+ line-height: normal;
+}
+
+.itemCard {
+ color: #1f2937;
+ overflow: hidden;
+ cursor: pointer;
+}
+
+.itemCardThumbnail {
+ width: 100%;
+ height: auto;
+ object-fit: cover;
+ border-radius: 16px;
+ overflow: hidden;
+ aspect-ratio: 1; /* ์ ์ฌ๊ฐํ์ผ๋ก ๋ง๋ค์ด ์ค */
+ margin-bottom: 16px;
+}
+
+.itemSummary {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ flex-grow: 1;
+}
+
+.itemName {
+ font-size: 16px;
+ font-weight: 400;
+ /* ๋ชจ๋ ์ํ ์นด๋๊ฐ ๋์ผํ ํฌ๊ธฐ์ผ ์ ์๋๋ก ์ํ๋ช
์ ํ ์ค๋ก ์ ํ */
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.itemPrice {
+ font-size: 16px;
+ font-weight: bold;
+}
+
+.favoriteCount {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ color: #4b5563;
+ font-size: 12px;
+}
+
+.bestItemsContainer {
+ padding-top: 17px;
+ padding-bottom: 24px;
+}
+
+.allItemsCardSection {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 32px 8px;
+}
+
+.allItemsSectionHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.allItemsSectionHeader:first-child {
+ padding-bottom: 8px;
+}
+
+.allItemsSectionHeader:nth-child(2) {
+ padding-bottom: 16px;
+}
+
+.searchBarWrapper {
+ display: flex;
+ background-color: #f3f4f6;
+ border-radius: 12px;
+ padding: 9px 16px;
+ flex: 1;
+ align-items: center;
+}
+
+.searchBarInput {
+ border: none;
+ flex: 1;
+ background-color: inherit;
+ margin-left: 4px;
+}
+
+.searchBarInput::placeholder {
+ color: #9ca3af;
+ font-size: 16px;
+}
+
+.searchBarInput:focus {
+ outline: none;
+}
+
+.paginationBarWrapper {
+ padding-top: 40px;
+ padding-bottom: 80px;
+}
+
+@media (min-width: 768px) {
+ .bestItemsContainer {
+ margin-bottom: 40px;
+ }
+
+ .bestItemsCardSection {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 24px;
+ }
+
+ .allItemsCardSection {
+ grid-template-columns: repeat(3, 1fr);
+ gap: 40px 16px;
+ }
+}
+
+@media (min-width: 1280px) {
+ .bestItemsCardSection {
+ grid-template-columns: repeat(4, 1fr);
+ }
+
+ .allItemsCardSection {
+ grid-template-columns: repeat(5, 1fr);
+ gap: 40px 24px;
+ }
+}
diff --git a/src/pages/MarketPage/MarketPage.jsx b/src/pages/MarketPage/MarketPage.jsx
new file mode 100644
index 000000000..dd78d9065
--- /dev/null
+++ b/src/pages/MarketPage/MarketPage.jsx
@@ -0,0 +1,15 @@
+import React from "react";
+import BestItemsSection from "./components/BestItemsSection";
+import AllItemsSection from "./components/AllItemsSection";
+import "./MarketPage.css";
+
+function MarketPage() {
+ return (
+
+
+ );
+}
+
+export default MarketPage;
diff --git a/src/pages/MarketPage/components/AllItemsSection.jsx b/src/pages/MarketPage/components/AllItemsSection.jsx
new file mode 100644
index 000000000..31a794020
--- /dev/null
+++ b/src/pages/MarketPage/components/AllItemsSection.jsx
@@ -0,0 +1,96 @@
+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";
+
+const getPageSize = () => {
+ const width = window.innerWidth;
+ if (width < 768) {
+ // Mobile viewport
+ return 4;
+ } else if (width < 1280) {
+ // Tablet viewport
+ return 6;
+ } else {
+ // Desktop viewport
+ return 10;
+ }
+};
+
+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 fetchSortedData = async ({ orderBy, page, pageSize }) => {
+ const products = await getProducts({ orderBy, page, pageSize });
+ setItemList(products.list);
+ setTotalPageNum(Math.ceil(products.totalCount / pageSize));
+ };
+
+ const handleSortSelection = (sortOption) => {
+ setOrderBy(sortOption);
+ };
+
+ useEffect(() => {
+ const handleResize = () => {
+ setPageSize(getPageSize());
+ };
+
+ // ํ๋ฉด ํฌ๊ธฐ ๋ณ๊ฒฝํ ๋๋ง๋ค pageSize๋ฅผ ๋ค์ ๊ณ์ฐํด ๋ฃ์
+ window.addEventListener("resize", handleResize);
+ fetchSortedData({ orderBy, page, pageSize });
+
+ // Cleanup function
+ return () => {
+ window.removeEventListener("resize", handleResize);
+ };
+ }, [orderBy, page, pageSize]);
+
+ const onPageChange = (pageNumber) => {
+ setPage(pageNumber);
+ };
+
+ return (
+
+
+ );
+}
+
+export default AllItemsSection;
diff --git a/src/pages/MarketPage/components/BestItemsSection.jsx b/src/pages/MarketPage/components/BestItemsSection.jsx
new file mode 100644
index 000000000..a2072fbb9
--- /dev/null
+++ b/src/pages/MarketPage/components/BestItemsSection.jsx
@@ -0,0 +1,56 @@
+import React, { useEffect, useState } from "react";
+import ItemCard from "./ItemCard";
+import { getProducts } from "../../../api/itemApi";
+
+const getPageSize = () => {
+ const width = window.innerWidth;
+ if (width < 768) {
+ // Mobile viewport
+ return 1;
+ } else if (width < 1280) {
+ // Tablet viewport
+ return 2;
+ } else {
+ // Desktop viewport
+ return 4;
+ }
+};
+
+function BestItemsSection() {
+ const [itemList, setItemList] = useState([]);
+ const [pageSize, setPageSize] = useState(getPageSize());
+
+ const fetchSortedData = async ({ orderBy, pageSize }) => {
+ const products = await getProducts({ orderBy, pageSize });
+ setItemList(products.list);
+ };
+
+ useEffect(() => {
+ const handleResize = () => {
+ setPageSize(getPageSize());
+ };
+
+ // ํ๋ฉด ํฌ๊ธฐ ๋ณ๊ฒฝํ ๋๋ง๋ค pageSize๋ฅผ ๋ค์ ๊ณ์ฐํด ๋ฃ์
+ window.addEventListener("resize", handleResize);
+ fetchSortedData({ orderBy: "favorite", pageSize });
+
+ // Cleanup function
+ return () => {
+ window.removeEventListener("resize", handleResize);
+ };
+ }, [pageSize]);
+
+ return (
+
+
+
+ ํ๋งค ์ค์ธ ์ํ
+ + ์ํ ๋ฑ๋กํ๊ธฐ + +
+
+
+
+
+
+ {itemList?.map((item) => (
+
+
+
+
+
+
+ );
+}
+
+export default BestItemsSection;
diff --git a/src/pages/MarketPage/components/ItemCard.jsx b/src/pages/MarketPage/components/ItemCard.jsx
new file mode 100644
index 000000000..226c06baa
--- /dev/null
+++ b/src/pages/MarketPage/components/ItemCard.jsx
@@ -0,0 +1,20 @@
+import React from "react";
+import { ReactComponent as HeartIcon } from "../../../assets/images/icons/ic_heart.svg";
+
+function ItemCard({ item }) {
+ return (
+ ๋ฒ ์คํธ ์ํ
+ +
+ {itemList?.map((item) => (
+
+
+ 
+
+ );
+}
+
+export default ItemCard;
diff --git a/src/services/api.jsx b/src/services/api.jsx
new file mode 100644
index 000000000..be1b401f5
--- /dev/null
+++ b/src/services/api.jsx
@@ -0,0 +1,50 @@
+export async function getProducts(params = {}) {
+ const query = new URLSearchParams(params).toString();
+
+ try {
+ const response = await fetch(
+ `https://panda-market-api.vercel.app/products?${query}`
+ );
+ if (!response.ok) {
+ throw new Error(`HTTP error: ${response.status}`);
+ }
+ const body = await response.json();
+ return body;
+ } catch (error) {
+ console.error("Failed to fetch products:", error);
+ throw error;
+ }
+}
+
+export async function getProductById(productId) {
+ try {
+ const response = await fetch(
+ `https://panda-market-api.vercel.app/products/${productId}`
+ );
+ if (!response.ok) {
+ throw new Error(`HTTP error: ${response.status}`);
+ }
+ const body = await response.json();
+ return body;
+ } catch (error) {
+ console.error("Failed to fetch product:", error);
+ throw error;
+ }
+}
+
+export async function getInquery(productId) {
+ try {
+ const response = await fetch(
+ `https://panda-market-api.vercel.app/products/${productId}/comments?limit=100`
+ );
+ if (!response.ok) {
+ const errorBody = await response.json();
+ throw new Error(`HTTP error: ${response.status}, ${errorBody.message}`);
+ }
+ const body = await response.json();
+ return body;
+ } catch (error) {
+ console.error("Failed to fetch comments:", error);
+ throw error;
+ }
+}
diff --git a/src/styles/CommonStyles.js b/src/styles/CommonStyles.js
new file mode 100644
index 000000000..da7807691
--- /dev/null
+++ b/src/styles/CommonStyles.js
@@ -0,0 +1,55 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+ 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.black};
+
+ @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[0]};
+ 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[1]};
+ }
+
+ &:focus {
+ background-color: ${({ theme }) => theme.colors.blue[2]};
+ }
+
+ &:disabled {
+ background-color: ${({ theme }) => theme.colors.gray[0]};
+ cursor: default;
+ pointer-events: none;
+ }
+`;
diff --git a/src/styles/GlobalStyle.js b/src/styles/GlobalStyle.js
new file mode 100644
index 000000000..dad88e564
--- /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
new file mode 100644
index 000000000..ee71e72ab
--- /dev/null
+++ b/src/styles/global.css
@@ -0,0 +1,199 @@
+/* Mobile styles */
+
+:root {
+ /* Gray scale */
+ --gray-900: #1b1d1f;
+ --gray-800: #26282b;
+ --gray-600: #454c53;
+ --gray-500: #72787f;
+ --gray-400: #9ea4a8;
+ --gray-200: #e5e7eb;
+ --gray-100: #e8ebed;
+ --gray-50: #f7f7f8;
+
+ /* Primary color */
+ --blue: #3692ff;
+
+ /* Layout dimensions */
+ --header-height: 70px;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+a {
+ text-decoration: none;
+ color: inherit;
+}
+
+button,
+input,
+textarea,
+select {
+ font-family: inherit;
+ font-size: inherit;
+ line-height: inherit;
+ color: inherit;
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+}
+
+button {
+ background: none;
+ border: none;
+ outline: none;
+ box-shadow: none;
+ cursor: pointer;
+}
+
+img,
+svg {
+ vertical-align: bottom;
+}
+
+body {
+ color: #374151;
+ word-break: keep-all;
+ font-family: "Pretendard", sans-serif;
+}
+
+header {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: var(--header-height);
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 0 16px;
+ background-color: #ffffff;
+ border-bottom: 1px solid #dfdfdf;
+ z-index: 999;
+}
+
+.withHeader {
+ margin-top: var(--header-height);
+}
+
+footer {
+ background-color: #111827;
+ color: #9ca3af;
+ font-size: 16px;
+ padding: 32px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ flex-wrap: wrap;
+ gap: 60px;
+}
+
+#copyright {
+ order: 3;
+ flex-basis: 100%;
+}
+
+#footerMenu {
+ display: flex;
+ gap: 30px;
+ color: var(--gray-200);
+}
+
+#socialMedia {
+ display: flex;
+ gap: 12px;
+}
+
+.wrapper {
+ width: 100%;
+ padding: 0 16px;
+}
+
+.button {
+ background-color: var(--blue);
+ color: #ffffff;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.button:hover {
+ background-color: #1967d6;
+}
+
+.button:focus {
+ background-color: #1251aa;
+}
+
+.button:disabled {
+ background-color: #9ca3af;
+ cursor: default;
+ pointer-events: none;
+}
+
+.pill-button {
+ font-size: 16px;
+ font-weight: 600;
+ border-radius: 999px;
+ padding: 14.5px 33.5px;
+}
+
+.full-width {
+ width: 100%;
+}
+
+.break-on-desktop {
+ display: none;
+}
+
+/* Tablet styles */
+
+@media (min-width: 768px) {
+ header {
+ padding: 0 24px;
+ }
+
+ .wrapper {
+ padding: 0 24px;
+ }
+
+ .pill-button {
+ font-size: 20px;
+ font-weight: 700;
+ padding: 16px 126px;
+ }
+
+ footer {
+ padding: 32px 104px 108px 104px;
+ }
+
+ #copyright {
+ flex-basis: auto;
+ order: 0;
+ }
+}
+
+/* Desktop styles */
+
+@media (min-width: 1280px) {
+ header {
+ padding: 0 200px;
+ }
+
+ .wrapper {
+ max-width: 1200px;
+ margin: 0 auto;
+ }
+
+ .break-on-desktop {
+ display: inline;
+ }
+
+ footer {
+ padding: 32px 200px 108px 200px;
+ }
+}
diff --git a/src/styles/theme.js b/src/styles/theme.js
new file mode 100644
index 000000000..69d8bd895
--- /dev/null
+++ b/src/styles/theme.js
@@ -0,0 +1,19 @@
+const colors = {
+ blue: ["#3692FF", "#1967D6", "#1251AA"],
+ white: "#FFF",
+ black: "#1F2937",
+ gray: ["#9CA3AF", "#F3F4F6", "#F9FAFB"],
+};
+
+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/timeAgo.jsx b/src/utils/timeAgo.jsx
new file mode 100644
index 000000000..37209dff7
--- /dev/null
+++ b/src/utils/timeAgo.jsx
@@ -0,0 +1,24 @@
+function timeAgo(date) {
+ const now = new Date();
+ const past = new Date(date);
+ const diffInSeconds = Math.floor((now - past) / 1000);
+
+ const units = [
+ { name: "๋
", seconds: 60 * 60 * 24 * 365 },
+ { name: "๊ฐ์", seconds: 60 * 60 * 24 * 30 },
+ { name: "์ผ", seconds: 60 * 60 * 24 },
+ { name: "์๊ฐ", seconds: 60 * 60 },
+ { name: "๋ถ", seconds: 60 },
+ { name: "์ด", seconds: 1 },
+ ];
+
+ for (const unit of units) {
+ const value = Math.floor(diffInSeconds / unit.seconds);
+ if (value > 0) {
+ return `${value}${unit.name} ์ `;
+ }
+ }
+ return "๋ฐฉ๊ธ ์ ";
+}
+
+export default timeAgo;
+
+ {item.name}
+{item.price.toLocaleString()}์
+
+
+