상세 수정

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

@@ -0,0 +1,81 @@
+import { useTranslation } from 'react-i18next';
+import { motion } from 'framer-motion';
+import { useLocation } from 'react-router';
+import { NoticeDetailParams, NoticeDetailResponse, NoticeItem } from '../../model/types';
+import { useEffect, useState } from 'react';
+import { useNoticeDetailMutation } from '../../api/use-notice-detail-mutation';
+import moment from 'moment';
+import { DetailMotionDuration, DetailMotionStyle, DetailMotionVariants } from '@/entities/common/model/constant';
+import { FullMenuClose } from '@/entities/common/ui/full-menu-close';
+
+export interface NoticeDetaillProps {
+  detailOn: boolean;
+  setDetailOn: (detailOn: boolean) => void;
+  seq: number;
+};
+export const NoticeDetail = ({
+  detailOn,
+  setDetailOn,
+  seq
+}: NoticeDetaillProps) => {
+  const location = useLocation();
+  const { t } = useTranslation();
+
+  const [result, setResult] = useState<NoticeItem>({});
+  
+  const { mutateAsync: noticeDetail } = useNoticeDetailMutation();
+
+  const callDetail = () => {
+    let detailParams: NoticeDetailParams = {
+      seq: seq,
+    };
+    noticeDetail(detailParams).then((rs: NoticeDetailResponse) => {
+      setResult(rs);
+    });
+  };
+
+  const onClickToClose = () => {
+    setDetailOn(false);
+  };
+
+  useEffect(() => {
+    callDetail();
+  }, [seq]);
+
+  return (
+    <>
+      <motion.div 
+        className="full-menu-modal" 
+        initial="hidden"
+        animate={ (detailOn)? 'visible': 'hidden' }
+        variants={ DetailMotionVariants }
+        transition={ DetailMotionDuration }
+        style={ DetailMotionStyle }
+      >
+        { result.informCl &&
+          <div className="full-menu-container pdw-16">
+            <div className="full-menu-header">
+              <div className="full-menu-title center">{ t('support.notice.title') }</div>
+              <div className="full-menu-actions">
+                <FullMenuClose
+                  addClass="full-menu-close"
+                  onClickToCallback={ onClickToClose }
+                ></FullMenuClose>
+              </div>
+            </div>
+            <div className="tab-pane sub active">
+              <div className="option-list">
+                <div className="notice-detail">
+                  <div className="notice-detail__title">{ result.title }</div>
+                  <div className="notice-detail__meta">{ result.regDt? moment(result.regDt).format('YYYY.MM.DD'): '' } | { t(`support.notice.categories.${result.informCl}`) }</div>
+                  <div className="notice-detail__divider"></div>
+                  <div className="notice-detail__body" dangerouslySetInnerHTML={{ __html: result.contents || '' }}></div>
+                </div>
+              </div>
+            </div>
+          </div>
+        }
+      </motion.div>
+    </>
+  );
+};