Footer 꾸미기

코드 및 기능 추가 설명

변경 내용

1. 소셜 링크 추가
   • Email 및 GitHub 링크를 추가.
   • SVG 아이콘을 사용하여 시각적 요소 추가.
2. 접근성 향상
   • 각 링크에 aria-label 속성을 추가해 접근성 강화.
   • target="_blank" 및 rel="noopener noreferrer"를 사용해 보안 강화.
3. 동적 링크 구조
   • links 객체를 사용해 코드 가독성과 재사용성을 높임.

주요 코드 설명

1. 링크 정의

• href는 실제 링크로 연결.
• icon은 SVG로 정의, 크기 및 색상 커스터마이징 가능.

const links = {
  Email: {
    href: "mailto:ticani0610@gmail.com",
    icon: (
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
        <path d="M12 13.065L2 6V18h20V6l-10 7.065z" fill="currentColor" />
        <path d="M22 4H2c-.55 0-1 .45-1 1v14c0 .55.45 1 1 1h20c.55 0 1-.45 1-1V5c0-.55-.45-1-1-1zm0 2.83v.024l-10 7.058L2 6.854V6h20v.83z" />
      </svg>
    ),
  },
  GitHub: {
    href: "https://github.com/Sameta-cani",
    icon: (
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
        <path d="M12 .5C5.4.5 0 5.9 0 12.5c0 5.3 3.4 9.8 8.1 11.3.6.1.8-.2.8-.5v-2.1c-3.3.7-4-1.6-4-1.6-.6-1.5-1.5-1.9-1.5-1.9-1.2-.8.1-.8.1-.8 1.4.1 2.2 1.5 2.2 1.5 1.1 2 3 1.4 3.7 1.1.1-.8.4-1.4.7-1.7-2.7-.3-5.6-1.3-5.6-5.8 0-1.3.5-2.4 1.2-3.2-.1-.3-.5-1.5.1-3 0 0 1-.3 3.3 1.2a11.5 11.5 0 0 1 6 0c2.3-1.5 3.3-1.2 3.3-1.2.6 1.5.2 2.7.1 3 .8.8 1.2 1.9 1.2 3.2 0 4.5-2.8 5.5-5.6 5.8.4.3.8 1 .8 2.1v3.1c0 .3.2.6.8.5a12.5 12.5 0 0 0 8.1-11.3C24 5.9 18.6.5 12 .5z" />
      </svg>
    ),
  },
}

2. 동적 링크 생성

• Object.entries()를 사용해 links 객체를 순회.
• 동적으로 <li>와 <a> 태그를 생성해 확장 가능성을 확보.

{Object.entries(links).map(([key, { href, icon }]) => (
  <li key={key}>
    <a href={href} target="_blank" rel="noopener noreferrer" aria-label={key}>
      {icon}
    </a>
  </li>
))}

비주얼 결과

• Email 및 GitHub 링크가 포함된 푸터.
• SVG 아이콘으로 직관적이고 세련된 디자인.
• 마우스 오버 시 SVG의 기본 상호작용 효과를 유지.

코드의 장점

1. 유지보수 용이
   • 링크를 추가하거나 수정할 때 links 객체만 수정하면 됨.
2. 재사용성 확보
   • 다른 컴포넌트에서도 동일한 링크 구조를 쉽게 활용 가능.
3. 접근성과 보안 강화
   • aria-label로 접근성 지원.
   • 외부 링크에 rel="noopener noreferrer"를 추가해 보안 취약점 방지.