refactor: sprint5 코멘트 반영

codeit-sprint-fullstack · Dec 8, 2024 · 0f1a9c4 · 0f1a9c4
1 parent 001c654
commit 0f1a9c4
Show file tree

Hide file tree

Showing 25 changed files with 131 additions and 199 deletions.
diff --git a/src/api/getProducts.js b/src/api/getProducts.js
@@ -1,20 +1,18 @@
-const BASE_URL = 'https://backend-c2ut.onrender.com';
+const BASE_URL = "https://backend-c2ut.onrender.com";
 
 
 export async function getProducts(
     { 
     offset = 0, 
     limit = 10, 
     page = 1, 
-    sort = 'recent',
+    sort = "recent",
     keyword = "",
 }
 ) {
   const query = `offset=${offset}&limit=${limit}&page=${page}&sort=${sort}&search=${keyword}`;
   const response = await fetch(`${BASE_URL}/products?${query}`);
   const data = await response.json();
-
-  console.log(data);
 
   return data;
 }

diff --git a/src/api/postProduct.js b/src/api/postProduct.js
diff --git a/src/components/Banner.js b/src/components/Banner.js
@@ -1,4 +1,4 @@
-import '../styles/Banner.css';
+import "../styles/Banner.css";
 
 export function Banner(children) {
   return (

diff --git a/src/components/BestProducts.js b/src/components/BestProducts.js
@@ -1,14 +1,14 @@
 import { useEffect, useState } from "react";
 import "../styles/BestProducts.css";
 import { getProducts } from "../api/getProducts";
-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";
 
 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([]);
@@ -21,7 +21,7 @@ export function BestProducts() {
         setBestProducts(data);
         data.forEach(product => {
           if (!IsImage(String(product.images))) {
-            product.images = no_image_available;
+            product.images = noImageAvailable;
           }
         });
       })
@@ -39,7 +39,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>

diff --git a/src/components/Content.js b/src/components/Content.js
@@ -1,7 +1,7 @@
-import '../styles/Content.css';
-import '../images/Img_home_01.png';
-import '../images/Img_home_02.png';
-import '../images/Img_home_03.png';
+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() {
 

diff --git a/src/components/DropDown.js b/src/components/DropDown.js
@@ -1,12 +1,14 @@
-import React, { useState } from 'react';
-import '../styles/DropDown.css';
+import React, { useState } from "react";
+import "../styles/DropDown.css";
+import DropdownToggle from "./DropdownToggle"; 
+import DropdownContent from "./DropdownContent";
 
-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 +19,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>
     );
 }

