06. Header와 Footer 만들기

1. 이번 편에서 만들 것

2. Footer — 간단한 하단 영역

먼저 쉬운 Footer부터 만든다. src/components/Footer.jsx 파일을 열고 임시 코드를 교체한다.

export function Footer() {
  return (
    <footer className="bg-black border-t border-gray-800 py-8">
      <div className="container mx-auto px-6 text-center">
        <span className="text-xl font-bold text-yellow-400">GOFLEX</span>
        <p className="text-gray-600 text-xs mt-4">© 2026 GOFLEX. All rights reserved.</p>
      </div>
    </footer>
  );
}

3. Header 작성

src/components/Header.jsx 파일을 열고 임시 코드를 모두 지운 뒤 아래를 작성한다.

import { Link } from "react-router";
import { Container } from "./UI";

export function Header() {
  return (
    <header className="fixed w-full top-0 left-0 z-50 bg-black/95">
      <Container className="flex items-center justify-between py-4">
        <Link to="/">
          <span className="text-2xl font-bold text-yellow-400">GOFLEX</span>
        </Link>
      </Container>
    </header>
  );
}

4. 동작 확인

5. 전체 코드

import { Link } from "react-router";
import { Container } from "./UI";

export function Header() {
  return (
    <header className="fixed w-full top-0 left-0 z-50 bg-black/95">
      <Container className="flex items-center justify-between py-4">
        <Link to="/">
          <span className="text-2xl font-bold text-yellow-400">GOFLEX</span>
        </Link>
      </Container>
    </header>
  );
}