게시판 상세 작업중

egovframe-template-simple-react-contribution/package-lock.json

@@ -3146,6 +3146,12 @@
         "@types/node": "*"
       }
     },
+    "@types/cookie": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
+      "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==",
+      "dev": true
+    },
     "@types/d3-array": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.1.tgz",
@@ -3260,6 +3266,16 @@
         "@types/unist": "^2"
       }
     },
+    "@types/hoist-non-react-statics": {
+      "version": "3.3.5",
+      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz",
+      "integrity": "sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*",
+        "hoist-non-react-statics": "^3.3.0"
+      }
+    },
     "@types/html-minifier-terser": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
@@ -5551,6 +5567,11 @@
         "domelementtype": "^2.2.0"
       }
     },
+    "dompurify": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.1.5.tgz",
+      "integrity": "sha512-lwG+n5h8QNpxtyrJW/gJWckL+1/DQiYMX8f7t8Z2AZTPw1esVrqjI63i7Zc2Gz0aKzLVMYC1V1PL/ky+aY/NgA=="
+    },
     "domutils": {
       "version": "2.8.0",
       "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
@@ -11107,6 +11128,17 @@
         "warning": "^4.0.3"
       }
     },
+    "react-cookie": {
+      "version": "7.1.4",
+      "resolved": "https://registry.npmjs.org/react-cookie/-/react-cookie-7.1.4.tgz",
+      "integrity": "sha512-wDxxa/HYaSXSMlyWJvJ5uZTzIVtQTPf1gMksFgwAz/2/W3lCtY8r4OChCXMPE7wax0PAdMY97UkNJedGv7KnDw==",
+      "dev": true,
+      "requires": {
+        "@types/hoist-non-react-statics": "^3.3.5",
+        "hoist-non-react-statics": "^3.3.2",
+        "universal-cookie": "^7.0.0"
+      }
+    },
     "react-copy-to-clipboard": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/react-copy-to-clipboard/-/react-copy-to-clipboard-5.1.0.tgz",
@@ -12985,6 +13017,24 @@
         "crypto-random-string": "^2.0.0"
       }
     },
+    "universal-cookie": {
+      "version": "7.1.4",
+      "resolved": "https://registry.npmjs.org/universal-cookie/-/universal-cookie-7.1.4.tgz",
+      "integrity": "sha512-Q+DVJsdykStWRMtXr2Pdj3EF98qZHUH/fXv/gwFz/unyToy1Ek1w5GsWt53Pf38tT8Gbcy5QNsj61Xe9TggP4g==",
+      "dev": true,
+      "requires": {
+        "@types/cookie": "^0.6.0",
+        "cookie": "^0.6.0"
+      },
+      "dependencies": {
+        "cookie": {
+          "version": "0.6.0",
+          "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz",
+          "integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==",
+          "dev": true
+        }
+      }
+    },
     "universalify": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",

egovframe-template-simple-react-contribution/package.json

@@ -17,6 +17,7 @@
     "apexcharts": "^3.45.2",
     "bootstrap": "^5.3.2",
     "date-fns": "^3.2.0",
+    "dompurify": "^3.1.5",
     "prop-types": "^15.8.1",
     "qs": "^6.11.0",
     "react": "^18.2.0",
