스크롤 이벤트) 스크롤을 내리면 화면 밖으로 나가게끔

// turtle_co/src/App.js

import React, { useEffect, useState } from 'react';
import './App.css';

function App() {
    const [scrollPosition, setScrollPosition] = useState(0);

    useEffect(() => {
        const handleScroll = () => {
            setScrollPosition(window.scrollY);
        };

        window.addEventListener('scroll', handleScroll);

        return () => {
            window.removeEventListener('scroll', handleScroll);
        };
    }, []);

    // Calculate the initial transform value to center the text
    const initialTransform = `translateX(-${scrollPosition / 2}px)`;

    return (
        <div className="App">
            <header className="App-header">
                <h1>App-header</h1>
            </header>

            <h1 style={{ transform: initialTransform }}>안녕,</h1>
        </div>
    );
}

export default App;

/* turtle_co/src/App.css */

.App {
  text-align: center;
  height: 3000px;
}

.App-header {
  background-color: #282c34;
  padding: 3px;
  margin-left: 100px;
  margin-right: 100px;
  color: white;
  font-size: 10px;
}