.hide는 상세 화면이나 다른 화면 넘어갔을 때 안 쓰기 위해서 혹은 뒤로가기로 쓸지 고민이 되서 미리 구현

스크롤 함수는 메인이 길어졌을 때 이펙트를 주고 싶어서

1. scss에 scroll관련 스타일 추가

@use '../base/variables' as *;
@use '../base/tokens' as *;
@use "sass:map";

.header{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: $header-height;
    color: map.get($colors, white);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    z-index: $z-index-header;
    background-color: rgba(map.get($colors, primary), 1);
    transition:background-color 0.3s ease;
    &.scrolled{
        background-color: rgba(map.get($colors, primary), 0.7);
        backdrop-filter: blur(8px); // 배경 흐림 효과
    }
    &.hide{
        display: none;
    }
}

1. Header.jsx에 스크롤 이벤트 추가 // 추가 후 할일 (7/24) // 전에 js를 따로 저장하는 방법에 대해서 프로젝트에 대비했던 거 같은데 이거 확인 // 해더 스타일 완성하기

**import React, { useEffect, useState } from "react";
import {Link} from 'react-router-dom'
import '@/styles/components/_header.scss'
import { useLocation } from "react-router-dom";

const Header = () => {
    const location = useLocation();

    //특정 경로 헤더 숨김
    const hideHeaderRouts = ["./sub"];
    const shoulHideHeader = hideHeaderRouts.includes(location.pathname);

    //스크롤 이벤트
    const [isScrolled, setIsScrolled] = useState(false);

    useEffect(()=>{
        const handleScroll = () =>{
            const scrollTop = window.scrollY;
            setIsScrolled(scrollTop > 0);
        };

        window.addEventListener("scroll", handleScroll);
        return () => window.removeEventListener("scroll", handleScroll);
    }, []);
    
    return(
        <header className={`header ${shoulHideHeader ? "hide" : ""}`}>
            <h1> 조예지 포트폴리오 </h1>
            <nav>
                <Link to="/">홈</Link>
            </nav>
        </header>
    );
}

export default Header;**