44 lines
1.3 KiB
TypeScript
44 lines
1.3 KiB
TypeScript
"use client";
|
|
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
|
import { useMultiLang } from "@/hooks/useMultiLang";
|
|
|
|
interface LanguageSelectorProps {
|
|
className?: string;
|
|
}
|
|
|
|
export function LanguageSelector({ className }: LanguageSelectorProps) {
|
|
const { userLang, changeLang } = useMultiLang();
|
|
|
|
const languages = [
|
|
{ code: "KR", name: "한국어", flag: "🇰🇷" },
|
|
{ code: "US", name: "English", flag: "🇺🇸" },
|
|
{ code: "JP", name: "日本語", flag: "🇯🇵" },
|
|
{ code: "CN", name: "中文", flag: "🇨🇳" },
|
|
];
|
|
|
|
const handleLanguageChange = (newLang: string) => {
|
|
changeLang(newLang);
|
|
// 언어 변경 시 메뉴 컨텍스트가 자동으로 새로고침됨
|
|
console.log("언어 변경됨:", newLang);
|
|
};
|
|
|
|
return (
|
|
<Select value={userLang} onValueChange={handleLanguageChange}>
|
|
<SelectTrigger className={`${className}`}>
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{languages.map((lang) => (
|
|
<SelectItem key={lang.code} value={lang.code}>
|
|
<span className="flex items-center space-x-2">
|
|
<span>{lang.flag}</span>
|
|
<span>{lang.name}</span>
|
|
</span>
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
);
|
|
}
|