Merge pull request #7 from ecommerce-systems/prod/temp

creepereye1204 · web-flow · commit 74510f46f1b1 · 2026-02-26T15:33:55.000+09:00
1. UI/UX 고도화
diff --git a/index.html b/index.html
@@ -1,10 +1,10 @@
 <!doctype html>
-<html lang="en">
+<html lang="ko">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232563eb'><path d='M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z'/></svg>" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>my-react-app</title>
+    <title>이커머스 시스템</title>
   </head>
   <body>
     <div id="app"></div>
diff --git a/src/App.jsx b/src/App.jsx
@@ -2,46 +2,51 @@ import React from 'react';
 import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
 import AuthPage from './pages/AuthPage';
 import ProductPage from './pages/ProductPage';
+import ProductDetailPage from './pages/ProductDetailPage';
 import OrderPage from './pages/OrderPage';
 import UserPage from './pages/UserPage';
 import CoPurchasePage from './pages/CoPurchasePage';
 import ResponseTimeToast from './components/ResponseTimeToast';
+import { CartProvider } from './context/CartContext';
 
 function App() {
   return (
-    <Router>
-      <div id="app">
-        <nav>
-          <ul>
-            <li>
-              <Link to="/auth">Authentication</Link>
-            </li>
-            <li>
-              <Link to="/products">Products</Link>
-            </li>
-            <li>
-              <Link to="/orders">Orders</Link>
-            </li>
-            <li>
-              <Link to="/user">User Profile</Link>
-            </li>
-            <li>
-              <Link to="/co-purchase">Co-purchase</Link>
-            </li>
-          </ul>
-        </nav>
+    <CartProvider>
+      <Router>
+        <div id="app">
+          <nav>
+            <ul>
+              <li>
+                <Link to="/auth">Authentication</Link>
+              </li>
+              <li>
+                <Link to="/products">Products</Link>
+              </li>
+              <li>
+                <Link to="/orders">Orders</Link>
+              </li>
+              <li>
+                <Link to="/user">User Profile</Link>
+              </li>
+              <li>
+                <Link to="/co-purchase">Co-purchase</Link>
+              </li>
+            </ul>
+          </nav>
 
-        <Routes>
-          <Route path="/auth" element={<AuthPage />} />
-          <Route path="/products" element={<ProductPage />} />
-          <Route path="/orders" element={<OrderPage />} />
-          <Route path="/user" element={<UserPage />} />
-          <Route path="/co-purchase" element={<CoPurchasePage />} />
-        </Routes>
+          <Routes>
+            <Route path="/auth" element={<AuthPage />} />
+            <Route path="/products" element={<ProductPage />} />
+            <Route path="/products/:productId" element={<ProductDetailPage />} />
+            <Route path="/orders" element={<OrderPage />} />
+            <Route path="/user" element={<UserPage />} />
+            <Route path="/co-purchase" element={<CoPurchasePage />} />
+          </Routes>
 
-        <ResponseTimeToast />
-      </div>
-    </Router>
+          <ResponseTimeToast />
+        </div>
+      </Router>
+    </CartProvider>
   );
 }
 
