codeit-bootcamp-frontend · arthurkimdev · Jul 8, 2024 · Jul 4, 2024 · Jul 4, 2024 · Jul 5, 2024
diff --git a/build/asset-manifest.json b/build/asset-manifest.json
@@ -1,19 +1,20 @@
 {
   "files": {
-    "main.css": "/static/css/main.f0f3ce1f.css",
-    "main.js": "/static/js/main.7465973d.js",
+    "main.css": "/static/css/main.f3ee4894.css",
+    "main.js": "/static/js/main.f8b8e179.js",
     "static/media/img_home_top.png": "/static/media/img_home_top.ebda87f1b39094af7a56.png",
     "static/media/img_home_bottom.png": "/static/media/img_home_bottom.55f9b5712afe428c859e.png",
     "static/media/img_home_search.png": "/static/media/img_home_search.5edb17ff2d752ee28431.png",
     "static/media/img_home_items.png": "/static/media/img_home_items.7262bacba747d4f77351.png",
     "static/media/img_home_register.png": "/static/media/img_home_register.ea82fb5e2972aae5bdf7.png",
+    "static/media/img_no_comments.png": "/static/media/img_no_comments.467270e26d3f117ad44a.png",
     "static/media/logo_with_typo.png": "/static/media/logo_with_typo.3a8ee6e8a55ab6341a7b.png",
     "index.html": "/index.html",
-    "main.f0f3ce1f.css.map": "/static/css/main.f0f3ce1f.css.map",
-    "main.7465973d.js.map": "/static/js/main.7465973d.js.map"
+    "main.f3ee4894.css.map": "/static/css/main.f3ee4894.css.map",
+    "main.f8b8e179.js.map": "/static/js/main.f8b8e179.js.map"
   },
   "entrypoints": [
-    "static/css/main.f0f3ce1f.css",
-    "static/js/main.7465973d.js"
+    "static/css/main.f3ee4894.css",
+    "static/js/main.f8b8e179.js"
   ]
 }
diff --git a/build/index.html b/build/index.html
@@ -1 +1 @@
-<!doctype html><html lang="ko"><head><meta charset="utf-8"/><link rel="icon" href="./favicon.ico" type="image/x-icon"/><title>판다 마켓</title><meta property="og:title" content="판다마켓"/><meta property="og:type" content="website"/><meta property="og:url" content="https://leehj322-codeit.netlify.app/"/><meta property="og:discription" content="일상의 모든 물건을 거래해보세요"/><meta property="og:image" content="./preview_img.png"/><meta name="twitter:title" content="판다마켓"/><meta name="twitter:card" content="summary"/><meta name="twitter:url" content="https://leehj322-codeit.netlify.app/"/><meta name="twitter:description" content="일상의 모든 물건을 거래해보세요"/><meta name="twitter:image" content="./preview_img.png"/><script defer="defer" src="/static/js/main.7465973d.js"></script><link href="/static/css/main.f0f3ce1f.css" rel="stylesheet"></head><body><div id="root"></div></body></html>
+<!doctype html><html lang="ko"><head><meta charset="utf-8"/><link rel="icon" href="./favicon.ico" type="image/x-icon"/><title>판다 마켓</title><meta property="og:title" content="판다마켓"/><meta property="og:type" content="website"/><meta property="og:url" content="https://leehj322-codeit.netlify.app/"/><meta property="og:discription" content="일상의 모든 물건을 거래해보세요"/><meta property="og:image" content="./preview_img.png"/><meta name="twitter:title" content="판다마켓"/><meta name="twitter:card" content="summary"/><meta name="twitter:url" content="https://leehj322-codeit.netlify.app/"/><meta name="twitter:description" content="일상의 모든 물건을 거래해보세요"/><meta name="twitter:image" content="./preview_img.png"/><script defer="defer" src="/static/js/main.f8b8e179.js"></script><link href="/static/css/main.f3ee4894.css" rel="stylesheet"></head><body><div id="root"></div></body></html>
diff --git a/build/static/css/main.f0f3ce1f.css b/build/static/css/main.f0f3ce1f.css
diff --git a/build/static/css/main.f0f3ce1f.css.map b/build/static/css/main.f0f3ce1f.css.map
diff --git a/build/static/css/main.f3ee4894.css b/build/static/css/main.f3ee4894.css
diff --git a/build/static/css/main.f3ee4894.css.map b/build/static/css/main.f3ee4894.css.map
diff --git a/build/static/js/main.7465973d.js b/build/static/js/main.7465973d.js
diff --git a/build/static/js/main.7465973d.js.map b/build/static/js/main.7465973d.js.map
diff --git a/build/static/js/main.f8b8e179.js b/build/static/js/main.f8b8e179.js
diff --git a/build/static/js/main.7465973d.js.LICENSE.txt → build/static/js/main.f8b8e179.js.LICENSE.txt b/build/static/js/main.7465973d.js.LICENSE.txt → build/static/js/main.f8b8e179.js.LICENSE.txt
diff --git a/build/static/js/main.f8b8e179.js.map b/build/static/js/main.f8b8e179.js.map
diff --git a/build/static/media/img_no_comments.467270e26d3f117ad44a.png b/build/static/media/img_no_comments.467270e26d3f117ad44a.png
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,6 +11,7 @@
     "react-responsive": "^10.0.0",
     "react-router-dom": "^6.23.1",
     "react-scripts": "5.0.1",
