Header와 Footer 만들기

Tip: Gemini CLI로 구현하기 — Header & Footer 컴포넌트

• 프롬프트: gemini "src/components/Header.jsx와 Footer.jsx를 작성해줘. Header는 fixed로 상단에 고정되고, [로고명] 텍스트 클릭 시 홈(/)으로 이동해야 해. Container 컴포넌트(./UI에서 import)를 사용해서 내용을 가운데 정렬해줘. Footer는 하단에 로고와 저작권 문구를 표시해줘. Tailwind CSS를 사용해줘."
  • 사용 가이드: [로고명]을 서비스 이름(예: GOFLEX)으로 바꾼다. 네비게이션 메뉴가 필요하면 프롬프트 마지막에 "헤더에 [메뉴 목록] 링크도 추가해줘"를 덧붙인다.

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. 전체 코드

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>
  );
}

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>
  );
}