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>
+    </>
+  );
+};

src/entities/common/model/types.ts

@@ -1,3 +1,13 @@
+export enum AppLanguage {
+  'DEVICE' = 'DEVICE',
+  'KO' = 'KO',
+  'EN' = 'EN'
+};
+export enum LoginType {
+  'Id/Pw' = 'Id/Pw',
+  'Finger' = 'Finger',
+  'Face' = 'Face'
+};
 export enum SuccessResult {
   SUCCESS = 'SUCCESS',
   FAIL = 'FAIL'

src/pages/setting/setting-page.tsx

@@ -1,7 +1,9 @@
 import { useAppAlarmConsentMutation } from '@/entities/alarm/api/use-app-alarm-consent-mutation';
 import { useAppAlarmFindMutation } from '@/entities/alarm/api/use-app-alarm-find-mutation';
 import { AppAlarmConsentParams, AppAlarmConsentResponse, AppAlarmFindParams, AppAlarmFindResponse, MERCHANT_ADMIN_APP } from '@/entities/alarm/model/types';
-import { HeaderType } from '@/entities/common/model/types';
+import { LoginTypeBottomSheet } from '@/entities/alarm/ui/login-type-bottom-sheet';
+import { ServiceLanguageBottomSheet } from '@/entities/alarm/ui/service-language-bottom-sheet';
+import { AppLanguage, HeaderType, LoginType } from '@/entities/common/model/types';
 import { useStore } from '@/shared/model/store';
 import { 
 	useSetHeaderTitle,
@@ -16,6 +18,11 @@ export const SettingPage = () => {
   useSetHeaderType(HeaderType.LeftArrow);
   useSetFooterMode(false);
 
+  const [loginTypeBottomSheetOn, setLoginTypeBottomSheetOn] = useState<boolean>(false);
+  const [serviceLanguageBottomSheetOn, setServiceLanguageBottomSheetOn] = useState<boolean>(false);
+  const [loginType, setLoginType] = useState<LoginType>(LoginType['Id/Pw']);
+  const [appLanguage, setAppLanguage] = useState<AppLanguage>(AppLanguage.KO);
+
   const {mutateAsync: appAlarmFind} = useAppAlarmFindMutation();
   const {mutateAsync: appAlarmConsent} = useAppAlarmConsentMutation();
 
@@ -28,8 +35,7 @@ export const SettingPage = () => {
     '62': false,
     '15': false
   });
-
-
+  
   const onClickPrivacyPolicy = () => {
     window.open('https://www.nicevan.co.kr/privacy-policy', '_blank');
   };
@@ -187,14 +193,20 @@ export const SettingPage = () => {
             </div>
           </div>
 
-          <div className="settings-row link">
+          <div 
+            className="settings-row link"
+            onClick={ () => setLoginTypeBottomSheetOn(true) }
+          >
             <div className="settings-row-title bd-style">로그인 방식 설정</div>
-            <div className="click">ID/PW</div>
+            <div className="click">{ loginType }</div>
           </div>
 
-          <div className="settings-row link nopadding">
+          <div 
+            className="settings-row link nopadding"
+            onClick={ () => setServiceLanguageBottomSheetOn(true) }
+          >
             <div className="settings-row-title bd-style">서비스 언어 설정</div>
-            <div className="click">기기 설정 언어</div>
+            <div className="click">{ appLanguage }</div>
           </div>
 
           <div className="settings-divider"></div>
@@ -219,6 +231,22 @@ export const SettingPage = () => {
           </div>
         </div>
       </main>
+      { !!loginTypeBottomSheetOn &&
+        <LoginTypeBottomSheet
+          loginTypeBottomSheetOn={ loginTypeBottomSheetOn }
+          setLoginTypeBottomSheetOn={ setLoginTypeBottomSheetOn }
+          loginType={ loginType }
+          setLoginType={ setLoginType }
+        ></LoginTypeBottomSheet>
+      }
+      { !!serviceLanguageBottomSheetOn &&
+        <ServiceLanguageBottomSheet
+          serviceLanguageBottomSheetOn={ serviceLanguageBottomSheetOn }
+          setServiceLanguageBottomSheetOn={ setServiceLanguageBottomSheetOn }
+          appLanguage={ appLanguage }
+          setAppLanguage={ setAppLanguage }
+        ></ServiceLanguageBottomSheet>
+      }
     </>
   );
 };

src/shared/ui/assets/css/style.css

@@ -111,9 +111,11 @@ body {}
 .pt-30 {padding-top: 30px !important;}
 .pt-46 {padding-top: 46px !important;}
 .pb-120 {padding-bottom: 120px !important;}
+.pw-26 {padding: 0 26px !important;}
 
 .mt-30 {margin-top: 30px !important;}
 .mt-20 {margin-top: 20px !important;}
+.mt-26 {margin-top: 26px !important;}
 .mt-16 {margin-top: 16px !important;}
 .mt-10 {margin-top: 10px !important;}
 .mb-10 {margin-bottom: 10px !important;}
@@ -1504,6 +1506,7 @@ input[type="radio"] {
 }
 
 .option-list-nopadding {
+    position: relative;
     padding: 0 10px;
 }
 
@@ -2932,6 +2935,10 @@ div .credit-period {
     margin: 0;
 }
 
+.bottom-section .fs16 {
+    font-size: var(--fs-16);
+}
+
 .list-style-circle li {
     position: relative;
     padding-left: 16px;
@@ -2944,6 +2951,26 @@ div .credit-period {
     top: -2px;
 }
 
+.list-style-circle.link li {
+    padding-bottom: 16px;
+    font-weight: 500;
+}
+
+.list-style-circle.link li::before {
+    content: '•';
+    position: absolute;
+    left: 0;
+    top: -2px;
+}
+
+.list-style-circle.link li.selected {
+    color: var(--color-3E6AFC);
+}
+
+.list-style-circle.link li:last-child {
+    padding-bottom: 0;
+}
+
 .close-btn {
     position: absolute;
     right: 0;
@@ -3173,6 +3200,7 @@ div .credit-period {
     margin-top: 26px;
     max-width: 100%;
     box-sizing: border-box;
+    color: var(--color-2D3436);
 }
 
 .notice-text p {
@@ -3257,6 +3285,7 @@ div .credit-period {
 .partial-cancel-table .row-cancel {
     width: 141px;
     text-align: center;
+    padding-right: 1px;
 }
 
 .cancel-input {
@@ -6102,3 +6131,75 @@ ul.txn-amount-detail li span:last-child {
     color: var(--color-2D3436);
 }
 
+/* 24_거래 취소_입금 후 취소 전용 */
+.after-deposit-cancel .section-title {
+    padding: 26px 0 10px;
+    font-weight: var(--fw-600);
+}
+.after-deposit-cancel .kv-list {
+    margin: 0;
+}
+.after-deposit-cancel .kv-row {
+    padding: 0 0 6px !important;
+}
+.after-deposit-cancel .kv-row .k {
+    color: var(--color-2D3436);
+    font-size: var(--fs-16);
+}
+.after-deposit-cancel .kv-row .v {
+    font-size: var(--fs-16);
+}
+.after-deposit-cancel .kv-row .k.red,
+.after-deposit-cancel .kv-row .v.red {
+    color: var(--color-EB5757);
+}
+.after-deposit-cancel .amount-info {
+    background: var(--color-F4F8FF);
+    border-radius: 6px;
+    padding: 16px;
+}
+.after-deposit-cancel .guide-list .desc.dot::before {
+    content: '●';
+    font-size: 3px;
+}
+.after-deposit-cancel .guide-list .desc.dot {
+    position: relative;
+    padding-left: 15px;
+    margin-bottom: 8px;
+    color: var(--color-2D3436);
+}
+.after-deposit-cancel .guide-list .desc.dot:last-child {
+    margin-bottom: 0;
+}
+.after-deposit-cancel .guide-list .link-blue {
+    color: var(--color-4968BD);
+    text-decoration: underline;
+}
+
+/* 토스트바 */
+.toast-container {
+    position: fixed;
+    bottom: 16px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 100%;
+    max-width: 767px;
+    padding: 0 26px;
+    z-index: 2000;
+}
+.toast-item {
+    background: rgba(45, 52, 54, 1);
+    color: var(--color-white);
+    min-height: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: var(--fs-16);
+    font-weight: var(--fw-500);
+    color: var(--color-white);
+    text-align: center;
+    border-radius: 8px;
+}
+.toast-item p {
+    padding: 10px 0;
+}