08. Footer.jsx — 하단 푸터

이번 단계에서 할 일

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

---

피그마 디자인 분석

┌──────────────────────────────────────────────────┐
│                                                  │
│  Thanks           X  IG  YT  LI                  │
│                                                  │
│  copyright All right                             │
│                                                  │
└──────────────────────────────────────────────────┘
높이: 324px

---

STEP 1 — Footer.jsx 작성

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

// src/components/Footer.jsx

const Footer = () => {
  return (
    <footer className="footer">

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

        <div className="footer-sns">

          {/* X (구 트위터) */}
          <a href="#" className="footer-sns__item" aria-label="X">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
              <path
                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"
                fill="#1e1e1e"
              />
            </svg>
          </a>

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

          {/* YouTube */}
          <a href="#" className="footer-sns__item" aria-label="YouTube">
            <svg width="24" height="18" viewBox="0 0 24 18" fill="none">
              <path
                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"
                fill="#1e1e1e"
              />
            </svg>
          </a>

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

        </div>
      </div>

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

    </footer>
  )
}

export default Footer

---

코드 설명

SVG란?

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

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

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

aria-label 이란?

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

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

---

STEP 2 — CSS 추가

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

/* ── Footer ──────────────────────────────── */

.footer {
  padding: 60px 24px;
  border-top: 1px solid #f0f0f0;
}

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

.footer-thanks {
  font-size: 20px;
  font-weight: 500;
  color: #1e1e1e;
}

/* SNS 아이콘 목록 */
.footer-sns {
  display: flex;
  gap: 16px;
  align-items: center;
}

/* 각 아이콘 링크 */
.footer-sns__item {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.footer-sns__item:hover {
  opacity: 1;
}

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

---

브라우저 확인

저장 후 브라우저에서:

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

---