refactor: sprint5 코멘트 반영

src/api/getProducts.js

@@ -1,21 +1,32 @@
+<<<<<<< HEAD
 const BASE_URL = 'https://panda-market-api.vercel.app/products';
+=======
+const BASE_URL = "https://backend-c2ut.onrender.com";
+>>>>>>> 0f1a9c4 (refactor: sprint5 코멘트 반영)
 
 
 export async function getProducts(
     { 
     offset = 0, 
     limit = 10, 
     page = 1, 
+<<<<<<< HEAD
     pageSize = 10, 
     sort = 'recent',
+=======
+    sort = "recent",
+>>>>>>> 0f1a9c4 (refactor: sprint5 코멘트 반영)
     keyword = "",
 }
 ) {
   const query = `offset=${offset}&limit=${limit}&page=${page}&pageSize=${pageSize}&orderBy=${sort}&keyword=${keyword}`;
   const response = await fetch(`${BASE_URL}?${query}`);
   const data = await response.json();
+<<<<<<< HEAD
 
   console.log("Fetched products:", data);
+=======
+>>>>>>> 0f1a9c4 (refactor: sprint5 코멘트 반영)
 
   return data;
 }

src/components/App.css

@@ -78,21 +78,3 @@
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
   z-index: 1;
 }
-
-
-:root {
-  --primary-color-50: #E6F2FF;
-  --primary-color-100: #3692FF;
-  --primary-color-200: #1967D6;
-  --primary-color-300: #1251AA;
-  --error-color: #F74747;
-  --secondary-color-gray900: #111827;
-  --secondary-color-gray800: #1F2937;
-  --secondary-color-gray700: #374151;
-  --secondary-color-gray600: #4B5563;
-  --secondary-color-gray500: #6B7280;
-  --secondary-color-gray400: #9CA3AF;
-  --secondary-color-gray200: #E5E7EB;
-  --secondary-color-gray100: #F3F4F6;
-  --secondary-color-gray50: #F9FAFB;
-}

src/components/App.js

@@ -1,3 +1,4 @@
+<<<<<<< HEAD:src/components/App.js
 import './App.css';
 import NavBar from './NavBar';
 import Footer from './Footer';
@@ -7,6 +8,18 @@ import { useState } from 'react';
 import SearchBar from './SearchBar';
 import Pagination from './Pagination';
 import DropDown from './DropDown';
