#25 언어 전환시 페이지 링크 유지

Author: constmoon

frontend/components/core/NavBar.tsx

@@ -84,6 +84,13 @@ export const SubMenuListItem = styled.li`
         padding-top: 0.6rem;
     }
 `
+const LanguageChangeButton = styled.button`
+    background: transparent;
+    border: 0;
+    color: inherit;
+    font-size: inherit;
+    cursor: pointer;
+`
 
 interface NavProps {
     locale: string
@@ -109,6 +116,11 @@ const NavBar = (props: NavProps) => {
         setOpenedSubMenu(openedSubMenu === menuName ? null : menuName)
     }
 
+    const handleChangeLanguage = (lang) => (e) => {
+        e.preventDefault()
+        router.push(router.asPath, undefined, { locale: lang })
+    }
+
     return (
         <Container isTransparent={isHome}>
             <List>
@@ -147,11 +159,19 @@ const NavBar = (props: NavProps) => {
                 })}
                 {props.locale === 'ko' ? (
                     <ListItem>
-                        <Link href="/en">English</Link>
+                        <LanguageChangeButton
+                            onClick={handleChangeLanguage('en')}
+                        >
+                            English
+                        </LanguageChangeButton>
                     </ListItem>
                 ) : (
                     <ListItem>
-                        <Link href="/">한국어</Link>
+                        <LanguageChangeButton
+                            onClick={handleChangeLanguage('ko')}
+                        >
+                            한국어
+                        </LanguageChangeButton>
                     </ListItem>
                 )}
             </List>

frontend/components/core/NavBarMobile.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import { routes, RouteType } from '../../routes/routes'
 import styled from 'styled-components'
 import { useTranslation } from 'react-i18next'
@@ -138,6 +138,14 @@ const MobileSubMenuList = styled(SubMenuList)`
 `
 const MobileSubMenuListItem = styled(SubMenuListItem)``
 
+const LanguageChangeButton = styled.button`
+    background: transparent;
+    border: 0;
+    color: inherit;
+    font-size: inherit;
+    cursor: pointer;
+`
+
 interface NavProps {
     locale: string
 }
@@ -167,6 +175,11 @@ const NavBarMobile = (props: NavProps) => {
             : `/${props.locale}${routePath}`
     }
 
+    const onChangeLanguage = (lang) => (e) => {
+        e.preventDefault()
+        router.push(router.asPath, undefined, { locale: lang })
+    }
+
     return (
         <Container isTransparent={isHome}>
             <ToggleMenu
@@ -224,11 +237,19 @@ const NavBarMobile = (props: NavProps) => {
                         })}
                         {props.locale === 'ko' ? (
                             <ListItem>
-                                <Link href="/en">English</Link>
+                                <LanguageChangeButton
+                                    onClick={onChangeLanguage('en')}
+                                >
+                                    English
+                                </LanguageChangeButton>
                             </ListItem>
                         ) : (
                             <ListItem>
-                                <Link href="/">한국어</Link>
+                                <LanguageChangeButton
+                                    onClick={onChangeLanguage('ko')}
+                                >
+                                    한국어
+                                </LanguageChangeButton>
                             </ListItem>
                         )}
                     </List>