68 lines
2.2 KiB
TypeScript
68 lines
2.2 KiB
TypeScript
import { AppLanguage } from "@/entities/common/model/types";
|
|
import { IMAGE_ROOT } from "@/shared/constants/common";
|
|
|
|
export interface ServiceLanguageBottomSheetProps {
|
|
serviceLanguageBottomSheetOn: boolean;
|
|
setServiceLanguageBottomSheetOn: (serviceLanguageBottomSheetOn: boolean) => void;
|
|
appLanguage: AppLanguage;
|
|
setAppLanguage: (appLanguage: AppLanguage) => void;
|
|
};
|
|
|
|
export const ServiceLanguageBottomSheet = ({
|
|
serviceLanguageBottomSheetOn,
|
|
setServiceLanguageBottomSheetOn,
|
|
appLanguage,
|
|
setAppLanguage
|
|
}: ServiceLanguageBottomSheetProps) => {
|
|
|
|
const onClickToClose = () => {
|
|
setServiceLanguageBottomSheetOn(false);
|
|
};
|
|
const onChangeServiceLanguage = (language: AppLanguage) => {
|
|
setAppLanguage(language);
|
|
onClickToClose();
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div className="bg-dim"></div>
|
|
<div className="bottomsheet">
|
|
<div className="bottomsheet-header">
|
|
<div className="bottomsheet-title">
|
|
<h2>서비스 언어를 선택하세요.</h2>
|
|
<button
|
|
className="close-btn"
|
|
type="button"
|
|
>
|
|
<img
|
|
src={ IMAGE_ROOT + '/ico_close.svg' }
|
|
alt="닫기"
|
|
onClick={ onClickToClose }
|
|
/>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bottomsheet-content">
|
|
<div className="bottom-section">
|
|
<p className="fs16">※ 미지원 언어일 경우 ENGLISH 자동 설정</p>
|
|
<ul className="list-style-circle link">
|
|
<li
|
|
className={ `${(appLanguage === AppLanguage.DEVICE)? 'selected': ''}` }
|
|
onClick={ () => onChangeServiceLanguage(AppLanguage.DEVICE) }
|
|
>기기 설정 언어</li>
|
|
<li
|
|
className={ `${(appLanguage === AppLanguage.KO)? 'selected': ''}` }
|
|
onClick={ () => onChangeServiceLanguage(AppLanguage.KO) }
|
|
>한국어</li>
|
|
<li
|
|
className={ `${(appLanguage === AppLanguage.EN)? 'selected': ''}` }
|
|
onClick={ () => onChangeServiceLanguage(AppLanguage.EN)
|
|
}>ENGLISH</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}; |