지난 포스팅에서 정말이지 우여곡절 끝에
게시글 작성 및 수정 페이지를 완료했었습니다.
그 느낌이 부여잡고
보기 페이지를 완료시키려 합니다.
기본 그누 테마의 보기 페이지를 확인하고,
현재 개발 중인 테마의 깨지고 있는 모습을 확인합니다.
어째 두개 다 깨져보이는 이유는 뭘까요? 흠...
어떻게 해야 할지 좀 감이 안잡히네요.
이건 뭐 둘 다 깨져보이니...
정확히 말하면 제가 제일 못하는
화면 구성을 어떻게 해야 할지가 고민됩니다.
하는 수 없이 Metronic Admin 템플릿을 뒤져봐야겠죠...
오... 템플릿 중 메일 폼이 있는데,
이게 그나마 제일 비슷한 것 같네요. 맘에 듭니다.
https://keenthemes.com/metronic/preview/demo1/custom/apps/inbox.html
Metronic | Inbox
keenthemes.com
위 화면을 게시글 보기 영역으로 바꾸어보았습니다.
괜찮은 생각인 것 같아요~
자! 이제 정해졌으니, 바로 작업 들어갑니다.
오늘 작업해야 하는 파일은 basic과 gallery에 있는 view 파일이네요.
/theme/mt703/skin/board/basic/view.skin.php
/theme/mt703/skin/board/gallery/view.skin.php
/theme/mt703/skin/board/basic/view_comment.skin.php
/theme/mt703/skin/board/gallery/view_comment.skin.php
/theme/mt703/skin/board/basic/list.skin.php
/theme/mt703/skin/board/gallery/list.skin.php
오늘은 6개 파일이나 되네요.
순서는 보기를 먼저 진행하고, 댓글, 리스트 순으로 진행할 예정이지만
오늘 모두 다 하긴 어려울 것 같네요.
다행인건 view_comment 파일은 똑같지 않을까 싶습니다.
(acroDiff 프로그램으로 비교해보니 똑같네요~)
(회사에서도 무료로 사용할 수 있는 프로그램이에요~ 추천드려요~)
(단 폴더를 통째로 비교할 수 없다는게 단점입니다. ㅠㅠ)
위에서 변경한 템플릿을 view_skin.php에 붙여보았습니다.
실로 멋진 화면이 나올 것 같습니다~
이제, 위 화면을 기본 그누 테마와 비슷한 모습으로 바꾸는 작업!
즉 제일 오래 걸리는 화면 구성 작업을 해야겠네요.
이건 얼마나 걸릴런지...
제목줄 완성하는데도 한참 걸렸네요.
본문은 본문만 있는 줄 알았더니,
SNS버튼에, 추천/비추천에 뭐 이것 저것 있네요.
그런데 "G5_SNS_PATH"에 view.sns.php 라는 파일이 있군요.
G5_SNS_PATH 경로 : /plugin/sns
그냥 써도 디자인적으로 큰 문제는 없어보입니다만,
향후 SNS를 더 추가할 수 있고,
화면이 변할 수도 있으니 옮기도록 하겠습니다.
/theme/mt703/plugin/sns/... (파일들이 꽤 있네요)
이렇게 막 옮겨도 되는지 좀 걱정은 되지만, 일단 옮겨봅니다.
또, 테마를 위해 "G5_THEME_SNS_PATH"를 만들어야겠네요.
theme.config.php에 상수를 정의합니다.
(아... PC가 갑자기 종료되어 중간 부분이 날라갔네요. ㅠㅠ)
(오늘은 퇴근할래요 ㅜㅜ)
어제에 이어 2일째 게시글 보기 페이지 작업을 하고 있습니다.
중간에 정리한게 날라가서 아쉽네요. 글타고 다시 정리할 자신도 없어요.
여차 저차 본문 영역과 댓글 영역을 완료하였습니다.
관리자일때와 첨부 파일등 확인해야 할것이 너무 많네요.
완성된 보기 페이지 즉, view.skin.php의 소스를 올려드립니다.
<?php
if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
include_once(G5_LIB_PATH.'/thumbnail.lib.php');
// add_stylesheet('css 구문', 출력순서); 숫자가 작을 수록 먼저 출력됨
//add_stylesheet('<link rel="stylesheet" href="'.$board_skin_url.'/style.css">', 0);
?>
<?php include G5_THEME_PARTIALS_PATH ."/_subheader/subheader-v1.php"; ?>
<style type="text/css">
</style>
<script src="<?php echo G5_JS_URL; ?>/viewimageresize.js"></script>
<!-- 게시물 읽기 시작 { -->
<div class="d-flex flex-column-fluid">
<!--begin::Container-->
<div class="container">
<div class="d-flex flex-row mt-5">
<!--begin::View-->
<div class="flex-row-fluid mr-lg-6 d-block" id="kt_inbox_view">
<!--begin::Card-->
<div class="card card-custom card-stretch">
<!--begin::Header-->
<div class="card-header align-items-center flex-wrap justify-content-between py-5 h-auto" style="<?php echo $width ? "width:".$width : ""; ?>">
<!--begin::Header-Category & Title-->
<div class="d-block align-items-left my-2 w-100">
<?php if ($category_name) { ?>
<span class="label label-light-primary font-weight-bold label-inline font-size-h4 py-4 mr-3 align-middle"><?php echo $view['ca_name']; // 분류 출력 끝 ?></span>
<?php } ?>
<span class="font-weight-bold font-size-h3 mr-3">
<?php
echo cut_str(get_text($view['wr_subject']), 70); // 글제목 출력
?></span>
</div>
<!--end::Header-Category & Title-->
<!--begin::Header-Left-->
<div class="d-flex align-items-center my-2">
<span class="symbol symbol-50 mr-4">
<span class="symbol-label" style="background-image: url('<?php echo get_profile_img($view['mb_id']); ?>')"></span>
</span>
<div class="d-flex flex-column flex-grow-1 flex-wrap mr-2">
<div class="d-flex">
<?php echo $view['name'] ?><?php if ($is_ip_view) { echo " ($ip)"; } ?>
</div>
<div class="d-flex">
<a href="#bo_vc" class="font-weight-bold text-primary text-hover-primary mr-2"> <i class="fa fa-commenting-o text-primary" aria-hidden="true"></i> <?php echo number_format($view['wr_comment']) ?>건</a>
<span class="font-weight-bold text-muted mr-2"><i class="fa fa-eye" aria-hidden="true"></i> <?php echo number_format($view['wr_hit']) ?>회</span>
<span class="font-weight-bold text-muted mr-2"><i class="fa fa-clock-o" aria-hidden="true"></i> <?php echo date("y-m-d H:i", strtotime($view['wr_datetime'])) ?></span>
</div>
</div>
</div>
<!--end::Header-Left-->
<!--begin::Header-Right-->
<div class="d-flex align-items-center justify-content-end text-right my-2">
<a href="<?php echo $list_href ?>" class="btn btn-clean btn-icon btn-sm mr-2" data-toggle="tooltip" title="목록"><i class="fa fa-list"></i></a>
<?php if ($reply_href) { ?><a href="<?php echo $reply_href ?>" class="btn btn-clean btn-icon btn-sm mr-2" data-toggle="tooltip" title="답글"><i class="fa fa-reply"></i></a><?php } ?>
<?php if ($update_href) { ?><a href="<?php echo $update_href ?>" class="btn btn-clean btn-icon btn-sm mr-2" data-toggle="tooltip" title="수정"><i class="fa fa-pencil-square-o"></i></a><?php } ?>
<?php if ($write_href) { ?><a href="<?php echo $write_href ?>" class="btn btn-clean btn-icon btn-sm mr-2" data-toggle="tooltip" title="새글"><i class="fa fa-pencil"></i></a><?php } ?>
<?php if ($delete_href) { ?><a href="<?php echo $delete_href ?>" onclick="del(this.href); return false;" class="btn btn-clean btn-icon btn-sm mr-2" data-toggle="tooltip" title="삭제"><i class="fa fa-trash-o"></i></a><?php } ?>
<?php if ($copy_href) { ?><a href="<?php echo $copy_href ?>" onclick="board_move(this.href); return false;"class="btn btn-clean btn-icon btn-sm mr-2" data-toggle="tooltip" title="복사"><i class="fa fa-files-o"></i></a><?php } ?>
<?php if ($move_href) { ?><a href="<?php echo $move_href ?>" onclick="board_move(this.href); return false;"class="btn btn-clean btn-icon btn-sm" data-toggle="tooltip" title="이동"><i class="fa fa-arrows"></i></a><?php } ?>
<?php if ($search_href) { ?><a href="<?php echo $search_href ?>" class="btn btn-clean btn-icon btn-sm" data-toggle="tooltip" title="검색"><i class="fa fa-search"></i></a><?php } ?>
</div>
<!--end::Header-Right-->
</div>
<!--end::Header-->
<!--begin::Body-->
<div class="card-body p-0">
<!--begin::LINK-->
<div class="d-flex align-items-center justify-content-between flex-wrap card-spacer-x py-5">
<!--begin::Title-->
<div class="d-flex align-items-center mr-2 py-2"><?php //echo G5_THEME_SNS_PATH; ?>
<?php include_once(G5_THEME_SNS_PATH ."/view.sns.skin.php"); ?>
<?php if ($scrap_href) { ?><a type="button" href="<?php echo $scrap_href; ?>" target="_blank" class="btn btn_secondary" onclick="win_scrap(this.href); return false;"><i class="fa fa-bookmark" aria-hidden="true"></i> 스크랩</a><?php } ?>
</div>
<!--end::Title-->
</div>
<!--end::LINK-->
<!--begin::Content-->
<div id="bo_v_con" class="mb-3 px-7">
<?php
// 파일 출력
$v_img_count = count($view['file']);
if($v_img_count) {
echo '<div id="bo_v_img">';
for ($i=0; $i<=count($view['file']); $i++) {
echo get_file_thumbnail($view['file'][$i]);
}
echo "</div>\n";
}
?>
<?php echo get_view_thumbnail($view['content']); ?>
<?php //echo $view['rich_content']; // {이미지:0} 과 같은 코드를 사용할 경우 ?>
<?php if ($is_signature) { ?><p class="mt-10"><?php echo nl2br($signature); ?></p><?php } ?>
<!-- 추천 비추천 시작 { -->
<?php if ( $good_href || $nogood_href) { ?>
<div id="bo_v_act">
<?php if ($good_href) { ?>
<span class="bo_v_act_gng">
<a href="<?php echo $good_href.'&'.$qstr ?>" id="good_button" class="bo_v_good"><i class="fa fa-thumbs-o-up" aria-hidden="true"></i><span class="sound_only">추천</span><strong><?php echo number_format($view['wr_good']) ?></strong></a>
<b id="bo_v_act_good"></b>
</span>
<?php } ?>
<?php if ($nogood_href) { ?>
<span class="bo_v_act_gng">
<a href="<?php echo $nogood_href.'&'.$qstr ?>" id="nogood_button" class="bo_v_nogood"><i class="fa fa-thumbs-o-down" aria-hidden="true"></i><span class="sound_only">비추천</span><strong><?php echo number_format($view['wr_nogood']) ?></strong></a>
<b id="bo_v_act_nogood"></b>
</span>
<?php } ?>
</div>
<?php } else {
if($board['bo_use_good'] || $board['bo_use_nogood']) {
?>
<div id="bo_v_act">
<?php if($board['bo_use_good']) { ?><span class="bo_v_good"><i class="fa fa-thumbs-o-up" aria-hidden="true"></i><span class="sound_only">추천</span><strong><?php echo number_format($view['wr_good']) ?></strong></span><?php } ?>
<?php if($board['bo_use_nogood']) { ?><span class="bo_v_nogood"><i class="fa fa-thumbs-o-down" aria-hidden="true"></i><span class="sound_only">비추천</span><strong><?php echo number_format($view['wr_nogood']) ?></strong></span><?php } ?>
</div>
<?php
}
}
?>
</div>
<!--end::Content-->
</div>
<!--end::Body-->
<!--begin::footer-->
<div class="card-footer px-0 py-3">
<?php //tLog(view[file], $view['file']);
$cnt = 0;
if ($view['file']['count']) {
for ($i=0; $i<count($view['file']); $i++) {
if (isset($view['file'][$i]['source']) && $view['file'][$i]['source'] && !$view['file'][$i]['view'])
$cnt++;
}
} //tLog(cnt, $cnt);
?>
<?php if($cnt) { ?>
<!-- 첨부파일 시작 { -->
<?php
// 가변 파일
for ($i=0; $i<count($view['file']); $i++) {
if (isset($view['file'][$i]['source']) && $view['file'][$i]['source'] && !$view['file'][$i]['view']) {
?>
<div class="alert alert-custom alert alert-shadow fade show gutter-b mx-7 <?php echo ($i==count($view['link'])) ? "" : "mb-1" ;?>" role="alert">
<div class="alert-icon">
<span class="svg-icon svg-icon-primary svg-icon-2x"><!--begin::Svg Icon | path:/var/www/metronic/themes/metronic/theme/html/demo1/dist/../src/media/svg/icons/Files/Downloads-folder.svg--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect x="0" y="0" width="24" height="24"/>
<path d="M3.5,21 L20.5,21 C21.3284271,21 22,20.3284271 22,19.5 L22,8.5 C22,7.67157288 21.3284271,7 20.5,7 L10,7 L7.43933983,4.43933983 C7.15803526,4.15803526 6.77650439,4 6.37867966,4 L3.5,4 C2.67157288,4 2,4.67157288 2,5.5 L2,19.5 C2,20.3284271 2.67157288,21 3.5,21 Z" fill="#000000" opacity="0.3"/>
<path d="M14.8875071,12.8306874 L12.9310336,12.8306874 L12.9310336,10.8230161 C12.9310336,10.5468737 12.707176,10.3230161 12.4310336,10.3230161 L11.4077349,10.3230161 C11.1315925,10.3230161 10.9077349,10.5468737 10.9077349,10.8230161 L10.9077349,12.8306874 L8.9512614,12.8306874 C8.67511903,12.8306874 8.4512614,13.054545 8.4512614,13.3306874 C8.4512614,13.448999 8.49321518,13.5634776 8.56966458,13.6537723 L11.5377874,17.1594334 C11.7162223,17.3701835 12.0317191,17.3963802 12.2424692,17.2179453 C12.2635563,17.2000915 12.2831273,17.1805206 12.3009811,17.1594334 L15.2691039,13.6537723 C15.4475388,13.4430222 15.4213421,13.1275254 15.210592,12.9490905 C15.1202973,12.8726411 15.0058187,12.8306874 14.8875071,12.8306874 Z" fill="#000000"/>
</g>
</svg><!--end::Svg Icon--></span>
</div>
<div class="alert-text text-truncate" data-toggle="tooltip" title="<?php echo $view['file'][$i]['content'] ?><br/> (<?php echo $view['file'][$i]['size'] ?>) <?php echo $view['file'][$i]['datetime'] ?>">
<a href="<?php echo $view['file'][$i]['href']; ?>" target="_blank" class="text-dark text-hover-primary">
<strong><?php echo $view['file'][$i]['source'] ?></strong>
</a>
<?php echo $view['file'][$i]['content'] ?> (<?php echo $view['file'][$i]['size'] ?>) <?php echo $view['file'][$i]['datetime'] ?>
</div>
<div class="alert-text text-right" style="min-width:123px;"><?php echo $view['file'][$i]['download'] ?>회 다운로드</div>
</div>
<?php
}
}
?>
<!-- } 첨부파일 끝 -->
<?php } ?>
<!-- 관련링크 시작 { -->
<?php if(isset($view['link'][1]) && $view['link'][1]) { ?>
<?php
// 링크
$cnt = 0;
for ($i=1; $i<=count($view['link']); $i++) {
if ($view['link'][$i]) {
$cnt++;
$link = cut_str($view['link'][$i], 70);
?>
<div class="alert alert-custom alert alert-shadow fade show gutter-b mx-7 <?php echo ($i==count($view['link'])) ? "" : "mb-1" ;?>" role="alert">
<div class="alert-icon">
<span class="svg-icon svg-icon-dark svg-icon-2x"><!--begin::Svg Icon | path:/var/www/metronic/themes/metronic/theme/html/demo1/dist/../src/media/svg/icons/General/Attachment2.svg--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect x="0" y="0" width="24" height="24"/>
<path d="M11.7573593,15.2426407 L8.75735931,15.2426407 C8.20507456,15.2426407 7.75735931,15.6903559 7.75735931,16.2426407 C7.75735931,16.7949254 8.20507456,17.2426407 8.75735931,17.2426407 L11.7573593,17.2426407 L11.7573593,18.2426407 C11.7573593,19.3472102 10.8619288,20.2426407 9.75735931,20.2426407 L5.75735931,20.2426407 C4.65278981,20.2426407 3.75735931,19.3472102 3.75735931,18.2426407 L3.75735931,14.2426407 C3.75735931,13.1380712 4.65278981,12.2426407 5.75735931,12.2426407 L9.75735931,12.2426407 C10.8619288,12.2426407 11.7573593,13.1380712 11.7573593,14.2426407 L11.7573593,15.2426407 Z" fill="#000000" opacity="0.3" transform="translate(7.757359, 16.242641) rotate(-45.000000) translate(-7.757359, -16.242641) "/>
<path d="M12.2426407,8.75735931 L15.2426407,8.75735931 C15.7949254,8.75735931 16.2426407,8.30964406 16.2426407,7.75735931 C16.2426407,7.20507456 15.7949254,6.75735931 15.2426407,6.75735931 L12.2426407,6.75735931 L12.2426407,5.75735931 C12.2426407,4.65278981 13.1380712,3.75735931 14.2426407,3.75735931 L18.2426407,3.75735931 C19.3472102,3.75735931 20.2426407,4.65278981 20.2426407,5.75735931 L20.2426407,9.75735931 C20.2426407,10.8619288 19.3472102,11.7573593 18.2426407,11.7573593 L14.2426407,11.7573593 C13.1380712,11.7573593 12.2426407,10.8619288 12.2426407,9.75735931 L12.2426407,8.75735931 Z" fill="#000000" transform="translate(16.242641, 7.757359) rotate(-45.000000) translate(-16.242641, -7.757359) "/>
<path d="M5.89339828,3.42893219 C6.44568303,3.42893219 6.89339828,3.87664744 6.89339828,4.42893219 L6.89339828,6.42893219 C6.89339828,6.98121694 6.44568303,7.42893219 5.89339828,7.42893219 C5.34111353,7.42893219 4.89339828,6.98121694 4.89339828,6.42893219 L4.89339828,4.42893219 C4.89339828,3.87664744 5.34111353,3.42893219 5.89339828,3.42893219 Z M11.4289322,5.13603897 C11.8194565,5.52656326 11.8194565,6.15972824 11.4289322,6.55025253 L10.0147186,7.96446609 C9.62419433,8.35499039 8.99102936,8.35499039 8.60050506,7.96446609 C8.20998077,7.5739418 8.20998077,6.94077682 8.60050506,6.55025253 L10.0147186,5.13603897 C10.4052429,4.74551468 11.0384079,4.74551468 11.4289322,5.13603897 Z M0.600505063,5.13603897 C0.991029355,4.74551468 1.62419433,4.74551468 2.01471863,5.13603897 L3.42893219,6.55025253 C3.81945648,6.94077682 3.81945648,7.5739418 3.42893219,7.96446609 C3.0384079,8.35499039 2.40524292,8.35499039 2.01471863,7.96446609 L0.600505063,6.55025253 C0.209980772,6.15972824 0.209980772,5.52656326 0.600505063,5.13603897 Z" fill="#000000" opacity="0.3" transform="translate(6.014719, 5.843146) rotate(-45.000000) translate(-6.014719, -5.843146) "/>
<path d="M17.9142136,15.4497475 C18.4664983,15.4497475 18.9142136,15.8974627 18.9142136,16.4497475 L18.9142136,18.4497475 C18.9142136,19.0020322 18.4664983,19.4497475 17.9142136,19.4497475 C17.3619288,19.4497475 16.9142136,19.0020322 16.9142136,18.4497475 L16.9142136,16.4497475 C16.9142136,15.8974627 17.3619288,15.4497475 17.9142136,15.4497475 Z M23.4497475,17.1568542 C23.8402718,17.5473785 23.8402718,18.1805435 23.4497475,18.5710678 L22.0355339,19.9852814 C21.6450096,20.3758057 21.0118446,20.3758057 20.6213203,19.9852814 C20.2307961,19.5947571 20.2307961,18.9615921 20.6213203,18.5710678 L22.0355339,17.1568542 C22.4260582,16.76633 23.0592232,16.76633 23.4497475,17.1568542 Z M12.6213203,17.1568542 C13.0118446,16.76633 13.6450096,16.76633 14.0355339,17.1568542 L15.4497475,18.5710678 C15.8402718,18.9615921 15.8402718,19.5947571 15.4497475,19.9852814 C15.0592232,20.3758057 14.4260582,20.3758057 14.0355339,19.9852814 L12.6213203,18.5710678 C12.2307961,18.1805435 12.2307961,17.5473785 12.6213203,17.1568542 Z" fill="#000000" opacity="0.3" transform="translate(18.035534, 17.863961) scale(1, -1) rotate(45.000000) translate(-18.035534, -17.863961) "/>
</g>
</svg><!--end::Svg Icon--></span>
</div>
<div class="alert-text text-truncate"><a href="<?php echo $view['link_href'][$i] ?>" target="_blank" class="text-dark text-hover-primary"><?php echo $link ?></a></div>
<div class="alert-text text-right" style="min-width:77px;"><?php echo $view['link_hit'][$i] ?>회 연결</div>
</div>
<?php
}
}
?>
<?php } ?>
<!-- } 관련링크 끝 -->
<?php if ($prev_href || $next_href) { ?>
<?php if ($prev_href) { ?>
<div class="alert alert-custom alert alert-shadow fade show gutter-b mx-7 <?php echo ($i==count($view['link'])) ? "" : "mb-1" ;?>" role="alert">
<div class="alert-icon">
<span class="svg-icon svg-icon-dark svg-icon-2x"><!--begin::Svg Icon | path:C:\wamp64\www\keenthemes\themes\metronic\theme\html\demo1\dist/../src/media/svg/icons\Navigation\Angle-double-up.svg--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<polygon points="0 0 24 0 24 24 0 24"/>
<path d="M8.2928955,10.2071068 C7.90237121,9.81658249 7.90237121,9.18341751 8.2928955,8.79289322 C8.6834198,8.40236893 9.31658478,8.40236893 9.70710907,8.79289322 L15.7071091,14.7928932 C16.085688,15.1714722 16.0989336,15.7810586 15.7371564,16.1757246 L10.2371564,22.1757246 C9.86396402,22.5828436 9.23139665,22.6103465 8.82427766,22.2371541 C8.41715867,21.8639617 8.38965574,21.2313944 8.76284815,20.8242754 L13.6158645,15.5300757 L8.2928955,10.2071068 Z" fill="#000000" fill-rule="nonzero" transform="translate(12.000003, 15.500003) scale(-1, 1) rotate(-90.000000) translate(-12.000003, -15.500003) "/>
<path d="M6.70710678,12.2071104 C6.31658249,12.5976347 5.68341751,12.5976347 5.29289322,12.2071104 C4.90236893,11.8165861 4.90236893,11.1834211 5.29289322,10.7928968 L11.2928932,4.79289682 C11.6714722,4.41431789 12.2810586,4.40107226 12.6757246,4.76284946 L18.6757246,10.2628495 C19.0828436,10.6360419 19.1103465,11.2686092 18.7371541,11.6757282 C18.3639617,12.0828472 17.7313944,12.1103502 17.3242754,11.7371577 L12.0300757,6.88414142 L6.70710678,12.2071104 Z" fill="#000000" fill-rule="nonzero" opacity="0.3" transform="translate(12.000003, 8.500003) scale(-1, 1) rotate(-360.000000) translate(-12.000003, -8.500003) "/>
</g>
</svg><!--end::Svg Icon--></span> 이전글
</div>
<div class="alert-text text-truncate"><a href="<?php echo $prev_href ?>" target="_blank" class="text-dark text-hover-primary"><?php echo $prev_wr_subject ?></a></div>
<div class="alert-text text-right" style="min-width:77px;"><?php echo str_replace('-', '.', substr($prev_wr_date, '2', '8')); ?></div>
</div>
<?php } ?>
<?php if ($next_href) { ?>
<div class="alert alert-custom alert alert-shadow fade show gutter-b mx-7 <?php echo ($i==count($view['link'])) ? "" : "mb-1" ;?>" role="alert">
<div class="alert-icon">
<span class="svg-icon svg-icon-dark svg-icon-2x"><!--begin::Svg Icon | path:C:\wamp64\www\keenthemes\themes\metronic\theme\html\demo1\dist/../src/media/svg/icons\Navigation\Angle-double-down.svg--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<polygon points="0 0 24 0 24 24 0 24"/>
<path d="M8.2928955,3.20710089 C7.90237121,2.8165766 7.90237121,2.18341162 8.2928955,1.79288733 C8.6834198,1.40236304 9.31658478,1.40236304 9.70710907,1.79288733 L15.7071091,7.79288733 C16.085688,8.17146626 16.0989336,8.7810527 15.7371564,9.17571874 L10.2371564,15.1757187 C9.86396402,15.5828377 9.23139665,15.6103407 8.82427766,15.2371482 C8.41715867,14.8639558 8.38965574,14.2313885 8.76284815,13.8242695 L13.6158645,8.53006986 L8.2928955,3.20710089 Z" fill="#000000" fill-rule="nonzero" transform="translate(12.000003, 8.499997) scale(-1, -1) rotate(-90.000000) translate(-12.000003, -8.499997) "/>
<path d="M6.70710678,19.2071045 C6.31658249,19.5976288 5.68341751,19.5976288 5.29289322,19.2071045 C4.90236893,18.8165802 4.90236893,18.1834152 5.29289322,17.7928909 L11.2928932,11.7928909 C11.6714722,11.414312 12.2810586,11.4010664 12.6757246,11.7628436 L18.6757246,17.2628436 C19.0828436,17.636036 19.1103465,18.2686034 18.7371541,18.6757223 C18.3639617,19.0828413 17.7313944,19.1103443 17.3242754,18.7371519 L12.0300757,13.8841355 L6.70710678,19.2071045 Z" fill="#000000" fill-rule="nonzero" opacity="0.3" transform="translate(12.000003, 15.499997) scale(-1, -1) rotate(-360.000000) translate(-12.000003, -15.499997) "/>
</g>
</svg><!--end::Svg Icon--></span> 다음글
</div>
<div class="alert-text text-truncate"><a href="<?php echo $next_href ?>" target="_blank" class="text-dark text-hover-primary"><?php echo $next_wr_subject ?></a></div>
<div class="alert-text text-right" style="min-width:77px;"><?php echo str_replace('-', '.', substr($next_wr_date, '2', '8')); ?></div>
</div>
<?php } ?>
<ul class="bo_v_nb mx-7">
<?php if ($prev_href) { ?><li class="btn_prv"><span class="nb_tit"><i class="fa fa-chevron-up" aria-hidden="true"></i> 이전글</span><a href="<?php echo $prev_href ?>"><?php echo $prev_wr_subject;?></a> <span class="nb_date"><?php echo str_replace('-', '.', substr($prev_wr_date, '2', '8')); ?></span></li><?php } ?>
<?php if ($next_href) { ?><li class="btn_next"><span class="nb_tit"><i class="fa fa-chevron-down" aria-hidden="true"></i> 다음글</span><a href="<?php echo $next_href ?>"><?php echo $next_wr_subject;?></a> <span class="nb_date"><?php echo str_replace('-', '.', substr($next_wr_date, '2', '8')); ?></span></li><?php } ?>
</ul>
<?php } ?>
</div>
<!--end::footer-->
<!--begin::footer-->
<div class="card-footer px-0 py-3">
<?php
// 코멘트 입출력
include_once(G5_BBS_PATH.'/view_comment.php');
?>
</div>
<!--end::footer-->
</div>
<!--end::Card-->
</div>
<!--end::View-->
<!--begin::Aside-->
<div class="flex-row-auto offcanvas-mobile w-300px w-xxl-375px" id="kt_inbox_aside">
<!--begin::Card-->
<div class="card card-custom card-stretch">
<!--begin::Body-->
<div class="card-body px-5">
<!--begin::Compose-->
<div class="px-4 mt-4 mb-10">
<a href="#" class="btn btn-block btn-primary font-weight-bold text-uppercase py-4 px-6 text-center" data-toggle="modal" data-target="#kt_inbox_compose">New Message</a>
</div>
<!--end::Compose-->
<!--begin::Navigations-->
<div class="navi navi-hover navi-active navi-link-rounded navi-bold navi-icon-center navi-light-icon">
<!--begin::Item-->
<div class="navi-item my-2">
<a href="#" class="navi-link active">
<span class="navi-icon mr-4">
<span class="svg-icon svg-icon-lg">
<!--begin::Svg Icon | path:assets/media/svg/icons/Communication/Mail-heart.svg-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect x="0" y="0" width="24" height="24" />
<path d="M6,2 L18,2 C18.5522847,2 19,2.44771525 19,3 L19,13 C19,13.5522847 18.5522847,14 18,14 L6,14 C5.44771525,14 5,13.5522847 5,13 L5,3 C5,2.44771525 5.44771525,2 6,2 Z M13.8,4 C13.1562,4 12.4033,4.72985286 12,5.2 C11.5967,4.72985286 10.8438,4 10.2,4 C9.0604,4 8.4,4.88887193 8.4,6.02016349 C8.4,7.27338783 9.6,8.6 12,10 C14.4,8.6 15.6,7.3 15.6,6.1 C15.6,4.96870845 14.9396,4 13.8,4 Z" fill="#000000" opacity="0.3" />
<path d="M3.79274528,6.57253826 L12,12.5 L20.2072547,6.57253826 C20.4311176,6.4108595 20.7436609,6.46126971 20.9053396,6.68513259 C20.9668779,6.77033951 21,6.87277228 21,6.97787787 L21,17 C21,18.1045695 20.1045695,19 19,19 L5,19 C3.8954305,19 3,18.1045695 3,17 L3,6.97787787 C3,6.70173549 3.22385763,6.47787787 3.5,6.47787787 C3.60510559,6.47787787 3.70753836,6.51099993 3.79274528,6.57253826 Z" fill="#000000" />
</g>
</svg>
<!--end::Svg Icon-->
</span>
</span>
<span class="navi-text font-weight-bolder font-size-lg">Inbox</span>
<span class="navi-label">
<span class="label label-rounded label-light-success font-weight-bolder">3</span>
</span>
</a>
</div>
<!--end::Item-->
<!--begin::Item-->
<div class="navi-item my-2">
<a href="#" class="navi-link">
<span class="navi-icon mr-4">
<span class="svg-icon svg-icon-lg">
<!--begin::Svg Icon | path:assets/media/svg/icons/General/Half-star.svg-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<polygon points="0 0 24 0 24 24 0 24" />
<path d="M12,4.25932872 C12.1488635,4.25921584 12.3000368,4.29247316 12.4425657,4.36281539 C12.6397783,4.46014562 12.7994058,4.61977315 12.8967361,4.81698575 L14.9389263,8.95491503 L19.5054023,9.61846284 C20.0519472,9.69788046 20.4306287,10.2053233 20.351211,10.7518682 C20.3195865,10.9695052 20.2170993,11.1706476 20.0596157,11.3241562 L16.7552826,14.545085 L17.5353298,19.0931094 C17.6286908,19.6374458 17.263103,20.1544017 16.7187666,20.2477627 C16.5020089,20.2849396 16.2790408,20.2496249 16.0843804,20.1472858 L12,18 L12,4.25932872 Z" fill="#000000" opacity="0.3" />
<path d="M12,4.25932872 L12,18 L7.91561963,20.1472858 C7.42677504,20.4042866 6.82214789,20.2163401 6.56514708,19.7274955 C6.46280801,19.5328351 6.42749334,19.309867 6.46467018,19.0931094 L7.24471742,14.545085 L3.94038429,11.3241562 C3.54490071,10.938655 3.5368084,10.3055417 3.92230962,9.91005817 C4.07581822,9.75257453 4.27696063,9.65008735 4.49459766,9.61846284 L9.06107374,8.95491503 L11.1032639,4.81698575 C11.277344,4.464261 11.6315987,4.25960807 12,4.25932872 Z" fill="#000000" />
</g>
</svg>
<!--end::Svg Icon-->
</span>
</span>
<span class="navi-text font-weight-bolder font-size-lg">Marked</span>
</a>
</div>
<!--end::Item-->
<!--begin::Item-->
<div class="navi-item my-2">
<a href="#" class="navi-link">
<span class="navi-icon mr-4">
<span class="svg-icon svg-icon-lg">
<!--begin::Svg Icon | path:assets/media/svg/icons/Design/PenAndRuller.svg-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect x="0" y="0" width="24" height="24" />
<path d="M3,16 L5,16 C5.55228475,16 6,15.5522847 6,15 C6,14.4477153 5.55228475,14 5,14 L3,14 L3,12 L5,12 C5.55228475,12 6,11.5522847 6,11 C6,10.4477153 5.55228475,10 5,10 L3,10 L3,8 L5,8 C5.55228475,8 6,7.55228475 6,7 C6,6.44771525 5.55228475,6 5,6 L3,6 L3,4 C3,3.44771525 3.44771525,3 4,3 L10,3 C10.5522847,3 11,3.44771525 11,4 L11,19 C11,19.5522847 10.5522847,20 10,20 L4,20 C3.44771525,20 3,19.5522847 3,19 L3,16 Z" fill="#000000" opacity="0.3" />
<path d="M16,3 L19,3 C20.1045695,3 21,3.8954305 21,5 L21,15.2485298 C21,15.7329761 20.8241635,16.200956 20.5051534,16.565539 L17.8762883,19.5699562 C17.6944473,19.7777745 17.378566,19.7988332 17.1707477,19.6169922 C17.1540423,19.602375 17.1383289,19.5866616 17.1237117,19.5699562 L14.4948466,16.565539 C14.1758365,16.200956 14,15.7329761 14,15.2485298 L14,5 C14,3.8954305 14.8954305,3 16,3 Z" fill="#000000" />
</g>
</svg>
<!--end::Svg Icon-->
</span>
</span>
<span class="navi-text font-weight-bolder font-size-lg">Draft</span>
<span class="navi-label">
<span class="label label-rounded label-light-warning font-weight-bolder">5</span>
</span>
</a>
</div>
<!--end::Item-->
<!--begin::Item-->
<div class="navi-item my-2">
<a href="#" class="navi-link">
<span class="navi-icon mr-4">
<span class="svg-icon svg-icon-lg">
<!--begin::Svg Icon | path:assets/media/svg/icons/Communication/Sending.svg-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect x="0" y="0" width="24" height="24" />
<path d="M8,13.1668961 L20.4470385,11.9999863 L8,10.8330764 L8,5.77181995 C8,5.70108058 8.01501031,5.63114635 8.04403925,5.56663761 C8.15735832,5.31481744 8.45336217,5.20254012 8.70518234,5.31585919 L22.545552,11.5440255 C22.6569791,11.5941677 22.7461882,11.6833768 22.7963304,11.794804 C22.9096495,12.0466241 22.7973722,12.342628 22.545552,12.455947 L8.70518234,18.6841134 C8.64067359,18.7131423 8.57073936,18.7281526 8.5,18.7281526 C8.22385763,18.7281526 8,18.504295 8,18.2281526 L8,13.1668961 Z" fill="#000000" />
<path d="M4,16 L5,16 C5.55228475,16 6,16.4477153 6,17 C6,17.5522847 5.55228475,18 5,18 L4,18 C3.44771525,18 3,17.5522847 3,17 C3,16.4477153 3.44771525,16 4,16 Z M1,11 L5,11 C5.55228475,11 6,11.4477153 6,12 C6,12.5522847 5.55228475,13 5,13 L1,13 C0.44771525,13 6.76353751e-17,12.5522847 0,12 C-6.76353751e-17,11.4477153 0.44771525,11 1,11 Z M4,6 L5,6 C5.55228475,6 6,6.44771525 6,7 C6,7.55228475 5.55228475,8 5,8 L4,8 C3.44771525,8 3,7.55228475 3,7 C3,6.44771525 3.44771525,6 4,6 Z" fill="#000000" opacity="0.3" />
</g>
</svg>
<!--end::Svg Icon-->
</span>
</span>
<span class="navi-text font-weight-bolder font-size-lg">Sent</span>
</a>
</div>
<!--end::Item-->
<!--begin::Item-->
<div class="navi-item my-2">
<a href="#" class="navi-link">
<span class="navi-icon mr-4">
<span class="svg-icon svg-icon-lg">
<!--begin::Svg Icon | path:assets/media/svg/icons/General/Trash.svg-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect x="0" y="0" width="24" height="24" />
<path d="M6,8 L6,20.5 C6,21.3284271 6.67157288,22 7.5,22 L16.5,22 C17.3284271,22 18,21.3284271 18,20.5 L18,8 L6,8 Z" fill="#000000" fill-rule="nonzero" />
<path d="M14,4.5 L14,4 C14,3.44771525 13.5522847,3 13,3 L11,3 C10.4477153,3 10,3.44771525 10,4 L10,4.5 L5.5,4.5 C5.22385763,4.5 5,4.72385763 5,5 L5,5.5 C5,5.77614237 5.22385763,6 5.5,6 L18.5,6 C18.7761424,6 19,5.77614237 19,5.5 L19,5 C19,4.72385763 18.7761424,4.5 18.5,4.5 L14,4.5 Z" fill="#000000" opacity="0.3" />
</g>
</svg>
<!--end::Svg Icon-->
</span>
</span>
<span class="navi-text font-weight-bolder font-size-lg">Trash</span>
</a>
</div>
<!--end::Item-->
<!--begin::Separator-->
<div class="navi-item my-10"></div>
<!--end::Separator-->
<!--begin::Item-->
<div class="navi-item my-2">
<a href="#" class="navi-link">
<span class="navi-icon mr-4">
<i class="fa fa-genderless text-danger"></i>
</span>
<span class="navi-text">Custom Work</span>
<span class="navi-label">
<span class="label label-rounded label-light-danger font-weight-bolder">6</span>
</span>
</a>
</div>
<!--end::Item-->
<!--begin::Item-->
<div class="navi-item my-2">
<a href="#" class="navi-link">
<span class="navi-icon mr-4">
<i class="fa fa-genderless text-success"></i>
</span>
<span class="navi-text">Partnership</span>
</a>
</div>
<!--end::Item-->
<!--begin::Item-->
<div class="navi-item my-2">
<a href="#" class="navi-link">
<span class="navi-icon mr-4">
<i class="fa fa-genderless text-info"></i>
</span>
<span class="navi-text">In Progres</span>
</a>
</div>
<!--end::Item-->
<!--begin::Item-->
<div class="navi-item my-2">
<a href="#" class="navi-link">
<span class="navi-icon mr-4">
<i class="fa flaticon2-plus icon-1x"></i>
</span>
<span class="navi-text">Add Label</span>
</a>
</div>
<!--end::Item-->
</div>
<!--end::Navigations-->
</div>
<!--end::Body-->
</div>
<!--end::Card-->
</div>
<!--end::Aside-->
</div>
<script>
<?php if ($board['bo_download_point'] < 0) { ?>
$(function() {
$("a.view_file_download").click(function() {
if(!g5_is_member) {
alert("다운로드 권한이 없습니다.\n회원이시라면 로그인 후 이용해 보십시오.");
return false;
}
var msg = "파일을 다운로드 하시면 포인트가 차감(<?php echo number_format($board['bo_download_point']) ?>점)됩니다.\n\n포인트는 게시물당 한번만 차감되며 다음에 다시 다운로드 하셔도 중복하여 차감하지 않습니다.\n\n그래도 다운로드 하시겠습니까?";
if(confirm(msg)) {
var href = $(this).attr("href")+"&js=on";
$(this).attr("href", href);
return true;
} else {
return false;
}
});
});
<?php } ?>
function board_move(href)
{
window.open(href, "boardmove", "left=50, top=50, width=500, height=550, scrollbars=1");
}
</script>
<script>
$(function() {
$("a.view_image").click(function() {
window.open(this.href, "large_image", "location=yes,links=no,toolbar=no,top=10,left=10,width=10,height=10,resizable=yes,scrollbars=no,status=no");
return false;
});
// 추천, 비추천
$("#good_button, #nogood_button").click(function() {
var $tx;
if(this.id == "good_button")
$tx = $("#bo_v_act_good");
else
$tx = $("#bo_v_act_nogood");
excute_good(this.href, $(this), $tx);
return false;
});
// 이미지 리사이즈
$("#bo_v_atc").viewimageresize();
});
function excute_good(href, $el, $tx)
{
$.post(
href,
{ js: "on" },
function(data) {
if(data.error) {
alert(data.error);
return false;
}
if(data.count) {
$el.find("strong").text(number_format(String(data.count)));
if($tx.attr("id").search("nogood") > -1) {
$tx.text("이 글을 비추천하셨습니다.");
$tx.fadeIn(200).delay(2500).fadeOut(200);
} else {
$tx.text("이 글을 추천하셨습니다.");
$tx.fadeIn(200).delay(2500).fadeOut(200);
}
}
}, "json"
);
}
</script>
</div>
<!--end::Container-->
</div>
<!-- } 게시판 읽기 끝 -->
댓글영역 작업에 들어갑니다.
댓글을 담당하는 파일은 view_comment.skin.php 입니다.
댓글 리스트는 좀 삽질이 있긴 했지만 무난히 완료하는가 했는데...
문제는 답변 버튼이나 수정 버튼을 누르면 화면이 리로딩 되네요...
원인을 찾아 떠나봅니다.
하... 이거 어렵네요...
게시글 리스트에서 게시글을 눌러 들어가기만 하는데도,
comment_box() 함수가 호출되고 있습니다.
comment_box('', 'c'); // 댓글 입력폼이 보이도록 처리하기위해서 추가 (root님)무조건 한 번 호출하는군요.
이제 감이 잡히기 시작하네요...
그런데 곧 회의 시간... 에휴....
오늘도 못끝낼 것 같네요 ㅠㅠ 어렵다 어려워...
2시간동안 떠들고 왔더니 입에서 단내가 나네요~
원인을 찾았고 수정을 했습니다.
원인은 PHP 코드를 복사하다가 일부 코드를 넣지 않았고,
또 클래스명을 모두 그대로 옮기지 않아서 발생한 버그였습니다.
이번엔 댓글 입력창...
진짜 게시글은 쉬운게 하나도 없네요. ㅠㅠ
고쳤네요. TextArea 바로 밑에 관련 스크립트가 있는데,
Textarea가 끝나기도 전에 <div>로 막아버려서 정상 수행이 안되더라는...
아... 캡차도 확인해야 하는군요...
비로그인(Guest) 상태에서 지금까지 한 것들을 한 번 더 확인해봅니다.
여기서도 UI 맞추느라 시간 엄청 걸립니다.
한번 시간내서 Bootstrap 좀 공부해야 할까봐요.
(대충 때려맞춰서 할려니 버겁네요...)
대대대댓글도 잘 입력되네여.
이제 로그인해서 댓글 수정을 테스트 해보겠습니다.
완료된 게시글 보기와 코멘트 내역 화면 캡처입니다.
우측 네모 영역에 댓글을 넣으려고 했었으나,
대대대댓글은 우측으로 계속 밀려야 해서
공간이 안나오더라구요.
그래서 보기 글 밑에다 달 수 밖에 없었네요.
우측 영역은 관련 게시글을 보여주는 방식으로 만들어볼 계획입니다.
정말 길고 긴 여정이었네요.
실력이 짧아 자세한 개발 과정을 소개 드리지 못하고 지나가는 것 같아 아쉽습니다.
대신 소스라도...
매일 매일 행복한 하루 되시기 바랍니다.
<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
// Captcha의 형식을 테마에 맞게 수정하였음으로 여기서 다시 한 번 불러와야 한다.
// 그래야 bbs폴더의 파일을 건드리지 않게 된다. by tank. at 200702.
$captcha_html = "";
if ($is_guest && $board['bo_comment_level'] < 2) {
$captcha_html = captcha_html_mt703('_comment');
}
?>
<script>
// 글자수 제한
var char_min = parseInt(<?php echo $comment_min ?>); // 최소
var char_max = parseInt(<?php echo $comment_max ?>); // 최대
</script>
<!-- 댓글 접기/펼치기 버튼 시작 -->
<div class="row">
<button type="button" class="btn btn-secondary btn-sm w-100 mx-7 cmt_btn">
<span class="text-left font-size-lg text-dark-75 mr-50"><b>댓글</b> <?php echo $view['wr_comment']; ?>건</span>
<span class="text-right font-size-lg text-dark-75"><i class="fas fa-chevron-circle-down"></i></span>
</button>
</div>
<!--} 댓글 접기/펼치기 버튼 끝 -->
<!-- 댓글 시작 { -->
<section id="bo_vc">
<?php
$cmt_amt = count($list);
for ($i=0; $i<$cmt_amt; $i++) {
$comment_id = $list[$i]['wr_id'];
$cmt_depth = strlen($list[$i]['wr_comment_reply']) * 50;
$comment = $list[$i]['content'];
/*
if (strstr($list[$i]['wr_option'], "secret")) {
$str = $str;
}
*/
$comment = preg_replace("/\[\<a\s.*href\=\"(http|https|ftp|mms)\:\/\/([^[:space:]]+)\.(mp3|wma|wmv|asf|asx|mpg|mpeg)\".*\<\/a\>\]/i", "<script>doc_write(obj_movie('$1://$2.$3'));</script>", $comment);
$cmt_sv = $cmt_amt - $i + 1; // 댓글 헤더 z-index 재설정 ie8 이하 사이드뷰 겹침 문제 해결
$c_reply_href = $comment_common_url.'&c_id='.$comment_id.'&w=c#bo_vc_w';
$c_edit_href = $comment_common_url.'&c_id='.$comment_id.'&w=cu#bo_vc_w';
$is_comment_reply_edit = ($list[$i]['is_reply'] || $list[$i]['is_edit'] || $list[$i]['is_del']) ? 1 : 0;
?>
<div class="d-flex align-items-center justify-content-between flex-wrap px-3 pt-2 pb-1" id="c_<?php echo $comment_id ?>" <?php if ($cmt_depth) { ?>style="margin-left:<?php echo $cmt_depth ?>px;border-top-color:#e0e0e0"<?php } ?>>
<div class="shadow-xs w-100" data-inbox="message">
<div class="d-flex align-items-center card-spacer-x py-6">
<span class="symbol symbol-50 mr-4" data-toggle="expand">
<span class="symbol-label" style="background-image: url('<?php echo get_profile_img($list[$i]['mb_id']); ?>')"></span>
</span>
<div class="d-flex flex-column flex-grow-1 flex-wrap mr-2">
<h2 class="d-none"><?php echo get_text($list[$i]['wr_name']); ?>님의 <?php if ($cmt_depth) { ?><span class="sound_only">댓글의</span><?php } ?> 댓글</h2>
<div class="d-flex" data-toggle="expand">
<?php echo $list[$i]['name'] ?>
<div class="text-dark-75">
<?php if ($is_ip_view) { ?>
<span class="sound_only">아이피</span>
<span>(<?php echo $list[$i]['ip']; ?>)</span>
<?php } ?>
<span class="sound_only">작성일</span>
<span class="bo_vc_hdinfo"><i class="fa fa-clock-o" aria-hidden="true"></i> <time datetime="<?php echo date('Y-m-d\TH:i:s+09:00', strtotime($list[$i]['datetime'])) ?>"><?php echo $list[$i]['datetime'] ?></time></span>
<?php
include(G5_THEME_SNS_PATH.'/view_comment_list.sns.skin.php');
?>
</div>
</div>
<div class="d-flex flex-column cmt_contents">
<div class="text-dark toggle-on-item mt-2" data-toggle="expand">
<?php if (strstr($list[$i]['wr_option'], "secret")) { ?><img src="<?php echo $board_skin_url; ?>/img/icon_secret.gif" alt="비밀글"><?php } ?>
<?php echo $comment ?>
</div>
<?php if($is_comment_reply_edit) {
if($w == 'cu') {
$sql = " select wr_id, wr_content, mb_id from $write_table where wr_id = '$c_id' and wr_is_comment = '1' ";
$cmt = sql_fetch($sql);
if (!($is_admin || ($member['mb_id'] == $cmt['mb_id'] && $cmt['mb_id'])))
$cmt['wr_content'] = '';
$c_wr_content = $cmt['wr_content'];
}
?>
<?php } ?>
</div>
</div>
<div class="d-flex align-items-center">
<!--begin::Options Dropdown-->
<div class="dropdown" data-toggle="tooltip" title="댓글 옵션">
<span class="btn btn-default btn-icon btn-sm" data-toggle="dropdown">
<i class="flaticon-more icon-1x icon-1x"></i>
</span>
<div class="dropdown-menu dropdown-menu-right p-0 m-0 dropdown-menu-md w-50px">
<!--begin::Navigation-->
<ul class="navi navi-hover py-5">
<?php if ($list[$i]['is_reply']) { ?><li class="navi-item"><a href="<?php echo $c_reply_href; ?>" onclick="comment_box('<?php echo $comment_id ?>', 'c'); return false;" class="navi-link"><span class="navi-icon"><i class="flaticon2-drop"></i></span><span class="navi-text">답변</span></a></li><?php } ?>
<?php if ($list[$i]['is_edit']) { ?><li class="navi-item"><a href="<?php echo $c_edit_href; ?>" onclick="comment_box('<?php echo $comment_id ?>', 'cu'); return false;" class="navi-link"><span class="navi-icon"><i class="flaticon2-drop"></i></span><span class="navi-text">수정</span></a></li><?php } ?>
<?php if ($list[$i]['is_del']) { ?><li class="navi-item"><a href="<?php echo $list[$i]['del_link']; ?>" onclick="return comment_delete();" class="navi-link"><span class="navi-icon"><i class="flaticon2-drop"></i></span><span class="navi-text">삭제</span></a></li><?php } ?>
</ul>
<!--end::Navigation-->
</div>
</div>
<!--end::Options Dropdown-->
</div>
</div>
</div>
</div>
<span id="edit_<?php echo $comment_id ?>" class="bo_vc_w"></span><!-- 수정 -->
<span id="reply_<?php echo $comment_id ?>" class="bo_vc_w"></span><!-- 답변 -->
<input type="hidden" value="<?php echo strstr($list[$i]['wr_option'],"secret") ?>" id="secret_comment_<?php echo $comment_id ?>">
<textarea id="save_comment_<?php echo $comment_id ?>" style="display:none"><?php echo get_text($list[$i]['content1'], 0) ?></textarea>
<!--end::Comment-->
<?php } ?>
<?php if ($i == 0) { //댓글이 없다면 ?>
<div class="shadow-xs w-100" data-inbox="message">
<div class="d-flex align-items-center card-spacer-x py-6 bo_vc_empty">
아직 등록된 댓글이 없습니다. 최초의 댓글러가 되어주세요~
</div>
</div>
<?php } ?>
</section>
<?php if ($is_comment_write) {
if($w == '')
$w = 'c';
?>
<!-- 댓글 쓰기 시작 { -->
<aside id="w-100 bo_vc_w" class="bo_vc_w">
<h2 class="sound_only">댓글쓰기</h2>
<form name="fviewcomment" id="fviewcomment" action="<?php echo $comment_action_url; ?>" onsubmit="return fviewcomment_submit(this);" method="post" autocomplete="off">
<input type="hidden" name="w" value="<?php echo $w ?>" id="w">
<input type="hidden" name="bo_table" value="<?php echo $bo_table ?>">
<input type="hidden" name="wr_id" value="<?php echo $wr_id ?>">
<input type="hidden" name="comment_id" value="<?php echo $c_id ?>" id="comment_id">
<input type="hidden" name="sca" value="<?php echo $sca ?>">
<input type="hidden" name="sfl" value="<?php echo $sfl ?>">
<input type="hidden" name="stx" value="<?php echo $stx ?>">
<input type="hidden" name="spt" value="<?php echo $spt ?>">
<input type="hidden" name="page" value="<?php echo $page ?>">
<input type="hidden" name="is_good" value="">
<span class="sound_only">내용</span>
<?php if ($comment_min || $comment_max) { ?>
<div class="d-flex align-items-center justify-content-start ml-11 pt-4">
<span><strong id="char_cnt"><span id="char_count"></span>글자</strong></span>
</div>
<?php } ?>
<div class="d-flex align-items-center justify-content-end px-3 pt-2">
<textarea id="wr_content" name="wr_content" class="form-control border-1 px-7 h-88px min-h-50px" maxlength="10000" required class="required" title="내용" placeholder="댓글내용을 입력해주세요"
<?php if ($comment_min || $comment_max) { ?>onkeyup="check_byte('wr_content', 'char_count');"<?php } ?>><?php echo $c_wr_content; ?></textarea>
<?php if ($comment_min || $comment_max) { ?><script> check_byte('wr_content', 'char_count'); </script><?php } ?>
<script>
$(document).on("keyup change", "textarea#wr_content[maxlength]", function() {
var str = $(this).val()
var mx = parseInt($(this).attr("maxlength"))
if (str.length > mx) {
$(this).val(str.substr(0, mx));
return false;
}
});
</script>
</div>
<div class="pt-2 pb-1 w-100 bo_vc_w_wr">
<div class="d-flex justify-content-end mr-3 bo_vc_w_info">
<?php if ($is_guest) { ?>
<div class=" d-flex mr-5">
<label for="wr_name" class="sound_only">이름<strong> 필수</strong></label>
<input type="text" name="wr_name" value="<?php echo get_cookie("ck_sns_name"); ?>" id="wr_name" required class="form-control required" size="25" placeholder="이름">
</div>
<div class="d-flex">
<label for="wr_password" class="sound_only">비밀번호<strong> 필수</strong></label>
<input type="password" name="wr_password" id="wr_password" required class="form-control required" size="25" placeholder="비밀번호">
</div>
<?php
}
?>
<?php
if($board['bo_use_sns'] && ($config['cf_facebook_appid'] || $config['cf_twitter_key'])) {
?>
<span class="sound_only">SNS 동시등록</span>
<span id="bo_vc_send_sns"></span>
<?php } ?>
</div>
<div class="d-flex justify-content-end pt-2 mr-3">
<?php if ($is_guest) { ?>
<?php echo $captcha_html; ?>
<?php } ?>
</div>
<div class="d-flex justify-content-end align-items-center pt-1 pb-2 mr-3 btn_confirm">
<div class="d-flex form-check align-middle mr-5 secret_cm chk_box">
<input class="form-check-input selec_chk" type="checkbox" name="wr_secret" value="secret" id="wr_secret" >
<label class="form-check-label" for="wr_secret">비밀글</label>
</div>
<div class="d-flex align-items-center text-right">
<button type="submit" id="btn_submit" class="btn btn-primary btn-sm btn_submit">댓글등록</button>
</div>
</div>
</div>
</form>
</aside>
<script>
var save_before = ''; // 저장전? 뭘까?
var save_html = document.getElementById('bo_vc_w').innerHTML; // 댓글 작성 전체 영역의 HTML을 저장.
function good_and_write()
{
var f = document.fviewcomment;
if (fviewcomment_submit(f)) {
f.is_good.value = 1;
f.submit();
} else {
f.is_good.value = 0;
}
}
function fviewcomment_submit(f)
{
var pattern = /(^\s*)|(\s*$)/g; // \s 공백 문자
f.is_good.value = 0;
var subject = "";
var content = "";
$.ajax({
url: g5_bbs_url+"/ajax.filter.php",
type: "POST",
data: {
"subject": "",
"content": f.wr_content.value
},
dataType: "json",
async: false,
cache: false,
success: function(data, textStatus) {
subject = data.subject;
content = data.content;
}
});
if (content) {
alert("내용에 금지단어('"+content+"')가 포함되어있습니다");
f.wr_content.focus();
return false;
}
// 양쪽 공백 없애기
var pattern = /(^\s*)|(\s*$)/g; // \s 공백 문자
document.getElementById('wr_content').value = document.getElementById('wr_content').value.replace(pattern, "");
if (char_min > 0 || char_max > 0)
{
check_byte('wr_content', 'char_count');
var cnt = parseInt(document.getElementById('char_count').innerHTML);
if (char_min > 0 && char_min > cnt)
{
alert("댓글은 "+char_min+"글자 이상 쓰셔야 합니다.");
return false;
} else if (char_max > 0 && char_max < cnt)
{
alert("댓글은 "+char_max+"글자 이하로 쓰셔야 합니다.");
return false;
}
}
else if (!document.getElementById('wr_content').value)
{
alert("댓글을 입력하여 주십시오.");
return false;
}
if (typeof(f.wr_name) != 'undefined')
{
f.wr_name.value = f.wr_name.value.replace(pattern, "");
if (f.wr_name.value == '')
{
alert('이름이 입력되지 않았습니다.');
f.wr_name.focus();
return false;
}
}
if (typeof(f.wr_password) != 'undefined')
{
f.wr_password.value = f.wr_password.value.replace(pattern, "");
if (f.wr_password.value == '')
{
alert('비밀번호가 입력되지 않았습니다.');
f.wr_password.focus();
return false;
}
}
<?php if($is_guest) echo chk_captcha_js(); ?>
set_comment_token(f);
document.getElementById("btn_submit").disabled = "disabled";
return true;
}
// 댓글에 대한 답변이나 댓글에 대한 수정을 누를때 댓글입력영역을 옮겨주는 함수이다.
// 게시글이 최초 호출될때는 comment_box('', 'c')를 호출하여 댓글의 마지막에 댓글입력영역을 띄워준다.
// 주의 : 1Detph 댓글을 달때는 수행되지 않는다. 바로 submit 됨으로!
// 단, 댓글에 대한 답변이나 수정 버튼을 클릭할때 수행 된다. 혼돈 금지!!! by tank. at 200702.
function comment_box(comment_id, work)
{ //alert("1 => "+ el_id +" | "+ save_before);
var el_id,
form_el = 'fviewcomment',
respond = document.getElementById(form_el);
// 댓글 아이디가 넘어오면 답변, 수정
if (comment_id)
{ // 대댓글 작성이거나 댓글의 수정
if (work == 'c') //대댓글 작성을 클릭했을 때
el_id = 'reply_' + comment_id;
else //댓글의 수정을 클릭했을 때
el_id = 'edit_' + comment_id;
}
else // 게시글을 불러올 때,
el_id = 'bo_vc_w'; // 댓글쓰기 전체 영역의 ID와 Class 이름
//alert("2 => "+ el_id +" | "+ save_before);
if (save_before != el_id)
{ //alert("3 => "+ el_id +" != "+ save_before);
if (save_before)
{ //alert("4 => save_before : "+ save_before);
document.getElementById(save_before).style.display = 'none';
}
document.getElementById(el_id).style.display = '';
document.getElementById(el_id).appendChild(respond);
//입력값 초기화
document.getElementById('wr_content').value = '';
// 댓글 수정
if (work == 'cu')
{ //alert("5 => work : "+ work);
document.getElementById('wr_content').value = document.getElementById('save_comment_' + comment_id).value;
if (typeof char_count != 'undefined')
check_byte('wr_content', 'char_count');
if (document.getElementById('secret_comment_'+comment_id).value)
document.getElementById('wr_secret').checked = true;
else
document.getElementById('wr_secret').checked = false;
}
document.getElementById('comment_id').value = comment_id;
document.getElementById('w').value = work;
if(save_before)
$("#captcha_reload").trigger("click");
save_before = el_id;
}
}
function comment_delete()
{
return confirm("이 댓글을 삭제하시겠습니까?");
}
comment_box('', 'c'); // 댓글 입력폼이 보이도록 처리하기위해서 추가 (root님)
<?php if($board['bo_use_sns'] && ($config['cf_facebook_appid'] || $config['cf_twitter_key'])) { ?>
$(function() {
// sns 등록
$("#bo_vc_send_sns").load(
"<?php echo G5_SNS_URL; ?>/view_comment_write.sns.skin.php?bo_table=<?php echo $bo_table; ?>",
function() {
save_html = document.getElementById('bo_vc_w').innerHTML;
}
);
});
<?php } ?>
</script>
<?php } ?>
<!-- } 댓글 쓰기 끝 -->
<script>
jQuery(function($) {
//댓글열기, bootstarp형식으로 변경 처리함. by tank. at 200702.
$(".cmt_btn").click(function(e){
e.preventDefault();
//$(this).toggleClass("cmt_btn_op");
if ( $(this).find("span i").hasClass("fa-chevron-circle-down") ) {
$(this).find("span i").removeClass("fa-chevron-circle-down");
$(this).find("span i").addClass("fa-chevron-circle-up");
} else {
$(this).find("span i").removeClass("fa-chevron-circle-up");
$(this).find("span i").addClass("fa-chevron-circle-down");
}
$("#bo_vc").toggle();
});
});
</script>
'재밌는 IT 개발 > 그누보드 테마 제작기(記)' 카테고리의 다른 글
| 그누보드 테마 제작 23 - 게시글 부가 페이지 개발 (2) | 2020.07.10 |
|---|---|
| 그누보드 테마 제작 22 - 게시글 리스트 페이지 개발 (4) | 2020.07.09 |
| 그누보드 테마 제작 20 - 게시글 작성 및 수정 페이지 개발 (2) | 2020.07.07 |
| 그누보드 테마 제작 19 - 게시판 그룹 페이지 개발 (2) | 2020.07.06 |
| 그누보드 테마 제작 18 - 쪽지 내역 및 전송 기능 개발 (2) | 2020.07.03 |
댓글