diff --git a/src/components/orders/OrderCreate.jsx b/src/components/orders/OrderCreate.jsx
@@ -1,11 +1,23 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import axiosInstance from '../../api';
+import { useCart } from '../../context/CartContext';
 
 function OrderCreate() {
+  const { cartItems, clearCart } = useCart();
   const [items, setItems] = useState([{ productId: '', quantity: '' }]);
   const [result, setResult] = useState('');
   const [loading, setLoading] = useState(false);
 
+  // Sync with cart items if available
+  useEffect(() => {
+    if (cartItems.length > 0) {
+      setItems(cartItems.map(item => ({
+        productId: item.productId.toString(),
+        quantity: item.quantity
+      })));
+    }
+  }, [cartItems]);
+
   const handleAddItem = () => {
     setItems([...items, { productId: '', quantity: '' }]);
   };
@@ -17,6 +29,10 @@ function OrderCreate() {
     setItems(newItems);
   };
 
+  const handleRemoveItem = (index) => {
+    setItems(items.filter((_, i) => i !== index));
+  };
+
   const handleSubmit = async (e) => {
     e.preventDefault();
     setResult('');
@@ -34,8 +50,9 @@ function OrderCreate() {
       }
 
       const response = await axiosInstance.post('/api/v1/orders', { items: orderItems });
-      setResult(`<p>✅ Order created successfully!</p><pre>${JSON.stringify(response.data, null, 2)}</pre>`);
-      setItems([{ productId: '', quantity: '' }]); // Reset form
+      setResult(`<p>✅ Order created successfully!</p><pre style="background: #f8fafc; padding: 1rem; border-radius: 8px; font-size: 0.8rem;">${JSON.stringify(response.data, null, 2)}</pre>`);
+      setItems([{ productId: '', quantity: '' }]);
+      clearCart(); // Clear cart on success
     } catch (error) {
       setResult(`<p style="color: red;">❌ Order creation failed: ${error.response?.data?.message || error.message}</p>`);
       console.error(error);
@@ -46,33 +63,88 @@ function OrderCreate() {
 
   return (
     <div>
-      <h3>Create Order</h3>
+      <h3 style={{ marginBottom: '1.5rem' }}>Create New Order</h3>
+      
+      {cartItems.length > 0 && (
+        <div style={{ 
+          background: '#eff6ff', 
+          padding: '1rem', 
+          borderRadius: '8px', 
+          marginBottom: '1.5rem',
+          border: '1px solid #bfdbfe',
+          fontSize: '0.9rem'
+        }}>
+          🛒 <strong>Cart Sync:</strong> {cartItems.length} items from your cart are ready to be ordered.
+        </div>
+      )}
+
       <form onSubmit={handleSubmit}>
         {items.map((item, index) => (
-          <div key={index} style={{ marginBottom: '10px' }}>
-            <input
-              type="text"
-              placeholder="Product ID"
-              value={item.productId}
-              onChange={(e) => handleItemChange(index, 'productId', e.target.value)}
-              style={{ width: '100px', marginRight: '5px' }}
-            />
-            <input
-              type="number"
-              placeholder="Quantity"
-              value={item.quantity}
-              onChange={(e) => handleItemChange(index, 'quantity', e.target.value)}
-              min="1"
-              style={{ width: '80px' }}
-            />
+          <div key={index} style={{ 
+            display: 'flex', 
+            gap: '0.5rem', 
+            marginBottom: '0.75rem', 
+            alignItems: 'center',
+            background: '#f8fafc',
+            padding: '0.5rem',
+            borderRadius: '8px'
+          }}>
+            <div style={{ flex: 2 }}>
+              <label style={{ fontSize: '0.75rem', color: '#64748b', display: 'block' }}>Product ID</label>
+              <input
+                type="text"
+                placeholder="ID"
+                value={item.productId}
+                onChange={(e) => handleItemChange(index, 'productId', e.target.value)}
+                style={{ marginBottom: 0 }}
+              />
+            </div>
+            <div style={{ flex: 1 }}>
+              <label style={{ fontSize: '0.75rem', color: '#64748b', display: 'block' }}>Qty</label>
+              <input
+                type="number"
+                placeholder="Qty"
+                value={item.quantity}
+                onChange={(e) => handleItemChange(index, 'quantity', e.target.value)}
+                min="1"
+                style={{ marginBottom: 0 }}
+              />
+            </div>
+            <button 
+              type="button" 
+              onClick={() => handleRemoveItem(index)}
+              style={{ 
+                marginTop: '1.2rem', 
+                background: '#fee2e2', 
+                color: '#ef4444', 
+                padding: '0.5rem',
+                minWidth: '40px'
+              }}
+            >
+              ×
+            </button>
           </div>
         ))}
-        <button type="button" onClick={handleAddItem}>Add Item</button>
-        <button type="submit" disabled={loading}>
-          {loading ? 'Creating...' : 'Create Order'}
-        </button>
+        
+        <div style={{ display: 'flex', gap: '1rem', marginTop: '1rem' }}>
+          <button 
+            type="button" 
+            onClick={handleAddItem}
+            style={{ flex: 1, background: '#f1f5f9', color: '#475569' }}
+          >
+            + Add Product
+          </button>
+          <button 
+            type="submit" 
+            disabled={loading} 
+            style={{ flex: 2 }}
+          >
+            {loading ? 'Processing...' : 'Place Order Now'}
+          </button>
+        </div>
       </form>
-      <div dangerouslySetInnerHTML={{ __html: result }} />
+      
+      <div style={{ marginTop: '1.5rem' }} dangerouslySetInnerHTML={{ __html: result }} />
     </div>
   );
 }
diff --git a/src/components/products/ProductList.jsx b/src/components/products/ProductList.jsx
@@ -1,6 +1,11 @@
 import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useCart } from '../../context/CartContext';
 
 function ProductList({ products }) {
+  const navigate = useNavigate();
+  const { addToCart } = useCart();
+
   if (!products || products.length === 0) {
     return (
       <div style={{ textAlign: 'center', padding: '2rem', color: '#64748b' }}>
@@ -14,26 +19,60 @@ function ProductList({ products }) {
       <h3 style={{ marginBottom: '1.5rem' }}>Available Products</h3>
       <div className="product-list">
         {products.map((product) => (
-          <div key={product.productId} className="product-card">
-            <div style={{ 
-              height: '150px', 
-              background: '#f1f5f9', 
-              borderRadius: '8px',
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              marginBottom: '1rem',
-              color: '#94a3b8',
-              fontSize: '0.875rem'
-            }}>
-              Product Image Placeholder
+          <div key={product.productId} className="product-card" style={{ cursor: 'pointer' }}>
+            <div 
+              onClick={() => navigate(`/products/${product.productId}`)}
+              style={{ 
+                height: '180px', 
+                background: '#f1f5f9', 
+                borderRadius: '8px',
+                overflow: 'hidden',
+                marginBottom: '1rem',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center'
+              }}
+            >
+              {product.imageUrl ? (
+                <img 
+                  src={product.imageUrl} 
+                  alt={product.prodName} 
+                  style={{ 
+                    width: '100%', 
+                    height: '100%', 
+                    objectFit: 'cover' 
+                  }}
+                  onError={(e) => {
+                    e.target.src = 'https://via.placeholder.com/180x180?text=No+Image';
+                  }}
+                />
+              ) : (
+                <div style={{ color: '#94a3b8', fontSize: '0.875rem' }}>No Image</div>
+              )}
             </div>
-            <h4 style={{ margin: '0 0 0.5rem 0', fontSize: '1.1rem' }}>{product.prodName}</h4>
-            <div className="product-price">
-              ₩{product.price?.toLocaleString()}
+            <div onClick={() => navigate(`/products/${product.productId}`)}>
+              <h4 style={{ 
+                margin: '0 0 0.5rem 0', 
+                fontSize: '1rem',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap'
+              }} title={product.prodName}>
+                {product.prodName}
+              </h4>
+              <div className="product-price">
+                ₩{product.price?.toLocaleString()}
+              </div>
             </div>
             <div style={{ marginTop: '1rem' }}>
-              <button style={{ width: '100%', fontSize: '0.875rem', padding: '0.5rem' }}>
+              <button 
+                style={{ width: '100%', fontSize: '0.875rem', padding: '0.5rem' }}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  addToCart(product);
+                  alert('Added to cart!');
+                }}
+              >
                 Add to Cart
               </button>
             </div>
diff --git a/src/context/CartContext.jsx b/src/context/CartContext.jsx
@@ -0,0 +1,35 @@
+import React, { createContext, useContext, useState } from 'react';
+
+const CartContext = createContext();
+
+export const CartProvider = ({ children }) => {
+  const [cartItems, setCartItems] = useState([]);
+
+  const addToCart = (product) => {
+    setCartItems((prev) => {
+      const existing = prev.find((item) => item.productId === product.productId);
+      if (existing) {
+        return prev.map((item) =>
+          item.productId === product.productId
+            ? { ...item, quantity: item.quantity + 1 }
+            : item
+        );
+      }
+      return [...prev, { ...product, quantity: 1 }];
+    });
+  };
+
+  const removeFromCart = (productId) => {
+    setCartItems((prev) => prev.filter((item) => item.productId !== productId));
+  };
+
+  const clearCart = () => setCartItems([]);
+
+  return (
+    <CartContext.Provider value={{ cartItems, addToCart, removeFromCart, clearCart }}>
+      {children}
+    </CartContext.Provider>
+  );
+};
+
+export const useCart = () => useContext(CartContext);
diff --git a/src/pages/ProductDetailPage.jsx b/src/pages/ProductDetailPage.jsx
