56386e6d88
- 3가지 테마 모드 구현 (일반, 다크, 시니어) 및 localStorage 저장 - 언어 선택 기능 추가 (한국어, 영어, 일본어) 국기 아이콘 포함 - 전역 테마 관리를 위한 ThemeContext 생성 - 테마별 CSS 변수 및 시니어 모드 접근성 기능 추가 - 로그인/회원가입 페이지에 ThemeSelect, LanguageSelect 컴포넌트 추가 - ThemeProvider 사용하도록 루트 레이아웃 리팩토링 - 다단계 폼 검증을 포함한 인증 페이지 생성 (로그인, 회원가입) - 다국어 지원 대시보드 페이지 추가 - layout, NavigationMenu, i18n/request의 TypeScript 'any' 타입 경고 수정 - 깨끗한 빌드를 위해 미사용 import 및 변수 제거 - .gitignore 업데이트 및 .env.example 추가 🤖 Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>
59 lines
1.8 KiB
TypeScript
59 lines
1.8 KiB
TypeScript
"use client";
|
|
|
|
import { useRouter, usePathname } from "next/navigation";
|
|
import { useLocale } from "next-intl";
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/components/ui/select";
|
|
import { Globe } from "lucide-react";
|
|
|
|
const languages = [
|
|
{ code: "ko", label: "한국어", flag: "🇰🇷" },
|
|
{ code: "en", label: "English", flag: "🇺🇸" },
|
|
{ code: "ja", label: "日本語", flag: "🇯🇵" },
|
|
];
|
|
|
|
export function LanguageSelect() {
|
|
const router = useRouter();
|
|
const pathname = usePathname();
|
|
const locale = useLocale();
|
|
|
|
const handleLanguageChange = (newLocale: string) => {
|
|
// Remove current locale from pathname
|
|
const pathnameWithoutLocale = pathname.replace(`/${locale}`, "");
|
|
// Navigate to new locale
|
|
router.push(`/${newLocale}${pathnameWithoutLocale}`);
|
|
};
|
|
|
|
const currentLanguage = languages.find((lang) => lang.code === locale);
|
|
|
|
return (
|
|
<Select value={locale} onValueChange={handleLanguageChange}>
|
|
<SelectTrigger className="w-[140px] rounded-xl border-border/50 bg-background/50 backdrop-blur">
|
|
<div className="flex items-center gap-2">
|
|
<Globe className="w-4 h-4" />
|
|
<SelectValue>
|
|
<span className="flex items-center gap-2">
|
|
<span>{currentLanguage?.flag}</span>
|
|
<span className="text-sm">{currentLanguage?.label}</span>
|
|
</span>
|
|
</SelectValue>
|
|
</div>
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{languages.map((lang) => (
|
|
<SelectItem key={lang.code} value={lang.code}>
|
|
<div className="flex items-center gap-2">
|
|
<span>{lang.flag}</span>
|
|
<span>{lang.label}</span>
|
|
</div>
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
);
|
|
} |