diff --git a/src/entities/alarm/ui/login-type-bottom-sheet.tsx b/src/entities/alarm/ui/login-type-bottom-sheet.tsx new file mode 100644 index 0000000..7e86643 --- /dev/null +++ b/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 ( + <> +
+
+
+
+

로그인 방식을 선택하세요.

+ +
+
+ +
+
+
    +
  • onChangeLoginType(LoginType['Id/Pw']) } + >ID/PW 입력
    • +
  • onChangeLoginType(LoginType.Finger) } + >지문 인증
    • +
  • onChangeLoginType(LoginType.Face) } + >안면 인증
    • +
+
+
+
+ + ); +}; \ No newline at end of file diff --git a/src/entities/alarm/ui/service-language-bottom-sheet.tsx b/src/entities/alarm/ui/service-language-bottom-sheet.tsx new file mode 100644 index 0000000..f3fc614 --- /dev/null +++ b/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 ( + <> +
+
+
+
+

서비스 언어를 선택하세요.

+ +
+
+ +
+
+

※ 미지원 언어일 경우 ENGLISH 자동 설정

+
    +
  • onChangeServiceLanguage(AppLanguage.DEVICE) } + >기기 설정 언어
    • +
  • onChangeServiceLanguage(AppLanguage.KO) } + >한국어
    • +
  • onChangeServiceLanguage(AppLanguage.EN) + }>ENGLISH
    • +
+
+
+
+ + ); +}; \ No newline at end of file diff --git a/src/entities/common/model/types.ts b/src/entities/common/model/types.ts index 4c00166..300e7ce 100644 --- a/src/entities/common/model/types.ts +++ b/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' diff --git a/src/pages/setting/setting-page.tsx b/src/pages/setting/setting-page.tsx index 77e43bc..036269b 100644 --- a/src/pages/setting/setting-page.tsx +++ b/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(false); + const [serviceLanguageBottomSheetOn, setServiceLanguageBottomSheetOn] = useState(false); + const [loginType, setLoginType] = useState(LoginType['Id/Pw']); + const [appLanguage, setAppLanguage] = useState(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 = () => { -
+
setLoginTypeBottomSheetOn(true) } + >
로그인 방식 설정
-
ID/PW
+
{ loginType }
-
+
setServiceLanguageBottomSheetOn(true) } + >
서비스 언어 설정
-
기기 설정 언어
+
{ appLanguage }
@@ -219,6 +231,22 @@ export const SettingPage = () => {
+ { !!loginTypeBottomSheetOn && + + } + { !!serviceLanguageBottomSheetOn && + + } ); }; \ No newline at end of file diff --git a/src/shared/ui/assets/css/style.css b/src/shared/ui/assets/css/style.css index b67b168..ddcd9a7 100644 --- a/src/shared/ui/assets/css/style.css +++ b/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; +} \ No newline at end of file