Update

client/craco.config.js

@@ -0,0 +1,8 @@
+const path = require('path')
+module.exports = {
+	webpack: {
+		alias: {
+			'@': path.resolve(__dirname, 'src')
+		}
+	}
+}

client/package.json

@@ -1,54 +1,56 @@
 {
-  "name": "client",
-  "version": "0.1.0",
-  "private": true,
-  "dependencies": {
-    "@headlessui/react": "^1.7.18",
-    "@testing-library/jest-dom": "^5.17.0",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^13.5.0",
-    "@types/jest": "^27.5.2",
-    "@types/node": "^16.18.69",
-    "@types/react": "^18.2.46",
-    "@types/react-dom": "^18.2.18",
-    "framer-motion": "^10.16.16",
-    "js-cookie": "^3.0.5",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-router-dom": "^6.21.1",
-    "react-scripts": "5.0.1",
-    "swiper": "^11.0.5",
-    "tailwind-merge": "^2.2.0",
-    "typescript": "^4.9.5",
-    "web-vitals": "^2.1.4"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
-  "devDependencies": {
-    "autoprefixer": "^10.4.16",
-    "postcss": "^8.4.32",
-    "tailwindcss": "^3.4.0"
-  }
+	"name": "client",
+	"version": "0.1.0",
+	"private": true,
+	"dependencies": {
+		"@headlessui/react": "^1.7.18",
+		"@testing-library/jest-dom": "^5.17.0",
+		"@testing-library/react": "^13.4.0",
+		"@testing-library/user-event": "^13.5.0",
+		"@types/jest": "^27.5.2",
+		"@types/node": "^16.18.69",
+		"@types/react": "^18.2.46",
+		"@types/react-dom": "^18.2.18",
+		"framer-motion": "^10.16.16",
+		"js-cookie": "^3.0.5",
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0",
+		"react-router-dom": "^6.21.1",
+		"react-scripts": "5.0.1",
+		"swiper": "^11.0.5",
+		"tailwind-merge": "^2.2.0",
+		"typescript": "^4.9.5",
+		"web-vitals": "^2.1.4",
+		"zustand": "^4.5.2"
+	},
+	"scripts": {
+		"start": "craco start",
+		"build": "craco build",
+		"test": "craco test",
+		"eject": "craco eject"
+	},
+	"eslintConfig": {
+		"extends": [
+			"react-app",
+			"react-app/jest"
+		]
+	},
+	"browserslist": {
+		"production": [
+			">0.2%",
+			"not dead",
+			"not op_mini all"
+		],
+		"development": [
+			"last 1 chrome version",
+			"last 1 firefox version",
+			"last 1 safari version"
+		]
+	},
+	"devDependencies": {
+		"autoprefixer": "^10.4.16",
+		"postcss": "^8.4.32",
+		"tailwindcss": "^3.4.0",
+		"typescript-transform-paths": "^3.4.7"
+	}
 }

client/src/App.tsx

@@ -1,11 +1,20 @@
-import About from "./components/Home/About/About";
-import Campaign from "./components/Home/Campaign/Campaign";
-import News from './components/Home/News/News';
-import Recommend from "./components/Home/Recommend/Recommend";
+import { useEffect } from "react";
+import { useCart } from './hooks/useCart';
+
+import About from "./components/Home/About";
+import Campaign from "./components/Home/Campaign";
+import News from './components/Home/News';
+import Recommend from "./components/Home/Recommend";
 import ShopList from "./components/Home/ShopList/ShopList";
-import Layout from "./components/Layout/Layout";
+import Layout from "./layouts/AppLayout";
+
+export default function App() {
+  const { getCart } = useCart();
+
+  useEffect(() => {
+    getCart()
+  }, [])
 
-function App() {
   return (
     <Layout>
       <Recommend />
@@ -16,5 +25,3 @@ function App() {
     </Layout>
   );
 }
-
-export default App;

client/src/components/Cart/CartItem/CartItem.tsx → client/src/components/Cart/index.tsx

@@ -1,5 +1,4 @@
-import { useEffect } from 'react';
-import { useCart } from '../../../hooks/useCart';
+import { useCart } from '../../hooks/useCart';
 import { Link } from 'react-router-dom';
 
 const QuantityInput = ({ productId, quantity, max = 99, changeQuantity }) => (

client/src/components/EditForm/PostEditForm.tsx → client/src/components/FormEditPost/index.tsx

@@ -1,5 +1,5 @@
 import { Dialog } from '@headlessui/react';
-import InputWithLabel from '../ui/InputWithLabel';
+import InputWithLabel from '../atoms/Input';
 
 const PostEditForm = ({ isAddOrEdit, setIsAddOrEdit, form, setForm, handleFormUpdate }) => {
   const handleFormChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {

client/src/components/EditForm/ProductEditForm.tsx → client/src/components/FormEditProduct/index.tsx

@@ -1,5 +1,5 @@
 import { Dialog } from '@headlessui/react';
-import InputWithLabel from '../ui/InputWithLabel';
+import InputWithLabel from '../atoms/Input';
 
 const ProductEditForm = ({ isAddOrEdit, setIsAddOrEdit, form, setForm, handleFormUpdate }) => {
 

client/src/components/Home/Recommend/Products/Products.tsx → client/src/components/Home/Recommend/Products/index.tsx

@@ -1,4 +1,4 @@
-import { Link, useNavigate } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import { Autoplay, Navigation } from 'swiper/modules';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import { useCart } from '../../../../hooks/useCart';

client/src/components/Home/Recommend/Recommend.tsx → client/src/components/Home/Recommend/index.tsx

@@ -1,9 +1,9 @@
-import Header from './Header/Header';
+import Header from './Header';
 
 import { Link } from 'react-router-dom';
 import 'swiper/css';
 import 'swiper/css/navigation';
-import RecommendProducts from './Products/Products';
+import RecommendProducts from './Products';
 
 const Recommend = () => {
   return (

client/src/components/Loading/Loading.tsx → client/src/components/Loading/index.tsx

@@ -1,7 +1,7 @@
-import Layout from '../Layout/Layout'
+import AppLayout from '@/layouts/AppLayout'
 
 const Loading = () => (
-  <Layout>
+  <AppLayout>
     <div className='fixed inset-0 z-50 flex items-center justify-center bg-secondary'>
       <svg
         className='w-8 h-8 mr-3 text-primary animate-spin'
@@ -17,7 +17,7 @@ const Loading = () => (
       </svg>
       <span className='text-3xl font-bold text-primary'>Loading...</span>
     </div>
-  </Layout>
+  </AppLayout>
 )
 
 export default Loading

client/src/components/atoms/IconBtn/index.tsx

@@ -0,0 +1,9 @@
+const IconBtn = (
+  { onClick = () => { }, icon, isInMenu = false, text }) => (
+  <button className='flex items-center min-w-fit gap-1 md:gap-0.5' onClick={onClick}>
+    {icon}
+    {text && <span className={`${isInMenu ? 'text-secondary' : ''} text-sm md:text-xs hover:underline`}>{text}</span>}
+  </button>
+)
+
+export default IconBtn;