+    "styled-components": "^6.1.11",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

diff --git a/src/App.js b/src/App.js
@@ -1,27 +1,29 @@
-import "./styles/base/reset.css";
-import "./styles/base/global.css";
+import "./assets/styles/reset.css";
+import "./assets/styles/global.css";
 
 import { Routes, Route } from "react-router-dom";
 
-import Home from "./pages/Home";
-import Login from "./pages/Login";
-import Signin from "./pages/Signin";
-import Items from "./pages/Items";
-import AddItem from "./pages/AddItem";
-import Faq from "./pages/Faq";
-import Privacy from "./pages/Privacy";
+import HomePage from "./pages/Home/HomePage";
+import LoginPage from "./pages/Auth/LoginPage";
+import SigninPage from "./pages/Auth/SigninPage";
+import UsedMarketPage from "./pages/Market/UsedMarketPage";
+import ItemDetailPage from "./pages/Market/ItemDetailPage";
+import AddItemPage from "./pages/Market/AddItemPage";
+import FaqPage from "./pages/Faq/FaqPage";
+import PrivacyPage from "./pages/Privacy/PrivacyPage";
 import NotFoundPage from "./pages/NotFoundPage";
 
 function App() {
   return (
     <Routes>
-      <Route exact path="/" element={<Home />} />
-      <Route exact path="/login" element={<Login />} />
-      <Route exact path="/signin" element={<Signin />} />
-      <Route exact path="/items" element={<Items />} />
-      <Route exact path="/additem" element={<AddItem />} />
-      <Route exact path="/privacy" element={<Privacy />} />
-      <Route exact path="/faq" element={<Faq />} />
+      <Route exact index element={<HomePage />} />
+      <Route exact path="/login" element={<LoginPage />} />
+      <Route exact path="/signin" element={<SigninPage />} />
+      <Route exact path="/items" element={<UsedMarketPage />} />
+      <Route path="/items/:itemId" element={<ItemDetailPage />} />
+      <Route exact path="/additem" element={<AddItemPage />} />
+      <Route exact path="/privacy" element={<PrivacyPage />} />
+      <Route exact path="/faq" element={<FaqPage />} />
       <Route path="*" element={<NotFoundPage />} />
     </Routes>
   );

diff --git a/src/api/api.js b/src/api/api.js
@@ -8,12 +8,51 @@ export async function getProducts({ orderBy, page, pageSize }) {
     const response = await fetch(url);
     if (!response.ok) {
       throw new Error(
-        `상품정보를 불러오는데 실패했습니다. Status: ${response.status}`
+        `상품목록을 불러오는데 실패했습니다. Status: ${response.status}`
       );
     }
     const body = await response.json();
     return body;
   } catch (error) {
-    throw new Error(`상품정보 요청에 실패했습니다. Error: ${error.message}`);
+    throw new Error(`상품목록 요청에 실패했습니다. Error: ${error.message}`);
+  }
+}
+
+export async function getProductDetail({ productId }) {
+  const url = `${BASE_URL}/products/${productId}`;
+
+  try {
+    const response = await fetch(url);
+    if (!response.ok) {
+      throw new Error(
+        `상품상세정보를 불러오는데 실패했습니다. Status: ${response.status}`
+      );
+    }
+    const body = await response.json();
+    return body;
+  } catch (error) {
+    throw new Error(
+      `상품상세정보 요청에 실패했습니다. Error: ${error.message}`
+    );
+  }
+}
+
+export async function getProductComments({ productId, limit }) {
+  const query = `limit=${limit}`;
+  const url = `${BASE_URL}/products/${productId}/comments?${query}`;
+
+  try {
+    const response = await fetch(url);
+    if (!response.ok) {
+      throw new Error(
+        `상품댓글정보를 불러오는데 실패했습니다. Status: ${response.status}`
+      );
+    }
+    const body = await response.json();
+    return body;
+  } catch (error) {
+    throw new Error(
+      `상품댓글정보 요청에 실패했습니다. Error: ${error.message}`
+    );
   }
 }
