08 Footer

08. Footer.jsx — 하단 푸터

이번 단계에서 할 일

SNS 아이콘 링크와 저작권 정보가 담긴 푸터를 만듭니다.

피그마 디자인 분석

1
┌──────────────────────────────────────────────────┐
2
│                                                  │
3
│  Thanks           X  IG  YT  LI                  │
4
│                                                  │
5
│  copyright All right                             │
6
│                                                  │
7
└──────────────────────────────────────────────────┘
8
높이: 324px

요소	값
”Thanks” 폰트	20px, #1e1e1e
SNS 아이콘 크기	24px × 24px
아이콘 색상	#1e1e1e
copyright 폰트	14px
배경색	#ffffff

STEP 1 — Footer.jsx 작성

SVG 아이콘을 직접 코드에 씁니다. 복잡해 보이지만 <svg> 태그 안의 <path> 만 수정하면 됩니다.

1
const Footer = () => {
2
  return (
3
    <footer className="footer">
4

5
      {/* 상단: Thanks + SNS 아이콘 */}
6
      <div className="footer-top">
7
        <span className="footer-thanks">Thanks</span>
8

9
        <div className="footer-sns">
10

11
          {/* X (구 트위터) */}
12
          <a href="#" className="footer-sns__item" aria-label="X">
13
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
14
              <path
15
                d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.744l7.73-8.835L1.254 2.25H8.08l4.253 5.622zm-1.161 17.52h1.833L7.084 4.126H5.117z"
16
                fill="#1e1e1e"
17
              />
18
            </svg>
19
          </a>
20

21
          {/* Instagram */}
22
          <a href="#" className="footer-sns__item" aria-label="Instagram">
23
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
24
              <rect x="2" y="2" width="20" height="20" rx="5"
25
                stroke="#1e1e1e" strokeWidth="2"/>
26
              <circle cx="12" cy="12" r="4"
27
                stroke="#1e1e1e" strokeWidth="2"/>
28
              <circle cx="17.5" cy="6.5" r="1"
29
                fill="#1e1e1e"/>
30
            </svg>
31
          </a>
32

33
          {/* YouTube */}
34
          <a href="#" className="footer-sns__item" aria-label="YouTube">
35
            <svg width="24" height="18" viewBox="0 0 24 18" fill="none">
36
              <path
37
                d="M23.498 2.819a3.016 3.016 0 0 0-2.122-2.136C19.505 0 12 0 12 0S4.495 0 2.625.683A3.016 3.016 0 0 0 .502 2.82C0 4.697 0 9 0 9s0 4.303.502 6.181a2.973 2.973 0 0 0 2.123 2.1C4.495 18 12 18 12 18s7.505 0 9.376-.719a2.974 2.974 0 0 0 2.122-2.1C24 13.303 24 9 24 9s0-4.303-.502-6.181zM9.545 12.818V5.182L15.818 9l-6.273 3.818z"
38
                fill="#1e1e1e"
39
              />
40
            </svg>
41
          </a>
42

43
          {/* LinkedIn */}
44
          <a href="#" className="footer-sns__item" aria-label="LinkedIn">
45
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
46
              <rect x="2" y="2" width="20" height="20" rx="3"
47
                stroke="#1e1e1e" strokeWidth="2"/>
48
              <path
49
                d="M7 10v7M7 7v.5M12 17v-4a2 2 0 0 1 4 0v4M12 10v7"
50
                stroke="#1e1e1e" strokeWidth="2" strokeLinecap="round"
51
              />
52
            </svg>
53
          </a>
54

55
        </div>
56
      </div>
57

58
      {/* 하단: 저작권 */}
59
      <p className="footer-copy">copyright All right</p>
60

61
    </footer>
62
  )
63
}
64

65
export default Footer

코드 설명

SVG란?

벡터 이미지입니다. 아무리 크게 확대해도 깨지지 않습니다. 아이콘, 로고에 많이 사용합니다.

1
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
2
  <path d="M..." fill="#1e1e1e" />
3
</svg>

width/height : 표시 크기
viewBox : SVG 내부 좌표 범위 (건드리지 않아도 됨)
path d="..." : 아이콘 모양을 수학적 좌표로 표현한 것

`aria-label` 이란?

스크린리더(시각장애인용 도구)가 읽는 텍스트입니다. 아이콘만 있는 버튼/링크에는 반드시 붙여야 합니다.

1
<a href="#" aria-label="Instagram">
2
  <svg>...</svg>
3
</a>
4
// 스크린리더: "Instagram, 링크"

STEP 2 — CSS 추가

1
/* src/index.css 에 추가 */
2

3
/* ── Footer ──────────────────────────────── */
4

5
.footer {
6
  padding: 60px 24px;
7
  border-top: 1px solid #f0f0f0;
8
}
9

10
/* Thanks와 SNS 아이콘을 양쪽 끝에 배치 */
11
.footer-top {
12
  display: flex;
13
  align-items: center;
14
  justify-content: space-between;
15
  margin-bottom: 40px;
16
}
17

18
.footer-thanks {
19
  font-size: 20px;
20
  font-weight: 500;
21
  color: #1e1e1e;
22
}
23

24
/* SNS 아이콘 목록 */
25
.footer-sns {
26
  display: flex;
27
  gap: 16px;
28
  align-items: center;
29
}
30

31
/* 각 아이콘 링크 */
32
.footer-sns__item {
33
  display: flex;
34
  align-items: center;
35
  justify-content: center;
36
  opacity: 0.7;
37
  transition: opacity 0.2s;
38
}
39

40
.footer-sns__item:hover {
41
  opacity: 1;
42
}
43

44
/* 저작권 텍스트 */
45
.footer-copy {
46
  font-size: 14px;
47
  color: #1e1e1e;
48
}

브라우저 확인

저장 후 브라우저에서:

페이지 하단에 “Thanks” 와 SNS 아이콘 4개가 보입니다
“copyright All right” 텍스트가 아래에 있습니다
아이콘에 마우스를 올리면 진해집니다