feat(Context): integrate Product and Category context providers into App

- Wrapped AppContent with ProductContextProvider and CategoryContextProvider to manage product and category states.
- Added TitleUpdater component for dynamic title management.
- Enhanced Content and ProductDetailPage components to utilize the new context for setting and clearing current product and category states.
- Updated ProductDetailWithSocket to pass setCurrentProduct function from context.

src/context/ProductContext.js

@@ -0,0 +1,31 @@
+import React, { createContext, useState, useContext } from 'react';
+
+const ProductContext = createContext({
+  currentProduct: null,
+  setCurrentProduct: () => {}
+});
+
+export const useProduct = () => useContext(ProductContext);
+
+export const withProduct = (Component) => {
+  return (props) => {
+    const productContext = useProduct();
+    return <Component {...props} productContext={productContext} />;
+  };
+};
+
+export const ProductContextProvider = ({ children }) => {
+  const [currentProduct, setCurrentProduct] = useState(null);
+
+  const setCurrentProductWithLog = (product) => {
+    console.log('ProductContext: Setting current product to:', product);
+    setCurrentProduct(product);
+  };
+
+  return (
+    <ProductContext.Provider value={{ currentProduct, setCurrentProduct: setCurrentProductWithLog }}>
+      {children}
+    </ProductContext.Provider>
+  );
+};
+