@@ -44,7 +45,8 @@
   "devDependencies": {
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
-    "@testing-library/user-event": "^13.5.0"
+    "@testing-library/user-event": "^13.5.0",
+    "react-cookie": "^7.1.4"
   },
   "scripts": {
     "start": "react-scripts start",

egovframe-template-simple-react-contribution/src/constants/url.js

@@ -35,7 +35,7 @@ const URL = {
     SUPPORT                     : "/support", // 고객지원
     SUPPORT_QNA                 : "/support/qna", // 게시판/QNA 소개
     SUPPORT_LIST                : "/support/list/:BbsCode", // 게시판/리스트
-    SUPPORT_DETAIL              : "/support/detail/:BbsCode", // 게시판/상세보기
+    SUPPORT_DETAIL              : "/support/detail/:bbsContSeq", // 게시판/상세보기
     SUPPORT_CREATE              : "/support/create/:BbsCode", // 게시판/글쓰기
     SUPPORT_LIST_NOCODE         : "/support/list",
     SUPPORT_DETAIL_NOCODE       : "/support/detail", // 게시판/상세보기

egovframe-template-simple-react-contribution/src/pages/support/Detail.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import {Link, useNavigate} from 'react-router-dom';
+import {Link, useLocation, useNavigate, useParams} from 'react-router-dom';
 
 import * as EgovNet from 'api/egovFetch';
 import URL from 'constants/url';
@@ -7,10 +7,20 @@ import URL from 'constants/url';
 import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
 import Button from 'react-bootstrap/Button';
+import {format} from "date-fns";
+import DOMPurify from 'dompurify';
+
 
 function Detail(){
     const navigate = useNavigate();
 
+    const {bbsContSeq} = useParams();
+    console.log("@@@ bbsContSeq : " + bbsContSeq);
+
+    const location = useLocation();
+    const item = location.state?.item;
+    console.log("@@@ item : " + JSON.stringify(item));
+
     const goToList = () => {
         navigate('/support/list/KCSC-QA');
     };
@@ -45,38 +55,34 @@ function Detail(){
                                 </dd>
                                 <dt>등록일자</dt>
                                 <dd>
-                                    2011-08-08 11:11:11
+                                    {format(new Date(item.frstCrtDt), 'yyyy-MM-dd HH:mm:ss')}
                                 </dd>
                             </dl>
                             <dl>
                                 <dt>작성자</dt>
                                 <dd>
-                                    박성환
+                                    {item.frstCrtId}
                                 </dd>
                                 <dt>조회</dt>
                                 <dd>
-                                    100
+                                    {item.bbsReadCnt}
                                 </dd>
                             </dl>
                             <dl>
                                 <dt>첨부파일</dt>
                                 <dd>
                                     <span className="file_attach">
-                                        <Link to="">file_name.hwp</Link> <span>[3626] byte</span>
+                                        <Link to="">{item.fileGrpId}</Link> <span>[3626] byte</span>
                                     </span>
                                 </dd>
                             </dl>
                             <dl>
-                                <dd>[공지] jsp파일을 못찼습니다. 제목 뿌려주세요.</dd>
+                                <dd>{item.bbsContTitle}</dd>
                             </dl>
                         </div>
                         <div className="qna_q">
                             <span>Q</span>
-                            안녕하세요 웹호스팅에 올렸더니 jsp파일에서 이런에러로그가 남았는데요 jsp파일을 못찾는것같습니다? xml을 수정해야하나요?<br/>
+                            <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(item.bbsContents) }}></div>
-                            심각: Servlet.service() for servlet action threw exception<br/>
-                            javax.servlet.ServletException: Could not get RequestDispatcher for [/WEB-INF/jsp/egovframework//main/main.jsp]: check that
-                            this file exists within your WAR<br/>
-                            at org.springframework.web.servlet.view.InternalResourceView.renderMergedOutputModel(InternalResourceView.java:217)
                         </div>
                         <div className="qna_a">
                             <span>A</span>

egovframe-template-simple-react-contribution/src/pages/support/List.jsx

@@ -9,6 +9,7 @@ import Col from 'react-bootstrap/Col';
 import Button from 'react-bootstrap/Button';
 import {format} from "date-fns";
 import EgovPaging from "../../components/EgovPaging";
+import Detail from "./Detail";
 
 function List(){
     const navigate = useNavigate();
@@ -31,6 +32,12 @@ function List(){
 
     console.log("@@@ BbsCode : " + BbsCode);
 
+    function Detail(item) {
+        const detailUrl = '/support/detail/' + item.bbsContSeq;
+        console.log(detailUrl);
+        navigate(detailUrl, {state : {item}});
+    }
+
     const retrieveList = useCallback((searchCondition) => {
         handleClose();
         const params = EgovNet.convParams(searchCondition);
@@ -62,7 +69,7 @@ function List(){
                     mutListTag.push(
                         <div className="list_item">
                             <div>공지</div>
-                            <div className="al">{item?.bbsContTitle}</div>
+                            <div className="al" onClick={()=>{Detail(item)}}>{item?.bbsContTitle}</div>
                             <div>{item?.frstCrtId}</div>
                             <div>{item?.bbsReadCnt}</div>
                             <div>{formattedDate}</div>