+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+ 
+ + Hot item +
+
+ 가장 HOT한 중고거래 물품을
+ 판다 마켓에서 확인해 보세요
+
+ + Search +
+
+ 구매하고 싶은 물품은 검색해서
+ 쉽게 찾아보세요
+
+ + Register +
+
+ 어떤 물건이든 판매하고 싶은 상품을
+ 쉽게 등록하세요
+
+ 
${product.favoriteCount}`;
+
+ productItem.appendChild(productImage);
+ productItem.appendChild(productName);
+ productItem.appendChild(productPrice);
+ productItem.appendChild(likeButton);
+
+ productListElement.appendChild(productItem);
+ });
+}
diff --git a/market/ArticleService.js b/market/ArticleService.js
new file mode 100644
index 0000000..b09d399
--- /dev/null
+++ b/market/ArticleService.js
@@ -0,0 +1,87 @@
+const API_URL_ARTICLE = "https://panda-market-api.vercel.app/articles";
+
+export const getArticles = () => {
+ return fetch(API_URL_ARTICLE)
+ .then((response) => {
+ return response.json().then((data) => {
+ console.log("상태코드:", response.status, "Data:", data);
+ return data;
+ });
+ })
+ .catch((error) => {
+ console.error("Error fetching articles:", error);
+ });
+};
+
+export const getArticleList = async ({ page = 1, pageSize = 10, orderBy = "recent" } = {}) => {
+ let query = "";
+ if (page) query += `page=${page}&`;
+ if (pageSize) query += `pageSize=${pageSize}&`;
+ if (orderBy) query += `orderBy=${orderBy}&`;
+ try {
+ const response = await axios.get(`${API_URL_ARTICLE}?${query}`);
+ const data = response.data;
+ console.log("상태코드:", response.status, "Data:", data);
+ return data;
+ } catch (err) {
+ console.error("Error fetching articles:", err);
+ }
+};
+
+export const getArticle = async (articleId) => {
+ try {
+ const response = await fetch(`${API_URL_ARTICLE}/${articleId}`);
+ const data = await response.json();
+ console.log("상태코드:", response.status, "Data:", data);
+ return data;
+ } catch (err) {
+ console.error("Error fetching article:", err);
+ }
+};
+
+export const createArticle = async (article) => {
+ try {
+ const response = await fetch(API_URL_ARTICLE, {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify(article),
+ });
+ const data = await response.json();
+ console.log("상태코드:", response.status, "Data:", data);
+ return data;
+ } catch (err) {
+ console.error("Error creating article:", err);
+ }
+};
+
+export const patchArticle = async (articleId, article) => {
+ try {
+ const response = await fetch(`${API_URL_ARTICLE}/${articleId}`, {
+ method: "PATCH",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify(article),
+ });
+ const data = await response.json();
+ console.log("상태코드:", response.status, "Data:", data);
+ return data;
+ } catch (err) {
+ console.error("Error updating article:", err);
+ }
+};
+
+export const deleteArticle = async (articleId) => {
+ try {
+ const response = await fetch(`${API_URL_ARTICLE}/${articleId}`, {
+ method: "DELETE",
+ });
+ const data = await response.json();
+ console.log("상태코드:", response.status, "Data:", data);
+ return data;
+ } catch (err) {
+ console.error("Error deleting article:", err);
+ }
+};
diff --git a/market/ProductService.js b/market/ProductService.js
new file mode 100644
index 0000000..1d527ef
--- /dev/null
+++ b/market/ProductService.js
@@ -0,0 +1,83 @@
+const API_URL_PRODUCT = "https://panda-market-api.vercel.app/products";
+export const getProducts = async () => {
+ try {
+ const response = await fetch(API_URL_PRODUCT);
+ const data = await response.json();
+ console.log("상태코드:", response.status, "Data:", data);
+ return data;
+ } catch (err) {
+ console.error("Error!");
+ }
+
+ return data;
+};
+
+export const getProductList = async ({ page = 1, pageSize = 10, orderBy = "recent" } = {}) => {
+ let query = "";
+ if (page) query += `page=${page}&`;
+ if (pageSize) query += `pageSize=${pageSize}&`;
+ if (orderBy) query += `orderBy=${orderBy}`;
+ try {
+ const response = await axios.get(`${API_URL_PRODUCT}?${query}`);
+ console.log("상태코드:", response.status, "Data:", response.data);
+ return response.data;
+ } catch (err) {
+ console.error("Error!", err.message);
+ }
+};
+
+export const getProduct = async (productId) => {
+ try {
+ const response = await axios.get(`${API_URL_PRODUCT}/${productId}`);
+ console.log("상태코드:", response.status, "Data:", response.data);
+ return response.data;
+ } catch (err) {
+ if (err.response) {
+ console.error("상태코드:", err.response.status, "Data:", err.response.data);
+ } else {
+ console.error("Error!", err.message);
+ }
+ }
+};
+
+export const createProduct = async (product) => {
+ try {
+ const response = await axios.post(API_URL_PRODUCT, product);
+ console.log("상태코드:", response.status, "Data:", response.data);
+ return response.data;
+ } catch (err) {
+ if (err.response) {
+ console.error("상태코드:", err.response.status, "Data:", err.response.data);
+ } else {
+ console.error("Error!", err.message);
+ }
+ }
+};
+
+export const patchProduct = async (productId, product) => {
+ try {
+ const response = await axios.patch(`${API_URL_PRODUCT}/${productId}`, product);
+ console.log("상태코드:", response.status, "Data:", response.data);
+ return response.data;
+ } catch (err) {
+ if (err.response) {
+ console.error("상태코드:", err.response.status, "Data:", err.response.data);
+ } else {
+ console.error("Error!", err.message);
+ }
+ }
+};
+
+export const deleteProduct = async (productId) => {
+ try {
+ const response = await axios.delete(`${API_URL_PRODUCT}/${productId}`);
+ console.log("상태코드:", response.status, "Data:", response.data);
+ return response.data;
+ } catch (err) {
+ if (err.response) {
+ console.error("상태코드:", err.response.status, "Data:", err.response.data);
+ } else {
+ console.error("Error!", err.message);
+ }
+ }
+};
diff --git a/market/product.css b/market/product.css
new file mode 100644
index 0000000..4eed9d7
--- /dev/null
+++ b/market/product.css
@@ -0,0 +1,99 @@
+.products {
+ display: flex;
+ justify-content: center;
+ padding: 24px 0 113px 0;
+ min-height: 100vh;
+}
+
+.products__inner {
+ width: 1200px;
+ display: flex;
+ flex-direction: column;
+ gap: 40px;
+}
+
+.products__name {
+ color: var(--gray800);
+ font-family: Pretendard;
+ font-size: 14px;
+ font-weight: 500;
+ text-overflow: ellipsis;
+}
+
+.products__price {
+ color: var(--gray800);
+ font-family: Pretendard;
+ font-size: 16px;
+ font-weight: 700;
+}
+
+.products__list {
+ display: grid;
+}
+
+.best-products {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+}
+
+.best-products__list {
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ gap: 24px;
+}
+
+.all-products__list {
+ display: grid;
+ grid-template-columns: repeat(5, 1fr);
+ gap: 24px;
+ row-gap: 40px;
+}
+
+.product__item {
+ display: flex;
+ flex-direction: column;
+ gap: 6px;
+ min-height: 301px;
+}
+
+.best-products__item {
+ min-height: 362px;
+}
+
+.product__image {
+ width: 219px;
+ height: 219px;
+ border-radius: 16px;
+ flex-shrink: 0;
+}
+
+.best-products__image {
+ width: 282px;
+ height: 282px;
+}
+
+.pagination {
+ display: flex;
+ justify-content: center;
+ gap: 8px;
+}
+
+.pagination__button {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 40px;
+ height: 40px;
+ border-radius: 40px;
+ background-color: var(--white);
+ border: 1px solid var(--gray200);
+ font-family: Pretendard;
+ font-size: 14px;
+ font-weight: 500;
+}
+
+.pagination__button:hover {
+ background-color: var(--blue);
+ color: var(--white);
+}
diff --git a/market/product.html b/market/product.html
new file mode 100644
index 0000000..79b0a23
--- /dev/null
+++ b/market/product.html
@@ -0,0 +1,76 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 상품 1
+10000원
+ + +