✅ 리액트 포트폴리오: 확장 고려한 구조

├── assets/                 # 이미지, 폰트 등 정적 자산
├── components/            # 재사용 가능한 UI 컴포넌트 (Button, Card 등)
│   ├── layout/
│   │   ├── Header.jsx
│   │   ├── Footer.jsx
│   │   └── ... (기본 레이아웃 관련)
│   └── common/            # 공통 컴포넌트
│       └── Modal.jsx
├── pages/                 # 라우팅 대상 페이지들 (Main, About, Projects 등)
│   ├── Home.jsx
│   ├── About.jsx
│   ├── Projects.jsx
│   └── NotFound.jsx
├── routes/                # 라우팅 설정 파일
│   └── Router.jsx
├── styles/
│   ├── base/              # reset, tokens, mixins 등
│   │   ├── _font.scss     # 외부 폰트, import 용도
│   │   ├── _mixin.scss
│   │   ├── _reset.scss
│   │   ├── _tokens.scss   # 디자인 시스템 고정 값color, font, spacing, z-index 등
│   │   ├── _typography.scss  #타이틀,본문 등 텍스트 컴포넌트 스타일화
│   │   └── _variables.scss
│   ├── components/        # 컴포넌트 단위 스타일
│   └── pages/             # 페이지 단위 스타일
│       └── _home.scss
│   └── main.scss          # 전체 스타일 엔트리
├── App.jsx
├── main.jsx

Header에 추가할 .hide .scroll

as * ;

@use "./tokens" as *;

⇒ 정의 고민 후 분리

SCSS 관련