diff --git a/src/assets/arrow_left_dark.png → src/assets/images/arrow_left_dark.png b/src/assets/arrow_left_dark.png → src/assets/images/arrow_left_dark.png
diff --git a/src/assets/arrow_right_dark.png → src/assets/images/arrow_right_dark.png b/src/assets/arrow_right_dark.png → src/assets/images/arrow_right_dark.png
diff --git a/src/assets/basic_user_pfp_img.png → src/assets/images/basic_user_pfp_img.png b/src/assets/basic_user_pfp_img.png → src/assets/images/basic_user_pfp_img.png
diff --git a/src/assets/btn_visibility_off.png → src/assets/images/btn_visibility_off.png b/src/assets/btn_visibility_off.png → src/assets/images/btn_visibility_off.png
diff --git a/src/assets/btn_visibility_on.png → src/assets/images/btn_visibility_on.png b/src/assets/btn_visibility_on.png → src/assets/images/btn_visibility_on.png
diff --git a/src/assets/ic_arrow_down.png → src/assets/images/ic_arrow_down.png b/src/assets/ic_arrow_down.png → src/assets/images/ic_arrow_down.png
diff --git a/src/assets/images/ic_back.png b/src/assets/images/ic_back.png
diff --git a/src/assets/ic_facebook.png → src/assets/images/ic_facebook.png b/src/assets/ic_facebook.png → src/assets/images/ic_facebook.png
diff --git a/src/assets/ic_google_login.png → src/assets/images/ic_google_login.png b/src/assets/ic_google_login.png → src/assets/images/ic_google_login.png
diff --git a/src/assets/ic_heart_active.png → src/assets/images/ic_heart_active.png b/src/assets/ic_heart_active.png → src/assets/images/ic_heart_active.png
diff --git a/src/assets/ic_heart_inactive.png → src/assets/images/ic_heart_inactive.png b/src/assets/ic_heart_inactive.png → src/assets/images/ic_heart_inactive.png
diff --git a/src/assets/ic_img_delete_btn_active.png → ...ssets/images/ic_img_delete_btn_active.png b/src/assets/ic_img_delete_btn_active.png → ...ssets/images/ic_img_delete_btn_active.png
diff --git a/src/assets/ic_img_delete_btn_inactive.png → ...ets/images/ic_img_delete_btn_inactive.png b/src/assets/ic_img_delete_btn_inactive.png → ...ets/images/ic_img_delete_btn_inactive.png
diff --git a/src/assets/ic_instagram.png → src/assets/images/ic_instagram.png b/src/assets/ic_instagram.png → src/assets/images/ic_instagram.png
diff --git a/src/assets/ic_kakaotalk_login.png → src/assets/images/ic_kakaotalk_login.png b/src/assets/ic_kakaotalk_login.png → src/assets/images/ic_kakaotalk_login.png
diff --git a/src/assets/images/ic_kebab.png b/src/assets/images/ic_kebab.png
diff --git a/src/assets/ic_register_img.png → src/assets/images/ic_register_img.png b/src/assets/ic_register_img.png → src/assets/images/ic_register_img.png
diff --git a/src/assets/ic_search.png → src/assets/images/ic_search.png b/src/assets/ic_search.png → src/assets/images/ic_search.png
diff --git a/src/assets/ic_sort.png → src/assets/images/ic_sort.png b/src/assets/ic_sort.png → src/assets/images/ic_sort.png
diff --git a/src/assets/ic_twitter.png → src/assets/images/ic_twitter.png b/src/assets/ic_twitter.png → src/assets/images/ic_twitter.png
diff --git a/src/assets/ic_youtube.png → src/assets/images/ic_youtube.png b/src/assets/ic_youtube.png → src/assets/images/ic_youtube.png
diff --git a/src/assets/Img_home_bottom.png → src/assets/images/img_home_bottom.png b/src/assets/Img_home_bottom.png → src/assets/images/img_home_bottom.png
diff --git a/src/assets/img_home_items.png → src/assets/images/img_home_items.png b/src/assets/img_home_items.png → src/assets/images/img_home_items.png
diff --git a/src/assets/img_home_register.png → src/assets/images/img_home_register.png b/src/assets/img_home_register.png → src/assets/images/img_home_register.png
diff --git a/src/assets/img_home_search.png → src/assets/images/img_home_search.png b/src/assets/img_home_search.png → src/assets/images/img_home_search.png
diff --git a/src/assets/Img_home_top.png → src/assets/images/img_home_top.png b/src/assets/Img_home_top.png → src/assets/images/img_home_top.png
diff --git a/src/assets/images/img_no_comments.png b/src/assets/images/img_no_comments.png
diff --git a/src/assets/logo.png → src/assets/images/logo.png b/src/assets/logo.png → src/assets/images/logo.png
diff --git a/src/assets/logo_typo.png → src/assets/images/logo_typo.png b/src/assets/logo_typo.png → src/assets/images/logo_typo.png
diff --git a/src/assets/logo_with_typo.png → src/assets/images/logo_with_typo.png b/src/assets/logo_with_typo.png → src/assets/images/logo_with_typo.png
diff --git a/src/assets/preview_img.png → src/assets/images/preview_img.png b/src/assets/preview_img.png → src/assets/images/preview_img.png
diff --git a/src/styles/base/global.css → src/assets/styles/global.css b/src/styles/base/global.css → src/assets/styles/global.css
@@ -31,6 +31,10 @@ html {
   font-family: Pretendard, sans-serif;
 }
 