+=======
+import "../styles/ItemPage.css";
+import NavBar from "../components/NavBar";
+import Footer from "../components/Footer";
+import BestProducts from "../components/BestProducts";
+import { OnSaleProducts } from "../components/OnSaleProducts";
+import { useState } from "react";
+import SearchBar from "../components/SearchBar";
+import Pagination from "../components/Pagination";
+import DropDown from "../components/DropDown";
+import { NavLink } from "react-router-dom";
+>>>>>>> 0f1a9c4 (refactor: sprint5 코멘트 반영):src/pages/ItemPage.js
 
 function App() {
 
@@ -24,7 +37,6 @@ function App() {
       newOption = "favorite";
       setSelectedOption(newOption);
     }
-    console.log(newOption);
   }
 
   const handlePageChange = (newPage) => {

src/components/Banner.js

@@ -0,0 +1,22 @@
+import "../styles/Banner.css";
+
+export function Banner(children) {
+  return (
+    <div class="banner_container">
+            <div class="banner_info">
+                <p class="banner_text">{children.toptext}</p>
+                <p class="banner_text">{children.bottomtext}</p>
+                {children.link && (
+                    <a href="items.html">
+                        <button className="look_around_button">구경하러 가기</button>
+                        {children.link.label}
+                    </a>
+                )}
+
+            </div>
+            <img class="banner_image" src={children.image}/>
+        </div>
+  );
+}
+
+export default Banner;

src/components/BestProducts.js

@@ -1,15 +1,21 @@
 import { useEffect, useState } from "react";
 import "./BestProducts.css";
 import { getProducts } from "../api/getProducts";
+<<<<<<< HEAD
 import "./BestProducts.css";
 import "../images/empty_heart.png";
 import IsImage from "./IsImage";
 import "../images/no-image-available.png";
+=======
+import "../images/emptyHeart.png";
+import IsImage from "../utils/image.helper";
+import "../images/noImageAvailable.png";
+>>>>>>> 0f1a9c4 (refactor: sprint5 코멘트 반영)
 
 export function BestProducts() {
 
-  const empty_heart = require("../images/empty_heart.png");
-  const no_image_available = require("../images/no-image-available.png");
+  const emptyHeart = require("../images/emptyHeart.png");
+  const noImageAvailable = require("../images/noImageAvailable.png");
 
 
   const [bestProducts, setBestProducts] = useState([]);
@@ -22,7 +28,7 @@ export function BestProducts() {
         setBestProducts(data.list);
         data.list.forEach(product => {
           if (!IsImage(String(product.images))) {
-            product.images = no_image_available;
+            product.images = noImageAvailable;
           }
         });
       })
@@ -40,7 +46,7 @@ export function BestProducts() {
               <p>{product.price.toLocaleString()}원</p>
               <div className="best-product-favorite">
                 <button className="best-favorite-button">
-                  <img src={empty_heart} alt="favorite"></img>
+                  <img src={emptyHeart} alt="favorite"></img>
                 </button>
                 <h5>{product.favoriteCount}</h5>
               </div>

src/components/Content.js

@@ -0,0 +1,42 @@
+import "../styles/Content.css";
+import "../images/Img_home_01.png";
+import "../images/Img_home_02.png";
+import "../images/Img_home_03.png";
+
+export function Content() {
+
+  const content_image_01 = require("../images/Img_home_01.png");
+  const content_image_02 = require("../images/Img_home_02.png");
+  const content_image_03 = require("../images/Img_home_03.png");
+
+  return (
+    <div className="content-container">
+      <div className="content_container">
+            <img className="images" src={content_image_01}/>
+            <div className="content_01">
+                <b className="content_badge">Hot Item</b>
+                <p className="content_title">인기 상품을 <br/> 확인해 보세요</p>
+                <p className="content_desc">가장 HOT한 중고거래 물품을 <br/> 판다 마켓에서 확인해 보세요</p>
+            </div>
+        </div>
+        <div className="content_container">
+            <div className="content_02">
+                <b className="content_badge">Search</b>
+                <p className="content_title">구매를 원하는 <br/> 상품을 검색하세요</p>
+                <p className="content_desc">구매하고 싶은 물품은 검색해서 <br/> 쉽게 찾아보세요</p>
+            </div>
+            <img className="images" src={content_image_02}/>
+        </div>
+        <div className="content_container">
+            <img className="images" src={content_image_03}/>
+            <div className="content_03">
+                <b className="content_badge">Register</b>
+                <p className="content_title">판매를 원하는 <br/> 상품을 등록하세요</p>
+                <p className="content_desc">어떤 물건이든 판매하고 싶은 상품을 <br/> 쉽게 등록하세요</p>
+            </div>
+        </div>
+    </div>
+  );
+}
+
+export default Content;

src/components/DropDown.js

@@ -1,12 +1,19 @@
+<<<<<<< HEAD
 import React, { useState } from 'react';
 import './DropDown.css';
+=======
+import React, { useState } from "react";
+import "../styles/DropDown.css";
+import DropdownToggle from "./DropdownToggle"; 
+import DropdownContent from "./DropdownContent";
+>>>>>>> 0f1a9c4 (refactor: sprint5 코멘트 반영)
 
-function DropDown({ options = [], onSelect }) { 
+function DropDown({ options = [], onSelect }) {
     const [isOpen, setIsOpen] = useState(false);
     const [selectedOption, setSelectedOption] = useState(null);
 
     const toggleDropdown = () => {
-        setIsOpen((prev) => !prev);
+        setIsOpen(!isOpen);
     };
 
     const handleOptionClick = (option) => {
@@ -17,24 +24,15 @@ function DropDown({ options = [], onSelect }) {
 
     return (
         <div className="dropdown">
-            <button className="dropdown-button" onClick={toggleDropdown}>
-                {selectedOption || "최신순"} ▼
-            </button>
-            {isOpen && options.length > 0 ? (
-                <ul className="dropdown-menu">
-                    {options.map((option, index) => (
-                        <li
-                            key={index}
-                            className="dropdown-item"
-                            onClick={() => handleOptionClick(option)}
-                        >
-                            {option}
-                        </li>
-                    ))}
-                </ul>
-            ) : (
-                isOpen && <p className="dropdown-no-options">옵션이 없습니다.</p>
-            )}
+            <DropdownToggle 
+                onToggle={toggleDropdown}
+                selectedOption={selectedOption}
+            />
+            <DropdownContent 
+                isOpen={isOpen}
+                options={options}
+                handleOptionClick={handleOptionClick}
+            />
         </div>
     );
 }

src/components/DropdownContent.js

@@ -0,0 +1,27 @@
+import React from "react";
+
+function DropdownContent({ isOpen, options, handleOptionClick }) {
+    if (!isOpen) {
+        return null;
+    }
+
+    if (options.length > 0) {
+        return (
+            <ul className="dropdown-menu">
+                {options.map((option, index) => (
+                    <li
+                        key={index}
+                        className="dropdown-item"
+                        onClick={() => handleOptionClick(option)}
+                    >
+                        {option}
+                    </li>
+                ))}
+            </ul>
+        );
+    }
+
+    return <p className="dropdown-no-options">옵션이 없습니다.</p>;
+}
+
+export default DropdownContent;

src/components/DropdownToggle.js

@@ -0,0 +1,11 @@
+import React from "react";
+
+function DropdownToggle({ onToggle, selectedOption }) {
+    return (
+        <button className="dropdown-button" onClick={onToggle}>
+            {selectedOption || "최신순"} ▼
+        </button>
+    );
+}
+
+export default DropdownToggle;

src/components/Footer.css

@@ -1,21 +1,3 @@
-:root {
-    --primary-color-50: #E6F2FF;
-    --primary-color-100: #3692FF;
-    --primary-color-200: #1967D6;
-    --primary-color-300: #1251AA;
-    --error-color: #F74747;
-    --secondary-color-gray900: #111827;
-    --secondary-color-gray800: #1F2937;
-    --secondary-color-gray700: #374151;
-    --secondary-color-gray600: #4B5563;
-    --secondary-color-gray500: #6B7280;
-    --secondary-color-gray400: #9CA3AF;
-    --secondary-color-gray200: #E5E7EB;
-    --secondary-color-gray100: #F3F4F6;
-    --secondary-color-gray50: #F9FAFB;
-}
-
-
 .footer_container {
     margin: 0;
     padding: 0;

src/components/Footer.js

@@ -1,8 +1,16 @@
+<<<<<<< HEAD
 import instagram from '../images/ic_instagram.png';
 import facebook from '../images/ic_facebook.png';
 import twitter from '../images/ic_twitter.png';
 import youtube from '../images/ic_youtube.png';
 import './Footer.css';
+=======
+import instagram from "../images/ic_instagram.png";
+import facebook from "../images/ic_facebook.png";
+import twitter from "../images/ic_twitter.png";
+import youtube from "../images/ic_youtube.png";
+import "../styles/Footer.css";
+>>>>>>> 0f1a9c4 (refactor: sprint5 코멘트 반영)
 
 export function Footer() {
   return (

src/components/NavBar.css

@@ -1,21 +1,3 @@
-:root {
-    --primary-color-50: #E6F2FF;
-    --primary-color-100: #3692FF;
-    --primary-color-200: #1967D6;
-    --primary-color-300: #1251AA;
-    --error-color: #F74747;
-    --secondary-color-gray900: #111827;
-    --secondary-color-gray800: #1F2937;
-    --secondary-color-gray700: #374151;
-    --secondary-color-gray600: #4B5563;
-    --secondary-color-gray500: #6B7280;
-    --secondary-color-gray400: #9CA3AF;
-    --secondary-color-gray200: #E5E7EB;
-    --secondary-color-gray100: #F3F4F6;
-    --secondary-color-gray50: #F9FAFB;
-}
-
-
 nav {
     background-color: white;
     color: black;