setting

src/entities/alarm/ui/login-type-bottom-sheet.tsx

@@ -0,0 +1,67 @@
+import { LoginType } from "@/entities/common/model/types";
+import { IMAGE_ROOT } from "@/shared/constants/common";
+
+export interface LoginTypeBottomSheetProps {
+  loginTypeBottomSheetOn: boolean;
+  setLoginTypeBottomSheetOn: (loginTypeBottomSheetOn: boolean) => void;
+  loginType: LoginType;
+  setLoginType: (loginType: LoginType) => void;
+};
+
+export const LoginTypeBottomSheet = ({
+  loginTypeBottomSheetOn,
+  setLoginTypeBottomSheetOn,
+  loginType,
+  setLoginType
+}: LoginTypeBottomSheetProps) => {
+
+  const onClickToClose = () => {
+    setLoginTypeBottomSheetOn(false);
+  };
+  const onChangeLoginType = (type: LoginType) => {
+    setLoginType(type);
+    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">
+            <ul className="list-style-circle link">
+              <li 
+                className={ `${(loginType === LoginType['Id/Pw'])? 'selected': ''}` }
+                onClick={ () => onChangeLoginType(LoginType['Id/Pw']) }
+              >ID/PW 입력</li>
+              <li
+                className={ `${(loginType === LoginType.Finger)? 'selected': ''}` }
+                onClick={ () => onChangeLoginType(LoginType.Finger) }
+              >지문 인증</li>
+              <li
+                className={ `${(loginType === LoginType.Face)? 'selected': ''}` }
+                onClick={ () => onChangeLoginType(LoginType.Face) }
+              >안면 인증</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};

src/entities/alarm/ui/service-language-bottom-sheet.tsx

@@ -0,0 +1,68 @@
+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>
+    </>
+  );
+};