Files
nice-app-web/src/pages/support/qna/list-page.tsx
focp212@naver.com 065a4fd348 qna
2025-09-08 17:14:21 +09:00

106 lines
3.1 KiB
TypeScript

import { ChangeEvent, useEffect, useState } from 'react';
import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { HeaderType } from '@/entities/common/model/types';
import { useQnaListMutation } from '@/entities/support/api/use-qna-list-mutation';
import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constants';
import { QnaItem } from '@/entities/support/model/types';
import { SupportQnaItem } from '@/entities/support/ui/qna-item';
import {
useSetHeaderTitle,
useSetHeaderType,
useSetFooterMode,
useSetOnBack
} from '@/widgets/sub-layout/use-sub-layout';
export const QnaListPage = () => {
const { navigate } = useNavigate();
const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
const [searchValue, setSearchValue] = useState<string>('');
const [resultList, setResultList] = useState<Array<QnaItem>>([]);
useSetHeaderTitle('1:1 문의');
useSetHeaderType(HeaderType.LeftArrow);
useSetFooterMode(true);
useSetOnBack(() => {
navigate(PATHS.home);
});
const { mutateAsync: qnaList } = useQnaListMutation();
const callList = () => {
let listParams = {
...{page: pageParam}
};
qnaList(listParams).then((rs) => {
console.log(rs)
setResultList(rs.content);
});
};
const getQnaList = () => {
let rs = [];
for(let i=0;i<resultList.length;i++){
rs.push(
<SupportQnaItem
key={ `key-support-faq-item-${i}` }
sortNo={ resultList[i]?.sortNo }
seq={ resultList[i]?.seq }
statusCode={ resultList[i]?.statusCode }
statusName={ resultList[i]?.statusName }
requestDate={ resultList[i]?.requestDate }
requestName={ resultList[i]?.requestName }
title={ resultList[i]?.title }
contents={ resultList[i]?.contents }
answer={ resultList[i]?.answer }
></SupportQnaItem>
)
}
return rs;
};
const onClickToNavigation = () => {
navigate(PATHS.support.qna.register);
};
useEffect(() => {
callList();
}, []);
return (
<>
<main>
<div className="tab-content">
<div className="tab-pane sub active">
<div className="inq117">
<div className="inq-merchant">
<div className="inq-title"></div>
<div className="notice-filter">
<select className="flex-1">
<option></option>
</select>
</div>
</div>
<div className="notice-filter">
<select className="flex-1">
<option></option>
</select>
</div>
<div className="inq-list">
{ getQnaList() }
</div>
</div>
<div className="apply-row bottom-padding">
<button
className="btn-50 btn-blue flex-1"
onClick={ () => onClickToNavigation }
>1:1 </button>
</div>
</div>
</div>
</main>
</>
);
};