SMALL
입력받은 문자열을 가져오는 부분(antd 이용)
// components/translate/LanguageSelector.tsx
import { Select } from 'antd';
interface LanguageOption {
label: string;
value: string;
src: string;
}
interface LanguageSelectorProps {
onChange: (value: string) => void;
value: string | undefined;
}
const languages: LanguageOption[] = [
{ label: "Korea", value: "ko", src: "https://flagcdn.com/h60/kr.png" },
{ label: "English", value: "en", src: "https://flagcdn.com/h60/us.png" },
{ label: "Russia", value: "ru", src: "https://flagcdn.com/h60/ru.png" },
];
const { Option } = Select;
export default function LanguageSelector({ onChange, value }: LanguageSelectorProps) {
return (
<Select
className='w-[70px] py-0.5'
onChange={onChange}
value={value}
>
{languages.map(lang => (
<Option key={lang.value} value={lang.value}>
<p className='flex flex-row items-center'>
<img src={lang.src} alt={lang.label} className="w-6 h-4" />
</p>
</Option>
))}
</Select>
);
}
구글 번역 적용부분
// components/translate/GoogleTranslate.tsx
import { useState, useEffect } from 'react';
import Script from 'next/script';
import LanguageSelector from './LanguageSelector';
interface GoogleTranslateProps {
prefLangCookie: string;
}
const languages = [
{ label: "Korea", value: "ko", src: "https://flagcdn.com/h60/kr.png" },
{ label: "English", value: "en", src: "https://flagcdn.com/h60/us.png" },
{ label: "Russia", value: "ru", src: "https://flagcdn.com/h60/ru.png" },
];
declare global {
interface Window {
googleTranslateElementInit: () => void;
google: any;
}
}
//languages에서 value값 추출
const includedLanguages = languages.map(lang => lang.value).join(",");
// 초기 로딩을 위한 함수
function googleTranslateElementInit() {
new window.google.translate.TranslateElement({
pageLanguage: "auto", includedLanguages
}, "google_translate_element");
}
// 원래 언어설정으로 돌아오기 위한 함수
function resetGoogleTranslate() {
const div = document.querySelector<HTMLDivElement>('.skiptranslate');
if (div) {
const iframe = document.querySelector<HTMLIFrameElement>('iframe[id="\\:1\\.container"]');
if (iframe) {
const innerDoc = iframe.contentDocument || iframe.contentWindow?.document;
if (innerDoc) {
const closeTranslate = innerDoc.querySelector<HTMLAnchorElement>('a[id="\\:1\\.close"]');
if (closeTranslate) {
const event = new MouseEvent('click', {
view: window,
bubbles: true,
cancelable: true,
});
closeTranslate.dispatchEvent(event);
}
}
}
}
}
export default function GoogleTranslate({ prefLangCookie }: GoogleTranslateProps) {
const [langCookie, setLangCookie] = useState(prefLangCookie);
//useEffect를 이용한 초기 함수 설정
useEffect(() => {
window.googleTranslateElementInit = googleTranslateElementInit;
}, []);
//언어설정값에 따라 useState 변경
const handleChange = (value: string) => {
setLangCookie(value);
};
//langCookie값 변화에 따라 실행시키는 이벤트 (언어감지)
useEffect(() => {
if (langCookie === "ko") {
resetGoogleTranslate();
} else {
const element = document.querySelector<HTMLSelectElement>(".goog-te-combo");
if (element) {
element.value = langCookie;
element.dispatchEvent(new Event("change"));
}
}
}, [langCookie]);
const selectedOption = languages.find(lang => lang.value === langCookie);
return (
<div>
<div id="google_translate_element" style={{ visibility: "hidden", width: "1px", height: "1px" }}></div>
<LanguageSelector onChange={handleChange} value={selectedOption?.value} />
{langCookie !== 'ko' && <Script
src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"
strategy="afterInteractive"
/>}
</div>
);
}
필요한 부분에 컴포넌트 호출
import GoogleTranslate from '@/components/translate/GoogleTranslate';
<GoogleTranslate prefLangCookie={'ko'} />
css 덮어쓰기
body {
position: static !important;
top: 0px !important;
}
.skiptranslate{
display: none !important;
}
.VIpgJd-ZVi9od-aZ2wEe-wOHMyf{
display: none !important;
}
실행안되거나 에러날 시 설정파일 만들기
//lib.dom.d.ts (루트경로)
declare global {
interface Window {
google: any;
googleTranslateElementInit: any;
}
}
참고: https://dev.to/kstulgys/translate-website-with-google-translate-kll
Integrating Google Translate into Your Next.js Website
In the global digital landscape, offering your website in multiple languages is not just an...
dev.to
LIST
'일반' 카테고리의 다른 글
| CMAN BUILD (0) | 2024.09.02 |
|---|---|
| Next.js 구글번역을 이용한 웹페이지 번역 (0) | 2024.08.05 |
| 다국어 지원 관련 방법 2 (0) | 2024.07.25 |
| 국제화 관련 사이트 (0) | 2024.07.25 |
| next.js URL 쿼리 매개변수 (0) | 2024.07.24 |
