Merge pull request #126 from codeit-13-3team/feature/compare-storage

feat: 비교하기 상품 localStorage에 저장

Author: jihye5081

src/pages/compare.tsx

@@ -44,6 +44,17 @@ const Compare = () => {
     gcTime: 0,
   });
 
+  useEffect(() => {
+    const productA = JSON.parse(localStorage.getItem('productA')!);
+    const productB = JSON.parse(localStorage.getItem('productB')!);
+    if (productA !== null) {
+      setProductA(productA);
+    }
+    if (productB !== null) {
+      setProductB(productB);
+    }
+  }, []);
+
   useEffect(() => {
     const handleClickOutside = (e: MouseEvent) => {
       if (
@@ -76,12 +87,14 @@ const Compare = () => {
 
   const handleProductA = (item: Product) => {
     setProductA(item);
+    localStorage.setItem('productA', JSON.stringify(item));
     setProductAName('');
     setHasCompare(false);
     setIsProductADropdownOpen(false);
   };
   const handleProductB = (item: Product) => {
     setProductB(item);
+    localStorage.setItem('productB', JSON.stringify(item));
     setProductBName('');
     setHasCompare(false);
     setIsProductBDropdownOpen(false);
@@ -94,13 +107,15 @@ const Compare = () => {
   const colorClass =
     totals.A === totals.B ? 'text-gray-50' : totals.A > totals.B ? 'text-green' : 'text-pink';
 
-  const handleDeleteProductA = (product: Product) => {
+  const handleDeleteProductA = () => {
     setProductA(null);
+    localStorage.removeItem('productA');
     setHasCompare(false);
   };
 
-  const handleDeleteProductB = (product: Product) => {
+  const handleDeleteProductB = () => {
     setProductB(null);
+    localStorage.removeItem('productB');
     setHasCompare(false);
   };