diff --git a/src/components/DropdownContent.js b/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;
diff --git a/src/components/DropdownToggle.js b/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;
diff --git a/src/components/Footer.js b/src/components/Footer.js
@@ -1,8 +1,8 @@
-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';
+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";
 
 export function Footer() {
   return (

diff --git a/src/components/IsImage.js b/src/components/IsImage.js
diff --git a/src/components/OnSaleProducts.js b/src/components/OnSaleProducts.js
@@ -1,14 +1,13 @@
 // import Product from "./ProductList";
-import "../images/empty_heart.png";
 import "../images/search.png";
 import "../styles/OnSaleProducts.css";
-import "../images/empty_heart.png";
+import "../images/emptyHeart.png";
 import { useState, useEffect } from "react";
 import getProducts from "../api/getProducts";
-import IsImage from "./IsImage";
+import IsImage from "../utils/image.helper";
 
-const no_image_available = require("../images/no-image-available.png");
-const empty_heart = require("../images/empty_heart.png");
+const noImageAvailable = require("../images/noImageAvailable.png");
+const emptyHeart = require("../images/emptyHeart.png");
 
 export function OnSaleProducts({ sort, page, keyword }) {
 
@@ -30,7 +29,7 @@ export function OnSaleProducts({ sort, page, keyword }) {
 
         data.products.forEach(product => {
           if (!product.images || !IsImage(product.images)) {
-            product.images = no_image_available;
+            product.images = noImageAvailable;
           }
         });
       })
@@ -60,13 +59,13 @@ export function OnSaleProducts({ sort, page, keyword }) {
         filteredProducts.length > 0 ? (
           filteredProducts.map((product) => (
             <div className="on-sale-product-card" key={product._id}>
-              <img className="on-sale-product-image" src={product.images || no_image_available} alt={product.name} />
+              <img className="on-sale-product-image" src={product.images || noImageAvailable} alt={product.name} />
               <div className="on-sale-product-info">
                 <h3>{product.name}</h3>
                 <p>{product.price.toLocaleString()}원</p>
                 <div className="on-sale-product-favorite">
                   <button className="on-sale-favorite-button">
-                    <img src={empty_heart} alt="favorite"></img>
+                    <img src={emptyHeart} alt="favorite"></img>
                   </button>
                   <h5>{product.favoriteCount}</h5>
                 </div>

diff --git a/src/components/Pagination.js b/src/components/Pagination.js
@@ -1,5 +1,5 @@
-import { useState, useEffect } from 'react';
-import '../styles/Pagination.css';
+import { useState, useEffect } from "react";
+import "../styles/Pagination.css";
 
 
 export function Pagination({ onPageChange }) {
@@ -13,11 +13,9 @@ export function Pagination({ onPageChange }) {
 
     return (
         <div className="pagination">
-            <button onClick={handlePageChange}>1</button>
-            <button onClick={handlePageChange}>2</button>
-            <button onClick={handlePageChange}>3</button>
-            <button onClick={handlePageChange}>4</button>
-            <button onClick={handlePageChange}>5</button>
+            {[1,2,3,4,5].map((i) => (
+                <button key={i} onClick={handlePageChange}>{i}</button>
+            ))}
         </div>
     );
 }

diff --git a/src/components/ProductTest.js b/src/components/ProductTest.js
diff --git a/src/components/RegistrationForm.js b/src/components/RegistrationForm.js
@@ -1,6 +1,6 @@
-import React, { useState } from 'react';
-import '../styles/RegistrationForm.css';
-import { useNavigate } from 'react-router-dom';
+import React, { useState } from "react";
+import "../styles/RegistrationForm.css";
+import { useNavigate } from "react-router-dom";
 
 export function RegistrationForm() {
 
@@ -12,7 +12,7 @@ export function RegistrationForm() {
     const product_name = e.currentTarget.product_name.value.trim();
     const product_desc = e.currentTarget.product_desc.value.trim();
     const product_price = e.currentTarget.product_price.value.trim();
-    const product_tags = e.currentTarget.product_tags.value.split(',').map(tag => tag.trim()); 
+    const product_tags = e.currentTarget.product_tags.value.split(",").map(tag => tag.trim()); 
 
     if (!product_name || !product_price) {
       console.error("상품명과 판매가격은 필수입니다.");
@@ -36,7 +36,6 @@ export function RegistrationForm() {
     .then((res) => res.json())
     .then((data) => {
       if (data && data._id) {
-        console.log("상품 등록에 성공하였습니다.");
         navigate(`/products/${data._id}`);
       } else {
         console.error("상품 등록에 실패하였습니다.", data.message);

diff --git a/src/components/SearchBar.js b/src/components/SearchBar.js
@@ -13,7 +13,6 @@ export function SearchBar({ onSearch }) {
     }
 
     useEffect(() => {
-      console.log(keyword);
     }, [keyword]);
 
   return (

diff --git a/src/images/empty_heart.png → src/images/emptyHeart.png b/src/images/empty_heart.png → src/images/emptyHeart.png
diff --git a/src/images/no-image-available.png → src/images/noImageAvailable.png b/src/images/no-image-available.png → src/images/noImageAvailable.png
diff --git a/src/index.css b/src/index.css
@@ -20,3 +20,19 @@ code {
     monospace;
 }
 
+: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;
+}
diff --git a/src/index.js b/src/index.js
@@ -1,13 +1,13 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
+import React from "react";
+import ReactDOM from "react-dom/client";
 import "./reset.css"
-import './index.css';
-import MainPage from './pages/MainPage';
-import { BrowserRouter, Routes, Route } from 'react-router-dom';
-import ItemPage from './pages/ItemPage';
-import RegistrationPage from './pages/RegistrationPage';
+import "./index.css";
+import MainPage from "./pages/MainPage";
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import ItemPage from "./pages/ItemPage";
+import RegistrationPage from "./pages/RegistrationPage";
 
-const root = ReactDOM.createRoot(document.getElementById('root'));
+const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
   <React.StrictMode>
     <BrowserRouter>