refactorVolumeItem

src/components/resumeSection/VolumeItem.tsx

@@ -1,5 +1,5 @@
 // src/components/ResumeSection/VolumeItem.tsx
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState } from 'react';
 import ToggleButton from './ToggleButton';
 
 interface VolumeItemProps {
@@ -10,8 +10,6 @@ interface VolumeItemProps {
 
 const VolumeItem: React.FC<VolumeItemProps> = ({ title, description, isSkill = false }) => {
   const [isOpen, setIsOpen] = useState(false);
-  const contentRef = useRef<HTMLDivElement>(null);
-  const [height, setHeight] = useState(0);
 
   const isArray = Array.isArray(title);
 
@@ -30,41 +28,26 @@ const VolumeItem: React.FC<VolumeItemProps> = ({ title, description, isSkill = f
     <span className={labelStyle}>{title}</span>
   );
 
-  const toggleDescription = () => {
-    if (contentRef.current) {
-        setHeight(isOpen ? 0 : contentRef.current.scrollHeight);
-    }
-    setIsOpen(!isOpen);
-  };
-
-  useEffect(() => {
-    if (isOpen && contentRef.current) {
-        setHeight(contentRef.current.scrollHeight);
-    }
-  }, [isOpen]);
-
   return (
     <div className="mb-4">
       <ToggleButton
         label={label}
         isOpen={isOpen}
-        onClick={toggleDescription}
+        onClick={()=>setIsOpen(!isOpen)}
         className="w-full flex justify-between items-center py-2"
       />
 
-      <div
-        ref={contentRef}
-        style={{ height: isOpen ? `${height}px` : '0px' }}
-        className="overflow-hidden transition-all duration-500 ease-in-out"
-      >
-        <div className="mt-2 text-gray-600">
-          {description.map((desc, index) => (
-            <p key={index} className="mb-2">
-              {desc}
-            </p>
-          ))}
+      {isOpen && (
+        <div className="overflow-hidden transition-all duration-500 ease-in-out">
+          <div className="mt-2 text-gray-600">
+            {description.map((desc, index) => (
+              <p key={index} className="mb-2">
+                {desc}
+              </p>
+            ))}
+          </div>
         </div>
-      </div>
+      )}
     </div>
   );
 };