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

src/entities/support/api/use-notice-detail-mutaion.ts

@@ -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,
+  };
+};

src/entities/support/api/use-notice-list-mutation.ts

@@ -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,
+  };
+};

src/entities/support/model/types.ts

@@ -54,4 +54,32 @@ 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 {
+
+}

src/entities/support/ui/notice-item.tsx

@@ -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>
+    </>
+  );
+};