nicepayments/nice-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

공지사항 /홈 / 리스트 / 상세

Browse Source
This commit is contained in:
focp212@naver.com
2025-09-09 13:48:16 +09:00
parent 3cfc45a244
commit b760a69fef
12 changed files with 304 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/entities/home/model/types.ts
View File

@@ -2,12 +2,6 @@ export interface FavoriteItemProps {
img?: string,
text?: string
};
export interface NoticeItemProps {
title?: string,
meta1?: string,
meta2?: string,
img?: string,
};
export interface HomeBottomBannerProps {
setBottomBannerOn: (bottomBannerOn: boolean) => void;
bottomBannerOn: boolean;

36
src/entities/home/ui/home-notice-item.tsx
View File

@@ -1,31 +1,41 @@
import { NoticeItemProps } from '@/entities/support/model/types';
import { IMAGE_ROOT } from '@/shared/constants/common';
import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { NoticeItemProps } from '../model/types';
import moment from 'moment';
export const HomeNoticeItem = ({
id,
title,
meta1,
meta2,
img
category,
regDate,
isNew
}: NoticeItemProps) => {
const { navigate } = useNavigate();
const onClickToNavigate = (path: string) => {
navigate(path + '14');
const onClickToDetail = () => {
navigate(PATHS.support.notice.detail, {
state: {
id: id
}
})
};
return (
<>
<div className="notice-item">
<div
className="notice-item"
onClick={ () => onClickToDetail() }
>
<div className="notice-content">
<div className="notice-title">{ title }</div>
<div className="notice-meta">{ meta1}<span>{ meta2 }</span></div>
<div className="notice-meta">{ category}<span>{ moment(regDate).format('YY년 MM월 DD일') }</span></div>
</div>
<div
className="notice-arrow"
onClick={ () => onClickToNavigate(PATHS.support.notice.detail) }
>
<img src={ img } alt="공지사항 바로가기" />
<div className="notice-arrow">
<img
src={ IMAGE_ROOT + '/Forward.svg' }
alt="공지사항 바로가기"
/>
</div>
</div>
</>

75
src/entities/home/ui/home-notice-list.tsx
View File

@@ -1,58 +1,51 @@
/* eslint-disable @cspell/spellchecker */
import { IMAGE_ROOT } from '@/shared/constants/common';
import { useEffect, useState } from 'react';
import { useNoticeListMutation } from '@/entities/support/api/use-notice-list-mutation';
import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constants';
import { NoticeItem } from '@/entities/support/model/types';
import { HomeNoticeItem } from './home-notice-item';
export const HomeNoticeList = () => {
const items = [
{
title: '시스템 안정화를 위한 정기 점검이 예정되어 있습니다.',
meta1: '공지사항',
meta2: '25년 5월 23일',
img: IMAGE_ROOT + '/Forward.svg'
},
{
title: '가맹점 관리 메뉴에 거래내역 엑셀 다운로드 기능이 추가 되었습니다.',
meta1: '공지사항',
meta2: '25년 5월 23일',
img: IMAGE_ROOT + '/Forward.svg'
},
{
title: '신규 가맹점을 대상으로 거래수수료 인하 혜택을 12월까지 제공합니다.',
meta1: '공지사항',
meta2: '25년 5월 23일',
img: IMAGE_ROOT + '/Forward.svg'
},
{
title: '앱의 안정성과 사용성을 개선한 버전 2.3.1이 출시되었습니다.',
meta1: '공지사항',
meta2: '25년 5월 23일',
img: IMAGE_ROOT + '/Forward.svg'
},
{
title: '점검 시간 동안 일부 서비스 이용이 제한될 수 있으니 미리 확인해주세요.',
meta1: '공지사항',
meta2: '25년 5월 23일',
img: IMAGE_ROOT + '/Forward.svg'
},
];
const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
const [resultList, setResultList] = useState<Array<NoticeItem>>([]);
const { mutateAsync: noticeList } = useNoticeListMutation();
const getItems = () => {
let rs = [];
for(let i=0;i<items.length;i++){
let key = 'notice-key-'+i;
let maxCnt = (resultList.length < 5)? resultList.length: 5;
for(let i=0;i<maxCnt;i++){
rs.push(
<HomeNoticeItem
key={ key }
title={ items[i]?.title }
meta1={ items[i]?.meta1 }
meta2={ items[i]?.meta2 }
img={ items[i]?.img }
key={ `key-home-notice-item-${i}` }
id={ resultList[i]?.id }
title={ resultList[i]?.title }
category={ resultList[i]?.category }
regDate={ resultList[i]?.regDate }
isNew={ resultList[i]?.isNew }
></HomeNoticeItem>
);
}
return rs;
};
const callList = () => {
let listParams = {
category: 'ALL',
searchKeyword: '',
...{page: pageParam}
};
noticeList(listParams).then((rs) => {
console.log(rs)
setResultList(rs.content);
});
};
useEffect(() => {
callList();
}, []);
return (
<>
<div className="notice-list">

29
src/entities/support/api/use-notice-detail-mutaion.ts Normal file
View File

@@ -0,0 +1,29 @@
import axios from 'axios';
import { API_URL } from '@/shared/api/urls';
import { resultify } from '@/shared/lib/resultify';
import { CBDCAxiosError } from '@/shared/@types/error';
import {
NoticeDetailParams,
NoticeDetailResponse
} from '../model/types';
import {
useMutation,
UseMutationOptions
} from '@tanstack/react-query';
export const noticeDetail = (params: NoticeDetailParams) => {
return resultify(
axios.post<NoticeDetailResponse>(API_URL.noticeDetail(), params),
);
};
export const useNoticeDetailMutation = (options?: UseMutationOptions<NoticeDetailResponse, CBDCAxiosError, NoticeDetailParams>) => {
const mutation = useMutation<NoticeDetailResponse, CBDCAxiosError, NoticeDetailParams>({
...options,
mutationFn: (params: NoticeDetailParams) => noticeDetail(params),
});
return {
...mutation,
};
};

29
src/entities/support/api/use-notice-list-mutation.ts Normal file
View File

@@ -0,0 +1,29 @@
import axios from 'axios';
import { API_URL } from '@/shared/api/urls';
import { resultify } from '@/shared/lib/resultify';
import { CBDCAxiosError } from '@/shared/@types/error';
import {
NoticeListParams,
NoticeListResponse
} from '../model/types';
import {
useMutation,
UseMutationOptions
} from '@tanstack/react-query';
export const noticeList = (params: NoticeListParams) => {
return resultify(
axios.post<NoticeListResponse>(API_URL.noticeList(), params),
);
};
export const useNoticeListMutation = (options?: UseMutationOptions<NoticeListResponse, CBDCAxiosError, NoticeListParams>) => {
const mutation = useMutation<NoticeListResponse, CBDCAxiosError, NoticeListParams>({
...options,
mutationFn: (params: NoticeListParams) => noticeList(params),
});
return {
...mutation,
};
};

28
src/entities/support/model/types.ts
View File

@@ -55,3 +55,31 @@ export interface QnaSaveParams extends SupportParams {
export interface QnaSaveResponse {
};
export interface NoticeListParams extends SupportParams {
searchKeyword: string;
category: string;
pagination?: DefaultRequestPagination;
};
export interface NoticeItem {
id?: number;
title?: string;
content?: string;
category?: string;
regDate?: string;
isNew?: boolean;
viewCount?: number;
};
export interface NoticeListResponse {
content: Array<NoticeItem>;
nextCursor: string;
hasNext: boolean;
};
export interface NoticeDetailParams {
noticeId: number;
};
export interface NoticeDetailResponse extends NoticeItem {
};
export interface NoticeItemProps extends NoticeItem {
}

38
src/entities/support/ui/notice-item.tsx Normal file
View File

@@ -0,0 +1,38 @@
import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { NoticeItemProps } from '../model/types';
import moment from 'moment';
export const SupportNoticeItem = ({
id,
title,
category,
regDate,
isNew
}: NoticeItemProps) => {
const { navigate } = useNavigate();
const onClickToDetail = () => {
navigate(PATHS.support.notice.detail, {
state: {
id: id
}
})
};
return (
<>
<div
className="notice-row-114"
onClick={ () => onClickToDetail() }
>
<div className="notice-txt">
<div className="notice-title-114">{ title }</div>
<div className="notice-meta-114">
<span className="blue">{ category }</span> ㅣ <span>{ moment(regDate).format('YYYY.MM.DD HH:mm:ss') }</span>
</div>
</div>
</div>
</>
);
};

14
src/pages/home/home-page.tsx
View File

@@ -1,3 +1,4 @@
import moment from 'moment';
import { useCallback, useEffect, useState } from 'react';
import { getLocalStorage } from '@/shared/lib';
import { StorageKeys } from '@/shared/constants/local-storage';
@@ -14,21 +15,21 @@ import {
useSetFooterMode,
useSetFooterCurrentPage
} from '@/widgets/sub-layout/use-sub-layout';
import moment from 'moment';
export const HomePage = () => {
const { callLogin } = useUserInfo();
useSetHeaderTitle('');
useSetHeaderType(HeaderType.Home);
useSetFooterMode(true);
useSetFooterCurrentPage(FooterItemActiveKey.Home);
const { callLogin } = useUserInfo();
const today = moment().format('YYYYMMDD').toString();
let bannerToday = getLocalStorage(StorageKeys.BottomBannerClose);
const [bottomBannerOn, setBottomBannerOn] = useState<boolean>(false);
const [authRegisterOn, setAuthRegisterOn] = useState<boolean>(false);
const [loginSuccess, setLoginSuccess] = useState<boolean>(false);
/*
const userParmas = {
@@ -43,8 +44,11 @@ export const HomePage = () => {
};
const handleLogin = useCallback(async () =>{
await callLogin(userParmas);
callLogin(userParmas).then(() => {
setLoginSuccess(true);
});
}, []);
const checkBottomBannerOpen = () => {
if(!!bannerToday){
bannerToday = bannerToday.toString();
@@ -90,7 +94,9 @@ export const HomePage = () => {
<div className="tab-content blue">
<div className="tab-pane dashboard active">
<FavoriteWrapper></FavoriteWrapper>
{ !!loginSuccess &&
<DayStatusBox></DayStatusBox>
}
</div>
</div>
</main>

58
src/pages/support/notice/detail-page.tsx
View File

@@ -1,14 +1,47 @@
import { useEffect, useState } from 'react';
import { useLocation } from 'react-router';
import { PATHS } from '@/shared/constants/paths';
import { useNoticeDetailMutation } from '@/entities/support/api/use-notice-detail-mutaion';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { HeaderType } from '@/entities/common/model/types';
import { NoticeItem } from '@/entities/support/model/types';
import {
useSetHeaderTitle,
useSetHeaderType,
useSetFooterMode
useSetFooterMode,
useSetOnBack
} from '@/widgets/sub-layout/use-sub-layout';
import moment from 'moment';
export const NoticeDetailPage = () => {
const { navigate } = useNavigate();
const location = useLocation();
const [result, setResult] = useState<NoticeItem>({});
useSetHeaderTitle('공지사항');
useSetHeaderType(HeaderType.RightClose);
useSetFooterMode(false);
useSetOnBack(() => {
navigate(PATHS.support.notice.list);
});
const { mutateAsync: noticeDetail } = useNoticeDetailMutation();
const callDetail = () => {
let detailParams = {
noticeId: location?.state.id,
};
noticeDetail(detailParams).then((rs) => {
console.log(rs);
setResult(rs);
});
};
useEffect(() => {
callDetail();
}, []);
return (
<>
@@ -17,27 +50,10 @@ export const NoticeDetailPage = () => {
<div className="tab-pane sub active">
<div className="option-list pb-120">
<div className="notice-detail">
<div className="notice-detail__title">[관리비 출금] 5월 관리비(4월 사용료) 출금일 변경(정정)</div>
<div className="notice-detail__meta">2025.08.19 | 카테고리</div>
<div className="notice-detail__title">{ result.title }</div>
<div className="notice-detail__meta">{ moment(result.regDate).format('YYYY.MM.DD') } | { result.category }</div>
<div className="notice-detail__divider"></div>
<div className="notice-detail__body">안녕하세요. 페이앳 관리자입니다.
‘25년 5월 페이앳 관리비(4월 사용료)출금일자 변경을 다음과 같이 공지드립니다.
관리비 청구 데이터 확정 지연으로 부득이하게 금번 5월 페이앳 관리비 출금일자가 아래와 같이 변경되어 출금될 예정입니다.
서비스 운영에 참고하시기 바라며, 서비스 이용에 불편드려 죄송합니다.
----------- 다음 -----------
기존 : 매월 15일(영업일 기준)/*5월 출금일 : 19일(월)
변경 : 5월 19일(월)
세금계산서 발행일 : 5월 19일(*19일 출금분에 한함)
-----------------------------
</div>
<div className="notice-detail__body">{ result.content }</div>
</div>
</div>
</div>

104
src/pages/support/notice/list-page.tsx
View File

@@ -1,5 +1,10 @@
import { ChangeEvent, useEffect, useState } from 'react';
import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { useNoticeListMutation } from '@/entities/support/api/use-notice-list-mutation';
import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constants';
import { NoticeItem } from '@/entities/support/model/types';
import { SupportNoticeItem } from '@/entities/support/ui/notice-item';
import { HeaderType } from '@/entities/common/model/types';
import {
useSetHeaderTitle,
@@ -11,12 +16,57 @@ import {
export const NoticeListPage = () => {
const { navigate } = useNavigate();
const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
const [searchKeyword, setSearchKeyword] = useState<string>('');
const [resultList, setResultList] = useState<Array<NoticeItem>>([]);
useSetHeaderTitle('공지사항');
useSetHeaderType(HeaderType.LeftArrow);
useSetFooterMode(true);
useSetOnBack(() => {
navigate(PATHS.home);
});
const { mutateAsync: noticeList } = useNoticeListMutation();
const callList = () => {
let listParams = {
category: 'ALL',
searchKeyword: searchKeyword,
...{page: pageParam}
};
noticeList(listParams).then((rs) => {
console.log(rs)
setResultList(rs.content);
});
};
const onClickToAction = () => {
callList();
};
const getNoticeList = () => {
let rs = [];
for(let i=0;i<resultList.length;i++){
rs.push(
<SupportNoticeItem
key={ `key-support-notice-item-${i}` }
id={ resultList[i]?.id }
title={ resultList[i]?.title }
category={ resultList[i]?.category }
regDate={ resultList[i]?.regDate }
isNew={ resultList[i]?.isNew }
></SupportNoticeItem>
)
}
return rs;
};
useEffect(() => {
callList();
}, []);
return (
<>
<main>
@@ -25,8 +75,17 @@ export const NoticeListPage = () => {
<div className="notice114">
<div className="notice-controls">
<div className="notice-search">
<span className="ic16 search" aria-hidden="true"></span>
<input type="text" placeholder="검색어를 입력하세요" />
<span
className="ic16 search"
aria-hidden="true"
onClick={ () => onClickToAction() }
></span>
<input
type="text"
placeholder="검색어를 입력하세요"
value={ searchKeyword }
onChange={ (e: ChangeEvent<HTMLInputElement>) => setSearchKeyword(e.target.value) }
/>
</div>
<div className="notice-filter">
<select className="flex-1">
@@ -35,46 +94,7 @@ export const NoticeListPage = () => {
</div>
</div>
<div className="notice-list-114">
<div className="notice-row-114">
<div className="notice-txt">
<div className="notice-title-114">신한은행 시스템 작업 안내신한은행 시스템 작업 <span className="blue">안내신한은행 시스템 작업</span> 안내신한은행 시스템 작업 안내신한은행 시스템 작업 안내</div>
<div className="notice-meta-114">
<span className="blue">공지사항</span> ㅣ <span>2025.06.01 10:00:00</span>
</div>
</div>
</div>
<div className="notice-row-114">
<div className="notice-txt">
<div className="notice-title-114">NICE페이먼츠 도메인 인증서 G2교체 작업 안내</div>
<div className="notice-meta-114">
<span className="blue">공지사항</span> ㅣ <span>2025.06.01 10:00:00</span>
</div>
</div>
</div>
<div className="notice-row-114">
<div className="notice-txt">
<div className="notice-title-114">N자금이체 서비스 도메인 인증서 G2 교체 <span className="blue">작업 및 TLS 프로토콜</span> 개선 안내 ...</div>
<div className="notice-meta-114">
<span className="blue">공지사항</span> ㅣ <span>2025.06.01 10:00:00</span>
</div>
</div>
</div>
<div className="notice-row-114">
<div className="notice-txt">
<div className="notice-title-114">N자금이체 서비스 <span className="blue">도메인 인증서 G2</span> 교체 작업 및 TLS 프로토콜 개선 안내 ...</div>
<div className="notice-meta-114">
<span className="blue">공지사항</span> ㅣ <span>2025.06.01 10:00:00</span>
</div>
</div>
</div>
<div className="notice-row-114">
<div className="notice-txt">
<div className="notice-title-114">NICE페이먼츠 도메인 인증서 G2교체 작업 안내</div>
<div className="notice-meta-114">
<span className="blue">공지사항</span> ㅣ <span>2025.06.01 10:00:00</span>
</div>
</div>
</div>
{ getNoticeList() }
</div>
</div>
</div>

64
src/shared/api/urls.ts
View File

@@ -182,6 +182,16 @@ export const API_URL = {
return `${API_BASE_URL}/api/v1/${API_URL_KEY}/faq/list`;
},
/* Notice Management - 공지사항 API */
noticeList: () => {
// POST: 공지사항 목록 조회
return `${API_BASE_URL}/api/v1/${API_URL_KEY}/notice/list`;
},
noticeDetail: () => {
// POST: 공지사항 목록 조회
return `${API_BASE_URL}/api/v1/${API_URL_KEY}/notice/detail`;
},
/* Extension Management - 부가서비스 API */
extensionSmsResend: () => {
// POST: SMS 결제 통보 > SMS 재발송
@@ -274,51 +284,6 @@ export const API_URL = {
return `${API_BASE_URL}/api/v1/empty-token/${API_URL_KEY}/add-send/code`;
}
/*
getAppInfo: `${API_BASE_URL}/ewa/common/AppManage/getAppInfo`, // 이용자 APP 버전 조회
checkIdentifyInfo: `${API_BASE_URL}/ewa/common/checkIdentifyInfo`, // 신분증검증요청
checkPinNum: `${API_BASE_URL}/ewa/common/checkPinNum`, // 인증번호검증(핀 검증)
confirmUser: `${API_BASE_URL}/ewa/common/confirmUser`, // 사용자정보조회
createUser: `${API_BASE_URL}/ewa/common/createUser`, // 회원가입(고객등록)
regLbdyUse: `${API_BASE_URL}/ewa/common/regLbdyUse`, // 생체인증설정여부등록
regPinNum: `${API_BASE_URL}/ewa/common/regPinNum`, // 인증번호등록(핀)
selfAuth: `${API_BASE_URL}/ewa/common/selfAuth`, // 본인인증정보입력
selfAuthNum: `${API_BASE_URL}/ewa/common/selfAuthNum`, // 본인인증(검증)
cstmrReadList: `${API_BASE_URL}/ewa/cstmr/readList`, // 고객목록조회
stplatReadList: `${API_BASE_URL}/ewa/stplat/readList`, // 약관목록조회
login: `${API_BASE_URL}/users/login`, // 고객로그인
//login: `${API_BASE_URL}/users/login`, // 고객로그인
accountValid: `${API_BASE_URL}/ewa/acnut/accountValid`, // 계좌인증정보입력(검증)
createWallet: `${API_BASE_URL}/ewa/wallet/createWallet`, // 이용자 지갑 생성
deleteWallet: `${API_BASE_URL}/ewa/wallet/deleteWallet`, // 이용자 지갑 삭제
walletReadList: `${API_BASE_URL}/ewa/wallet/readList`, // 이용자지갑 거래내역조회
walletRead: `${API_BASE_URL}/ewa/wallet/read`, // 이용자지갑 거래내역상세
cstmr: (cstmrNo?: string) => {
return `${API_BASE_URL}/ewa/cstmr${cstmrNo ? '/' + cstmrNo : ''}`;
}, // 고객
cmmntyManage: (id?: string) => {
return `${API_BASE_URL}/ewa/manage/cmmnty/CmmntyManage${id ? '/' + id : ''}`;
}, // 이용자 커뮤니티
codeManage: (id: string) => {
return `${API_BASE_URL}/common/codedata/CodeData${id ? '/' + id : ''}`;
}, // 공통코드
recentRecipients: `${API_BASE_URL}/ewa/wallet/recent`, // 최근 이체대상 조회
findUserAlias: `${API_BASE_URL}/ewa/manage/Alias/find`, // 이체를 위한 사용자 이름, 지갑주소 조회
depositTrans: `${API_BASE_URL}/ewa/acnut/depositTrans`, // 예금 토큰 이체 , 송금
emoneyTrans: `${API_BASE_URL}/ewa/acnut/emoneyTrans`, // 이머니 토큰 이체, 송금
convDeposit: `${API_BASE_URL}/ewa/acnut/convDeposit`, // 전환 입금
depositConv: `${API_BASE_URL}/ewa/acnut/depositConv`, // 예금 전환
payment: `${API_BASE_URL}/ewa/acnut/payment`, // 결제
topUp: `${API_BASE_URL}/ewa/manage/emoney/chargeEmoneyToken`, // 충전
sendDsuseEmoneyInfo: `${API_BASE_URL}/ewa/manage/emoney/sendDsuseEmoneyInfo`, // 예금 토큰 전환 (타행)
dsuseOwnEmoneyToken: `${API_BASE_URL}/ewa/manage/emoney/dsuseOwnEmoneyToken`, // 예금 토큰 전환 (당행)
readFranchiseList: `${API_BASE_URL}/ewa/common/voucher/readFranchiseList`, // 사용처 목록 조회
readFranchise: (franchiseId: string) => `${API_BASE_URL}/ewa/common/voucher/readFranchise/${franchiseId}`, // 사용처 상세 조회
notificationList: `${API_BASE_URL}/com/manage/pushMsg/readList`, // 알림 메세지 목록
updateIndict: (mssageManageId: string) => `${API_BASE_URL}/com/manage/pushMsg/updateIndict/${mssageManageId}`, // 알림 메세지 확인 처리
*/
};
export type API_URL_TYPE = typeof API_URL;
@@ -338,15 +303,6 @@ export const WHITE_LIST_URLS: string[] = [
API_URL.fidoRegisterComplete(),
API_URL.fidoLoginBegin(),
API_URL.fidoLoginComplete(),
/*
API_URL.confirmUser,
API_URL.selfAuth,
API_URL.selfAuthNum,
API_URL.createUser,
API_URL.regPinNum,
API_URL.stplatReadList,
*/
];
export const getApiPathname = (url: string) => {

2
src/shared/constants/route-names.ts
View File

@@ -113,7 +113,7 @@ export const ROUTE_NAMES = {
notice: {
base: '/notice/*',
list: 'list',
detail: 'detail/:noticeId',
detail: 'detail',
},
faq: {
base: '/faq/*',