Index: document/src/assets/css/test.css =================================================================== diff -u -r8d478ba62441f19281787298267e58ee501a6577 -r65a2c4a7bfe19f7c0b05149cc6a534d1c25f846d --- document/src/assets/css/test.css (.../test.css) (revision 8d478ba62441f19281787298267e58ee501a6577) +++ document/src/assets/css/test.css (.../test.css) (revision 65a2c4a7bfe19f7c0b05149cc6a534d1c25f846d) @@ -221,7 +221,7 @@ #bo_v_title {} #bo_v_title .bo_v_cate {display:inline-block;line-height:20px;background:#e2eaf6;color:#3a8afd;padding:0 10px;border-radius:3px;} -#bo_v_title .bo_v_tit {display:block;margin:5px 0 0;word-break:break-all;font-size: 13px;} +#bo_v_title .bo_v_tit {display:block;margin:5px 0;word-break:break-all;font-size: 13px;} #bo_v_info {margin:0;color:#666;} #bo_v_info:after {display:block;visibility:hidden;clear:both;content:""} @@ -304,6 +304,7 @@ #bo_v_con {margin:10px 0 30px;width:100%;line-height:1.7em;min-height:200px;word-break:break-all;overflow:hidden; text-align: left;} #bo_v_con a {display:inline-block;color:#000;text-decoration:underline} #bo_v_con img {max-width:100%;height:auto} +#bo_v_con a img{display:inline-block;margin-top:10px} #bo_v_act {margin-bottom:30px;text-align:center} #bo_v_act .bo_v_act_gng {position:relative} @@ -1363,18 +1364,24 @@ .fa-commenting-o{display: inline-block;font: normal normal normal 14px / 1 FontAwesome;font-size: inherit;text-rendering: auto;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;} .fa-commenting-o:before {content: "";} -.side-wrap{z-index:100; position: fixed; right:15px;top:125px;color:#fff;background-color: rgb(51, 51, 51);border-radius:0;font-size: 13px;} +.cmt_btn{background: rgba(51, 51, 51, 0.4) !important;border: 1px solid rgba(51, 51, 51, 0.425) !important;} +.cmt_btn span.cmt_more img{display:none} +.cmt_btn span.cmt_more{width:20px;height:21px;background:url(../images/bluefire.gif) no-repeat 0 0;background-size:20px 21px} .cnt-style{position: relative;margin: 15px;border-radius: 3px;box-sizing: content-box;padding: 15px 0;background: rgba(51, 51, 51, .425);margin-bottom: 30px;font-size: 13px;line-height: 1.428571429;color: #f8f8f8;} .cnt-style a {color: #a4c6ff;text-decoration: none} .cnt-style a:hover,.cnt-style a:focus {color: #5797ff;text-decoration: underline} .cnt-style a.btn_b01, .cnt-style .btn_b01{display: inline-block;color: #bababa;text-decoration: none;vertical-align: middle;border: 0;background: transparent;line-height: 35px;height: 35px;padding: 0 10px;text-align: center;font-size: 1.4em;-webkit-transition: background-color 0.3s ease-out;-moz-transition: background-color 0.3s ease-out;-o-transition: background-color 0.3s ease-out;transition: background-color 0.3s ease-out;} -.cmt_btn{background: rgba(51, 51, 51, 0.4) !important;border: 1px solid rgba(51, 51, 51, 0.425) !important;} -.cmt_btn span.cmt_more img{display:none} -.cmt_btn span.cmt_more{width:20px;height:21px;background:url(../images/bluefire.gif) no-repeat 0 0;background-size:20px 21px} .menu-style .menu-top{height:130px} .menu-style .menu-top .link-logo{position:relative} .menu-style .menu-top .link-logo .bg-logo{position:absolute;left:35px;top:24px} -.menu-style .menu-body{height:calc(100% - 130px)} \ No newline at end of file +.menu-style .menu-body{height:calc(100% - 130px)} + +.side-wrap{z-index:100; position: fixed; right:15px;top:125px;color:#fff;background-color: rgb(51, 51, 51);border-radius:0;font-size: 13px;} +.side-wrap .tit{font-size:13px} +.side-wrap .sub-tit{display:block;font-size:12px!important} +.side-wrap .list-items li{font-size:12px} +.side-wrap .sub-tit + .list-items{margin-top:10px} +.side-wrap .list-items + .sub-tit{margin-top:15px} \ No newline at end of file Index: document/src/layout/SideContent.jsx =================================================================== diff -u -r3dbe1098df9b1ed1b18f66471db263644b63efb2 -r65a2c4a7bfe19f7c0b05149cc6a534d1c25f846d --- document/src/layout/SideContent.jsx (.../SideContent.jsx) (revision 3dbe1098df9b1ed1b18f66471db263644b63efb2) +++ document/src/layout/SideContent.jsx (.../SideContent.jsx) (revision 65a2c4a7bfe19f7c0b05149cc6a534d1c25f846d) @@ -8,16 +8,14 @@ const SideContent = ({ parsedHtml }) => { const el = parsedHtml; - // 특정 기호가 포함된 텍스트를 추출 - const extractTexts = (element) => { + const extractTexts = (el) => { let texts = []; const traverse = (node) => { - - if (node.type === 'b') { + // 댓글에 있는 날짜(숫자) 아닌 경우 + if (node.type === 'span' && node.props.className !== 'nb_date') { const text = typeof node.props.children === 'string' ? node.props.children.trim() : ''; - // 특정 문자 추출 - if (text[0] === '■' || text[0] === '●') { + if (text) { texts.push(text); } } @@ -31,30 +29,53 @@ } }; - traverse(element); + traverse(el); return texts; }; - const specificTexts = extractTexts(el); + const texts = extractTexts(el); + // 텍스트를 h1과 ul > li로 변환 + const renderContent = () => { + let elements = []; + let currentList = []; + let inList = false; + + texts.forEach((text, index) => { + if (text[0] === '*') { + // 현재까지의 리스트를 종료하고