[노현지] Sprint7

React/panda-market/src/App.jsx

@@ -8,17 +8,16 @@ import "./styles/App.color.css";
 function App() {
   const location = useLocation();
 
+  const isAuthPage = ["/login", "/signup"].includes(location.pathname);
+  const isHomePage = location.pathname === "/";
+
   return (
     <>
-      {!["/signin", "/signup"].includes(location.pathname) && (
-        <Header className={styles.nav} />
-      )}
+      {!isAuthPage && <Header className={styles.nav} />}
       <div className={styles.body}>
         <Outlet />
       </div>
-      {["/"].includes(location.pathname) && (
-        <Footer className={styles.footer} />
-      )}
+      {isHomePage && <Footer className={styles.footer} />}
     </>
   );
 }

React/panda-market/src/Main.js

@@ -2,6 +2,7 @@ import { BrowserRouter, Routes, Route } from "react-router-dom";
 import App from "./App";
 import HomePage from "./pages/HomePage/HomePage";
 import LoginPage from "./pages/LoginPage/LoginPage";
+import SignupPage from "./pages/SignupPage/SignupPage";
 import CommunityPage from "./pages/CommunityPage/CommunityPage";
 import MarketPage from "./pages/MarketPage/MarketPage";
 import ItemPage from "./pages/ItemPage/ItemPage";
