feat(i18n): switch language selector to globe icon dropdown

Replace KO/EN/JA segmented buttons with a globe icon trigger that opens a
dropdown of native language names. Add cursor pointer on trigger and items.
Drop unused tw-animate-css dependency.

Author: gracefullight

bun.lock

@@ -1,5 +1,7 @@
 "use client";
 
+import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
+import { Check, Globe } from "lucide-react";
 import { LOCALES, LOCALE_LABELS } from "@/lib/i18n/i18n.types";
 import { useI18n } from "@/lib/i18n/use-i18n";
 import { cn } from "@/lib/cn";
@@ -9,49 +11,54 @@ interface LanguageSwitcherProps {
   className?: string;
 }
 
-const SHORT_LABELS = {
-  ko: "KO",
-  en: "EN",
-  ja: "JA",
-} as const;
-
 export function LanguageSwitcher({ size = "md", className }: LanguageSwitcherProps) {
   const { locale, setLocale, t } = useI18n();
 
   return (
-    <div
-      role="group"
-      aria-label={t.languageSwitcher.groupAria}
-      className={cn(
-        "inline-flex items-center rounded-full bg-white ring-1 ring-[var(--color-border)]",
-        size === "md" ? "gap-0.5 p-1" : "gap-px p-0.5",
-        className,
-      )}
-    >
-      {LOCALES.map((code) => {
-        const active = code === locale;
-        return (
-          <button
-            key={code}
-            type="button"
-            lang={code}
-            aria-label={LOCALE_LABELS[code]}
-            aria-pressed={active}
-            onClick={() => setLocale(code)}
-            className={cn(
-              "cursor-pointer rounded-full font-semibold tracking-wide transition-colors",
-              size === "md"
-                ? "px-2.5 py-1 text-[11px]"
-                : "px-2 py-0.5 text-[10.5px]",
-              active
-                ? "bg-[var(--color-primary)] text-white"
-                : "text-[var(--color-fg-muted)] hover:text-[var(--color-primary)]",
-            )}
-          >
-            {SHORT_LABELS[code]}
-          </button>
-        );
-      })}
-    </div>
+    <DropdownMenuPrimitive.Root>
+      <DropdownMenuPrimitive.Trigger asChild>
+        <button
+          type="button"
+          aria-label={t.languageSwitcher.groupAria}
+          className={cn(
+            "inline-flex cursor-pointer items-center justify-center rounded-full bg-white text-[var(--color-fg-muted)] ring-1 ring-[var(--color-border)] transition-colors hover:text-[var(--color-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] data-[state=open]:text-[var(--color-primary)]",
+            size === "md" ? "h-9 w-9" : "h-8 w-8",
+            className,
+          )}
+        >
+          <Globe
+            aria-hidden
+            className={size === "md" ? "h-[18px] w-[18px]" : "h-4 w-4"}
+          />
+        </button>
+      </DropdownMenuPrimitive.Trigger>
+      <DropdownMenuPrimitive.Portal>
+        <DropdownMenuPrimitive.Content
+          align="end"
+          sideOffset={8}
+          className="z-50 min-w-[9rem] overflow-hidden rounded-2xl border border-[var(--color-border)] bg-white p-1 shadow-[0_8px_30px_rgba(15,76,58,0.12)]"
+        >
+          {LOCALES.map((code) => {
+            const active = code === locale;
+            return (
+              <DropdownMenuPrimitive.Item
+                key={code}
+                lang={code}
+                onSelect={() => setLocale(code)}
+                className={cn(
+                  "flex cursor-pointer select-none items-center justify-between gap-3 rounded-xl px-3 py-2 text-sm font-medium outline-none transition-colors focus:bg-[var(--color-primary)]/8 data-[highlighted]:bg-[var(--color-primary)]/8",
+                  active
+                    ? "text-[var(--color-primary)]"
+                    : "text-[var(--color-fg-muted)]",
+                )}
+              >
+                {LOCALE_LABELS[code]}
+                {active && <Check aria-hidden className="h-4 w-4" />}
+              </DropdownMenuPrimitive.Item>
+            );
+          })}
+        </DropdownMenuPrimitive.Content>
+      </DropdownMenuPrimitive.Portal>
+    </DropdownMenuPrimitive.Root>
   );
 }

components/site/language-switcher.tsx

@@ -23,7 +23,6 @@
     "react-dom": "19.2.4",
     "shadcn": "^4.7.0",
     "tailwind-merge": "^3.5.0",
-    "tw-animate-css": "^1.4.0",
     "zod": "^4.4.3"
   },
   "devDependencies": {