+* {
+  font-family: Pretendard, sans-serif;
+}
+
 button,
 input {
   border: none;

diff --git a/src/styles/base/reset.css → src/assets/styles/reset.css b/src/styles/base/reset.css → src/assets/styles/reset.css
diff --git a/src/components/@shared/BlueButton.js b/src/components/@shared/BlueButton.js
@@ -0,0 +1,15 @@
+import styled from "styled-components";
+
+const BlueButton = styled.button`
+  border: none;
+  background-color: var(--brand-blue);
+  color: var(--gray-00);
+  text-align: center;
+  font-weight: 600;
+
+  &:disabled {
+    background-color: var(--cool-gray-400);
+  }
+`;
+
+export default BlueButton;
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!doctype html><html lang="ko"><head><meta charset="utf-8"/><link rel="icon" href="./favicon.ico" type="image/x-icon"/><title>판다 마켓</title><meta property="og:title" content="판다마켓"/><meta property="og:type" content="website"/><meta property="og:url" content="https://leehj322-codeit.netlify.app/"/><meta property="og:discription" content="일상의 모든 물건을 거래해보세요"/><meta property="og:image" content="./preview_img.png"/><meta name="twitter:title" content="판다마켓"/><meta name="twitter:card" content="summary"/><meta name="twitter:url" content="https://leehj322-codeit.netlify.app/"/><meta name="twitter:description" content="일상의 모든 물건을 거래해보세요"/><meta name="twitter:image" content="./preview_img.png"/><script defer="defer" src="/static/js/main.7465973d.js"></script><link href="/static/css/main.f0f3ce1f.css" rel="stylesheet"></head><body><div id="root"></div></body></html>
		<!doctype html><html lang="ko"><head><meta charset="utf-8"/><link rel="icon" href="./favicon.ico" type="image/x-icon"/><title>판다 마켓</title><meta property="og:title" content="판다마켓"/><meta property="og:type" content="website"/><meta property="og:url" content="https://leehj322-codeit.netlify.app/"/><meta property="og:discription" content="일상의 모든 물건을 거래해보세요"/><meta property="og:image" content="./preview_img.png"/><meta name="twitter:title" content="판다마켓"/><meta name="twitter:card" content="summary"/><meta name="twitter:url" content="https://leehj322-codeit.netlify.app/"/><meta name="twitter:description" content="일상의 모든 물건을 거래해보세요"/><meta name="twitter:image" content="./preview_img.png"/><script defer="defer" src="/static/js/main.f8b8e179.js"></script><link href="/static/css/main.f3ee4894.css" rel="stylesheet"></head><body><div id="root"></div></body></html>
-Original file line number
+Diff line change
@@ Expand Up / @@ -31,6 +31,10 @@ html { @@
       font-family: Pretendard, sans-serif;
     }
+    * {
+      font-family: Pretendard, sans-serif;
+    }
     button,
     input {
       border: none;
@@ Expand Down @@