Merge branch 'main' of https://gitea.bpsoft.co.kr/nicepayments/nice-app-web
This commit is contained in:
focp212@naver.com
@@ -16,7 +16,7 @@ import {
|
||||
export const UserAccountAuthPage = () => {
|
||||
const { navigate } = useNavigate();
|
||||
const location = useLocation();
|
||||
const [tid, setTid] = useState<string>(location?.state.tid);
|
||||
const { tid, mid, usrid } = location.state || {};
|
||||
|
||||
const [activeTab, setActiveTab] = useState<AccountUserTabKeys>(AccountUserTabKeys.AccountAuth);
|
||||
useSetHeaderTitle('사용자 설정');
|
||||
@@ -34,13 +34,15 @@ export const UserAccountAuthPage = () => {
|
||||
<>
|
||||
<main>
|
||||
<div className="tab-content">
|
||||
<div className="tab-pane sub active">
|
||||
<AccountUserTab
|
||||
<div className="tab-pane pt-46 active">
|
||||
<AccountUserTab
|
||||
activeTab={ activeTab }
|
||||
tid={ tid }
|
||||
tid={ tid || '' }
|
||||
mid={ mid || '' }
|
||||
usrid={ usrid || '' }
|
||||
></AccountUserTab>
|
||||
<UserAccountAuthWrap
|
||||
tid={ tid }
|
||||
tid={ tid || '' }
|
||||
></UserAccountAuthWrap>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,14 +1,331 @@
|
||||
import { PATHS } from '@/shared/constants/paths';
|
||||
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
|
||||
import { HeaderType } from '@/entities/common/model/types';
|
||||
import {
|
||||
import {
|
||||
useSetHeaderTitle,
|
||||
useSetHeaderType,
|
||||
useSetFooterMode,
|
||||
useSetOnBack
|
||||
} from '@/widgets/sub-layout/use-sub-layout';
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import { VerificationItem } from '@/entities/account/model/types';
|
||||
import { useUserCreateMutation } from '@/entities/user/api/use-user-create-mutation';
|
||||
import { useUserExistsUseridQuery } from '@/entities/user/api/use-user-exists-userid-query';
|
||||
export const UserAddAccountPage = () => {
|
||||
const { navigate } = useNavigate();
|
||||
const { mutateAsync: userCreate, isPending } = useUserCreateMutation();
|
||||
|
||||
// 폼 상태 관리
|
||||
const [formData, setFormData] = useState({
|
||||
usrid: '',
|
||||
password: '',
|
||||
loginRange: 'MID'
|
||||
});
|
||||
|
||||
// 에러 상태 관리
|
||||
const [errors, setErrors] = useState({
|
||||
usrid: '',
|
||||
password: ''
|
||||
});
|
||||
|
||||
// 사용자 ID 검증을 위한 상태
|
||||
const [shouldCheckUsrid, setShouldCheckUsrid] = useState(false);
|
||||
const [isCheckingUsrid, setIsCheckingUsrid] = useState(false);
|
||||
const debounceTimeout = useRef<NodeJS.Timeout | null>(null);
|
||||
|
||||
// 이메일/전화번호 상태 관리 (기본 1개씩 빈 공란 배치)
|
||||
const [newEmails, setNewEmails] = useState<string[]>(['']);
|
||||
const [newPhones, setNewPhones] = useState<string[]>(['']);
|
||||
const [editableEmailIndex, setEditableEmailIndex] = useState<number>(0);
|
||||
const [editablePhoneIndex, setEditablePhoneIndex] = useState<number>(0);
|
||||
const [readOnlyEmails, setReadOnlyEmails] = useState<Set<number>>(new Set());
|
||||
const [readOnlyPhones, setReadOnlyPhones] = useState<Set<number>>(new Set());
|
||||
|
||||
// 사용자 ID 존재 여부 확인 쿼리
|
||||
const { data: userExistsData, isLoading: isUserExistsLoading } = useUserExistsUseridQuery(
|
||||
shouldCheckUsrid && formData.usrid.trim().length > 0 ? formData.usrid : '',
|
||||
{
|
||||
enabled: shouldCheckUsrid && formData.usrid.trim().length > 0,
|
||||
}
|
||||
);
|
||||
|
||||
// Handle user exists query result
|
||||
useEffect(() => {
|
||||
if (userExistsData && shouldCheckUsrid) {
|
||||
setIsCheckingUsrid(false);
|
||||
if (userExistsData.exists) {
|
||||
setErrors(prev => ({ ...prev, usrid: '동일한 ID가 이미 존재합니다.' }));
|
||||
} else {
|
||||
setErrors(prev => ({ ...prev, usrid: '' }));
|
||||
}
|
||||
setShouldCheckUsrid(false);
|
||||
}
|
||||
}, [userExistsData, shouldCheckUsrid]);
|
||||
|
||||
// 이메일/전화번호 관리 함수들 (user-login-auth-info-wrap 방식)
|
||||
const handleAddEmail = () => {
|
||||
// 현재 편집 중인 항목을 읽기전용으로 고정
|
||||
if (editableEmailIndex >= 0) {
|
||||
setReadOnlyEmails(prev => new Set([...prev, editableEmailIndex]));
|
||||
}
|
||||
|
||||
// 새로운 편집 가능한 항목 추가
|
||||
setEditableEmailIndex(newEmails.length);
|
||||
setNewEmails([...newEmails, '']);
|
||||
};
|
||||
|
||||
const handleAddPhone = () => {
|
||||
// 현재 편집 중인 항목을 읽기전용으로 고정
|
||||
if (editablePhoneIndex >= 0) {
|
||||
setReadOnlyPhones(prev => new Set([...prev, editablePhoneIndex]));
|
||||
}
|
||||
|
||||
// 새로운 편집 가능한 항목 추가
|
||||
setEditablePhoneIndex(newPhones.length);
|
||||
setNewPhones([...newPhones, '']);
|
||||
};
|
||||
|
||||
const handleRemoveNewEmail = (index: number) => {
|
||||
const updatedEmails = newEmails.filter((_, i) => i !== index);
|
||||
setNewEmails(updatedEmails);
|
||||
|
||||
// 읽기전용 인덱스들을 업데이트
|
||||
const updatedReadOnlyEmails = new Set<number>();
|
||||
readOnlyEmails.forEach(readOnlyIndex => {
|
||||
if (readOnlyIndex < index) {
|
||||
updatedReadOnlyEmails.add(readOnlyIndex);
|
||||
} else if (readOnlyIndex > index) {
|
||||
updatedReadOnlyEmails.add(readOnlyIndex - 1);
|
||||
}
|
||||
});
|
||||
setReadOnlyEmails(updatedReadOnlyEmails);
|
||||
|
||||
// 편집 가능한 인덱스 조정
|
||||
if (index === editableEmailIndex) {
|
||||
setEditableEmailIndex(-1);
|
||||
} else if (index < editableEmailIndex) {
|
||||
setEditableEmailIndex(editableEmailIndex - 1);
|
||||
}
|
||||
};
|
||||
|
||||
const handleRemoveNewPhone = (index: number) => {
|
||||
const updatedPhones = newPhones.filter((_, i) => i !== index);
|
||||
setNewPhones(updatedPhones);
|
||||
|
||||
// 읽기전용 인덱스들을 업데이트
|
||||
const updatedReadOnlyPhones = new Set<number>();
|
||||
readOnlyPhones.forEach(readOnlyIndex => {
|
||||
if (readOnlyIndex < index) {
|
||||
updatedReadOnlyPhones.add(readOnlyIndex);
|
||||
} else if (readOnlyIndex > index) {
|
||||
updatedReadOnlyPhones.add(readOnlyIndex - 1);
|
||||
}
|
||||
});
|
||||
setReadOnlyPhones(updatedReadOnlyPhones);
|
||||
|
||||
// 편집 가능한 인덱스 조정
|
||||
if (index === editablePhoneIndex) {
|
||||
setEditablePhoneIndex(-1);
|
||||
} else if (index < editablePhoneIndex) {
|
||||
setEditablePhoneIndex(editablePhoneIndex - 1);
|
||||
}
|
||||
};
|
||||
|
||||
const handleNewEmailChange = (index: number, value: string) => {
|
||||
const updated = [...newEmails];
|
||||
updated[index] = value;
|
||||
setNewEmails(updated);
|
||||
};
|
||||
|
||||
const handleNewPhoneChange = (index: number, value: string) => {
|
||||
const updated = [...newPhones];
|
||||
updated[index] = value;
|
||||
setNewPhones(updated);
|
||||
};
|
||||
|
||||
// 폼 입력 핸들러
|
||||
const handleInputChange = (field: string, value: string) => {
|
||||
setFormData(prev => ({ ...prev, [field]: value }));
|
||||
|
||||
// 사용자 ID의 경우 디바운스 적용하여 자동 검증
|
||||
if (field === 'usrid') {
|
||||
// 기존 타이머 클리어
|
||||
if (debounceTimeout.current) {
|
||||
clearTimeout(debounceTimeout.current);
|
||||
}
|
||||
|
||||
// 에러 초기화
|
||||
setErrors(prev => ({ ...prev, usrid: '' }));
|
||||
|
||||
// 값이 있으면 500ms 후 검증 실행
|
||||
if (value.trim().length > 0) {
|
||||
setIsCheckingUsrid(true);
|
||||
debounceTimeout.current = setTimeout(() => {
|
||||
setShouldCheckUsrid(true);
|
||||
}, 500);
|
||||
} else {
|
||||
setIsCheckingUsrid(false);
|
||||
}
|
||||
} else {
|
||||
// 다른 필드는 에러만 초기화
|
||||
if (errors[field as keyof typeof errors]) {
|
||||
setErrors(prev => ({ ...prev, [field]: '' }));
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 컴포넌트 언마운트 시 타이머 정리
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (debounceTimeout.current) {
|
||||
clearTimeout(debounceTimeout.current);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
// 검증 함수들
|
||||
const isValidEmail = (email: string) => {
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
return emailRegex.test(email);
|
||||
};
|
||||
|
||||
const isValidPhone = (phone: string) => {
|
||||
const phoneRegex = /^010\d{8}$/;
|
||||
return phoneRegex.test(phone);
|
||||
};
|
||||
|
||||
// 이메일 추가 버튼 활성화 조건
|
||||
const isEmailAddButtonEnabled = () => {
|
||||
if (newEmails.length === 0) return true;
|
||||
|
||||
const lastEmailIndex = newEmails.length - 1;
|
||||
const lastEmail = newEmails[lastEmailIndex];
|
||||
|
||||
return lastEmailIndex >= editableEmailIndex &&
|
||||
lastEmail &&
|
||||
lastEmail.trim() &&
|
||||
isValidEmail(lastEmail) &&
|
||||
!hasDuplicateEmail();
|
||||
};
|
||||
|
||||
// 전화번호 추가 버튼 활성화 조건
|
||||
const isPhoneAddButtonEnabled = () => {
|
||||
if (newPhones.length === 0) return true;
|
||||
|
||||
const lastPhoneIndex = newPhones.length - 1;
|
||||
const lastPhone = newPhones[lastPhoneIndex];
|
||||
|
||||
return lastPhoneIndex >= editablePhoneIndex &&
|
||||
lastPhone &&
|
||||
lastPhone.trim() &&
|
||||
isValidPhone(lastPhone) &&
|
||||
!hasDuplicatePhone();
|
||||
};
|
||||
|
||||
// 중복 검증
|
||||
const hasDuplicateEmail = () => {
|
||||
const validEmails = newEmails.filter(e => e.trim());
|
||||
const uniqueEmails = new Set(validEmails);
|
||||
return validEmails.length !== uniqueEmails.size;
|
||||
};
|
||||
|
||||
const hasDuplicatePhone = () => {
|
||||
const validPhones = newPhones.filter(p => p.trim());
|
||||
const uniquePhones = new Set(validPhones);
|
||||
return validPhones.length !== uniquePhones.size;
|
||||
};
|
||||
|
||||
// 삭제 버튼 활성화 조건
|
||||
const isDeleteButtonEnabled = () => {
|
||||
const totalCount = newEmails.length + newPhones.length;
|
||||
return totalCount > 1;
|
||||
};
|
||||
|
||||
// 폼 검증
|
||||
const validateForm = () => {
|
||||
const newErrors = { usrid: '', password: '' };
|
||||
let isValid = true;
|
||||
|
||||
// 사용자 ID 검증
|
||||
if (!formData.usrid.trim()) {
|
||||
newErrors.usrid = 'ID를 입력해 주세요';
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
// 비밀번호 검증
|
||||
if (!formData.password.trim()) {
|
||||
newErrors.password = '비밀번호를 입력해 주세요';
|
||||
isValid = false;
|
||||
} else if (formData.password.length < 8) {
|
||||
newErrors.password = '8자리 이상 입력해 주세요';
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
// 이메일/전화번호 중 하나는 필수
|
||||
const validEmails = newEmails.filter(email => email.trim() && isValidEmail(email));
|
||||
const validPhones = newPhones.filter(phone => phone.trim() && isValidPhone(phone));
|
||||
|
||||
if (validEmails.length === 0 && validPhones.length === 0) {
|
||||
// 최소 하나의 유효한 연락처가 필요
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
// 중복이 있으면 비활성화
|
||||
if (hasDuplicateEmail() || hasDuplicatePhone()) {
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
setErrors(newErrors);
|
||||
return isValid;
|
||||
};
|
||||
|
||||
// 저장 핸들러
|
||||
const handleSave = async () => {
|
||||
if (!validateForm()) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
// verifications 배열 생성
|
||||
const verifications: VerificationItem[] = [];
|
||||
|
||||
newEmails.forEach(email => {
|
||||
if (email.trim() && isValidEmail(email)) {
|
||||
verifications.push({ type: 'EMAIL', contact: email });
|
||||
}
|
||||
});
|
||||
|
||||
newPhones.forEach(phone => {
|
||||
if (phone.trim() && isValidPhone(phone)) {
|
||||
verifications.push({ type: 'PHONE', contact: phone });
|
||||
}
|
||||
});
|
||||
|
||||
const request = {
|
||||
userId: formData.usrid,
|
||||
password: formData.password,
|
||||
loginRange: formData.loginRange,
|
||||
verification: verifications
|
||||
};
|
||||
|
||||
const response = await userCreate(request);
|
||||
|
||||
if (response.status) {
|
||||
// 성공 시 사용자 관리 페이지로 이동
|
||||
navigate(PATHS.account.user.manage);
|
||||
} else if (response.error) {
|
||||
// 에러 처리
|
||||
if (response.error.errKey === 'USER_DUPLICATE') {
|
||||
setErrors(prev => ({ ...prev, usrid: '동일한 ID가 이미 존재합니다.' }));
|
||||
} else {
|
||||
// 기타 에러 처리
|
||||
console.error('User creation failed:', response.error.message);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('User creation error:', error);
|
||||
}
|
||||
};
|
||||
|
||||
useSetHeaderTitle('사용자 추가');
|
||||
useSetHeaderType(HeaderType.LeftArrow);
|
||||
@@ -26,28 +343,54 @@ export const UserAddAccountPage = () => {
|
||||
<div className="user-add">
|
||||
<div className="ua-row">
|
||||
<div className="ua-label">사용자ID <span className="red">*</span></div>
|
||||
<input
|
||||
className="wid-100 error"
|
||||
type="text"
|
||||
placeholder="ID를 입력해 주세요"
|
||||
/>
|
||||
<div style={{ position: 'relative' }}>
|
||||
<input
|
||||
className={`wid-100 ${errors.usrid ? 'error' : ''}`}
|
||||
type="text"
|
||||
placeholder="ID를 입력해 주세요"
|
||||
value={formData.usrid}
|
||||
onChange={(e) => handleInputChange('usrid', e.target.value)}
|
||||
/>
|
||||
{isCheckingUsrid && (
|
||||
<div style={{
|
||||
position: 'absolute',
|
||||
right: '10px',
|
||||
top: '50%',
|
||||
transform: 'translateY(-50%)',
|
||||
fontSize: '12px',
|
||||
color: '#666'
|
||||
}}>
|
||||
확인 중...
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="ua-help error">동일한 ID가 이미 존재합니다.</div>
|
||||
{errors.usrid && <div className="ua-help error">{errors.usrid}</div>}
|
||||
{!errors.usrid && formData.usrid && userExistsData && !userExistsData.exists && (
|
||||
<div className="ua-help" style={{ color: '#78D197' }}>사용 가능한 ID입니다.</div>
|
||||
)}
|
||||
|
||||
<div className="ua-row">
|
||||
<div className="ua-label">비밀번호 <span className="red">*</span></div>
|
||||
<input
|
||||
className="wid-100 error"
|
||||
<input
|
||||
className={`wid-100 ${errors.password ? 'error' : ''}`}
|
||||
type="password"
|
||||
placeholder="8자리 이상 입력해 주세요"
|
||||
value={formData.password}
|
||||
onChange={(e) => handleInputChange('password', e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="ua-help error">(오류 결과 메시지)</div>
|
||||
{errors.password && <div className="ua-help error">{errors.password}</div>}
|
||||
|
||||
<div className="ua-row">
|
||||
<div className="ua-label">로그인 범위</div>
|
||||
<select className="wid-100">
|
||||
<option>MID + GID</option>
|
||||
<select
|
||||
className="wid-100"
|
||||
value={formData.loginRange}
|
||||
onChange={(e) => handleInputChange('loginRange', e.target.value)}
|
||||
>
|
||||
<option value="MID">MID</option>
|
||||
<option value="MID + GID">MID + GID</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
@@ -61,55 +404,77 @@ export const UserAddAccountPage = () => {
|
||||
<div className="ua-group">
|
||||
<div className="ua-group-header">
|
||||
<div className="ua-group-title">이메일 주소</div>
|
||||
<button
|
||||
className="ic20 plus"
|
||||
type="button"
|
||||
<button
|
||||
className="ic20 plus"
|
||||
type="button"
|
||||
aria-label="이메일 추가"
|
||||
onClick={handleAddEmail}
|
||||
disabled={!isEmailAddButtonEnabled()}
|
||||
></button>
|
||||
</div>
|
||||
<div className="ua-input-row">
|
||||
<input
|
||||
className="wid-100"
|
||||
type="text"
|
||||
placeholder="example@domain.com"
|
||||
/>
|
||||
<button
|
||||
className="icon-btn minus"
|
||||
type="button"
|
||||
aria-label="삭제"
|
||||
></button>
|
||||
</div>
|
||||
{newEmails.map((email, index) => (
|
||||
<div className="ua-input-row" key={index}>
|
||||
<input
|
||||
className="wid-100"
|
||||
type="text"
|
||||
placeholder="example@domain.com"
|
||||
value={email}
|
||||
onChange={(e) => handleNewEmailChange(index, e.target.value)}
|
||||
readOnly={readOnlyEmails.has(index) || index !== editableEmailIndex}
|
||||
/>
|
||||
<button
|
||||
className="icon-btn minus"
|
||||
type="button"
|
||||
aria-label="삭제"
|
||||
onClick={() => handleRemoveNewEmail(index)}
|
||||
disabled={!isDeleteButtonEnabled()}
|
||||
></button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="ua-group">
|
||||
<div className="ua-group-header">
|
||||
<div className="ua-group-title">휴대폰 번호</div>
|
||||
<button
|
||||
className="ic20 plus"
|
||||
type="button"
|
||||
<button
|
||||
className="ic20 plus"
|
||||
type="button"
|
||||
aria-label="휴대폰 추가"
|
||||
onClick={handleAddPhone}
|
||||
disabled={!isPhoneAddButtonEnabled()}
|
||||
></button>
|
||||
</div>
|
||||
<div className="ua-input-row">
|
||||
<input
|
||||
className="wid-100"
|
||||
type="text"
|
||||
placeholder="01012345678"
|
||||
/>
|
||||
<button
|
||||
className="icon-btn minus"
|
||||
type="button"
|
||||
aria-label="삭제"
|
||||
></button>
|
||||
</div>
|
||||
{newPhones.map((phone, index) => (
|
||||
<div className="ua-input-row" key={index}>
|
||||
<input
|
||||
className="wid-100"
|
||||
type="text"
|
||||
placeholder="01012345678"
|
||||
value={phone}
|
||||
onChange={(e) => handleNewPhoneChange(index, e.target.value)}
|
||||
readOnly={readOnlyPhones.has(index) || index !== editablePhoneIndex}
|
||||
/>
|
||||
<button
|
||||
className="icon-btn minus"
|
||||
type="button"
|
||||
aria-label="삭제"
|
||||
onClick={() => handleRemoveNewPhone(index)}
|
||||
disabled={!isDeleteButtonEnabled()}
|
||||
></button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="apply-row">
|
||||
<button
|
||||
<button
|
||||
className="btn-50 btn-blue flex-1"
|
||||
type="button"
|
||||
>저장</button>
|
||||
type="button"
|
||||
onClick={handleSave}
|
||||
disabled={isPending}
|
||||
>
|
||||
{isPending ? '저장 중...' : '저장'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useLocation } from 'react-router';
|
||||
import { useState } from 'react';
|
||||
import { useLocation } from 'react-router-dom';
|
||||
import { PATHS } from '@/shared/constants/paths';
|
||||
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
|
||||
import { AccountUserTab } from '@/entities/account/ui/account-user-tab';
|
||||
import { UserLoginAuthInfoWrap } from '@/entities/account/ui/user-login-auth-info-wrap';
|
||||
import { AccountUserTabKeys } from '@/entities/account/model/types';
|
||||
import { HeaderType } from '@/entities/common/model/types';
|
||||
import {
|
||||
import {
|
||||
useSetHeaderTitle,
|
||||
useSetHeaderType,
|
||||
useSetFooterMode,
|
||||
@@ -14,9 +14,9 @@ import {
|
||||
} from '@/widgets/sub-layout/use-sub-layout';
|
||||
|
||||
export const UserLoginAuthInfoPage = () => {
|
||||
const { navigate } = useNavigate();
|
||||
const location = useLocation();
|
||||
const [tid, setTid] = useState<string>(location?.state.tid);
|
||||
const { mid, usrid, tid } = location.state || {};
|
||||
const { navigate } = useNavigate();
|
||||
|
||||
const [activeTab, setActiveTab] = useState<AccountUserTabKeys>(AccountUserTabKeys.LoginAuthInfo);
|
||||
useSetHeaderTitle('사용자 설정');
|
||||
@@ -26,21 +26,36 @@ export const UserLoginAuthInfoPage = () => {
|
||||
navigate(PATHS.account.user.manage);
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
console.log('tid : ', tid);
|
||||
}, []);
|
||||
// const { mutateAsync: userFindAuthMethod } = useUserFindAuthMethodMutation();
|
||||
|
||||
// const callUserFindAuthMethod = (mid: string, usrid: string) => {
|
||||
// let parms: UserFindAuthMethodParams = {
|
||||
// mid: mid,
|
||||
// usrid: usrid
|
||||
// }
|
||||
// userFindAuthMethod(params).then((rs: UserFindAuthMethodResponse) => {
|
||||
// console.log("User Find Auth Method: ", rs)
|
||||
// });
|
||||
// }
|
||||
|
||||
// useEffect(() => {
|
||||
// callUserFindAuthMethod(mid, usrid);
|
||||
// }, [mid, usrid]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<main>
|
||||
<div className="tab-content">
|
||||
<div className="tab-pane sub active">
|
||||
<AccountUserTab
|
||||
<div className="tab-pane pt-46 active">
|
||||
<AccountUserTab
|
||||
activeTab={ activeTab }
|
||||
tid={ tid }
|
||||
tid={tid || ''}
|
||||
mid={mid || ''}
|
||||
usrid={usrid || ''}
|
||||
></AccountUserTab>
|
||||
<UserLoginAuthInfoWrap
|
||||
tid={ tid }
|
||||
mid={mid || ''}
|
||||
usrid={usrid || ''}
|
||||
></UserLoginAuthInfoWrap>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -12,31 +12,23 @@ import {
|
||||
|
||||
export const UserMenuAuthPage = () => {
|
||||
const { navigate } = useNavigate();
|
||||
const location = useLocation();
|
||||
const [tid, setTid] = useState<string>(location?.state.tid);
|
||||
const [menuId, setMenuId] = useState<string>(location?.state.menuId);
|
||||
|
||||
useSetHeaderTitle('사용자 설정');
|
||||
useSetHeaderType(HeaderType.LeftArrow);
|
||||
useSetFooterMode(true);
|
||||
useSetOnBack(() => {
|
||||
navigate(PATHS.account.user.accountAuth, {
|
||||
state: {
|
||||
tid: tid
|
||||
}
|
||||
});
|
||||
navigate(PATHS.account.user.accountAuth);
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
console.log('tid : ', tid);
|
||||
console.log('menuId : ', menuId);
|
||||
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<main>
|
||||
<div className="tab-content">
|
||||
<div className="tab-pane sub active">
|
||||
<div className="tab-pane pt-46 active">
|
||||
<div className="ing-list sev">
|
||||
<div className="desc service-tip">메뉴별 사용 권한을 설정해 주세요.</div>
|
||||
<div className="desc service-tip">선택한 권한에 따라 기능 이용이 제한됩니다.</div>
|
||||
|
||||
@@ -7,7 +7,7 @@ import { ArsDetailPage } from './ars/detail-page';
|
||||
import { ArsRequestPage } from './ars/request-page';
|
||||
import { ArsRequestSuccessPage } from './ars/request-success-page';
|
||||
import { KeyInPaymentPage } from './key-in-payment/key-in-payment-page';
|
||||
import { SmsPaymentNotificationPage } from './sms-payment-notification/sms-payment-notification-page';
|
||||
import { SmsPaymentPage } from './sms-payment/sms-payment-page';
|
||||
import { AccountHolderSearchPage } from './account-holder-search/account-holder-search-page';
|
||||
import { AccountHolderAuthPage } from './account-holder-auth/account-holder-auth-page';
|
||||
import { LinkPaymentHistoryPage } from './link-payment/link-payment-history-page';
|
||||
@@ -56,7 +56,7 @@ export const AdditionalServicePages = () => {
|
||||
<Route path={ROUTE_NAMES.additionalService.keyInPayment.request} element={<KeyInPaymentRequestPage />} />
|
||||
<Route path={ROUTE_NAMES.additionalService.keyInPayment.requestSuccess} element={<KeyInPaymentRequestSuccessPage />} />
|
||||
</Route>
|
||||
<Route path={ROUTE_NAMES.additionalService.smsPaymentNotification} element={<SmsPaymentNotificationPage />} />
|
||||
<Route path={ROUTE_NAMES.additionalService.smsPaymentNotification} element={<SmsPaymentPage />} />
|
||||
<Route path={ROUTE_NAMES.additionalService.accountHolderSearch.base}>
|
||||
<Route path={ROUTE_NAMES.additionalService.accountHolderSearch.list} element={<AccountHolderSearchPage />} />
|
||||
<Route path={ROUTE_NAMES.additionalService.accountHolderSearch.detail} element={<AccountHolderSearchDetailPage />} />
|
||||
|
||||
@@ -1,149 +0,0 @@
|
||||
import { useState } from 'react';
|
||||
import { IMAGE_ROOT } from '@/shared/constants/common';
|
||||
import { SmsPaymentDetailResend } from '@/entities/additional-service/ui/sms-payment-detail-resend';
|
||||
import { HeaderType } from '@/entities/common/model/types';
|
||||
import {
|
||||
useSetHeaderTitle,
|
||||
useSetHeaderType,
|
||||
useSetFooterMode
|
||||
} from '@/widgets/sub-layout/use-sub-layout';
|
||||
|
||||
export const SmsPaymentNotificationPage = () => {
|
||||
const [bottomSmsPaymentDetailResendOn, setBottomSmsPaymentDetailResendOn] = useState<boolean>(false)
|
||||
|
||||
useSetHeaderTitle('SMS 결제 통보');
|
||||
useSetHeaderType(HeaderType.LeftArrow);
|
||||
useSetFooterMode(true);
|
||||
|
||||
const onClickToShowDetail = () => {
|
||||
setBottomSmsPaymentDetailResendOn(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<main>
|
||||
<div className="tab-content">
|
||||
<div className="tab-pane sub active">
|
||||
<section className="summary-section no-border">
|
||||
<div className="credit-controls">
|
||||
<div>
|
||||
<input
|
||||
className="credit-period"
|
||||
type="text"
|
||||
value="2025.06.01 ~ 2025.06.31"
|
||||
readOnly={ true }
|
||||
/>
|
||||
<button
|
||||
className="filter-btn"
|
||||
aria-label="필터"
|
||||
>
|
||||
<img
|
||||
src={ IMAGE_ROOT + '/ico_setting.svg' }
|
||||
alt="검색옵션"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
className="download-btn"
|
||||
aria-label="다운로드"
|
||||
>
|
||||
<img
|
||||
src={ IMAGE_ROOT + '/ico_download.svg' }
|
||||
alt="다운로드"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
<section className="transaction-list">
|
||||
<div className="date-group">
|
||||
<div className="date-header">25.06.08(일)</div>
|
||||
<div
|
||||
className="transaction-item approved"
|
||||
onClick={ () => onClickToShowDetail() }
|
||||
>
|
||||
<div className="transaction-status">
|
||||
<div className="status-dot blue"></div>
|
||||
</div>
|
||||
<div className="transaction-content">
|
||||
<div className="transaction-title">김*환(7000)</div>
|
||||
<div className="transaction-details">
|
||||
<span>nictest01m</span>
|
||||
<span className="separator">ㅣ</span>
|
||||
<span>가상계좌 요청</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="resend-label">재발송</div>
|
||||
</div>
|
||||
|
||||
<div className="transaction-item refund">
|
||||
<div className="transaction-status">
|
||||
<div className="status-dot gray"></div>
|
||||
</div>
|
||||
<div className="transaction-content">
|
||||
<div className="transaction-title">최*길(010333*****)</div>
|
||||
<div className="transaction-details">
|
||||
<span>nictest01m</span>
|
||||
<span className="separator">ㅣ</span>
|
||||
<span>가상계좌 요청+입금</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="resend-label">재발송</div>
|
||||
</div>
|
||||
|
||||
<div className="transaction-item approved">
|
||||
<div className="transaction-status">
|
||||
<div className="status-dot blue"></div>
|
||||
</div>
|
||||
<div className="transaction-content">
|
||||
<div className="transaction-title">박*준(010333*****)</div>
|
||||
<div className="transaction-details">
|
||||
<span>nictest01m</span>
|
||||
<span className="separator">ㅣ</span>
|
||||
<span>가상계좌 요청+입금</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="resend-label">재발송</div>
|
||||
</div>
|
||||
|
||||
<div className="transaction-item refund">
|
||||
<div className="transaction-status">
|
||||
<div className="status-dot gray"></div>
|
||||
</div>
|
||||
<div className="transaction-content">
|
||||
<div className="transaction-title">이*신(010333*****)</div>
|
||||
<div className="transaction-details">
|
||||
<span>nictest01m</span>
|
||||
<span className="separator">ㅣ</span>
|
||||
<span>가상계좌 요청</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="resend-label">재발송</div>
|
||||
</div>
|
||||
|
||||
<div className="transaction-item approved">
|
||||
<div className="transaction-status">
|
||||
<div className="status-dot blue"></div>
|
||||
</div>
|
||||
<div className="transaction-content">
|
||||
<div className="transaction-title">김*환(010333*****)</div>
|
||||
<div className="transaction-details">
|
||||
<span>nictest01m</span>
|
||||
<span className="separator">|</span>
|
||||
<span>가상계좌 요청</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="resend-label">재발송</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<SmsPaymentDetailResend
|
||||
bottomSmsPaymentDetailResendOn={ bottomSmsPaymentDetailResendOn }
|
||||
setBottomSmsPaymentDetailResendOn={ setBottomSmsPaymentDetailResendOn }
|
||||
></SmsPaymentDetailResend>
|
||||
</>
|
||||
);
|
||||
};
|
||||
202
src/pages/additional-service/sms-payment/sms-payment-page.tsx
Normal file
202
src/pages/additional-service/sms-payment/sms-payment-page.tsx
Normal file
@@ -0,0 +1,202 @@
|
||||
import moment from 'moment';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
|
||||
import { IMAGE_ROOT } from '@/shared/constants/common';
|
||||
import { SmsPaymentDetailResend } from '@/entities/additional-service/ui/sms-payment/sms-payment-detail-resend';
|
||||
import { HeaderType, SortByKeys } from '@/entities/common/model/types';
|
||||
import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
|
||||
import {
|
||||
useSetHeaderTitle,
|
||||
useSetHeaderType,
|
||||
useSetFooterMode
|
||||
} from '@/widgets/sub-layout/use-sub-layout';
|
||||
import { SmsPaymentListItem, SmsPaymentSearchType, SmsType, ExtensionSmsDetailResponse } from '@/entities/additional-service/model/sms-payment/types';
|
||||
import { useExtensionSmsListMutation } from '@/entities/additional-service/api/sms-payment/use-extension-sms-list-mutation';
|
||||
import { useExtensionSmsDownloadExcelMutation } from '@/entities/additional-service/api/sms-payment/use-extension-sms-download-excel-mutation';
|
||||
import { SmsPaymentList } from '@/entities/additional-service/ui/sms-payment/sms-payment-list';
|
||||
import { SmsPaymentFilter } from '@/entities/additional-service/ui/sms-payment/sms-payment-filter';
|
||||
import { useExtensionSmsDetailMutation } from '@/entities/additional-service/api/sms-payment/use-extension-sms-detail-mutation';
|
||||
|
||||
|
||||
export const SmsPaymentPage = () => {
|
||||
const { navigate } = useNavigate();
|
||||
const [bottomSmsPaymentDetailResendOn, setBottomSmsPaymentDetailResendOn] = useState<boolean>(false)
|
||||
|
||||
const [sortBy, setSortBy] = useState<SortByKeys>(SortByKeys.New);
|
||||
const [listItems, setListItems] = useState({});
|
||||
const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
|
||||
const [filterOn, setFilterOn] = useState<boolean>(false);
|
||||
const [mid, setMid] = useState<string>('nictest001m');
|
||||
const [tid, setTid] = useState<string>('');
|
||||
const [searchCl, setSearchCl] = useState<SmsPaymentSearchType>(SmsPaymentSearchType.BUYER_NAME)
|
||||
const [searchValue, setSearchValue] = useState<string>('')
|
||||
const [fromDate, setFromDate] = useState(moment().format('YYYY-MM-DD'));
|
||||
const [toDate, setToDate] = useState(moment().format('YYYY-MM-DD'));
|
||||
const [smsCl, setSmsCl] = useState<SmsType>(SmsType.ALL);
|
||||
const [smsDetailData, setSmsDetailData] = useState<ExtensionSmsDetailResponse | null>(null);
|
||||
|
||||
const { mutateAsync: smsPaymentList } = useExtensionSmsListMutation();
|
||||
const { mutateAsync: downloadExcel } = useExtensionSmsDownloadExcelMutation();
|
||||
const { mutateAsync: detail } = useExtensionSmsDetailMutation();
|
||||
|
||||
useSetHeaderTitle('SMS 결제 통보');
|
||||
useSetHeaderType(HeaderType.LeftArrow);
|
||||
useSetFooterMode(true);
|
||||
|
||||
const callList = (option?: {
|
||||
sortBy?: string,
|
||||
val?: string
|
||||
}) => {
|
||||
pageParam.sortBy = (option?.sortBy) ? option.sortBy : sortBy;
|
||||
setPageParam(pageParam);
|
||||
|
||||
let listParams = {
|
||||
mid: mid,
|
||||
searchCl: searchCl,
|
||||
searchValue: searchValue,
|
||||
fromDate: fromDate,
|
||||
toDate: toDate,
|
||||
smsCl: smsCl === SmsType.ALL ? '' : smsCl,
|
||||
page: pageParam
|
||||
}
|
||||
|
||||
smsPaymentList(listParams).then((rs) => {
|
||||
setListItems(assembleData(rs.content));
|
||||
})
|
||||
}
|
||||
|
||||
const assembleData = (content: Array<SmsPaymentListItem>) => {
|
||||
let data: any = {};
|
||||
if (content && content.length > 0) {
|
||||
for (let i = 0; i < content?.length; i++) {
|
||||
let paymentDate = content[i]?.paymentDate?.substring(0, 8);
|
||||
let groupDate = moment(paymentDate).format('YYYYMMDD');
|
||||
if (!!groupDate && !data.hasOwnProperty(groupDate)) {
|
||||
data[groupDate] = [];
|
||||
}
|
||||
if (!!groupDate && data.hasOwnProperty(groupDate)) {
|
||||
data[groupDate].push(content[i]);
|
||||
}
|
||||
}
|
||||
}
|
||||
console.log('Data : ', data)
|
||||
return data;
|
||||
};
|
||||
|
||||
const callDetail = (selectedMid: string, selectedTid: string) => {
|
||||
console.log("Selected Mid: ", selectedMid, "Selected Tid: ", selectedTid)
|
||||
detail({
|
||||
mid: selectedMid,
|
||||
tid: selectedTid
|
||||
}).then((rs) => {
|
||||
console.log('Detail info : ', rs)
|
||||
setSmsDetailData(rs);
|
||||
})
|
||||
}
|
||||
|
||||
const onClickToDownloadExcel = () => {
|
||||
downloadExcel({
|
||||
mid: mid,
|
||||
searchCl: searchCl,
|
||||
searchValue: searchValue,
|
||||
fromDate: fromDate,
|
||||
toDate: toDate,
|
||||
smsCl: smsCl === SmsType.ALL ? '' : smsCl,
|
||||
}).then((rs) => {
|
||||
console.log('Excel Dowload Status : ' + rs.status)
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
const onClickToOpenFilter = () => {
|
||||
setFilterOn(!filterOn);
|
||||
};
|
||||
|
||||
const onClickToSort = (sort: SortByKeys) => {
|
||||
setSortBy(sort);
|
||||
callList({ sortBy: sort })
|
||||
};
|
||||
|
||||
|
||||
const onClickToShowDetail = (selectedMid: string, selectedTid: string) => {
|
||||
setTid(selectedTid);
|
||||
callDetail(selectedMid, selectedTid);
|
||||
setBottomSmsPaymentDetailResendOn(true);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
callList();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<main>
|
||||
<div className="tab-content">
|
||||
<div className="tab-pane sub active">
|
||||
<section className="summary-section no-border">
|
||||
<div className="credit-controls">
|
||||
<div>
|
||||
<input
|
||||
className="credit-period"
|
||||
type="text"
|
||||
value={moment(fromDate).format('YYYY.MM.DD') + '-' + moment(toDate).format('YYYY.MM.DD')}
|
||||
readOnly={true}
|
||||
/>
|
||||
<button
|
||||
className="filter-btn"
|
||||
aria-label="필터"
|
||||
>
|
||||
<img
|
||||
src={IMAGE_ROOT + '/ico_setting.svg'}
|
||||
alt="검색옵션"
|
||||
onClick={() => onClickToOpenFilter()}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
className="download-btn"
|
||||
aria-label="다운로드"
|
||||
>
|
||||
<img
|
||||
src={IMAGE_ROOT + '/ico_download.svg'}
|
||||
alt="다운로드"
|
||||
onClick={() => onClickToDownloadExcel()}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
<div className="detail-divider"></div>
|
||||
<SmsPaymentList
|
||||
listItems={listItems}
|
||||
mid={mid}
|
||||
onResendClick={onClickToShowDetail}
|
||||
></SmsPaymentList>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<SmsPaymentDetailResend
|
||||
bottomSmsPaymentDetailResendOn={bottomSmsPaymentDetailResendOn}
|
||||
setBottomSmsPaymentDetailResendOn={setBottomSmsPaymentDetailResendOn}
|
||||
smsDetailData={smsDetailData}
|
||||
></SmsPaymentDetailResend>
|
||||
|
||||
<SmsPaymentFilter
|
||||
filterOn={filterOn}
|
||||
setFilterOn={setFilterOn}
|
||||
mid={mid}
|
||||
searchCl={searchCl}
|
||||
searchValue={searchValue}
|
||||
fromDate={fromDate}
|
||||
toDate={toDate}
|
||||
smsCl={smsCl}
|
||||
setMid={setMid}
|
||||
setSearchCl={setSearchCl}
|
||||
setSearchValue={setSearchValue}
|
||||
setFromDate={setFromDate}
|
||||
setToDate={setToDate}
|
||||
setSmsCl={setSmsCl}
|
||||
></SmsPaymentFilter>
|
||||
</>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user