@@ -13,7 +14,8 @@ function Main() {
       <Routes>
         <Route path="/" element={<App />}>
           <Route index element={<HomePage />} />
-          <Route path="signin" element={<LoginPage />} />
+          <Route path="login" element={<LoginPage />} />
+          <Route path="signup" element={<SignupPage />} />
           <Route path="community" element={<CommunityPage />} />
           <Route path="items">
             <Route index element={<MarketPage />} />

React/panda-market/src/apis/itemApi.js

@@ -4,6 +4,8 @@ const instance = axios.create({
   baseURL: "https://panda-market-api.vercel.app",
 });
 
+const COMMENTS_LIMIT = 3;
+
 export async function getItems({ page = "", pageSize = "", order = "" }) {
   const query = `page=${page}&pageSize=${pageSize}&orderBy=${order}`;
   try {
@@ -14,3 +16,24 @@ export async function getItems({ page = "", pageSize = "", order = "" }) {
     throw error;
   }
 }
+
+export async function getItemById(productId = "") {
+  try {
+    const res = await instance.get(`/products/${productId}`);
+    return res.data;
+  } catch (error) {
+    console.error(error);
+    throw error;
+  }
+}
+
+export async function getItemComments(productId = "", { cursor = 0 }) {
+  const query = `limit=${COMMENTS_LIMIT}&cursor=${cursor}`;
+  try {
+    const res = await instance.get(`/products/${productId}/comments?${query}`);
+    return res.data;
+  } catch (error) {
+    console.error(error);
+    throw error;
+  }
+}

React/panda-market/src/components/Layout/Header.jsx

@@ -1,8 +1,10 @@
 import { Link, NavLink, useLocation } from "react-router-dom";
 import useWindowSize from "../..//hooks/useWindowSize";
+import BREAKPOINTS from "../../utils/breakpoints";
+import PrimaryButton from "../UI/PrimaryButton";
 import logoImg from "../../assets/logo/panda-market-logo.svg";
 import logoWordImg from "../../assets/logo/panda-market-logo-only-word.svg";
-import UserIcon from "../../assets/user/default-profile.png";
+import UserIcon from "../../assets/image/default-profile.png";
 import styles from "./Header.module.css";
 
 function Header() {
@@ -29,7 +31,7 @@ function Header() {
     <div className={styles.header}>
       <div className={styles.leftSide}>
         <Link to="/">
-          {width >= 768 ? (
+          {width >= BREAKPOINTS.TABLET ? (
             <img src={logoImg} alt="판다마켓 로고" />
           ) : (
             <img src={logoWordImg} alt="판다마켓 로고" />
@@ -54,10 +56,10 @@ function Header() {
         <img src={UserIcon} className={styles.user} alt="유저 메뉴" />
       )}
       {["/"].includes(location.pathname) && (
-        <Link to="/signin">
-          <button type="button" className={styles.loginButton}>
+        <Link to="/login">
+          <PrimaryButton type="button" className={styles.loginButton}>
             로그인
-          </button>
+          </PrimaryButton>
         </Link>
       )}
     </div>

React/panda-market/src/components/UI/DeleteButton.jsx

@@ -0,0 +1,12 @@
+import DeleteIcon from "../../assets/icon/ic_delete.svg";
+import styles from "./DeleteButton.module.css";
+
+function DeleteButton({ className = "", onClick = () => {} }) {
+  return (
+    <button type="button" onClick={onClick} className={className}>
+      <img src={DeleteIcon} alt="" className={styles.deleteIcon} />
+    </button>
+  );
+}
+
+export default DeleteButton;

React/panda-market/src/components/UI/DeleteButton.module.css

@@ -0,0 +1,5 @@
+.deleteIcon {
+  padding: 0.5rem;
+  border-radius: 100%;
+  background-color: var(--gray400);
+}

React/panda-market/src/components/UI/MenuButton.jsx

@@ -0,0 +1,16 @@
+import MenuIcon from "../../assets/icon/ic_menu.svg";
+import styles from "./MenuButton.module.css";
+
+function MenuButton({ className = "", onClick = () => {} }) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={`${className} ${styles.menuButton}`}
+    >
+      <img src={MenuIcon} alt="" />
+    </button>
+  );
+}
+
+export default MenuButton;

React/panda-market/src/components/UI/MenuButton.module.css

@@ -0,0 +1,7 @@
+.menuButton {
+  border-radius: 100%;
+}
+
+.menuButton:hover {
+  background-color: var(--gray100);
+}

React/panda-market/src/components/UI/PrimaryButton.jsx

@@ -0,0 +1,18 @@
+import React from "react";
+import styles from "./PrimaryButton.module.css";
+
+function PrimaryButton({
+  children,
+  className = "",
+  onClick = () => {},
+  disabled = false,
+}) {
+  const buttonClass = `${styles.button} ${className}`;
+  return (
+    <button className={buttonClass} onClick={onClick} disabled={disabled}>
+      {children}
+    </button>
+  );
+}
+
+export default PrimaryButton;

React/panda-market/src/components/UI/PrimaryButton.module.css

@@ -0,0 +1,16 @@
+.button {
+  background-color: var(--blue);
+  color: var(--gray100);
+}
+
+.button:hover {
+  background-color: #1967d6;
+}
+
+.button:focus {
+  background-color: #1251aa;
+}
+
+.button:disabled {
+  background-color: var(--gray400);
+}

React/panda-market/src/hooks/useWindowSize.js

@@ -1,7 +1,7 @@
 import { useState, useEffect } from "react";
 import debounce from "lodash.debounce";
 
-function useWindowSize() {
+function useWindowSize(delay = 300) {
   const [windowSize, setWindowSize] = useState({
     width: window.innerWidth,
     height: window.innerHeight,
@@ -13,7 +13,7 @@ function useWindowSize() {
         width: window.innerWidth,
         height: window.innerHeight,
       });
-    }, 300);
+    }, delay);
 
     window.addEventListener("resize", handleResize);
     return () => {

React/panda-market/src/pages/HomePage/HomePage.jsx

@@ -1,4 +1,11 @@
+import { Link } from "react-router-dom";
 import { Helmet } from "react-helmet";
+import PrimaryButton from "../../components/UI/PrimaryButton";
+import BannerTopImg from "../../assets/image/Img_home_top.svg";
+import BannerBottomImg from "../../assets/image/Img_home_bottom.svg";
+import HomeImg1 from "../../assets/image/Img_home_01.png";
+import HomeImg2 from "../../assets/image/Img_home_02.png";
+import HomeImg3 from "../../assets/image/Img_home_03.png";
 import styles from "./HomePage.module.css";
 
 function HomePage() {
@@ -7,6 +14,80 @@ function HomePage() {
       <Helmet>
         <title>판다마켓 - 일상의 모든 물건을 거래해 보세요</title>
       </Helmet>
+      <div className={`${styles.banner} ${styles.top}`}>
+        <div className={styles.wrapper}>
+          <div className={styles.bannerContainer}>
+            <div className={styles.bannerLeft}>
+              <h1 className={styles.title}>
+                일상의 모든 물건을
+                <br className={styles.mobile} /> 거래해 보세요
+              </h1>
+              <Link to="/items">
+                <PrimaryButton className={styles.itemsLinkButton}>
+                  구경하러 가기
+                </PrimaryButton>
+              </Link>
+            </div>
+            <div className={styles.bannerRight}>
+              <img src={BannerTopImg} alt="상단 배너 이미지" />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className={`${styles.features} ${styles.wrapper}`}>
+        <div className={styles.feature}>
+          <img src={HomeImg1} width="68.5%" alt="인기 상품" />
+          <div className={styles.featureContent}>
+            <h2 className={styles.featureTag}>Hot item</h2>
+            <h3 className={styles.bold}>인기 상품을 확인해 보세요</h3>
+            <p className={styles.featureDescription}>
+              가장 HOT한 중고거래 물품을
+              <br />
+              판다 마켓에서 확인해 보세요
+            </p>
+          </div>
+        </div>
+        <div className={`${styles.feature} ${styles.columnReverse}`}>
+          <div className={styles.featureContent}>
+            <h2 className={styles.featureTag}>Search</h2>
+            <h3 className={styles.bold}>구매를 원하는 상품을 검색하세요</h3>
+            <p className={styles.featureDescription}>
+              구매하고 싶은 물품은 검색해서
+              <br />
+              쉽게 찾아보세요
+            </p>
+          </div>
+          <img src={HomeImg2} width="68.5%" alt="검색 기능" />
+        </div>
+        <div className={styles.feature}>
+          <img src={HomeImg3} width="68.5%" alt="판매 상품 등록" />
+          <div className={styles.featureContent}>
+            <h2 className={styles.featureTag}>Register</h2>
+            <h3 className={styles.bold}>판매를 원하는 상품을 등록하세요</h3>
+            <p className={styles.featureDescription}>
+              어떤 물건이든 판매하고 싶은 상품을
+              <br />
+              쉽게 등록하세요
+            </p>
+          </div>
+        </div>
+      </div>
+      <div className={`${styles.banner} ${styles.bottom}`}>
+        <div className={styles.wrapper}>
+          <div className={styles.bannerContainer}>
+            <div className={styles.bannerLeft}>
+              <h1 className={styles.title}>
+                믿을 수 있는
+                <br />
+                판다마켓 중고 거래
+              </h1>
+            </div>
+            <div className={styles.bannerRight}>
+              <img src={BannerBottomImg} alt="하단 배너 이미지" />
+            </div>
+          </div>
+        </div>
+      </div>
     </>
   );
 }