Fix unexpected header hover effect on react18Icon (#1203)

안녕하세요. React 18 아이콘에서 예상치 못한 호버 이펙트가 발생해서 수정 코드 제안드립니다.


![unexpected-hover](https://github.com/user-attachments/assets/67de3b2b-5e63-40df-a10b-f57d19f3fac9)

해당 문제는 svg width, height이 아주 크게 잡혀있어서 발생했습니다.

```javascript
const react18Icon = (
  <svg
    stroke="currentColor"
    fill="none"
    strokeWidth="2"
    viewBox="0 0 24 24"
    strokeLinecap="round"
    strokeLinejoin="round"
    height="200px" <- 문제 발생 지점
    width="200px" <- 문제 발생 지점
    xmlns="http://www.w3.org/2000/svg">
    <path d="M8 8h1v8"></path>
    <path d="M15 12h-1a1 1 0 0 1 -1 -1v-2a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1zh-1a1 1 0 0 0 -1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1 -1v-2a1 1 0 0 0 -1 -1"></path>
  </svg>
);
```

<br />
<br />
<br />

아마도 이렇게 작성된 것은 다른 svg와 같은 크기인 28로 잡았을 때 react18Icon이 너무 작아서 크게 설정한 것
같습니다.
따라서 svg 속성인 width, height을 직접 변경하지 않고 해당 버튼에 overflow-hidden을 추가해서 문제
해결하는 것이 어떤지 여쭤봅니다!

<div style="display: flex;">
<img width="542" alt="svg-28-28"
src="https://github.com/user-attachments/assets/fa24be30-ca65-4b41-b1ec-d556ad1ad9c2"
/>
<img width="542" alt="svg-200-200"
src="https://github.com/user-attachments/assets/20f5f430-a02b-4c70-8e9a-37731358902d"
/>
</div>

<br />
<br />
<br />

수정 후 결과입니다.


![success](https://github.com/user-attachments/assets/b02d53fc-2ec2-42a2-9d3b-eeeab0eca290)


## 필수 확인 사항

- [x] [기여자 행동 강령 규약<sup>Code of
Conduct</sup>](https://github.com/reactjs/ko.react.dev/blob/main/CODE_OF_CONDUCT.md)
- [x] [기여
가이드라인<sup>Contributing</sup>](https://github.com/reactjs/ko.react.dev/blob/main/CONTRIBUTING.md)
- [x] [공통 스타일 가이드<sup>Universal Style
Guide</sup>](https://github.com/reactjs/ko.react.dev/blob/main/wiki/universal-style-guide.md)
- [x] [번역을 위한 모범 사례<sup>Best Practices for
Translation</sup>](https://github.com/reactjs/ko.react.dev/blob/main/wiki/best-practices-for-translation.md)
- [x] [번역 용어 정리<sup>Translate
Glossary</sup>](https://github.com/reactjs/ko.react.dev/blob/main/wiki/translate-glossary.md)
- [x] [`textlint` 가이드<sup>Textlint
Guide</sup>](https://github.com/reactjs/ko.react.dev/blob/main/wiki/textlint-guide.md)
- [x] [맞춤법 검사<sup>Spelling
Check</sup>](https://nara-speller.co.kr/speller/)

Author: VVSOGI

src/components/Layout/TopNav/TopNav.tsx

@@ -366,7 +366,7 @@ export default function TopNav({
                   <Link
                     href="https://ko-react-exy5xcwjj-fbopensource.vercel.app/"
                     aria-label="React version 18 Korean translation"
-                    className="active:scale-95 transition-transform flex w-12 h-12 rounded-full items-center justify-center hover:bg-primary/5 hover:dark:bg-primary-dark/5 outline-link">
+                    className="active:scale-95 transition-transform flex w-12 h-12 rounded-full items-center justify-center overflow-hidden hover:bg-primary/5 hover:dark:bg-primary-dark/5 outline-link">
                     {react18Icon}
                   </Link>
                 </div>