공지사항 /홈 / 리스트 / 상세
This commit is contained in:
focp212@naver.com
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user