[정상인] sprint6

vite-project/eslint.config.js

@@ -1,33 +1,34 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
+import js from "@eslint/js";
+import globals from "globals";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
 
 export default [
-  { ignores: ['dist'] },
+  { ignores: ["dist"] },
   {
-    files: ['**/*.{js,jsx}'],
+    files: ["**/*.{js,jsx}"],
     languageOptions: {
       ecmaVersion: 2020,
       globals: globals.browser,
       parserOptions: {
-        ecmaVersion: 'latest',
+        ecmaVersion: "latest",
         ecmaFeatures: { jsx: true },
-        sourceType: 'module',
+        sourceType: "module",
       },
     },
     plugins: {
-      'react-hooks': reactHooks,
-      'react-refresh': reactRefresh,
+      "react-hooks": reactHooks,
+      "react-refresh": reactRefresh,
     },
     rules: {
       ...js.configs.recommended.rules,
       ...reactHooks.configs.recommended.rules,
-      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
-      'react-refresh/only-export-components': [
-        'warn',
+      "no-unused-vars": ["warn", { varsIgnorePattern: "^[A-Z_]" }],
+      "react-refresh/only-export-components": [
+        "warn",
         { allowConstantExport: true },
       ],
+      "no-console": ["warn", { allow: ["warn", "error"] }],
     },
   },
-]
+];

vite-project/package.json

@@ -10,12 +10,14 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@tanstack/react-query": "^5.85.5",
     "axios": "^1.11.0",
     "dotenv": "^17.2.1",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-responsive": "^10.0.1",
