feat : 모바일 UI 언어 전환 기능 추가

Author: y00eunji

apps/pyconkr/src/components/layout/Header/Mobile/MobileHeader.tsx

@@ -14,7 +14,7 @@ interface MobileHeaderProps {
 }
 
 export const MobileHeader: React.FC<MobileHeaderProps> = ({ isNavigationOpen = false, onToggleNavigation }) => {
-  const { siteMapNode, language } = useAppContext();
+  const { siteMapNode } = useAppContext();
   const location = useLocation();
   const [internalNavigationOpen, setInternalNavigationOpen] = React.useState(false);
 
@@ -23,11 +23,6 @@ export const MobileHeader: React.FC<MobileHeaderProps> = ({ isNavigationOpen = f
 
   const isMainPath = location.pathname === "/";
 
-  const handleLanguageChange = (newLanguage: string) => {
-    // TODO: 언어 변경 로직 구현
-    console.log("Language changed to:", newLanguage);
-  };
-
   return (
     <>
       <MobileHeaderContainer isOpen={navigationOpen} isMainPath={isMainPath}>
@@ -52,7 +47,7 @@ export const MobileHeader: React.FC<MobileHeaderProps> = ({ isNavigationOpen = f
           </LogoAndTextContainer>
         </LeftContent>
 
-        <MobileLanguageToggle currentLanguage={language} onLanguageChange={handleLanguageChange} isMainPath={isMainPath} />
+        <MobileLanguageToggle isMainPath={isMainPath} />
       </MobileHeaderContainer>
 
       <MobileNavigation isOpen={navigationOpen} onClose={() => toggleNavigation()} siteMapNode={siteMapNode} />

apps/pyconkr/src/components/layout/Header/Mobile/MobileLanguageToggle.tsx

@@ -1,19 +1,26 @@
 import { ButtonBase, styled } from "@mui/material";
 import * as React from "react";
 
+import { LOCAL_STORAGE_LANGUAGE_KEY } from "../../../../consts/local_stroage";
+import { useAppContext } from "../../../../contexts/app_context";
+
 interface MobileLanguageToggleProps {
-  currentLanguage: string;
-  onLanguageChange: (newLanguage: string) => void;
   isMainPath?: boolean;
 }
 
-export const MobileLanguageToggle: React.FC<MobileLanguageToggleProps> = ({ currentLanguage, onLanguageChange, isMainPath = true }) => {
+export const MobileLanguageToggle: React.FC<MobileLanguageToggleProps> = ({ isMainPath = true }) => {
+  const { language, setAppContext } = useAppContext();
+
+  const handleLanguageChange = (newLanguage: "ko" | "en") => {
+    localStorage.setItem(LOCAL_STORAGE_LANGUAGE_KEY, newLanguage);
+    setAppContext((ps) => ({ ...ps, language: newLanguage }));
+  };
   return (
     <ToggleContainer isMainPath={isMainPath}>
-      <LanguageButton isActive={currentLanguage === "ko"} isMainPath={isMainPath} onClick={() => onLanguageChange("ko")}>
+      <LanguageButton isActive={language === "ko"} isMainPath={isMainPath} onClick={() => handleLanguageChange("ko")}>
         KO
       </LanguageButton>
-      <LanguageButton isActive={currentLanguage === "en"} isMainPath={isMainPath} onClick={() => onLanguageChange("en")}>
+      <LanguageButton isActive={language === "en"} isMainPath={isMainPath} onClick={() => handleLanguageChange("en")}>
         EN
       </LanguageButton>
     </ToggleContainer>

apps/pyconkr/src/components/layout/Header/Mobile/MobileNavigation.tsx

@@ -8,7 +8,6 @@ import * as R from "remeda";
 
 import { HamburgerButton } from "./HamburgerButton";
 import { MobileLanguageToggle } from "./MobileLanguageToggle";
-import { useAppContext } from "../../../../contexts/app_context";
 import { SignInButton } from "../../SignInButton";
 
 type MenuType = BackendAPISchemas.NestedSiteMapSchema;
@@ -29,7 +28,6 @@ interface NavigationState {
 }
 
 export const MobileNavigation: React.FC<MobileNavigationProps> = ({ isOpen, onClose, siteMapNode }) => {
-  const { language } = useAppContext();
   const location = useLocation();
   const [navState, setNavState] = React.useState<NavigationState>({
     level: "depth1",
@@ -80,11 +78,6 @@ export const MobileNavigation: React.FC<MobileNavigationProps> = ({ isOpen, onCl
     resetNavigation();
   };
 
-  const handleLanguageChange = (newLanguage: string) => {
-    // TODO: 언어 변경 로직 구현
-    console.log("Language changed to:", newLanguage);
-  };
-
   const renderDepth1Menu = () => {
     if (!siteMapNode) return null;
 
@@ -198,7 +191,7 @@ export const MobileNavigation: React.FC<MobileNavigationProps> = ({ isOpen, onCl
 
         <BottomActions isMainPath={isMainPath}>
           <Stack direction="row" alignItems="center" spacing={6.25}>
-            <MobileLanguageToggle currentLanguage={language} onLanguageChange={handleLanguageChange} isMainPath={isMainPath} />
+            <MobileLanguageToggle isMainPath={isMainPath} />
             <SignInButton isMobile={true} isMainPath={isMainPath} />
           </Stack>
         </BottomActions>