Merge branch 'main' of https://gitea.bpsoft.co.kr/nicepayments/nice-app-web
This commit is contained in:
focp212@naver.com
@@ -12,6 +12,8 @@ export enum AccountUserTabKeys {
|
||||
export interface AccountUserTabProps {
|
||||
activeTab: AccountUserTabKeys;
|
||||
tid: string;
|
||||
mid?: string;
|
||||
usrid?: string;
|
||||
};
|
||||
export interface AuthItem {
|
||||
useYn?: boolean;
|
||||
@@ -19,13 +21,16 @@ export interface AuthItem {
|
||||
tid?: string;
|
||||
};
|
||||
export interface UserManageAuthListProps {
|
||||
authItems: Array<AuthItem>
|
||||
userItems: Array<any>;
|
||||
mid: string;
|
||||
};
|
||||
export interface UserManageAuthItemProps extends AuthItem {
|
||||
|
||||
usrid?: string;
|
||||
mid?: string;
|
||||
};
|
||||
export interface UserLoginAuthInfoWrapProps {
|
||||
tid: string;
|
||||
mid: string;
|
||||
usrid: string;
|
||||
};
|
||||
export interface UserAccountAuthWrapProps {
|
||||
tid: string;
|
||||
@@ -41,3 +46,71 @@ export interface UserAccountAuthPermListProps {
|
||||
export interface UserAccountAuthPermItemProps extends PermItem {
|
||||
tid: string;
|
||||
};
|
||||
|
||||
export interface VerificationItem {
|
||||
type: string;
|
||||
contact: string;
|
||||
}
|
||||
|
||||
export interface UserCreateRequest {
|
||||
mid: string;
|
||||
usrid: string;
|
||||
password?: string;
|
||||
loginRange: string;
|
||||
verifications: Array<VerificationItem>;
|
||||
}
|
||||
|
||||
export interface UserCreateResponse {
|
||||
status: boolean;
|
||||
error?: {
|
||||
root: string;
|
||||
errKey: string;
|
||||
code: string;
|
||||
message: string;
|
||||
timestamp: string;
|
||||
details: Record<string, string>;
|
||||
};
|
||||
data?: {
|
||||
user: {
|
||||
usrid: string;
|
||||
mid: string;
|
||||
gid: string;
|
||||
aid: string;
|
||||
pw: string;
|
||||
authCd: string;
|
||||
status: string;
|
||||
regDt: string;
|
||||
memo: string;
|
||||
changeDt: string;
|
||||
failCnt: number;
|
||||
oldPw1: string;
|
||||
oldPw2: string;
|
||||
oldPw3: string;
|
||||
oldPw4: string;
|
||||
worker: string;
|
||||
loginCd: string;
|
||||
pwWorkIp: string;
|
||||
pwCheckYn: string;
|
||||
loginFailDt: string;
|
||||
loginFailTm: string;
|
||||
loginFailIp: string;
|
||||
desaYn: string;
|
||||
desaAccType: string;
|
||||
desaAccIp: string;
|
||||
desaProcType: string;
|
||||
desaFormat: string;
|
||||
desaSvcCl: string;
|
||||
emailAuth1: string;
|
||||
emailAuth2: string;
|
||||
emailAuth3: string;
|
||||
authDt: string;
|
||||
authTm: string;
|
||||
userAidGroupYn: string;
|
||||
userAidGroupId: string;
|
||||
subNm: string;
|
||||
subLevel: string;
|
||||
multiAccessYn: string;
|
||||
duplicateAccessYn: string;
|
||||
};
|
||||
};
|
||||
}
|
||||
@@ -7,7 +7,9 @@ import {
|
||||
|
||||
export const AccountUserTab = ({
|
||||
activeTab,
|
||||
tid
|
||||
tid,
|
||||
mid,
|
||||
usrid
|
||||
}: AccountUserTabProps) => {
|
||||
const { navigate } = useNavigate();
|
||||
|
||||
@@ -16,14 +18,18 @@ export const AccountUserTab = ({
|
||||
if(tab === AccountUserTabKeys.LoginAuthInfo){
|
||||
navigate(PATHS.account.user.loginAuthInfo, {
|
||||
state: {
|
||||
tid: tid
|
||||
tid: tid,
|
||||
mid: mid,
|
||||
usrid: usrid
|
||||
}
|
||||
});
|
||||
}
|
||||
else if(tab === AccountUserTabKeys.AccountAuth){
|
||||
navigate(PATHS.account.user.accountAuth, {
|
||||
state: {
|
||||
tid: tid
|
||||
tid: tid,
|
||||
mid: mid,
|
||||
usrid: usrid
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@@ -1,8 +1,268 @@
|
||||
import { UserLoginAuthInfoWrapProps } from '../model/types';
|
||||
import { UserFindAuthMethodParams, UserAuthMethodData } from '@/entities/user/model/types';
|
||||
import { useUserFindAuthMethodMutation } from '@/entities/user/api/use-user-find-authmethod-mutation';
|
||||
import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
export const UserLoginAuthInfoWrap = ({
|
||||
tid
|
||||
}: UserLoginAuthInfoWrapProps) => {
|
||||
mid,
|
||||
usrid,
|
||||
}: UserFindAuthMethodParams) => {
|
||||
const { mutateAsync: userFindAuthMethod } = useUserFindAuthMethodMutation();
|
||||
const [pageParam] = useState(DEFAULT_PAGE_PARAM);
|
||||
const [authMethodData, setAuthMethodData] = useState<UserAuthMethodData>();
|
||||
const [initialData, setInitialData] = useState<UserAuthMethodData>();
|
||||
const [newEmails, setNewEmails] = useState<string[]>([]);
|
||||
const [newPhones, setNewPhones] = useState<string[]>([]);
|
||||
const [editableEmailIndex, setEditableEmailIndex] = useState<number>(-1);
|
||||
const [editablePhoneIndex, setEditablePhoneIndex] = useState<number>(-1);
|
||||
const [readOnlyEmails, setReadOnlyEmails] = useState<Set<number>>(new Set());
|
||||
const [readOnlyPhones, setReadOnlyPhones] = useState<Set<number>>(new Set());
|
||||
|
||||
const handleRemoveExistingEmail = (index: number) => {
|
||||
if (authMethodData?.emails) {
|
||||
const updatedEmails = authMethodData.emails.filter((_, i) => i !== index);
|
||||
setAuthMethodData({ ...authMethodData, emails: updatedEmails });
|
||||
}
|
||||
};
|
||||
|
||||
const handleRemoveExistingPhone = (index: number) => {
|
||||
if (authMethodData?.phones) {
|
||||
const updatedPhones = authMethodData.phones.filter((_, i) => i !== index);
|
||||
setAuthMethodData({ ...authMethodData, phones: updatedPhones });
|
||||
}
|
||||
};
|
||||
|
||||
const callUserFindAuthMethod = (mid: string, usrid: string) => {
|
||||
let params: UserFindAuthMethodParams = {
|
||||
mid: mid,
|
||||
usrid: usrid,
|
||||
page: pageParam
|
||||
};
|
||||
userFindAuthMethod(params).then((rs: any) => {
|
||||
console.log("User Find Auth Method: ", rs);
|
||||
// API 응답이 직접 데이터를 반환하는 경우
|
||||
if (rs.emails || rs.phones) {
|
||||
console.log("Setting authMethodData directly from response: ", rs);
|
||||
setAuthMethodData(rs);
|
||||
setInitialData(rs);
|
||||
}
|
||||
// API 응답이 data 프로퍼티 안에 있는 경우
|
||||
else if (rs.data) {
|
||||
console.log("Setting authMethodData from rs.data: ", rs.data);
|
||||
setAuthMethodData(rs.data);
|
||||
setInitialData(rs.data);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (mid && usrid) {
|
||||
callUserFindAuthMethod(mid, usrid);
|
||||
}
|
||||
}, [mid, usrid]);
|
||||
|
||||
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);
|
||||
|
||||
// 읽기전용 인덱스들을 업데이트 (삭제된 인덱스보다 큰 인덱스들은 1씩 감소)
|
||||
const updatedReadOnlyEmails = new Set<number>();
|
||||
readOnlyEmails.forEach(readOnlyIndex => {
|
||||
if (readOnlyIndex < index) {
|
||||
updatedReadOnlyEmails.add(readOnlyIndex);
|
||||
} else if (readOnlyIndex > index) {
|
||||
updatedReadOnlyEmails.add(readOnlyIndex - 1);
|
||||
}
|
||||
// readOnlyIndex === index인 경우 제거됨 (Set에 추가하지 않음)
|
||||
});
|
||||
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);
|
||||
|
||||
// 읽기전용 인덱스들을 업데이트 (삭제된 인덱스보다 큰 인덱스들은 1씩 감소)
|
||||
const updatedReadOnlyPhones = new Set<number>();
|
||||
readOnlyPhones.forEach(readOnlyIndex => {
|
||||
if (readOnlyIndex < index) {
|
||||
updatedReadOnlyPhones.add(readOnlyIndex);
|
||||
} else if (readOnlyIndex > index) {
|
||||
updatedReadOnlyPhones.add(readOnlyIndex - 1);
|
||||
}
|
||||
// readOnlyIndex === index인 경우 제거됨 (Set에 추가하지 않음)
|
||||
});
|
||||
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 isValidEmail = (email: string) => {
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
return emailRegex.test(email);
|
||||
};
|
||||
|
||||
// 전화번호 형식 검증 (010으로 시작하고 총 11자리 숫자)
|
||||
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();
|
||||
};
|
||||
|
||||
// 삭제 버튼 활성화 조건 (전체 항목이 1개만 남으면 비활성화)
|
||||
const isDeleteButtonEnabled = () => {
|
||||
const totalEmailCount = (authMethodData?.emails?.length || 0) + newEmails.length;
|
||||
const totalPhoneCount = (authMethodData?.phones?.length || 0) + newPhones.length;
|
||||
const totalCount = totalEmailCount + totalPhoneCount;
|
||||
|
||||
return totalCount > 1;
|
||||
};
|
||||
|
||||
// 중복 이메일 검증
|
||||
const hasDuplicateEmail = () => {
|
||||
const allEmails = [
|
||||
...(authMethodData?.emails?.map(e => e.content) || []),
|
||||
...newEmails.filter(e => e.trim())
|
||||
];
|
||||
|
||||
const uniqueEmails = new Set(allEmails);
|
||||
return allEmails.length !== uniqueEmails.size;
|
||||
};
|
||||
|
||||
// 중복 전화번호 검증
|
||||
const hasDuplicatePhone = () => {
|
||||
const allPhones = [
|
||||
...(authMethodData?.phones?.map(p => p.content) || []),
|
||||
...newPhones.filter(p => p.trim())
|
||||
];
|
||||
|
||||
const uniquePhones = new Set(allPhones);
|
||||
return allPhones.length !== uniquePhones.size;
|
||||
};
|
||||
|
||||
const isSaveButtonEnabled = () => {
|
||||
// 새로 추가된 이메일 중 값이 있는 것들의 형식 검증
|
||||
const validNewEmails = newEmails.filter(e => e.trim());
|
||||
const hasInvalidEmail = validNewEmails.some(email => !isValidEmail(email));
|
||||
|
||||
// 새로 추가된 전화번호 중 값이 있는 것들의 형식 검증
|
||||
const validNewPhones = newPhones.filter(p => p.trim());
|
||||
const hasInvalidPhone = validNewPhones.some(phone => !isValidPhone(phone));
|
||||
|
||||
// 형식이 맞지 않는 항목이 있거나 중복이 있으면 비활성화
|
||||
if (hasInvalidEmail || hasInvalidPhone || hasDuplicateEmail() || hasDuplicatePhone()) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// 현재 이메일과 전화번호가 모두 없으면 비활성화
|
||||
const currentEmailCount = (authMethodData?.emails?.length || 0) + validNewEmails.length;
|
||||
const currentPhoneCount = (authMethodData?.phones?.length || 0) + validNewPhones.length;
|
||||
|
||||
if (currentEmailCount === 0 && currentPhoneCount === 0) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// 초기 데이터와 비교하여 변경사항이 있는지 확인
|
||||
const initialEmailCount = initialData?.emails?.length || 0;
|
||||
const initialPhoneCount = initialData?.phones?.length || 0;
|
||||
const currentApiEmailCount = authMethodData?.emails?.length || 0;
|
||||
const currentApiPhoneCount = authMethodData?.phones?.length || 0;
|
||||
|
||||
// 삭제가 발생했거나 새로운 항목이 추가된 경우 활성화
|
||||
const hasChanges = (
|
||||
currentApiEmailCount < initialEmailCount ||
|
||||
currentApiPhoneCount < initialPhoneCount ||
|
||||
validNewEmails.length > 0 ||
|
||||
validNewPhones.length > 0
|
||||
);
|
||||
|
||||
return hasChanges;
|
||||
};
|
||||
|
||||
console.log("Rendering with authMethodData: ", authMethodData);
|
||||
console.log("Emails: ", authMethodData?.emails);
|
||||
console.log("Phones: ", authMethodData?.phones);
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -15,43 +275,45 @@ export const UserLoginAuthInfoWrap = ({
|
||||
className="ic20 plus"
|
||||
type="button"
|
||||
aria-label="추가"
|
||||
onClick={handleAddEmail}
|
||||
disabled={!isEmailAddButtonEnabled()}
|
||||
></button>
|
||||
</div>
|
||||
<div className="input-row">
|
||||
{authMethodData?.emails && authMethodData.emails.length > 0 && authMethodData.emails.map((email, index) => (
|
||||
<div className="input-row" key={`existing-email-${index}`}>
|
||||
<input
|
||||
type="text"
|
||||
value="nicetest01@nicepay.co.kr"
|
||||
value={email.content}
|
||||
placeholder="example@domain.com"
|
||||
readOnly
|
||||
/>
|
||||
<button
|
||||
className="icon-btn minus"
|
||||
type="button"
|
||||
aria-label="삭제"
|
||||
onClick={() => handleRemoveExistingEmail(index)}
|
||||
disabled={!isDeleteButtonEnabled()}
|
||||
></button>
|
||||
</div>
|
||||
<div className="input-row">
|
||||
<input
|
||||
type="text"
|
||||
value="nicetest01@nicepay.co.kr"
|
||||
placeholder="example@domain.com"
|
||||
/>
|
||||
<button
|
||||
className="icon-btn minus"
|
||||
type="button"
|
||||
aria-label="삭제"
|
||||
></button>
|
||||
</div>
|
||||
<div className="input-row">
|
||||
))}
|
||||
{newEmails.map((email, index) => (
|
||||
<div className="input-row" key={`new-email-${index}`}>
|
||||
<input
|
||||
type="text"
|
||||
value={email}
|
||||
placeholder="example@domain.com"
|
||||
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="group">
|
||||
@@ -61,38 +323,55 @@ export const UserLoginAuthInfoWrap = ({
|
||||
className="ic20 plus"
|
||||
type="button"
|
||||
aria-label="추가"
|
||||
onClick={handleAddPhone}
|
||||
disabled={!isPhoneAddButtonEnabled()}
|
||||
></button>
|
||||
</div>
|
||||
<div className="input-row">
|
||||
{authMethodData?.phones && authMethodData.phones.length > 0 && authMethodData.phones.map((phone, index) => (
|
||||
<div className="input-row" key={`existing-phone-${index}`}>
|
||||
<input
|
||||
type="text"
|
||||
value="01012345678"
|
||||
value={phone.content}
|
||||
placeholder="휴대폰 번호 입력"
|
||||
readOnly
|
||||
/>
|
||||
<button
|
||||
className="icon-btn minus"
|
||||
type="button"
|
||||
aria-label="삭제"
|
||||
onClick={() => handleRemoveExistingPhone(index)}
|
||||
disabled={!isDeleteButtonEnabled()}
|
||||
></button>
|
||||
</div>
|
||||
<div className="input-row">
|
||||
))}
|
||||
{newPhones.map((phone, index) => (
|
||||
<div className="input-row" key={`new-phone-${index}`}>
|
||||
<input
|
||||
type="text"
|
||||
value="01012345678"
|
||||
value={phone}
|
||||
placeholder="휴대폰 번호 입력"
|
||||
readOnly={ true }
|
||||
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 className="notice-bar">※ 탭을 변경하면 미저장 내용은 초기화됩니다.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="apply-row bottom-padding">
|
||||
<button className="btn-50 btn-blue flex-1">저장</button>
|
||||
<button
|
||||
className="btn-50 btn-blue flex-1"
|
||||
disabled={!isSaveButtonEnabled()}
|
||||
>
|
||||
저장
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
||||
@@ -3,16 +3,19 @@ import { useNavigate } from '@/shared/lib/hooks/use-navigate';
|
||||
import { UserManageAuthItemProps } from '../model/types';
|
||||
|
||||
export const UserManageAuthItem = ({
|
||||
useYn,
|
||||
authName,
|
||||
tid
|
||||
usrid,
|
||||
tid,
|
||||
mid,
|
||||
}: UserManageAuthItemProps) => {
|
||||
const { navigate } = useNavigate();
|
||||
|
||||
const onClickToNavigation = () => {
|
||||
// state를 통해 데이터 전달
|
||||
navigate(PATHS.account.user.loginAuthInfo, {
|
||||
state: {
|
||||
tid: tid
|
||||
tid: tid,
|
||||
mid: mid,
|
||||
usrid: usrid
|
||||
}
|
||||
});
|
||||
};
|
||||
@@ -23,8 +26,8 @@ export const UserManageAuthItem = ({
|
||||
onClick={ () => onClickToNavigation() }
|
||||
>
|
||||
<div className="auth-item-left">
|
||||
<span className={ `tag-pill ${(!!useYn)? '': 'red'}` }>{ (!!useYn)? '사용': '미사용' }</span>
|
||||
<span className="auth-name">{ authName }</span>
|
||||
{/* <span className={ `tag-pill ${(!!useYn)? '': 'red'}` }>{ (!!useYn)? '사용': '미사용' }</span> */}
|
||||
<span className="auth-name">{ usrid }</span>
|
||||
</div>
|
||||
<span className="ic20 arrow-right"></span>
|
||||
</div>
|
||||
|
||||
@@ -2,18 +2,19 @@ import { UserManageAuthItem } from './user-manage-auth-item';
|
||||
import { UserManageAuthListProps } from '../model/types';
|
||||
|
||||
export const UserManageAuthList = ({
|
||||
authItems
|
||||
userItems,
|
||||
mid
|
||||
}: UserManageAuthListProps) => {
|
||||
|
||||
const getUserManageAuthItems = () => {
|
||||
let rs = [];
|
||||
for(let i=0;i<authItems.length;i++){
|
||||
for(let i=0;i<userItems.length;i++){
|
||||
rs.push(
|
||||
<UserManageAuthItem
|
||||
key={ 'UserManageAuthItem-key-' + i }
|
||||
useYn={ authItems[i]?.useYn }
|
||||
authName= { authItems[i]?.authName }
|
||||
tid= { authItems[i]?.tid }
|
||||
key={ userItems[i]?.usrid }
|
||||
usrid={ userItems[i]?.usrid }
|
||||
tid={ userItems[i]?.tid }
|
||||
mid={ mid }
|
||||
></UserManageAuthItem>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -2,21 +2,29 @@ import { useEffect, useState } from 'react';
|
||||
import { PATHS } from '@/shared/constants/paths';
|
||||
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
|
||||
import { AuthItem } from '../model/types';
|
||||
import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
|
||||
import { UserManageAuthList } from './user-manage-auth-list';
|
||||
import { useUserFindMutation } from '@/entities/user/api/use-user-find-mutation';
|
||||
import { UserListItem } from '@/entities/user/model/types';
|
||||
|
||||
export const UserManageWrap = () => {
|
||||
const { navigate } = useNavigate();
|
||||
const { mutateAsync: userFind } = useUserFindMutation();
|
||||
const [userItems, setUserItems] = useState<Array<UserListItem>>([]);
|
||||
const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
|
||||
const [mid, setMid] = useState<string>('nictest00m');
|
||||
|
||||
const [authItems, setAuthItems] = useState<Array<AuthItem>>([]);
|
||||
const midList = [
|
||||
{ value: 'nictest00m', label: 'nictest00m' },
|
||||
{ value: 'nictest01m', label: 'nictest01m' },
|
||||
{ value: 'nictest02m', label: 'nictest02m' },
|
||||
];
|
||||
|
||||
const callAuthList = () => {
|
||||
setAuthItems([
|
||||
{useYn: true, authName: 'test01', tid: 'A12334556'},
|
||||
{useYn: true, authName: 'test02', tid: 'A33334556'},
|
||||
{useYn: true, authName: 'test03', tid: 'A12345556'},
|
||||
{useYn: true, authName: 'test04', tid: 'A12978676'},
|
||||
{useYn: false, authName: 'test05', tid: 'A12344444'},
|
||||
]);
|
||||
const callList = (mid: string) => {
|
||||
setPageParam(pageParam);
|
||||
userFind({ mid: mid, page: pageParam }).then((rs) => {
|
||||
setUserItems(rs.content || []);
|
||||
});
|
||||
};
|
||||
|
||||
const onClickToNavigation = () => {
|
||||
@@ -24,21 +32,25 @@ export const UserManageWrap = () => {
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
callAuthList();
|
||||
}, []);
|
||||
callList(mid);
|
||||
}, [mid]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="ing-list">
|
||||
<div className="input-wrapper top-select mt-16">
|
||||
<select>
|
||||
<option>nicetest00m</option>
|
||||
<select value={mid} onChange={e => setMid(e.target.value)}>
|
||||
{midList.map(item => (
|
||||
<option key={item.value} value={item.value}>{item.label}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="ing-title">등록 현황</div>
|
||||
{ (!!authItems && authItems.length > 0) &&
|
||||
{ (!!userItems && userItems.length > 0) &&
|
||||
<UserManageAuthList
|
||||
authItems={ authItems }
|
||||
userItems={ userItems }
|
||||
mid={ mid }
|
||||
></UserManageAuthList>
|
||||
}
|
||||
<div className="apply-row bottom-padding">
|
||||
|
||||
@@ -5,7 +5,7 @@ import { CBDCAxiosError } from '@/shared/@types/error';
|
||||
import {
|
||||
ExtensionSmsDetailParams,
|
||||
ExtensionSmsDetailResponse
|
||||
} from '../../model/types';
|
||||
} from '../../model/sms-payment/types';
|
||||
import {
|
||||
useMutation,
|
||||
UseMutationOptions
|
||||
@@ -17,7 +17,7 @@ export const extensionSmsDetail = (params: ExtensionSmsDetailParams) => {
|
||||
);
|
||||
};
|
||||
|
||||
export const useExtensionSmsListMutation = (options?: UseMutationOptions<ExtensionSmsDetailResponse, CBDCAxiosError, ExtensionSmsDetailParams>) => {
|
||||
export const useExtensionSmsDetailMutation = (options?: UseMutationOptions<ExtensionSmsDetailResponse, CBDCAxiosError, ExtensionSmsDetailParams>) => {
|
||||
const mutation = useMutation<ExtensionSmsDetailResponse, CBDCAxiosError, ExtensionSmsDetailParams>({
|
||||
...options,
|
||||
mutationFn: (params: ExtensionSmsDetailParams) => extensionSmsDetail(params),
|
||||
|
||||
@@ -1,29 +0,0 @@
|
||||
import axios from 'axios';
|
||||
import { API_URL_ADDITIONAL_SERVICE } from '@/shared/api/api-url-additional-service';
|
||||
import { resultify } from '@/shared/lib/resultify';
|
||||
import { CBDCAxiosError } from '@/shared/@types/error';
|
||||
import {
|
||||
ExtensionSmsListParams,
|
||||
ExtensionSmsListResponse
|
||||
} from '../../model/types';
|
||||
import {
|
||||
useMutation,
|
||||
UseMutationOptions
|
||||
} from '@tanstack/react-query';
|
||||
|
||||
export const extensionSmsList = (params: ExtensionSmsListParams) => {
|
||||
return resultify(
|
||||
axios.post<ExtensionSmsListResponse>(API_URL_ADDITIONAL_SERVICE.extensionSmsList(), params),
|
||||
);
|
||||
};
|
||||
|
||||
export const useExtensionSmsListMutation = (options?: UseMutationOptions<ExtensionSmsListResponse, CBDCAxiosError, ExtensionSmsListParams>) => {
|
||||
const mutation = useMutation<ExtensionSmsListResponse, CBDCAxiosError, ExtensionSmsListParams>({
|
||||
...options,
|
||||
mutationFn: (params: ExtensionSmsListParams) => extensionSmsList(params),
|
||||
});
|
||||
|
||||
return {
|
||||
...mutation,
|
||||
};
|
||||
};
|
||||
@@ -5,7 +5,7 @@ import { CBDCAxiosError } from '@/shared/@types/error';
|
||||
import {
|
||||
ExtensionSmsResendParams,
|
||||
ExtensionSmsResendResponse
|
||||
} from '../../model/types';
|
||||
} from '../../model/sms-payment/types';
|
||||
import {
|
||||
useMutation,
|
||||
UseMutationOptions
|
||||
|
||||
@@ -0,0 +1,29 @@
|
||||
import axios from 'axios';
|
||||
import { API_URL_ADDITIONAL_SERVICE } from '@/shared/api/api-url-additional-service';
|
||||
import { resultify } from '@/shared/lib/resultify';
|
||||
import { CBDCAxiosError } from '@/shared/@types/error';
|
||||
import {
|
||||
ExtensionSmsDetailParams,
|
||||
ExtensionSmsDetailResponse
|
||||
} from '../../model/sms-payment/types';
|
||||
import {
|
||||
useMutation,
|
||||
UseMutationOptions
|
||||
} from '@tanstack/react-query';
|
||||
|
||||
export const extensionSmsDetail = (params: ExtensionSmsDetailParams) => {
|
||||
return resultify(
|
||||
axios.post<ExtensionSmsDetailResponse>(API_URL_ADDITIONAL_SERVICE.extensionSmsDetail(), params),
|
||||
);
|
||||
};
|
||||
|
||||
export const useExtensionSmsDetailMutation = (options?: UseMutationOptions<ExtensionSmsDetailResponse, CBDCAxiosError, ExtensionSmsDetailParams>) => {
|
||||
const mutation = useMutation<ExtensionSmsDetailResponse, CBDCAxiosError, ExtensionSmsDetailParams>({
|
||||
...options,
|
||||
mutationFn: (params: ExtensionSmsDetailParams) => extensionSmsDetail(params),
|
||||
});
|
||||
|
||||
return {
|
||||
...mutation,
|
||||
};
|
||||
};
|
||||
@@ -5,7 +5,7 @@ import { CBDCAxiosError } from '@/shared/@types/error';
|
||||
import {
|
||||
ExtensionSmsDownloadExcelParams,
|
||||
ExtensionSmsDownloadExcelResponse
|
||||
} from '../../model/types';
|
||||
} from '../../model/sms-payment/types';
|
||||
import {
|
||||
useMutation,
|
||||
UseMutationOptions
|
||||
@@ -0,0 +1,29 @@
|
||||
import axios from 'axios';
|
||||
import { API_URL_ADDITIONAL_SERVICE } from '@/shared/api/api-url-additional-service';
|
||||
import { resultify } from '@/shared/lib/resultify';
|
||||
import { CBDCAxiosError } from '@/shared/@types/error';
|
||||
import {
|
||||
ExtensionSmsPaymentListParams,
|
||||
ExtensionSmsPaymentListResponse
|
||||
} from '../../model/sms-payment/types';
|
||||
import {
|
||||
useMutation,
|
||||
UseMutationOptions
|
||||
} from '@tanstack/react-query';
|
||||
|
||||
export const extensionSmsList = (params: ExtensionSmsPaymentListParams) => {
|
||||
return resultify(
|
||||
axios.post<ExtensionSmsPaymentListResponse>(API_URL_ADDITIONAL_SERVICE.extensionSmsList(), params),
|
||||
);
|
||||
};
|
||||
|
||||
export const useExtensionSmsListMutation = (options?: UseMutationOptions<ExtensionSmsPaymentListResponse, CBDCAxiosError, ExtensionSmsPaymentListParams>) => {
|
||||
const mutation = useMutation<ExtensionSmsPaymentListResponse, CBDCAxiosError, ExtensionSmsPaymentListParams>({
|
||||
...options,
|
||||
mutationFn: (params: ExtensionSmsPaymentListParams) => extensionSmsList(params),
|
||||
});
|
||||
|
||||
return {
|
||||
...mutation,
|
||||
};
|
||||
};
|
||||
@@ -0,0 +1,29 @@
|
||||
import axios from 'axios';
|
||||
import { API_URL_ADDITIONAL_SERVICE } from '@/shared/api/api-url-additional-service';
|
||||
import { resultify } from '@/shared/lib/resultify';
|
||||
import { CBDCAxiosError } from '@/shared/@types/error';
|
||||
import {
|
||||
ExtensionSmsResendParams,
|
||||
ExtensionSmsResendResponse
|
||||
} from '../../model/sms-payment/types';
|
||||
import {
|
||||
useMutation,
|
||||
UseMutationOptions
|
||||
} from '@tanstack/react-query';
|
||||
|
||||
export const extensionSmsResend = (params: ExtensionSmsResendParams) => {
|
||||
return resultify(
|
||||
axios.post<ExtensionSmsResendResponse>(API_URL_ADDITIONAL_SERVICE.extensionSmsResend(), params),
|
||||
);
|
||||
};
|
||||
|
||||
export const useExtensionSmsResendMutation = (options?: UseMutationOptions<ExtensionSmsResendResponse, CBDCAxiosError, ExtensionSmsResendParams>) => {
|
||||
const mutation = useMutation<ExtensionSmsResendResponse, CBDCAxiosError, ExtensionSmsResendParams>({
|
||||
...options,
|
||||
mutationFn: (params: ExtensionSmsResendParams) => extensionSmsResend(params),
|
||||
});
|
||||
|
||||
return {
|
||||
...mutation,
|
||||
};
|
||||
};
|
||||
93
src/entities/additional-service/model/sms-payment/types.ts
Normal file
93
src/entities/additional-service/model/sms-payment/types.ts
Normal file
@@ -0,0 +1,93 @@
|
||||
import { DefaulResponsePagination, DefaultRequestPagination } from '@/entities/common/model/types';
|
||||
import { ExtensionRequestParams, FilterProps, ListItemProps } from '../types';
|
||||
|
||||
export enum SmsType {
|
||||
ALL = "ALL",
|
||||
VACCOUNT_REQ = "VACCOUNT_REQ",
|
||||
VACCOUNT_REQ_DEPOSIT = "VACCOUNT_REQ_DEPOSIT"
|
||||
}
|
||||
|
||||
export enum SmsPaymentSearchType {
|
||||
BUYER_NAME = "BUYER_NAME",
|
||||
RECEIVE_PHONE_NUMBER = "RECEIVE_PHONE_NUMBER"
|
||||
}
|
||||
|
||||
export interface SmsPaymentListItem {
|
||||
mid?: string;
|
||||
tid?: string;
|
||||
paymentDate?: string;
|
||||
paymentStatus?: string;
|
||||
smsCl?: string;
|
||||
}
|
||||
|
||||
export interface SmsPaymentListProps {
|
||||
listItems: Record<string, Array<ListItemProps>>;
|
||||
mid: string;
|
||||
onResendClick?: (mid: string, tid: string) => void;
|
||||
}
|
||||
|
||||
export interface SmsPaymentFilterProps extends FilterProps {
|
||||
mid: string;
|
||||
searchCl: SmsPaymentSearchType;
|
||||
searchValue: string;
|
||||
fromDate: string;
|
||||
toDate: string;
|
||||
smsCl: SmsType;
|
||||
setMid: (mid: string) => void;
|
||||
setSearchCl: (searchCl: SmsPaymentSearchType) => void;
|
||||
setSearchValue: (searchValue: string) => void;
|
||||
setFromDate: (fromDate: string) => void;
|
||||
setToDate: (toDate: string) => void;
|
||||
setSmsCl: (smsCl: SmsType) => void;
|
||||
}
|
||||
|
||||
export interface ExtensionSmsPaymentListParams extends ExtensionRequestParams {
|
||||
searchCl: SmsPaymentSearchType;
|
||||
searchValue: string;
|
||||
fromDate: string;
|
||||
toDate: string;
|
||||
smsCl: string;
|
||||
page?: DefaultRequestPagination;
|
||||
}
|
||||
|
||||
export interface ExtensionSmsPaymentListResponse extends DefaulResponsePagination {
|
||||
content: Array<ListItemProps>
|
||||
}
|
||||
|
||||
export interface ExtensionSmsDownloadExcelParams extends ExtensionRequestParams {
|
||||
searchCl?: SmsPaymentSearchType;
|
||||
searchValue: string;
|
||||
fromDate: string;
|
||||
toDate: string;
|
||||
smsCl?: string;
|
||||
}
|
||||
|
||||
export interface ExtensionSmsDownloadExcelResponse {
|
||||
status: boolean;
|
||||
}
|
||||
|
||||
export interface ExtensionSmsDetailParams extends ExtensionRequestParams {
|
||||
tid: string;
|
||||
}
|
||||
|
||||
export interface ExtensionSmsDetailResponse {
|
||||
senderNumber: string;
|
||||
senderName: string;
|
||||
receiverNumber: string;
|
||||
receiverName: string;
|
||||
sendMessage: string;
|
||||
}
|
||||
|
||||
export interface ExtensionSmsResendParams extends ExtensionRequestParams {
|
||||
tid: string;
|
||||
}
|
||||
|
||||
export interface ExtensionSmsResendResponse {
|
||||
status: boolean;
|
||||
}
|
||||
|
||||
export interface SmsPaymentDetailResendProps {
|
||||
bottomSmsPaymentDetailResendOn: boolean;
|
||||
setBottomSmsPaymentDetailResendOn: (bottomSmsPaymentDetailResendOn: boolean) => void;
|
||||
smsDetailData: ExtensionSmsDetailResponse | null;
|
||||
}
|
||||
@@ -3,6 +3,8 @@ import { PayoutContent } from './payout/types';
|
||||
import { FundAccountTransferContentItem, FundAccountResultContentItem } from './fund-account/types';
|
||||
import { ArsListContent } from './ars/types';
|
||||
import { AlimtalkListContent } from './alimtalk/types';
|
||||
import { SmsPaymentListItem } from './sms-payment/types';
|
||||
import type { ExtensionSmsDetailResponse } from './sms-payment/types';
|
||||
|
||||
// ========================================
|
||||
// 공통 Enums 및 타입들
|
||||
@@ -391,12 +393,13 @@ export interface SettlementAgencyBottomAgreeProps {
|
||||
export interface ListItemProps extends
|
||||
KeyInPaymentListItem, AccountHolderSearchListItem,
|
||||
AccountHolderAuthListItem, LinkPaymentHistoryListItem,
|
||||
LinkPaymentWaitListItem,
|
||||
LinkPaymentWaitListItem, SmsPaymentListItem,
|
||||
PayoutContent, FundAccountTransferContentItem,
|
||||
FundAccountResultContentItem,
|
||||
ArsListContent, AlimtalkListContent {
|
||||
additionalServiceCategory?: AdditionalServiceCategory;
|
||||
mid?: string
|
||||
mid?: string;
|
||||
onResendClick?: (mid: string, tid: string) => void;
|
||||
}
|
||||
|
||||
export interface ListDateGroupProps {
|
||||
@@ -404,6 +407,7 @@ export interface ListDateGroupProps {
|
||||
date?: string;
|
||||
items?: Array<ListItemProps>;
|
||||
mid?: string;
|
||||
onResendClick?: (mid: string, tid: string) => void;
|
||||
}
|
||||
|
||||
export interface AdditionalServiceListProps {
|
||||
@@ -770,13 +774,6 @@ export interface ExtensionSmsDetailParams extends ExtensionRequestParams {
|
||||
tid: string;
|
||||
}
|
||||
|
||||
export interface ExtensionSmsDetailResponse {
|
||||
senderNumber: string;
|
||||
senderName: string;
|
||||
receiverNumber: string;
|
||||
receiverName: string;
|
||||
sendMessage: string;
|
||||
}
|
||||
// ========================================
|
||||
|
||||
|
||||
@@ -823,7 +820,3 @@ export interface ArsCardPaymentFinishProps {
|
||||
setRequestSuccess: (requestSuccess: boolean) => void;
|
||||
}
|
||||
|
||||
export interface SmsPaymentDetailResendProps {
|
||||
bottomSmsPaymentDetailResendOn: boolean;
|
||||
setBottomSmsPaymentDetailResendOn: (bottomSmsPaymentDetailResendOn: boolean) => void;
|
||||
}
|
||||
@@ -1,4 +1,3 @@
|
||||
import { PATHS } from '@/shared/constants/paths';
|
||||
import { ListDateGroup } from '../list-date-group';
|
||||
import { AccountHolderAuthListProps, AdditionalServiceCategory } from '../../model/types';
|
||||
|
||||
|
||||
@@ -39,10 +39,6 @@ export const AccountHolderSearchFilter = ({
|
||||
const [filterEndDate, setFilterEndDate] = useState<string>(moment(endDate).format('YYYY.MM.DD'));
|
||||
const [filterBank, setFilterBank] = useState<string>(bank)
|
||||
const [filterProcessResult, setFilterProcessResult] = useState<ProcessResult>(processResult);
|
||||
const [dateReadOnly, setDateReadyOnly] = useState<boolean>(true);
|
||||
const [filterDateOptionsBtn, setFilterDateOptionsBtn] = useState<FilterDateOptions>(FilterDateOptions.Input);
|
||||
|
||||
const [calendarOpen, setCalendarOpen] = useState<boolean>(false);
|
||||
|
||||
const variants = {
|
||||
hidden: { x: '100%' },
|
||||
|
||||
@@ -105,7 +105,7 @@ export const KeyInPaymentFilter = ({
|
||||
<FilterSelect
|
||||
title='가맹점'
|
||||
selectValue={filterMid}
|
||||
selectSetter={setFilterMid}
|
||||
selectSetter={setMid}
|
||||
selectOptions={MidOptions}
|
||||
></FilterSelect>
|
||||
<FilterCalendar
|
||||
|
||||
@@ -7,7 +7,8 @@ export const ListDateGroup = ({
|
||||
additionalServiceCategory,
|
||||
date,
|
||||
items,
|
||||
mid
|
||||
mid,
|
||||
onResendClick
|
||||
}: ListDateGroupProps) => {
|
||||
moment.locale('ko');
|
||||
const getStateDate = () => {
|
||||
@@ -63,6 +64,9 @@ export const ListDateGroup = ({
|
||||
sendCl={ items[i]?.sendCl }
|
||||
paymentMethod={ items[i]?.paymentMethod }
|
||||
receiverName={ items[i]?.receiverName }
|
||||
|
||||
smsCl= { items[i]?.smsCl }
|
||||
onResendClick={ onResendClick }
|
||||
></ListItem>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -13,7 +13,7 @@ export const ListItem = ({
|
||||
amount, sendDate, sendStatus, sendMethod,
|
||||
scheduledSendDate, processStatus,
|
||||
|
||||
accountName,transferStatus,
|
||||
accountName, transferStatus,
|
||||
|
||||
submallId, settlementDate, companyName,
|
||||
disbursementStatus, disbursementAmount,
|
||||
@@ -25,7 +25,10 @@ export const ListItem = ({
|
||||
orderStatus, arsPaymentMethod,
|
||||
|
||||
alimCl, sendType, sendCl,
|
||||
paymentMethod, receiverName
|
||||
paymentMethod, receiverName,
|
||||
|
||||
smsCl,
|
||||
onResendClick
|
||||
}: ListItemProps) => {
|
||||
const { navigate } = useNavigate();
|
||||
const getItemClass = () => {
|
||||
@@ -100,13 +103,21 @@ export const ListItem = ({
|
||||
} else {
|
||||
rs = 'gray'
|
||||
}
|
||||
} else if (additionalServiceCategory === AdditionalServiceCategory.SMSPayment) {
|
||||
if (smsCl === "VACCOUNT_REQ_DEPOSIT") {
|
||||
rs = 'blue'
|
||||
} else {
|
||||
rs = 'gray'
|
||||
}
|
||||
}
|
||||
return rs;
|
||||
|
||||
};
|
||||
|
||||
const onClickToNavigate = () => {
|
||||
if (additionalServiceCategory === AdditionalServiceCategory.KeyInPayment) {
|
||||
if (additionalServiceCategory === AdditionalServiceCategory.KeyInPayment ||
|
||||
additionalServiceCategory === AdditionalServiceCategory.SMSPayment
|
||||
) {
|
||||
|
||||
return;
|
||||
}
|
||||
@@ -176,7 +187,7 @@ export const ListItem = ({
|
||||
}
|
||||
});
|
||||
}
|
||||
else if (additionalServiceCategory === AdditionalServiceCategory.Ars){
|
||||
else if (additionalServiceCategory === AdditionalServiceCategory.Ars) {
|
||||
navigate(PATHS.additionalService.ars.detail, {
|
||||
state: {
|
||||
additionalServiceCategory: additionalServiceCategory,
|
||||
@@ -186,7 +197,7 @@ export const ListItem = ({
|
||||
}
|
||||
});
|
||||
}
|
||||
else if (additionalServiceCategory === AdditionalServiceCategory.Alimtalk){
|
||||
else if (additionalServiceCategory === AdditionalServiceCategory.Alimtalk) {
|
||||
navigate(PATHS.additionalService.alimtalk.detail, {
|
||||
state: {
|
||||
additionalServiceCategory: additionalServiceCategory,
|
||||
@@ -220,11 +231,11 @@ export const ListItem = ({
|
||||
else if (additionalServiceCategory === AdditionalServiceCategory.FundAccountResult) {
|
||||
timeStr = moment(requestDate).format('mm:ss');
|
||||
}
|
||||
else if (additionalServiceCategory === AdditionalServiceCategory.Ars){
|
||||
else if (additionalServiceCategory === AdditionalServiceCategory.Ars) {
|
||||
let time = paymentDate?.substring(8, 12);
|
||||
timeStr = time?.substring(0, 2) + ':' + time?.substring(2, 4);
|
||||
}
|
||||
else if (additionalServiceCategory === AdditionalServiceCategory.Alimtalk){
|
||||
else if (additionalServiceCategory === AdditionalServiceCategory.Alimtalk) {
|
||||
let time = paymentDate?.substring(8, 12);
|
||||
timeStr = time?.substring(0, 2) + ':' + time?.substring(2, 4);
|
||||
}
|
||||
@@ -257,16 +268,19 @@ export const ListItem = ({
|
||||
else if (additionalServiceCategory === AdditionalServiceCategory.Payout) {
|
||||
str = companyName;
|
||||
}
|
||||
else if(additionalServiceCategory === AdditionalServiceCategory.FundAccountTransfer){
|
||||
else if (additionalServiceCategory === AdditionalServiceCategory.FundAccountTransfer) {
|
||||
str = `${receiveAccountName}(${receiveAccountNo})`;
|
||||
}
|
||||
else if(additionalServiceCategory === AdditionalServiceCategory.FundAccountResult){
|
||||
else if (additionalServiceCategory === AdditionalServiceCategory.FundAccountResult) {
|
||||
str = `${receiveAccountName}(${receiveAccountNo})`;
|
||||
}
|
||||
else if(additionalServiceCategory === AdditionalServiceCategory.Ars){
|
||||
else if (additionalServiceCategory === AdditionalServiceCategory.SMSPayment) {
|
||||
str = `${paymentDate}(${paymentStatus})[추후 수정 필요]`
|
||||
}
|
||||
else if (additionalServiceCategory === AdditionalServiceCategory.Ars) {
|
||||
str = '이름(' + tid + ')';
|
||||
}
|
||||
else if(additionalServiceCategory === AdditionalServiceCategory.Alimtalk){
|
||||
else if (additionalServiceCategory === AdditionalServiceCategory.Alimtalk) {
|
||||
str = `${receiverName}(${tid})`;
|
||||
}
|
||||
|
||||
@@ -277,7 +291,7 @@ export const ListItem = ({
|
||||
let rs = [];
|
||||
if (additionalServiceCategory === AdditionalServiceCategory.KeyInPayment) {
|
||||
rs.push(
|
||||
<div className="transaction-details">
|
||||
<div key='key-in-list' className="transaction-details">
|
||||
<span>{getTime()}</span>
|
||||
<span className="separator">|</span>
|
||||
<span>{paymentStatus}</span>
|
||||
@@ -295,7 +309,7 @@ export const ListItem = ({
|
||||
}
|
||||
else if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch) {
|
||||
rs.push(
|
||||
<div className="transaction-details">
|
||||
<div key="account-search" className="transaction-details">
|
||||
<span>{getTime()}</span>
|
||||
<span className="separator">|</span>
|
||||
<span>{bankName}</span>
|
||||
@@ -305,7 +319,7 @@ export const ListItem = ({
|
||||
else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentHistory) {
|
||||
if (paymentStatus === "PAYMENT_FAIL" || paymentStatus === "INACTIVE") {
|
||||
rs.push(
|
||||
<div className="transaction-details">
|
||||
<div key="link-payment-history" className="transaction-details">
|
||||
<span>{getPaymentStatusText(paymentStatus)}</span>
|
||||
<span className="separator">|</span>
|
||||
<span>{getSendMethodText(sendMethod)}</span>
|
||||
@@ -313,7 +327,7 @@ export const ListItem = ({
|
||||
)
|
||||
} else {
|
||||
rs.push(
|
||||
<div className="transaction-details">
|
||||
<div key="link-payment-history" className="transaction-details">
|
||||
<span>{getPaymentStatusText(paymentStatus)}</span>
|
||||
<span className="separator">|</span>
|
||||
<span>{getSendMethodText(sendMethod)}</span>
|
||||
@@ -325,7 +339,7 @@ export const ListItem = ({
|
||||
}
|
||||
else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentWait) {
|
||||
rs.push(
|
||||
<div className="transaction-details">
|
||||
<div key="link-payment-wait" className="transaction-details">
|
||||
<span>{getProcessStatusText(processStatus)}</span>
|
||||
<span className="separator">|</span>
|
||||
<span>{getSendMethodText(sendMethod)}</span>
|
||||
@@ -341,48 +355,57 @@ export const ListItem = ({
|
||||
</div>
|
||||
);
|
||||
}
|
||||
else if(additionalServiceCategory === AdditionalServiceCategory.FundAccountTransfer){
|
||||
else if (additionalServiceCategory === AdditionalServiceCategory.FundAccountTransfer) {
|
||||
rs.push(
|
||||
<div className="transaction-details">
|
||||
<span>{ getTime() }</span>
|
||||
<span>{getTime()}</span>
|
||||
<span className="separator">|</span>
|
||||
<span>{ status }</span>
|
||||
<span>{status}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
else if(additionalServiceCategory === AdditionalServiceCategory.FundAccountResult){
|
||||
else if (additionalServiceCategory === AdditionalServiceCategory.FundAccountResult) {
|
||||
rs.push(
|
||||
<div className="transaction-details">
|
||||
<span>{ getTime() }</span>
|
||||
<span>{getTime()}</span>
|
||||
<span className="separator">|</span>
|
||||
<span>{ status }</span>
|
||||
<span>{status}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
else if(additionalServiceCategory === AdditionalServiceCategory.Ars){
|
||||
else if (additionalServiceCategory === AdditionalServiceCategory.Ars) {
|
||||
rs.push(
|
||||
<div className="transaction-details">
|
||||
<span>{ getTime() }</span>
|
||||
<span>{getTime()}</span>
|
||||
<span className="separator">|</span>
|
||||
<span>{ paymentStatus }</span>
|
||||
<span>{paymentStatus}</span>
|
||||
<span className="separator">|</span>
|
||||
<span>{ orderStatus }</span>
|
||||
<span>{orderStatus}</span>
|
||||
<span className="separator">|</span>
|
||||
<span>{ arsPaymentMethod }</span>
|
||||
<span>{arsPaymentMethod}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
else if(additionalServiceCategory === AdditionalServiceCategory.Alimtalk){
|
||||
else if (additionalServiceCategory === AdditionalServiceCategory.Alimtalk) {
|
||||
rs.push(
|
||||
<div className="transaction-details">
|
||||
<span>{ getTime() }</span>
|
||||
<span>{getTime()}</span>
|
||||
<span className="separator">|</span>
|
||||
<span>{ paymentMethod }</span>
|
||||
<span>{paymentMethod}</span>
|
||||
<span className="separator">|</span>
|
||||
<span>{ alimCl }</span>
|
||||
<span>{alimCl}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
else if (additionalServiceCategory === AdditionalServiceCategory.SMSPayment) {
|
||||
rs.push(
|
||||
<div key="sms-payment" className="transaction-details">
|
||||
<span>{mid}</span>
|
||||
<span className="separator">|</span>
|
||||
<span>{smsCl}</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
return rs;
|
||||
};
|
||||
|
||||
@@ -493,9 +516,18 @@ export const ListItem = ({
|
||||
<div
|
||||
key="payout-item-amount"
|
||||
className="transaction-amount"
|
||||
>{ sendCl }</div>
|
||||
>{sendCl}</div>
|
||||
);
|
||||
}
|
||||
else if (additionalServiceCategory === AdditionalServiceCategory.SMSPayment && onResendClick && tid) {
|
||||
rs.push(
|
||||
<div
|
||||
key="sms-payment-amount"
|
||||
className={`status-label success`}
|
||||
onClick={() => mid && tid && onResendClick(mid, tid)}
|
||||
>{'재발송'}</div>
|
||||
)
|
||||
}
|
||||
return rs;
|
||||
}
|
||||
|
||||
@@ -509,10 +541,10 @@ export const ListItem = ({
|
||||
<div className={`status-dot ${getDotClass()}`}></div>
|
||||
</div>
|
||||
<div className="transaction-content">
|
||||
<div className="transaction-title">{ getTitle() }</div>
|
||||
{ getDetail() }
|
||||
<div className="transaction-title">{getTitle()}</div>
|
||||
{getDetail()}
|
||||
</div>
|
||||
{ getAmount() }
|
||||
{getAmount()}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -1,8 +0,0 @@
|
||||
export const SmsPaymentFilter = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -1,10 +1,11 @@
|
||||
import { motion } from 'framer-motion';
|
||||
import { IMAGE_ROOT } from '@/shared/constants/common';
|
||||
import { SmsPaymentDetailResendProps } from '../model/types';
|
||||
import { SmsPaymentDetailResendProps } from '../../../additional-service/model/sms-payment/types';
|
||||
|
||||
export const SmsPaymentDetailResend = ({
|
||||
bottomSmsPaymentDetailResendOn,
|
||||
setBottomSmsPaymentDetailResendOn
|
||||
setBottomSmsPaymentDetailResendOn,
|
||||
smsDetailData
|
||||
}: SmsPaymentDetailResendProps) => {
|
||||
|
||||
const variants = {
|
||||
@@ -44,11 +45,11 @@ export const SmsPaymentDetailResend = ({
|
||||
</div>
|
||||
</div>
|
||||
<div className="resend-info">
|
||||
<div className="resend-row">발신자(번호) : 유앤아이피부과(16610808)</div>
|
||||
<div className="resend-row">수신자(번호) : 김*환(010****7000)</div>
|
||||
<div className="resend-row">발신자(번호) : {smsDetailData?.senderName || '-'}({smsDetailData?.senderNumber || '-'})</div>
|
||||
<div className="resend-row">수신자(번호) : {smsDetailData?.receiverName || '-'}({smsDetailData?.receiverNumber || '-'})</div>
|
||||
</div>
|
||||
<div className="resend-box">
|
||||
<p className="resend-text">[유앤아이피부과]김*환님, 신한은행 110322141414 (300원 06/08 입금완료)</p>
|
||||
<p className="resend-text">{smsDetailData?.sendMessage || '-'}</p>
|
||||
</div>
|
||||
<div className="bottomsheet-footer">
|
||||
<button className="btn-50 btn-blue flex-1" type="button">신청</button>
|
||||
@@ -0,0 +1,140 @@
|
||||
import moment from 'moment';
|
||||
import { IMAGE_ROOT } from '@/shared/constants/common';
|
||||
import { motion } from 'framer-motion';
|
||||
import { useState } from 'react';
|
||||
import { FilterSelect } from '@/shared/ui/filter/select';
|
||||
import { FilterSelectInput } from '@/shared/ui/filter/select-input';
|
||||
import { FilterDateOptions } from '@/entities/common/model/types';
|
||||
import { FilterCalendar } from '@/shared/ui/filter/calendar';
|
||||
import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
|
||||
import { SmsPaymentFilterProps, SmsPaymentSearchType, SmsType } from '../../model/sms-payment/types';
|
||||
export const SmsPaymentFilter = ({
|
||||
filterOn,
|
||||
setFilterOn,
|
||||
mid,
|
||||
searchCl,
|
||||
searchValue,
|
||||
fromDate,
|
||||
toDate,
|
||||
smsCl,
|
||||
setMid,
|
||||
setSearchCl,
|
||||
setSearchValue,
|
||||
setFromDate,
|
||||
setToDate,
|
||||
setSmsCl
|
||||
}: SmsPaymentFilterProps) => {
|
||||
|
||||
const [filterMid, setFilterMid] = useState<string>(mid);
|
||||
const [filterSearchCl, setFilterSearchCl] = useState<SmsPaymentSearchType>(searchCl);
|
||||
const [filterSearchValue, setFilterSearchValue] = useState<string>(searchValue);
|
||||
const [filterFromDate, setFilterFromDate] = useState<string>(moment(fromDate).format('YYYY.MM.DD'));
|
||||
const [filterToDate, setFilterToDate] = useState<string>(moment(toDate).format('YYYY.MM.DD'));
|
||||
const [filterSmsCl, setFilterSmsCl] = useState<SmsType>(smsCl);
|
||||
|
||||
const variants = {
|
||||
hidden: { x: '100%' },
|
||||
visible: { x: '0%' },
|
||||
};
|
||||
|
||||
const onClickToSetFilter = () => {
|
||||
setMid(filterMid);
|
||||
setSearchCl(filterSearchCl);
|
||||
setSearchValue(filterSearchValue);
|
||||
setFromDate(filterFromDate);
|
||||
setToDate(filterToDate);
|
||||
setSmsCl(filterSmsCl);
|
||||
onClickToClose();
|
||||
};
|
||||
|
||||
let MidOptions = [
|
||||
{ name: 'nictest001m', value: 'nictest001m' },
|
||||
{ name: 'nictest002m', value: 'nictest002m' }
|
||||
];
|
||||
|
||||
let searchTypeOption = [
|
||||
{ name: '주문자', value: SmsPaymentSearchType.BUYER_NAME },
|
||||
{ name: '수신번호', value: SmsPaymentSearchType.RECEIVE_PHONE_NUMBER },
|
||||
]
|
||||
|
||||
let smsTypeOption = [
|
||||
{ name: '전체', value: SmsType.ALL },
|
||||
{ name: '가상계좌요청', value: SmsType.VACCOUNT_REQ },
|
||||
{ name: '가상계좌 요청+입금', value: SmsType.VACCOUNT_REQ_DEPOSIT },
|
||||
]
|
||||
|
||||
const onClickToClose = () => {
|
||||
setFilterOn(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<motion.div
|
||||
id="fullMenuModal"
|
||||
className="full-menu-modal"
|
||||
initial="hidden"
|
||||
animate={(filterOn) ? 'visible' : 'hidden'}
|
||||
variants={variants}
|
||||
transition={{ duration: 0.3 }}
|
||||
style={{
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
}}
|
||||
>
|
||||
<div className="full-menu-container">
|
||||
<div className="full-menu-header">
|
||||
<div className="full-menu-title center">필터</div>
|
||||
<div className="full-menu-actions">
|
||||
<button
|
||||
id="closeFullMenu"
|
||||
className="full-menu-close"
|
||||
>
|
||||
<img
|
||||
src={IMAGE_ROOT + '/ico_close.svg'}
|
||||
alt="닫기"
|
||||
onClick={() => onClickToClose()}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="option-list pt-16">
|
||||
<FilterSelect
|
||||
title='가맹점'
|
||||
selectValue={mid}
|
||||
selectSetter={setMid}
|
||||
selectOptions={MidOptions}
|
||||
></FilterSelect>
|
||||
|
||||
<FilterSelectInput
|
||||
title='주문자,수신번호'
|
||||
selectValue={searchCl}
|
||||
selectSetter={setSearchCl}
|
||||
selectOptions={searchTypeOption}
|
||||
inputValue={searchValue}
|
||||
inputSetter={setSearchValue}
|
||||
></FilterSelectInput>
|
||||
<FilterCalendar
|
||||
startDate={filterFromDate}
|
||||
endDate={filterToDate}
|
||||
setStartDate={setFilterFromDate}
|
||||
setEndDate={setFilterToDate}
|
||||
></FilterCalendar>
|
||||
<FilterButtonGroups
|
||||
title='조회결과'
|
||||
activeValue={filterSmsCl}
|
||||
btnGroups={smsTypeOption}
|
||||
setter={setFilterSmsCl}
|
||||
></FilterButtonGroups>
|
||||
</div>
|
||||
<div className="apply-row">
|
||||
<button
|
||||
className="btn-50 btn-blue flex-1"
|
||||
onClick={() => onClickToSetFilter()}
|
||||
>적용</button>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,35 @@
|
||||
import { SmsPaymentListProps } from '../../model/sms-payment/types';
|
||||
import { AdditionalServiceCategory } from '../../model/types';
|
||||
import { ListDateGroup } from '../list-date-group';
|
||||
|
||||
export const SmsPaymentList = ({
|
||||
listItems,
|
||||
mid,
|
||||
onResendClick
|
||||
}: SmsPaymentListProps) => {
|
||||
|
||||
const getListDateGroup = () => {
|
||||
let rs = [];
|
||||
for (const [key, value] of Object.entries(listItems)) {
|
||||
rs.push(
|
||||
<ListDateGroup
|
||||
additionalServiceCategory={AdditionalServiceCategory.SMSPayment}
|
||||
key={key}
|
||||
date={key}
|
||||
items={value}
|
||||
mid={mid}
|
||||
onResendClick={onResendClick}
|
||||
></ListDateGroup>
|
||||
)
|
||||
}
|
||||
return rs;
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="transaction-list">
|
||||
{getListDateGroup()}
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -1,24 +1,50 @@
|
||||
import axios from 'axios';
|
||||
import { API_URL } from '@/shared/api/urls';
|
||||
import { resultify } from '@/shared/lib/resultify';
|
||||
import { API_URL_USER } from '@/shared/api/api-url-user';
|
||||
import { CBDCAxiosError } from '@/shared/@types/error';
|
||||
import {
|
||||
UserCreateParams,
|
||||
UserCreateResponse
|
||||
} from '../model/types';
|
||||
|
||||
interface UserCreateMutationResponse {
|
||||
status: boolean;
|
||||
data?: UserCreateResponse;
|
||||
error?: {
|
||||
root: string;
|
||||
errKey: string;
|
||||
code: string;
|
||||
message: string;
|
||||
timestamp: string;
|
||||
details: Record<string, string>;
|
||||
};
|
||||
}
|
||||
|
||||
import {
|
||||
useMutation,
|
||||
UseMutationOptions
|
||||
} from '@tanstack/react-query';
|
||||
|
||||
export const userCreate = (params: UserCreateParams) => {
|
||||
return resultify(
|
||||
axios.post<UserCreateResponse>(API_URL.userCreate(), params),
|
||||
);
|
||||
export const userCreate = async (params: UserCreateParams): Promise<UserCreateMutationResponse> => {
|
||||
try {
|
||||
const response = await axios.post<UserCreateResponse>(API_URL_USER.userCreate(), params);
|
||||
return { status: true, data: response.data };
|
||||
} catch (error: any) {
|
||||
return {
|
||||
status: false,
|
||||
error: {
|
||||
root: 'USER_CREATE',
|
||||
errKey: error.response?.data?.errKey || 'UNKNOWN_ERROR',
|
||||
code: error.response?.status?.toString() || '500',
|
||||
message: error.response?.data?.message || error.message || 'Unknown error',
|
||||
timestamp: new Date().toISOString(),
|
||||
details: error.response?.data?.details || {}
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
export const useUserCreateMutation = (options?: UseMutationOptions<UserCreateResponse, CBDCAxiosError, UserCreateParams>) => {
|
||||
const mutation = useMutation<UserCreateResponse, CBDCAxiosError, UserCreateParams>({
|
||||
export const useUserCreateMutation = (options?: UseMutationOptions<UserCreateMutationResponse, CBDCAxiosError, UserCreateParams>) => {
|
||||
const mutation = useMutation<UserCreateMutationResponse, CBDCAxiosError, UserCreateParams>({
|
||||
...options,
|
||||
mutationFn: (params: UserCreateParams) => userCreate(params),
|
||||
});
|
||||
|
||||
@@ -1,9 +1,8 @@
|
||||
import axios from 'axios';
|
||||
import { API_URL } from '@/shared/api/urls';
|
||||
import { API_URL_USER } from '@/shared/api/api-url-user';
|
||||
import { resultify } from '@/shared/lib/resultify';
|
||||
import { CBDCAxiosError } from '@/shared/@types/error';
|
||||
import {
|
||||
UserExistsUseridParams,
|
||||
UserExistsUseridResponse
|
||||
} from '../model/types';
|
||||
import {
|
||||
@@ -11,16 +10,16 @@ import {
|
||||
UseMutationOptions
|
||||
} from '@tanstack/react-query';
|
||||
|
||||
export const userExistsUserid = (params: UserExistsUseridParams) => {
|
||||
export const userExistsUserid = (usrId: string) => {
|
||||
return resultify(
|
||||
axios.post<UserExistsUseridResponse>(API_URL.userExistsUserid(), params),
|
||||
axios.post<UserExistsUseridResponse>(API_URL_USER.userExistsUserid(usrId)),
|
||||
);
|
||||
};
|
||||
|
||||
export const useUserExistsUseridMutation = (options?: UseMutationOptions<UserExistsUseridResponse, CBDCAxiosError, UserExistsUseridParams>) => {
|
||||
const mutation = useMutation<UserExistsUseridResponse, CBDCAxiosError, UserExistsUseridParams>({
|
||||
export const useUserExistsUseridMutation = (options?: UseMutationOptions<UserExistsUseridResponse, CBDCAxiosError, string>) => {
|
||||
const mutation = useMutation<UserExistsUseridResponse, CBDCAxiosError, string>({
|
||||
...options,
|
||||
mutationFn: (params: UserExistsUseridParams) => userExistsUserid(params),
|
||||
mutationFn: (usrId: string) => userExistsUserid(usrId),
|
||||
});
|
||||
|
||||
return {
|
||||
|
||||
31
src/entities/user/api/use-user-exists-userid-query.ts
Normal file
31
src/entities/user/api/use-user-exists-userid-query.ts
Normal file
@@ -0,0 +1,31 @@
|
||||
import axios from 'axios';
|
||||
import { API_URL_USER } from '@/shared/api/api-url-user';
|
||||
import { CBDCAxiosError } from '@/shared/@types/error';
|
||||
import {
|
||||
UserExistsUseridResponse
|
||||
} from '../model/types';
|
||||
import {
|
||||
useQuery,
|
||||
UseQueryOptions
|
||||
} from '@tanstack/react-query';
|
||||
|
||||
export const userExistsUserid = async (usrid: string) => {
|
||||
const response = await axios.post<UserExistsUseridResponse>(API_URL_USER.userExistsUserid(usrid));
|
||||
return response.data;
|
||||
};
|
||||
|
||||
export const useUserExistsUseridQuery = (
|
||||
usrid: string,
|
||||
options?: Omit<UseQueryOptions<UserExistsUseridResponse, CBDCAxiosError>, 'queryKey' | 'queryFn'>
|
||||
) => {
|
||||
const query = useQuery<UserExistsUseridResponse, CBDCAxiosError>({
|
||||
queryKey: ['userExistsUserid', usrid],
|
||||
queryFn: async () => await userExistsUserid(usrid),
|
||||
enabled: !!usrid && usrid.trim().length > 0, // usrid가 있을 때만 실행
|
||||
...options,
|
||||
});
|
||||
|
||||
return {
|
||||
...query,
|
||||
};
|
||||
};
|
||||
29
src/entities/user/api/use-user-find-authmethod-mutation.ts
Normal file
29
src/entities/user/api/use-user-find-authmethod-mutation.ts
Normal file
@@ -0,0 +1,29 @@
|
||||
import axios from 'axios';
|
||||
import { API_URL_USER } from '@/shared/api/api-url-user';
|
||||
import { resultify } from '@/shared/lib/resultify';
|
||||
import { CBDCAxiosError } from '@/shared/@types/error';
|
||||
import {
|
||||
UserFindAuthMethodParams,
|
||||
UserFindAuthMethodResponse
|
||||
} from '../model/types';
|
||||
import {
|
||||
useMutation,
|
||||
UseMutationOptions
|
||||
} from '@tanstack/react-query';
|
||||
|
||||
export const userFindAuthMethod = (params: UserFindAuthMethodParams) => {
|
||||
return resultify(
|
||||
axios.post<UserFindAuthMethodResponse>(API_URL_USER.findAuthMethod(), params),
|
||||
);
|
||||
};
|
||||
|
||||
export const useUserFindAuthMethodMutation = (options?: UseMutationOptions<UserFindAuthMethodResponse, CBDCAxiosError, UserFindAuthMethodParams>) => {
|
||||
const mutation = useMutation<UserFindAuthMethodResponse, CBDCAxiosError, UserFindAuthMethodParams>({
|
||||
...options,
|
||||
mutationFn: (params: UserFindAuthMethodParams) => userFindAuthMethod(params),
|
||||
});
|
||||
|
||||
return {
|
||||
...mutation,
|
||||
};
|
||||
};
|
||||
29
src/entities/user/api/use-user-find-mutation.ts
Normal file
29
src/entities/user/api/use-user-find-mutation.ts
Normal file
@@ -0,0 +1,29 @@
|
||||
import axios from 'axios';
|
||||
import { API_URL_USER } from '@/shared/api/api-url-user';
|
||||
import { resultify } from '@/shared/lib/resultify';
|
||||
import { CBDCAxiosError } from '@/shared/@types/error';
|
||||
import {
|
||||
UserFindParams,
|
||||
UserFindResponse
|
||||
} from '../model/types';
|
||||
import {
|
||||
useMutation,
|
||||
UseMutationOptions
|
||||
} from '@tanstack/react-query';
|
||||
|
||||
export const userFind = (params: UserFindParams) => {
|
||||
return resultify(
|
||||
axios.post<UserFindResponse>(API_URL_USER.findUser(), params),
|
||||
);
|
||||
};
|
||||
|
||||
export const useUserFindMutation = (options?: UseMutationOptions<UserFindResponse, CBDCAxiosError, UserFindParams>) => {
|
||||
const mutation = useMutation<UserFindResponse, CBDCAxiosError, UserFindParams>({
|
||||
...options,
|
||||
mutationFn: (params: UserFindParams) => userFind(params),
|
||||
});
|
||||
|
||||
return {
|
||||
...mutation,
|
||||
};
|
||||
};
|
||||
@@ -1,3 +1,8 @@
|
||||
import {
|
||||
DefaulResponsePagination,
|
||||
DefaultRequestPagination
|
||||
} from '@/entities/common/model/types';
|
||||
|
||||
export interface LoginParams {
|
||||
id: string;
|
||||
password: string;
|
||||
@@ -21,28 +26,60 @@ export interface LoginResponse {
|
||||
available2FAMethod?: Array<string>;
|
||||
requires2FA?: boolean;
|
||||
};
|
||||
|
||||
export interface UserInfo extends LoginResponse {
|
||||
|
||||
}
|
||||
export interface UserParams {
|
||||
|
||||
};
|
||||
|
||||
export interface UserListItem {
|
||||
usrid: string;
|
||||
idCl: string;
|
||||
status: string;
|
||||
}
|
||||
|
||||
export interface UserFindResponse extends DefaulResponsePagination {
|
||||
content: Array<UserListItem>;
|
||||
};
|
||||
|
||||
export interface UserFindParams {
|
||||
mid: string;
|
||||
page: DefaultRequestPagination;
|
||||
};
|
||||
|
||||
export interface UserExistsUseridParams {
|
||||
usrId: string;
|
||||
};
|
||||
|
||||
export interface UserFindAuthMethodParams {
|
||||
mid: string;
|
||||
usrid: string;
|
||||
page?: DefaultRequestPagination;
|
||||
};
|
||||
|
||||
export interface UserFindAuthMethodResponse {
|
||||
status: boolean;
|
||||
data: UserAuthMethodData;
|
||||
};
|
||||
|
||||
export interface UserExistsUseridResponse {
|
||||
exists: boolean;
|
||||
};
|
||||
|
||||
export interface VerificationsItem {
|
||||
type: string;
|
||||
contact: string;
|
||||
};
|
||||
|
||||
export interface UserCreateParams {
|
||||
userId: string;
|
||||
password: string;
|
||||
loginRange: string;
|
||||
verification: Array<VerificationsItem>
|
||||
};
|
||||
|
||||
export interface UserData {
|
||||
usrid: string;
|
||||
mid: string;
|
||||
@@ -87,3 +124,15 @@ export interface UserCreateResponse {
|
||||
user: UserData;
|
||||
};
|
||||
|
||||
export interface AuthMethodItem {
|
||||
usrid: string;
|
||||
systemAdminClassId: string;
|
||||
authMethodType: string;
|
||||
sequence: number;
|
||||
content: string;
|
||||
}
|
||||
|
||||
export interface UserAuthMethodData {
|
||||
emails: Array<AuthMethodItem>;
|
||||
phones: Array<AuthMethodItem>;
|
||||
}
|
||||
@@ -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">
|
||||
<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>
|
||||
|
||||
@@ -7,8 +7,325 @@ import {
|
||||
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>
|
||||
<div style={{ position: 'relative' }}>
|
||||
<input
|
||||
className="wid-100 error"
|
||||
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 className="ua-help error">동일한 ID가 이미 존재합니다.</div>
|
||||
)}
|
||||
</div>
|
||||
</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"
|
||||
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>
|
||||
@@ -65,20 +408,29 @@ export const UserAddAccountPage = () => {
|
||||
className="ic20 plus"
|
||||
type="button"
|
||||
aria-label="이메일 추가"
|
||||
onClick={handleAddEmail}
|
||||
disabled={!isEmailAddButtonEnabled()}
|
||||
></button>
|
||||
</div>
|
||||
<div className="ua-input-row">
|
||||
{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">
|
||||
@@ -88,20 +440,29 @@ export const UserAddAccountPage = () => {
|
||||
className="ic20 plus"
|
||||
type="button"
|
||||
aria-label="휴대폰 추가"
|
||||
onClick={handleAddPhone}
|
||||
disabled={!isPhoneAddButtonEnabled()}
|
||||
></button>
|
||||
</div>
|
||||
<div className="ua-input-row">
|
||||
{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>
|
||||
|
||||
@@ -109,7 +470,11 @@ export const UserAddAccountPage = () => {
|
||||
<button
|
||||
className="btn-50 btn-blue flex-1"
|
||||
type="button"
|
||||
>저장</button>
|
||||
onClick={handleSave}
|
||||
disabled={isPending}
|
||||
>
|
||||
{isPending ? '저장 중...' : '저장'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
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';
|
||||
@@ -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">
|
||||
<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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -4,22 +4,40 @@ import {
|
||||
} from './../constants/url';
|
||||
|
||||
export const API_URL_USER = {
|
||||
allUserList: () => {
|
||||
return `${API_BASE_URL}/api/v1/${API_URL_KEY}/user/all/users`;
|
||||
userExistsUserid: (usrid: string) => {
|
||||
return `${API_BASE_URL}/api/v1/${API_URL_KEY}/user/exists/${usrid}`;
|
||||
},
|
||||
createUser: () => {
|
||||
userCreate: () => {
|
||||
// 사용자 추가
|
||||
return `${API_BASE_URL}/api/v1/${API_URL_KEY}/user/create`;
|
||||
},
|
||||
deleteUser: () => {
|
||||
return `${API_BASE_URL}/api/v1/${API_URL_KEY}/user/delete`;
|
||||
},
|
||||
updateUser: () => {
|
||||
return `${API_BASE_URL}/api/v1/${API_URL_KEY}/user/update`;
|
||||
},
|
||||
userDetail: () => {
|
||||
return `${API_BASE_URL}/api/v1/${API_URL_KEY}/user/detail`;
|
||||
findUser: () => {
|
||||
return `${API_BASE_URL}/api/v1/${API_URL_KEY}/user/find`;
|
||||
},
|
||||
existsUserid: () => {
|
||||
return `${API_BASE_URL}/api/v1/${API_URL_KEY}/user/exists/userid`;
|
||||
},
|
||||
deleteUser: () => {
|
||||
return `${API_BASE_URL}/api/v1/${API_URL_KEY}/user/delete`;
|
||||
},
|
||||
createUser: () => {
|
||||
return `${API_BASE_URL}/api/v1/${API_URL_KEY}/user/create`;
|
||||
},
|
||||
findAuthMethod: () => {
|
||||
return `${API_BASE_URL}/api/v1/${API_URL_KEY}/user/tfa/find`;
|
||||
},
|
||||
modifyAuthMethod: () => {
|
||||
return `${API_BASE_URL}/api/v1/${API_URL_KEY}/user/tfa/modify`;
|
||||
},
|
||||
// allUserList: () => {
|
||||
// return `${API_BASE_URL}/api/v1/${API_URL_KEY}/user/all/users`;
|
||||
// },
|
||||
|
||||
// updateUser: () => {
|
||||
// return `${API_BASE_URL}/api/v1/${API_URL_KEY}/user/update`;
|
||||
// },
|
||||
// userDetail: () => {
|
||||
// return `${API_BASE_URL}/api/v1/${API_URL_KEY}/user/detail`;
|
||||
// },
|
||||
|
||||
}
|
||||
@@ -4422,6 +4422,18 @@ ul.txn-amount-detail li span:last-child {
|
||||
background: #F5F5F5 url('../images/ico_del_minus.svg') no-repeat center center;
|
||||
}
|
||||
|
||||
.icon-btn.check {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 6px;
|
||||
background: #F5F5F5 url('../images/ico_alone_check.svg') no-repeat center center;
|
||||
}
|
||||
|
||||
.button-group {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.notice-bar {
|
||||
padding: 14px 16px;
|
||||
background: #F4F8FF;
|
||||
|
||||
Reference in New Issue
Block a user