-    "react-router": "^7.7.0"
+    "react-router": "^7.7.0",
+    "zustand": "^5.0.8"
   },
   "devDependencies": {
     "@eslint/js": "^9.25.0",

vite-project/src/App.css

@@ -1,5 +1,17 @@
 :root {
   --primary100: #3692ff;
+  --primary200: #1967d6;
+  --primary300: #1251aa;
+
+  --gray50: #f9fafb;
+  --gray100: #f3f4f6;
+  --gray200: #e5e7eb;
+  --gray400: #9ca3af;
+  --gray500: #6b7280;
+  --gray600: #4b5563;
+  --gray700: #374151;
+  --gray800: #1f2937;
+  --gray900: #111827;
 }
 
 * {
@@ -45,12 +57,69 @@ p {
 
 .wrap {
   padding: 0 240px;
+}
+
+.btn-large {
+  height: 56px;
+  padding: 16px 124px;
+  border-radius: 40px;
+  border: none;
+  font-weight: 600;
+  font-size: 20px;
+  color: var(--gray100);
+}
+
+.btn-medium {
+  height: 48px;
+  padding: 12px 71px;
+  border-radius: 40px;
+  border: none;
+  font-weight: 600;
+  font-size: 18px;
+  color: var(--gray100);
+}
+
+.btn-small-40 {
+  height: 42px;
+  padding: 12px 23px;
+  border-radius: 8px;
+  border: none;
+  font-weight: 600;
+  font-size: 16px;
+  color: var(--gray100);
+}
+
+.btn-small-48 {
+  height: 48px;
+  padding: 12px 23px;
+  border-radius: 8px;
+  border: none;
+  font-weight: 600;
+  font-size: 16px;
+  color: var(--gray100);
+}
+
+.btn-large:disabled,
+.btn-medium:disabled,
+.btn-small-40:disabled,
+.btn-small-48:disabled {
+  background-color: #9ca3af;
+}
+
+.ic-x-btn {
+  background-color: var(--gray400);
+  color: #f9fafb;
+  width: 20px;
+  height: 20px;
+  border-radius: 100%;
   display: flex;
   justify-content: center;
+  align-items: center;
 }
 
 .container {
   max-width: 1200px;
+  margin: 0 auto;
 }
 
 @media screen and (max-width: 1199px) {

vite-project/src/App.jsx

@@ -1,10 +1,9 @@
-import { useState } from "react";
 import "./App.css";
 import { Route, Routes, Navigate } from "react-router";
-import ItemsPage from "./pages/Items-Page/ItemsPage";
-import AddItemPage from "./pages/AddItem-Page/AddItemPage";
+import ItemsPage from "./pages/ItemsPage";
+import AddItemPage from "./pages/AddItemPage";
 import Layout from "./layout/Layout";
-import FreeBoard from "./pages/FreeBoard-Page/FreeBoard";
+import FreeBoard from "./pages/FreeBoardPage";
 
 function App() {
   return (

vite-project/src/utils/api.js → vite-project/src/api/axiosInstance.js

@@ -2,9 +2,11 @@ import axios from "axios";
 
 const VITE_BACKEND_URL = import.meta.env.VITE_BACKEND_URL;
 
-export const instance = axios.create({
+const instance = axios.create({
   baseURL: VITE_BACKEND_URL,
   headers: {
     "Content-Type": "application/json",
   },
 });
+
+export default instance;

vite-project/src/common/ErrorMessage/ErrorMessage.style.css

@@ -0,0 +1,4 @@
+.error-message {
+  color: #f74747;
+  padding: 6px 8px;
+}

vite-project/src/common/ErrorMessage/index.jsx

@@ -0,0 +1,7 @@
+import "./ErrorMessage.style.css";
+
+const ErrorMessage = ({ errorMessage }) => {
+  return <div className="error-message">{errorMessage}</div>;
+};
+
+export default ErrorMessage;

vite-project/src/common/LoadingSpinner/LoadingSpinner.style.css

@@ -0,0 +1,21 @@
+.spinner-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100px;
+}
+
+.spinner {
+  width: 40px;
+  height: 40px;
+  border: 4px solid rgba(0, 0, 0, 0.1);
+  border-left-color: var(--primary100);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

vite-project/src/common/LoadingSpinner/index.jsx

@@ -0,0 +1,11 @@
+import "./LoadingSpinner.style.css";
+
+const LoadingSpinner = () => {
+  return (
+    <div className="spinner-container">
+      <div className="spinner" />
+    </div>
+  );
+};
+
+export default LoadingSpinner;

vite-project/src/common/Navbar/Navbar.style.css

@@ -58,3 +58,9 @@
     padding: 0 16px;
   }
 }
+
+@media screen and (max-width: 767px) {
+  .nav-logo {
+    width: 100px;
+  }
+}

vite-project/src/common/Navbar/Navbar.jsx → vite-project/src/common/Navbar/index.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Link, NavLink } from "react-router";
+import { Link, NavLink, useLocation } from "react-router";
 import "./Navbar.style.css";
 import { useMediaQuery } from "react-responsive";
 
@@ -10,6 +10,7 @@ const navLinks = [
 
 const Navbar = () => {
   const isMobile = useMediaQuery({ maxWidth: 767 });
+  const location = useLocation();
 
   return (
     <header className="header">
@@ -27,7 +28,16 @@ const Navbar = () => {
         <ul className="nav-links">
           {navLinks.map((link) => (
             <li key={link._id}>
-              <NavLink to={link.url}>{link.title}</NavLink>
+              <NavLink
+                to={link.url}
+                className={
+                  location.pathname === "/addItem" && link.url === "/items"
+                    ? "active"
+                    : ""
+                }
+              >
+                {link.title}
+              </NavLink>
             </li>
           ))}
         </ul>

vite-project/src/common/Product-Card/ProductList.jsx → vite-project/src/common/ProductList/index.jsx

@@ -1,10 +1,10 @@
 import React from "react";
 import { Link } from "react-router";
-import ProductCard from "./ProductCard";
-const ProductList = ({ allProducts, className }) => {
+import ProductCard from "../ProductCard";
+const ProductList = ({ products, className }) => {
   return (
     <ul className={className}>
-      {allProducts?.map((product) => (
+      {products?.map((product) => (
         <li key={product.id}>
           <Link>
             <ProductCard product={product} category="all-card-img" />