scroll down dissapear issue revised

Author: yurimnim

src/components/atoms/Scrolldown.tsx

@@ -4,17 +4,28 @@ import { motion } from "framer-motion"
 const Scrolldown = () => {
   return (
     <motion.div
-          initial={{ opacity: 0, y: 100 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 2.5, delay: 2 }} className="flex flex-col absolute bottom-7 justify-end items-center">
-      <h5 className='font-sans font-gray-500 font-light text-gray-700'>
-        스크롤을 내려주세요
-        </h5>
-      
-      <div className="flex flex-col items-center">
-        <ChevronsDown strokeWidth={1.5}/>
-      </div>
+    initial={{ opacity: 0, y: 100 }}
+    animate={{ opacity: 1, y: 0 }}
+    transition={{ duration: 2.5, delay: 2 }}
+    className="flex flex-col justify-center items-center z-10"
+  >
+    <h5 className='font-sans font-gray-500 font-light text-gray-700 mb-2'>
+      스크롤을 내려주세요
+    </h5>
+    
+    <motion.div 
+      animate={{ 
+        y: [0, 10, 0] 
+      }}
+      transition={{ 
+        duration: 1.5,
+        repeat: Infinity,
+        ease: "easeInOut"
+      }}
+    >
+      <ChevronsDown strokeWidth={1.5} />
     </motion.div>
+  </motion.div>
   )
 }
 

src/components/pages/PortfolioMain.tsx

@@ -17,7 +17,6 @@ const PortfolioMain = () => {
 
   const [isScrolled, setIsScrolled] = useState(false);
 
-  // Create refs for each section
   const introRef = useRef<HTMLDivElement>(null);
   const helloRef = useRef<HTMLDivElement>(null);
   const projectRef = useRef<HTMLDivElement>(null);
@@ -31,7 +30,6 @@ const PortfolioMain = () => {
     return () => window.removeEventListener('scroll', updateScroll);
   }, []);
 
-
   const handleScroll = (ref: MutableRefObject<HTMLDivElement | null>) => {
     ref.current?.scrollIntoView({ behavior: 'smooth' });
   };
@@ -65,24 +63,24 @@ const PortfolioMain = () => {
         />
       </motion.div>
 
-      <main className="relative w-full min-h-screen">
-        <div ref={introRef} className="w-full flex justify-center">
+      <main className="relative w-full">
+        <div ref={introRef} className="w-full flex justify-center min-h-screen relative">
           <IntroSection />
-        </div>
 
-        <div className='absolute bottom-0 w-full flex justify-center'>
-          <Scrolldown />
+          <div className='absolute bottom-5 w-full flex justify-center'>
+            <Scrolldown />
+          </div>
         </div>
 
-        <div ref={helloRef} className="w-full flex justify-center">
+        <div ref={helloRef} className="w-full flex justify-center min-h-screen">
           <HelloSection />
         </div>
 
-        <div ref={projectRef} className="w-full flex justify-center">
+        <div ref={projectRef} className="w-full flex justify-center min-h-screen">
           <ProjectSection />
         </div>
 
-        <div ref={contactRef} className="w-full flex justify-center">
+        <div ref={contactRef} className="w-full flex justify-center min-h-[100px]">
           <ContactSection />
         </div>
       </main>