Type something to search...
to navigateto selectESC to close

06. Header와 Footer 만들기

요약

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

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

1. 이번 편에서 만들 것

컴포넌트기능
Header로고 + 고정 상단 바
Footer하단 로고 + 저작권 표시

2. Footer — 간단한 하단 영역

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

src/components/Footer.jsx
1
export function Footer() {
2
  return (
3
    <footer className="bg-black border-t border-gray-800 py-8">
4
      <div className="container mx-auto px-6 text-center">
5
        <span className="text-xl font-bold text-yellow-400">GOFLEX</span>
6
        <p className="text-gray-600 text-xs mt-4">© 2026 GOFLEX. All rights reserved.</p>
7
      </div>
8
    </footer>
9
  );
10
}
줄설명
3border-t — 요소 상단에 1px 실선을 그린다. border-gray-800으로 어두운 회색 구분선이 된다.
5노란색 로고 텍스트이다.
6text-xs — Tailwind에서 가장 작은 글꼴 크기(0.75rem)이다. 저작권 표시처럼 눈에 띄지 않아야 하는 텍스트에 사용한다.

3. Header 작성

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

src/components/Header.jsx
1
import { Link } from "react-router";
2
import { Container } from "./UI";
3


4
export function Header() {
5
  return (
6
    <header className="fixed w-full top-0 left-0 z-50 bg-black/95">
7
      <Container className="flex items-center justify-between py-4">
8
        <Link to="/">
9
          <span className="text-2xl font-bold text-yellow-400">GOFLEX</span>
10
        </Link>
11
      </Container>
12
    </header>
13
  );
14
}
줄설명
1Link — 페이지 이동 컴포넌트이다. 로고 클릭 시 홈(/)으로 이동하는 데 사용한다.
24편에서 만든 Container 컴포넌트를 가져온다. 내용의 최대 너비를 제한하고 가운데 정렬하는 공통 레이아웃이다.
6fixed — 스크롤해도 화면 상단에 고정된다. w-full top-0 left-0 — 화면 가로 전체에 딱 붙어 있다. z-50 — 다른 요소보다 위에 표시된다. bg-black/95 — 95% 불투명 검정 배경이다.
7Container에 className을 추가한다. flex items-center justify-between — 자식 요소를 가로로 배치하고 양 끝으로 밀어낸다. py-4 — 위아래 안쪽 여백이다.
8-10Link to="/" — 로고 클릭 시 홈 페이지로 이동한다.

4. 동작 확인

확인 항목기대 결과
상단 헤더”GOFLEX” 로고가 검정 배경 위에 표시된다
스크롤헤더가 항상 화면 상단에 고정된다
로고 클릭홈(/)으로 이동한다
하단”GOFLEX” 로고 + 저작권 표시

5. 전체 코드