설정 페이지 및 관련 컴포넌트 다국어(localization) 적용
- 설정 페이지 전체 텍스트 다국어 지원 - 로그인 방식 선택 bottom sheet 다국어 적용 - 서비스 언어 선택 bottom sheet 다국어 적용 - 앱브리지에서 언어 설정 조회 기능 추가 - 페이지 로드 시 앱브리지 언어 설정으로 초기화 - AppLanguage enum 값 변경 (KO/EN → ko/en) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -1,12 +1,12 @@
|
||||
import { APP_LOGIN_TYPE } from "@/entities/common/model/constant";
|
||||
import { LoginType } from "@/entities/common/model/types";
|
||||
import { IMAGE_ROOT } from "@/shared/constants/common";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
export interface LoginTypeBottomSheetProps {
|
||||
loginTypeBottomSheetOn: boolean;
|
||||
setLoginTypeBottomSheetOn: (loginTypeBottomSheetOn: boolean) => void;
|
||||
loginType: LoginType;
|
||||
setLoginType: (loginType: LoginType) => void;
|
||||
setLoginType: (loginType: string) => void;
|
||||
};
|
||||
|
||||
export const LoginTypeBottomSheet = ({
|
||||
@@ -15,11 +15,12 @@ export const LoginTypeBottomSheet = ({
|
||||
loginType,
|
||||
setLoginType
|
||||
}: LoginTypeBottomSheetProps) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const onClickToClose = () => {
|
||||
setLoginTypeBottomSheetOn(false);
|
||||
};
|
||||
const onChangeLoginType = (type: LoginType) => {
|
||||
const onChangeLoginType = (type: string) => {
|
||||
setLoginType(type);
|
||||
onClickToClose();
|
||||
};
|
||||
@@ -30,14 +31,14 @@ export const LoginTypeBottomSheet = ({
|
||||
<div className="bottomsheet">
|
||||
<div className="bottomsheet-header">
|
||||
<div className="bottomsheet-title">
|
||||
<h2>로그인 방식을 선택하세요.</h2>
|
||||
<button
|
||||
className="close-btn"
|
||||
<h2>{t('settings.loginType.title')}</h2>
|
||||
<button
|
||||
className="close-btn"
|
||||
type="button"
|
||||
>
|
||||
<img
|
||||
<img
|
||||
src={ IMAGE_ROOT + '/ico_close.svg' }
|
||||
alt="닫기"
|
||||
alt={t('common.close')}
|
||||
onClick={ onClickToClose }
|
||||
/>
|
||||
</button>
|
||||
@@ -47,14 +48,14 @@ export const LoginTypeBottomSheet = ({
|
||||
<div className="bottomsheet-content">
|
||||
<div className="bottom-section">
|
||||
<ul className="list-style-circle link">
|
||||
<li
|
||||
<li
|
||||
className={ `${(loginType === LoginType.ID)? 'selected': ''}` }
|
||||
onClick={ () => onChangeLoginType(LoginType.ID) }
|
||||
>{ APP_LOGIN_TYPE[LoginType.ID] }</li>
|
||||
onClick={ () => onChangeLoginType('ID') }
|
||||
>{t('settings.loginType.idPassword')}</li>
|
||||
<li
|
||||
className={ `${(loginType === LoginType.BIOMETRIC)? 'selected': ''}` }
|
||||
onClick={ () => onChangeLoginType(LoginType.BIOMETRIC) }
|
||||
>{ APP_LOGIN_TYPE[LoginType.BIOMETRIC] }</li>
|
||||
onClick={ () => onChangeLoginType('BIOMETRIC') }
|
||||
>{t('settings.loginType.biometric')}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,26 +1,31 @@
|
||||
import { APP_LANGUAGE } from "@/entities/common/model/constant";
|
||||
import { AppLanguage } from "@/entities/common/model/types";
|
||||
import { IMAGE_ROOT } from "@/shared/constants/common";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
export interface ServiceLanguageBottomSheetProps {
|
||||
serviceLanguageBottomSheetOn: boolean;
|
||||
setServiceLanguageBottomSheetOn: (serviceLanguageBottomSheetOn: boolean) => void;
|
||||
appLanguage: AppLanguage;
|
||||
setAppLanguage: (appLanguage: AppLanguage) => void;
|
||||
changeLanguage: (language: string) => void | Promise<void>;
|
||||
};
|
||||
|
||||
export const ServiceLanguageBottomSheet = ({
|
||||
serviceLanguageBottomSheetOn,
|
||||
serviceLanguageBottomSheetOn: _serviceLanguageBottomSheetOn,
|
||||
setServiceLanguageBottomSheetOn,
|
||||
appLanguage,
|
||||
setAppLanguage
|
||||
setAppLanguage,
|
||||
changeLanguage
|
||||
}: ServiceLanguageBottomSheetProps) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const onClickToClose = () => {
|
||||
setServiceLanguageBottomSheetOn(false);
|
||||
};
|
||||
const onChangeServiceLanguage = (language: AppLanguage) => {
|
||||
setAppLanguage(language);
|
||||
changeLanguage(language);
|
||||
onClickToClose();
|
||||
};
|
||||
|
||||
@@ -30,14 +35,14 @@ export const ServiceLanguageBottomSheet = ({
|
||||
<div className="bottomsheet">
|
||||
<div className="bottomsheet-header">
|
||||
<div className="bottomsheet-title">
|
||||
<h2>서비스 언어를 선택하세요.</h2>
|
||||
<button
|
||||
className="close-btn"
|
||||
<h2>{t('settings.serviceLanguage.title')}</h2>
|
||||
<button
|
||||
className="close-btn"
|
||||
type="button"
|
||||
>
|
||||
<img
|
||||
<img
|
||||
src={ IMAGE_ROOT + '/ico_close.svg' }
|
||||
alt="닫기"
|
||||
alt={t('common.close')}
|
||||
onClick={ onClickToClose }
|
||||
/>
|
||||
</button>
|
||||
@@ -46,12 +51,8 @@ export const ServiceLanguageBottomSheet = ({
|
||||
|
||||
<div className="bottomsheet-content">
|
||||
<div className="bottom-section">
|
||||
<p className="fs16">※ 미지원 언어일 경우 ENGLISH 자동 설정</p>
|
||||
<p className="fs16">{t('settings.serviceLanguage.notice')}</p>
|
||||
<ul className="list-style-circle link">
|
||||
<li
|
||||
className={ `${(appLanguage === AppLanguage.DEVICE)? 'selected': ''}` }
|
||||
onClick={ () => onChangeServiceLanguage(AppLanguage.DEVICE) }
|
||||
>{ APP_LANGUAGE[AppLanguage.DEVICE] }</li>
|
||||
<li
|
||||
className={ `${(appLanguage === AppLanguage.KO)? 'selected': ''}` }
|
||||
onClick={ () => onChangeServiceLanguage(AppLanguage.KO) }
|
||||
|
||||
Reference in New Issue
Block a user