Files
FictionArchive/Documentation/sample_novel_page.html
gamer147 176c94297b
All checks were successful
CI / build-backend (pull_request) Successful in 2m4s
CI / build-frontend (pull_request) Successful in 46s
[FA-6] Author's posts seem to work
2025-12-29 22:06:12 -05:00

9977 lines
509 KiB
HTML

<!DOCTYPE html>
<html lang="ko">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, minimum-scale=1, maximum-scale=1, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" id="theme-color" content="#fff">
<meta name="msapplication-navbutton-color" id="msapplication-navbutton-color" content="#fff">
<meta name="apple-mobile-web-app-status-bar-style" id="apple-mobile-web-app-status-bar-style" content="#fff">
<meta http-equiv="Pragma" content="no-cache" />
<!-- <meta http-equiv="Content-Security-Policy" content="script-src 'self' https://t1.daumcdn.net http://t1.daumcdn.net http://dmaps.daum.net https://d.novelpia.com https://s.novelpia.com https://appleid.cdn-apple.com https://novelpia.com https://wcs.naver.net http://wcs.naver.net https://www.gstatic.com https://nsp.pay.naver.com https://www.googletagmanager.com https://www.google-analytics.com https://connect.facebook.net https://cdn.megadata.co.kr https://dnh523js9661q.cloudfront.net https://nefing.com https://www.googleadservices.com https://googleads.g.doubleclick.net https://apis.google.com https://auth.mobilians.co.kr 'unsafe-inline' 'unsafe-eval'"> -->
<link rel="apple-touch-icon" sizes="57x57" href="//images.novelpia.com/img/favicon/2025-apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="//images.novelpia.com/img/favicon/2025-apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="//images.novelpia.com/img/favicon/2025-apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="//images.novelpia.com/img/favicon/2025-apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="//images.novelpia.com/img/favicon/2025-apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="//images.novelpia.com/img/favicon/2025-apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="//images.novelpia.com/img/favicon/2025-apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="//images.novelpia.com/img/favicon/2025-apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="//images.novelpia.com/img/favicon/2025-apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192"
href="//images.novelpia.com/img/favicon/2025-android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="//images.novelpia.com/img/favicon/2025-favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="//images.novelpia.com/img/favicon/2025-favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="//images.novelpia.com/img/favicon/2025-favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" id="msapplication-TileColor" content="#fff">
<meta name="msapplication-TileImage" content="//images.novelpia.com/img/favicon/2025-ms-icon-144x144.png">
<meta name="google-site-verification" content="SvbsjlEBvYjVzT6qZ3uEFstMTzeRuMR6xf2x_fNnDnY" />
<meta name="naver-site-verification" content="6b26502bc08cf8f1fda8a0f0ae2ff4bc87a2175c" />
<!-- Twitter -->
<meta name="twitter:site" content="@themepixels">
<meta name="twitter:creator" content="@themepixels">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="노벨피아 - 웹소설로 꿈꾸는 세상! - 최종보스를 성노예로 샀는데, 집착한다.">
<meta name="twitter:description" content="플러스작품 - 최종보스를 성노예로 샀는데, 나에게 집착한다. 강제로 살리고 청혼을 할 정도로.">
<meta name="twitter:image" content="https://novelpia.com/img/2025-novelpia2.jpg">
<!-- Facebook -->
<meta property="og:type" content="website">
<meta property="og:title" content="노벨피아 - 웹소설로 꿈꾸는 세상! - 최종보스를 성노예로 샀는데, 집착한다.">
<meta property="og:url" content="https://novelpia.com/novel/248128">
<meta property="og:description" content="플러스작품 - 최종보스를 성노예로 샀는데, 나에게 집착한다. 강제로 살리고 청혼을 할 정도로.">
<meta property="og:image"
content="https://novelpia.com/imagebox/cover/c39e6f8d86d71086ccd128a3db4f8a81_434662_ori.file">
<meta property="og:image:secure_url" content="https://novelpia.com/img/2025-novelpia2.jpg">
<meta property="og:image:type" content="image/png">
<!-- Meta -->
<meta name="description" content="플러스작품 - 최종보스를 성노예로 샀는데, 나에게 집착한다. 강제로 살리고 청혼을 할 정도로.">
<meta name="author" content="Devlife">
<title>노벨피아 - 웹소설로 꿈꾸는 세상! - 최종보스를 성노예로 샀는데, 집착한다.</title>
<!-- vendor css -->
<link href="/lib/Ionicons/css/ionicons.css?temp=3" rel="stylesheet">
<link href="/lib/font-awesome/css/font-awesome.css" rel="stylesheet">
<link href="/lib/jquery-toggles/toggles-full.css" rel="stylesheet">
<link rel='stylesheet' href='/css/basic_modal.css?v=1760926093'>
<link rel='stylesheet' href='/css/user_login.css?v=1760926093'>
<!-- Amanda CSS -->
<link rel='stylesheet' href='/css/amanda.min2.css?v=1760926093'>
<link rel="stylesheet" href="/css/jquery_toastr.min.css">
<link rel='stylesheet' href='/css/novelpia.css?v=1765777838'>
<script src='/js/novelpia.js?v=1762841165' type='text/javascript'></script>
<script src="/lib/jquery/jquery.min.js"></script>
<script src="/lib/jquery/jquery_cookie.js"></script>
<script src="/js/ramda.min.js?v=1"></script>
<script src="/js/lang.ko.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/core.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/sha256.js"></script>
<script>
(async function () {
await fn_novel_reading_time();
})();
</script>
<script>
$.cookie("SITE_LANG", 'ko-KR', { expires: 2, path: '/', domain: 'novelpia.com', secure: false });
</script>
<script>
$(document).ready(function () {
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/serviceWorker.js').then(function (registration) {
console.log('ServiceWorker 가 다음의 scope에 등록되었습니다.: ', registration.scope);
}, function (err) {
console.log('ServiceWorker 등록 실패: ', err);
});
}
});
</script>
<script src="/lib/jquery-toggles/toggles.min.js"></script>
<script src="/js/http-vue-loader.js"></script>
<script src="/js/jquery_toastr.min.js"></script>
<script src="/js/amanda2.js?tmp=2"></script>
<script src="/js/lazyload.js?tmp=1"></script>
<script src="/js/jquery.switcher.min.js"></script>
<script src="/js/jdetects.min.js?tmp=5"></script>
<script src="/lib/popper.js/popper.js?tmp=1"></script>
<script src="/lib/bootstrap/bootstrap.js"></script>
<script src="/js/moment.min.js"></script>
<script src="/js/axios.min.js"></script>
<meta name="naver-site-verification" content="6b26502bc08cf8f1fda8a0f0ae2ff4bc87a2175c" />
<noscript>
<meta http-equiv="refresh" content="0; url=/page/nojs">
</noscript>
</script>
<script>
$.cookie('REF_DATA', '/novel/248128', { expires: 365, path: '/', domain: '.novelpia.com', secure: false });
</script>
<script type="text/javascript">
$(document).ready(function () {
$('.loads').hide();
$(document).bind('keydown', function (e) {
if (e.keyCode == 17 || e.keyCode == 16 /* F12 */) {
$('.loads').hide();
}
});
});
</script>
<script type="text/javascript" src="/js/vue.production.js"></script>
<style>
.loads {
display: none;
user-select: none;
position: fixed;
top: 0px;
left: 0px;
right: 0px;
z-index: 1000000;
background-color: rgba(255, 255, 255, 0.9);
width: 100%;
height: 100%;
}
#submenu_bar::-webkit-scrollbar {
width: 5px;
height: 5px;
}
#submenu_bar::-webkit-scrollbar-thumb {
background-color: #bbb;
background-clip: padding-box;
border: 0px solid transparent;
border-radius: 10px;
}
#submenu_bar::-webkit-scrollbar-track {
background-color: #eee;
border-radius: 10px;
}
#submenu_bar {
padding-bottom: 6px;
}
</style>
<!--DV360 램포스트-->
<!-- Social Google Tag Manager -->
<script>(function (w, d, s, l, i) {
w[l] = w[l] || []; w[l].push({
'gtm.start':
new Date().getTime(), event: 'gtm.js'
}); var f = d.getElementsByTagName(s)[0],
j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'dataLayer', 'GTM-KQ7J9X2L');</script>
<!-- 구글애즈_emnet_디포운영 북스2 계정 -->
<!-- End Google Tag Manager -->
<script async src="https://www.googletagmanager.com/gtag/js?id=AW-17176032562"></script>
<script>
// 구글 서브,테스트 제거 22.06.02 - ssChoi
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'AW-17176032562');
</script>
<!-- 구글애즈 램포스트 공통 스크립트 -->
<script async src="https://www.googletagmanager.com/gtag/js?id=AW-17025433079"></script>
<script>
gtag('config', 'AW-17025433079', {
send_page_view: true
});
</script>
<!-- 구글애널리틱스 전체 태그 -->
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-X2P0SJ3118"></script>
<script>
gtag('config', 'G-X2P0SJ3118');
</script>
<!-- Google Tag Manager 헤드 태그-->
<script>(function (w, d, s, l, i) {
w[l] = w[l] || []; w[l].push({
'gtm.start':
new Date().getTime(), event: 'gtm.js'
}); var f = d.getElementsByTagName(s)[0],
j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'dataLayer', 'GTM-TPMXGV7');</script>
<!-- End Google Tag Manager 헤드 태그-->
<!--DV360 아텔로스 계정-->
<!-- Social Google Tag Manager -->
<script>(function (w, d, s, l, i) {
w[l] = w[l] || []; w[l].push({
'gtm.start':
new Date().getTime(), event: 'gtm.js'
}); var f = d.getElementsByTagName(s)[0],
j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'dataLayer', 'GTM-THMVXHB');</script>
<!-- End Google Tag Manager -->
<!-- Facebook Pixel Code -->
<script>
!function (f, b, e, v, n, t, s) {
if (f.fbq) return; n = f.fbq = function () {
n.callMethod ?
n.callMethod.apply(n, arguments) : n.queue.push(arguments)
};
if (!f._fbq) f._fbq = n; n.push = n; n.loaded = !0; n.version = '2.0';
n.queue = []; t = b.createElement(e); t.async = !0;
t.src = v; s = b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t, s)
}(window, document, 'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', '259877689542130');
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=259877689542130&ev=PageView&noscript=1" /></noscript>
<!-- End Facebook Pixel Code -->
<!--RTBHOUSE 메인 태깅 코드-->
<script>
(function (w, d, dn, t) {
w[dn] = w[dn] || []; w[dn].push({ eventType: 'init', value: t, dc: 'asia' });
var f = d.getElementsByTagName('script')[0], c = d.createElement('script'); c.async = true;
c.src = 'https://tags.creativecdn.com/Ia2n3reS3UT3JNA477ic.js';
f.parentNode.insertBefore(c, f);
})(window, document, 'rtbhEvents', 'Ia2n3reS3UT3JNA477ic');
</script>
<!--큐노 -헤드 태그-->
<script src="//assets.cueknow.co.kr/script/setconv.min.30.js"></script>
<!--DV360 램포스트-바디 태그-->
<!-- Social Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KQ7J9X2L" height="0" width="0"
style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<!-- CNY -->
<script src="https://js.ad4989.co.kr/etc/cny/js/intro.js"></script>
<script type="text/javascript" charset="UTF-8" src="//t1.daumcdn.net/kas/static/kp.js"></script>
<!--카카오 모먼트-->
<script type="text/javascript">
kakaoPixel('5826862623745198470').pageView();
</script>
<meta name="format-detection" content="telephone=no"><!--ios에서 숫자 전화변호로 변환 x-->
</head>
<body class="collapse-menu ">
<span itemscope="" itemtype="http://schema.org/Organization">
<link itemprop="url" href="https://novelpia.com/">
<a itemprop="sameAs" href="https://www.facebook.com/%EB%85%B8%EB%B2%A8%ED%94%BC%EC%95%84-349126292859014"></a>
<a itemprop="sameAs" href="https://blog.naver.com/adnovelpia"></a>
<a itemprop="sameAs" href="https://www.pinterest.co.kr/novelpia_official/_created/"></a>
<a itemprop="sameAs" href="https://www.youtube.com/channel/UC4Mw_07vcLJ9uOZuukobTYQ"></a>
<a itemprop="sameAs" href="https://twitter.com/novel_pia"></a>
<a itemprop="sameAs" href="https://www.instagram.com/novelpia_official/"></a>
</span>
<div class="loads" style="text-align:center;">
<div class="loading"></div>
<br><br><span
style="text-align:center;color:#666;background-color:#eeeeee66;padding:6px 16px;cursor:pointer;border-radius:10px;font-size:12px;"
onclick="$('.loads').hide();">페이지로딩 닫기</span>
</div>
<link rel='stylesheet' href='/css/header2025.css?v=1760926093'>
<link rel='stylesheet' href='/css/_top.css?v=1766394283&ver=2'>
<link rel='stylesheet' href='/css/_navi.css?v=1760926093'>
<script type="module" src="/lib/dotlottie/dotlottie-player.js"></script>
<div class="row top-menu-margin_simple">
<div class="col-md-12 mg-t-5" style="font-size:18px;line-height:100px;text-align:center;min-height:0;"></div>
</div>
<div id="load_alert"></div>
<header class="mobile_hidden s_inv h_border_bottom"
style="position: fixed;top: 0;left: 0;width: 100%;background-color: #fff;z-index: 999;">
<div class="header-top-wrapper">
<div class="header-top">
<div class="hader-logo">
<div class="logo-novelpia">
<a href="/">
<img class=" s_inv" src="//images.novelpia.com/img/new/header/logo_novelpia_pc.svg"
alt="노벨피아">
</a>
</div>
<div class="s-logo">
<div class="slogo-books" onClick="javascript:goto_partnership_site('book')"><img
src="//images.novelpia.com/img/new/header/slogo_books.svg" alt="북스"></div>
<div class="header-txt-bar"><img src="//images.novelpia.com/img/new/header/icon_bar.svg"></div>
<div class="slogo-webtoon" onClick="javascript:goto_partnership_site('toptoon')"><img
src="//images.novelpia.com/img/new/header/slogo_webtoon.svg" alt="웹툰"></div>
</div>
</div>
<div>
<div class="header-search">
<form autocomplete="off">
<input class="" type="text" name="search_box" placeholder="제목, 작가를 입력하세요." maxlength="50"
autocomplete="off" value="" id="search_input">
</form>
<div>
<button class="" onclick="javascript:pc_search()"><img
src="//images.novelpia.com/img/new/header/icon_in_search.svg" alt="검색"></button>
</div>
</div>
</div>
<div class="header-icon-menu">
<!--성인버튼 위치 안내-->
<a href="/alarm" class="header-alert" id="btn_alram">
<img src="//images.novelpia.com/img/new/header/icon_alert.svg" alt="알림">
<div id="pc_alarm_dot" class="red-dot" style="display:none;"></div>
</a>
<a href="/n_user_free_ticket" class="header-gift">
<img src="//images.novelpia.com/img/new/header/icon_gift.svg" alt="선물함">
<div class="red-dot"></div>
</a>
<div style="position:relative;">
<div id="toggle-menu">
<div onclick="pc_s_vue.toggle()" class="s_inv" style="cursor:pointer;">
<img src="//images.novelpia.com/img/layout/none_user.png"
style="width:30px;height:30px;border-radius:50%;"
onerror="//images.novelpia.com/img/layout/none_user.png" alt="메뉴">
</div>
</div>
<div style="z-index:9999;transform: translate3d(190px, 12px, 0px);" id="pc-sidemenu"
class="np-sidemenu s_inv" :class="{ 'sidemenu-dark': darkmode == '1' }"> <!--보유 재화 툴팁 영역-->
<div class="currency-tooltip" v-show="is_modal_open == true">
<div class="tooltip-header">
<div class="t-title">보유재화</div>
<button class="t-close" @click="currency_modal_close()"></button>
</div>
<div class="currency-block">
<div class="block-stit">
<p class="txt">코인</p>
</div>
<div class="currency-info">
<div class="">
<p class="txt"><img
src="//images.novelpia.com/img/new/main/sidemenu/coin-shop.svg">골드코인
</p>
<p class="num">{{ String(Number(mem.mem_coin)).format() }} 코인</p>
</div>
<!-- <div class="" >
<p class="txt"><img src="//images.novelpia.com/img/new/main/sidemenu/coin-shop.svg">보너스코인</p>
<p class="num">{{ String(Number(mem.mem_coin_bonus)).format()}} 코인<span class="end-date" v-show="mem.mem_coin_bonus >0">(25.12.30 부분 만료)</span></p>
</div> -->
</div>
</div>
<div class="currency-block">
<div class="block-stit">
<p class="txt">기타 재화</p>
</div>
<div class="currency-info">
<div class="">
<p class="txt"><img
src="//images.novelpia.com/img/new/common/side_icon_memcoin.svg">멤버십코인
</p>
<p class="num">{{ String(Number(mem.mem_coin_bonus)).format() }} 코인
<span class="end-date" v-if="Number(mem.mem_coin_bonus) > 0">
({{ mem.mem_temp_coin_enddt }} {{
String(Number(mem.mem_temp_coin)).format() }}코인 부분 만료)
</span>
</p>
</div>
<div class="">
<p class="txt"><img
src="//images.novelpia.com/img/new/common/side_icon_wtcoin.svg">웹툰코인
</p>
<p class="num">{{ String(Number(mem.mem_webtoon_coin)).format() }} 코인
<span class="end-date" v-if="Number(mem.mem_webtoon_coin) > 0">
({{mem.mem_webtoon_coin_end_dt}} {{
String(Number(mem.mem_webtoon_coin)).format() }}코인 부분 만료)
</span>
</p>
</div>
<div class="">
<p class="txt"><img
src="//images.novelpia.com/img/new/common/side_icon_bookcash.svg">북캐시
</p>
<p class="num">{{ String(Number(mem.mem_book_total_point)).format()}} 캐시
<span class="end-date" v-if="Number(mem.mem_book_remain_point) > 0">
({{ String(mem.mem_book_remain_point_end_dt) }} {{
String(Number(mem.mem_book_remain_point)).format()}}캐시 부분 만료)
</span>
</p>
</div>
<div class="">
<p class="txt"><img
src="//novelpia.com/img/new/plus/v2/icon_mileage_m2.png">마일리지</p>
<p class="num">{{ String(mem.mem_gacha_mileage).format() }}
마일리지<!--<span class="end-date" v-show="mem.mem_gacha_mileage > 0">(25.12.30 부분 만료)</span>-->
</p>
</div>
</div>
</div>
<div class="currency-detail-info">
<div class="currency-detail-info-block">
<p>멤버십코인이란?</p>
<ul>
<li>멤버십 코인은 플러스 멤버십 혜택으로 제공되는 기간 한정 재화로, 웹툰과 북스에서 사용할 수 있습니다.</li>
<li>기간 중 이용 시 우선 소진되며 유효기간이 지나면 소멸됩니다.</li>
<li>멤버십 코인의 유효기간은 한 달입니다.</li>
</ul>
</div>
<div class="currency-detail-info-block">
<p>웹툰코인이란?</p>
<ul>
<li>웹툰에서 회차를 소장할 수 있는 재화입니다.</li>
<li>웹툰 코인의 유효기간은 한 달입니다.</li>
</ul>
</div>
<div class="currency-detail-info-block">
<p>북캐시란?</p>
<ul>
<li>북스에서 웹소설을 구매(대여, 소장) 할 수 있는 재화입니다.</li>
<li>코인으로 북스 상품을 구매할 수 있습니다. (1코인 = 북캐시 100원)</li>
<li>코인으로 북스 상품 구매하고, 100원 미만의 차액은 북캐시로 적립됩니다.</li>
<li>보너스 북캐시의 유효기간은 한 달입니다.</li>
</ul>
</div>
<div class="currency-detail-info-block2">
<p>※ 보너스로 지급된 멤버십 코인, 북캐시, 웹툰코인은 기간 한정 재화입니다.</p>
<p>※ 보너스 재화는 우선 사용되며, 유효기간이 지나면 소멸됩니다.</p>
</div>
<div class="currency-detail-info-block">
<p>마일리지란?</p>
<ul>
<li><a href="/event/day_quest">일일 퀘스트</a>, <a
href="/event/attendance_new">출석</a>, 기타 이벤트를 통해 획득할 수 있는 재화입니다.</li>
<li>마일리지의 유효기간은 180일 입니다. <a href="/notice/all/view_2480518/">이용기간 안내</a>
</li>
</ul>
</div>
</div>
</div>
<div class="sidemenu-wrapper">
<div class="sidemenu-wrapper-upper">
<div class="sidemenu-control">
<img src="//images.novelpia.com/img/new/menu/switch_korean_off.svg"
class="switch-adult" style="height: 25px; width:48px; cursor: pointer;"
onclick="_top_obj.methods.adt_mode('on')" alt="일반"> <img
:src="`${CDN_DOMAIN_IMG}/img/new/main/sidemenu/setting${darkmode ? '-dark' : ''}.svg`"
@click="goto('/user_setting')" v-show="mem.mem_no != 0">
<img :src="`${CDN_DOMAIN_IMG}/img/new/main/sidemenu/close${darkmode ? '-dark' : ''}.svg`"
@click="close">
</div>
<div class="b-login s_inv" v-if="mem.mem_no == 0" @click="login()">
<div class="login-benefit-txt s_inv">
<p class="b-main-txt s_inv">지금 <span>로그인</span> 하고</p>
<p class="b-sub-txt">다양한 혜택 받아보세요.</p>
</div>
<div class="login-benefit-img">
<lottie class="sidemenu-lottie s_inv"
src="//images.novelpia.com/img/new/main/sidemenu/gift-card.json">
</lottie>
</div>
</div>
<div v-else>
<div class="sidemenu-profile">
<img :src="mem.mem_photo" @click="goto('/user')">
<p @click="goto('/user')">{{ mem.mem_nick }}</p>
</div>
<div class="sidemenu-plus">
<div class="sidemenu-plus-plus" v-if="mem_plus.enddate > now">
<div class="sidemenu-plus-bold">
<a href="/user_payment">
<div class="side-plus-left">
<p><img
src="//images.novelpia.com/img/new/common/sidemenu_plus_logo.svg">
</p>
<p>PLUS 멤버십 이용 중</p>
</div>
<div class="side-plus-arrow"><img
src="//images.novelpia.com/img/new/common/sidemenu_link_arrow.svg">
</div>
</a>
</div>
</div>
<div class="sidemenu-plus-sale" v-else-if="sub_sale_flag >= 1"
@click="goto('/event/plus_free')">
<div>
<p>지금 첫달 무료로 제한 없는 혜택을 즐겨보세요.</p>
<p class="sidemenu-sale-bold">PLUS 멤버십 <span
class="sidemenu-sale-orange">무료로 활성화</span>하기</p>
</div>
<lottie class="sidemenu-lottie"
src="//images.novelpia.com/img/new/main/sidemenu/gift-card.json">
</lottie>
</div>
<div class="sidemenu-plus-sale"
v-else-if="sub_sale_flag >= 1 && !mem.mem_no"
@click="goto('/event/plus_free')">
<div>
<p>지금 첫달 무료로 제한 없는 혜택을 즐겨보세요.</p>
<p class="sidemenu-sale-bold">본인인증 후 멤버십 <span
class="sidemenu-sale-orange">무료로 활성화</span>하기</p>
</div>
<lottie class="sidemenu-lottie"
src="//images.novelpia.com/img/new/main/sidemenu/gift-card.json">
</lottie>
</div>
<div class="sidemenu-plus-noplus" v-else-if="sub_sale_flag == 0"
@click="goto('/plus_shop')">
<div>
<p>플러스 멤버십이 활성화 되어 있지 않아요!</p>
<p class="sidemenu-noplus-bold">플러스 멤버십 활성화하기</p>
</div>
<img :src="`${CDN_DOMAIN_IMG}/img/new/main/sidemenu/plus.svg`">
</div>
</div>
<div class="sidemenu-currency-wrapper">
<div class="currency-tit">
보유 재화<img src="//images.novelpia.com/img/new/common/side_icon_info.svg"
@click="currency_modal_open()">
</div>
<div class="sidemenu-currency">
<div class="sidemenu-coin">
<div class="currency-stit"><img
src="//images.novelpia.com/img/new/main/sidemenu/coin-shop.svg">코인
</div>
<div class="currency-snum"><span class="sidemenu-currency-val">{{
String(Number(mem.mem_coin)).format() }}</span></div>
</div>
<div class="sidemenu-mileage">
<div class="currency-stit"><img
src="//novelpia.com/img/new/plus/v2/icon_mileage_m2.png">마일리지
</div>
<div class="currency-snum"><span class="sidemenu-currency-val">{{
String(Number(mem.mem_gacha_mileage)).format() }}</span>
</div>
</div>
<div class="sidemenu-memcoin">
<div class="currency-stit"><img
src="//images.novelpia.com/img/new/common/side_icon_memcoin.svg">멤버십
코인</div>
<div class="currency-snum"><span class="sidemenu-currency-val">{{
String(Number(mem.mem_coin_bonus)).format() }}</span></div>
</div>
<!--
<div class="sidemenu-wtcoin">
<div class="currency-stit"><img src="//images.novelpia.com/img/new/common/side_icon_wtcoin.svg">웹툰코인</div>
<div class="currency-snum"><span class="sidemenu-currency-val">{{ String(Number(mem.mem_webtoon_coin)).format() }}</span></div>
</div>
-->
<div class="sidemenu-bookcash">
<div class="currency-stit"><img
src="//images.novelpia.com/img/new/common/side_icon_bookcash.svg">북캐시
</div>
<div class="currency-snum"><span class="sidemenu-currency-val">{{
String(Number(mem.mem_book_total_point)).format()}}</span>
</div>
</div>
</div>
</div>
</div>
<div class="sidemenu-pay-link">
<div @click="goto('/coin_shop')">
<div class="sidemenu-link-bg">
<img :src="`${CDN_DOMAIN_IMG}/img/new/main/sidemenu/coin-shop.svg`">
</div>
<p>코인충전</p>
</div>
<div @click="goto('/openstore_v2')">
<div class="sidemenu-link-bg">
<img :src="`${CDN_DOMAIN_IMG}/img/new/main/sidemenu/emoticon-shop.svg`">
</div>
<p>이모티콘 구매</p>
</div>
<div @click="goto('/event/novelgoods')">
<div class="sidemenu-link-bg">
<img :src="`${CDN_DOMAIN_IMG}/img/new/main/sidemenu/goods-shop.svg`">
</div>
<p>굿즈샵</p>
</div>
</div>
</div>
<div class="sidemenu-wrapper-lower">
<div class="sidemenu-writer" @click="goto('/writer_room')" v-show="mem.mem_no != 0">
<div>
<img :src="`${CDN_DOMAIN_IMG}/img/new/main/sidemenu/writer-room.svg`">
<p>작품 관리하기</p>
</div>
<img
:src="`${CDN_DOMAIN_IMG}/img/new/main/sidemenu/chevron-right${darkmode ? '-dark' : ''}.svg`">
</div>
<div class="sidemenu-service">
<p class="sidemenu-link-title">노벨피아 서비스</p>
<div class="sidemenu-link-grid">
<p @click="goto('/page_events')">이벤트</p>
<p @click="goto('/n_user_free_ticket')">선물함</p>
<!-- <p @click="goto('/new_gift_promotion')">쿠폰 등록</p> -->
<p @click="goto('/event/day_quest')">일일 퀘스트</p>
<p @click="goto('/novel_game')">놀이터</p>
<p @click="goto('/event/attendance_new')">출석체크</p>
<!-- <p @click="goto('/page_events')">실험실</p> -->
<p @click="goto('/arena/all')">작품리뷰</p>
<p @click="goto('/game_agit')">게임</p>
<p @click="goto('/atelier')">팬아트</p>
</div>
</div>
<div class="sidemenu-support">
<p class="sidemenu-link-title">고객지원</p>
<div class="sidemenu-link-grid">
<p @click="goto('/notice/list')">공지사항</p>
<p @click="goto('/faq')">1:1 문의하기</p>
<p @click="goto('/user_payment')">결제 내역</p>
</div>
</div>
<button type="button" class="sidemenu-logout" @click="goto('/proc/logout')"
v-show="mem.mem_no > 0 ">로그아웃</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="top_nav ">
<a href="/freestory" class="no-select ">자유</a>
<a href="/plus" class="no-select ">플러스</a>
<a href="/top100" class="no-select ">랭킹</a>
<a href="/comic_main" class="no-select ">만화</a>
<a href="/mybook" class="no-select ">내서재</a>
</div>
</header>
<!-- 간소화해더 -->
<header class="sub-mobile mobile_show s_inv h_border_bottom" id="renewal-header"
style="position: fixed;top: 0;left: 0;width: 100%;background-color: #fff;z-index: 999; vertical-align:unset;">
<div class="sub-left-menu">
<div class="sbm-icon-menu" @click="back()"><img src="//images.novelpia.com/img/new/navi/sbm_icon_back.svg">
</div>
<div class="sbm-page-name" v-show="this.title != ''" style="display:none;"> {{ this.title }} </div>
</div>
<div class="sub-right-menu">
<div class="sbm-icon-menu" onclick="like_btn()">
<img class="sbm_icon_heart s_inv" src="//images.novelpia.com/img/new/navi/sbm_icon_heart2.svg">
<!--<img src="//images.novelpia.com/img/new/navi/sbm_icon_heart_active.svg">-->
</div>
<div class="sbm-icon-menu" onclick="alarm_btn()">
<img class="sbm_icon_alert s_inv" src="//images.novelpia.com/img/new/navi/sbm_icon_alert3.svg">
<!-- <img class="sbm_icon_alert" src="//images.novelpia.com/img/new/navi/sbm_icon_alert_active.svg"> -->
</div>
<div class="sbm-icon-menu" @click="gift()">
<img src="//images.novelpia.com/img/new/navi/sbm_icon_gift.svg">
<span id="alarm_dot" class="red-dot"></span>
</div>
<div class="sbm-icon-menu">
<div onclick="m_s_vue.toggle()" class="s_inv" style="cursor:pointer;">
<img src="//images.novelpia.com/img/layout/none_user.png"
style="width:25px;height:25px;border-radius:50%;"
onerror="//images.novelpia.com/img/layout/none_user.png" alt="메뉴">
</div>
</div>
</div>
</header>
<div id="m-sidemenu" class="np-sidemenu m_show " :class="{ 'show': is_open, 'sidemenu-dark': darkmode == '1' }">
<!--보유 재화 툴팁 영역-->
<div class="currency-tooltip " v-show="is_modal_open == true">
<div class="tooltip-header ">
<div class="t-title">보유재화</div>
<button class="t-close " @click="currency_modal_close()"></button>
</div>
<div class="currency-block ">
<div class="block-stit">
<p class="txt">코인</p>
</div>
<div class="currency-info ">
<div class="">
<p class="txt"><img src="//images.novelpia.com/img/new/main/sidemenu/coin-shop.svg">골드코인</p>
<p class="num">{{ String(Number(mem.mem_coin)).format() }} 코인</p>
</div>
<!-- <div class="" >
<p class="txt"><img src="//images.novelpia.com/img/new/main/sidemenu/coin-shop.svg">보너스코인</p>
<p class="num">{{ String(Number(mem.mem_coin_bonus)).format()}} 코인<span class="end-date" v-show="mem.mem_coin_bonus >0">(25.12.30 만료)</span></p>
</div> -->
</div>
</div>
<div class="currency-block ">
<div class="block-stit ">
<p class="txt">기타 재화</p>
</div>
<div class="currency-info ">
<div class="">
<p class="txt"><img src="//images.novelpia.com/img/new/common/side_icon_memcoin.svg">멤버십코인</p>
<p class="num">{{ String(Number(mem.mem_coin_bonus)).format() }} 코인
<span class="end-date" v-if="Number(mem.mem_coin_bonus) > 0">
({{ mem.mem_temp_coin_enddt }} {{ String(Number(mem.mem_temp_coin)).format() }}코인 부분 만료)
</span>
</p>
</div>
<div class="">
<p class="txt"><img src="//images.novelpia.com/img/new/common/side_icon_wtcoin.svg">웹툰코인</p>
<p class="num">
{{ String(Number(mem.mem_webtoon_coin)).format() }} 코인
<span class="end-date" v-if="Number(mem.mem_webtoon_coin) > 0">
({{mem.mem_webtoon_coin_end_dt}} {{ String(Number(mem.mem_webtoon_coin)).format() }}코인
부분 만료)
</span>
</p>
</div>
<div class="">
<p class="txt"><img src="//images.novelpia.com/img/new/common/side_icon_bookcash.svg">북캐시</p>
<p class="num">
{{ String(Number(mem.mem_book_total_point)).format()}} 캐시
<span class="end-date" v-if="Number(mem.mem_book_remain_point) > 0">
({{ String(mem.mem_book_remain_point_end_dt) }} {{
String(Number(mem.mem_book_remain_point)).format()}}캐시 부분 만료)
</span>
</p>
</div>
<div class="">
<p class="txt"><img src="//novelpia.com/img/new/plus/v2/icon_mileage_m2.png">마일리지</p>
<p class="num">{{ String(Number(mem.mem_gacha_mileage)).format() }} 마일리지
<!-- <span class="end-date" v-show="mem.mem_gacha_mileage >0">(25.12.30 부분 만료)</span>--></p>
</div>
</div>
</div>
<div class="currency-detail-info">
<div class="currency-detail-info-block">
<p>멤버십코인이란?</p>
<ul>
<li>멤버십 코인은 플러스 멤버십 혜택으로 제공되는 기간 한정 재화로, 웹툰과 북스에서 사용할 수 있습니다.</li>
<li>기간 중 이용 시 우선 소진되며 유효기간이 지나면 소멸됩니다.</li>
<li>멤버십 코인의 유효기간은 한 달입니다.</li>
</ul>
</div>
<div class="currency-detail-info-block">
<p>웹툰코인이란?</p>
<ul>
<li>웹툰에서 회차를 소장할 수 있는 재화입니다.</li>
<li>웹툰 코인의 유효기간은 한 달입니다.</li>
</ul>
</div>
<div class="currency-detail-info-block">
<p>북캐시란?</p>
<ul>
<li>북스에서 웹소설을 구매(대여, 소장) 할 수 있는 재화입니다.</li>
<li>코인으로 북스 상품을 구매할 수 있습니다. (1코인 = 북캐시 100원)</li>
<li>코인으로 북스 상품 구매하고, 100원 미만의 차액은 북캐시로 적립됩니다.</li>
<li>보너스 북캐시의 유효기간은 한 달입니다.</li>
</ul>
</div>
<div class="currency-detail-info-block2">
<p>※ 보너스로 지급된 멤버십 코인, 북캐시, 웹툰코인은 기간 한정 재화입니다.</p>
<p>※ 보너스 재화는 우선 사용되며, 유효기간이 지나면 소멸됩니다.</p>
</div>
<div class="currency-detail-info-block">
<p>마일리지란?</p>
<ul>
<li><a href="/event/day_quest">일일 퀘스트</a>, <a href="/event/attendance_new">출석</a>, 기타 이벤트를 통해
획득할 수 있는 재화입니다.</li>
<li>마일리지의 유효기간은 180일 입니다. <a href="/notice/all/view_2480518/">이용기간 안내</a></li>
</ul>
</div>
</div>
</div>
<div v-if="is_open" class="sidemenu-background" @click="close"></div>
<div class="sidemenu-wrapper" style="background-color:#ffffff">
<div class="sidemenu-wrapper-upper">
<div class="sidemenu-control">
<img src="//images.novelpia.com/img/new/menu/switch_korean_off.svg" class="switch-adult"
style="height: 25px; width:48px; cursor: pointer;" onclick="_top_obj.methods.adt_mode('on')"
alt="일반"> <img
:src="`${CDN_DOMAIN_IMG}/img/new/main/sidemenu/setting${darkmode ? '-dark' : ''}.svg`"
@click="goto('/user_setting')" v-show="mem.mem_no != 0">
<img :src="`${CDN_DOMAIN_IMG}/img/new/main/sidemenu/close${darkmode ? '-dark' : ''}.svg`"
@click="close">
</div>
<div class="b-login s_inv" v-if="mem.mem_no == 0" @click="login()">
<div class="login-benefit-txt s_inv">
<p class="b-main-txt s_inv">지금 <span>로그인</span> 하고</p>
<p class="b-sub-txt">다양한 혜택 받아보세요.</p>
</div>
<div class="login-benefit-img">
<lottie class="sidemenu-lottie s_inv"
src="//images.novelpia.com/img/new/main/sidemenu/gift-card.json">
</lottie>
</div>
</div>
<div v-else>
<div class="sidemenu-profile">
<img :src="mem.mem_photo" @click="goto('/user')">
<p @click="goto('/user')">{{ mem.mem_nick }}</p>
</div>
<div class="sidemenu-plus">
<div class="sidemenu-plus-plus" v-if="mem_plus.enddate > now">
<div class="sidemenu-plus-bold">
<a href="/user_payment">
<div class="side-plus-left">
<p><img src="//images.novelpia.com/img/new/common/sidemenu_plus_logo.svg"></p>
<p>PLUS 멤버십 이용 중</p>
</div>
<div class="side-plus-arrow"><img
src="//images.novelpia.com/img/new/common/sidemenu_link_arrow.svg"></div>
</a>
</div>
</div>
<div class="sidemenu-plus-sale" v-else-if="sub_sale_flag >= 1"
@click="goto('/event/plus_free')">
<div>
<p>지금 첫달 무료로 제한 없는 혜택을 즐겨보세요.</p>
<p class="sidemenu-sale-bold">PLUS 멤버십 <span class="sidemenu-sale-orange">무료로
활성화</span>하기</p>
</div>
<lottie class="sidemenu-lottie"
src="//images.novelpia.com/img/new/main/sidemenu/gift-card.json">
</lottie>
</div>
<div class="sidemenu-plus-sale" v-else-if="sub_sale_flag >= 1 && !mem.mem_is_auth"
@click="goto('/event/plus_free')">
<div>
<p>지금 첫달 무료로 제한 없는 혜택을 즐겨보세요.</p>
<p class="sidemenu-sale-bold">본인인증 후 멤버십 <span class="sidemenu-sale-orange">무료로
활성화</span>하기</p>
</div>
<lottie class="sidemenu-lottie"
src="//images.novelpia.com/img/new/main/sidemenu/gift-card.json">
</lottie>
</div>
<div class="sidemenu-plus-noplus" v-else-if="sub_sale_flag == 0" @click="goto('/plus_shop')">
<div>
<p>플러스 멤버십이 활성화 되어 있지 않아요!</p>
<p class="sidemenu-noplus-bold">플러스 멤버십 활성화하기</p>
</div>
<img :src="`${CDN_DOMAIN_IMG}/img/new/main/sidemenu/plus.svg`">
</div>
</div>
<div class="sidemenu-currency-wrapper">
<div class="currency-tit">
보유 재화<img src="//images.novelpia.com/img/new/common/side_icon_info.svg"
@click="currency_modal_open()">
</div>
<div class="sidemenu-currency">
<div class="sidemenu-coin">
<div class="currency-stit"><img
src="//images.novelpia.com/img/new/main/sidemenu/coin-shop.svg">코인</div>
<div class="currency-snum">
<span class="sidemenu-currency-val">{{ String(Number(mem.mem_coin)).format()
}}</span>
</div>
</div>
<div class="sidemenu-mileage">
<div class="currency-stit"><img
src="//novelpia.com/img/new/plus/v2/icon_mileage_m2.png">마일리지</div>
<div class="currency-snum">
<span class="sidemenu-currency-val">{{
String(Number(mem.mem_gacha_mileage)).format() }}</span>
</div>
</div>
<div class="sidemenu-memcoin">
<div class="currency-stit"><img
src="//images.novelpia.com/img/new/common/side_icon_memcoin.svg">멤버십 코인</div>
<div class="currency-snum">
<span class="sidemenu-currency-val">{{ String(Number(mem.mem_coin_bonus)).format()
}}</span>
</div>
</div>
<!--
<div class="sidemenu-wtcoin">
<div class="currency-stit"><img src="//images.novelpia.com/img/new/common/side_icon_wtcoin.svg">웹툰코인</div>
<div class="currency-snum">
<span class="sidemenu-currency-val">{{ String(Number(mem.mem_webtoon_coin)).format() }}</span>
</div>
</div>
-->
<div class="sidemenu-bookcash">
<div class="currency-stit"><img
src="//images.novelpia.com/img/new/common/side_icon_bookcash.svg">북캐시</div>
<div class="currency-snum"><span class="sidemenu-currency-val">{{
String(Number(mem.mem_book_total_point)).format()}}</span></div>
</div>
</div>
</div>
</div>
<div class="sidemenu-pay-link">
<div @click="goto('/coin_shop')">
<div class="sidemenu-link-bg">
<img :src="`${CDN_DOMAIN_IMG}/img/new/main/sidemenu/coin-shop.svg`">
</div>
<p>코인충전</p>
</div>
<div @click="goto('/openstore_v2')">
<div class="sidemenu-link-bg">
<img :src="`${CDN_DOMAIN_IMG}/img/new/main/sidemenu/emoticon-shop.svg`">
</div>
<p>이모티콘 구매</p>
</div>
<div @click="goto('/event/novelgoods')">
<div class="sidemenu-link-bg">
<img :src="`${CDN_DOMAIN_IMG}/img/new/main/sidemenu/goods-shop.svg`">
</div>
<p>굿즈샵</p>
</div>
</div>
</div>
<div class="sidemenu-wrapper-lower" style="border-top: 4px solid #F0F3FA;">
<div class="sidemenu-writer" @click="goto('/writer_room')" v-show="mem.mem_no != 0">
<div>
<img :src="`${CDN_DOMAIN_IMG}/img/new/main/sidemenu/writer-room.svg`">
<p>작품 관리하기</p>
</div>
<img :src="`${CDN_DOMAIN_IMG}/img/new/main/sidemenu/chevron-right${darkmode ? '-dark' : ''}.svg`">
</div>
<div class="sidemenu-service">
<p class="sidemenu-link-title">노벨피아 서비스</p>
<div class="sidemenu-link-grid">
<p @click="goto('/page_events')">이벤트</p>
<p @click="goto('/n_user_free_ticket')">선물함</p>
<!-- <p v-if="is_not_ios" @click="goto('/new_gift_promotion')">쿠폰 등록</p> -->
<p @click="goto('/event/day_quest')">일일 퀘스트</p>
<p @click="goto('/novel_game')">놀이터</p>
<p @click="goto('/event/attendance_new')">출석체크</p>
<!-- <p @click="goto('/page_events')">실험실</p> -->
<p @click="goto('/arena/all')">작품리뷰</p>
<p @click="goto('/game_agit')">게임</p>
<p @click="goto('/atelier')">팬아트</p>
</div>
</div>
<div class="sidemenu-support">
<p class="sidemenu-link-title">고객지원</p>
<div class="sidemenu-link-grid">
<p @click="goto('/notice/list')">공지사항</p>
<p @click="goto('/faq')">1:1 문의하기</p>
<p @click="goto('/user_payment')">결제 내역</p>
</div>
</div>
<button type="button" class="sidemenu-logout" @click="goto('/proc/logout')"
v-show="mem.mem_no >0">로그아웃</button>
<div v-if="is_app" class="sidemenu-app-off">
<p @click="app_off()">앱 종료하기</p>
</div>
</div>
</div>
</div>
<div id="reserve_cancel_modal" class="basic-modal-background">
<div class="common-layer-wrapper s_inv">
<div class="close-x" onclick="close_modal()"></div>
<div class="layer-center-img"><img class="s_inv"
src="//images.novelpia.com/img/new/plus/modal_img_plus03.png"></div>
<p class="layer-body-tit">떠나지 않으셨군요, 회원님!<br>감사합니다<span class="s_inv">😚</span></p>
<p class="layer-body-txt">멤버십 해지 예약이 취소되었습니다.</p>
<div class="layer-botton-section">
<button class="color-bk" onclick="close_modal()">닫기</button>
</div>
</div>
</div>
<script>
const lottie = vue_load("/vue/component/lottie.vue");
const pcProfile = ` <div onclick="pc_s_vue.toggle()" class="s_inv" style="cursor:pointer;">
<img src="//images.novelpia.com/img/layout/none_user.png" style="width:30px;height:30px;border-radius:50%;" onerror="//images.novelpia.com/img/layout/none_user.png" alt="메뉴">
</div>`;
const mobileProfile = ` <div onclick="m_s_vue.toggle()" class="s_inv" style="cursor:pointer;">
<img src="//images.novelpia.com/img/layout/none_user.png" style="width:25px;height:25px;border-radius:50%;" onerror="//images.novelpia.com/img/layout/none_user.png" alt="메뉴">
</div>`;
// new Vue({
// el: '#toggle-menu',
// data: {
// deviceType: window.innerWidth >= 891 ? 'pc' : 'm',
// pcProfile: pcProfile,
// mobileProfile: mobileProfile,
// },
// mounted() {
// window.addEventListener('resize', this.updateDeviceType);
// },
// methods: {
// updateDeviceType() {
// this.deviceType = window.innerWidth >= 891 ? 'pc' : 'm';
// pc_s_vue.is_open = false;
// m_s_vue.is_open = false;
// $('body').removeClass('modal-open');
// }
// },
// beforeDestroy() {
// window.removeEventListener('resize', this.updateDeviceType);
// }
// });
window.addEventListener("resize", function () {
if (window.innerWidth >= 891) {
pc_s_vue.is_open = false;
} else {
m_s_vue.is_open = false;
}
$('body').removeClass('modal-open');
});
const pc_s_vue = new Vue({
el: "#pc-sidemenu",
data: () => ({
CDN_DOMAIN_IMG: "//images.novelpia.com",
mem: {
mem_no: '',
mem_nick: '',
mem_coin: '',
mem_coin_bonus: '',
mem_gacha_mileage: '',
mem_photo: '//images.novelpia.com/img/layout/none_user.png',
mem_is_auth: false,
mem_book_total_point: '0',
mem_book_remain_point: '0',
mem_book_remain_point_end_dt: '25.12.30',
mem_webtoon_coin: '',
mem_webtoon_coin_end_dt: '25.12.30',
mem_temp_coin: '',
mem_temp_coin_enddt: '25.12.30',
},
mem_plus: {
enddate: ''
},
darkmode: '',
is_open: false,
is_modal_open: false,
secret_mode: '0',
sub_sale_flag: '0',
now: moment().format('YYYY-MM-DD HH:mm:ss'),
}),
components: {
"lottie": lottie,
},
methods: {
goto(path) {
location.href = path;
},
toggle() {
if (!this.is_open) {
this.open();
} else {
this.close();
}
},
open() {
this.is_open = true;
},
close() {
this.is_open = false;
},
currency_modal_open() {
this.is_modal_open = true;
},
currency_modal_close() {
this.is_modal_open = false;
},
login() {
member_login_modal_on();
return;
}
},
mounted: async function () {
if (!this.mem) {
this.mem = {};
}
if (!this.mem.mem_photo) {
this.mem.mem_photo = this.CDN_DOMAIN_IMG + "/img/layout/none_user.png";
}
if (Number(this.secret_mode)) {
this.mem.mem_photo = this.CDN_DOMAIN_IMG + "/img/new/secret_mode_on.png";
}
},
watch: {
is_open: function () {
if (this.is_open) {
$('#pc-sidemenu').slideDown(300);
} else {
$('#pc-sidemenu').slideUp(300);
}
}
}
});
const m_s_vue = new Vue({
el: "#m-sidemenu",
data: () => ({
CDN_DOMAIN_IMG: "//images.novelpia.com",
mem: {
mem_no: '',
mem_nick: '',
mem_coin: '',
mem_coin_bonus: '',
mem_gacha_mileage: '',
mem_photo: '//images.novelpia.com/img/layout/none_user.png',
mem_is_auth: false,
mem_book_total_point: '0',
mem_book_remain_point: '0',
mem_book_remain_point_end_dt: '25.12.30',
mem_webtoon_coin: '',
mem_webtoon_coin_end_dt: '25.12.30',
mem_temp_coin: '',
mem_temp_coin_enddt: '25.12.30',
},
mem_plus: {
enddate: ''
},
darkmode: '',
is_open: false,
is_modal_open: false,
secret_mode: '0',
sub_sale_flag: '0',
is_app: false,
is_not_ios: true,
is_simple: 1,
now: moment().format('YYYY-MM-DD HH:mm:ss'),
}),
components: {
"lottie": lottie,
},
methods: {
goto(path) {
location.href = path;
},
toggle() {
if (!this.is_open) {
this.open();
} else {
this.close();
}
},
open() {
this.is_open = true;
$('body').addClass('modal-open');
},
close() {
this.is_open = false;
$('body').removeClass('modal-open');
},
app_off() {
window.novelpia.exit('정말 종료하시겠습니까?');
},
currency_modal_open() {
this.is_modal_open = true;
},
currency_modal_close() {
this.is_modal_open = false;
},
login() {
member_login_modal_on();
return;
}
},
mounted: async function () {
if (!this.mem) {
this.mem = {};
}
if (!this.mem.mem_photo) {
this.mem.mem_photo = this.CDN_DOMAIN_IMG + "/img/layout/none_user.png";
}
if (Number(this.secret_mode)) {
this.mem.mem_photo = this.CDN_DOMAIN_IMG + "/img/new/secret_mode_on.png";
}
},
});
const snapp = new Vue({
el: "#renewal-header",
data: {
path_list: [],
title: "",
title_obj: {
"내서재": [
"/mybook",
"/mybook_comicbook_like"
],
"샵": [
"/plus_shop",
"/coin_shop",
"/openstore_v2",
"/event/novelgoods"
],
"놀이터": [
"/event/novelticon",
"/event/rock_paper_scissors",
"/event/day_quest",
"/event/puzzle_game",
"/novel_game"
],
"리뷰/홍보": [
"/arena"
],
"팬아트": [
"/atelier",
"/fanart",
"/comic"
],
"게임": [
"/hpc_game_main",
"/jump_main",
"/lil_main",
"game_agit"
],
"쿠폰 등록": [
"/new_gift_promotion"
],
"선물함": [
"/n_user_free_ticket"
],
"출석체크": [
"/event/attendance_new"
],
"공지사항": [
"/notice"
],
"문의하기": [
"/faq",
"/qna"
],
"알림": [
"/alarm"
],
"작품관리": [
"/writer_room",
"/writer_room_new"
],
"이벤트": [
"/page_events"
],
"검색": [
"/search",
"/comic_search"
],
"마이페이지": [
"/user_setting",
"/user_achieve",
"/user_donation",
"/user_payment",
"/user",
"/user_profile_block"
],
"추천": [
"/2025recommend"
]
},
is_user_page: false,
},
methods: {
set_header_title() {
for (const [key, val_arr] of Object.entries(this.title_obj)) {
let result = false;
for (const val of val_arr) {
result = this.check_header_path_val(key, val);
if (result) {
break;
}
}
if (result) {
break;
}
}
},
check_header_path_val(key, val) {
const path1 = this.path_list[1].trim();
if (path1 === val) {
this.title = key;
return true;
}
if (val.includes('/')) {
const val_list = val.split('/').filter((v) => v);
let check = true;
for (i = 0; i < val_list.length; i++) {
let path = this.path_list[i + 1];
if (!path) {
break;
}
path = path.trim();
if (val_list[i] !== path) {
check = false;
}
}
if (check) {
this.title = key;
return true;
}
}
return false;
},
back() {
window.history.back();
},
search() {
window.location.href = "/search"
},
gift() {
window.location.href = "/n_user_free_ticket"
},
home() {
window.location.href = '/';
},
user_setting() {
window.location.href = '/user_setting';
},
menu(e) {
m_s_vue.toggle();
},
},
mounted: async function () {
const urlp = new URL(window.location);
const path_list = urlp.pathname.split('/');
const path = path_list[1].trim();
this.path_list = path_list;
this.set_header_title();
if (this.title_obj["마이페이지"].includes(`/${path}`)) {
this.is_user_page = true;
}
},
});
document.addEventListener("scroll", function () {
let path = 'novel'
if (path == "novel") {
let scrollPosition = window.scrollY; // 현재 스크롤 위치
const title = $(".epnew-novel-title").text();
if (scrollPosition > 100) {
snapp.title = $(".epnew-novel-title").text();
} else {
snapp.title = "";
}
}
});
</script>
<style>
.alarm-cnt:before,
.alarm-cnt-menu:before {
content: '';
display: inline-block;
width: 6px;
height: 6px;
background-color: #F4361E;
border-radius: 100%;
}
</style>
<script>
const _top_obj = {
data: {
mem_adt: "0",
mem_no: "0",
mem_birthday: "2025-12-30 11:41:25",
},
methods: {
adt_mode: async function (option) {
var mem_adt = _top_obj.data.mem_adt;
var mem_no = _top_obj.data.mem_no;
var mem_birthday = _top_obj.data.mem_birthday;
var toDate = new Date();
var toYear = toDate.getFullYear();
var memYear = mem_birthday.substr(0, 4);
// 본인인증 안됐으면 toYear == memYear -> 본인인증 해야함
if (!(
(mem_adt == "0" && toYear == memYear)
|| mem_adt == "1"
)) {
alert("청소년은 성인 작품을 이용하실 수 없습니다.");
return;
}
const http_result = await http("post", "/proc/member_adt_mode", { "option": option });
if (http_result === 'OK') {
location.reload(true);
return;
}
if (http_result === 'auth') {
if (confirm("성인/본인인증이 필요합니다.\n인증 하시겠습니까?")) {
location = "/page/age_auth";
return;
} else {
return;
}
}
if (http_result === 'login') {
member_login_modal_on();
return;
}
alert("에러가 발생하였습니다.");
return;
},
getAlarmCnt: async function () { // 알람
if (_top_obj.data.mem_no === '0') {
return;
}
const url = "/proc/alarm";
const data = {
"mode": "getAlarmCnt"
};
const http_result = await http("post", url, data);
const { status, result } = http_result;
if (Number(status) !== 200) {
return;
}
const { cnt = 0 } = result;
// const cnt = 1 ;
if (cnt === 0) {
return;
} else {
$("#btn_alram #pc_alarm_dot").remove();
$("#btn_alram").append('<div id="pc_alarm_dot" class="red-dot"></div>');
}
}
},
init: async function () {
await this.methods.getAlarmCnt();
}
};
_top_obj.init();
</script>
<script>
const todays = moment().format('YYYY-MM-DD');
let plus_date2 = '';
plus_date2 = moment(plus_date2);
let day_remain2 = plus_date2.diff(todays, "days");
$(".end-plus").html(day_remain2);
$(".plus-remain2").on("click", async function () {
await reserve_cancel();
});
async function plus_remain_cancel() {
await reserve_cancel();
}
async function reserve_cancel() {
const url = "/proc/plus_defence";
const data = {
"cmd": "reserve_cancel"
}
const httpResult = await http("post", url, data);
const { code, errmsg, status } = httpResult;
if (status != 200) {
alert(errmsg || "통신오류");
return false;
}
await inc_stat("stat_induce_pay", {
flag_type: 52,
item_no: 1
});
$("#reserve_cancel_modal").show();
}
function close_modal() {
$("#plus_defend_modal").hide();
$("#reserve_cancel_modal").hide();
location.reload();
}
function secret_mode_toggle() {
let cookie_val = $.cookie('secret_mode');
if (cookie_val == 0 || cookie_val == null) {
$.cookie('secret_mode', '1', { expires: 365, path: '/', domain: 'novelpia.com', secure: false });
} else {
$.cookie('secret_mode', '0', { expires: 0, path: '/', domain: 'novelpia.com', secure: false });
}
location.reload();
}
function redirect_to_auth() {
$('.loads').show();
$.cookie('_redirectrurl', 'L25vdmVsLzI0ODEyOA==', { expires: 365, path: '/', domain: 'novelpia.com', secure: false });
location.href = '/page/age_auth?adult=2';
}
async function goto_partnership_site(path) {
if (path == "toptoon") {
const mem_adt_mode_check = await check_mem_adt_mode();
if (mem_adt_mode_check == 0) {
return;
}
if (mem_adt_mode_check == 1) {
alert("성인 모드를 켜주세요.");
return;
}
location.href = "https://" + path + ".novelpia.com/auth?cp_code=NOPI&user_key=OajxacLjqrwVGJRfdONc9A%3D%3D";
} else {
location.href = "https://" + path + ".novelpia.com";
}
}
async function check_mem_adt_mode() {
var mem_adt = _top_obj.data.mem_adt;
var mem_no = _top_obj.data.mem_no;
var mem_birthday = _top_obj.data.mem_birthday;
var toDate = new Date();
var toYear = toDate.getFullYear();
var memYear = mem_birthday.substr(0, 4);
const memadt_mode = Number("0");
if (memadt_mode == 1) {
return 2;
}
// 본인인증 안됐으면 toYear == memYear -> 본인인증 해야함
if (!(
(mem_adt == "0" && toYear == memYear)
|| mem_adt == "1"
)) {
alert("청소년은 성인 작품을 이용하실 수 없습니다.");
return 0;
}
const http_result = await http("post", "/proc/member_adt_mode", { "option": "on" });
if (http_result === 'OK') {
return 1;
}
if (http_result === 'auth') {
if (confirm("성인/본인인증이 필요합니다.\n인증 하시겠습니까?")) {
location = "/page/age_auth";
return 0;
} else {
return 0;
}
}
if (http_result === 'login') {
member_login_modal_on();
return 0;
}
alert("에러가 발생하였습니다.");
return 0;
}
function pc_search() {
let keyword = document.getElementById('search_input').value;
const regex = /[\/%?,]/g; // `/`, `%`, `?` 찾기
const matches = keyword.match(regex);
if (matches != null && keyword.length >= 1) {
keyword = keyword.replaceAll("/", "");
keyword = keyword.replaceAll("%", "");
keyword = keyword.replaceAll("?", "");
}
if (keyword == '') {
if (matches != null) {
alert("특수문자만 검색할 수 없습니다.");
} else {
alert("검색어를 확인해주세요.");
}
} else {
location.href = '/search/all//1/' + encodeURIComponent(keyword) + '?page=1&rows=30&novel_type=&start_count_book=&end_count_book=&novel_age=&start_days=&sort_col=last_viewdate&novel_genre=&block_out=0&block_stop=0&is_contest=0&list_display=list'
}
}
document.getElementById('search_input').addEventListener('keydown', function (event) {
if (event.key === 'Enter') {
event.preventDefault();
pc_search();
}
});
function close_adult_toggle() {
let mem_no = "0_novelapi";
// alert(mem_no);
if (mem_no > 0) {
$.cookie('top_adult_toggle', '1', { expires: 365, path: '/', domain: 'novelpia.com' });
} else {
$.cookie('top_adult_toggle', '1', { expires: 1, path: '/', domain: 'novelpia.com' });
}
$(".adult-toggle-tooltip").hide();
}
</script>
<div style="max-width:1240px;width:100%;margin: 0px auto;text-align: left;position: relative;">
<link rel='stylesheet' href='/css/episode_list.css?v=1763091566'>
<link rel='stylesheet' href='/css/_navi.css?v=1760926093'>
<style>
.font14 {
font-size: 14px;
}
@media (min-width: 319px) {
.font14 {
font-size: 16px;
}
}
@media (min-width: 359px) {
.font14 {
font-size: 18px;
}
}
@media (min-width: 540px) {
.font14 {
font-size: 20px;
}
}
@media (min-width: 720px) {
.font14 {
font-size: 28px;
}
}
@media (min-width: 980px) {
.font14 {
font-size: 36px;
}
}
</style>
<style>
.font12 {
font-size: 12px;
}
@media (min-width: 319px) {
.font12 {
font-size: 13px;
}
}
@media (min-width: 359px) {
.font12 {
font-size: 14px;
}
}
@media (min-width: 540px) {
.font12 {
font-size: 15px;
}
}
@media (min-width: 720px) {
.font12 {
font-size: 16px;
}
}
@media (min-width: 980px) {
.font12 {
font-size: 18px;
}
}
/* #banner-box {max-width:800px; overflow:hidden;} */
/* @media (max-width: 891px) { #banner-box { width:48%; overflow:hidden;} } */
</style>
<style>
.hidden_ep {
display: none;
}
.hidden_ep2 {
display: none;
}
.ep_num_bg {
background-color: #f5f5f5;
padding: 4px 8px;
font-size: 9px;
border-radius: 7px;
}
.ep_style1 {
height: 30px;
width: 30px;
border-radius: 15px;
background-color: #f4f4f4;
position: relative;
margin: 10px;
}
.ep_style2 {
background-color: #fff;
padding: 2px 0px;
border-radius: 10px;
opacity: 0.5;
}
.ep_style3 {
text-align: center;
width: 60px;
font-size: 11px;
}
/*.ep_style4 { height:80px;border-bottom:1px solid #f7f7f7;background-color: #feffe5;cursor:pointer; }*/
/*.ep_style5 { height:80px;border-bottom:1px solid #f7f7f7;cursor:pointer;border-top:1px solid #EFEFEF; }*/
.ep_style4 {
height: 90px;
border-bottom: 1px solid #f7f7f7;
background-color: #feffe5;
cursor: pointer;
}
.ep_style5 {
height: 90px;
border-bottom: 1px solid #f7f7f7;
cursor: pointer;
border-top: 1px solid #EFEFEF;
}
.ep_style_on {
height: 20px;
width: 20px;
border-radius: 10px;
background-color: #8463f5;
top: 5px;
left: 5px;
position: absolute;
}
.ep_style_off {
height: 20px;
width: 20px;
border-radius: 10px;
background-color: #e9e9e9;
top: 5px;
left: 5px;
position: absolute;
}
.font12 {
font-size: 11px;
}
@media (min-width: 319px) {
.font12 {
font-size: 12px;
}
}
@media (min-width: 359px) {
.font12 {
font-size: 13px;
}
}
@media (min-width: 540px) {
.font12 {
font-size: 14px;
}
}
@media (min-width: 720px) {
.font12 {
font-size: 15px;
}
}
@media (min-width: 980px) {
.font12 {
font-size: 16px;
}
}
/* 노벨 배너 */
.novel_banner {
position: relative;
}
.novel_banner p {
position: absolute;
transform: translate(-50%, 0);
left: 50%;
color: #705a66;
font-weight: Bold;
white-space: nowrap;
font-size: clamp(12px, 4vw, 34px);
text-align: center;
/*letter-spacing: -4px;*/
bottom: 13%;
}
.novel_banner .mobile_show img {
width: 100%;
}
/*다운로드 버튼*/
.down-btn {
color: #1F868A;
background-color: #def2f4;
font-weight: 900;
padding: padding: 4px 6px 4px 10px;
white-space: nowrap;
border-radius: 5px;
margin-top: 3px;
font-size: 11px;
display: flex;
align-items: center;
justify-content: center;
height: 26px;
}
.down-btn img {
margin-top: 2px;
margin-right: -5px;
}
@media screen and (max-width: 891px) {
.plus-free {
bottom: 75px !important;
z-index: 11 !important;
}
}
</style>
<style>
@keyframes motion {
0% {
margin-top: 0px;
}
100% {
margin-top: 5px;
}
}
</style>
<style>
/* 로딩 스플래쉬 */
.loader {
margin: 7% auto;
text-align: center;
}
.loader .dot {
display: inline-block;
vertical-align: middle;
width: .6em;
height: .6em;
margin: .19em;
background: #a824ff;
border-radius: .6em;
animation: loading 1s infinite alternate;
}
/*
* Dots Colors
* Smarter targeting vs nth-of-type?
*/
.loader .dot:nth-of-type(2) {
background: #962ff7;
animation-delay: 0.2s;
}
.loader .dot:nth-of-type(3) {
background: #27a2d3;
animation-delay: 0.4s;
}
.loader .dot:nth-of-type(4) {
background: #ebdc0b;
animation-delay: 0.6s;
}
@keyframes loading {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
</style>
<!--RTBHOUSE 제품 페이지-->
<script>
(rtbhEvents = window.rtbhEvents || []).push(
{
eventType: 'offer',
offerId: '248128'
},
{
eventType: 'uid',
id: '0'
});
</script>
<script>
// document.domain = 'novelpia.com' ;
function alarm_btn() {
if ($.cookie("secret_mode") == 1) {
alert("시크릿 모드에서는 알람 변경을 할 수 없습니다.");
return false;
}
$.ajax({
data: { "novel_no": '248128', "csrf": "" },
type: "POST",
url: "/proc/novel_alarm",
cache: false,
success: function (data) {
// console.log(data);
const check = data.split("|");
if (check[0] == 'on') {
$('.btn-alarm').addClass('active').find('img').attr('src', '//images.novelpia.com/img/new/comic/episode/alarm_btn3_on.png');
// mobile
$('.sbm_icon_alert').attr("src", "//images.novelpia.com/img/new/navi/sbm_icon_alert_active.svg");
toastr.options.escapeHtml = true;
toastr.options.closeButton = true;
toastr.options.newestOnTop = false;
toastr.options.progressBar = true;
toastr.info('구독알람', '알람이 신청되었습니다.', { timeOut: 5000 });
if (check[2] == 'pass') {
viewer_call_toast_msg('', 2)
}
} else if (check[0] == 'off') {
$('.btn-alarm').removeClass('active').find('img').attr('src', '//images.novelpia.com/img/new/comic/episode/alarm_btn3.png');
// mobile
$('.sbm_icon_alert').attr("src", "//images.novelpia.com/img/new/navi/sbm_icon_alert3.svg");
toastr.options.escapeHtml = true;
toastr.options.closeButton = true;
toastr.options.newestOnTop = false;
toastr.options.progressBar = true;
toastr.warning('구독알람', '알람이 해제되었습니다.', { timeOut: 5000 });
} else if (check[0] == 'login') {
if (confirm("알람을 받기 위해서는 로그인이 필요합니다.\n로그인 하시겠습니까?")) {
//location = "/page/login?redirectrurl=L25vdmVsLzI0ODEyOA==";
member_login_modal_on();
}
} else {
alert("에러가 발생하였습니다.");
}
}
});
}
function sns_share_btn() {
$('#sns_share_modal').modal('show');
}
function shareFaceBook(url, title) {
const user = navigator.userAgent;
if (user.indexOf("iPhone") > -1 || user.indexOf("Android") > -1) {
let urls = encodeURIComponent(url);
let titles = encodeURIComponent(title);
let shareURL = "https://www.facebook.com/sharer/sharer.php?u=" + urls + "&title=" + titles;
//document.location = shareURL;
out_site_go(shareURL, 1);
} else {
let urls = encodeURIComponent(url);
let titles = encodeURIComponent(title);
let shareURL = "https://www.facebook.com/sharer/sharer.php?u=" + urls + "&title=" + titles;
window.open(shareURL, 'facebooksharedialog', `menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600`);
}
}
function shareNaver(url, title) {
const user = navigator.userAgent;
if (user.indexOf("iPhone") > -1 || user.indexOf("Android") > -1) {
let urls = encodeURIComponent(url);
let titles = encodeURIComponent(title);
let shareURL = "https://share.naver.com/web/shareView?url=" + urls + "&title=" + titles;
//document.location = shareURL;
out_site_go(shareURL, 1);
} else {
let urls = encodeURIComponent(url);
let titles = encodeURIComponent(title);
let shareURL = "https://share.naver.com/web/shareView?url=" + urls + "&title=" + titles;
window.open(shareURL, 'naversharedialog', `menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600`);
}
}
function shareX(url, title) {
const user = navigator.userAgent;
if (user.indexOf("iPhone") > -1 || user.indexOf("Android") > -1) {
let urls = encodeURIComponent(url);
let titles = encodeURIComponent(title);
let shareURL = "https://twitter.com/intent/tweet?text=[%EA%B3%B5%EC%9C%A0]%20" + urls + "&title=" + titles;
//document.location = shareURL;
out_site_go(shareURL, 1);
} else {
let urls = encodeURIComponent(url);
let titles = encodeURIComponent(title);
let shareURL = "https://twitter.com/intent/tweet?text=[%EA%B3%B5%EC%9C%A0]%20" + urls + "&title=" + titles;
window.open(shareURL, 'twittersharedialog', `menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600`);
}
}
function os_share(url, title) {
if (navigator.share) {
navigator.share({
title: title,
//text : title,
url: url,
})
.then(() => console.log('공유성공'))
.catch((error) => console.log('공유에러', error));
} else {
alert('공유하기를 지원하지 않습니다.');
}
}
function like_btn_noti() {
let now_like = $('.now_like_val').val();
if ($.cookie("like_layer") == 1 || now_like == 1) {
like_btn();
} else {
$('.novel-like-modal-background').show();
}
}
function like_layer_close() {
$('.novel-like-modal-background').hide();
};
function today_layer_close() {
$.cookie('like_layer', '1', { expires: 365, path: '/', domain: '.novelpia.com', secure: false });
$('.novel-like-modal-background').hide();
}
function like_btn() {
if ($.cookie("secret_mode") == 1) {
alert("시크릿 모드에서는 선호작 변경을 할 수 없습니다.");
return false;
}
$.ajax({
data: { "novel_no": '248128', "csrf": "" },
type: "POST",
url: "/proc/novel_like",
cache: false,
success: function (data) {
var check = data.split("|");
if (check[0] == 'on') {
<!--RTBHOUSE 선호 상품 코드-->
(rtbhEvents = window.rtbhEvents || []).push(
{
eventType: 'wishlist',
offerId: '248128'
},
{
eventType: 'uid',
id: '0'
});
$('.btn-like').addClass('active').find('img').attr('src', '//images.novelpia.com/img/new/comic/episode/like_btn4_on.png');
// mobile
$('.sbm_icon_heart').attr("src", "//images.novelpia.com/img/new/navi/sbm_icon_heart_active.svg");
toastr.options.escapeHtml = true;
toastr.options.closeButton = true;
toastr.options.newestOnTop = false;
toastr.options.progressBar = true;
toastr.info('선호작', '선호작이 등록되었습니다.', { timeOut: 5000 });
//$('.now_like_val').val(1);
//2024-08-16 작업 여기까지
if (check[2] == 'pass') {
viewer_call_toast_msg('', 2)
}
if (check[3] == 1) {
toastr.options.escapeHtml = true;
toastr.options.closeButton = true;
toastr.options.newestOnTop = false;
toastr.options.progressBar = true;
toastr.success('빙고', '미션에 성공하셨습니다.', { timeOut: 5000 });
}
} else if (check[0] == 'off') {
$('.btn-like').removeClass('active').find('img').attr('src', '//images.novelpia.com/img/new/comic/episode/like_btn4.png');
// mobile
$('.sbm_icon_heart').attr("src", "//images.novelpia.com/img/new/navi/sbm_icon_heart2.svg");
toastr.options.escapeHtml = true;
toastr.options.closeButton = true;
toastr.options.newestOnTop = false;
toastr.options.progressBar = true;
toastr.warning('선호작', '선호작이 해제되었습니다.', { timeOut: 5000 });
//$('.now_like_val').val(0);
//2024-08-16 작업 여기까지
} else if (check[0] == 'login') {
if (confirm("선호작 등록을 위해서는 로그인이 필요합니다.\n로그인 하시겠습니까?")) {
member_login_modal_on();
}
}
/*
else if(check[0] == 'time') {
alert("선작 등록 후 1일이 지나지 않았습니다.");
}
*/
else {
alert("에러가 발생하였습니다.");
}
}
});
}
function pick_btn() {
if ($.cookie("secret_mode") == 1) {
alert("시크릿 모드에서는 인생픽 변경을 할 수 없습니다.");
return false;
}
if ($('.btn-pick').hasClass('on') === false) {
if (confirm("인생픽은 계정당 1개만 가능합니다.\n정말 인생픽하시겠습니까?")) {
$.ajax({
data: { "novel_no": '248128', "csrf": "" },
type: "POST",
url: "/proc/novel_pick",
cache: false,
success: function (data) {
var check = data.split("|");
if (check[0] == 'on') {
$('.btn-pick').addClass('on').text('픽한작품');
toastr.options.escapeHtml = true;
toastr.options.closeButton = true;
toastr.options.newestOnTop = false;
toastr.options.progressBar = true;
toastr.info('인생픽', '인생픽이 등록되었습니다.', { timeOut: 5000 });
} else if (check[0] == 'off') {
$('.btn-pick').removeClass('on').text('픽하기');
toastr.options.escapeHtml = true;
toastr.options.closeButton = true;
toastr.options.newestOnTop = false;
toastr.options.progressBar = true;
toastr.warning('인생픽', '인생픽이 해제되었습니다.', { timeOut: 5000 });
} else if (check[0] == 'login') {
if (confirm("인생픽 등록을 위해서는 로그인이 필요합니다.\n로그인 하시겠습니까?")) {
//location = "/page/login?redirectrurl=L25vdmVsLzI0ODEyOA==";
member_login_modal_on();
}
} else if (check[0] == 'auth') {
if (confirm("인생픽 등록을 위해서는 본인인증이 필요합니다.\n본인인증 하시겠습니까?")) {
location = "/page/age_auth";
}
} else {
alert("에러가 발생하였습니다.");
}
}
});
}
} else {
alert("다른 작품을 선택하시면 해당 작품으로 인생픽이 변경됩니다.");
}
}
</script>
<link rel="stylesheet" href="/lib/venobox/venobox.css?ver=0" type="text/css" media="screen" />
<script type="text/javascript" src="/lib/venobox/venobox.min.js"></script>
<style>
.sns-go {
padding: 0;
}
.sns-go li {
display: inline-block;
}
.sns-go li img {
border-radius: 0%;
}
</style>
<script src="/js/kakao.min.js"></script>
<script>
Kakao.init('a286893ac810a914d773bc6b7b93f473');
function shareKatalk() { Kakao.Link.sendScrap({ requestUrl: location.href, fail: function (res) { console.log(res) } }); };
function copylink() {
try {
var copyText = document.getElementById("copy_data"); copyText.type = 'text'; copyText.select(); document.execCommand("copy"); copyText.type = 'hidden'; alert('복사 되었습니다.');
} catch (err) { alert('이 브라우저는 복사를 지원하지 않습니다.'); };
}
</script>
<!-- 모달 : 선작 팝업 -->
<!--회차리스트 리뉴얼 231101-->
<div class="epnew-wrapper s_inv side_padding">
<div class="epnew-cover-box">
<a class="venobox" data-gall="myGallery"
href="//images.novelpia.com/imagebox/cover/e3588033fa587b35d514cd79432b3c9c_1337291_q_ori.file">
<img class="cover_img s_inv"
src="//images.novelpia.com/imagebox/cover/c39e6f8d86d71086ccd128a3db4f8a81_434662_ori.file"
onerror="this.src='//images.novelpia.com/img/layout/readycover4.png';">
</a>
</div>
<div class="epnew-novel-info">
<div class="icon-btn-area">
<div>
<a onclick="sns_share_btn();" class="btn-share">
<div class="icon-wrapper"><img
src="//images.novelpia.com/img/new/common/ep_b_icon_share.svg" alt="공유"></div>
<p class="bottom-txt">공유</p>
</a>
</div>
<div class="mobile_hidden">
<a onclick="like_btn();" class="btn-like ">
<div class="icon-wrapper"><img
src="//images.novelpia.com/img/new/comic/episode/like_btn4.png" alt="선호"></div>
<p class="bottom-txt">5,680</p>
</a>
<input type="hidden" class="now_like_val" value="0">
</div>
<div class="mobile_hidden">
<a onclick="alarm_btn();" class="mobile_hidden btn-alarm ">
<div class="icon-wrapper"><img
src="//images.novelpia.com/img/new/comic/episode/alarm_btn3.png" alt="알람"></div>
<p class="bottom-txt">688</p>
</a>
</div>
</div>
<div class="ep-info-line epnew-novel-title">최종보스를 성노예로 샀는데, 집착한다.</div>
<div class="ep-info-line epnew-writer">
<p class="in-writer">
<span class="category-title">작가명</span>
<a class="writer-name" href="/user/2301642">
서레이 </a>
</p>
<p class="in-badge">
<span class="b_plus s_inv">PLUS</span>
<span class="b_mono s_inv">독점</span>
<span class="b_comp s_inv">완결</span>
</p>
</div>
<div class="ep-info-line info-count1">
<div class="counter-line-a">
<p><span class="category-title">조회</span><span class="">554,286</span></p>
<p><span class="category-title">추천</span><span class="">21,289</span></p>
</div>
<div class="counter-line-b">
<p>
<span class="category-title">인생픽</span>
<span class="">공개전</span>
<button class="btn-pick" onclick="pick_btn();">픽하기</button>
</p>
</div>
</div>
<!--PC정보//태그, 시놉시스-->
<div class="mobile_hidden">
<div class="ep-info-line epnew-tag">
<p class="writer-tag">
<span class="tag"
onclick="$('.loads').show();location='/search/hash/date/1/%ED%8C%90%ED%83%80%EC%A7%80';">#판타지</span>
<span class="tag"
onclick="$('.loads').show();location='/search/hash/date/1/%ED%95%98%EB%A0%98';">#하렘</span>
<span class="tag"
onclick="$('.loads').show();location='/search/hash/date/1/%EC%B2%9C%EC%9E%AC';">#천재</span>
<span class="tag"
onclick="$('.loads').show();location='/search/hash/date/1/%EC%A7%91%EC%B0%A9';">#집착</span>
<span class="tag"
onclick="$('.loads').show();location='/search/hash/date/1/%ED%9B%84%ED%9A%8C';">#후회</span>
<span class="tag"
onclick="$('.loads').show();location='/search/hash/date/1/%ED%94%BC%ED%8F%90';">#피폐</span>
<span class="tag"
onclick="$('.loads').show();location='/search/hash/date/1/%EC%84%B1%EC%9E%A5';">#성장</span>
<span class="tag"
onclick="$('.loads').show();location='/search/hash/date/1/%EC%B2%AD%ED%98%BC';">#청혼</span>
<span class="tag"
onclick="$('.loads').show();location='/search/hash/date/1/%EC%88%9C%EC%95%A0';">#순애</span>
<span class="tag"
onclick="$('.loads').show();location='/search/hash/date/1/%EA%B7%BC%EC%B9%9C';">#근친</span>
</p>
<p class="my-tag">
<span class="tag more" onclick="$('#user_tag_add').modal('show');">+나만의태그 추가</span>
</p>
</div>
<div class="info-graybox">
<div class="info-count2">
<p><img class="s-icon" src="//images.novelpia.com/img/new/common/ep_s_icon_like.svg"
alt="선호"><span class="category-title">선호</span><span
class="writer-name">5,680</span></p>
<p><img class="s-icon" src="//images.novelpia.com/img/new/common/ep_s_icon_alarm.svg"
alt="알람"><span class="category-title">알람</span><span class="writer-name">688</span>
</p>
<p><img class="s-icon" src="//images.novelpia.com/img/new/common/ep_s_icon_episode.svg"
alt="회차"><span class="category-title">회차</span><span class="writer-name">71회차</span>
</p>
</div>
<div class="synopsis">최종보스를 성노예로 샀는데, 나에게 집착한다. 강제로 살리고 청혼을 할 정도로.</div>
</div>
<div class="epnew-pc-btn-area">
<button class="btn-view-run" onclick="$('.loads').show();location='/viewer/3120431';">첫 화
무료보기</button>
</div>
</div>
</div>
</div>
<!--모바일 정보//태그, 시놉시스-->
<div class="novel-info-mobile-wrapper mobile_show">
<div class="ep-info-line epnew-tag s_inv">
<p class="writer-tag">
<span class="tag"
onclick="$('.loads').show();location='/search/hash/date/1/%ED%8C%90%ED%83%80%EC%A7%80';">#판타지</span>
<span class="tag"
onclick="$('.loads').show();location='/search/hash/date/1/%ED%95%98%EB%A0%98';">#하렘</span>
<span class="tag"
onclick="$('.loads').show();location='/search/hash/date/1/%EC%B2%9C%EC%9E%AC';">#천재</span>
<span class="tag"
onclick="$('.loads').show();location='/search/hash/date/1/%EC%A7%91%EC%B0%A9';">#집착</span>
<span class="tag"
onclick="$('.loads').show();location='/search/hash/date/1/%ED%9B%84%ED%9A%8C';">#후회</span>
<span class="tag"
onclick="$('.loads').show();location='/search/hash/date/1/%ED%94%BC%ED%8F%90';">#피폐</span>
<span class="tag"
onclick="$('.loads').show();location='/search/hash/date/1/%EC%84%B1%EC%9E%A5';">#성장</span>
<span class="tag"
onclick="$('.loads').show();location='/search/hash/date/1/%EC%B2%AD%ED%98%BC';">#청혼</span>
<span class="tag"
onclick="$('.loads').show();location='/search/hash/date/1/%EC%88%9C%EC%95%A0';">#순애</span>
<span class="tag"
onclick="$('.loads').show();location='/search/hash/date/1/%EA%B7%BC%EC%B9%9C';">#근친</span>
</p>
<p class="my-tag">
<span class="tag more" onclick="$('#user_tag_add').modal('show');">+나만의태그 추가</span>
</p>
</div>
<div class="info-graybox s_inv">
<div class="info-count2">
<p><img class="s-icon" src="//images.novelpia.com/img/new/common/ep_s_icon_like.svg" alt="선호"><span
class="category-title">선호</span><span class="gray-txt">5,680</span></p>
<p><img class="s-icon" src="//images.novelpia.com/img/new/common/ep_s_icon_alarm.svg" alt="알람"><span
class="category-title">알람</span><span class="gray-txt">688</span></p>
<p><img class="s-icon" src="//images.novelpia.com/img/new/common/ep_s_icon_episode.svg"
alt="회차"><span class="category-title">회차</span><span class="gray-txt">71회차</span></p>
</div>
<div class="synopsis active">
<div class="synopsis-story">
최종보스를 성노예로 샀는데, 나에게 집착한다. 강제로 살리고 청혼을 할 정도로. </div>
<span class="more-synopsis" onclick="$(this).closest('.synopsis').removeClass('active')">+더보기</span>
</div>
</div>
<div class="epnew-mobile-btn-area-relative s_inv">
</div>
<div class="btn-view-episode mobile_show" onclick="$('.loads').show();location='/viewer/3120431';">
<div class="bg-black">
<p class="ep-thumb">
<img src="//images.novelpia.com/imagebox/cover/c39e6f8d86d71086ccd128a3db4f8a81_434662_ori.file"
onerror="this.src='//images.novelpia.com/img/layout/readycover4.png';">
</p>
<p class="ep-view-txt">
<span class="ep-number"></span>
<span class="ep-view">첫 화 무료보기</span>
</p>
</div>
</div>
</div>
<div id="sns_share_modal" class="detail-modal-background s_inv">
<div class="common-layer-wrapper">
<div class="close-x" data-dismiss="modal"></div>
<p class="layer-body-tit noimg">
<span class="parenthesis">[</span>
<span class="share-nov-tit">최종보스를 성노예로 샀는데, 집착한다.</span>
<span class="parenthesis">]</span>
<span>공유하기</span>
</p>
<div class="sns-list">
<!--<div>
<a href="#" onclick="javascript:window.open('https://story.kakao.com/s/share?url=' +encodeURIComponent(document.URL), 'kakaostorysharedialog', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes, height=400,width=600');return false;" target="_blank" alt="Share on kakaostory">
<img class="s_inv" src="//images.novelpia.com/img/icon/svg/share_kakao.svg" width="30" alt="카카오스토리 공유하기">
</a>
</div>-->
<!--블로그-->
<!-- <div>
<a href="#" onclick="javascript:window.open('https://share.naver.com/web/shareView.nhn?url=' +encodeURIComponent(document.URL)+'&title='+encodeURIComponent(document.title), 'naversharedialog', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;" target="_blank" alt="Share on Naver" >
<img class="s_inv" src="//images.novelpia.com/img/icon/svg/share_naver.svg" alt="네이버 블로그 공유하기">
<p class="sns-name">네이버</p>
</a>
</div> -->
<div>
<a href="#" onclick="shareNaver(document.URL, document.title)" alt="Share on Naver">
<img class="s_inv" src="//images.novelpia.com/img/icon/svg/share_naver.svg"
alt="네이버 블로그 공유하기">
<p class="sns-name">네이버</p>
</a>
</div>
<!--카카토옥-->
<div>
<a href="#" onclick="shareKatalk();" alt="Share on Kakao">
<img class="s_inv" src="//images.novelpia.com/img/icon/svg/share_kakaotalk.svg"
alt="카카오톡 공유하기">
<p class="sns-name">카카오</p>
</a>
</div>
<!-- <div>
<a href="#" onclick="javascript:window.open('https://share.naver.com/web/shareView.nhn?url=' +encodeURIComponent(document.URL)+'&title='+encodeURIComponent(document.title), 'naversharedialog', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;" target="_blank" alt="Share on Naver" >
<img class="s_inv" src="//images.novelpia.com/img/icon/svg/share_kakaotalk.svg" alt="네이버 블로그 공유하기">
<p class="sns-name">카카오</p>
</a>
</div> -->
<!-- x -->
<!-- <div>
<a href="#" onclick="javascript:window.open('https://twitter.com/intent/tweet?text=[%EA%B3%B5%EC%9C%A0]%20' +encodeURIComponent(document.URL)+'%20-%20'+encodeURIComponent(document.title), 'twittersharedialog', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;" target="_blank" alt="Share on Twitter" >
<img class="s_inv" src="//images.novelpia.com/img/icon/svg/share_tw.svg" alt="x 공유하기">
<p class="sns-name">X</p>
</a>
</div> -->
<div>
<a href="#" onclick="shareX(document.URL, document.title)" alt="Share on Twitter">
<img class="s_inv" src="//images.novelpia.com/img/icon/svg/share_tw.svg" alt="x 공유하기">
<p class="sns-name">X</p>
</a>
</div>
<!-- 페이스북 공유 -->
<!-- <div>
<a href="#" onclick="javascript:window.open('https://www.facebook.com/sharer/sharer.php?u=' +encodeURIComponent(document.URL)+'&t='+encodeURIComponent(document.title), 'facebooksharedialog', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;" target="_blank" alt="Share on Facebook" >
<img class="s_inv" src="//images.novelpia.com/img/icon/svg/share_facebook.svg" alt="페이스북 공유하기">
<p class="sns-name">페이스북</p>
</a>
</div> -->
<div>
<a href="#" onclick="shareFaceBook(document.URL, document.title)" alt="Share on Facebook">
<img class="s_inv" src="//images.novelpia.com/img/icon/svg/share_facebook.svg"
alt="페이스북 공유하기">
<p class="sns-name">페이스북</p>
</a>
</div>
<!-- 링크복사 -->
<div>
<img src="//images.novelpia.com/img/icon/svg/share_url.svg" width="30" alt="주소 복사하기"
onclick="copylink();" style="cursor:pointer;">
<p class="sns-name">링크복사</p>
</div>
<!-- 더보기 -->
<div class="mobile_show">
<img src="//images.novelpia.com/img/icon/svg/share_more2.svg" width="30" alt="주소 복사하기"
onclick="os_share(document.URL , document.title);" style="cursor:pointer;">
<p class="sns-name">더보기</p>
</div>
</div>
</div>
</div>
<!--리뷰 PC/모바일 공통 231018-->
<div class="eplist-novel-review s_inv">
<div class="eplist-sub-title">
우수 리뷰
<a href="/arena/all/1?flag=1" class="eplist-sub-more">더보기</a>
</div>
<!--작품 리뷰 & 마지막 보이는 박스-->
<div class="arrow arrow-left swiper-button-prev"><img
src="//images.novelpia.com/img/new/common/review_arrow_left.svg"></div>
<div class="arrow arrow-right swiper-button-next"><img
src="//images.novelpia.com/img/new/common/review_arrow_right.svg"></div>
<div class="swiper review-box-content">
<div class="review-box-wrapper swiper-wrapper"></div>
</div>
</div>
<link rel="stylesheet" href="/css/jquery.swiper.css">
<script src="/js/jquery.swiper.js"></script>
<style>
.menu_alarm_m .active {
background-color: #fff;
border-bottom: 1px solid #fff;
border-right: 1px solid #ddd;
border-left: 1px solid #ddd;
font-weight: 900;
user-select: none;
}
</style>
<input type="hidden" id="copy_data" name="copy_data" value="https://novelpia.com/novel/248128">
<div id="tab_top"></div>
<table
style="min-width:100%;line-height:48px;height:50px;border-top:1px solid #ddd;border-bottom:1px solid #ddd;background-color:#fafafa;user-select: none;position:sticky;top:100px;z-index:10;"
class=" menu_alarm_m mobile_show s_inv" cellpadding="0" cellspacing="0">
<tbody style="width: 100%;display: table;">
<tr>
<td style="width:2%;"></td>
<td style="width:32%;cursor:pointer;" class="active" id="episode_list_btn"
onclick="$('#episode_list_btn').addClass('active');$('#sponsor_list_btn').removeClass('active');$('#comment_list_btn').removeClass('active');$('#episode_list_box').show();$('#sponsor_list_box').hide();$('#comment_list_box').hide();$('html, body').scrollTop($('#tab_top').offset().top - 112);console.log($('#tab_top').offset().top - 112);">
<span>회차</span></td>
<td style="width:32%;cursor:pointer;" id="sponsor_list_btn"
onclick="$('#episode_list_btn').removeClass('active');$('#comment_list_btn').removeClass('active');$('#sponsor_list_btn').addClass('active');$('#episode_list_box').hide();$('#comment_list_box').hide();$('#sponsor_list_box').show();$('html, body').scrollTop($('#tab_top').offset().top - 112);">
<div>
<div style="display: flex;justify-content: center;align-items: center;gap: 6px;">
<div style="
background: #FFFFFF 0% 0% no-repeat padding-box;background: #FFFFFF 0% 0% no-repeat padding-box;
border: 1px dashed #B0B0D1;
width: 20px;
height: 20px;
border-radius: 30px;
"></div>
<div id="donationTab">후원</div>
<div style="position: relative; ">
</div>
</div>
</div>
</td>
<!-- 댓글 -->
<td style="width:32%;cursor:pointer;" id="comment_list_btn"
onclick="$('#episode_list_btn').removeClass('active');$('#sponsor_list_btn').removeClass('active');$('#comment_list_btn').addClass('active');$('#episode_list_box').hide();$('#sponsor_list_box').hide();$('#comment_list_box').show();if($('#comment_page').val() == '1'){comment_load();}">
<span>댓글</span></td>
<!-- -->
<td style="width:2%;"></td>
</tr>
</tbody>
</table>
<div class="am-mainpanel" style="max-width: 1200px;margin:0px auto 0px auto;">
<!-- <div class="am-pagetitle">
</div>--><!-- am-pagetitle -->
<div style="width:100%;min-height:400px;overflow-x: hidden;" class="side_padding">
<script>
function episode_group_buy(novel_no) {
$.ajax({
data: { "novel_no": novel_no, "csrf": "" },
type: "POST",
url: "/proc/episode_group_buy",
cache: false,
success: function (data) {
$('#load_alert').html(data);
}
});
}
</script>
<div style="max-width:800px; overflow:hidden;">
<!--배너 CSS-->
<style>
.banner-box-wrapper div img {
border-radius: 5px;
}
.pagination-bullet {
position: absolute !important;
bottom: 20px !important;
left: 0 !important;
text-align: center !important;
z-index: 5 !important;
width: 100% !important;
height: 3px !important;
}
.swiper-pagination-bullet {
width: 22px !important;
height: 3px !important;
margin: 2px !important;
border-radius: 0 !important;
background: #fff;
opacity: 0.8 !important;
}
.swiper-pagination-bullet-active {
background: #7632ff;
opacity: 1 !important;
}
.novel_banner {
max-width: 800px;
}
.novel_banner img {
border-radius: 5px;
}
@media screen and (max-width: 891px) {
.novel_banner {
padding: 10px 10px 0 10px;
}
.pagination-bullet {
bottom: 18px !important;
height: 4px !important;
text-align: center !important;
padding-left: 0 !important;
}
.swiper-pagination-bullet {
width: 12px !important;
height: 2px !important;
margin: 1px !important;
}
}
</style>
</div>
<table style="width:100%;margin-bottom:30px;" id="episode_list_box">
<tr class="s_inv">
<td valign="top" style="width:800px;border-bottom:2px solid #000;height: 60px;">
<script>
$(function () {
m_resize();
get_novel_review_list(); check_like_novel();
check_alarm_novel();
});
$(window).resize(function () {
m_resize();
});
function m_resize() {
//console.log($(window).width());
if ($(window).width() > 874) { // PC
//console.log("!");
$(".m_hidden").css("display", "flex");
$(".m_show").css("display", "none");
} else { // MO
//console.log("@");
$(".m_hidden").css("display", "none");
$(".m_show").css("display", "flex");
}
}
function check_alarm_novel() {
let alarm_idx = Number("");
if (alarm_idx > 0) {
$('.sbm_icon_alert').attr("src", "//images.novelpia.com/img/new/navi/sbm_icon_alert_active.svg");
}
}
function check_like_novel() {
let like_idx = Number("");
if (like_idx > 0) {
$('.sbm_icon_heart').attr("src", "//images.novelpia.com/img/new/navi/sbm_icon_heart_active.svg");
}
}
</script>
<div class="mobile_hidden eplist-sub-title">회차리스트
<div
style="height:70px;line-height:70px;float:right;display:flex;justify-content:space-between;align-items:center;">
<div onclick="episode_sort('up');" class="toggle_sort"
style="display: inline-block;">
<span
style="font-weight: 600;font-size: 16px;padding-right: 3px;cursor: pointer;">첫화부터</span>
<i style="display: inline-block;transform: rotate(90deg);font-size: 16px;cursor: pointer;"
class="icon ion-arrow-swap"></i>
</div>
<div id="writer_emoticon" class="writer_emoticon" @click="click"
v-show="buttonShow">
<img :src="imageUrl">
<p>작가티콘</p>
</div>
</div>
</div>
<div class="mobile_show" style="padding: 0 10px;">
<div id="writer_emoticon_mobile" class="writer_emoticon" @click="click"
v-show="buttonShow">
<img :src="imageUrl">
<p>작가티콘</p>
</div>
<div onclick="episode_sort('up');" class="toggle_sort"
style="height:33px;line-height:33px;float:right;display:flex;align-items:center;margin-top:9px;flex:none;margin-left:auto;">
<span
style="margin-left: auto;font-weight: 600;font-size: 14px;padding-right: 3px;">첫화부터</span>
<i style="display: inline-block;transform: rotate(90deg);font-size: 16px;"
class="icon ion-arrow-swap"></i>
</div>
</div>
</td>
<!-- -->
<td rowspan="2" style="padding-left:20px;" valign="top" class="mobile_hidden">
<div class="eplist-sub-title">작가 후원</div>
<div
style="border:1px solid #dddddd;background-color:#fbfbfb;width:100%;padding:20px;min-width: 340px;">
<div
style="display: flex;justify-content: space-between;background: #F3F3F9 0% 0% no-repeat padding-box;border: 1px solid #DCDCED;border-radius: 5px; padding: 10px; font-weight: bold;margin-bottom: 10px;">
<div style="display: flex;gap: 5px">
<div style="
background: #FFFFFF 0% 0% no-repeat padding-box;background: #FFFFFF 0% 0% no-repeat padding-box;
border: 1px dashed #B0B0D1;
width: 20px;
height: 20px;
border-radius: 30px;
"></div>
내 누적 후원 코인
<img src="" />
</div>
<div>
<span style="color:#7632FF">0</span> 코인
</div>
</div>
<table style="width:100%;">
<tr>
<td style="width:100%;">
<div style="background-color:#291c58;color:#fff;width:100%;line-height:40px;margin-top:5px;text-align:center;cursor:pointer;"
class="s_inv" onclick="open_donation_modal();">
작가후원하기
</div>
</td>
<td style="width:100%;">
</td>
</tr>
</table>
<table style="width:100%;margin:10px 0px;">
<tr style="height:40px;">
<td style="text-align: center;width:50%;">
<div style="line-height: 40px; border: 1px solid #ccc; border-radius: 10px;margin:0px 3px;cursor:pointer;"
id="donation_btn1"
onclick="$('#donation_board2').hide();$('#donation_board1').show();$('#donation_btn1').css('border', '1px solid #ccc');$('#donation_btn2').css('border', '1px solid #eee');">
최근 30일</div>
</td>
<td style="text-align: center;width:50%;">
<div style="line-height: 40px; border: 1px solid #eee; border-radius: 10px;margin:0px 3px;cursor:pointer;"
id="donation_btn2"
onclick="$('#donation_board1').hide();$('#donation_board2').show();$('#donation_btn1').css('border', '1px solid #eee');$('#donation_btn2').css('border', '1px solid #ccc');">
누적 후원</div>
</td>
</tr>
</table>
<style>
#donation_board1 tr td,
#donation_board2 tr td,
#donation_board1_m tr td,
#donation_board2_m tr td {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
#donation_board1 tr td:nth-child(1),
#donation_board2 tr td:nth-child(1),
#donation_board1_m tr td:nth-child(1),
#donation_board2_m tr td:nth-child(1) {
width: 20%;
max-width: 40px;
}
#donation_board1 tr td:nth-child(2),
#donation_board2 tr td:nth-child(2),
#donation_board1_m tr td:nth-child(2),
#donation_board2_m tr td:nth-child(2) {
width: 40%;
max-width: 188px;
}
#donation_board1 tr td:nth-child(3),
#donation_board2 tr td:nth-child(3),
#donation_board1_m tr td:nth-child(3),
#donation_board2_m tr td:nth-child(3) {
width: 40%;
}
</style>
<table style="width:100%;" id="donation_board1">
<tr style="height:100%;">
<td colspan="4" style="text-align:center;line-height:40px;">후원된 내역이 없습니다.</td>
</tr>
<tfoot>
<tr>
<td colspan="3">
<button type="button" class="btn btn-default "
style="width:100% ; margin-top:20px; background:#fff; color:#000; border:1px solid #ddd;"
id="rank_30_more_btn">
더보기
</button>
</td>
</tr>
</tfoot>
</table>
<table style="width:100%;display:none;" id="donation_board2">
<tr style="height:100%;font-weight: 800;color:#ce35a6; " class="rank_group_0">
<td style="padding:10px 4px;text-align:center;width:40px;">1위</td>
<td style="padding:10px 4px;"><img
src='//images.novelpia.com/img/new/icon/diamond.gif'
style='vertical-align: text-middle;height:18px;' class='s_inv'
title='최종오의' onclick="alert('최종오의(PLUS 연속 정기결제 810일 - 다이아뱃지)');"> <img
src='//images.novelpia.com/img/new/icon/episode_cnt_03.png'
style='vertical-align: text-middle;height:18px;' class='s_inv'
title='단행본' onclick="alert('단행본(소설 30,000편 이상 읽음)');"> <img
src='//images.novelpia.com/img/new/icon/5e164a1315acb3ef4ee00605d783b888'
style='vertical-align: text-middle;height:18px;' class='s_inv'
title='학사모' onclick="alert('학사모(밀리언 클래스 1빙고 달성 보상)');"> <b
style='cursor:pointer;font-weight:500;'
onclick="location='/user/672454';">Ignis</b></td>
<td style="padding:10px 4px;text-align:right;">500 코인</td>
</tr>
<tr style="height:100%;font-weight: 800;color:#5635ce; " class="rank_group_0">
<td style="padding:10px 4px;text-align:center;width:40px;">2위</td>
<td style="padding:10px 4px;"><img
src='//images.novelpia.com/img/new/icon/diamond.gif'
style='vertical-align: text-middle;height:18px;' class='s_inv'
title='최종오의' onclick="alert('최종오의(PLUS 연속 정기결제 810일 - 다이아뱃지)');"> <img
src='//images.novelpia.com/img/new/icon/sponsor2.png'
style='vertical-align: text-middle;height:18px;' class='s_inv'
title='심폐소생기' onclick="alert('심폐소생기(최초 후원)');"> <b
style='cursor:pointer;font-weight:500;'
onclick="location='/user/1018282';">SUNHYUK</b></td>
<td style="padding:10px 4px;text-align:right;">310 코인</td>
</tr>
<tr style="height:100%;font-weight: 800;color:#5635ce; " class="rank_group_0">
<td style="padding:10px 4px;text-align:center;width:40px;">3위</td>
<td style="padding:10px 4px;"><img
src='//images.novelpia.com/img/new/icon/7573ecc2c169bc6460fea01de87cec72'
style='vertical-align: text-middle;height:18px;' class='s_inv'
title='9급 요원' onclick="alert('9급 요원(이세계 노벨피아 시즌4 ~100000등)');"> <img
src='//images.novelpia.com/img/new/icon/bc90a9dc0f18c293ea09908178d44eab'
style='vertical-align: text-middle;height:18px;' class='s_inv'
title='절정 고수' onclick="alert('절정 고수(이세계 노벨피아 시즌2 상위 30%)');"> <img
src='//images.novelpia.com/img/new/icon/495a96bc68145449975cd754de4c60ca'
style='vertical-align: text-middle;height:18px;' class='s_inv'
title='요원' onclick="alert('요원(이세계 노벨피아 시즌4 참가)');"> <b
style='cursor:pointer;font-weight:500;'
onclick="location='/user/364037';">티모크림빵</b></td>
<td style="padding:10px 4px;text-align:right;">200 코인</td>
</tr>
<tr style="height:100%;font-weight: 800;color:#5635ce; " class="rank_group_0">
<td style="padding:10px 4px;text-align:center;width:40px;">4위</td>
<td style="padding:10px 4px;"><img
src='//images.novelpia.com/img/new/icon/4b371e675d2fe1ef473be549815d23c9'
style='vertical-align: text-middle;height:18px;' class='s_inv'
title='안녕 병아리 모자' onclick="alert('안녕 병아리 모자(본인인증+마케팅수신동의 시 지급)');"> <img
src='//images.novelpia.com/img/new/icon/0d60a0a40f248d9398405eb95c8df114'
style='vertical-align: text-middle;height:18px;' class='s_inv'
title='통통 병아리 모자' onclick="alert('통통 병아리 모자(본인인증 시 지급)');"> <b
style='cursor:pointer;font-weight:500;'
onclick="location='/user/2657911';">하렘뽀이</b></td>
<td style="padding:10px 4px;text-align:right;">140 코인</td>
</tr>
<tr style="height:100%;font-weight: 800;color:#5635ce; " class="rank_group_0">
<td style="padding:10px 4px;text-align:center;width:40px;">5위</td>
<td style="padding:10px 4px;"><img
src='//images.novelpia.com/img/new/icon/0d60a0a40f248d9398405eb95c8df114'
style='vertical-align: text-middle;height:18px;' class='s_inv'
title='통통 병아리 모자' onclick="alert('통통 병아리 모자(본인인증 시 지급)');"> <b
style='cursor:pointer;font-weight:500;'
onclick="location='/user/2338694';">연독전문</b></td>
<td style="padding:10px 4px;text-align:right;">140 코인</td>
</tr>
<tr style="height:100%; display: none ; " class="rank_group_1">
<td style="padding:10px 4px;text-align:center;width:40px;">6위</td>
<td style="padding:10px 4px;"><b style='cursor:pointer;font-weight:500;'
onclick="location='/user/699157';">_941</b></td>
<td style="padding:10px 4px;text-align:right;">100 코인</td>
</tr>
<tr style="height:100%; display: none ; " class="rank_group_1">
<td style="padding:10px 4px;text-align:center;width:40px;">7위</td>
<td style="padding:10px 4px;"><b style='cursor:pointer;font-weight:500;'
onclick="location='/user/325016';">dangerousB</b></td>
<td style="padding:10px 4px;text-align:right;">100 코인</td>
</tr>
<tr style="height:100%; display: none ; " class="rank_group_1">
<td style="padding:10px 4px;text-align:center;width:40px;">8위</td>
<td style="padding:10px 4px;"><img
src='//images.novelpia.com/img/new/icon/diamond.gif'
style='vertical-align: text-middle;height:18px;' class='s_inv'
title='최종오의' onclick="alert('최종오의(PLUS 연속 정기결제 810일 - 다이아뱃지)');"> <img
src='//images.novelpia.com/img/new/icon/1000.png'
style='vertical-align: text-middle;height:18px;' class='s_inv'
title='창설후원자1000인' onclick="alert('창설후원자1000인(창설후원자1000인)');"> <b
style='cursor:pointer;font-weight:500;'
onclick="location='/user/3590';">음습한새</b></td>
<td style="padding:10px 4px;text-align:right;">100 코인</td>
</tr>
<tr style="height:100%; display: none ; " class="rank_group_1">
<td style="padding:10px 4px;text-align:center;width:40px;">9위</td>
<td style="padding:10px 4px;"><img
src='//images.novelpia.com/img/new/icon/9fc300f9682782d56d7bc1a53548a96d'
style='vertical-align: text-middle;height:18px;' class='s_inv'
title='VVIP' onclick="alert('VVIP(PLUS 연속 정기결제 1350일 - VVIP뱃지)');"> <img
src='//images.novelpia.com/img/new/icon/49b8ffca09d77a71e52b18c3099e114d'
style='vertical-align: text-middle;height:18px;' class='s_inv'
title='감사합니다. 대협.' onclick="alert('감사합니다. 대협.(의리를 지켜주신 대협들)');"> <img
src='//images.novelpia.com/img/new/icon/7aac1601da7599943c4d3b34b9ae38d7'
style='vertical-align: text-middle;height:18px;' class='s_inv'
title='2025 APP 보너스 뱃지'
onclick="alert('2025 APP 보너스 뱃지(2025 앱 이벤트 12회 보너스 보상)');"> <b
style='cursor:pointer;font-weight:500;'
onclick="location='/user/22230';">르말랭남편</b></td>
<td style="padding:10px 4px;text-align:right;">100 코인</td>
</tr>
<tr style="height:100%; display: none ; " class="rank_group_1">
<td style="padding:10px 4px;text-align:center;width:40px;">10위</td>
<td style="padding:10px 4px;"><img
src='//images.novelpia.com/img/new/icon/episode_cnt_03.png'
style='vertical-align: text-middle;height:18px;' class='s_inv'
title='단행본' onclick="alert('단행본(소설 30,000편 이상 읽음)');"> <img
src='//images.novelpia.com/img/new/icon/diamond.gif'
style='vertical-align: text-middle;height:18px;' class='s_inv'
title='최종오의' onclick="alert('최종오의(PLUS 연속 정기결제 810일 - 다이아뱃지)');"> <img
src='//images.novelpia.com/img/new/icon/7aac1601da7599943c4d3b34b9ae38d7'
style='vertical-align: text-middle;height:18px;' class='s_inv'
title='2025 APP 보너스 뱃지'
onclick="alert('2025 APP 보너스 뱃지(2025 앱 이벤트 12회 보너스 보상)');"> <b
style='cursor:pointer;font-weight:500;'
onclick="location='/user/262513';">잠이좋다</b></td>
<td style="padding:10px 4px;text-align:right;">100 코인</td>
</tr>
<tr style="height:100%; display: none ; " class="rank_group_2">
<td style="padding:10px 4px;text-align:center;width:40px;">11위</td>
<td style="padding:10px 4px;"><img
src='//images.novelpia.com/img/new/icon/649be59e6cf91ff3f338f08242b1cb17'
style='vertical-align: text-middle;height:18px;' class='s_inv'
title='미령의 헤드셋' onclick="alert('미령의 헤드셋(창작물 속으로 굿즈 펀딩 달성)');"> <img
src='//images.novelpia.com/img/new/icon/4a83d26e9378e1bb65d27c2871d76106'
style='vertical-align: text-middle;height:18px;' class='s_inv'
title='엘레나의 푸른 나비' onclick="alert('엘레나의 푸른 나비(창작물 속으로 굿즈 펀딩 달성)');">
<img src='//images.novelpia.com/img/new/icon/85ed0640ece571e13bd6744c566943a6'
style='vertical-align: text-middle;height:18px;' class='s_inv'
title='유리아의 메이드 머리 장식'
onclick="alert('유리아의 메이드 머리 장식(창작물 속으로 굿즈 펀딩 달성)');"> <b
style='cursor:pointer;font-weight:500;'
onclick="location='/user/55034';">야광개구리</b></td>
<td style="padding:10px 4px;text-align:right;">74 코인</td>
</tr>
<tr style="height:100%; display: none ; " class="rank_group_2">
<td style="padding:10px 4px;text-align:center;width:40px;">12위</td>
<td style="padding:10px 4px;"><b style='cursor:pointer;font-weight:500;'
onclick="location='/user/40840';">Liosy</b></td>
<td style="padding:10px 4px;text-align:right;">55 코인</td>
</tr>
<tr style="height:100%; display: none ; " class="rank_group_2">
<td style="padding:10px 4px;text-align:center;width:40px;">13위</td>
<td style="padding:10px 4px;"><img
src='//images.novelpia.com/img/new/icon/0d60a0a40f248d9398405eb95c8df114'
style='vertical-align: text-middle;height:18px;' class='s_inv'
title='통통 병아리 모자' onclick="alert('통통 병아리 모자(본인인증 시 지급)');"> <b
style='cursor:pointer;font-weight:500;'
onclick="location='/user/2121074';">내품속에사표</b></td>
<td style="padding:10px 4px;text-align:right;">50 코인</td>
</tr>
<tr style="height:100%; display: none ; " class="rank_group_2">
<td style="padding:10px 4px;text-align:center;width:40px;">14위</td>
<td style="padding:10px 4px;">비공개</td>
<td style="padding:10px 4px;text-align:right;">50 코인</td>
</tr>
<tr style="height:100%; display: none ; " class="rank_group_2">
<td style="padding:10px 4px;text-align:center;width:40px;">15위</td>
<td style="padding:10px 4px;"><b style='cursor:pointer;font-weight:500;'
onclick="location='/user/86719';">희생</b></td>
<td style="padding:10px 4px;text-align:right;">50 코인</td>
</tr>
<tr style="height:100%; display: none ; " class="rank_group_3">
<td style="padding:10px 4px;text-align:center;width:40px;">16위</td>
<td style="padding:10px 4px;"><img
src='//images.novelpia.com/img/new/icon/3f8e83aebced277da2f0805d6ba24a8c'
style='vertical-align: text-middle;height:18px;' class='s_inv'
title='용사 파티 때려치웁니다'
onclick="alert('용사 파티 때려치웁니다(용사 파티 때려치웁니다 직소퍼즐 펀딩 보상)');"> <img
src='//images.novelpia.com/img/new/icon/episode_cnt_03.png'
style='vertical-align: text-middle;height:18px;' class='s_inv'
title='단행본' onclick="alert('단행본(소설 30,000편 이상 읽음)');"> <img
src='//images.novelpia.com/img/new/icon/diamond.gif'
style='vertical-align: text-middle;height:18px;' class='s_inv'
title='최종오의' onclick="alert('최종오의(PLUS 연속 정기결제 810일 - 다이아뱃지)');"> <b
style='cursor:pointer;font-weight:500;'
onclick="location='/user/252317';">탈주닌자미르</b></td>
<td style="padding:10px 4px;text-align:right;">50 코인</td>
</tr>
<tr style="height:100%; display: none ; " class="rank_group_3">
<td style="padding:10px 4px;text-align:center;width:40px;">17위</td>
<td style="padding:10px 4px;"><img
src='//images.novelpia.com/img/new/icon/diamond.gif'
style='vertical-align: text-middle;height:18px;' class='s_inv'
title='최종오의' onclick="alert('최종오의(PLUS 연속 정기결제 810일 - 다이아뱃지)');"> <img
src='//images.novelpia.com/img/new/icon/platinum.gif'
style='vertical-align: text-middle;height:18px;' class='s_inv'
title='플래티넘 뱃지' onclick="alert('플래티넘 뱃지(PLUS 연속 정기결제 450일 - 플래티넘뱃지)');">
<img src='//images.novelpia.com/img/new/icon/episode_cnt_03.png'
style='vertical-align: text-middle;height:18px;' class='s_inv'
title='단행본' onclick="alert('단행본(소설 30,000편 이상 읽음)');"> <b
style='cursor:pointer;font-weight:500;'
onclick="location='/user/92844';">뭐든푹먹</b></td>
<td style="padding:10px 4px;text-align:right;">50 코인</td>
</tr>
<tr style="height:100%; display: none ; " class="rank_group_3">
<td style="padding:10px 4px;text-align:center;width:40px;">18위</td>
<td style="padding:10px 4px;"><img
src='//images.novelpia.com/img/new/icon/3dd6a0b49c6708ed90f9a4476664ecef'
style='vertical-align: text-middle;height:18px;' class='s_inv'
title='F급 헌터' onclick="alert('F급 헌터(이세계 노벨피아 이벤트 F급 달성)');"> <img
src='//images.novelpia.com/img/new/icon/0f685df15e8d5db13549bf896cb88092'
style='vertical-align: text-middle;height:18px;' class='s_inv'
title='헌터 자격증' onclick="alert('헌터 자격증(이세계 노벨피아 이벤트 참여)');"> <img
src='//images.novelpia.com/img/new/icon/4ce8b843ea50d50c707c70776e79d9cd'
style='vertical-align: text-middle;height:18px;' class='s_inv'
title='삼류 무인' onclick="alert('삼류 무인(이세계 노벨피아 시즌2 상위 100%)');"> <b
style='cursor:pointer;font-weight:500;'
onclick="location='/user/215371';">현혼</b></td>
<td style="padding:10px 4px;text-align:right;">50 코인</td>
</tr>
<tr style="height:100%; display: none ; " class="rank_group_3">
<td style="padding:10px 4px;text-align:center;width:40px;">19위</td>
<td style="padding:10px 4px;">비공개</td>
<td style="padding:10px 4px;text-align:right;">30 코인</td>
</tr>
<tr style="height:100%; display: none ; " class="rank_group_3">
<td style="padding:10px 4px;text-align:center;width:40px;">20위</td>
<td style="padding:10px 4px;"><img
src='//images.novelpia.com/img/new/icon/first_plus.png'
style='vertical-align: text-middle;height:18px;' class='s_inv'
title='공허의유산' onclick="alert('공허의유산(PLUS 연속 정기결제 270일 - 금뱃지)');"> <img
src='//images.novelpia.com/img/new/icon/platinum.gif'
style='vertical-align: text-middle;height:18px;' class='s_inv'
title='플래티넘 뱃지' onclick="alert('플래티넘 뱃지(PLUS 연속 정기결제 450일 - 플래티넘뱃지)');">
<b style='cursor:pointer;font-weight:500;'
onclick="location='/user/988057';">CROW_425</b></td>
<td style="padding:10px 4px;text-align:right;">30 코인</td>
</tr>
<tfoot>
<tr>
<td colspan="3">
<button type="button" class="btn btn-default "
style="width:100% ; margin-top:20px; background:#fff; color:#000; border:1px solid #ddd;"
id="rank_more_btn">
더보기
</button>
</td>
</tr>
</tfoot>
</table>
</div>
<!-- 구 작품 리스트 -->
<!-- 개편된 추천 작품 리스트 -->
<div style="display: none; " id="writer_other_novel">
<div class="eplist-sub-title">작가의 다른작품</div>
<div style="border:1px solid #dddddd;background-color:#fbfbfb;width:100%;padding:20px;">
<table style="width:100%;">
<tbody id="writer_other_novel_list">
</tbody>
<tfoot>
<tr>
<td colspan="2">
<button type="button" class="btn btn-default"
style="width: 100%; margin-top:20px; background:#fff; color:#000;"
id="writer_other_novel_btn">더보기</button>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
<!-- // 구 작품 리스트 -->
<!--추천 작품 -->
<div style="display: block; " id="novel_curation_box">
<div class="eplist-sub-title">추천 작품</div>
<div style="border:1px solid #dddddd;background-color:#fbfbfb;width:100%;padding:20px;">
<table style="width:100%;">
<tbody id="novel_curation_list">
</tbody>
<tfoot>
<tr>
<td colspan="2">
<button type="button" class="btn btn-default novel_curation_btn"
style="width:100% ; margin-top:20px; background:#fff; color:#000; border:1px solid #ddd;">더보기</button>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
</td>
</tr>
<script>
// 작가의 다른 작품 보기
(function () {
const g_writer_mem_no = '2301642';
const g_novel_no = 248128;
let g_page = 1;
const jquery_ev_init = () => {
$("#writer_other_novel_btn").off();
$("#writer_other_novel_btn").click(fn_jquery_ev_obj.writer_other_novel);
};
const fn_jquery_ev_obj = {
"writer_other_novel": function () {
g_page++;
fn_obj.list(g_page);
}
}
const fn_obj = {
list: function (page) {
const mem_no = g_writer_mem_no;
const novel_no = g_novel_no;
const cover_view = $.cookie('COVER_VIEW') || "ON";
const is_cover = cover_view != "OFF";
const fn_make_html = (data) => {
const { writer_other_novel = {} } = data;
let { is_next_page = false, list = [] } = writer_other_novel;
if (list.length == 0) {
return "";
}
let html = R.pipe(
R.map((item) => {
const {
is_monopoly = 0,
main_genre = 0,
novel_genre = "",
novel_name = "",
novel_no = 0,
writer_nick = "",
novel_type = 0,
novel_age = 0
} = item;
let { novel_thumb = "" } = item;
const novel_genre_json = novel_genre ? JSON.parse(novel_genre) : [];
const novel_genre_html = R.pipe(
R.slice(0, 3),
R.map((val) => {
const result = `
<span style="font-size:12px; font-weight:normal; display:inline-block; padding:3px 5px; background:#f2f2f2; margin-right:2px; color:#666; text-align:center; margin-top:35px;">
#${val}
</span>
`;
return result;
}),
R.join("")
)(novel_genre_json);
const monopoly_html = is_monopoly == 1 ? `<span class="b_mono s_inv">독점</span>` : "";
const plus_html = novel_type == 1 ? `<span class="b_plus s_inv">PLUS</span>` : `<span class="b_free s_inv">자유</span>`;
const adult_novel_html = 19 <= novel_age ? `<span class="b_19 s_inv">19</span>` : "";
const tag_arr = [adult_novel_html, plus_html, monopoly_html];
const tag_html = R.pipe(
R.filter((item) => { return item != "" }),
R.join("&nbsp;")
)(tag_arr);
return `
<tr style="cursor:pointer;" onclick="$('.loads').show();location='/novel/${novel_no}';">
<td style="width:100px;">
<img class="s_inv" src="${novel_thumb}" onerror="this.src='/img/layout/readycover4.png';" style="height:110px;width:80px;background-position:center;">
</td>
<td valign="top" style="font-weight:600;font-size:16px; position:relative;">
${novel_name}
<br>
${tag_html}
<br>
${novel_genre_html}
</td>
</tr>
`;
}),
R.join(`<tr><td style="height:15px;"></td></tr>`)
)(list);
if (!html) {
return;
}
if (g_page != 1) {
html = `<tr><td style="height:15px;"></td></tr>` + html;
}
if (!is_next_page) {
$("#writer_other_novel_btn").remove();
}
$("#writer_other_novel_list").append(html);
$("#writer_other_novel").show();
}
fn_ajax.writer_other_novel(mem_no, novel_no, page, fn_make_html);
},
};
const fn_ajax = {
writer_other_novel: function (mem_no, novel_no, page, callback) {
const data = {
"mem_no": mem_no,
"novel_no": novel_no,
"page": page,
"cmd": "writer_other_novel"
}
$.ajax({
data: data,
type: "get",
url: "/proc/novel_curation",
success: function (data) {
if (data.status != 200) {
const errmsg = data.errmsg || "연동 오류";
// alert(errmsg) ;
return;
}
if (typeof callback != "function") {
return;
}
callback(data);
}
});
}
};
const init = function () {
fn_obj.list(1);
jquery_ev_init();
}
init();
})();
// 추천 작품
(function () {
const g_main_genre = 1;
const g_novel_no = 248128;
const jquery_ev_init = function () {
$(document).off("click", ".novel_curation_btn");
$(document).on("click", ".novel_curation_btn", fn_jquery_ev_obj.novel_curation_btn);
}
const fn_jquery_ev_obj = {
novel_curation_btn: () => {
const main_genre = g_main_genre > 0 ? g_main_genre : 10;
location.href = "/plus/all/date/1/?main_genre=" + main_genre
}
};
const fn_obj = {
list: function () {
const main_genre = g_main_genre;
const novel_no = g_novel_no;
fn_ajax.novel_curation(novel_no, main_genre, function (data) {
fn_obj.web_make_html(data);
fn_obj.mobile_make_html(data);
});
},
web_make_html: (data) => {
const { curation_list = [] } = data;
if (curation_list.length == 0) {
$("#novel_curation_box").remove();
return;
}
const cover_view = $.cookie('COVER_VIEW') || "ON";
const is_cover = cover_view != "OFF";
const html = R.pipe(
R.map((item) => {
const {
is_monopoly = 0,
main_genre = 0,
novel_genre = "",
novel_name = "",
novel_no = 0,
writer_nick = "",
novel_type = 0,
novel_age = 0
} = item;
let { novel_thumb = "" } = item;
const novel_genre_json = novel_genre ? JSON.parse(novel_genre) : [];
const novel_genre_html = R.pipe(
R.slice(0, 3),
R.map((val) => {
const result = `
<span style="font-size:12px; font-weight:normal; display:inline-block; padding:3px 5px; background:#f2f2f2; margin-right:2px; color:#666; text-align:center; margin-top:35px;">
#${val}
</span>
`;
return result;
}),
R.join("")
)(novel_genre_json);
const monopoly_html = is_monopoly == 1 ? `<span class="b_mono s_inv">독점</span>` : "";
const plus_html = novel_type == 1 ? `<span class="b_plus s_inv">PLUS</span>` : `<span class="b_free s_inv">자유</span>`;
const adult_novel_html = 19 <= novel_age ? `<span class="b_19 s_inv">19</span>` : "";
const tag_arr = [adult_novel_html, plus_html, monopoly_html];
const tag_html = R.pipe(
R.filter((item) => { return item != "" }),
R.join("&nbsp;")
)(tag_arr);
return `
<tr style="cursor:pointer;" onclick="$('.loads').show();location='/novel/${novel_no}';">
<td style="width:100px;">
<img class="s_inv " src="${novel_thumb}" onerror="this.src='/img/layout/readycover4.png';" style="height:110px;width:80px;background-position:center;">
</td>
<td valign="top" style="font-weight:600;font-size:16px;">
${novel_name}
<br>
${tag_html}
<br>
<span style="color:red;">
${novel_genre_html}
</span>
</td>
</tr>
`;
}),
R.join(`<tr><td style="height:15px;"></td></tr>`)
)(curation_list);
$("#novel_curation_list").html(html);
},
mobile_make_html: (data) => {
const { curation_list = [] } = data;
if (curation_list.length == 0) {
$("#m_novel_curation_box").remove();
return;
}
const cover_view = $.cookie('COVER_VIEW') || "ON";
const is_cover = cover_view != "OFF";
const html = R.pipe(
R.map((item) => {
const {
is_monopoly = 0,
main_genre = 0,
novel_genre = "",
novel_name = "",
novel_no = 0,
writer_nick = "",
novel_type = 0,
novel_age = 0
} = item;
let { novel_thumb = "" } = item;
const monopoly_html = is_monopoly == 1 ? `<span class="b_mono s_inv">독점</span>` : "";
const plus_html = novel_type == 1 ? `<span class="b_plus s_inv">PLUS</span>` : `<span class="b_free s_inv">자유</span>`;
const adult_novel_html = 19 <= novel_age ? `<span class="b_19 s_inv">19</span>` : "";
const tag_arr = [adult_novel_html, plus_html, monopoly_html];
const tag_html = R.pipe(
R.filter((item) => { return item != "" }),
R.join("&nbsp;")
)(tag_arr);
let adult_mark_html = "";
if (19 <= novel_age) {
adult_mark_html = `<span class="novel_19">19</span>`;
} else if (15 == novel_age) {
adult_mark_html = `<span class="novel_15">15</span>`;
}
return `
<a href="/novel/${novel_no}" class="front-item">
<div class="curation" style="position: relative">
${adult_mark_html}
<img src="${novel_thumb}" class="s_inv">
<h4>${novel_name}</h4>
<p>${writer_nick}</p>
</div>
</a>
`;
}),
R.join(``)
)(curation_list);
$("#curation-box").html(html);
}
};
const fn_ajax = {
novel_curation: function (novel_no, main_genre, callback) {
const data = {
"cmd": "epi_list_curation",
"main_genre": main_genre,
"novel_no": novel_no
}
_dev.log(data);
$.ajax({
data: data,
type: "get",
url: "/proc/novel_curation",
success: function (data) {
if (data.status != 200) {
const errmsg = data.errmsg || "연동 오류";
// alert(errmsg) ;
return;
}
if (typeof callback != "function") {
return;
}
callback(data);
}
});
}
};
const init = function () {
fn_obj.list();
jquery_ev_init();
}
init();
})();
// rank 더보기
(function () {
let g_spon_rank_30_page = 1; // 작가 후원 최근 30일
let g_spon_rank_page = 1; // 누적 후원
const jquery_ev_init = function () {
// $("#rank_30_more_btn").click(fn_jquery_ev_obj.rank_30_more);
$(document).off("click", "#rank_more_btn");
$(document).on("click", "#rank_more_btn", fn_jquery_ev_obj.rank_more);
$(document).off("click", "#rank_30_more_btn");
$(document).on("click", "#rank_30_more_btn", fn_jquery_ev_obj.rank_30_more);
}
const fn_jquery_ev_obj = {
rank_30_more: function () {
let group = g_spon_rank_30_page;
let seletor = ".spon_rank_30_group_" + group;
const btn_seletor = "#rank_30_more_btn";
$(seletor).show();
group = Number(group) + 1;
seletor = ".spon_rank_30_group_" + group;
if ($(seletor).length == 0) {
$(btn_seletor).remove();
}
g_spon_rank_30_page = group;
},
rank_more: function () {
let group = g_spon_rank_page;
let seletor = ".rank_group_" + group;
const btn_seletor = "#rank_more_btn";
$(seletor).show();
group = Number(group) + 1;
seletor = ".rank_group_" + group;
if ($(seletor).length == 0) {
$(btn_seletor).remove();
}
g_spon_rank_page = group;
}
}
const init = function () {
jquery_ev_init();
}
init();
})();
$('.venobox').venobox({
framewidth: '', // default: ''
frameheight: '', // default: ''
border: '0', // default: '0'
bgcolor: '#000', // default: '#fff'
titleattr: 'data-title', // default: 'title'
numeratio: true, // default: false
infinigall: true, // default: false
share: ['download'] // default: []
});
</script>
<script>
const writer_emoticon = new Vue({
el: '#writer_emoticon',
data: () => {
return {
novel_no: 248128,
buttonShow: false,
emoticonStoreUrl: '/openstore_v2_detail/',
imageUrl: 'https://images.novelpia.com/img/new/writer_emoticon_icon.svg'
}
},
methods: {
getData: async function () {
const url = "/proc/emoticon_openstore";
const data = {
mode: "getWriterEmoticon",
novel_no: this.novel_no
}
const httpResult = await http("get", url, data);
if (httpResult.status === 500) {
return;
}
if (!httpResult.emoticon_group) {
return;
}
// 작가티콘 존재 여부
const existWriterEmoticon = httpResult.button_show;
// 작가티콘 구매 여부
const purchaseWriterEmoticon = await this.getMemberPurchaseEmoticon(httpResult.emoticon_group);
if (existWriterEmoticon === true && purchaseWriterEmoticon === false) {
this.buttonShow = true;
this.emoticonStoreUrl += `${httpResult.emoticon_group}`;
}
},
click: function () {
location.href = `${this.emoticonStoreUrl}`
},
getMemberPurchaseEmoticon: async function (emoticon_group) {
const url = "/proc/emoticon_openstore";
const data = {
mode: "getMemberPurchaseEmoticon",
emoticon_group,
}
const httpResult = await http("get", url, data);
const { button_show, status } = httpResult;
if (status !== 200) {
return false;
}
return button_show;
},
},
mounted: function () {
this.getData();
},
})
const writer_emoticon_mobile = new Vue({
el: '#writer_emoticon_mobile',
data: () => {
return {
novel_no: 248128,
buttonShow: false,
emoticonStoreUrl: '/openstore_v2_detail/',
imageUrl: 'https://images.novelpia.com/img/new/writer_emoticon_icon.svg'
}
},
methods: {
getData: async function () {
const url = "/proc/emoticon_openstore";
const data = {
mode: "getWriterEmoticon",
novel_no: this.novel_no
}
const httpResult = await http("get", url, data);
if (httpResult.status === 500) {
return;
}
if (!httpResult.emoticon_group) {
return;
}
// 작가티콘 존재 여부
const existWriterEmoticon = httpResult.button_show;
// 작가티콘 구매 여부
const purchaseWriterEmoticon = await this.getMemberPurchaseEmoticon(httpResult.emoticon_group);
if (existWriterEmoticon === true && purchaseWriterEmoticon === false) {
this.buttonShow = true;
this.emoticonStoreUrl += `${httpResult.emoticon_group}`;
}
},
click: function () {
location.href = `${this.emoticonStoreUrl}`
},
getMemberPurchaseEmoticon: async function (emoticon_group) {
const url = "/proc/emoticon_openstore";
const data = {
mode: "getMemberPurchaseEmoticon",
emoticon_group,
}
const httpResult = await http("get", url, data);
const { button_show, status } = httpResult;
if (status !== 200) {
return false;
}
return button_show;
},
},
mounted: function () {
this.getData();
},
})
</script>
<style>
/** pc화면 */
@media (min-width: 891px) {
.mobile_show {
display: none;
}
.writer_emoticon {
/* Layout Properties */
width: 97px;
height: 38px;
/* UI Properties */
background: #C8F2F9 0% 0% no-repeat padding-box;
border-radius: 5px;
opacity: 1;
display: flex;
justify-content: center;
align-items: center;
margin-left: 15px;
cursor: pointer;
}
.writer_emoticon p {
/* Layout Properties */
width: 45px;
height: 19px;
/* UI Properties */
font: normal normal bold 12px/17px Noto Sans KR;
letter-spacing: 0px;
color: #0F5C68;
opacity: 1;
/*margin-left: 5px;*/
}
.writer_emoticon img {
/* Layout Properties */
width: 20px;
height: 20px;
/* UI Properties */
opacity: 1;
margin-left: -4px;
}
}
/** 모바일 화면 */
@media (max-width: 891px) {
td .mobile_show {
display: flex;
justify-content: flex-start;
margin-bottom: 5px;
}
.writer_emoticon {
/* Layout Properties */
top: 447px;
left: 99px;
padding: 4px 8px;
height: 33px;
/* UI Properties */
background: #C8F2F9 0% 0% no-repeat padding-box;
border-radius: 5px;
opacity: 1;
display: flex;
justify-content: center;
align-items: center;
margin-top: 9px;
}
.writer_emoticon p {
/* Layout Properties */
top: 453px;
left: 130px;
height: 19px;
/* UI Properties */
text-align: left;
font: normal normal bold 12px/17px Noto Sans KR;
letter-spacing: 0px;
color: #0F5C68;
opacity: 1;
/*margin-left: 5px;*/
}
.writer_emoticon img {
/* Layout Properties */
top: 452px;
left: 107px;
width: 20px;
height: 20px;
/* UI Properties */
opacity: 1;
margin-left: -4px;
}
}
</style>
<tr>
<td valign="top">
<table style="width:100%;" class="notice_table s_inv">
<tr class="ep_style4" style="">
<td style="width:15px;" class="">
<div style="margin-left:5px;width:5px;height:65px;background-color:#eee"
novel_on_3330612"></div>
</td>
<td style="padding-left:5px;" class="font12"
onclick="$('.loads').show();location='/viewer/3330612';"><b>차기작! 공?지</b> <br>
<div style="padding: 2px 0px;border-radius: 10px;opacity:0.5;">
<font style="font-weight:300;" class="font11">
<span style="font-size:12px;color:#000;">
&nbsp;<i class="icon ion-android-people"></i> 461회&nbsp; &nbsp;<i
class="icon ion-chatbox-working"></i> 1개&nbsp; &nbsp;<i
class="icon ion-thumbsup"></i> 5회&nbsp;
</font>
</font>
</div>
</td>
<td class="ep_style3">
<font style="color:#999;font-size:11px;">공지시간</font><br><b>24.03.02</b>
</td>
</tr>
<script> if (localStorage['view_3330612'] > 0) { $('.novel_on_3330612').css('background-color', '#8463f5'); } </script>
<tr class="ep_style4" style="border-top:1px solid #EFEFEF;">
<td style="width:15px;" class="">
<div style="margin-left:5px;width:5px;height:65px;background-color:#eee"
novel_on_3216404"></div>
</td>
<td style="padding-left:5px;" class="font12"
onclick="$('.loads').show();location='/viewer/3216404';"><b>곧 50회차 기념 Q&A!!!</b>
<br>
<div style="padding: 2px 0px;border-radius: 10px;opacity:0.5;">
<font style="font-weight:300;" class="font11">
<span style="font-size:12px;color:#000;">
&nbsp;<i class="icon ion-android-people"></i> 351회&nbsp; &nbsp;<i
class="icon ion-chatbox-working"></i> 40개&nbsp; &nbsp;<i
class="icon ion-thumbsup"></i> 11회&nbsp;
</font>
</font>
</div>
</td>
<td class="ep_style3">
<font style="color:#999;font-size:11px;">공지시간</font><br><b>24.01.20</b>
</td>
</tr>
<script> if (localStorage['view_3216404'] > 0) { $('.novel_on_3216404').css('background-color', '#8463f5'); } </script>
<tr class="ep_style4" style="border-top:1px solid #EFEFEF;">
<td style="width:15px;" class="">
<div style="margin-left:5px;width:5px;height:65px;background-color:#eee"
novel_on_3174468"></div>
</td>
<td style="padding-left:5px;" class="font12"
onclick="$('.loads').show();location='/viewer/3174468';"><b>J컵 성치녀.</b> <i
class="icon ion-image"></i><br>
<div style="padding: 2px 0px;border-radius: 10px;opacity:0.5;">
<font style="font-weight:300;" class="font11">
<span style="font-size:12px;color:#000;">
&nbsp;<i class="icon ion-android-people"></i> 8,383회&nbsp; &nbsp;<i
class="icon ion-chatbox-working"></i> 26개&nbsp; &nbsp;<i
class="icon ion-thumbsup"></i> 56회&nbsp;
</font>
</font>
</div>
</td>
<td class="ep_style3">
<font style="color:#999;font-size:11px;">공지시간</font><br><b>24.01.05</b>
</td>
</tr>
<script> if (localStorage['view_3174468'] > 0) { $('.novel_on_3174468').css('background-color', '#8463f5'); } </script>
<tr class="notice_toggle_btn" onclick="notice_toggle();"
style="width: 100%;text-align: center;font-weight: 600;padding: 15px;background-color: #feffe5;border-bottom: 1px solid #f7f7f7;cursor: pointer;">
<td colspan="3" style="padding: 10px 0;"> 더보기 (8) <i
class="icon ion-android-arrow-down"></i></td>
</tr>
<tr class="ep_style4" style="border-top:1px solid #EFEFEF;display: none;">
<td style="width:15px;" class="">
<div style="margin-left:5px;width:5px;height:65px;background-color:#eee"
novel_on_3170126"></div>
</td>
<td style="padding-left:5px;" class="font12"
onclick="$('.loads').show();location='/viewer/3170126';"><b>대충 ㅈ된 상황(*유리아
일러스트에요!!!!)</b> <i class="icon ion-image"></i><br>
<div style="padding: 2px 0px;border-radius: 10px;opacity:0.5;">
<font style="font-weight:300;" class="font11">
<span style="font-size:12px;color:#000;">
&nbsp;<i class="icon ion-android-people"></i> 8,731회&nbsp; &nbsp;<i
class="icon ion-chatbox-working"></i> 20개&nbsp; &nbsp;<i
class="icon ion-thumbsup"></i> 83회&nbsp;
</font>
</font>
</div>
</td>
<td class="ep_style3">
<font style="color:#999;font-size:11px;">공지시간</font><br><b>24.01.03</b>
</td>
</tr>
<script> if (localStorage['view_3170126'] > 0) { $('.novel_on_3170126').css('background-color', '#8463f5'); } </script>
<tr class="ep_style4" style="border-top:1px solid #EFEFEF;display: none;">
<td style="width:15px;" class="">
<div style="margin-left:5px;width:5px;height:65px;background-color:#eee"
novel_on_3168106"></div>
</td>
<td style="padding-left:5px;" class="font12"
onclick="$('.loads').show();location='/viewer/3168106';"><b>독자님들... 이거 어때...?
24화인데... 좀 의견이 궁금행....우선 이건 보류... 그냥 If물로 봐주세요!</b> <br>
<div style="padding: 2px 0px;border-radius: 10px;opacity:0.5;">
<font style="font-weight:300;" class="font11">
<span style="font-size:12px;color:#000;">
&nbsp;<i class="icon ion-android-people"></i> 1,641회&nbsp; &nbsp;<i
class="icon ion-chatbox-working"></i> 13개&nbsp; &nbsp;<i
class="icon ion-thumbsup"></i> 22회&nbsp;
</font>
</font>
</div>
</td>
<td class="ep_style3">
<font style="color:#999;font-size:11px;">공지시간</font><br><b>24.01.02</b>
</td>
</tr>
<script> if (localStorage['view_3168106'] > 0) { $('.novel_on_3168106').css('background-color', '#8463f5'); } </script>
<tr class="ep_style4" style="border-top:1px solid #EFEFEF;display: none;">
<td style="width:15px;" class="">
<div style="margin-left:5px;width:5px;height:65px;background-color:#eee"
novel_on_3160202"></div>
</td>
<td style="padding-left:5px;" class="font12"
onclick="$('.loads').show();location='/viewer/3160202';"><b>작가쨩은 군만두보다....</b>
<br>
<div style="padding: 2px 0px;border-radius: 10px;opacity:0.5;">
<font style="font-weight:300;" class="font11">
<span style="font-size:12px;color:#000;">
&nbsp;<i class="icon ion-android-people"></i> 1,097회&nbsp; &nbsp;<i
class="icon ion-chatbox-working"></i> 26개&nbsp; &nbsp;<i
class="icon ion-thumbsup"></i> 29회&nbsp;
</font>
</font>
</div>
</td>
<td class="ep_style3">
<font style="color:#999;font-size:11px;">공지시간</font><br><b>23.12.30</b>
</td>
</tr>
<script> if (localStorage['view_3160202'] > 0) { $('.novel_on_3160202').css('background-color', '#8463f5'); } </script>
<tr class="ep_style4" style="border-top:1px solid #EFEFEF;display: none;">
<td style="width:15px;" class="">
<div style="margin-left:5px;width:5px;height:65px;background-color:#eee"
novel_on_3159347"></div>
</td>
<td style="padding-left:5px;" class="font12"
onclick="$('.loads').show();location='/viewer/3159347';"><b>플, 플러스 가는데.... 가도
되는거지...?</b> <br>
<div style="padding: 2px 0px;border-radius: 10px;opacity:0.5;">
<font style="font-weight:300;" class="font11">
<span style="font-size:12px;color:#000;">
&nbsp;<i class="icon ion-android-people"></i> 980회&nbsp; &nbsp;<i
class="icon ion-chatbox-working"></i> 44개&nbsp; &nbsp;<i
class="icon ion-thumbsup"></i> 43회&nbsp;
</font>
</font>
</div>
</td>
<td class="ep_style3">
<font style="color:#999;font-size:11px;">공지시간</font><br><b>23.12.30</b>
</td>
</tr>
<script> if (localStorage['view_3159347'] > 0) { $('.novel_on_3159347').css('background-color', '#8463f5'); } </script>
<tr class="ep_style4" style="border-top:1px solid #EFEFEF;display: none;">
<td style="width:15px;" class="">
<div style="margin-left:5px;width:5px;height:65px;background-color:#eee"
novel_on_3157887"></div>
</td>
<td style="padding-left:5px;" class="font12"
onclick="$('.loads').show();location='/viewer/3157887';"><b>근, 근데 19화
잼없써...?</b> <br>
<div style="padding: 2px 0px;border-radius: 10px;opacity:0.5;">
<font style="font-weight:300;" class="font11">
<span style="font-size:12px;color:#000;">
&nbsp;<i class="icon ion-android-people"></i> 2,867회&nbsp; &nbsp;<i
class="icon ion-chatbox-working"></i> 26개&nbsp; &nbsp;<i
class="icon ion-thumbsup"></i> 51회&nbsp;
</font>
</font>
</div>
</td>
<td class="ep_style3">
<font style="color:#999;font-size:11px;">공지시간</font><br><b>23.12.29</b>
</td>
</tr>
<script> if (localStorage['view_3157887'] > 0) { $('.novel_on_3157887').css('background-color', '#8463f5'); } </script>
<tr class="ep_style4" style="border-top:1px solid #EFEFEF;display: none;">
<td style="width:15px;" class="">
<div style="margin-left:5px;width:5px;height:65px;background-color:#eee"
novel_on_3150852"></div>
</td>
<td style="padding-left:5px;" class="font12"
onclick="$('.loads').show();location='/viewer/3150852';"><b>작가쨩 수술하러 입원합니다.</b>
<br>
<div style="padding: 2px 0px;border-radius: 10px;opacity:0.5;">
<font style="font-weight:300;" class="font11">
<span style="font-size:12px;color:#000;">
&nbsp;<i class="icon ion-android-people"></i> 2,838회&nbsp; &nbsp;<i
class="icon ion-chatbox-working"></i> 42개&nbsp; &nbsp;<i
class="icon ion-thumbsup"></i> 63회&nbsp;
</font>
</font>
</div>
</td>
<td class="ep_style3">
<font style="color:#999;font-size:11px;">공지시간</font><br><b>23.12.27</b>
</td>
</tr>
<script> if (localStorage['view_3150852'] > 0) { $('.novel_on_3150852').css('background-color', '#8463f5'); } </script>
<tr class="ep_style4" style="border-top:1px solid #EFEFEF;display: none;">
<td style="width:15px;" class="">
<div style="margin-left:5px;width:5px;height:65px;background-color:#eee"
novel_on_3147387"></div>
</td>
<td style="padding-left:5px;" class="font12"
onclick="$('.loads').show();location='/viewer/3147387';"><b>크리스마스! - 레이첼.</b> <i
class="icon ion-image"></i><br>
<div style="padding: 2px 0px;border-radius: 10px;opacity:0.5;">
<font style="font-weight:300;" class="font11">
<span style="font-size:12px;color:#000;">
&nbsp;<i class="icon ion-android-people"></i> 9,041회&nbsp; &nbsp;<i
class="icon ion-chatbox-working"></i> 25개&nbsp; &nbsp;<i
class="icon ion-thumbsup"></i> 65회&nbsp;
</font>
</font>
</div>
</td>
<td class="ep_style3">
<font style="color:#999;font-size:11px;">공지시간</font><br><b>23.12.25</b>
</td>
</tr>
<script> if (localStorage['view_3147387'] > 0) { $('.novel_on_3147387').css('background-color', '#8463f5'); } </script>
<tr class="ep_style4" style="border-top:1px solid #EFEFEF;display: none;">
<td style="width:15px;" class="">
<div style="margin-left:5px;width:5px;height:65px;background-color:#eee"
novel_on_3127468"></div>
</td>
<td style="padding-left:5px;" class="font12"
onclick="$('.loads').show();location='/viewer/3127468';"><b>이름 변경 공지-(브리트나 한스)
가주. --->(브리트나 카르만.)</b> <br>
<div style="padding: 2px 0px;border-radius: 10px;opacity:0.5;">
<font style="font-weight:300;" class="font11">
<span style="font-size:12px;color:#000;">
&nbsp;<i class="icon ion-android-people"></i> 824회&nbsp; &nbsp;<i
class="icon ion-thumbsup"></i> 7회&nbsp;
</font>
</font>
</div>
</td>
<td class="ep_style3">
<font style="color:#999;font-size:11px;">공지시간</font><br><b>23.12.18</b>
</td>
</tr>
<script> if (localStorage['view_3127468'] > 0) { $('.novel_on_3127468').css('background-color', '#8463f5'); } </script>
</table>
<div id="episode_list" style="width:100%;"></div>
<script>
episode_list();
async function episode_list() {
const url = "/proc/episode_list";
const data = {
"novel_no": '248128',
"sort": localStorage['novel_sort_248128'],
"page": localStorage['novel_page_248128']
}
const result = await http("post", url, data);
$('#episode_list').html(result);
const app_check = "0";
const app_store = "WEB";
await Promise.all([
get_episode_list_count_view(),
get_episode_view_list()
]);
if (app_check == 1) {
if (app_store == "GOOGLE") {
novelpia.novel_content_no_list(248128);
}
if (app_store == "IOS") {
window.webkit.messageHandlers.novelpia.postMessage({ name: "novel_content_no_list", body: 248128 });
}
}
}
async function get_episode_list_count_view() {
let episode_no_element = document.querySelectorAll('.episode_count_view');
let episode_no_arr = [];
for (let i = 0; i < episode_no_element.length; i++) {
episode_no_arr[i] = $($('.episode_count_view')[i]).attr("class");
}
const url = "/proc/novel";
const data = {
"cmd": "get_episode_count_view",
"episode_arr": episode_no_arr,
"novel_no": "248128",
}
const result = await http("post", url, data);
const { list, status } = result;
if (status !== 200) {
return;
}
$.each(list, function (i, v) {
$('.novel_count_view_' + v.episode_no).text(v.count_view);
});
$('.episode_show').show();
}
let episode_view_list = [];
async function get_episode_view_list() {
if (episode_view_list.length === 0) {
const url = "/proc/novel";
const data = {
"cmd": "get_episode_view_list",
"novel_no": "248128",
}
const result = await http("post", url, data);
const { list, status } = result;
if (status !== 200) {
return;
}
episode_view_list = list;
}
$('#episode_table > tbody > tr').each(function (i, el) {
const episode_no = $(el).data('episode-no');
if ($.inArray(episode_no, episode_view_list) !== -1) {
$('.episode_view_' + episode_no).css("background-color", "#8463f5");
}
});
}
function notice_toggle() {
// if($(".notice_table").is(':visible') == true){
// $(".notice_table").hide();
// $(".notice_toggle_btn").text("공지펼치기");
// }else{
// $(".notice_table").show();
// $(".notice_toggle_btn").text("공지접기");
// }
$('.notice_toggle_btn').hide();
$('.ep_style4').show();
}
//function handleJSONData(resultData){
async function app_down_data(resultData) {
//alert(resultData);
let downNovelData = [];
/*
for(var i in resultData){
downNovelData.push([i, downNovelData [i]]);
}
*/
for (k in resultData) {
const contentNo = resultData[k]['contentNo'];
const novelEpiNo = resultData[k]['novelEpiNo'];
const contentSubject = resultData[k]['contentSubject'];
const content_reading = resultData[k]['content_reading'];
$('#novel_down_' + contentNo).text("다운완료");
$('#novel_down_' + contentNo).css("background-color", "#ECECEC");
$('#novel_down_' + contentNo).css("color", "#333333");
$('#novel_down_' + contentNo).attr("onclick", "");
$('#multi_download_modal select').find(`option[value="${contentNo}"]`).prop('disabled', true);
}
$('#multi_download_modal #multil_download_start_select option:not([disabled]):first').prop('selected', true);
const mem_download_cnt = await get_total_download_cnt();
const member_download_possible_cnt = 100 - mem_download_cnt;
const download_possible_cnt = $('#multi_download_modal #multil_download_end_select option:not([disabled])').length;
let total_download_possible_cnt = 0;
if (member_download_possible_cnt >= download_possible_cnt) {
$('#multi_download_modal #multil_download_end_select option:not([disabled]):last').prop('selected', true);
total_download_possible_cnt = download_possible_cnt;
} else {
$('#multi_download_modal #multil_download_end_select option:not([disabled])').eq(member_download_possible_cnt - 1).prop('selected', true);
total_download_possible_cnt = member_download_possible_cnt;
}
$('#multi_download_modal #download_cnt').text(member_download_possible_cnt);
$('#multi_download_modal #total_download_cnt').text(total_download_possible_cnt);
_dev.log(downNovelData);
}
async function get_total_download_cnt() {
const url = "/proc/novel_viewer";
const data = {
cmd: "get_total_download_cnt"
};
const httpResult = await http("get", url, data);
const { cnt, status } = httpResult;
if (status !== 200) {
return false;
}
return cnt;
}
</script>
</td>
</tr>
</table>
<div id="comment_list_box" class="s_inv" style="max-width: 800px;word-break: break-word;"></div>
<div class="mobile_show s_inv" id="m_novel_curation_box">
<style>
.curation-wrapper {
display: none;
}
.curation {
width: 100%;
}
.curation-box-wrapper {
background-color: rgba(155, 155, 155, 0.1);
}
.curation img {
width: 100%;
}
#curation-title,
#curation-box {
max-width: 900px;
margin: 0 auto;
}
.curation h4 {
font-size: 14px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin: 7px 0 3px 0;
color: #000;
}
.curation p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #666;
font-size: 14px;
}
#curation-title {
font-size: 20px;
margin-bottom: 13px;
padding-left: 20px;
}
#curation-box {
display: flex;
padding: 25px 20px 18px 20px;
/* justify-content: space-between; */
/* overflow:auto; */
gap: 6.7%
}
#curation-box a {
flex-basis: 100px;
min-width: 0;
}
.is-last-btn {
margin-bottom: 350px !important;
}
.novel_15,
.novel_19 {
position: absolute;
right: 5px;
top: 5px;
font-size: 10px;
color: #FFF;
background-color: #527FE7;
padding: 5px;
line-height: 12px;
border-radius: 50%;
z-index: 1;
}
.novel_19 {
background-color: #EA6863;
}
.curation-btn {
display: none;
}
/*
@media (min-width:0px) and (min-width:651px) {
.back-item, .front-item{
display:block !important;
}
}
*/
@media (min-width:0px) and (max-width:891px) {
#curation-box {
gap: 20px;
padding: 3px 18px 10px 18px;
justify-content: space-around;
gap: 0;
overflow: hidden;
}
#curation-title {
font-size: 16px;
margin-bottom: 8px;
padding: 5px 20px 10px 20px;
}
.curation-wrapper {
background-color: rgba(155, 155, 155, 0.1);
padding-top: 15px;
}
.curation {
width: 80px;
margin: 0 auto;
}
.is-last-btn {
margin-bottom: 300px !important;
}
.curation-box-wrapper {
background-color: transparent;
}
.back-item {
display: none;
}
.curation-title-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
}
.curation-btn {
display: flex;
margin-right: 20px;
}
.curation-btn div {
width: 26px;
height: 26px;
background-color: rgba(255, 255, 255, 0.3);
text-align: center;
font-size: 15px;
border: 1px solid #DDD;
position: relative;
bottom: 5px;
}
#curation-title {
margin: 0;
}
}
.novel_15,
.novel_19 {
position: absolute;
right: 5px;
top: 5px;
font-size: 10px;
color: #FFF;
background-color: #527FE7;
padding: 5px;
line-height: 12px;
border-radius: 50%;
z-index: 1;
}
.novel_19 {
background-color: #EA6863;
}
</style>
</div>
<div id="comment_list_box_pc" class="s_inv" style="max-width: 800px;word-break: break-word;"></div>
<div id="temp_comment_box" class="s_inv" style="max-width: 800px;word-break: break-word;display:none;">
</div>
<input type="hidden" id="comment_page" value="1">
<script src="/js/viewer_novelpia.js?tmp=20251230"></script>
<script>
var option_btn_comment = 0;
var option_btn_list = 0;
var timer = null;
let g_isVisible = false;
let g_commentload = false;
const comment_delay = (sec) => new Promise(resolve => setTimeout(resolve, sec * 1000));
$(document).ready(function () {
if (window.innerWidth > 891) {
comment_load();
}
$(window).resize(function () {
if (window.innerWidth > 891) {
//pc일경우
$('#episode_list_btn').addClass('active');
$('#sponsor_list_btn').removeClass('active');
$('#comment_list_btn').removeClass('active');
if ($('#comment_list_btn').hasClass('active') == true) {
$('#episode_list_btn').addClass('active');
$('#sponsor_list_btn').removeClass('active');
$('#comment_list_btn').removeClass('active');
$('#episode_list_box').show();
$('#sponsor_list_box').hide();
$('#comment_list_box').hide();
}
if ($('#sponsor_list_box').css('display') == "block") {
$('#sponsor_list_box').hide();
$('#episode_list_box').css('display', 'block');
}
$('#episode_list_box').show();
$('#sponsor_list_box').hide();
if ($('#comment_list_box div').is(":visible") == true) {
return false;
} else {
clearTimeout(timer);
timer = setTimeout(() => {
$('#comment_list_box').empty();
comment_load();
$('#comment_list_box').show();
}, 300);
scroll_lock = true;
}
} else {
if ($('#comment_list_btn').hasClass('active') == true) {
return false;
} else {
$('#comment_list_box').empty();
}
}
});
$(window).scroll(function () {
if ($("#comment_list_box").html() !== "") {
const element = document.getElementById("comment_list_box");
if (!($('.comment_add_end').length) && !($('.novel_no_comment').length)) {
/*
let IS_BOTTOM = false;
let SCROLLED_HEIGHT = window.scrollY;
let WINDOW_HEIGHT = window.innerHeight;
let DOC_TOTAL_HEIGHT = document.body.offsetHeight;
IS_BOTTOM = WINDOW_HEIGHT + SCROLLED_HEIGHT >= DOC_TOTAL_HEIGHT;
*/
if (((window.scrollY >= (element.offsetTop + element.offsetHeight - 2000)) && !g_isVisible && g_commentload) /*|| IS_BOTTOM*/) {
//console.log("action!!!");
g_isVisible = true;
g_commentload = false;
IS_BOTTOM = false;
let loader_html = `
<div class="loader s_inv">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
`;
$('#comment_list_box').append(loader_html);
$('#comment_page').val($('#comment_page').val() * 1 + 1);
comment_delay(1).then(() => {
comment_load();
});
setTimeout(function () {
g_isVisible = false;
//IS_BOTTOM = "";
}, 1000);
}
}
}
});
})
function comment_load(type = '') {
g_commentload = false;
if (type != '') {
$('#comment_page').val('1');
}
var pageval = $('#comment_page').val();
if (pageval == '1' || type != '') {
$('#comment_list_box').empty();
$('#comment_list_box').load("/proc/novel_comment/248128?page=" + $('#comment_page').val(), function () {
if (window.innerWidth <= 891) {
$('html, body').scrollTop($("#tab_top").offset().top - 112);
$('#comment_list_box > div > span:first-child').css('font-size', '18px');
}
$('.comment_re .comment_rr').remove();
$('#next_page').removeAttr('onclick');
$('#next_page').attr('onclick', "$('#comment_page').val('2');comment_load();");
comment_delay(1).then(() => {
g_isVisible = false;
g_commentload = true;
});
$('.loader').remove();
});
} else {
$('#temp_comment_box').empty();
$('#next_page').remove();
$('#temp_comment_box').load("/proc/novel_comment/248128?page=" + $('#comment_page').val(), function () {
if (window.innerWidth <= 891) {
$('#comment_list_box > div > span:first-child').css('font-size', '18px');
}
$('.comment_re .comment_rr').remove();
$('#temp_comment_box').find(".comment_header").remove();
var temp_html = $('#temp_comment_box').html();
$('#comment_list_box').append(temp_html);
comment_re_sort();
comment_delay(1).then(() => {
g_isVisible = false;
g_commentload = true;
});
$('.loader').remove();
});
}
}
function episode_sort(option) {
if (option == 'up') {
//$.cookie('EPISODE_SORT', 'UP', { expires: 365, path: '/', domain: '.novelpia.com', secure: false });
localStorage['novel_sort_248128'] = "UP";
localStorage['novel_page_248128'] = 0;
$('.toggle_sort').removeAttr("onclick");
$('.toggle_sort').attr("onclick", "episode_sort('down');");
$('.toggle_sort > span').text("최신화부터");
episode_list();
} else {
//$.cookie('EPISODE_SORT', 'DOWN', { expires: 365, path: '/', domain: '.novelpia.com', secure: false });
localStorage['novel_sort_248128'] = "DOWN";
localStorage['novel_page_248128'] = 0;
$('.toggle_sort').removeAttr("onclick");
$('.toggle_sort').attr("onclick", "episode_sort('up');");
$('.toggle_sort > span').text("첫화부터");
episode_list();
}
}
if (localStorage['novel_sort_248128'] == 'UP') {
$('.toggle_sort').removeAttr("onclick");
$('.toggle_sort').attr("onclick", "episode_sort('down');");
$('.toggle_sort > span').text("최신화부터");
} else {
$('.toggle_sort').removeAttr("onclick");
$('.toggle_sort').attr("onclick", "episode_sort('up');");
$('.toggle_sort > span').text("첫화부터");
}
</script>
<div style="width:100%;display:none;" id="sponsor_list_box" class="s_inv">
<!--<img src="/img/new/list/sponsor.png" style="margin:20px 0px 20px 0px;height:15px;">-->
<div
style="display: flex;justify-content: space-between;background: #F3F3F9 0% 0% no-repeat padding-box;border: 1px solid #DCDCED;border-radius: 5px; padding: 10px; font-weight: bold;margin-bottom: 10px;">
<div style="display: flex;gap: 5px">
<div style="
background: #FFFFFF 0% 0% no-repeat padding-box;background: #FFFFFF 0% 0% no-repeat padding-box;
border: 1px dashed #B0B0D1;
width: 20px;
height: 20px;
border-radius: 30px;
"></div>
내 누적 후원 코인
</div>
<div style="width: 30%;text-align: right;">
<span style="color:#7632FF">0</span> 코인
</div>
</div>
<table style="width:100%;">
<tr>
<td style="width: 100%;">
<div style="background-color:#291c58;color:#fff;width:100%;line-height:40px;margin-top:5px;text-align:center;cursor:pointer;"
onclick="open_donation_modal();">작가후원하기</div>
</td>
</td>
</tr>
</table>
<table style="width:100%;margin:10px 0px;">
<tr style="height:40px;">
<td style="text-align: center;width:50%;">
<div style="line-height: 40px; border: 1px solid #ccc; border-radius: 10px;margin:0px 3px;cursor:pointer;"
id="donation_btn1_m"
onclick="$('#donation_board2_m').hide();$('#donation_board1_m').show();$('#donation_btn1_m').css('border', '1px solid #ccc');$('#donation_btn2_m').css('border', '1px solid #eee');">
최근 30일</div>
</td>
<td style="text-align: center;width:50%;">
<div style="line-height: 40px; border: 1px solid #eee; border-radius: 10px;margin:0px 3px;cursor:pointer;"
id="donation_btn2_m"
onclick="$('#donation_board1_m').hide();$('#donation_board2_m').show();$('#donation_btn1_m').css('border', '1px solid #eee');$('#donation_btn2_m').css('border', '1px solid #ccc');">
누적 후원</div>
</td>
</tr>
</table>
<table style="width:100%;" id="donation_board1_m">
<tr style="height:100%;">
<td colspan="4" style="text-align:center;line-height:40px;">후원된 내역이 없습니다.</td>
</tr>
</table>
<table style="width:100%;display:none;" id="donation_board2_m">
<tr style="height:100%;font-weight: 800;color:#ce35a6;">
<td style="padding:10px 4px;text-align:center;width:40px;">1위</td>
<td style="padding:10px 4px;"><img src='//images.novelpia.com/img/new/icon/diamond.gif'
style='vertical-align: text-middle;height:18px;' class='s_inv' title='최종오의'
onclick="alert('최종오의(PLUS 연속 정기결제 810일 - 다이아뱃지)');"> <img
src='//images.novelpia.com/img/new/icon/episode_cnt_03.png'
style='vertical-align: text-middle;height:18px;' class='s_inv' title='단행본'
onclick="alert('단행본(소설 30,000편 이상 읽음)');"> <img
src='//images.novelpia.com/img/new/icon/5e164a1315acb3ef4ee00605d783b888'
style='vertical-align: text-middle;height:18px;' class='s_inv' title='학사모'
onclick="alert('학사모(밀리언 클래스 1빙고 달성 보상)');"> <b
style='cursor:pointer;font-weight:500;' onclick="location='/user/672454';">Ignis</b>
</td>
<td style="padding:10px 4px;text-align:right;">500 코인</td>
</tr>
<tr style="height:100%;font-weight: 800;color:#5635ce;">
<td style="padding:10px 4px;text-align:center;width:40px;">2위</td>
<td style="padding:10px 4px;"><img src='//images.novelpia.com/img/new/icon/diamond.gif'
style='vertical-align: text-middle;height:18px;' class='s_inv' title='최종오의'
onclick="alert('최종오의(PLUS 연속 정기결제 810일 - 다이아뱃지)');"> <img
src='//images.novelpia.com/img/new/icon/sponsor2.png'
style='vertical-align: text-middle;height:18px;' class='s_inv' title='심폐소생기'
onclick="alert('심폐소생기(최초 후원)');"> <b style='cursor:pointer;font-weight:500;'
onclick="location='/user/1018282';">SUNHYUK</b></td>
<td style="padding:10px 4px;text-align:right;">310 코인</td>
</tr>
<tr style="height:100%;font-weight: 800;color:#5635ce;">
<td style="padding:10px 4px;text-align:center;width:40px;">3위</td>
<td style="padding:10px 4px;"><img
src='//images.novelpia.com/img/new/icon/7573ecc2c169bc6460fea01de87cec72'
style='vertical-align: text-middle;height:18px;' class='s_inv' title='9급 요원'
onclick="alert('9급 요원(이세계 노벨피아 시즌4 ~100000등)');"> <img
src='//images.novelpia.com/img/new/icon/bc90a9dc0f18c293ea09908178d44eab'
style='vertical-align: text-middle;height:18px;' class='s_inv' title='절정 고수'
onclick="alert('절정 고수(이세계 노벨피아 시즌2 상위 30%)');"> <img
src='//images.novelpia.com/img/new/icon/495a96bc68145449975cd754de4c60ca'
style='vertical-align: text-middle;height:18px;' class='s_inv' title='요원'
onclick="alert('요원(이세계 노벨피아 시즌4 참가)');"> <b style='cursor:pointer;font-weight:500;'
onclick="location='/user/364037';">티모크림빵</b></td>
<td style="padding:10px 4px;text-align:right;">200 코인</td>
</tr>
<tr style="height:100%;font-weight: 800;color:#5635ce;">
<td style="padding:10px 4px;text-align:center;width:40px;">4위</td>
<td style="padding:10px 4px;"><img
src='//images.novelpia.com/img/new/icon/4b371e675d2fe1ef473be549815d23c9'
style='vertical-align: text-middle;height:18px;' class='s_inv' title='안녕 병아리 모자'
onclick="alert('안녕 병아리 모자(본인인증+마케팅수신동의 시 지급)');"> <img
src='//images.novelpia.com/img/new/icon/0d60a0a40f248d9398405eb95c8df114'
style='vertical-align: text-middle;height:18px;' class='s_inv' title='통통 병아리 모자'
onclick="alert('통통 병아리 모자(본인인증 시 지급)');"> <b style='cursor:pointer;font-weight:500;'
onclick="location='/user/2657911';">하렘뽀이</b></td>
<td style="padding:10px 4px;text-align:right;">140 코인</td>
</tr>
<tr style="height:100%;font-weight: 800;color:#5635ce;">
<td style="padding:10px 4px;text-align:center;width:40px;">5위</td>
<td style="padding:10px 4px;"><img
src='//images.novelpia.com/img/new/icon/0d60a0a40f248d9398405eb95c8df114'
style='vertical-align: text-middle;height:18px;' class='s_inv' title='통통 병아리 모자'
onclick="alert('통통 병아리 모자(본인인증 시 지급)');"> <b style='cursor:pointer;font-weight:500;'
onclick="location='/user/2338694';">연독전문</b></td>
<td style="padding:10px 4px;text-align:right;">140 코인</td>
</tr>
<tr style="height:100%;">
<td style="padding:10px 4px;text-align:center;width:40px;">6위</td>
<td style="padding:10px 4px;"><b style='cursor:pointer;font-weight:500;'
onclick="location='/user/699157';">_941</b></td>
<td style="padding:10px 4px;text-align:right;">100 코인</td>
</tr>
<tr style="height:100%;">
<td style="padding:10px 4px;text-align:center;width:40px;">7위</td>
<td style="padding:10px 4px;"><b style='cursor:pointer;font-weight:500;'
onclick="location='/user/325016';">dangerousB</b></td>
<td style="padding:10px 4px;text-align:right;">100 코인</td>
</tr>
<tr style="height:100%;">
<td style="padding:10px 4px;text-align:center;width:40px;">8위</td>
<td style="padding:10px 4px;"><img src='//images.novelpia.com/img/new/icon/diamond.gif'
style='vertical-align: text-middle;height:18px;' class='s_inv' title='최종오의'
onclick="alert('최종오의(PLUS 연속 정기결제 810일 - 다이아뱃지)');"> <img
src='//images.novelpia.com/img/new/icon/1000.png'
style='vertical-align: text-middle;height:18px;' class='s_inv' title='창설후원자1000인'
onclick="alert('창설후원자1000인(창설후원자1000인)');"> <b
style='cursor:pointer;font-weight:500;' onclick="location='/user/3590';">음습한새</b>
</td>
<td style="padding:10px 4px;text-align:right;">100 코인</td>
</tr>
<tr style="height:100%;">
<td style="padding:10px 4px;text-align:center;width:40px;">9위</td>
<td style="padding:10px 4px;"><img
src='//images.novelpia.com/img/new/icon/9fc300f9682782d56d7bc1a53548a96d'
style='vertical-align: text-middle;height:18px;' class='s_inv' title='VVIP'
onclick="alert('VVIP(PLUS 연속 정기결제 1350일 - VVIP뱃지)');"> <img
src='//images.novelpia.com/img/new/icon/49b8ffca09d77a71e52b18c3099e114d'
style='vertical-align: text-middle;height:18px;' class='s_inv' title='감사합니다. 대협.'
onclick="alert('감사합니다. 대협.(의리를 지켜주신 대협들)');"> <img
src='//images.novelpia.com/img/new/icon/7aac1601da7599943c4d3b34b9ae38d7'
style='vertical-align: text-middle;height:18px;' class='s_inv'
title='2025 APP 보너스 뱃지' onclick="alert('2025 APP 보너스 뱃지(2025 앱 이벤트 12회 보너스 보상)');">
<b style='cursor:pointer;font-weight:500;' onclick="location='/user/22230';">르말랭남편</b>
</td>
<td style="padding:10px 4px;text-align:right;">100 코인</td>
</tr>
<tr style="height:100%;">
<td style="padding:10px 4px;text-align:center;width:40px;">10위</td>
<td style="padding:10px 4px;"><img
src='//images.novelpia.com/img/new/icon/episode_cnt_03.png'
style='vertical-align: text-middle;height:18px;' class='s_inv' title='단행본'
onclick="alert('단행본(소설 30,000편 이상 읽음)');"> <img
src='//images.novelpia.com/img/new/icon/diamond.gif'
style='vertical-align: text-middle;height:18px;' class='s_inv' title='최종오의'
onclick="alert('최종오의(PLUS 연속 정기결제 810일 - 다이아뱃지)');"> <img
src='//images.novelpia.com/img/new/icon/7aac1601da7599943c4d3b34b9ae38d7'
style='vertical-align: text-middle;height:18px;' class='s_inv'
title='2025 APP 보너스 뱃지' onclick="alert('2025 APP 보너스 뱃지(2025 앱 이벤트 12회 보너스 보상)');">
<b style='cursor:pointer;font-weight:500;' onclick="location='/user/262513';">잠이좋다</b>
</td>
<td style="padding:10px 4px;text-align:right;">100 코인</td>
</tr>
<tr style="height:100%;">
<td style="padding:10px 4px;text-align:center;width:40px;">11위</td>
<td style="padding:10px 4px;"><img
src='//images.novelpia.com/img/new/icon/649be59e6cf91ff3f338f08242b1cb17'
style='vertical-align: text-middle;height:18px;' class='s_inv' title='미령의 헤드셋'
onclick="alert('미령의 헤드셋(창작물 속으로 굿즈 펀딩 달성)');"> <img
src='//images.novelpia.com/img/new/icon/4a83d26e9378e1bb65d27c2871d76106'
style='vertical-align: text-middle;height:18px;' class='s_inv' title='엘레나의 푸른 나비'
onclick="alert('엘레나의 푸른 나비(창작물 속으로 굿즈 펀딩 달성)');"> <img
src='//images.novelpia.com/img/new/icon/85ed0640ece571e13bd6744c566943a6'
style='vertical-align: text-middle;height:18px;' class='s_inv'
title='유리아의 메이드 머리 장식' onclick="alert('유리아의 메이드 머리 장식(창작물 속으로 굿즈 펀딩 달성)');"> <b
style='cursor:pointer;font-weight:500;' onclick="location='/user/55034';">야광개구리</b>
</td>
<td style="padding:10px 4px;text-align:right;">74 코인</td>
</tr>
<tr style="height:100%;">
<td style="padding:10px 4px;text-align:center;width:40px;">12위</td>
<td style="padding:10px 4px;"><b style='cursor:pointer;font-weight:500;'
onclick="location='/user/40840';">Liosy</b></td>
<td style="padding:10px 4px;text-align:right;">55 코인</td>
</tr>
<tr style="height:100%;">
<td style="padding:10px 4px;text-align:center;width:40px;">13위</td>
<td style="padding:10px 4px;"><img
src='//images.novelpia.com/img/new/icon/0d60a0a40f248d9398405eb95c8df114'
style='vertical-align: text-middle;height:18px;' class='s_inv' title='통통 병아리 모자'
onclick="alert('통통 병아리 모자(본인인증 시 지급)');"> <b style='cursor:pointer;font-weight:500;'
onclick="location='/user/2121074';">내품속에사표</b></td>
<td style="padding:10px 4px;text-align:right;">50 코인</td>
</tr>
<tr style="height:100%;">
<td style="padding:10px 4px;text-align:center;width:40px;">14위</td>
<td style="padding:10px 4px;">비공개</td>
<td style="padding:10px 4px;text-align:right;">50 코인</td>
</tr>
<tr style="height:100%;">
<td style="padding:10px 4px;text-align:center;width:40px;">15위</td>
<td style="padding:10px 4px;"><b style='cursor:pointer;font-weight:500;'
onclick="location='/user/86719';">희생</b></td>
<td style="padding:10px 4px;text-align:right;">50 코인</td>
</tr>
<tr style="height:100%;">
<td style="padding:10px 4px;text-align:center;width:40px;">16위</td>
<td style="padding:10px 4px;"><img
src='//images.novelpia.com/img/new/icon/3f8e83aebced277da2f0805d6ba24a8c'
style='vertical-align: text-middle;height:18px;' class='s_inv' title='용사 파티 때려치웁니다'
onclick="alert('용사 파티 때려치웁니다(용사 파티 때려치웁니다 직소퍼즐 펀딩 보상)');"> <img
src='//images.novelpia.com/img/new/icon/episode_cnt_03.png'
style='vertical-align: text-middle;height:18px;' class='s_inv' title='단행본'
onclick="alert('단행본(소설 30,000편 이상 읽음)');"> <img
src='//images.novelpia.com/img/new/icon/diamond.gif'
style='vertical-align: text-middle;height:18px;' class='s_inv' title='최종오의'
onclick="alert('최종오의(PLUS 연속 정기결제 810일 - 다이아뱃지)');"> <b
style='cursor:pointer;font-weight:500;'
onclick="location='/user/252317';">탈주닌자미르</b></td>
<td style="padding:10px 4px;text-align:right;">50 코인</td>
</tr>
<tr style="height:100%;">
<td style="padding:10px 4px;text-align:center;width:40px;">17위</td>
<td style="padding:10px 4px;"><img src='//images.novelpia.com/img/new/icon/diamond.gif'
style='vertical-align: text-middle;height:18px;' class='s_inv' title='최종오의'
onclick="alert('최종오의(PLUS 연속 정기결제 810일 - 다이아뱃지)');"> <img
src='//images.novelpia.com/img/new/icon/platinum.gif'
style='vertical-align: text-middle;height:18px;' class='s_inv' title='플래티넘 뱃지'
onclick="alert('플래티넘 뱃지(PLUS 연속 정기결제 450일 - 플래티넘뱃지)');"> <img
src='//images.novelpia.com/img/new/icon/episode_cnt_03.png'
style='vertical-align: text-middle;height:18px;' class='s_inv' title='단행본'
onclick="alert('단행본(소설 30,000편 이상 읽음)');"> <b
style='cursor:pointer;font-weight:500;' onclick="location='/user/92844';">뭐든푹먹</b>
</td>
<td style="padding:10px 4px;text-align:right;">50 코인</td>
</tr>
<tr style="height:100%;">
<td style="padding:10px 4px;text-align:center;width:40px;">18위</td>
<td style="padding:10px 4px;"><img
src='//images.novelpia.com/img/new/icon/3dd6a0b49c6708ed90f9a4476664ecef'
style='vertical-align: text-middle;height:18px;' class='s_inv' title='F급 헌터'
onclick="alert('F급 헌터(이세계 노벨피아 이벤트 F급 달성)');"> <img
src='//images.novelpia.com/img/new/icon/0f685df15e8d5db13549bf896cb88092'
style='vertical-align: text-middle;height:18px;' class='s_inv' title='헌터 자격증'
onclick="alert('헌터 자격증(이세계 노벨피아 이벤트 참여)');"> <img
src='//images.novelpia.com/img/new/icon/4ce8b843ea50d50c707c70776e79d9cd'
style='vertical-align: text-middle;height:18px;' class='s_inv' title='삼류 무인'
onclick="alert('삼류 무인(이세계 노벨피아 시즌2 상위 100%)');"> <b
style='cursor:pointer;font-weight:500;' onclick="location='/user/215371';">현혼</b>
</td>
<td style="padding:10px 4px;text-align:right;">50 코인</td>
</tr>
<tr style="height:100%;">
<td style="padding:10px 4px;text-align:center;width:40px;">19위</td>
<td style="padding:10px 4px;">비공개</td>
<td style="padding:10px 4px;text-align:right;">30 코인</td>
</tr>
<tr style="height:100%;">
<td style="padding:10px 4px;text-align:center;width:40px;">20위</td>
<td style="padding:10px 4px;"><img src='//images.novelpia.com/img/new/icon/first_plus.png'
style='vertical-align: text-middle;height:18px;' class='s_inv' title='공허의유산'
onclick="alert('공허의유산(PLUS 연속 정기결제 270일 - 금뱃지)');"> <img
src='//images.novelpia.com/img/new/icon/platinum.gif'
style='vertical-align: text-middle;height:18px;' class='s_inv' title='플래티넘 뱃지'
onclick="alert('플래티넘 뱃지(PLUS 연속 정기결제 450일 - 플래티넘뱃지)');"> <b
style='cursor:pointer;font-weight:500;'
onclick="location='/user/988057';">CROW_425</b></td>
<td style="padding:10px 4px;text-align:right;">30 코인</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var ENP_VAR = {
collect: {},
conversion: { product: [] }
};
ENP_VAR.collect.productCode = '248128';
ENP_VAR.collect.productName = '최종보스를 성노예로 샀는데, 집착한다.';
ENP_VAR.collect.price = '1';
ENP_VAR.collect.soldOut = 'N';
ENP_VAR.collect.imageUrl = '//images.novelpia.com/imagebox/cover/c39e6f8d86d71086ccd128a3db4f8a81_434662_ori.file';
ENP_VAR.collect.topCategory = 'ALL';
ENP_VAR.collect.firstSubCategory = '';
ENP_VAR.collect.secondSubCategory = '';
ENP_VAR.collect.thirdSubCategory = '';
(function (a, g, e, n, t) { a.enp = a.enp || function () { (a.enp.q = a.enp.q || []).push(arguments) }; n = g.createElement(e); n.async = !0; n.defer = !0; n.src = "https://cdn.megadata.co.kr/dist/prod/enp_tracker_self_hosted.min.js"; t = g.getElementsByTagName(e)[0]; t.parentNode.insertBefore(n, t) })(window, document, "script");
enp('create', 'collect', 'tproject', { device: 'W' });
</script>
<!-- am-body -->
</div>
</div>
<div style="color:#fff; background-color:#F2FBFF; padding:15px;" id="copyright_bar" role="alert">
<div style="max-width:1160px; margin:0 auto;">
<div class="d-flex align-items-center justify-content-start pd-l-10">
<span style="font-size:12px; color:#000; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">
<a href="/notice/20/view_5231248" style="color:#000;">
<strong style="color:#50A9CF; margin-right:5px;">공지</strong>12월 24일 항해일지 - 연말 결산 및 코인 7% 추가 충전
이벤트 </a>
</span>
</div><!-- d-flex -->
</div>
</div>
<!-- footer -->
<link rel='stylesheet' href='/css/footer.css?v=1760926093'>
<footer style="">
<div class="footer-top-wrapper">
<div class="footer-top">
<div class="footer-info" id="footer_infos">
<div class="footer-links">
<img src="/img/new/footer_logo_new.png" alt="노벨피아 로고">
<a href="/page/terms_of_use" title="이용약관">이용약관</a>
<a href="/page/privacy_policy" title="개인정보 처리방침" style="color: #fff;">개인정보 처리방침</a>
<a href="/page/youth_policy" title="청소년 보호정책">청소년 보호정책</a>
<a href="http://we.novelpia.com/" target="_BLANK" title="회사소개">회사소개</a>
<a href="/page/partner" title="제휴안내">제휴안내</a>
<a href="https://cp.novelpia.com/auth/login" title="CP 사이트">CP 사이트</a>
</div>
<p class="footer-copy-m footer-view">
Copyright © 노벨피아 2021. All Rights Reserved.
</p>
<div class="footer-company-info">
<span class="footer-close mb_hidden">주식회사 메타크래프트</span>
<span class="footer-close mb_show" onclick="footer_close()">주식회사 메타크래프트
<i class="icon ion-ios-arrow-up"></i>
</span>
<span class="footer-view">대표 유정석</span>
<span class="footer-view">사업자등록번호 210-81-79781</span>
<span class="footer-view">통신판매업 제2022-서울구로-2494호 <a
href="http://www.ftc.go.kr/bizCommPop.do?wrkr_no=2108179781" target="_blank"
rel="noreferrer noopener" title="통신판매업 확인">[확인]</a></span>
<br>
<span class="footer-view">주소 서울특별시 구로구 디지털로31길 12,(구로동, TP타워) 9층</span>
</div>
<div class="footer-center footer-view">
<span>고객센터
<a href="/qna/all/write" style="font-weight: bold; cursor: pointer; color: #679ad2;"
title="1대1문의">[1:1문의하기]</a>
1588-3644
<a href="mailto:help@novelpia.com" title="노벨피아 고객센터">help@novelpia.com</a>
</span>
<span>운영시간 평일 AM 10:00 ~ PM 07:00 (휴게시간 PM 12:50 ~ 2:10)</span>
</div>
<div class="footer-copy">
<p>
주의! 본 사이트에 등록된 컨텐츠는 사이트 및 원 저작권자에 권리가 있는 컨텐츠이며, 무단 복제/전송/수정/배포는 법적 처벌을 받을 수 있습니다.
</p>
<p>
Copyright © 노벨피아 2021. All Rights Reserved.
</p>
</div>
</div>
<div class="footer-social">
<!--트위치 제거
<span>
<img class="so-btn8" src="//images.novelpia.com/img/new/menu/so_btn8.png" onclick="window.open('https://www.twitch.tv/novelpia_official');" alt="트위치">
<img class="live-tag" src="//images.novelpia.com/img/new/menu/live_tag.png" alt="트위치 라이브">
</span>
-->
<span>
<img src="//images.novelpia.com/img/new/so_btn5.png"
onclick="out_site_go('https://blog.naver.com/adnovelpia');" alt="네이버 블로그">
</span>
<span>
<img src="//images.novelpia.com/img/new/so_btn6.png"
onclick="out_site_go('https://www.pinterest.co.kr/novelpia_official/');" alt="핀터레스트">
</span>
<span>
<img src="//images.novelpia.com/img/new/so_btn7.png"
onclick="out_site_go('https://pf.kakao.com/_xaxoxfQK');" alt="카카오톡 채널">
</span>
<span>
<img src="//images.novelpia.com/img/new/so_btn3_5.png"
onclick="out_site_go('https://twitter.com/novel_pia');" alt="트위터">
</span>
<span>
<img src="//images.novelpia.com/img/new/so_btn4.png"
onclick="out_site_go('https://www.facebook.com/novelpia.page');" alt="페이스북">
</span>
<span>
<img src="//images.novelpia.com/img/new/so_btn2.png"
onclick="out_site_go('https://www.youtube.com/c/%EB%85%B8%EB%B2%A8%ED%94%BC%EC%95%84');"
alt="유튜브 채널">
</span>
<span>
<img src="//images.novelpia.com/img/new/so_btn1.png"
onclick="out_site_go('https://www.instagram.com/novelpia_official/');" alt="인스타그램">
</span>
<span>
<img src="//images.novelpia.com/img/new/gplay_btn.png"
onclick="out_site_go('https://play.google.com/store/apps/details?id=com.novelpia.android.me&pli=1');"
alt="구글플레이">
</span>
</div>
</div>
<div class="footer-admin">
</div>
</div>
<div class="footer-bottom-wrapper">
<div class="footer-bottom">
<!--이노비즈-->
<div class="certification-logo">
<img src="//images.novelpia.com/img/new/common/innobiz_logo.svg" alt="이노비즈" class="img-innobiz">
<p>기술 혁신형<br>중소기업 인증</p>
</div>
<!--저작권OK-->
<div class="certification-logo gotoOutlink" style="cursor:pointer;">
<a href="https://www.kcopa.or.kr"></a>
<img src="//images.novelpia.com/img/new/common/copyright_ok_logo.svg" alt="저작권ok"
class="img-copyright-ok">
<p>깨끗한 저작권<br>저작권OK</p>
</div>
</div>
</div>
</footer>
<script>
if ($.cookie('DARKMODE_S') == 1) {
$('#copyright_bar').css('background-color', '#180a03');
$('#copyright_bar span').css('color', '#000');
$('#copyright_bar span a').css('color', '#fff');
$('#copyright_bar span a strong').css('color', '#cf7650');
}
function footer_close() {
if ($('.footer-view').is(":visible") == true) {
$('.footer-view').hide();
$('.footer-close i').attr("class", "icon ion-ios-arrow-down");
} else {
$('.footer-view').show();
$('.footer-close i').attr("class", "icon ion-ios-arrow-up");
}
}
</script>
<script type="text/javascript"
src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<script>let ccte = 0; $(window).on("keyup", function (e) { 10 == (ccte = e.keyCode == [38, 38, 40, 40, 37, 39, 37, 39, 66, 65][ccte] ? ccte + 1 : 0) && (location = "/event_korani", $.cookie("CCTE", "ON", { expires: 1, path: "/", domain: ".novelpia.com", secure: !1 })) });</script>
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Organization",
"name": "노벨피아",
"url": "https://novelpia.com/",
"sameAs": [
"https://www.facebook.com/novelpia.page/",
"https://www.instagram.com/novelpia_official/?hl=ko"
]
}
</script>
<script>
// 사파리 뒤로 가기시 로딩 뜨는 현상
window.onpageshow = function (event) {
if (event.persisted || (window.performance && window.performance.navigation.type == 2)) { // todo
$('.loads').hide();
}
}
</script>
<script>
$.cookie("event_100_modal", "0", { path: '/', domain: 'novelpia.com', secure: false })
</script>
</div>
<script>
$('.gotoOutlink').on('click', function (e) {
e.preventDefault();
const out_href = $(this).find('a').prop('href');
out_site_go(out_href, 1);
return false;
});
if (location.href.indexOf("/membership_info") == -1 && location.href.indexOf("/viewer") == -1 && location.href.indexOf("/comic_viewer") == -1) {
let popup_flag = "0";
const url = `/proc/plus_payment_up`;
const data = {
cmd: "is_payment_up_check",
};
axios.get(url, { params: data }).then(res => {
if (res.data?.is_move) {
location.href = '/membership_info';
$.cookie('secret_mode', '0', { expires: 365, path: '/', domain: 'novelpia.com', secure: false });
} else {
if (!$.cookie("payment_up_not_show")) {
/*
popup_flag = 1 : 미동의+해지
popup_flag = 2 : 미동의
popup_flag = 3 : 동의+해지
1번 : 동의o, 해지예약o
2번 : 동의x, 해지예약o
3번 : 다음결제일이 7일 이상이며, 동의x, 해지예약x
4번 : 다음결제일이 7일 이내이며, 동의x, 해지예약x
*/
if (popup_flag != 0) {
if (popup_flag == 1) {
//popup_flag = 1 : 미동의+해지
//2번 팝업띄우기
$('.popupflag2').show();
} else if (popup_flag == 3) {
//popup_flag = 3 : 동의+해지
//1번 팝업띄우기
$('.popupflag1').show();
} else {
//popup_flag = 2 : 미동의
let dday_text = "D-1";
if (res.data.diff == 0) {
dday_text = "D-Day";
} else {
dday_text = "D-" + res.data.diff;
}
if (res.data.diff_code == 2) {
$('.open_7dday').show();
$('.dday').text(dday_text);
} else if (res.data.diff_code == 3) {
$('.3dday').show();
$('.dday').text(dday_text);
} else {
$('.allday').show();
}
}
document.getElementById("payment_agree_yet").className = "membership-info-bg";
}
}
}
});
}
</script>
</div><!-- am-mainpanel -->
<link rel='stylesheet' href='/css/target_modal.css?v=1760926093'>
<style>
#comic_main_modal .pop_ad {
width: 100%;
cursor: pointer;
}
#comic_main_modal .modal-title img {
width: 100%;
}
#comic_main_modal .close-wrapper {
display: flex;
justify-content: space-between;
}
#comic_main_modal .detail-modal-7-day-close {
color: #fff;
text-align: center;
text-decoration: underline;
font-size: 16px;
cursor: pointer;
}
#comic_main_modal .detail-modal-7-day-close span {
padding: 0 10px;
}
</style>
<div class="detail-modal-background" id="comic_main_modal">
<div class="modal-wrapper">
<div class="target-modal">
<div class="pop_ad">
<div class="main-modal-wrapper">
<a @click="go_asp()">
<div class="modal-title">
<img :src="toptoon_asp_data.w_banner" class="mobile_hidden" loading="lazy" />
<img :src="toptoon_asp_data.m_banner" class="mobile_show" loading="lazy" />
</div>
</a>
</div>
</div>
</div>
<div class="close-wrapper">
<a class="detail-modal-7-day-close" @click="close(true)">
<span>다시 보지 않기</span>
</a>
<a class="detail-modal-7-day-close" @click="close(false)">
<span>닫기</span>
</a>
</div>
</div>
</div>
<script type="module">
Vue.prototype.G_CDN_DOMAIN_IMG = G_CDN_DOMAIN_IMG;
const app = new Vue({
el: '#comic_main_modal',
data: {
novel_no: 248128,
toptoon_asp_data: [],
now: '2025-12-30 11:41:26',
value: [],
},
methods: {
close(final_close) {
if (final_close) {
this.get_cookie();
}
$('#comic_main_modal').modal('hide');
},
async go_asp() {
this.get_cookie();
await out_site_go(this.toptoon_asp_data.banner_link, 1);
return;
},
get_cookie() {//다시 보이지 않게 하기
const asp_cookie = $.cookie('is_asp_modal');
if (asp_cookie) {
const parsed = JSON.parse(decodeURIComponent(asp_cookie));
this.value = Array.isArray(parsed) ? parsed : [];
} else {
this.value = [];
}
if (R.includes(this.novel_no, this.value)) {
return;
}
this.value.push(this.novel_no);
$.cookie('is_asp_modal', encodeURIComponent(JSON.stringify(this.value)), { expires: 365, path: '/', domain: 'novelpia.com', secure: false });
}
},
mounted() {
if (this.toptoon_asp_data.length === 0) {
return;
}
const start_dt = moment(this.toptoon_asp_data.banner_startdate, 'YYYY-MM-DD HH:mm:ss');
const end_dt = moment(this.toptoon_asp_data.banner_enddate, 'YYYY-MM-DD HH:mm:ss');
const now = moment(this.now, 'YYYY-MM-DD HH:mm:ss');
if (now.isSameOrAfter(start_dt) && now.isSameOrBefore(end_dt)) {
$('#comic_main_modal').modal('show');
}
}
});
</script>
<link rel='stylesheet' href='/css/openstore_episode_emoticon_modal.css?v=1760926093'>
<div v-if="emoticon_data.length > 0" id="modal_opensotre_emoticon" class="detail-modal-background">
<div class="modal-wrapper s_inv">
<div class="novelticon-modal">
<div class="close-x" data-dismiss="modal"></div>
<div class="novelticon-write-notice">
<img class="s_inv" src="//images.novelpia.com/img/new/common/emoticon_heart.png">
<p v-if="emoticon_data[0].emoticon_memo">{{ emoticon_data[0].emoticon_memo }}</p>
<p v-else>독자님께서 재미있게 읽어 주신 덕에<br><span>작품의 작가티콘이 출시</span>되었습니다!</p>
</div>
<div class="novelticon-info">
<div class="novelticon-thumb"><img class="s_inv" :src="emoticon_data[0].emoticon_url"></div>
<div class="novelticon-tit">{{ emoticon_data[0].emoticon_group_name }}</div>
<div class="org-tit">{{ novel_name }}</div>
<div class="novelticon-price"><img class="s_inv" src="/img/new/openstore/v2/icon_coin.png">{{
emoticon_data[0].coin }}코인</div>
</div>
<div class="novelticon-list">
<div class="list-inner-scroll">
<img v-for="item in emoticon_data" class="s_inv" :src="item.emoticon_url">
</div>
</div>
<div class="btn-area">
<button @click="purchase" class="btn-novelticon-buy">구매하기</button>
</div>
<div class="stxt">이모티콘 구매에 대한 철회 및 환불은 유료서비스 이용약관 및 콘텐츠산업진흥법의 기준에 따릅니다.</div>
</div>
<div @click="off_display" class="close-area s_inv">
30일동안 보지 않기
</div>
</div>
</div>
<script type="module">
const openstoreWirterEmoticonModal = new Vue({
el: '#modal_opensotre_emoticon',
data: {
emoticon_data: {},
novel_no: 248128,
novel_name: '최종보스를 성노예로 샀는데, 집착한다.',
modal_status: null,
G_CDN_DOMAIN_IMG: G_CDN_DOMAIN_IMG,
is_member_login: false, // 로그인 여부
is_like: false, // 좋아요 여부
is_alarm: false, // 알람 여부
is_pick: false, // 인생픽 여부
is_darkmode: false, // 다크모드 여부
csrf: '',
},
methods: {
async init() {
if (this.is_member_login === false) { // 로그인여부
return false;
}
if ($.cookie(`is_not_display_${this.novel_no}_writer_emoticon_modal`) == 1) { // 30일간 안보기 체크
return false;
}
if (this.is_like === false && this.is_alarm === false && this.is_pick === false) {
return false;
}
await this.get_writer_emoticon_data(this.novel_no);
this.open();
},
async get_writer_emoticon_data(novel_no) {
const param = {
mode: 'get_writer_emoticon_data',
novel_no: novel_no,
};
const result = await http('get', '/proc/emoticon_proc', param);
const { status, errmsg, data } = result;
if (status !== 200) {
if (status === 400 || status === 402) { // 작가티콘이 없을경우, 이미 구매한 경우
return false;
}
alert(errmsg);
if (status === 401) {
this.close();
this.login();
}
return false;
}
this.emoticon_data = data;
},
async purchase() {
if (confirm('해당 이모티콘을 구매 하시겠습니까?') === false) {
return false;
}
const param = {
mode: 'setInsertEmoticon',
emoticon_group: this.emoticon_data[0].emoticon_group,
coin: this.emoticon_data[0].coin,
csrf: this.csrf,
};
const data = await http('post', '/proc/emoticon_openstore/', param);
const t = data.split("|");
if (t[0] == "OK") {
alert("정상적으로 구매완료 되었습니다.");
this.close();
} else if (t[0] == 'LOGIN') {
if (confirm("로그인이 필요합니다.\n로그인 하시겠습니까?")) {
this.close();
this.login();
}
} else if (t[0] == 'CSRF') {
alert("잘못된 접근입니다.");
this.close();
this.login();
} else if (t[0] == 'READY') {
alert("판매가 준비 중인 상품입니다.");
} else if (t[0] == 'SOLDOUT') {
alert("구매가 종료된 상품입니다.");
} else if (t[0] == 'GAME') {
alert("노벨피아 디펜스게임 클리어 보상 이모티콘입니다.");
} else if (t[0] == 'PAYMENT') {
alert("노벨피아 결제자 혜택 전용 이모티콘입니다.");
} else if (t[0] == 'GACHA') {
alert("노벨피아 가챠뽑기 전용 이모티콘입니다.");
} else if (t[0] == 'MILEAGE') {
alert("가챠뽑기 마일리지 교환 전용 이모티콘입니다.");
} else if (t[0] == 'BOUGHT') {
alert("이미 구매가 완료된 이모티콘입니다.");
} else if (t[0] == 'COIN') {
if (confirm("코인이 부족합니다.\n충전 하시겠습니까?")) {
this.store();
}
} else if (t[0] == 'DEFAULT') {
alert("기본 이모티콘은 구매하실 수 없습니다.");
} else if (t[0] == "ERROR") {
alert("로그아웃이 되었거나 유효하지 않은 접근입니다.");
this.reload();
} else {
alert(data);
}
},
open() {
$('#modal_opensotre_emoticon').modal('show');
},
close() {
$('#modal_opensotre_emoticon').modal('hide');
},
store() {
location.href = '/coin_shop';
},
login() {
member_login_modal_on();
},
reload() {
location.reload();
},
off_display() {
this.close();
$.cookie(`is_not_display_${this.novel_no}_writer_emoticon_modal`, '1', { expires: 30, path: '/', domain: 'novelpia.com', secure: false });
},
},
mounted() {
this.init();
},
});
</script>
<style>
@media screen and (max-width: 891px) {
#modal_app_download .modal-wrapper {
width: 80%;
max-width: 360px;
margin: auto;
position: relative;
top: 50%;
transform: translateY(-50%);
}
}
@media screen and (max-height: 500px) {
#modal_app_download .modal-wrapper {
max-width: 260px;
}
}
#modal_app_download .detail-modal-7-day-close {
display: block;
font-size: 14px;
color: #fff;
margin-top: 15px;
text-align: center;
text-decoration: underline;
}
</style>
<div id="modal_app_download" class="detail-modal-background">
<div class="modal-wrapper">
<div class="target-modal">
<div href="" class="layer-close-x3"></div>
<div class="pop_ad" style="width: 100%;">
<div class="main-modal-wrapper">
<a href="javascript://" @click="move">
<div class="modal-title">
<img class="s_inv" src="//images.novelpia.com/img/new/banner/main_layer_app.jpg">
</div>
</a>
</div>
</div>
</div>
<!--버튼 하나-->
<div class="modal-button-wrapper" style="width: 100%;">
<button class="detail-modal-button"
style="width: 100%; font-size:16px; background: #0035BD; font-weight:600;color:#F4EE4E;"
@click="move">앱 다운받기</button>
</div>
<a class="detail-modal-7-day-close" href="javascript://" @click="close"><span>우선 모바일웹으로 볼게요</span></a>
</div>
</div>
<script type="module">
new Vue({
el: '#modal_app_download',
data: {
is_mobile: false,
agent: false,
app_version: 0,
is_member_login: false,
is_member_plus: false,
is_member_payment: false,
sub_sale_flag: 0,
},
methods: {
init() {
if (this.is_mobile === false) {
return false;
}
if (this.app_version > 0) {
return false;
}
if ($.cookie('is_app_download_modal') == 1) {
return false;
}
if (this.is_member_login === false) {
return false;
}
if (this.is_member_plus === true) {
return false;
}
if (this.is_member_plus === false && this.is_member_payment === true) {
return false;
}
this.open();
},
open() {
$('#modal_app_download').modal('show');
},
close() {
$.cookie('is_app_download_modal', '1', { expires: 15, path: '/', domain: 'novelpia.com', secure: false });
$('#modal_app_download').modal('hide');
},
move() {
if (/iphone/gi.test(navigator.userAgent)) {
location.href = 'https://apps.apple.com/kr/app/%EC%9B%B9%EC%86%8C%EC%84%A4-%EB%85%B8%EB%B2%A8%ED%94%BC%EC%95%84/id1568464817';
} else if (/android/gi.test(navigator.userAgent)) {
location.href = 'https://play.google.com/store/apps/details?id=com.novelpia.android.me';
}
return;
},
},
mounted() {
}
});
</script>
<script>
function user_tag_del(idx) {
$.ajax({
data: { "tag_idx": idx, "csrf": "" },
type: "POST",
url: "/proc/user_tag_del",
cache: false,
success: function (data) {
var check = data.split("|");
if (check[0] == 'MSG' && check[1]) {
alert(check[1]);
} else if (check[0] == 'OK') {
alert("나만의태그 정보가 삭제 되었습니다.");
location.reload(true);
} else if (check[0] == 'login') {
if (confirm("나만의태그 삭제를 위해서는 로그인이 필요합니다.\n로그인 하시겠습니까?")) {
//location = "/page/login";
member_login_modal_on();
}
} else {
alert("에러가 발생하였습니다.");
}
}
});
}
function user_tag_add() {
$.ajax({
data: { "novel_no": '248128', "user_tag": $('#user_tag').val(), "csrf": "" },
type: "POST",
url: "/proc/user_tag_add",
cache: false,
success: function (data) {
var check = data.split("|");
if (check[0] == 'MSG' && check[1]) {
alert(check[1]);
} else if (check[0] == 'OK') {
alert("나만의태그 정보가 등록 되었습니다.");
location.reload(true);
} else if (check[0] == 'login') {
if (confirm("나만의태그를 위해서는 로그인이 필요합니다.\n로그인 하시겠습니까?")) {
//location = "/page/login";
member_login_modal_on();
}
} else {
alert("에러가 발생하였습니다.");
}
}
});
}
</script>
<link rel="stylesheet" href="/css/novel_donation_modal.css?v=5" />
<script src="/js/confetti_v2.js"></script>
<style>
canvas {
z-index: 10000;
pointer-events: none;
position: fixed;
top: 0;
transform: scale(1.1);
}
</style>
<div style="display: none;" id="startBtn"></div>
<canvas id="canvas"></canvas>
<link rel='stylesheet' href='/css/novel_donation_modal.css?v=1760926093'>
<script src='https://npg.settlebank.co.kr/resources/js/v1/SettlePG.js' type='text/javascript'></script>
<div>
<!-- pay form-->
<form id="STPG_payForm2">
<input type="hidden" id="goodsNo" />
<input type="hidden" name="mchtId" value="novelpia">
<input type="hidden" name="method" value="">
<input type="hidden" name="mchtName" value="노벨피아"> <!-- 상점한글명 -->
<input type="hidden" name="mchtEName" value="Novelpia"> <!-- 상점영문명 -->
<input type="hidden" name="pmtPrdtNm" value="">
<input type="hidden" name="trdAmt" value=""> <!-- 거래금액(암호문) -->
<input type="hidden" name="plainTrdAmt" value="">
<input type="hidden" name="mchtParam" value="" /> <!-- 상점예약필드 -->
<input type="hidden" name="notiUrl" value="https://pay.novelpia.com/settlebank/settle_noti">
<!-- 결과처리 URL -->
<input type="hidden" name="nextUrl" value="https://pay.novelpia.com/settlebank/pay_receiveResult">
<!-- 결과화면 URL -->
<input type="hidden" name="cancUrl" value="https://pay.novelpia.com/settlebank/pay_receiveResult">
<!-- 결제취소 URL -->
<input type="hidden" name="trdDt" value="">
<input type="hidden" name="trdTm" value="">
<input type="hidden" name="autoPayType" value="">
<input type="hidden" name="mchtTrdNo" value="">
<input type="hidden" name="corpPayCode" value="">
<!-- 승인 요청 파라미터(옵션) -->
<input type="hidden" name="plainMchtCustNm" value="" /> <!-- 고객명(평문) -->
<input type="hidden" name="plainMchtCustId" value="" />
<!-- 암호화 처리 후 세팅될 파라미터-->
<input type="hidden" name="mchtCustId" /> <!-- 상점고객아이디(암호문) -->
</form>
<!--코인 충전하기-->
<div class="basic-modal-background" id="user_donation_coin" style="display:none;">
<div class="user-modal-wrapper">
<div class="coin-modal-header">
<div class="modal-back" id="coinBack"><img
src="//images.novelpia.com/old/img/new/plus/v2/arrow_goback_2.png" alt="뒤로가기"></div>
코인 충전하기
</div>
<div class="coin-item-list-wrapper">
<div class="coin-item-box" data-no="20">
<p><img src="//images.novelpia.com/old/img/new/plus/v2/icon_paymentcoin_m.png"
class="coin-img">30 코인</p>
<p class="coin-price">3,000원</p>
</div>
<div class="coin-item-box" data-no="10">
<p><img src="//images.novelpia.com/old/img/new/plus/v2/icon_paymentcoin_m.png"
class="coin-img">50 코인</p>
<p class="coin-price">5,000원</p>
</div>
<div class="coin-item-box" data-no="11">
<p><img src="//images.novelpia.com/old/img/new/plus/v2/icon_paymentcoin_m.png"
class="coin-img">100 코인</p>
<p class="coin-price">10,000원</p>
</div>
<div class="coin-item-box" data-no="12">
<p><img src="//images.novelpia.com/old/img/new/plus/v2/icon_paymentcoin_m.png"
class="coin-img">200 코인</p>
<p class="coin-price">20,000원</p>
</div>
<div class="coin-item-box" data-no="13">
<p><img src="//images.novelpia.com/old/img/new/plus/v2/icon_paymentcoin_m.png"
class="coin-img">300 코인</p>
<p class="coin-price">30,000원</p>
</div>
<div class="coin-item-box" data-no="21">
<p><img src="//images.novelpia.com/old/img/new/plus/v2/icon_paymentcoin_m.png"
class="coin-img">400 코인</p>
<p class="coin-price">40,000원</p>
</div>
<div class="coin-item-box" data-no="14">
<p><img src="//images.novelpia.com/old/img/new/plus/v2/icon_paymentcoin_m.png"
class="coin-img">500 코인</p>
<p class="coin-price">50,000원</p>
</div>
<div class="coin-item-box" data-no="15">
<p><img src="//images.novelpia.com/old/img/new/plus/v2/icon_paymentcoin_m.png"
class="coin-img">1,000 코인</p>
<p class="coin-price">100,000원</p>
</div>
<div class="coin-item-box" data-no="16">
<p><img src="//images.novelpia.com/old/img/new/plus/v2/icon_paymentcoin_m.png"
class="coin-img">2,000 코인</p>
<p class="coin-price">200,000원</p>
</div>
<div class="coin-item-box" data-no="17">
<p><img src="//images.novelpia.com/old/img/new/plus/v2/icon_paymentcoin_m.png"
class="coin-img">3,000 코인</p>
<p class="coin-price">300,000원</p>
</div>
<div class="coin-item-box" data-no="18">
<p><img src="//images.novelpia.com/old/img/new/plus/v2/icon_paymentcoin_m.png"
class="coin-img">5,000 코인</p>
<p class="coin-price">500,000원</p>
</div>
<div class="coin-item-box" data-no="19">
<p><img src="//images.novelpia.com/old/img/new/plus/v2/icon_paymentcoin_m.png"
class="coin-img">10,000 코인</p>
<p class="coin-price">1,000,000원</p>
</div>
</div>
</div>
</div>
<!--결제수단-->
<div class="basic-modal-background" id="user_donation_pay" style="display:none;">
<div class="user-modal-wrapper">
<div class="coin-modal-header">
<div class="modal-back" id="payBackBtn"><img
src="//images.novelpia.com/old/img/new/plus/v2/arrow_goback_2.png" alt="뒤로가기"></div>
결제수단 선택
</div>
<div class="payment-select-coin">
<div class="coin-item-box select">
<p><img src="//images.novelpia.com/old/img/new/plus/v2/icon_paymentcoin_m.png"
class="coin-img"><span id="payCoin">50</span></p>
<p class="coin-price-pay">5,000원</p>
</div>
</div>
<div class="payment-item-list-wrapper">
<div class="payment-item-box settle-bank-pay" data-val="card">
<img src="//images.novelpia.com/old/img/new/plus/v2/paylogo_card.png">
신용카드
</div>
<div class="payment-item-box settle-bank-pay" data-val="mobile">
<img src="//images.novelpia.com/old/img/new/plus/v2/paylogo_mobile.png">
휴대폰
</div>
<div class="payment-item-box kakao-pay" data-val="corp">
<img src="//images.novelpia.com/old/img/new/plus/v2/paylogo_kakaopay.png">
카카오페이
</div>
<div class="payment-item-box naver-pay">
<img src="//images.novelpia.com/old/img/new/plus/v2/paylogo_naverpay.png">
네이버페이
</div>
<div class="payment-item-box settle-bank-pay" data-val="culturecash">
<img src="//images.novelpia.com/old/img/new/plus/v2/paylogo_cultureland.png">
문화상품권
</div>
<div class="payment-item-box settle-bank-pay" data-val="booknlife">
<img src="//images.novelpia.com/old/img/new/plus/v2/paylogo_booknlife.png">
도서상품권
</div>
<div class="payment-item-box mobile-pop">
<img src="//images.novelpia.com/old/img/new/plus/v2/paylogo_pop.png">
모바일팝
</div>
<div class="payment-item-box settle-bank-pay" data-val="bank">
<img src="//images.novelpia.com/old/img/new/plus/v2/paylogo_send.png">
계좌이체
</div>
<div class="payment-item-box settle-bank-pay" data-val="vbank">
<img src="//images.novelpia.com/old/img/new/plus/v2/paylogo_input.png">
가상계좌 입금
</div>
<div class="payment-item-box toss-pay">
<img src="//images.novelpia.com/old/img/new/plus/logo-toss-pay.svg" style="max-width:70px;">
토스
</div>
</div>
</div>
</div>
</div>
<script>
function open_coin_pay_modal(fn) {
if ("/event/novelgoods_purchase" === "/novel/248128") {
$.cookie('_redirectrurl', 'L2V2ZW50L25vdmVsZ29vZHM=', { expires: 365, path: '/', domain: 'novelpia.com', secure: false });
} else {
$.cookie('_redirectrurl', 'L25vdmVsLzI0ODEyOA==', { expires: 365, path: '/', domain: 'novelpia.com', secure: false });
}
if (typeof fn === 'function') {
fn();
}
$("#user_donation_coin").show();
}
(function () {
const goods_data = { "20": { "goods_no": 20, "goods_name": "30 \ucf54\uc778", "goods_price": 3000, "flag_use": 1, "flag_goods": 4, "goods_membership": 0, "goods_coin": 30, "goods_bonus_coin": 0, "goods_coin_rate": 0 }, "10": { "goods_no": 10, "goods_name": "50 \ucf54\uc778", "goods_price": 5000, "flag_use": 1, "flag_goods": 4, "goods_membership": 0, "goods_coin": 50, "goods_bonus_coin": 0, "goods_coin_rate": 0 }, "11": { "goods_no": 11, "goods_name": "100 \ucf54\uc778", "goods_price": 10000, "flag_use": 1, "flag_goods": 4, "goods_membership": 0, "goods_coin": 100, "goods_bonus_coin": 0, "goods_coin_rate": 0 }, "12": { "goods_no": 12, "goods_name": "200 \ucf54\uc778", "goods_price": 20000, "flag_use": 1, "flag_goods": 4, "goods_membership": 0, "goods_coin": 200, "goods_bonus_coin": 0, "goods_coin_rate": 0 }, "13": { "goods_no": 13, "goods_name": "300 \ucf54\uc778", "goods_price": 30000, "flag_use": 1, "flag_goods": 4, "goods_membership": 0, "goods_coin": 300, "goods_bonus_coin": 0, "goods_coin_rate": 0 }, "21": { "goods_no": 21, "goods_name": "400 \ucf54\uc778", "goods_price": 40000, "flag_use": 1, "flag_goods": 4, "goods_membership": 0, "goods_coin": 400, "goods_bonus_coin": 0, "goods_coin_rate": 0 }, "14": { "goods_no": 14, "goods_name": "500 \ucf54\uc778", "goods_price": 50000, "flag_use": 1, "flag_goods": 4, "goods_membership": 0, "goods_coin": 500, "goods_bonus_coin": 0, "goods_coin_rate": 0 }, "15": { "goods_no": 15, "goods_name": "1,000 \ucf54\uc778", "goods_price": 100000, "flag_use": 1, "flag_goods": 4, "goods_membership": 0, "goods_coin": 1000, "goods_bonus_coin": 0, "goods_coin_rate": 0 }, "16": { "goods_no": 16, "goods_name": "2,000 \ucf54\uc778", "goods_price": 200000, "flag_use": 1, "flag_goods": 4, "goods_membership": 0, "goods_coin": 2000, "goods_bonus_coin": 0, "goods_coin_rate": 0 }, "17": { "goods_no": 17, "goods_name": "3,000 \ucf54\uc778", "goods_price": 300000, "flag_use": 1, "flag_goods": 4, "goods_membership": 0, "goods_coin": 3000, "goods_bonus_coin": 0, "goods_coin_rate": 0 }, "18": { "goods_no": 18, "goods_name": "5,000 \ucf54\uc778", "goods_price": 500000, "flag_use": 1, "flag_goods": 4, "goods_membership": 0, "goods_coin": 5000, "goods_bonus_coin": 0, "goods_coin_rate": 0 }, "19": { "goods_no": 19, "goods_name": "10,000 \ucf54\uc778", "goods_price": 1000000, "flag_use": 1, "flag_goods": 4, "goods_membership": 0, "goods_coin": 10000, "goods_bonus_coin": 0, "goods_coin_rate": 0 } };
const event_init = () => {
$(document).on("click", ".coin-item-box", fn_obj.pay_modal_select_box);
$(document).on("click", "#payBackBtn", fn_obj.coin_modal_open);
//결제관련 이벤트
$(document).on("click", ".settle-bank-pay", fn_obj.open_settlebank_pay_window);
$(document).on("click", ".kakao-pay", fn_obj.open_kakao_pay_window);
$(document).on("click", ".naver-pay", fn_obj.open_naver_pay_window);
$(document).on("click", ".mobile-pop", fn_obj.open_mobile_pop_window);
$(document).on("click", ".toss-pay", fn_obj.open_toss_window);
$(document).on("click", "#coinBack", fn_obj.coin_modal_close);
}
const dom_obj = {
pay_coin: $("#payCoin"),
coin_price: $(".coin-price"),
coin_price_pay: $(".coin-price-pay"),
goods_no: $("#goodsNo"),
}
//////// 기능 ///////
const fn_obj = {
format_number(value) {
return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
},
pay_modal_open() {
$("#user_donation_coin").hide();
$("#user_donation_pay").show();
},
coin_modal_open() {
$("#user_donation_coin").show();
$("#user_donation_pay").hide();
},
coin_modal_close() {
$("#user_donation_coin").hide()
},
pay_modal_select_box() {
fn_obj.pay_modal_open();
const goods_no = $(this).data("no");
dom_obj.goods_no.val(goods_no);
dom_obj.pay_coin.text(fn_obj.format_number(goods_data[goods_no].goods_name));
dom_obj.coin_price_pay.text(`${fn_obj.format_number(goods_data[goods_no].goods_price)}`);
},
/////////////////////////////////////////// 결제 관련 ///////////////////////////////////////////////////////////
async open_kakao_pay_window() {
const dom_mchtTrdNo = $('#STPG_payForm2 [name="mchtTrdNo"]');
const mehtod_type = $(this).data('val');
const goods_no = dom_obj.goods_no.val();
//결제 data init
fn_obj.stpg_init(mehtod_type, goods_no);
const trade_no = dom_mchtTrdNo.val();
//settle bank 결제준비
await ajax_obj.payment_setting(trade_no, goods_no, mehtod_type);
//settle bank 암호화 및 결제창 open
await ajax_obj.pay_settlebank_proc();
},
async open_naver_pay_window() {
const goods_no = dom_obj.goods_no.val();
const url = `https://pay.novelpia.com/pay/naver/step1?goods=${goods_no}&site=novelpia`;
const windowFeatures = "width=750,height=900,scrollbars=yes";
window.open(url, '_blank', windowFeatures);
},
async open_mobile_pop_window() {
const goods_no = dom_obj.goods_no.val();
const url = `/proc/payjoa/mobilepop/${goods_no}`;
const windowFeatures = "width=500,height=600";
window.open(url, '_blank', windowFeatures);
},
async open_toss_window() {
const goods_no = dom_obj.goods_no.val();
let redirectUrl = encodeURIComponent(location.pathname + location.pathname);
if ("/event/novelgoods_purchase" === "/novel/248128") {
redirectUrl = encodeURIComponent("/event/novelgoods");
}
window.open(`https://pay.novelpia.com/toss/payment?goods=${goods_no}&_redirectrurl=${redirectUrl}`, '_blank', 'width=740,height=1040');
},
async open_settlebank_pay_window() {
const dom_mchtTrdNo = $('#STPG_payForm2 [name="mchtTrdNo"]');
const mehtod_type = $(this).data('val');
const goods_no = dom_obj.goods_no.val();
//결제 data init
fn_obj.stpg_init(mehtod_type, goods_no);
const trade_no = dom_mchtTrdNo.val();
//settle bank 결제준비
await ajax_obj.payment_setting(trade_no, goods_no, mehtod_type);
//settle bank 암호화 및 결제창 open
await ajax_obj.pay_settlebank_proc();
},
stpg_init(init_method, goods_no) {
let curr_date = new Date();
let year = curr_date.getFullYear().toString();
let month = ("0" + (curr_date.getMonth() + 1)).slice(-2).toString();
let day = ("0" + (curr_date.getDate())).slice(-2).toString();
let hours = ("0" + curr_date.getHours()).slice(-2).toString();
let mins = ("0" + curr_date.getMinutes()).slice(-2).toString();
let secs = ("0" + curr_date.getSeconds()).slice(-2).toString();
let random4 = ("000" + Math.random() * 10000).slice(-4).toString();
//날짜관련 셋팅
$('#STPG_payForm2').attr("method", "post");
$('#STPG_payForm2 [name="method"]').val(init_method);
$('#STPG_payForm2 [name="trdDt"]').val(year + month + day); //요청일자 세팅
$('#STPG_payForm2 [name="trdTm"]').val(hours + mins + secs); //요청시간 세팅
$('#STPG_payForm2 [name="mchtTrdNo"]').val("PAYMENT" + year + month + day + hours + mins + secs + random4);//주문번호 세팅
//데이터관련 셋팅
$('#STPG_payForm2 [name="pmtPrdtNm"]').val(`${goods_data[goods_no].goods_name}`);
$('#STPG_payForm2 [name="plainTrdAmt"]').val(goods_data[goods_no].goods_price);
$('#STPG_payForm2 [name="mchtParam"]').val(`0|${goods_no}`);
},
}
const ajax_obj = {
//셰틀뱅크 결제등록
async payment_setting(trade_no, goods_no, init_method) {
if (init_method == 'corp') {
$('#STPG_payForm2 [name="mchtTrdNo"]').val('novelpia3');
$('#STPG_payForm2 [name="corpPayCode"]').val('KKP');
} else {
$('#STPG_payForm2 [name="mchtTrdNo"]').val('novelpia');
$('#STPG_payForm2 [name="corpPayCode"]').val('');
}
const url = "/proc/pay_settlebank";
const data = {
trade_no: trade_no,
goods_no: goods_no,
method: init_method,
cmd: "payment_setting",
};
const http_result = await http("post", url, data);
const { status, errmsg, result } = http_result;
if (status === 201) {
alert("결제등록에 실패했습니다. 다시 시도해주세요.");
payment_flag = 0;
return false;
}
// console.log(result);
},
async pay_settlebank_proc() {
let app_store = "WEB";
const target = app_store === "WEB" ? "popup" : "blank"
// form을 기반으로 실제 settlebank 통신
//용도 : SHA256 해쉬 처리 및 민감정보 AES256암호화
$.ajax({
type: "POST",
url: "/proc/pay_encryptParams",
dataType: "json",
data: $("#STPG_payForm2").serialize(),
success: function (rsp) {
//console.log("여기");
//console.log(rsp);
//암호화 된 파라미터 세팅
for (name in rsp.encParams) {
$('#STPG_payForm2 [name=' + name + ']').val(rsp.encParams[name]);
//console.log(name+' = '+rsp.encParams[name]);
};
//가맹점 -> 세틀뱅크로 결제 요청
SETTLE_PG.pay({
env: "https://npg.settlebank.co.kr", //결제서버 URL
mchtId: $('#STPG_payForm2 [name="mchtId"]').val(),
method: $('#STPG_payForm2 [name="method"]').val(),
trdDt: $('#STPG_payForm2 [name="trdDt"]').val(),
trdTm: $('#STPG_payForm2 [name="trdTm"]').val(),
mchtTrdNo: $('#STPG_payForm2 [name="mchtTrdNo"]').val(),
mchtName: $('#STPG_payForm2 [name="mchtName"]').val(),
mchtEName: $('#STPG_payForm2 [name="mchtEName"]').val(),
pmtPrdtNm: $('#STPG_payForm2 [name="pmtPrdtNm"]').val(),
trdAmt: $('#STPG_payForm2 [name="trdAmt"]').val(),
notiUrl: $('#STPG_payForm2 [name="notiUrl"]').val(),
nextUrl: $('#STPG_payForm2 [name="nextUrl"]').val(),
cancUrl: $('#STPG_payForm2 [name="cancUrl"]').val(),
mchtParam: $('#STPG_payForm2 [name="mchtParam"]').val(),
mchtCustId: $('#STPG_payForm2 [name="mchtCustId"]').val(),
autoPayType: $('#STPG_payForm2 [name="autoPayType"]').val(),
plainMchtCustNm: $('#STPG_payForm2 [name="plainMchtCustNm"]').val(),
plainMchtCustId: $('#STPG_payForm2 [name="plainMchtCustId"]').val(),
corpPayCode: $('#STPG_payForm2 [name="corpPayCode"]').val(),
pktHash: rsp.hashCipher, //SHA256 처리된 해쉬 값 세팅
ui: {
type: target, //popup, iframe, self, blank
width: "400", //popup창의 너비
height: "660" //popup창의 높이
}
}, function (rsp) {
//iframe인 경우 전달된 결제 완료 후 응답 파라미터 처리
console.log(rsp);
});
}, error: function (request, status, error) {
console.log("code:" + request.status + "\n" + "message:" + request.responseText + "\n" + "error:" + error);
}
});
}
}
const init = () => {
event_init();
}
init();
})();
</script>
<div class="basic-modal-background" id="user_donation">
<div class="user-modal-wrapper">
<div class="modal-header">
<div class="donation-modal-header-container donation-containers">
<div class="donation-modal-user-items">
<div class="donation-modal-user-img">
<img
src="//images.novelpia.com/imagebox/71/718b9086aaa37959b5fbfd30b81b6be7_61185_1708759103.icon" />
</div>
<div class="donation-modal-user-text-box">
<div>서레이 작가님 후원하기</div>
<div class="donation-modal-user-text-info">작가님께 응원의 뜻을 전하는 기능입니다.</div>
<div class="donation-modal-user-coin">
<div>잔여코인 <span id="memGoldCoin">0</span></div>
</div>
</div>
<img onclick="$('#user_donation').hide();" class="donation-close"
src="/img/new/plus/ico_plus_02.png" alt="후원창 닫기">
</div>
</div>
</div>
<div class="donation-modal-benefit-container donation-containers">
<div class="container-main-text">후원 혜택</div>
<div class="donation-modal-benefit-box">
<div>
<div class="donation-mdoal-benefit-text">
·후원 휘장
<img src="//images.novelpia.com/img/sponsor/help.png" style="cursor: pointer" />
<div class="benefit-info">
<div class="benefit-info-top">
<div>후원 휘장이란? <span id="infoClose">x</span></div>
<p>해당 작가님께 후원을 하실수록 휘장의 등급이 올라갑니다. 작품에 댓글을 달면서 휘장을 뽐내보세요!</p>
<p class="info-text">※ 해당 후원 휘장은 후원한 작가님의 작품 댓글에서만 노출됩니다.</p>
</div>
<div class="benefit-info-bottom">
<h6>※ 누적 코인에 따른 후원 휘장 등급 안내</h6>
<div><img src="//images.novelpia.com/img/sponsor/1_wood.png">나무 휘장 : 누적 코인 10코인
</div>
<div><img src="//images.novelpia.com/img/sponsor/2_steal.png">강철 휘장 : 누적 코인 100코인
</div>
<div><img src="//images.novelpia.com/img/sponsor/3_knight.png">적색 휘장 : 누적 코인 500코인
</div>
<div><img src="//images.novelpia.com/img/sponsor/4_silver.gif">은 휘장 : 누적 코인 1,000코인
</div>
<div><img src="//images.novelpia.com/img/sponsor/5_gold.gif">황금 휘장 : 누적 코인 5,000코인
</div>
</div>
</div>
</div>
<div>
<div class="insignia-imges">
<img src="//images.novelpia.com/img/sponsor/1_wood.png" />
<img src="//images.novelpia.com/img/sponsor/2_steal.png" />
<img src="//images.novelpia.com/img/sponsor/3_knight.png" />
<img src="//images.novelpia.com/img/sponsor/4_silver.gif" />
<img src="//images.novelpia.com/img/sponsor/5_gold.gif" />
</div>
<div class="insignia-percent">
<div class="dot-box">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div class="dot-gauge">
<img src="//images.novelpia.com/img/sponsor/gauge_check_icon.svg">
</div>
</div>
</div>
<div class="donation-modal-benefit-info-text">
<div class="donation-modal-benefit-info-text-arrow"></div>
<span id="nextBenefitCoin"></span>코인 더 후원시, <span id="nextBenefitName">강철휘장</span> 획득!
</div>
</div>
<div></div>
</div>
</div>
</div>
<div class="donation-containers">
<div class="container-main-text">전달하실 코인</div>
<div>
<div class="donation-modal-input-coin-box">
<input type="nubmer" value="0" id="coinBox" />코인
</div>
<div class="add-coin-btn-box">
<div data-val="1">+1</div>
<div data-val="10">+10</div>
<div data-val="50">+50</div>
<div data-val="100">+100</div>
<div data-val="1000">+1,000</div>
</div>
</div>
</div>
<div class="donation-containers">
<div class="container-main-text">전달하실 메세지</div>
<select class="donation-send-msgbox" style="height: 44px; text-indent: 15px;">
<option value="0">오늘도 좋은 작품 감사합니다!</option>
<option value="1">캐릭터가 매력있어요!!</option>
<option value="2">작은 금액이지만 마음을 담아 보냅니다.</option>
<option value="3">잘 보고 있어요. 제가 언제나 응원한다는거 잊지 마세요!</option>
<option value="4">작가님의 건강을 기원하며 완결까지 파이팅하시길 바랍니다.</option>
<option value="5">정주행 중입니다~</option>
<option value="6"></option>
</select>
</div>
<div class="donation-modal-btn-container donation-containers">
<button type="button" class="donation-cache-box donation-btns"
onclick="open_coin_pay_modal($('#user_donation').hide());">충전하기</button>
<button id="sponsorGiveBox" type="button" class="donation-give-box donation-btns"
onclick="sponsor_give_click()">후원하기</button>
<button type="button" class="donation-close-box donation-btns"
onclick="$('#user_donation').hide();">닫기</button>
</div>
</div>
</div>
</div><!-- modal -->
<div class="donation-complete-modal-background"></div>
<div class="donation-complete-modal-container">
<div></div>
<div class="donation-complete-modal-img">
<div>
<img id="benefitCompleteImg" src="//images.novelpia.com/img/sponsor/benefit_complete_img.png"
style="width: 100%; max-width: 180px;margin-bottom: 15px;" />
</div>
<div class="donation-complete-modal-img-text">
후원이 완료 되었습니다
</div>
</div>
<div class="donation-complete-modal-wirter-msg">
</div>
<div class="donation-complete-btn-item">
<div id="sponsorCompleteBtn" class="donation-complete-btn" onclick="sponsor_give_close();">닫기</div>
<div id="sponsorCompleteBtn" class="donation-complete-btn donation-complete-btn-donation"
onclick="goto_sponsor_record();">후원내역</div>
</div>
</div>
<div class="donation-benefit-modal-container">
<div style="display: flex;justify-content: flex-end;">
<img onclick="$('.donation-benefit-modal-container').hide();" class="donation-close"
src="/img/new/plus/ico_plus_02.png" alt="후원창 닫기">
</div>
<div class="donation-benefit-items">
<div class="benefit-img">
<img src="//images.novelpia.com/img/sponsor/5_gold.gif" />
</div>
<div class="benefit-text">
<span id="benefitName"></span>을 획득했습니다! <br />
댓글에서 휘장을 자랑해보세요.
</div>
</div>
<div>
<div id="donationBenefitBtn" class="donation-complete-btn"
onclick="$('.donation-benefit-modal-container').hide();">닫기</div>
</div>
</div>
<script>
$(".add-coin-btn-box > div").on("click", function () {
let addCoin = Number($(this).attr("data-val"));
let inputCoin = Number($("#coinBox").val());
let finaCoin = addCoin + inputCoin;
$("#coinBox").val(finaCoin);
});
$(".donation-mdoal-benefit-text").on("click", function () {
$(".benefit-info").css("display", "block");
})
$("#infoClose").on("click", function (e) {
$(".benefit-info").css("display", "none");
e.stopPropagation();
})
function AddComma(num) {
num = num || 0;
var regexp = /\B(?=(\d{3})+(?!\d))/g;
return num.toString().replace(regexp, ',');
}
async function open_donation_modal() {
let novelNo = Number("248128") || 0;
let writerMemno = Number("2301642") || 0;
const url = "/proc/sponsor_proc";
const data = {
"cmd": "get_user_sponsor_data",
"csrf": "",
"novel_no": novelNo,
"writer_mem_no": writerMemno,
};
const httpResult = await http("post", url, data);
const { code, errmsg, status, coin_percent, mem_coin, sponsor_coin, benefit_list, next_benefit_data, next_coin } = httpResult;
if (status != 200) {
alert(errmsg || "통신오류");
return false;
}
//dom 요소 변경
$("#memGoldCoin").html(AddComma(mem_coin));
$(".dot-gauge").css("width", `${coin_percent}%`);
$(".donation-modal-benefit-info-text-arrow").css("left", `calc(${coin_percent + 4}% - 5px)`);
$("#nextBenefitName").html(next_benefit_data.benefit_name);
$("#nextBenefitCoin").html(next_coin);
if (next_coin === 0) {
$(".donation-modal-benefit-info-text").html("모든 휘장을 획득하셨습니다");
}
//휘장 이미지 html
let benefitImgesHtml = R.pipe(
R.mapObjIndexed((val, key) => `<img src="${G_CDN_DOMAIN_IMG}${val.benefit_img}" />`),
R.values,
R.join("")
)(benefit_list);
$(".insignia-imges").html(benefitImgesHtml);
$('#user_donation').show();
}
async function sponsor_give_click() {
$('#sponsorGiveBox').prop('disabled', true);
let sponsorText = $(".donation-send-msgbox").val() || "";
//let sponsorTextType = $(".donation-send-msgbox").attr("data-type") || "";
let novelNo = Number("248128") || 0;
let writerMemno = Number("2301642") || 0;
let sponsorCoin = Number($('#coinBox').val()) || 0;
if (containsWindowsEmoji(sponsorText)) {
alert('메세지에 이모지를 넣을 수 없습니다. 다시 입력해주세요.');
return false;
}
const mem_admin = 0;
if (mem_admin >= 5 && mem_admin <= 6) {
return false;
}
const url = "/proc/sponsor_proc";
const data = {
"cmd": "insert_sponsor",
"csrf": "",
"user_sponsor_text": sponsorText,
"novel_no": novelNo,
"writer_mem_no": writerMemno,
"user_sponsor_coin": sponsorCoin,
// "sponsorTextType" : sponsorTextType,
};
const httpResult = await http("post", url, data);
const { code, errmsg, status, writer_msg, benefit_data, img_url, is_pass_mission } = httpResult;
if (status != 200) {
alert(errmsg || "통신오류");
$('#sponsorGiveBox').prop('disabled', false);
if (status == 401) {
location.href = "/page/age_auth?adult=1";
}
return false;
}
//작가 메세지가 있을경우
if (writer_msg) {
// console.log(writer_msg);
$(".donation-complete-modal-wirter-msg").html(writer_msg);
$(".donation-complete-modal-wirter-msg").show();
}
if (Object.keys(benefit_data).length > 0 && benefit_data.benefit_result > 0) {
$(".donation-benefit-modal-container").show();
$(".benefit-img > img").attr("src", `${G_CDN_DOMAIN_IMG}${benefit_data.benefit_img}`);
$("#benefitName").html(benefit_data.benefit_name);
}
if (is_pass_mission === true) {
viewer_call_toast_msg('', 2);
}
$("#benefitCompleteImg").attr("src", img_url);
$("#startBtn").trigger("click");
$(".donation-complete-modal-background").fadeIn(100);
$(".donation-complete-modal-container").fadeIn(200);
$('#sponsorGiveBox').prop('disabled', false);
}
function sponsor_give_close() {
location.reload();
}
function goto_sponsor_record() {
location.href = "/user_donation";
}
function goto_coin_shop() {
let encodeUrl = btoa(window.location.pathname);
$.cookie('_redirectrurl', encodeUrl, { expires: 2, path: '/', domain: 'novelpia.com', secure: false });
location.href = "/coin_shop";
}
function containsWindowsEmoji(text) {
const windowsEmojiRegex = /[\uD800-\uDBFF][\uDC00-\uDFFF]/;
return windowsEmojiRegex.test(text);
}
</script>
<!-- BASIC MODAL -->
<div id="user_tag_add" class="modal fade s_inv">
<div class="modal-dialog modal-dialog-vertical-center" role="document" style="min-width:320px;max-width:320px; top: calc(50% - 200px);
position: fixed;
left: calc(50% - 170px);">
<div class="modal-content bd-0 tx-14">
<div class="modal-header pd-y-20 pd-x-25">
<h6 class="tx-14 mg-b-0 tx-uppercase tx-inverse tx-bold">나만의태그 관리</h6>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body pd-25" style="font-size:13px;">
<span class="lh-3 mg-b-20"
style="font-size:13px;line-height:16px;"><!--<i class="icon ion-chatbox-working"></i> 안내사항-->작가
태그와 별개로, 나만의 태그를 추가하실 수 있습니다.</span><br>
<p class="mg-b-5">
<input class="form-control" id="user_tag">
</p>
</div>
<div class="modal-footer s_inv">
<button type="button" class="btn btn-danger pd-x-20"
onclick="if(confirm('정말 태그 신청하시겠습니까?')){ user_tag_add(); }">나만의 태그 저장하기</button>
<button type="button" class="btn btn-dark pd-x-20"
onclick="$('#user_tag_add').modal('hide');">닫기</button>
</div>
</div>
</div><!-- modal-dialog -->
</div><!-- modal -->
<link rel='stylesheet' href='/css/plus_payment_modal.css?v=1760926093'>
<script type="module">
const app = new Vue({
el: '#payment_app',
data: {
goods_data: { "1": { "goods_no": 1, "goods_name": "PLUS \uc6d4 \uc815\uae30 \uad6c\ub3c5", "goods_price": 9900, "flag_use": 1, "flag_goods": 1 }, "4": { "goods_no": 4, "goods_name": "PLUS \uc6d4 \uc815\uae30 \uad6c\ub3c5", "goods_price": 14900, "flag_use": 1, "flag_goods": 1 }, "7": { "goods_no": 7, "goods_name": "PLUS \uc6d4 \uc815\uae30 \uad6c\ub3c5", "goods_price": 0, "flag_use": 1, "flag_goods": 2 }, "8": { "goods_no": 8, "goods_name": "PLUS \uc6d4 \uc815\uae30 \uad6c\ub3c5(\uad70\ud560\uc778)", "goods_price": 6900, "flag_use": 1, "flag_goods": 2 }, "1000": { "goods_no": 1000, "goods_name": "PLUS \uc6d4 \uc815\uae30 \uad6c\ub3c5", "goods_price": 6900, "flag_use": 1, "flag_goods": 2 }, "1001": { "goods_no": 1001, "goods_name": "PLUS \uc6d4 \uc815\uae30 \uad6c\ub3c5", "goods_price": 12900, "flag_use": 1, "flag_goods": 2 }, "2": { "goods_no": 2, "goods_name": "PLUS 30\uc77c \uc774\uc6a9\uad8c", "goods_price": 16900, "flag_use": 1, "flag_goods": 3 }, "3": { "goods_no": 3, "goods_name": "PLUS 180\uc77c \uc774\uc6a9\uad8c", "goods_price": 69800, "flag_use": 0, "flag_goods": 3 }, "5": { "goods_no": 5, "goods_name": "PLUS 180\uc77c \uc774\uc6a9\uad8c", "goods_price": 73000, "flag_use": 0, "flag_goods": 3 }, "6": { "goods_no": 6, "goods_name": "PLUS 365\uc77c \uc774\uc6a9\uad8c", "goods_price": 129000, "flag_use": 0, "flag_goods": 3 } },
num: 1,
goods: 4,
is_viewer: false,
viewer_page: "novel",
app_store: 'WEB',
app_version: '0',
mem_no: 0,
is_first_payment: false,
is_secret_mode: is_secret_mode(),
is_plus_payment_agree: false,
stat_induce_pay: '21',
induce_type: '3',
induce_flag_type: '22',
content_no: '',
sub_sale_flag: '0',
sub_sale_phone: '0',
is_membership_discount_promotion: null,
},
methods: {
login() {
this.close();
member_login_modal_on();
},
pay(pg_type) {
if (this.mem_no === 0) {
alert('로그인 후 결제 가능합니다.');
this.login();
return false;
}
if (this.is_plus_payment_agree === false) {
alert('구독 안내사항에 동의해주시기 바랍니다.');
return false;
}
let url = '';
switch (pg_type) {
case 'naverpay':
url = `https://pay.novelpia.com/pay/naver/step1?goods=${this.goods}&site=novelpia`;
break;
case 'kakaopay':
url = `https://pay.novelpia.com/kakaopay/payment?goods=${this.goods}&_redirectrurl=%2Fnovel%2F248128`;
break;
case 'toss':
url = `https://pay.novelpia.com/toss/payment?goods=${this.goods}&_redirectrurl=%2Fnovel%2F248128`;
break;
default:
return false;
break;
}
$.cookie('_redirectrurl', 'L25vdmVsLzI0ODEyOA==', { expires: 365, path: '/', domain: 'novelpia.com', secure: false });
window.open(url, 'payment_popup', 'width=500,height=600');
},
back() {
if (this.is_viewer === true && this.induce_flag_type == '25') {
location.href = `/comic_episode/${this.content_no}`;
} else if (this.is_viewer === true && this.induce_flag_type == '22') {
location.href = `/novel/${this.content_no}`;
} else {
//location.href = '/';
this.close();
}
},
event_back() {
// 100원 이벤트 이탈시 1개월 단일이용권 체크
this.form_data_init(2);
},
event_back2() {
if (this.is_viewer === true) {
this.form_data_init(7);
if (this.viewer_page == "viewer") {
location.href = `/novel/${this.content_no}`;
} else if (this.viewer_page == "comic") {
location.href = `/comic_episode/${this.content_no}`;
} else {
location.href = `/`;
}
} else {
this.form_data_init(7);
}
},
form_data_init(goods) {
if (goods == 2) {
this.num = 11;
$('.mchtId_class').val('novelpia');
$('.autoPayType_class').val('');
} else if (goods == 7) {
this.num = 10;
$('.mchtId_class').val('novelpia2');
$('.autoPayType_class').val('M');
} else {
$('.mchtId_class').val('novelpia2');
$('.autoPayType_class').val('M');
}
this.goods = goods;
$('#induce_goods_no').val(goods);
$('.settle_amount').val(this.goods_data[this.goods].goods_price);
$('.pmtPrdtNm_class').val(this.goods_data[this.goods].goods_name);
$('.settle_param').val(this.mem_no + "|" + this.goods);
},
open() {
$('#plus_payment_modal').modal('show');
},
set_cookie_payment() {
$.cookie('modal_flag_type', this.num, { expires: 1, path: '/', domain: 'novelpia.com', secure: false });
$.cookie('induce_flag_type', this.induce_flag_type, { expires: 1, path: '/', domain: 'novelpia.com', secure: false }); // 결제추적
$.cookie('induce_type', this.induce_type, { expires: 1, path: '/', domain: 'novelpia.com', secure: false }); // 결제추적
$.cookie('induce_is_first', this.is_first_payment, { expires: 1, path: '/', domain: 'novelpia.com', secure: false }); // 결제추적
},
close() {
$('#plus_payment_modal').modal('hide');
},
event_close() {
if (this.is_viewer === true) {
//this.form_data_init(7);
if (this.viewer_page == "viewer") {
location.href = `/novel/${this.content_no}`;
} else if (this.viewer_page == "comic") {
location.href = `/comic_episode/${this.content_no}`;
}
} else {
this.form_data_init(7);
$('#plus_payment_modal').modal('hide');
}
},
toggle_plus_policy() {
$('.plus-pay-folding-info-v2').toggle();
},
modal_show() {
if (this.num == 10) {
$('#sub_sale_modal').show();
}
},
sub_modal_check(item) {
if (this.sub_sale_phone == 0) {
if (confirm("본인인증이 필요합니다.")) {
location.href = "/page/age_auth?adult=1";
} else {
document.getElementById(item).checked = false;
}
}
}
},
mounted() {
this.set_cookie_payment();
if (this.num == 10) {
this.form_data_init(7);
} else {
this.form_data_init(this.goods);
}
}
});
</script>
<div id="payment_app">
<template v-if="num === 1">
<div id="plus_payment_modal" :class="{'viewer': is_viewer === true}" class="basic-modal-background"
data-backdrop="">
<div class="plus_payment_all_wrapper">
<div class="plus-modal-wrapper-v2 basic-pay-wrapper-v2 ">
<div class="plus-modal-close-v2">
<img @click="back" class="plus-modal-close-v2-img" src="/img/new/plus/ico_plus_02.png"
alt="닫기버튼">
</div>
<div class="plus-modal-top-v2">
<img class="" src="//images.novelpia.com/img/new/plus/plus_payment_modal_top_03-4.png">
</div>
<template v-if="app_store === 'IOS'">
<div style="margin:40px; text-align:center;color:#666;">현재 IOS 앱에서는 결제 서비스를 지원하고 있지 않습니다.
</div>
</template>
<template v-else>
<template v-if="is_secret_mode == 1">
<div class="plus-modal-top-v2" style="text-align:center;">
<p>시크릿 모드에서는 구독 할 수 없습니다</p>
</div>
</template>
<template v-else>
<div class="plus-top-box-v2">
<div>
<span>상품정보</span>
<span v-if="is_first_payment === true">PLUS 월정기 멤버십 + <img class=""
src="//images.novelpia.com/img/new/icon/bronze.png"></span>
<span v-else>{{ goods_data[goods].goods_name }}</span>
</div>
<div>
<span>총 상품금액</span>
<span><span v-if="is_membership_discount_promotion === true"
class="sale-txt">할인권 적용중</span> {{
Number(goods_data[goods].goods_price).toLocaleString() }}원</span>
</div>
</div>
<div class="plus-pay-folding-v2">
<div class="plus-pay-folding-title-v2">
<input type="checkbox" v-model="is_plus_payment_agree" id="plus_payment_agree">
<label for="plus_payment_agree">
<p></p><span>구독 안내사항</span><span>에 동의합니다.</span>
</label>
<i class="icon ion-ios-help-outline" @click="toggle_plus_policy"></i>
</div>
<div class="plus-pay-folding-info-v2">
<p>∙ 본 상품은 출판물에 해당하여 부가가치세 면세 대상입니다.</p>
<p>∙ 이미 구독 중인 상품을 재차 구독할 경우 이용 가능 기간이 추가될 수 있으나, 상품에 따라 중복 구독이 제한될 수 있습니다.</p>
<p>∙ 구독 상품은 동일 계정으로 로그인한 모든 디바이스에서 이용 가능합니다.</p>
<p>∙ 본 상품은 정기결제 방식으로 제공되며 전월에 결제가 완료된 일자를 기준으로 매월 동일한 일자에 자동으로 갱신됩니다.</p>
<p>∙ 회원은 다음 구독 갱신일에 대한 결제 처리가 개시되기 전까지 구독을 해지할 수 있으며, 해지 시 다음 회차부터 결제가 이루어지지
않습니다.</p>
<p>∙ 구독 해지는 다음 결제부터의 자동 결제를 중단하는 기능이며 이미 결제된 구독 기간은 해지 이후에도 이용할 수 있습니다.</p>
<p>∙ 본 상품은 월 단위로 이용 권한이 유지되는 구독형 서비스로, 일부 기간을 이용하지 않더라도 구독 기간은 동일하게 적용됩니다.</p>
<p>∙ 구독 결제가 완료되는 즉시 서비스 제공이 개시되며 이용 내역이 발생한 경우 환불이 제한될 수 있습니다.</p>
<p>∙ 결제 진행 중 구독 화면을 종료할 경우 구독이 정상적으로 완료되지 않을 수 있습니다.</p>
</div>
</div>
<p class="plus-pay-v2-title">구독 수단 선택하기</p>
<div class="plus-pay-v2">
<div class="settle_mobile_pay">
<img class="" src="/img/new/plus/plus_pay_phone.png">
<span>휴대폰</span>
</div>
<div class="settle_card_pay">
<img class="" src="/img/new/plus/plus_pay_card.png">
<span>신용카드</span>
</div>
<div @click="pay('naverpay')">
<img class="" src="/img/new/plus/plus_pay_naver.png">
<span>네이버페이</span>
</div>
<div class="settle_kakaopay">
<img src="/img/new/plus/plus_pay_kakao.png">
<span>카카오페이</span>
</div>
<div @click="pay('toss')">
<img src="//image.novelpia.com/img/new/plus/logo_tosspay.png">
<span>토스</span>
</div>
</div>
</template>
</template>
</div>
</div>
</div>
</template>
<template v-if="num === 10">
<div id="plus_payment_modal" :class="{'viewer': is_viewer === true}" class="basic-modal-background"
data-backdrop="">
<div class="plus_payment_all_wrapper">
<div class="plus-modal-wrapper-v2 basic-pay-wrapper-v2 ">
<div class="plus-modal-close-v2">
<img @click="event_back" class="plus-modal-close-v2-img" src="/img/new/plus/ico_plus_02.png"
alt="닫기버튼">
</div>
<div class="plus-modal-top-v2" style="margin-top: 0px; margin-bottom:10px;">
<img class="" v-if="is_secret_mode != 1" src="">
</div>
<template v-if="app_store === 'IOS'">
<div style="margin:40px; text-align:center;color:#666;">현재 IOS 앱에서는 결제 서비스를 지원하고 있지 않습니다.
</div>
</template>
<template v-else>
<template v-if="is_secret_mode == 1">
<div class="plus-modal-top-v2" style="text-align:center;">
<p>시크릿 모드에서는 구독 할 수 없습니다.</p>
</div>
</template>
<template v-else>
<div class="plus-top-box-v2">
<div>
<span>상품정보</span>
<span v-if="is_first_payment === true">PLUS 월정기 멤버십 + <img class=""
src="//images.novelpia.com/img/new/icon/bronze.png"></span>
<span v-else>PLUS 월정기 멤버십</span>
</div>
<div>
<span>총 상품금액</span>
<span>0원</span>
</div>
</div>
<div class="plus-pay-folding-v2">
<div class="plus-pay-folding-title-v2">
<input type="checkbox" v-model="is_plus_payment_agree" id="plus_payment_agree"
@click="sub_modal_check('plus_payment_agree')">
<label for="plus_payment_agree">
<p></p><span>구독 안내사항</span><span>에 동의합니다.</span>
</label>
<i class="icon ion-ios-help-outline" @click="toggle_plus_policy"></i>
</div>
<div class="plus-pay-folding-info-v2">
<p>∙ 첫 구독 프로모션 상품은 구독 수단 등록 후 이용 가능하며, 다음 구독 갱신일부터 14,900원이 결제됩니다. </p>
<p>∙ 해당 상품은 출판물로 면세항목을 적용 받습니다.</p>
<p>∙ 해당 상품은 대상자에 한해 본인명의 기준으로 최초 1회 이용이 가능한 상품입니다.</p>
<p>∙ 해당 상품은 모든 디바이스에서 자유롭게 사용 가능합니다.</p>
<p>∙ 해당 상품은 다음 구독 갱신일까지 이용가능한 상품이며, 매월 동일 일자에 갱신됩니다.</p>
<p>∙ 구독이 완료되기 전에 구독 화면을 닫을 경우, 구독이 완료되지 않을 수 있습니다.</p>
<p>∙ 각 프로모션 및 할인 혜택은 사전 예고 없이 종료될 수 있습니다.</p>
</div>
</div>
<p class="plus-pay-v2-title">구독 수단 선택하기</p>
<div class="plus-pay-v2">
<div class="settle_card_pay">
<img class="" src="/img/new/plus/plus_pay_card.png">
<span>신용카드</span>
</div>
<div @click="pay('naverpay')">
<img class="" src="/img/new/plus/plus_pay_naver.png">
<span>네이버페이</span>
</div>
<div @click="pay('kakaopay')">
<img src="/img/new/plus/plus_pay_kakao.png">
<span>카카오페이</span>
</div>
</div>
</template>
</template>
</div>
</div>
</div>
</template>
<template v-if="num === 11">
<div id="plus_payment_modal" :class="{'viewer': is_viewer === true}" class="basic-modal-background"
data-backdrop="">
<div class="plus_payment_all_wrapper">
<div class="plus-modal-wrapper-v2 basic-pay-wrapper-v2 exit-100event">
<div class="plus-modal-close-v2">
<img @click="event_close" class="plus-modal-close-v2-img"
src="/img/new/plus/ico_plus_02.png" alt="닫기버튼">
</div>
<div class="plus-modal-top-v2 exit-100-txt" style="margin-top: 0px; margin-bottom:10px;">
<p class="txt-100-line1">구독 상품이 부담스럽다면</p>
<p class="txt-100-line2"><span>한달만</span> 이용해보세요!</p>
</div>
<template v-if="app_store === 'IOS'">
<div style="margin:40px; text-align:center;color:#666;">현재 IOS 앱에서는 결제 서비스를 지원하고 있지 않습니다.
</div>
</template>
<template v-else>
<template v-if="is_secret_mode == 1">
<div class="plus-modal-top-v2" style="text-align:center;">
<p>시크릿 모드에서는 구독 할 수 없습니다.</p>
</div>
</template>
<template v-else>
<div class="plus-top-box-v2">
<div>
<span>상품정보</span>
<span v-if="is_first_payment === true">1개월 플러스 이용권</span>
<span v-else>PLUS 멤버십 구독권</span>
</div>
<div>
<span>총 상품금액</span>
<span>16,900원</span>
</div>
</div>
<div class="plus-pay-folding-v2">
<div class="plus-pay-folding-title-v2">
<input type="checkbox" v-model="is_plus_payment_agree" id="plus_payment_agree"
@click="sub_modal_check('plus_payment_agree')">
<label for="plus_payment_agree">
<p></p><span>구독 안내사항</span><span>에 동의합니다.</span>
</label>
<i class="icon ion-ios-help-outline" @click="toggle_plus_policy"></i>
</div>
<div class="plus-pay-folding-info-v2">
<p>∙ 해당 상품은 출판물로 면세항목을 적용 받습니다.</p>
<p>∙ 해당 상품은 대상자에 한해 본인명의 기준으로 최초 1회 이용이 가능한 상품입니다.</p>
<p>∙ 해당 상품은 모든 디바이스에서 자유롭게 사용 가능합니다.</p>
<p>∙ 해당 상품은 다음 구독 갱신일까지 이용가능한 상품이며, 매월 동일 일자에 갱신됩니다.</p>
<p>∙ 휴대전화를 이용하여 구독한 상품의 취소를 원하실 경우, 당월 구독건에 한해서 가능합니다.</p>
<p>∙ 콘텐츠 제공을 개시하는 등의 사유가 있을 경우 환불에 제한이 있을 수 있습니다.</p>
<p>∙ 구독이 완료되기 전에 구독 화면을 닫을 경우, 구독이 완료되지 않을 수 있습니다.</p>
<p>∙ 각 프로모션 및 할인 혜택은 사전 예고 없이 종료될 수 있습니다.</p>
</div>
</div>
<p class="plus-pay-v2-title">구독 수단 선택하기</p>
<div class="plus-pay-v2">
<div class="settle_mobile_pay">
<img class="" src="/img/new/plus/plus_pay_phone.png">
<span>휴대폰</span>
</div>
<div class="settle_card_pay">
<img class="" src="/img/new/plus/plus_pay_card.png">
<span>신용카드</span>
</div>
<div @click="pay('naverpay')">
<img class="" src="/img/new/plus/plus_pay_naver.png">
<span>네이버페이</span>
</div>
<div @click="pay('kakaopay')">
<img src="/img/new/plus/plus_pay_kakao.png">
<span>카카오페이</span>
</div>
<div @click="pay('toss')">
<img src="//image.novelpia.com/img/new/plus/logo_tosspay.png">
<span>토스</span>
</div>
</div>
<div class="exit-100-button">
<button class="btn-100-go" @click="form_data_init(7)">아니에요. 0원에 구독할게요.</button>
</div>
</template>
</template>
</div>
</div>
</div>
</template>
</div>
<link rel='stylesheet' href='/css/free_ticket_modal.css?v=1760926093'>
<script>
const free_ticket = {
mem_no: 0,
csrf: '',
viewer_page: false,
content_no: 0,
flag_type: 0,
episode_no: 0,
start_range_start: 0,
async receive_free_ticket(ticket_no) {
const param = {
cmd: 'free_ticket_receive',
csrf: this.csrf,
ticket_no: ticket_no
}
const result = await http('post', '/proc/free_ticket', param);
const { status, errmsg, code } = result;
if (status !== 200) {
alert(errmsg);
if (code == 1000) { // 로그인
this.login();
} else if (code == 1006) { // 본인인증
this.age_auth();
} else {
location.reload();
}
return false;
}
alert('발급되었습니다.');
location.reload();
},
async use_free_ticket() {
const param = {
cmd: 'use_free_ticket',
csrf: this.csrf,
content_no: this.content_no,
flag_type: this.flag_type,
episode_no: this.episode_no,
episode_range_start: this.episode_range_start,
};
const result = await http('post', '/proc/free_ticket', param);
const { status, errmsg, code } = result;
if (status !== 200) {
alert(errmsg);
if (code == 1000) { // 로그인
this.login();
} else if (code == 1006) { // 본인인증
this.age_auth();
} else {
//location.reload();
}
return false;
}
location.href = `/viewer/${this.episode_no}`;
},
back() {
this.close_modal();
},
plus() {
member_plus_modal_on();
},
join() {
member_join_modal_on();
},
login() {
member_login_modal_on();
},
age_auth() {
location.href = '/page/age_auth';
$.cookie('_redirectrurl', 'L25vdmVsLzI0ODEyOA==', { expires: 365, path: '/', domain: 'novelpia.com', secure: false });
},
open_modal(content_no, flag_type, episode_no, episode_cnt, start_range_start) {
this.content_no = content_no;
this.flag_type = flag_type;
this.episode_no = episode_no;
this.start_range_start = start_range_start;
$('#free_ticket_modal #episode_cnt').text(episode_cnt);
$('#free_ticket_modal').modal('show');
},
close_modal() {
$('#free_ticket_modal').modal('hide');
},
}
const member_plus_modal_on = () => {
$('#plus_payment_modal').modal('show');
}
</script>
<div class="free-ticket-modal-background s_inv" id="free_ticket_modal">
<div class="free-ticket-modal-wrapper">
<div class="free-ticket-modal-top">
<div class="free-ticket-modal-name"></div>
<div class="free-ticket-modal-close" data-dismiss="modal" onclick="free_ticket.back();"></div>
</div>
<div class="free-ticket-modal-contents">
<div class="free-ticket-img-box">
<img class="s_inv" src="//images.novelpia.com/img/new/icon/free_ticket_ico.svg" width="28">
</div>
<div class="free-ticket-sub-title">
보유열람권 <span class="free-ticket-cnt"></span>
</div>
<div class="free-ticket-title">
<div> <span id="episode_cnt"></span></div>
</div>
<div class="mt-4">
<button type="button" class="btn btn-free-ticket-use" data-dismiss="modal"
onclick="free_ticket.use_free_ticket();">열람권 사용하고 보기</button>
<button type="button" class="s_inv btn btn-free-ticket-plus" data-dismiss="modal"
onclick="free_ticket.plus()">PLUS 멤버십 구독하고 모든 회차 보기</button>
</div>
</div>
</div>
</div>
<script src='https://npg.settlebank.co.kr/resources/js/v1/SettlePG.js' type='text/javascript'></script>
<input type="hidden" id="induce_goods_no" value="1">
<form id="STPG_payForm">
<input type="hidden" name="mchtId" class="mchtId_class">
<input type="hidden" name="method" value="">
<input type="hidden" name="mchtName" value="노벨피아"> <!-- 상점한글명 -->
<input type="hidden" name="mchtEName" value="Novelpia"> <!-- 상점영문명 -->
<input type="hidden" name="pmtPrdtNm" class="pmtPrdtNm_class" value="PLUS 월 정기 구독">
<input type="hidden" name="trdAmt" value=""> <!-- 거래금액(암호문) -->
<input type="hidden" name="plainTrdAmt" class="settle_amount">
<input type="hidden" name="mchtParam" class="settle_param" value="0|1" /> <!-- 상점예약필드 -->
<input type="hidden" name="notiUrl" value="https://pay.novelpia.com/settlebank/settle_noti"> <!-- 결과처리 URL -->
<input type="hidden" name="nextUrl" value="https://pay.novelpia.com/settlebank/pay_receiveResult">
<!-- 결과화면 URL -->
<input type="hidden" name="cancUrl" value="https://pay.novelpia.com/settlebank/pay_receiveResult">
<!-- 결제취소 URL -->
<input type="hidden" name="trdDt" value="">
<input type="hidden" name="trdTm" value="">
<input type="hidden" name="autoPayType" class="autoPayType_class" value="M">
<input type="hidden" name="mchtTrdNo" value="">
<input type="hidden" name="corpPayCode" value="">
<!-- 승인 요청 파라미터(옵션) -->
<input type="hidden" name="plainMchtCustNm" value="" /> <!-- 고객명(평문) -->
<input type="hidden" name="plainMchtCustId" value="" />
<!-- 암호화 처리 후 세팅될 파라미터-->
<input type="hidden" name="mchtCustId" /> <!-- 상점고객아이디(암호문) -->
</form>
<script>
let payment_flag = 1;
$(document).on('click', '.settle_mobile_pay', async function () {
if (!$('#plus_payment_modal #plus_payment_agree[type=checkbox]').is(':checked') == true) {
alert('구독 안내사항에 동의해주시기 바랍니다.');
return false;
}
const mem_no = '0';
if (mem_no == 0) {
alert('로그인 후 결제 가능합니다.');
member_login_modal_on();
return false;
}
let app_store = "WEB";
const target = app_store === "WEB" ? "popup" : "blank";
const goods_no = $("#induce_goods_no").val();
if (goods_no == 8) {
await discount_check(mem_no, goods_no);
}
$('#STPG_payForm [name="mchtId"]').val('novelpia2');
$('#STPG_payForm [name="autoPayType"]').val('M');
const data = {
cmd: "use_payment",
goods: goods_no,
};
let response = await http("post", "/proc/pay_settlebank", data);
const { status, errmsg, is_membership_repeat_payment } = response;
if (status != 200) {
if (errmsg == '') {
alert('결제 요청을 실패하였습니다.');
} else {
alert(errmsg);
}
return false;
}
if (is_membership_repeat_payment === true) {
alert('현재 PLUS 정기구독 중으로 멤버십 잔여일이 남아있어 추가 구독이 진행되지 않습니다.\n멤버십 종료 후에 PLUS 정기구독 해주시기 바랍니다.');
return false;
}
let init_method = "mobile";
stpg_init(init_method); // 세틀뱅크 기본 init
//await get_payment(); // 기존 결제가 있는지 확인
const trade_no = $('#STPG_payForm [name="mchtTrdNo"]').val();
await payment_setting(trade_no, goods_no, init_method);
if (payment_flag == 0) {
return 0;
}
//용도 : SHA256 해쉬 처리 및 민감정보 AES256암호화
$.ajax({
type: "POST",
url: "/proc/pay_encryptParams",
dataType: "json",
data: $("#STPG_payForm").serialize(),
success: function (rsp) {
//암호화 된 파라미터 세팅
for (name in rsp.encParams) {
$('#STPG_payForm [name=' + name + ']').val(rsp.encParams[name]);
};
//가맹점 -> 세틀뱅크로 결제 요청
SETTLE_PG.pay({
env: "https://npg.settlebank.co.kr", //결제서버 URL
mchtId: $('#STPG_payForm [name="mchtId"]').val(),
method: $('#STPG_payForm [name="method"]').val(),
trdDt: $('#STPG_payForm [name="trdDt"]').val(),
trdTm: $('#STPG_payForm [name="trdTm"]').val(),
mchtTrdNo: $('#STPG_payForm [name="mchtTrdNo"]').val(),
mchtName: $('#STPG_payForm [name="mchtName"]').val(),
mchtEName: $('#STPG_payForm [name="mchtEName"]').val(),
pmtPrdtNm: $('#STPG_payForm [name="pmtPrdtNm"]').val(),
trdAmt: $('#STPG_payForm [name="trdAmt"]').val(),
mchtCustNm: $('#STPG_payForm [name="mchtCustNm"]').val(),
custAcntSumry: $('#STPG_payForm [name="custAcntSumry"]').val(),
expireDt: $('#STPG_payForm [name="expireDt"]').val(),
notiUrl: $('#STPG_payForm [name="notiUrl"]').val(),
nextUrl: $('#STPG_payForm [name="nextUrl"]').val(),
cancUrl: $('#STPG_payForm [name="cancUrl"]').val(),
mchtParam: $('#STPG_payForm [name="mchtParam"]').val(),
cphoneNo: $('#STPG_payForm [name="cphoneNo"]').val(),
email: $('#STPG_payForm [name="email"]').val(),
telecomCd: $('#STPG_payForm [name="telecomCd"]').val(),
prdtTerm: $('#STPG_payForm [name="prdtTerm"]').val(),
mchtCustId: $('#STPG_payForm [name="mchtCustId"]').val(),
taxTypeCd: $('#STPG_payForm [name="taxTypeCd"]').val(),
taxAmt: $('#STPG_payForm [name="taxAmt"]').val(),
vatAmt: $('#STPG_payForm [name="vatAmt"]').val(),
taxFreeAmt: $('#STPG_payForm [name="taxFreeAmt"]').val(),
svcAmt: $('#STPG_payForm [name="svcAmt"]').val(),
cardType: $('#STPG_payForm [name="cardType"]').val(),
chainUserId: $('#STPG_payForm [name="chainUserId"]').val(),
cardGb: $('#STPG_payForm [name="cardGb"]').val(),
clipCustNm: $('#STPG_payForm [name="clipCustNm"]').val(),
clipCustCi: $('#STPG_payForm [name="clipCustCi"]').val(),
clipCustPhoneNo: $('#STPG_payForm [name="clipCustPhoneNo"]').val(),
certNotiUrl: $('#STPG_payForm [name="certNotiUrl"]').val(),
skipCd: $('#STPG_payForm [name="skipCd"]').val(),
multiPay: $('#STPG_payForm [name="multiPay"]').val(),
autoPayType: $('#STPG_payForm [name="autoPayType"]').val(),
linkMethod: $('#STPG_payForm [name="linkMethod"]').val(),
appScheme: $('#STPG_payForm [name="appScheme"]').val(),
custIp: $('#STPG_payForm [name="custIp"]').val(),
corpPayCode: $('#STPG_payForm [name="corpPayCode"]').val(),
plainMchtCustNm: $('#STPG_payForm [name="plainMchtCustNm"]').val(),
plainMchtCustId: $('#STPG_payForm [name="plainMchtCustId"]').val(),
pktHash: rsp.hashCipher, //SHA256 처리된 해쉬 값 세팅
ui: {
type: target, //popup, iframe, self, blank
width: "400", //popup창의 너비
height: "660" //popup창의 높이
}
}, function (rsp) {
//iframe인 경우 전달된 결제 완료 후 응답 파라미터 처리
//console.log(rsp);
parent.postMessage(JSON.stringify({ action: "HECTO_IFRAME_CLOSE" }), "*");
});
}, error: function (request, status, error) {
//console.log("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
}
});
/*
$('#STPG_payForm').attr("method", "post");
$('#STPG_payForm').attr("target", "settlepopup");
$('#STPG_payForm').attr("action", "https://pay.novelpia.com/settlebank/settle_mobile");
window.open("", "settlepopup", "width=430, height=660, scrollbars=no");
$("#STPG_payForm").submit();
*/
});
$(document).on('click', '.settle_card_pay', async function () {
if (!$('#plus_payment_modal #plus_payment_agree[type=checkbox]').is(':checked') == true) {
alert('구독 안내사항에 동의해주시기 바랍니다.'); return false;
}
const mem_no = '0';
if (mem_no == 0) {
alert('로그인 후 결제 가능합니다.');
member_login_modal_on();
return false;
}
const goods_no = $("#induce_goods_no").val();
if (goods_no == 8) {
await discount_check(mem_no, goods_no);
}
$('#STPG_payForm [name="mchtId"]').val('novelpia2');
$('#STPG_payForm [name="autoPayType"]').val('M');
let init_method = "card";
stpg_init(init_method); // 세틀뱅크 기본 init
//get_payment(); // 기존 결제가 있는지 확인
const data = {
cmd: "use_payment",
goods: goods_no,
};
let response = await http("post", "/proc/pay_settlebank", data);
const { status, is_membership_repeat_payment } = response;
if (status != 200) {
alert('결제 요청을 실패하였습니다.');
return false;
}
if (is_membership_repeat_payment === true) {
alert('현재 PLUS 정기구독 중으로 멤버십 잔여일이 남아있어 추가 구독이 진행되지 않습니다.\n멤버십 종료 후에 PLUS 정기구독 해주시기 바랍니다.');
return false;
}
const trade_no = $('#STPG_payForm [name="mchtTrdNo"]').val();
await payment_setting(trade_no, goods_no, init_method);
if (payment_flag == 0) {
return 0;
}
if (goods_no == 7) {
let send_payment_data = {
"trdDt": $("input[name=trdDt]").val(),
"trdTm": $("input[name=trdTm]").val(),
"mchtTrdNo": $("input[name=mchtTrdNo]").val(),
"mchtParam": $("input[name=mchtParam]").val(),
}
localStorage.setItem('free_payment_data', JSON.stringify(send_payment_data));
await free_settlebank_proc();
return 0;
}
let app_store = "WEB";
const target = app_store === "WEB" ? "popup" : "blank";
//용도 : SHA256 해쉬 처리 및 민감정보 AES256암호화
$.ajax({
type: "POST",
url: "/proc/pay_encryptParams",
dataType: "json",
data: $("#STPG_payForm").serialize(),
success: function (rsp) {
//console.log(rsp);
//암호화 된 파라미터 세팅
for (name in rsp.encParams) {
$('#STPG_payForm [name=' + name + ']').val(rsp.encParams[name]);
};
//가맹점 -> 세틀뱅크로 결제 요청
SETTLE_PG.pay({
env: "https://npg.settlebank.co.kr", //결제서버 URL
mchtId: $('#STPG_payForm [name="mchtId"]').val(),
method: $('#STPG_payForm [name="method"]').val(),
trdDt: $('#STPG_payForm [name="trdDt"]').val(),
trdTm: $('#STPG_payForm [name="trdTm"]').val(),
mchtTrdNo: $('#STPG_payForm [name="mchtTrdNo"]').val(),
mchtName: $('#STPG_payForm [name="mchtName"]').val(),
mchtEName: $('#STPG_payForm [name="mchtEName"]').val(),
pmtPrdtNm: $('#STPG_payForm [name="pmtPrdtNm"]').val(),
trdAmt: $('#STPG_payForm [name="trdAmt"]').val(),
mchtCustNm: $('#STPG_payForm [name="mchtCustNm"]').val(),
custAcntSumry: $('#STPG_payForm [name="custAcntSumry"]').val(),
expireDt: $('#STPG_payForm [name="expireDt"]').val(),
notiUrl: $('#STPG_payForm [name="notiUrl"]').val(),
nextUrl: $('#STPG_payForm [name="nextUrl"]').val(),
cancUrl: $('#STPG_payForm [name="cancUrl"]').val(),
mchtParam: $('#STPG_payForm [name="mchtParam"]').val(),
cphoneNo: $('#STPG_payForm [name="cphoneNo"]').val(),
email: $('#STPG_payForm [name="email"]').val(),
telecomCd: $('#STPG_payForm [name="telecomCd"]').val(),
prdtTerm: $('#STPG_payForm [name="prdtTerm"]').val(),
mchtCustId: $('#STPG_payForm [name="mchtCustId"]').val(),
taxTypeCd: $('#STPG_payForm [name="taxTypeCd"]').val(),
taxAmt: $('#STPG_payForm [name="taxAmt"]').val(),
vatAmt: $('#STPG_payForm [name="vatAmt"]').val(),
taxFreeAmt: $('#STPG_payForm [name="taxFreeAmt"]').val(),
svcAmt: $('#STPG_payForm [name="svcAmt"]').val(),
cardType: $('#STPG_payForm [name="cardType"]').val(),
chainUserId: $('#STPG_payForm [name="chainUserId"]').val(),
cardGb: $('#STPG_payForm [name="cardGb"]').val(),
clipCustNm: $('#STPG_payForm [name="clipCustNm"]').val(),
clipCustCi: $('#STPG_payForm [name="clipCustCi"]').val(),
clipCustPhoneNo: $('#STPG_payForm [name="clipCustPhoneNo"]').val(),
certNotiUrl: $('#STPG_payForm [name="certNotiUrl"]').val(),
skipCd: $('#STPG_payForm [name="skipCd"]').val(),
multiPay: $('#STPG_payForm [name="multiPay"]').val(),
autoPayType: $('#STPG_payForm [name="autoPayType"]').val(),
linkMethod: $('#STPG_payForm [name="linkMethod"]').val(),
appScheme: $('#STPG_payForm [name="appScheme"]').val(),
custIp: $('#STPG_payForm [name="custIp"]').val(),
corpPayCode: $('#STPG_payForm [name="corpPayCode"]').val(),
plainMchtCustNm: $('#STPG_payForm [name="plainMchtCustNm"]').val(),
plainMchtCustId: $('#STPG_payForm [name="plainMchtCustId"]').val(),
pktHash: rsp.hashCipher, //SHA256 처리된 해쉬 값 세팅
ui: {
type: target, //popup, iframe, self, blank
width: "400", //popup창의 너비
height: "660" //popup창의 높이
}
}, function (rsp) {
//iframe인 경우 전달된 결제 완료 후 응답 파라미터 처리
//console.log(rsp);
parent.postMessage(JSON.stringify({ action: "HECTO_IFRAME_CLOSE" }), "*");
});
}, error: function (request, status, error) {
//console.log("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
}
});
/*
$('#STPG_payForm').attr("method", "post");
$('#STPG_payForm').attr("target", "settlepopup");
$('#STPG_payForm').attr("action", "https://pay.novelpia.com/settlebank/settle_mobile");
window.open("", "settlepopup", "width=430, height=660, scrollbars=no");
$("#STPG_payForm").submit();
*/
});
$(document).on('click', '.settle_kakaopay', async function () {
if (!$('#plus_payment_modal #plus_payment_agree[type=checkbox]').is(':checked') == true) {
alert('구독 안내사항에 동의해주시기 바랍니다.'); return false;
}
const mem_no = '0';
if (mem_no == 0) {
alert('로그인 후 결제 가능합니다.');
member_login_modal_on();
return false;
}
const goods_no = $("#induce_goods_no").val();
if (goods_no == 8) {
await discount_check(mem_no, goods_no);
}
let init_method = "corp";
$('#STPG_payForm [name="corpPayCode"]').val('KKP');
$('#STPG_payForm [name="autoPayType"]').val('A');
$('#STPG_payForm [name="mchtId"]').val('novelpia4');
stpg_init(init_method); // 세틀뱅크 기본 init
//get_payment(); // 기존 결제가 있는지 확인
const data = {
cmd: "use_payment",
goods: goods_no,
};
let response = await http("post", "/proc/pay_settlebank", data);
const { status, is_membership_repeat_payment } = response;
if (status != 200) {
alert('결제 요청을 실패하였습니다.');
return false;
}
if (is_membership_repeat_payment === true) {
alert('현재 PLUS 정기구독 중으로 멤버십 잔여일이 남아있어 추가 구독이 진행되지 않습니다.\n멤버십 종료 후에 PLUS 정기구독 해주시기 바랍니다.');
return false;
}
const trade_no = $('#STPG_payForm [name="mchtTrdNo"]').val();
await payment_setting(trade_no, goods_no, init_method);
if (payment_flag == 0) {
return 0;
}
if (goods_no == 7) {
let send_payment_data = {
"trdDt": $("input[name=trdDt]").val(),
"trdTm": $("input[name=trdTm]").val(),
"mchtTrdNo": $("input[name=mchtTrdNo]").val(),
"mchtParam": $("input[name=mchtParam]").val(),
}
localStorage.setItem('free_payment_data', JSON.stringify(send_payment_data));
await free_settlebank_proc();
return 0;
}
let app_store = "WEB";
const target = app_store === "WEB" ? "popup" : "blank";
//용도 : SHA256 해쉬 처리 및 민감정보 AES256암호화
$.ajax({
type: "POST",
url: "/proc/pay_encryptParams",
dataType: "json",
data: $("#STPG_payForm").serialize(),
success: function (rsp) {
//console.log(rsp);
//암호화 된 파라미터 세팅
for (name in rsp.encParams) {
$('#STPG_payForm [name=' + name + ']').val(rsp.encParams[name]);
};
//가맹점 -> 세틀뱅크로 결제 요청
SETTLE_PG.pay({
env: "https://npg.settlebank.co.kr", //결제서버 URL
mchtId: $('#STPG_payForm [name="mchtId"]').val(),
method: $('#STPG_payForm [name="method"]').val(),
trdDt: $('#STPG_payForm [name="trdDt"]').val(),
trdTm: $('#STPG_payForm [name="trdTm"]').val(),
mchtTrdNo: $('#STPG_payForm [name="mchtTrdNo"]').val(),
mchtName: $('#STPG_payForm [name="mchtName"]').val(),
mchtEName: $('#STPG_payForm [name="mchtEName"]').val(),
pmtPrdtNm: $('#STPG_payForm [name="pmtPrdtNm"]').val(),
trdAmt: $('#STPG_payForm [name="trdAmt"]').val(),
mchtCustNm: $('#STPG_payForm [name="mchtCustNm"]').val(),
custAcntSumry: $('#STPG_payForm [name="custAcntSumry"]').val(),
expireDt: $('#STPG_payForm [name="expireDt"]').val(),
notiUrl: $('#STPG_payForm [name="notiUrl"]').val(),
nextUrl: $('#STPG_payForm [name="nextUrl"]').val(),
cancUrl: $('#STPG_payForm [name="cancUrl"]').val(),
mchtParam: $('#STPG_payForm [name="mchtParam"]').val(),
cphoneNo: $('#STPG_payForm [name="cphoneNo"]').val(),
email: $('#STPG_payForm [name="email"]').val(),
telecomCd: $('#STPG_payForm [name="telecomCd"]').val(),
prdtTerm: $('#STPG_payForm [name="prdtTerm"]').val(),
mchtCustId: $('#STPG_payForm [name="mchtCustId"]').val(),
taxTypeCd: $('#STPG_payForm [name="taxTypeCd"]').val(),
taxAmt: $('#STPG_payForm [name="taxAmt"]').val(),
vatAmt: $('#STPG_payForm [name="vatAmt"]').val(),
taxFreeAmt: $('#STPG_payForm [name="taxFreeAmt"]').val(),
svcAmt: $('#STPG_payForm [name="svcAmt"]').val(),
cardType: $('#STPG_payForm [name="cardType"]').val(),
chainUserId: $('#STPG_payForm [name="chainUserId"]').val(),
cardGb: $('#STPG_payForm [name="cardGb"]').val(),
clipCustNm: $('#STPG_payForm [name="clipCustNm"]').val(),
clipCustCi: $('#STPG_payForm [name="clipCustCi"]').val(),
clipCustPhoneNo: $('#STPG_payForm [name="clipCustPhoneNo"]').val(),
certNotiUrl: $('#STPG_payForm [name="certNotiUrl"]').val(),
skipCd: $('#STPG_payForm [name="skipCd"]').val(),
multiPay: $('#STPG_payForm [name="multiPay"]').val(),
autoPayType: $('#STPG_payForm [name="autoPayType"]').val(),
linkMethod: $('#STPG_payForm [name="linkMethod"]').val(),
appScheme: $('#STPG_payForm [name="appScheme"]').val(),
custIp: $('#STPG_payForm [name="custIp"]').val(),
corpPayCode: $('#STPG_payForm [name="corpPayCode"]').val(),
plainMchtCustNm: $('#STPG_payForm [name="plainMchtCustNm"]').val(),
plainMchtCustId: $('#STPG_payForm [name="plainMchtCustId"]').val(),
pktHash: rsp.hashCipher, //SHA256 처리된 해쉬 값 세팅
ui: {
type: target, //popup, iframe, self, blank
width: "400", //popup창의 너비
height: "660" //popup창의 높이
}
}, function (rsp) {
//iframe인 경우 전달된 결제 완료 후 응답 파라미터 처리
//console.log(rsp);
parent.postMessage(JSON.stringify({ action: "HECTO_IFRAME_CLOSE" }), "*");
});
}, error: function (request, status, error) {
//console.log("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
}
});
/*
$('#STPG_payForm').attr("method", "post");
$('#STPG_payForm').attr("target", "settlepopup");
$('#STPG_payForm').attr("action", "https://pay.novelpia.com/settlebank/settle_mobile");
window.open("", "settlepopup", "width=430, height=660, scrollbars=no");
$("#STPG_payForm").submit();
*/
});
function stpg_init(init_method) {
var curr_date = new Date();
var year = curr_date.getFullYear().toString();
var month = ("0" + (curr_date.getMonth() + 1)).slice(-2).toString();
var day = ("0" + (curr_date.getDate())).slice(-2).toString();
var hours = ("0" + curr_date.getHours()).slice(-2).toString();
var mins = ("0" + curr_date.getMinutes()).slice(-2).toString();
var secs = ("0" + curr_date.getSeconds()).slice(-2).toString();
var random4 = ("000" + Math.random() * 10000).slice(-4).toString();
$('#STPG_payForm').attr("method", "post");
$('#STPG_payForm [name="method"]').val(init_method);
$('#STPG_payForm [name="trdDt"]').val(year + month + day); //요청일자 세팅
$('#STPG_payForm [name="trdTm"]').val(hours + mins + secs); //요청시간 세팅
$('#STPG_payForm [name="mchtTrdNo"]').val("PAYMENT" + year + month + day + hours + mins + secs + random4);//주문번호 세팅
}
async function payment_setting(trade_no, goods_no, init_method) {
const data = {
trade_no: trade_no,
goods_no: goods_no,
method: init_method,
cmd: "payment_setting",
};
// insert 실패했을때 다시시도해주세요 하고 창닫기
const response = await http("post", "/proc/pay_settlebank", data);
const { errmsg, status, result } = response;
if (status === 201) {
alert("결제등록에 실패했습니다. 다시 시도해주세요.");
payment_flag = 0;
return 0;
}
}
async function get_payment() {
//console.log('payment');
const data = {
cmd: "use_payment"
};
let response = await http("post", "/proc/pay_settlebank", data);
//console.log(response);
if (response.status != 200) {
alert("이미 PLUS멤버십 정기구독 가입상태입니다. 결제시 새로 결제한 자동결제 수단으로 대체됩니다.");
let temp_val = $('#STPG_payForm [name="mchtParam"]').val();
if (response.result.length != 0) {
$.each(response.result, function (k, v) {
temp_val = temp_val + "|" + v;
});
}
$('#STPG_payForm [name="mchtParam"]').val(temp_val);
}
}
async function free_settlebank_proc() {
let app_store = "WEB";
const target = app_store === "WEB" ? "popup" : "blank";
let popup_option = "";
if (app_store === "WEB") {
popup_option = "width=430, height=660";
}
window.open("/page/settlebank_free_popup", "_blank", popup_option);
}
async function discount_check(mem_no, goods_no) {
const data = {
mem_no: mem_no,
goods_no: goods_no,
cmd: "checkDiscount",
};
const url = '/proc/event';
// insert 실패했을때 다시시도해주세요 하고 창닫기
const response = await http("post", url, data);
const { errmsg, status, discount_check_flag } = response;
if (discount_check_flag == 0) {
alert("군 할인 대상자가 아닙니다.");
payment_flag = 0;
return 0;
} else {
payment_flag = 1;
}
}
</script>
<script>
function comment_re_sort() {
if ($(".reply_all_toggle").hasClass("active") == false) {
$('.comment_rr').find("i.icon").removeClass("ion-ios-arrow-up");
$('.comment_rr').find("i.icon").addClass("ion-ios-arrow-down");
$('.comment_re').css('display', '');
}
}
function fail_secret(type) {
if (type == "sponsor") {
alert("시크릿 모드에서는 후원을 할 수 없습니다.");
return false;
} else if (type == "user_tag_add") {
alert("시크릿 모드에서는 나만의태그 등록을 할 수 없습니다.");
return false;
} else {
alert("시크릿 모드에서는 해당 기능을 이용 할 수 없습니다.");
return false;
}
}
// 대댓글 토글
$("#comment_list_box").on("click", ".comment_rr", function () {
//console.log("대댓글 토글");
//console.log($(this).data("idx"));
if ($(this).find("i.icon").hasClass("ion-ios-arrow-down") == true) {
$(this).find("i.icon").removeClass("ion-ios-arrow-down");
$(this).find("i.icon").addClass("ion-ios-arrow-up");
$("#comment_list_box .rr_" + $(this).data("idx")).stop().slideUp(100);
} else {
$(this).find("i.icon").removeClass("ion-ios-arrow-up");
$(this).find("i.icon").addClass("ion-ios-arrow-down");
$("#comment_list_box .rr_" + $(this).data("idx")).stop().slideDown(100);
//$("#comment_box #comment_load .re_"+$(this).closest(".comment").data("idx")).stop().slideDown(100);
}
});
// 대댓글 전체 토글
$("#comment_list_box").on("click", ".comment_header .reply_all_toggle", function () {
_dev.log("toggle");
if ($(this).hasClass("active") == true) {
$(this).find("i.icon").removeClass("ion-ios-arrow-up");
$(this).find("i.icon").addClass("ion-ios-arrow-down");
$(this).removeClass("active");
$('.comment_rr').find("i.icon").removeClass("ion-ios-arrow-up");
$('.comment_rr').find("i.icon").addClass("ion-ios-arrow-down");
$('.comment_re').stop().slideDown(100);
} else {
$(this).find("i.icon").removeClass("ion-ios-arrow-down");
$(this).find("i.icon").addClass("ion-ios-arrow-up");
$(this).addClass("active");
$('.comment_rr').find("i.icon").removeClass("ion-ios-arrow-down");
$('.comment_rr').find("i.icon").addClass("ion-ios-arrow-up");
$('.comment_re').stop().slideUp(100);
}
});
$(document).on("click", ".vbox-content img", function () {
$(".vbox-close").click();
})
async function get_novel_review_list() {
const param = {
cmd: 'get_novel_review_list',
target_novel_no: 248128,
};
const result = await http('get', '/proc/novel', param);
const { status, errmsg, data } = result;
if (status !== 200) {
return false;
}
//
let html = '';
let reviewSwiper;
if (data.length > 0) {
$.each(data, function (i, v) {
html += `
<div class="review-box review swiper-slide" onclick="location.href='/arena/32/view_${v.content_no}';">
<div class="box-inner">
<div class="review-title">${v.content_subject}</div>
<div class="user-info">
<div class="profile-img">${v.user_img || '<img src="' + G_CDN_DOMAIN_IMG + '/img/layout/none_user.png">'}</div>
<div class="user-name">${v.mem_nick}</div>
</div>
</div>
</div>`;
});
html += `<div class="review-box last-box swiper-slide" onclick="location.href='/arena/32/write?novel_no=248128';">
<div class="box-inner">
<p>작품을 즐겁게 읽으셨다면 리뷰를 작성해 보세요!</p>
<button class="btn-review-write">리뷰 작성</button>
</div>
</div>`;
$('.eplist-novel-review').show();
$('.eplist-novel-review .review-box-wrapper').html(html);
reviewSwiper = new Swiper('.eplist-novel-review .review-box-content', {
slidesPerView: 'auto',
//slidesPerView: 1,
spaceBetween: 10,
centeredSlides: false,
freeMode: false,
breakpoints: {
891: {
spaceBetween: 20,
navigation: {
prevEl: ".eplist-novel-review .arrow.arrow-left",
nextEl: ".eplist-novel-review .arrow.arrow-right",
},
}
},
});
} else {
html += `
<div class="review-box-wrapper review-none swiper-slide" onclick="location.href='/arena/32/write?novel_no=248128';" style="gap:20px">
<div class="review-box last-box">
<div>
<p>아직 우수리뷰로 선정된 리뷰가 없어요. 리뷰를 작성해보세요!</p>
<button class="btn-review-write">리뷰 작성</button>
</div>
</div>
<div class="review-box last-box">
<div>
<p>아직 우수리뷰로 선정된 리뷰가 없어요. 리뷰를 작성해보세요!</p>
<button class="btn-review-write">리뷰 작성</button>
</div>
</div>
</div>`;
$('.eplist-novel-review').show();
$('.eplist-novel-review .review-box-wrapper').html(html);
// 버튼 비활성화
$('.eplist-novel-review .arrow').css({
pointerEvents: 'none', // 클릭 불가
opacity: 0.4 // 시각적 비활성화 표시
});
}
}
if ($("#banner-box .swiper-slide").length > 1) {
new Swiper('#banner-box', {
slidesPerView: 1,
spaceBetween: 10,
centeredSlides: false,
loop: true,
autoplay: true,
breakpoints: {
799: {
spaceBetween: 20,
navigation: {
prevEl: ".eplist-novel-review .arrow.arrow-left",
nextEl: ".eplist-novel-review .arrow.arrow-right",
},
}
},
pagination: {
clickable: true,
el: '.pagination-bullet',
},
});
}
</script>
<script>
gtag('event', '웹소설_회차리스트유입', { 'event_name': 'view_episodelist' });
</script>
</div>
<script>
// 플러스 결제유도 프로세스 쿠키삭제
$.cookie('modal_flag_type', '', { expires: 0, path: '/', domain: 'novelpia.com' });
$.cookie('induce_flag_type', '', { expires: 0, path: '/', domain: 'novelpia.com' });
$.cookie('induce_type', '', { expires: 0, path: '/', domain: 'novelpia.com' });
$.cookie('induce_is_first', '', { expires: 0, path: '/', domain: 'novelpia.com' });
</script>
<style>
.basic-modal-close-no-member {
display: block;
width: 27px;
height: 27px;
background: url(//images.novelpia.com/old/img/new/menu/menu_close.png) no-repeat center;
background-size: 32px;
cursor: pointer;
position: absolute;
right: 10px;
top: 10px;
}
.no-member-popup-container {
font-family: 'NanumSquare';
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
z-index: 9999;
font-size: 14px;
display: none;
}
.no-member-popup-container-background {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: #000;
opacity: 0.5;
z-index: 9998;
display: none;
}
.no-member-popup-container .suggest-popup-item {
background-color: #fff;
display: flex;
justify-items: center;
align-items: center;
flex-direction: column;
gap: 20px;
max-width: 540px;
width: 100%;
padding: 35px;
position: relative;
}
.welcome-blue {
color: #005AD2;
}
.suggest-popup-item .main-title {
font-size: 1.875rem;
color: #000;
font-weight: bold;
}
.suggest-popup-item .kawai-novel {
max-width: 540px;
width: 100%;
}
.suggest-popup-item .sub-text {
font-family: 'OmniGothic', 'NanumSquareNeo-Variable', 'Apple SD Gothic Neo', sans-serif;
font-size: 1.5rem;
color: #000005;
font-weight: 400;
text-align: center;
}
.sub-text span {
color: #6437FF;
}
.suggest-popup-item .sub-text-two {
font-family: 'OmniGothic', 'NanumSquareNeo-Variable', 'Apple SD Gothic Neo', sans-serif;
font-size: 1.1rem;
color: #575757;
}
.no-member-popup-wrapper .btn-wrapper {
display: flex;
justify-items: center;
align-items: center;
}
.no-member-popup-wrapper .move-btn {
font-family: 'OmniGothic', 'NanumSquareNeo-Variable', 'Apple SD Gothic Neo', sans-serif;
background-color: #201A74;
color: #fff;
text-align: center;
font-size: 1.375rem;
padding: 30px 0;
cursor: pointer;
width: 100%;
}
#suggestContentPopup .novel-img {
max-width: 150px;
width: 100%;
}
.recommend-botton-section button {
font-family: 'OmniGothic', 'NanumSquareNeo-Variable', 'Apple SD Gothic Neo', sans-serif;
text-align: center;
width: 100%;
height: 50px;
cursor: pointer;
border: 0;
font-size: 16px;
display: flex;
align-items: center;
justify-content: center;
}
.recommend-botton-section {
font-family: 'OmniGothic', 'NanumSquareNeo-Variable', 'Apple SD Gothic Neo', sans-serif;
margin-top: 25px;
display: flex;
gap: 5px;
justify-content: space-between;
width: 100%;
}
.recommend-botton-section button.color-wt {
background: #fff;
color: #000;
border: 1px solid #000;
height: 70px;
}
.recommend-botton-section button.color-bk {
background: #000;
color: #fff;
height: 150px;
padding: 0px;
outline: none;
}
.recommend-botton-section button.color-bl {
background: #0055e1;
color: #fff;
height: 70px;
}
@media screen and (max-width: 891px) {
.suggest-popup-item .main-title {
font-size: 20px;
font-weight: bold;
}
.suggest-popup-item .sub-text {
font-size: 16px;
}
.suggest-popup-item .sub-text-two {
font-size: 12px;
}
.suggest-popup-item .kawai-novel {
max-width: 300px;
}
.no-member-popup-container .suggest-popup-item {
max-width: 100%;
gap: 10px;
padding: 49px 25px;
}
.no-member-popup-container {
width: 90%;
max-width: 540px;
}
.no-member-popup-wrapper .move-btn {
font-size: 14px;
padding: 10px 0;
}
#suggestContentPopup .novel-img {
max-width: 100px;
width: 100%;
}
.recommend-botton-section button {
font-family: 'OmniGothic', 'NanumSquareNeo-Variable', 'Apple SD Gothic Neo', sans-serif;
text-align: center;
width: 100%;
height: 50px;
cursor: pointer;
border: 0;
font-size: 14px;
display: flex;
align-items: center;
justify-content: center;
}
.recommend-botton-section button.color-wt {
background: #fff;
color: #000;
border: 1px solid #000;
height: 50px;
}
.recommend-botton-section button.color-bk {
background: none;
color: #fff;
height: 100%;
outline: none;
}
}
</style>
<div class="no-member-popup-container-background" style="display: none"></div>
<div class="no-member-popup-container" style="display: none">
<div class="no-member-popup-wrapper" id="suggestNomalPopupWrapper" style="display: none">
<!--a href="/page/age_auth?adult=1">
<img src="//images.novelpia.com/img/new/event/sub_sale/ver2/member_popup_img_2.png" style="width:100%;max-width: 540px;">
</a>-->
<div id="suggestNomalPopup" class="suggest-popup-item" style="display: none">
<div class="basic-modal-close-no-member"></div>
<img class="kawai-novel" src="//images.novelpia.com/img/modal_img_plus05.png" />
<div class="sub-text"> 본인인증 하시고<br><span>첫구독 무료 혜택</span> 받으세요
<div class="recommend-botton-section">
<button class="color-bl go_auth">첫구독 무료 시작하기</button>
</div>
</div>
</div>
<!--<div class="move-btn" onclick="location.href='/recommend';">첫구독 무료 시작하기</div>-->
</div>
<div class="no-member-popup-wrapper" style="display: none" id="suggestContentPopupWrapper">
<!--<a href="/page/age_auth?adult=1">
<img src="//images.novelpia.com/img/new/event/sub_sale/ver2/member_popup_img_2.png" style="width:100%; max-width: 540px;">
</a>-->
<div id="suggestContentPopup" class="suggest-popup-item">
<div class="basic-modal-close-no-member"></div>
<img class="kawai-novel" src="//images.novelpia.com/img/modal_img_plus06.png" />
<div class="sub-text">
<!--<b>첫구독 무료</b>로 편하게 이어보세요.-->
</div>
<div class="sub-text-two"><!---->최근 본 작품</div>
<img src="//images.novelpia.com/imagebox/cover/cf84e3d9b39354780b733ccbb5ae3bdd_459543_ori.file"
class="novel-img" style="width: 50%;" />
<div class="sub-text-two novel-name">소설제목</div>
<div class="recommend-botton-section">
<button class="color-wt goto-novel">괜찮아요, 그냥 볼게요</button>
<button class="color-bk go_auth">첫구독 무료 시작하기</button>
</div>
</div>
<!--<div class="btn-wrapper">
<div class="move-btn goto-novel">이어보기
</div>
<div class="move-btn" style="background-color: #000;" onclick="location.href='/recommend';">첫구독 무료 시작하기
</div>
</div>-->
</div>
</div>
<script>
const openWelcomePopup = () => {
//$(".no-member-popup-container").show();
//$(".no-member-popup-container-background").show();
$(".no-member-popup-container").hide();
$(".no-member-popup-container-background").hide();
//쿠키값제거
$.cookie('new_member', '', { expires: 0, path: '/', domain: 'novelpia.com', secure: false });
return 0;
const datatArray = JSON.parse(localStorage.getItem("userLastNovelData"));
if (datatArray !== null) {
$("#suggestNomalPopupWrapper").hide(); //default 창 숨기기
const lastContent = datatArray.slice(-1)[0];
switch (lastContent.viewer_type) {
case "novel":
$("#suggestContentPopup .novel-name").text(lastContent.content_data.novel_name);
$("#suggestContentPopup .novel-img").attr("src", lastContent.content_data.novel_thumb_all);
$('#suggestContentPopupWrapper .goto-novel').attr('data-val', `/viewer/${lastContent.episode_no}`);
break;
case "comic":
$("#suggestContentPopup .novel-name").text(lastContent.content_data.comic_title);
$("#suggestContentPopup .novel-img").attr("src", lastContent.content_data.thumb_img);
$('#suggestContentPopupWrapper .goto-novel').attr('data-val', `/comic_viewer/${lastContent.episode_no}`);
break;
}
//$("#suggestContentPopupWrapper").show();
$("#suggestContentPopupWrapper").hide();
}
}
$(".basic-modal-close-no-member").on("click", function () {
$(".no-member-popup-container").hide();
$(".no-member-popup-container-background").hide();
});
$(".no-member-popup-container-background").on("click", function () {
$(".no-member-popup-container").hide();
$(".no-member-popup-container-background").hide();
});
$('.goto-novel').on('click', function () {
var dataValue = $(this).attr('data-val');
location.href = dataValue;
});
$('.go_auth').on('click', function () {
location.href = '/page/age_auth?adult=1';
});
</script>
<div class="basic-modal-background" id="member_join_modal">
<div class="basic-modal-wrapper" style="background:transparent; border:0; padding:100px 0 0 0; outline:0;">
<!--<div><img class="change-image" src="" style="width:100%;"></div>-->
<div class="join-top-section">
<div class="basic-modal-close"></div>
<div class="join-top-section-bg"></div>
<!-- <p class="join-top-layler-tit">지금 가입하고<br>보고싶은 작품 자유롭게 보세요!</p> -->
<img class="join-top-layler-img"
src="//images.novelpia.com/img/new/event/auth_3day/banner_main_3day2.png" />
<div class="join-top-nv-section-wrp">
<div class="join-top-nv-section">
<div class="join-top-cover"><img src=""></div>
<div class="join-top-nv-info">
<p class="txt-recent">최근 본 작품</p>
<p class="txt-nv-title"></p>
<p class="txt-nv-writer"></p>
</div>
</div>
</div>
</div>
<div class="basic-modal-wp-inner">
<div class="basic-modal-top">
<!--<div class="basic-modal-name">
<img src="//images.novelpia.com/img/new/menu/icon-logo.svg" width="120" height="28">
</div>
<div class="basic-modal-close"></div>-->
</div>
<div class="basic-modal-contents join-contents">
<!--<img src="//images.novelpia.com/img/new/logo2.png" alt="노벨피아 로고">-->
<!--로그인/회원가입 전환 탭-->
<div class="tap-join-login">
<div class="tab-join active" onclick="location.href='javascript:member_join_modal_on();';">무료
회원가입</div>
<div class="tab-login" onclick="location.href='javascript:member_login_modal_on();';">로그인</div>
</div>
<div class="join-sns">
<div class="form-tit ">
<div class="tit-line txt-sns"></div>
<div>
<span class="form-tit-t-bold">SNS 계정</span>으로 <span class="form-tit-t-bold">1초</span>만에
가입하기
</div>
<div class="tit-line txt-sns"></div>
</div>
<div class="sns-btns">
<a href="#" onclick="join_sns_submit('naver');">
<input type="hidden" id="naver_url"
value="https://nid.naver.com/oauth2.0/authorize?response_type=code&client_id=A8OQVi3byB1jFOckQ0RZ&redirect_uri=https%3A%2F%2Fnovelpia.com%2Fproc%2Flogin_naver%3Fredirectrurl%3D&state=2e88920be7549fd0e2f17acfb5d8917b">
<img src="/img/new/menu/logo_naver.png" alt="네이버로 회원가입">
</a>
<a href="#" onclick="join_sns_submit('kakao');">
<input type="hidden" id="kakao_url"
value="https://kauth.kakao.com/oauth/authorize?client_id=8ef49d8a2a7a8f64a329817bb7015402&redirect_uri=https%3A%2F%2Fnovelpia.com%2Fproc%2Flogin_kakao&response_type=code&state=2e88920be7549fd0e2f17acfb5d8917b">
<img src="/img/new/menu/logo_kakao.png" alt="카카오로 회원가입">
</a>
<a href="#" onclick="join_sns_submit('google');">
<input type="hidden" id="google_url" value="https://novelpia.com/proc/login_google">
<img src="/img/new/menu/logo_google.png" alt="구글로 회원가입">
</a>
<a href="#" onclick="join_sns_submit('apple');"><img id="" class="apple_join_id"
src="/img/new/menu/logo_apple.png" alt="애플로그인으로 회원가입"></a>
<a href="#" onclick="join_sns_submit('facebook');">
<input type="hidden" id="facebook_url"
value="https://www.facebook.com/v2.10/dialog/oauth?client_id=271442058762092&state=6dce16beb82acae2a0e46d58f13ca85f&response_type=code&sdk=php-sdk-5.7.0&redirect_uri=https%3A%2F%2Fnovelpia.com%2Fproc%2Flogin_facebook&scope=email">
<img src="//images.novelpia.com/img/new/menu/logo_facebook_wt.png" alt="페이스북으로 회원가입">
</a>
</div>
</div>
<!--
<div class="join-banner">
<img src="//images.novelpia.com/img/new/menu/join_modal_banner_comic.png" alt="배너">
</div>
-->
<!--이메일가입하기 버튼
<div class="">
<button class="btn-email-join"><img src="//images.novelpia.com/img/new/common/icon_email_join.svg"> 이메일로 가입하기</button>
</div>-->
<!--이메일가입창-->
<div class="email-form-wrapper">
<div class="join-display-box">
<button type="button" id="join_btn_display"
onclick="$('.join-display-box').hide(); $('.join-form-wrap').show();"><i
class="icon-email"></i>이메일로 가입하기</button>
</div>
<div class="join-form-wrap">
<input type="hidden" name="redirectrurl" value="">
<div class="join-box">
<!--<div class="form-tit txt-login2">
<div class="tit-line txt-email2"></div>
<div>
<span class="form-tit-t-bold">이메일</span>로 가입하기
</div>
<div class="tit-line txt-email2"></div>
</div>-->
<div>
<input type="email" id="join_name" name="join_email" required placeholder=" ">
<label for="join_name">이메일을 입력해주세요.</label>
</div>
<!--엣지브라우저에서 비번보이기 아이콘 겹치는이슈로 숨김처리 -->
<style>
input#join_password::-ms-clear,
input#join_password::-ms-reveal {
display: none !important;
}
</style>
<div style="position:relative">
<input type="password" name="join_password" id="join_password" required
placeholder=" ">
<label for="join_password">영문 소문자, 숫자, 특수문자 포함 8~20자</label>
<img src="//images.novelpia.com/img/new/viewer/hide.svg" class="password_vicon"
onclick="togglePasswordVisibility()"
style="position:absolute;right:18px;top:12px;width:18px" />
</div>
<div>
<input type="password" name="join_password_re" id="join_password_re" required
placeholder=" ">
<label for="join_password_re">패스워드 확인</label>
</div>
<!--
<div class="fid_box">
<div style="width:100%;">
<input type="text" name="join_fid" id="join_fid" placeholder=" " value="">
<label for="join_fid">추천인코드 입력</label>
</div>
<input type="hidden" name="is_confirm_fid" id="is_confirm_fid" value="" />
</div>
-->
</div>
<div class="join-box">
<button type="button" id="join_btn" onclick="join_form_submit();">회원가입</button>
</div>
<div class="join-check">
<div class="all-agree-check-toggle-add">
<input type="checkbox" id="all_agree_check">
<label for="all_agree_check" style="font-weight:500;">전체 동의하기</label>
</div>
<div class="all-agree-item">
<input type="checkbox" id="tos_agree_check">
<label for="tos_agree_check">
<a href="#" onclick="popup_open('term')">이용약관</a>동의(필수)
</label>
<input type="checkbox" id="tos_agree_check2">
<label for="tos_agree_check2">
<a href="#" onclick="popup_open('policy')">개인정보 수집 및 이용</a>동의(필수)
</label>
<!--
<label for="tos_agree_check">
<a href="#" onclick="popup_open('term')">이용약관</a> 및
<a href="#" onclick="popup_open('policy')">개인정보방침</a>에 동의합니다.(필수)
</label>
-->
<input type="checkbox" id="age_agree_check"><label for="age_agree_check">만 14세
이상(필수)</label>
<input type="checkbox" id="alarm_agree_check"><label for="alarm_agree_check"><a
href="#" onclick="open_popup();">혜택정보 알림</a>(선택)</label>
</div>
</div>
</div>
</div>
<!--230316추천인코드-->
<div class="friend-code-input">
<p>추천인코드</p>
<input type="text" name="join_fid" id="join_fid" value="" readonly>
</div>
<!--ID/PW찾기-->
<!--
<div class="find-idpw">
<a href="/page/id_search_new">아이디/패스워드 찾기</a>
|
<a href="javascript:member_login_modal_on();">로그인</a>
</div>
-->
</div>
<!--231106 혜택수신동의모달-->
<div class="ad-agree-pop" style="display:none;">
<div class="ad-modal-close"></div>
<div id="ad-agree-policy">
<p class="title"><span>혜택 정보 알림 수신 동의</span> (선택)</p>
<p class="title-info">노벨피아에서 제공하는 이벤트 및 서비스(제휴 서비스 포함) 안내 등 광고성 정보를 받으시려면 혜택 정보 이용에 동의하여 주시기
바랍니다.</p>
<table>
<thead>
<tr>
<th>구분</th>
<th>선택 수집항목</th>
<th>목적</th>
<th>보유 및 이용기간</th>
</tr>
</thead>
<tbody>
<tr>
<td>회원 가입(전체)</td>
<td>이메일, 휴대폰정보</td>
<td rowspan="3">이벤트 혜택 및 마케팅 정보 전송</td>
<td rowspan="3">목적달성 후 즉시 파기 또는 동의 철회 시까지</td>
</tr>
<tr>
<td>네이버 ID 가입</td>
<td>성별</td>
</tr>
<tr>
<td>카카오 ID 가입</td>
<td>카카오계정(이메일), 성별, 연령대</td>
</tr>
</tbody>
</table>
<p class="s-txt">동의를 거부할 권리가 있으며, 혜택 등의 여부와 관계 없이 회원가입을 할 수 있습니다. 다만, 동의 거부 시 상기 목적에 명시된 서비스를
제공받으실 수 없습니다.</p>
</div>
<div class="ad-agree-check">
<input type="checkbox" id="ad-agree" name="ad-agree" data-gtm-form-interact-field-id="2"
onclick="ad_checked();"><label for="ad-agree">위 혜택 정보 알림 수신에 동의합니다.</label>
</div>
</div>
</div>
</div>
</div>
<!-- 회원가입 modal END -->
<script>
$(".all-agree-toggle").click(function () {
$(".all-agree-item").toggle();
});
//$(".btn-email-join").click(function(){
// $(".email-form-wrapper").show();
// $(".btn-email-join").hide();
//});
$('#member_join_modal .sns-btns a').click(function () {
inc_stat("stat_induce_pay", {
flag_type: 48,
item_no: 1
});
});
</script>
<style>
.join-box .fid_box {
display: flex;
justify-content: center;
align-items: center;
}
.join-box .fid_box #join_fid+label:before {
content: '';
padding-left: 10px;
}
.join-box .fid_box>div {
width: calc(100% - 110px);
}
.join-box .fid_box>div .mem_no_target {
height: 60px;
line-height: 55px;
}
.join-box .fid_box>div .mem_no_target .s_inv {
filter: invert(0);
}
.join-box button.getChkFid {
width: 110px;
margin: 0px;
margin-bottom: 4px;
}
.captcha_wrap {
display: flex;
flex-direction: column;
text-align: left;
font-size: 12px;
font-weight: bold;
margin-top: 10px
}
.captcha_wrap .captcha_img img {
width: 100%;
height: 77px;
margin: 3px 0;
object-fit: fill;
}
.captcha_wrap .captcha_input {
display: flex;
flex-direction: row;
}
.captcha_wrap .captcha_input input {
width: 100%;
padding: 10px 15px;
font-size: 14px;
border: 1px solid #DDD;
margin-bottom: 5px;
}
.captcha_wrap .captcha_input span {
cursor: pointer;
width: 20%;
border-radius: 0;
margin-top: 0;
height: 43px;
background: url('//image.novelpia.com/img/new/common/refresh1.svg') no-repeat center #1E1E1E;
}
</style>
<script>
// 추천인 체크
$('.join-box').on('click', 'button.getChkFid', function () {
let _fid = $('#join_fid').val();
console.log(_fid);
getConvartFid(_fid);
});
// 추천인 확인
function getConvartFid(code) {
$.ajax({
url: "/proc/event_recommend",
data: {
"mode": "getConvartFid",
"code": code
},
type: "POST",
async: false,
dataType: "json",
success: function (response) {
if (response.status == '200') {
//console.log(response.result);
if (Object.keys(response.result).length > 0) {
// $('.join-box .fid_box > div').append('<div class="mem_no_target">'+response.result.target+'</div>');
// $('.join-box .fid_box > div input').hide();
// $('.join-box .fid_box button.getChkFid').hide();
//$('.join-box #is_confirm_fid').val('1');
$('.join-box #join_fid').val(response.result.fid);
$.cookie('FID', response.result.fid, { expires: 2, path: '/', domain: 'novelpia.com', secure: false });
return;
}
}
//$('.join-box #is_confirm_fid').val('');
$('.join-box #join_fid').val('');
$.cookie('FID', '', { expires: 0, path: '/', domain: 'novelpia.com', secure: false });
},
});
}
</script>
<!-- 로그인 modal -->
<div class="basic-modal-background" id="member_login_modal" style="padding:0;">
<div class="basic-modal-wrapper" style="background:transparent; border:0; padding:0; outline:0;">
<!--<div><img class="change-image" src="" style="width:100%;"></div>-->
<div class="basic-modal-wp-inner">
<div class="basic-modal-top">
<div class="basic-modal-name">
<img src="//images.novelpia.com/img/new/menu/icon-logo.svg" width="120" height="28">
</div>
<div class="basic-modal-close"></div>
</div>
<div class="basic-modal-contents login-contents">
<!--<img src="//images.novelpia.com/img/new/logo2.png" alt="노벨피아 로고">-->
<!--로그인/회원가입 전환 탭-->
<div class="tap-join-login">
<div class="tab-join" onclick="location.href='javascript:member_join_modal_on();';">무료 회원가입
</div>
<div class="tab-login active" onclick="location.href='javascript:member_login_modal_on();';">로그인
</div>
</div>
<div class="sns-login">
<div class="form-tit txt-login">
<div class="tit-line txt-sns login"></div>
<div>
<span class="form-tit-t-bold">SNS 계정</span>으로 <span class="form-tit-t-bold">간편하게</span>
로그인
</div>
<div class="tit-line txt-sns login"></div>
</div>
<div class="sns-btns">
<a href="https://nid.naver.com/oauth2.0/authorize?response_type=code&client_id=A8OQVi3byB1jFOckQ0RZ&redirect_uri=https%3A%2F%2Fnovelpia.com%2Fproc%2Flogin_naver%3Fredirectrurl%3D&state=2e88920be7549fd0e2f17acfb5d8917b"
onclick="$('.loads').show();"><img src="/img/new/menu/logo_naver.png" alt="네이버로 로그인">
<div class="last-login-ballon last-login-naver">최근 로그인</div>
</a>
<a href="https://kauth.kakao.com/oauth/authorize?client_id=8ef49d8a2a7a8f64a329817bb7015402&redirect_uri=https%3A%2F%2Fnovelpia.com%2Fproc%2Flogin_kakao&response_type=code&state=2e88920be7549fd0e2f17acfb5d8917b"
onclick="$('.loads').show();"><img src="/img/new/menu/logo_kakao.png" alt="카카오로 로그인">
<div class="last-login-ballon last-login-kakao">최근 로그인</div>
</a>
<!-- <a href="--><!--" onclick="$('.loads').show();"><img src="/img/new/menu/logo_google.png" alt="구글로 로그인"><div class="last-login-ballon last-login-google">최근 로그인</div></a>-->
<a href="javascript:login_sns_submit('google');"><img src="/img/new/menu/logo_google.png"
alt="구글로 로그인">
<div class="last-login-ballon last-login-google">최근 로그인</div>
</a>
<a
href="https://appleid.apple.com/auth/authorize?client_id=com.novelpia.service&redirect_uri=https://novelpia.com/proc/login_apple&response_type=code id_token&state=593391a4c51d660fcceca9505265581a&scope=email name&response_mode=form_post"><img
id="" class="apple_login_id" src="/img/new/menu/logo_apple.png" alt="애플로그인으로 로그인">
<div class="last-login-ballon last-login-apple">최근 로그인</div>
</a>
<a href="https://www.facebook.com/v2.10/dialog/oauth?client_id=271442058762092&state=6dce16beb82acae2a0e46d58f13ca85f&response_type=code&sdk=php-sdk-5.7.0&redirect_uri=https%3A%2F%2Fnovelpia.com%2Fproc%2Flogin_facebook&scope=email"
onclick="$('.loads').show();">
<img src="//images.novelpia.com/img/new/menu/logo_facebook_wt.png" alt="페이스북으로 로그인">
<div class="last-login-ballon last-login-facebook">최근 로그인</div>
</a>
</div>
<script type="text/javascript"
src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/ko_KR/appleid.auth.js"></script>
<script type="text/javascript">
AppleID.auth.init({
clientId: 'com.novelpia.service',
scope: 'email name',
redirectURI: 'https://novelpia.com/proc/login_apple',
state: '2e88920be7549fd0e2f17acfb5d8917b',
usePopup: false
});
</script>
</div>
<form action="/proc/login" id="login_box" method="post">
<input type="hidden" name="redirectrurl" value="">
<div class="login-box">
<div class="last-login-ballon in-form last-login-basic">최근 로그인</div>
<div class="form-tit txt-login2">
<div class="tit-line txt-email2"></div>
<div>
<span class="form-tit-t-bold">이메일</span>로 로그인
</div>
<div class="tit-line txt-email2"></div>
</div>
<input type="email" name="email" value="vpcsoukq@hotmail.com" placeholder="이메일을 입력해주세요."
required>
<input type="password" name="wd" placeholder="비밀번호를 입력해주세요.">
<!-- 캡챠영역 -->
<div class="login-check">
<input type="checkbox" id="idsave" name="idsave" checked><label
for="idsave">아이디저장</label>
<div>
<a class="find-idpw-txt" href="/id_search">아이디</a>/<a class="find-idpw-txt"
href="/pw_search">패스워드 찾기</a>
</div>
</div>
<button type="submit" style="margin-top:0;">이메일 로그인하기</button>
</div>
</form>
<!--
<div class="find-idpw">
<a href="/page/id_search_new">아이디/패스워드 찾기</a>
|
<a href="javascript:member_join_modal_on();">회원가입</a>
</div>
-->
</div>
</div>
</div>
</div>
<!-- 로그인 modal END -->
<style>
#total_event_auth_modal .event_plus_ad {
background: #fff;
border-radius: 10px;
}
#total_event_join_modal .event_plus_ad {
background: #fff;
border-radius: 10px;
}
#total_event_guide_modal .event_plus_ad {
background: #fff;
border-radius: 10px;
}
#total_event_modal .event_plus_ad {
background: #fff;
border-radius: 10px;
}
.disable_scroll {
height: 100%;
min-height: 100%;
overflow: hidden !important;
touch-action: none;
}
</style>
<link rel='stylesheet' href='/css/total_event_modal.css?v=1760926093'>
<div class="total-modal-background" id="total_event_auth_modal" style="display:none;">
<div class="event-plus-modal-wrapper">
<div class="event-plus-modal-content-wrapper">
<div class="event_plus_ad layer-min-coupon">
<div class="layer-min-coupon-image"><img style="cursor:default;"
src="//images.novelpia.com/img/new/main/coupon_img.png" /></div>
<div class="event-plus-close"></div>
<div class="coupon-txt-body">
<p class="txt-tit">
본인인증 하고 무료이용권 받으세요<br>
웹소설, 웹만화 무제한 즐기기!
</p>
<div class="coupon-notice-wrapper">
<ul class="coupon-notice-list">
<li>- 본인인증을 완료하시면 플러스 무료 이용권을 바로 지급해 드립니다.</li>
<li>- 본인인증 동일 명의 내 계정 1개만 사용이 가능합니다.</li>
</ul>
</div>
</div>
<div class="coupon-button-area">
<button class="detail-modal-button detail-modal-hottime-btn button-use">본인인증 하기</button>
</div>
</div>
</div>
<div class="event-plus-modal-button-wrapper" style="margin-top:15px; text-align:center; display:block;">
<p class="hottime-modal-close-btn later-close">24시간동안 보지않기</p>
</div>
</div>
</div>
<div class="total-modal-background" id="total_event_join_modal" style="display:none;">
<div class="event-plus-modal-wrapper">
<div class="event-plus-modal-content-wrapper">
<div class="event_plus_ad layer-min-coupon">
<div class="layer-min-coupon-image"><img style="cursor:default;"
src="//images.novelpia.com/img/new/main/coupon_img_join.png" /></div>
<div class="event-plus-close"></div>
<div class="coupon-txt-body">
<p class="txt-tit">
본인인증 하고 매일 무료이용권 받으세요<br>
웹소설, 웹만화 무제한 즐기기!
</p>
</div>
<div class="coupon-button-area">
<button class="detail-modal-button detail-modal-hottime-btn button-use">무료 이용권 받기</button>
</div>
</div>
</div>
<div class="event-plus-modal-button-wrapper" style="margin-top:15px; text-align:center; display:block;">
<p class="hottime-modal-close-btn later-close">24시간동안 보지않기</p>
</div>
</div>
</div>
<div class="total-modal-background" id="total_event_guide_modal" style="display:none;">
<div class="event-plus-modal-wrapper">
<div class="event-plus-modal-content-wrapper">
<div class="event_plus_ad layer-min-coupon-guide">
<div class="layer-min-coupon-image"><img style="cursor:default;"
src="//images.novelpia.com/img/new/main/coupon_img_none.png" /></div>
<div class="coupon-txt-body">
<p class="txt-tit">
10분 무료이용권이 적용되었습니다!<br>
매일 다양한 플러스 작품들을 감상해보세요.
</p>
<div class="coupon-notice-wrapper">
<ul class="coupon-notice-list">
<li class="coupon-notice01">- 본 쿠폰은 10분간 이용 가능합니다.</li>
<li>- 일부 회차는 열람이 제한될 수 있습니다.</li>
<li>- 30화 이하 소설작품의 유료회차는 이용권이 적용되지 않습니다.</li>
<li>- 최초 본인인증한 계정에만 이용권이 지급됩니다.</li>
</ul>
</div>
</div>
<div class="coupon-button-area">
<button class="detail-modal-button detail-modal-hottime-btn button-use">플러스 작품 감상하기</button>
</div>
</div>
</div>
</div>
</div>
<div class="total-modal-background" id="total_event_modal" style="display:none;">
<div class="event-plus-modal-wrapper">
<div class="event-plus-modal-content-wrapper">
<div class="event_plus_ad layer-min-coupon">
<div class="layer-min-coupon-image"><img style="cursor:default;"
src="//images.novelpia.com/img/new/modal/10min_coupon_img2.png" /></div>
<div class="event-plus-close"></div>
<div class="coupon-txt-body">
<p class="txt-main-tit">
00분 무료이용권
</p>
<p class="txt-tit">
웹소설/웹만화 플러스 작품을<br>
무료로 즐겨보세요!</span>
</p>
<div class="coupon-notice-wrapper">
<ul class="coupon-notice-list">
<li class="coupon-notice01">- 본 쿠폰은 30분간 이용 가능합니다.</li>
<li class="coupon-notice02">- 유효기간은 까지 입니다.</li>
<div class="coupon-notice-detail hide">
<li>- 일부 회차는 열람이 제한될 수 있습니다.</li>
<li>- 30화 이하 소설작품의 유료회차는 이용권이 적용되지 않습니다.</li>
<li>- 본인인증 동일 명의 내 계정 1개만 사용이 가능합니다.</li>
<li class="coupon-notice-allow-alarm">- 우측상단 선물함 <img class="d_inv"
src="//images.novelpia.com/img/new/main/new_top_ico_gift.png"
style="width:20px; cursor:default;"> 에서도 이용권을 사용할 수 있습니다.</li>
</div>
</ul>
<div class="coupon-notice-folder"><button>+</button><span>자세히 보기</span></div>
</div>
</div>
<div class="coupon-button-area">
<button class="detail-modal-button detail-modal-href-btn button-href">선물함 이동하기</button>
<button class="detail-modal-button detail-modal-hottime-btn button-use">이용권 사용하기</button>
</div>
</div>
</div>
<div class="event-plus-modal-button-wrapper" style="margin-top:15px; text-align:center; display:block;">
<p class="hottime-modal-close-btn later-close">24시간동안 보지않기</p>
</div>
</div>
</div>
<link rel='stylesheet' href='/css/target_modal.css?v=1760926093'>
<link rel='stylesheet' href='/css/modal.css'>
<link rel='stylesheet' href='/css/openstore_modal.css?v=1760926093'>
<style>
/* 20251001 김민지 모달스타일변수 오버라이딩 */
ul,
li {
list-style: none;
padding: 0
}
.infoModal {
--titleFontSize: 1em;
--titleLineHeight: 30px;
--inBoxBlueMargin: 30px 0 25px;
--inBoxBluePadding: 25px;
--inBoxBlueRadius: 15px;
--infoModalContainerBorder: none;
}
.infoModal__topBanner {
margin-top: -100px;
}
.auth-3day-success .auth-3day-res-tit,
.auth-3day-fail .auth-3day-res-tit {
margin-top: 10px;
font-size: 18px;
}
.auth-3day-success .terms-txt,
.auth-3day-fail .terms-txt {
font-size: 12px;
}
@media (max-width: 628px) {
.infoModal {
--titleLineHeight: 20px;
--inBoxBlueMargin: 10px 0;
--inBoxBluePadding: 20px;
}
.auth-3day-success .auth-3day-res-tit,
.auth-3day-fail .auth-3day-res-tit {
font-size: 16px;
}
.auth-3day-success .in-box-blue .infoModal__title {
font-size: 14px;
}
.auth-3day-success .terms-txt {
font-size: 11px;
}
}
</style>
<div class="infoModal">
<div id="auth-3day-modal-background" class="infoModal__bg" style="z-index:9991;"
onclick="modalClose('auth_3day')"></div>
<div id="auth-3day-modal-container" class="infoModal__container" style="background:transparent;z-index:9992;">
<div class="auth-3day-target" style="position:relative; background:#fff; display: none;">
<div href="" class="layerCloseButton layerCloseButton--outer" onclick="modalClose('auth_3day')"></div>
<img src="//images.novelpia.com/img/new/event/auth_3day/banner_main_3day.png"
class="infoModal__topBanner">
<div class="infoModal__contentWrap">
<div class="infoModal__title">
노벨피아에 오신걸 환영합니다.</br>
회원님께만 드리는 특별한 선물을 준비했습니다!
</div>
<div class="in-box-blue">
<div class="infoModal__title txt-blue">플러스 멤버십 3일간 무료!</div>
<div class="infoModal__title mt10">웹소설과 웹만화를 자유롭게 열람해보세요!</div>
</div>
<ul class="terms-txt terms-txt--left">
<li>※ 일부 작품 및 회차는 열람에 제한될 수 있습니다.</li>
<li>※ 중복 혜택 방지를 위해 본인인증을 진행합니다.</li>
</ul>
</div>
<div class="infoModal__innerBtn">
<button class="detail-modal-button color-bl" style="border-radius: 0;"
onclick="on_click_auth_3day()">지금 바로 혜택 받기</button>
</div>
<div style="position:absolute; bottom:-30px; text-align:left; font-size:16px; cursor:pointer;"
onclick="modalClose('auth_3day', 1)"><span style="padding:0 10px; color: #eee;">24시간동안 보지 않기</span>
</div>
</div>
<div class="auth-3day-success" style="position:relative; background:#fff; display: none;">
<div href="" class="layerCloseButton" style="color:#0e0e0e;" onclick="modalClose('auth_3day')"></div>
<div class="infoModal__contentWrap">
<div
style="padding-top: 10px; width:100%; display:flex; justify-content: center; align-items: center;">
<div
style="width:30px; height:30px; display:flex; justify-content: center; align-items: center; border-radius:9999px; background: #3271FF;">
<img src="//images.novelpia.com/img/new/icon/free-icon-checkmark.svg">
</div>
</div>
<div class="infoModal__title auth-3day-res-tit">
3일 무료 쿠폰이 적용되었습니다.
</div>
<div class="in-box-blue">
<div class="infoModal__title">회원님께서는 <span class="txt-blue auth-3day-dt">10월 20일</span>까지</div>
<div class="infoModal__title">웹만화/ 웹소설을 이용하실 수 있습니다.</div>
<div class="infoModal__title">다양한 컨텐츠를 즐겨보세요!</div>
</div>
<ul class="terms-txt terms-txt--left">
<li>※ 일부 작품 및 회차는 열람에 제한될 수 있습니다.</li>
<li>※ 모든 회차를 자유롭게 열람하시기 위해서는 플러스 멤버십 구독이 필요합니다.</li>
<li>※ 이용권 기간 중 결제 시 이용권의 남은기간은 소멸됩니다.</li>
<li>※ 해당 혜택은 본사 사정에 의해 예고없이 종료될 수 있습니다.</li>
</ul>
</div>
<div class="infoModal__innerBtn">
<button class="detail-modal-button color-bl" style="border-radius: 0;"
onclick="location.href='/novel_ranking'">인기작품 확인하기</button>
</div>
</div>
<div class="auth-3day-fail" style="position:relative; background:#fff; display: none;">
<div href="" class="layerCloseButton" style="color:#0e0e0e;" onclick="modalClose('auth_3day')"></div>
<div class="infoModal__contentWrap">
<div style="padding-top: 10px; width:100%; display:flex; justify-content: center;">
<div
style="width:30px; height:30px; display:flex; justify-content: center; align-items: center; border-radius:9999px; background: #FE585D;">
<img src="//images.novelpia.com/img/new/icon/free-icon-delete.svg">
</div>
</div>
<div class="infoModal__title auth-3day-res-tit">
무료 쿠폰 대상자가 아닙니다.
</div>
<div class="infoModal__desc">
이미 본인인증이 완료된</br>
계정이 있으신것으로 확인되었습니다.
</div>
</div>
<div class="infoModal__innerBtn">
<button class="detail-modal-button" style="border-radius: 0;"
onclick="modalClose('auth_3day')">확인</button>
</div>
</div>
</div>
</div>
<script>
const modalClose = (id, flag_always = 0) => {
if (id === "auth_3day") {
if (flag_always === 1) {
$.cookie('modal_auth_3day', 1, { expires: 1, path: '/', domain: 'novelpia.com', secure: false });
}
$("#auth-3day-modal-background").hide();
$("#auth-3day-modal-container").hide();
}
}
function on_click_auth_3day() {
const mem_no = "0";
if (mem_no == 0) {
member_join_modal_on();
modalClose('auth_3day');
} else {
location.href = '/page/age_auth?adult=3';
}
}
</script>
<script type="module">
(function () {
wn_response_open();
wn_modal_open();
})();
function wn_response_open() {
const auth_3day_res = $.cookie('auth_3day_res');
$.removeCookie('auth_3day_res', { path: '/', domain: '.novelpia.com' });
$.removeCookie('auth_3day_res');
if (auth_3day_res == 1) {
$("#auth-3day-modal-background").show();
$("#auth-3day-modal-container").show();
const dt = moment().add(3, "days").format("M월 D일");
$(".auth-3day-dt").text(dt);
$(".auth-3day-success").show();
} else if (auth_3day_res == 2) {
$("#auth-3day-modal-background").show();
$("#auth-3day-modal-container").show();
$(".auth-3day-fail").show();
}
}
function wn_modal_open() {
if ($("#total_event_modal").css('display') === 'block') {
$("#total_event_modal").hide();
}
if (!check_condition()) {
return false;
}
const chk = $.cookie('modal_auth_3day');
if (chk == 1) {
return false;
}
$("#auth-3day-modal-background").show();
$("#auth-3day-modal-container").show();
$(".auth-3day-success").hide();
$(".auth-3day-fail").hide();
$(".auth-3day-target").show();
return true;
}
/*
function wn_modal_close(){
$.cookie('wn_main_bnr',1, { expires: 1, path: '/', domain: 'novelpia.com', secure: false });
$("#world_novelpia_modal").modal('hide');
}
*/
$('#world_novelpia_modal .wn_close_modal').click(function () {
$.cookie('wn_main_bnr', 1, { expires: 1, path: '/', domain: 'novelpia.com', secure: false });
$("#world_novelpia_modal").modal('hide');
});
$('.day_close').click(function () {
$.cookie('wn_main_bnr', 1, { expires: 1, path: '/', domain: 'novelpia.com', secure: false });
$("#world_novelpia_modal").modal('hide');
});
$('.layer-close-x2').click(function () {
$("#world_novelpia_modal").modal('hide');
});
$("#contest_modal").on("click", ".detail-modal-7-day-close", function () {
$.cookie('is_contest_modal', '1', { expires: 7, path: '/', domain: 'novelpia.com', secure: false });
$("#contest_modal").modal('hide');
});
$('.layer-close-x3').click(function () {
$("#contest_modal").modal('hide');
});
function check_condition() {
const wn_now = moment().format('YYYY-MM-DD HH:mm:ss');
const wn_mem_no = "0";
const wn_mem_phone = "";
const wn_mem_plus_date = "";
if (wn_mem_phone) {
return false;
}
if (wn_mem_plus_date && wn_mem_plus_date > wn_now) {
return false;
}
return true;
}
</script>
<script>
// login , join 관련 scripts
// 22.01.20 - sschoi
let this_url = window.location.href;
if (this_url.indexOf("viewer") !== -1) {
//$('.change-image').attr('src', '//images.novelpia.com/img/new/banner/join_banner_viewer.png');
}
$(".basic-modal-close").click(function () {
$(".basic-modal-background").hide();
$('.ad-agree-pop').hide();
$.cookie('_redirectrurl', '', { expires: 365, path: '/', domain: 'novelpia.com', secure: false });
// 에피소드 리스트로 넘기기
/* if(this_url.indexOf("viewer") != -1){
if($.cookie('out_url')){
location.href = $.cookie('out_url');
$.cookie('out_url', '', { expires: 365, path: '/', domain: 'novelpia.com', secure: false });
}
else {
$.cookie('out_url', '', { expires: 365, path: '/', domain: 'novelpia.com', secure: false });
history.go(-1);
return false;
}
}*/
/* if(this_url.includes('intro_landing')){
return ;
}
if(this_url.includes('user_free_ticket')){
return;
}*/
if (this_url.includes('viewer')) {
/* if($.cookie('out_url')){
location.href = $.cookie('out_url');
$.cookie('out_url', '', { expires: 365, path: '/', domain: 'novelpia.com', secure: false });
}
else {*/
$.cookie('out_url', '', { expires: 365, path: '/', domain: 'novelpia.com', secure: false });
//history.go(-1);
return false;
// }
}
else if (this_url.includes('comic_episode')) {
return false;
}
else if (this_url.includes('comic')) {
location.href = '/comic_main';
}
else {
// location.href = '/';
return false;
}
/* if(this_url.includes('comic')){
location.href = '/comic_main';
}
else if(this_url.includes('viewer') ){
location.href = '/';
}
else {
// location.href = '/';
return;
}*/
})
$("#all_agree_check").click(function () {
if ($("#all_agree_check").prop("checked")) {
$("#tos_agree_check").prop("checked", true);
$("#tos_agree_check2").prop("checked", true);
$("#age_agree_check").prop("checked", true);
$("#alarm_agree_check").prop("checked", true);
} else {
$("#tos_agree_check").prop("checked", false);
$("#tos_agree_check2").prop("checked", false);
$("#age_agree_check").prop("checked", false);
$("#alarm_agree_check").prop("checked", false);
}
});
$(".join-check input[type='checkbox']").click(function () {
if ($(this).attr("id") != "all_agree_check" && $(this).prop("checked") == false) {
$("#all_agree_check").prop("checked", false);
}
if ($(".join-check input[type='checkbox']:checked").length == 4 && $("#all_agree_check").prop("checked") == false) {
$("#all_agree_check").prop("checked", true);
}
});
/*
$("#tos_agree_check").click(function(){
if($('#tos_agree_check').is(':checked')){
if($('age_agree_check').is(':checked')){
if($('alarm_agree_check').is(':checked')){
$("#all_agree_check").prop("checked",true);
}
}
}
});
*/
$("#age_agree_check").click(function () {
});
$("#alarm_agree_check").click(function () {
});
function member_join_modal_on() {
$('#member_login_modal').hide();
$('#member_join_modal').show();
//$(".email-form-wrapper").hide();
//$(".btn-email-join").show();
if ($.cookie('FID')) {
$('#join_fid').val($.cookie('FID'));
} else {
$('.friend-code-input').hide();
}
join_recent_data();
const reurl = $.cookie('_redirectrurl');
if (reurl == '' || reurl === null || reurl == undefined) {//쿠키값이 없을때는 '', 쿠키 자체가 안구워졌을때는 undefined
$.cookie('_redirectrurl', 'L25vdmVsLzI0ODEyOA==', { expires: 365, path: '/', domain: 'novelpia.com', secure: false });
}
}
function member_login_modal_on() {
$('#member_join_modal').hide();
$('#member_login_modal').show();
$('.last-login-ballon').hide();
let last_login = $.cookie('last_login');
if (reurl !== '' || reurl !== null || reurl !== undefined) {
$('.last-login-' + last_login).show();
}
// 현재페이지 쿠키저장
var reurl = $.cookie('_redirectrurl');
if (reurl == '' || reurl === null || reurl == undefined) {
$.cookie('_redirectrurl', 'L25vdmVsLzI0ODEyOA==', { expires: 365, path: '/', domain: 'novelpia.com', secure: false });
}
}
function modal_all_close() {
$('#member_join_modal').hide();
$('#member_login_modal').hide();
}
function popup_open(name) {
if (name == 'term') {
var url = "/page/terms_of_use";
} else if (name == 'policy') {
var url = "/page/privacy_policy";
}
let agent = "WEB";
if (agent == "IOS") {
location.href = url;
} else {
var name = "terms_popup";
//var option = "width = 500, height = 500, top = 100, left = 200, location = no"
var option = "location = no";
window.open(url, name, option);
}
}
async function open_popup() {
const httpData = await http("get", "/proc/policy", { cmd: "get_policy", page: "ad_policy", type: 1 });
if (httpData.status === 200) {
document.getElementById("ad-agree-policy").innerHTML = httpData.policy.memo;
}
$('.ad-agree-pop').show();
}
function ad_checked() {
const ad_checkbox = document.getElementById('ad-agree');
const ad_checked = ad_checkbox.checked;
if (ad_checked === true) {
$("#alarm_agree_check").prop("checked", true);
$('.ad-agree-pop').hide();
} else {
$("#alarm_agree_check").prop("checked", false);
$('.ad-agree-pop').hide();
}
}
$('.ad-modal-close').click(function () {
$('.ad-agree-pop').hide();
});
function all_agree_check() {
$('input:checkbox[id="all_agree_check"]').is(":checked") == true;
$('input:checkbox[id="tos_agree_check"]').is(":checked") == true;
$('input:checkbox[id="tos_agree_check2"]').is(":checked") == true;
$('input:checkbox[id="age_agree_check"]').is(":checked") == true;
$('input:checkbox[id="alarm_agree_check"]').is(":checked") == true;
}
function login_sns_submit(sns) {
const app_store = "WEB";
const app_version = 0;
if (sns == 'google') {
if (app_store == "GOOGLE" && app_version >= 81) {
novelpia.googleLogin();
} else if (app_store == 'IOS' && app_version >= 23) {
window.webkit.messageHandlers.novelpia.postMessage({ name: "googleLogin" });
} else {
location.href = '/proc/login_google';
}
}
}
function join_sns_submit(sns) {
const app_store = "WEB";
const app_version = 0;
var tos_agree = $('#tos_agree_check').prop("checked");
var tos_agree2 = $('#tos_agree_check2').prop("checked");
var age_agree = $('#age_agree_check').prop("checked");
var alarm_agree = $('#alarm_agree_check').prop("checked");
var location_url = '';
var fid = $('#join_fid').val();
//RTBHOUSE 회원가입 시작 스크립트
(rtbhEvents = window.rtbhEvents || []).push(
{
eventType: 'basket',
},
{
eventType: 'custom',
name: 'signup-start',
value: '1'
},
{
eventType: 'UID',
id: '0'
});
/*
if(!tos_agree){
alert("이용약관 동의 후 가입이 가능합니다.");
return false;
}
if(!age_agree){
alert("개인정보방침에 동의 후 가입이 가능합니다.");
return false;
}
if(!tos_agree2){
alert("만 14세 이상만 가입이 가능합니다.");
return false;
}
*/
if (fid != '') {
getConvartFid(fid);
}
if (alarm_agree) {
//location_url = $('#'+sns+'_url').val()+"&alarm=1";
$.cookie('alarmchk', '1', { expires: 365, path: '/', domain: 'novelpia.com', secure: false });
} else {
//location_url = $('#'+sns+'_url').val()+"&alarm=0";
$.cookie('alarmchk', '0', { expires: 365, path: '/', domain: 'novelpia.com', secure: false });
}
if (sns == 'apple') {
//appleid-signin
$('.apple_join_id').attr('id', 'appleid-signin');
AppleID.auth.init({
clientId: 'com.novelpia.service',
scope: 'email name',
redirectURI: 'https://novelpia.com/proc/login_apple',
state: '2e88920be7549fd0e2f17acfb5d8917b',
usePopup: false
});
//$('#appleid-signin').unbind('click');
$('#appleid-signin')[0].click();
//$('#appleid-signin').trigger("click");
} else if (sns == 'google') {
if (app_store == "GOOGLE" && app_version >= 81) {
novelpia.googleLogin();
} else if (app_store == 'IOS' && app_version >= 23) {
window.webkit.messageHandlers.novelpia.postMessage({ name: "googleLogin" });
} else {
location.href = '/proc/login_google';
}
} else {
location_url = $('#' + sns + '_url').val();
location.href = location_url;
}
}
function login_sns_apple() {
$('.apple_login_id').attr('id', 'appleid-signin');
AppleID.auth.init({
clientId: 'com.novelpia.service',
scope: 'email name',
redirectURI: 'https://novelpia.com/proc/login_apple',
state: '2e88920be7549fd0e2f17acfb5d8917b',
usePopup: false
});
$('#appleid-signin')[0].click();
}
function join_form_submit() {
var fid = $('#fid').val();
var name = $('#join_name').val();
var pw1 = $('#join_password').val();
var pw2 = $('#join_password_re').val();
var tos_agree = $('#tos_agree_check').prop("checked");
var tos_agree2 = $('#tos_agree_check2').prop("checked");
var age_agree = $('#age_agree_check').prop("checked");
var alarm_agree = $('#alarm_agree_check').prop("checked");
var fid = $('#join_fid').val();
//var is_recommend = $('#is_confirm_fid').val();
//RTBHOUSE 회원가입 시작 스크립트
(rtbhEvents = window.rtbhEvents || []).push(
{
eventType: 'basket',
},
{
eventType: 'custom',
name: 'signup-start',
value: '1'
},
{
eventType: 'UID',
id: '0'
});
var regExp = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i; // 검증에 사용할 정규식 변수 regExp에 저장
if (name.match(regExp) != null) {
//alert('Good!');
} else {
alert("잘못된 이메일 규칙입니다.");
return false;
}
if (pw1.length == 0) {
alert("패스워드를 작성해주세요.");
return false;
}
if (pw1.length < 8) {
alert("패스워드가 너무 짧게 작성되었습니다.");
return false;
}
if (pw1.length > 20) {
alert("패스워드가 너무 길게 작성되었습니다.");
return false;
}
if (pw1 != pw2) {
alert("패스워드가 서로 다르게 작성되었습니다.");
return false;
}
if (!tos_agree) {
alert("이용약관 동의후 가입이 가능합니다.");
return false;
}
if (!tos_agree2) {
alert("개인정보방침에 동의후 가입이 가능합니다.");
return false;
}
if (!age_agree) {
alert("만 14세 이상만 가입이 가능합니다.");
return false;
}
if (fid != '') {
getConvartFid(fid);
fid = $('#join_fid').val();
}
var preUrl = document.referrer;
var preurlArr = preUrl.split('/');
var return_pid = $.cookie('return_pid');
$('#join_btn').prop('disabled', true);
inc_stat("stat_induce_pay", {
flag_type: 48,
item_no: 1
});
$.ajax({
url: "/proc/join_ver2",
data: {
"fid": fid,
"email": name,
"password": pw1,
"conpassword": pw2,
"tos_agree": tos_agree,
"tos_agree2": tos_agree2,
"age_agree": age_agree,
"alarm_agree": alarm_agree
},
type: "POST",
dataType: "json",
success: function (response) {
if (response.status == '200') {
try {
// 마케팅 스크립트 다른 파일로 교체
} catch (e) {
} finally {
//alert(response['result']['msg']);
//alert(response['result']['return_url']);
if (response.event_id) {
$.cookie('facebook_event_id', response.event_id, { expires: 1, path: '/', domain: 'novelpia.com', secure: false });
}
setTimeout(function () {
if ($.cookie('FID')) { // 추천인
location = '/page/age_auth_recommend';
return false;
} else {
//새로운 맴버 체크값 쿠키게 담기
const new_member_popup = $.cookie('new_member_popup');
if (new_member_popup == 1) {
//$.cookie('new_member', 0, { expires: 365, path: '/', domain: 'novelpia.com', secure: false });
} else {
$.cookie('new_member', 1, { expires: 1, path: '/', domain: 'novelpia.com', secure: false });
}
//location.href = "/";
//마케팅 redirect_url이 있을경우 해당 url로 이동
if (response['result']['return_url']) {
location = response['result']['return_url'];
} else {
location.reload();
}
}
}, 300);
}
} else {
var errmsg = response['result'] || "연동 오류";
$('#join_btn').prop('disabled', false);
alert(errmsg);
}
},
error: function (request, status, error) {
$('#join_btn').prop('disabled', false);
console.log("code:" + request.status + "\n" + "message:" + request.responseText + "\n" + "error:" + error);
},
complete: function () {
}
});
}
$(document).ready(function () {
// 비플러스 30분 이용권 프로모션
let mem_no = "0";
if (mem_no != 0) {
get_event_plus_list().then(function () {
proc_additional_modal();
});
}
if ($.cookie("new_member") == 1) {
//새회원팝업창 open
openWelcomePopup();
}
//생성된 캡챠가 있는지 확인
if (mem_no == 0) { //비회원일때만
get_captcha_check();
}
});
function login_chk() {
return 0;
}
function get_ignore_list() {
const ignore_storage = localStorage.getItem('event_plus_ignore') ? JSON.parse(localStorage.getItem('event_plus_ignore')) : {};
const mem_no = "0";
const nowTtl = Date.now();
let ignore_list = ignore_storage[mem_no] ? ignore_storage[mem_no] : [];
ignore_list = ignore_list.filter((val) => val.expire > nowTtl);
ignore_storage[mem_no] = ignore_list;
localStorage.setItem('event_plus_ignore', JSON.stringify(ignore_storage));
return ignore_list;
}
function set_ignore_list(ignore_list, ttl) {
const ignore_storage = localStorage.getItem('event_plus_ignore') ? JSON.parse(localStorage.getItem('event_plus_ignore')) : {};
const mem_no = "0";
const nowTtl = Date.now();
ignore_list = ignore_list.map((val) => {
return { idx: val, expire: nowTtl + ttl };
});
if (ignore_storage[mem_no]) {
ignore_storage[mem_no] = ignore_storage[mem_no].concat(ignore_list);
}
else {
ignore_storage[mem_no] = ignore_list;
}
localStorage.setItem('event_plus_ignore', JSON.stringify(ignore_storage));
return true;
}
async function get_event_plus_list() {
const ignore_obj = get_ignore_list();
const ignore_list = ignore_obj.map((val) => val.idx);
const data = {
cmd: "event_list",
ignore_list: ignore_list,
};
const response = await http("get", "/proc/member_plus", data);
const { status, errmsg, result, code } = response;
if (!ignore_list.includes(0)) {
if (code == 100) {
//2024_100원 이벤트
if ($("#world_novelpia_modal").css('display') === 'block') {
$("#total_event_modal").hide();
} else {
$('#total_event_auth_modal').show();
}
return;
}
else if (code == 101) {
$('#total_event_join_modal').show();
return;
}
}
const { event_list } = result;
if (!event_list || event_list.length == 0) {
event_idx = 0;
return;
}
await get_event_plus_check(event_list);
}
let event_idx;
async function get_event_plus_check(event_list) {
const data = {
cmd: "event_check",
event_list,
};
const response = await http("get", "/proc/member_plus", data);
const { status, errmsg, result, code } = response;
const { plus_minute = 0, idx = 0, end_dt, first_check, fn_method } = result;
event_idx = idx;
if (!plus_minute || !idx) {
set_ignore_list(event_list, 1000 * 60 * 60 * 24 * 365);
return;
}
let span_red_dot = $('<span id="free_ticket_alarm"></span>');
let span_red_dot_m = $('<span id="free_ticket_alarm_m"></span>');
$('#btn_free_ticket > a').append(span_red_dot);
$('#btn_m_free_ticket > a').append(span_red_dot_m);
$('#sideTicket').addClass("create-new");
$('#sideTicketM').addClass("create-new");
event_list = event_list.filter((val) => val != idx);
set_ignore_list(event_list, 1000 * 60 * 60 * 24 * 365);
let day = Math.floor(plus_minute / 1440);
let hour = Math.floor(plus_minute / 60);
let minute = plus_minute % 60;
const time = new Date(end_dt);
const koreanDay = ['일', '월', '화', '수', '목', '금', '토'];
const end_hour = time.getMinutes() == 59 ? time.getHours() + 1 : time.getHours();
if (day >= 4) {
$('.txt-main-tit').text(`${day ? day + "일" : ""} 무료이용권`);
$('.coupon-notice01').text(`- 본 쿠폰은 ${day ? day + "일" : ""}간 이용 가능합니다.`);
$('.coupon-notice03').text(`${day ? day + "일" : ""} 이용권을 사용하시겠어요?`);
}
else {
$('.txt-main-tit').text(`${hour ? hour + "시간" : ""}${minute ? minute + "분" : ""} 무료이용권`);
$('.coupon-notice01').text(`- 본 쿠폰은 ${hour ? hour + "시간" : ""}${minute ? minute + "분" : ""}동안 이용 가능합니다.`);
$('.coupon-notice03').text(`${hour ? hour + "시간" : ""}${minute ? minute + "분" : ""} 이용권을 사용하시겠어요?`);
}
$('.coupon-notice02').text(`- 사용기한은 ${(time.getMonth() + 1) + '월 ' + time.getDate() + '일(' + koreanDay[time.getDay()] + ') ' + end_hour + '시'}까지 입니다.`);
$('.coupon-notice03').text(`${hour ? hour + "시간" : ""}${minute ? minute + "분" : ""} 이용권을 사용하시겠어요?`);
if (fn_method == 'fn_check_new_join') {
const today = new Date();
$('.coupon-notice02').text(`- 사용기한은 ${(today.getMonth() + 1) + '월 ' + today.getDate() + '일(' + koreanDay[today.getDay()] + ') 24시'}까지 입니다.`);
}
if (first_check == 1) {
get_event_plus_insert();
}
else {
if ($("#world_novelpia_modal").css('display') === 'block') {
$("#total_event_modal").hide();
} else {
$('#total_event_modal').show();
}
}
let hottime_stat = $.cookie('hottime_stat');
hottime_stat = Number(hottime_stat);
if (hottime_stat != 1) {
hottime_stat_plus_view();
}
}
async function get_event_plus_insert() {
if (!event_idx) {
return;
}
const data = {
cmd: "event_insert",
event_idx
}
const response = await http("get", "/proc/member_plus", data);
const { status, errmsg = "연동 오류", result } = response;
const { plus_minute, idx, fn_method, first_check } = result;
if (plus_minute > 0) {
let day = Math.floor(plus_minute / 1440);
let hour = Math.floor(plus_minute / 60);
let minute = plus_minute % 60;
hottime_stat_plus();
const toastr_msg = "플러스 이용권이 적용되었습니다.";
if (day >= 4) {
toastr.info(`${day ? day + "일" : ""}`, toastr_msg, { timeOut: 2000 });
}
else {
toastr.info(`${hour ? hour + "시간" : ""} ${minute ? minute + "분" : ""}`, toastr_msg, { timeOut: 2000 });
}
if (fn_method == 'fn_check_new_join') {
set_ignore_list([event_idx], 1000 * 60 * 60);
}
else {
set_ignore_list([event_idx], 1000 * 60 * 60 * 24 * 365);
}
$("#total_event_modal").hide();
if (first_check) {
$("#total_event_guide_modal").show();
}
return idx;
} else {
set_ignore_list([event_idx], 1000 * 60 * 60 * 24 * 365);
alert(errmsg);
return 0;
}
}
function proc_additional_modal() {
if (typeof wn_modal_open === 'function') {
wn_modal_open();
}
}
function hottime_stat_plus_view() {
$.cookie('hottime_stat', '1', { expires: 365, path: '/', domain: 'novelpia.com', secure: false });
inc_stat("stat_induce_pay", {
flag_type: 44,
item_no: 0
})
}
function hottime_stat_plus() {
inc_stat("stat_induce_pay", {
flag_type: 45,
item_no: 0
})
}
function join_recent_data() {
const mem_no = 0;
const is_pid_data = false;
if (mem_no !== 0) {
return;
}
if (is_pid_data === true) {
return;
}
const storage_data = JSON.parse(localStorage.getItem('userLastNovelData'));
if (storage_data === null) {
$('#member_join_modal .join-top-nv-section').hide();
return;
}
const last_index = storage_data.length - 1;
const recent_data = storage_data[last_index];
let cover_url = '';
let item_name = '';
let writer_nick = '';
let item_age = '';
if (recent_data['viewer_type'] === 'novel') {
if (recent_data.content_data.novel_age != 19) {
cover_url = G_CDN_DOMAIN_IMG + recent_data.content_data.novel_thumb_all;
item_name = recent_data.content_data.novel_name;
writer_nick = recent_data.content_data.writer_nick;
item_age = recent_data.content_data.novel_age;
}
} else if (recent_data['viewer_type'] === 'comic') {
if (recent_data.content_data.comic_age != 19) {
cover_url = recent_data.content_data.thumb_img;
item_name = recent_data.content_data.comic_title;
writer_nick = recent_data.content_data.writer_nick;
item_age = recent_data.content_data.comic_age;
}
}
if (item_age != 19 && item_age !== '') {
// $('#member_join_modal .join-top-section-bg').css('background', `url('${cover_url}')`);
$('#member_join_modal .join-top-cover img').attr('src', cover_url);
$('#member_join_modal .txt-nv-title').text(item_name);
$('#member_join_modal .txt-nv-writer').text(writer_nick);
} else {
// 성인 작품의 경우 선정적인 제목도 많으므로 아예 숨김처리 - ssChoi 250530
$('.join-top-nv-section').hide();
}
}
$("#total_event_auth_modal").on("click", ".detail-modal-hottime-btn", function () {
location.href = '/page/age_auth?adult=2';
$.cookie('_redirectrurl', 'L25vdmVsLzI0ODEyOA==', { expires: 365, path: '/', domain: 'novelpia.com', secure: false });
$('#total_event_auth_modal').hide();
});
$("#total_event_join_modal").on("click", ".detail-modal-hottime-btn", function () {
location.href = '/page/age_auth?adult=2';
$.cookie('_redirectrurl', 'L25vdmVsLzI0ODEyOA==', { expires: 365, path: '/', domain: 'novelpia.com', secure: false });
$('#total_event_join_modal').hide();
});
$("#total_event_guide_modal").on("click", ".detail-modal-hottime-btn", function () {
location.href = '/plus';
$('#total_event_guide_modal').hide();
});
$("#total_event_modal").on("click", ".detail-modal-hottime-btn", function () {
get_event_plus_insert();
$('#total_event_modal').hide();
proc_additional_modal();
});
$("#total_event_modal").on("click", ".detail-modal-href-btn", function () {
location.href = '/n_user_free_ticket';
});
$("#total_event_auth_modal").on("click", ".event-plus-close", function () {
$('#total_event_auth_modal').hide();
proc_additional_modal();
});
$("#total_event_join_modal").on("click", ".event-plus-close", function () {
$('#total_event_join_modal').hide();
proc_additional_modal();
});
$("#total_event_guide_modal").on("click", ".event-plus-close", function () {
$('#total_event_guide_modal').hide();
proc_additional_modal();
});
$("#total_event_modal").on("click", ".event-plus-close", function () {
$('#total_event_modal').hide();
proc_additional_modal();
});
$("#total_event_auth_modal").on("click", ".hottime-modal-close-btn", function () {
$('#total_event_auth_modal').hide();
set_ignore_list([0], 1000 * 60 * 60 * 24);
});
$("#total_event_join_modal").on("click", ".hottime-modal-close-btn", function () {
$('#total_event_join_modal').hide();
set_ignore_list([0], 1000 * 60 * 60 * 24);
});
$("#total_event_modal").on("click", ".hottime-modal-close-btn", function () {
$('#total_event_modal').hide();
if (!event_idx) {
return;
}
set_ignore_list([event_idx], 1000 * 60 * 60 * 24);
proc_additional_modal();
});
$("#total_event_modal").on("click", ".coupon-notice-folder", function () {
$(".coupon-notice-detail").removeClass("hide");
$(".coupon-notice-folder").hide();
});
$('#member_login_modal .sns-btns a').click(function () {
inc_stat("stat_induce_pay", {
flag_type: 49,
item_no: 1
});
});
$('#member_login_modal button').click(function () {
inc_stat("stat_induce_pay", {
flag_type: 49,
item_no: 1
});
});
function togglePasswordVisibility() {
const $passwordInput = $('#join_password');
const $togglePasswordIcon = $('.password_vicon');
// 현재 비밀번호 입력 필드의 타입을 확인
const isPasswordHidden = $passwordInput.attr('type') === 'password';
// 입력 필드의 타입을 'password' 또는 'text'로 전환
$passwordInput.attr('type', isPasswordHidden ? 'text' : 'password');
// 아이콘 이미지를 '보기'와 '숨기기'로 전환
const newIconSrc = isPasswordHidden
? '//images.novelpia.com/img/new/viewer/view.svg' // '보기' 아이콘 경로로 변경
: '//images.novelpia.com/img/new/viewer/hide.svg'; // '숨기기' 아이콘 경로로 변경
$togglePasswordIcon.attr('src', newIconSrc);
}
function get_captcha_check() {
let _html = '';
let _captcha_code = '';
$.ajax({
url: "/proc/login_captcha",
data: {
"mode": "get_captcha",
},
type: "GET",
async: false,
dataType: "json",
success: function (response) {
if (response.status == '200' && response.result == true) {
$(".captcha_wrap").remove();
_html = '';
_html += '<div class="captcha_wrap">';
_html += '<span>비밀번호와 자동입력 방지문자를 입력해주세요.</span>';
_html += '<div class="captcha_img"><img id="captcha-image" src="/captcha_make.php?ver=' + new Date().getTime() + '" alt="CAPTCHA"></div>';
_html += '<div class="captcha_input"><input type="text" name="captcha_text" placeholder="자동입력 방지문자" autocomplete="off"> <span onclick="captcha_refresh()" alt="새로고침" /></div>';
_html += '</div>';
$(".login-check").before(_html);
}
},
});
}
function captcha_refresh() {
$.ajax({
url: "/proc/login_captcha",
data: {
"mode": "refresh_captcha",
},
type: "POST",
async: false,
dataType: "json",
success: function (response) {
if (response.status == '200' && response.result == true) {
$(".captcha_wrap").remove();
_html = '';
_html += '<div class="captcha_wrap">';
_html += '<span>비밀번호와 자동입력 방지문자를 입력해주세요.</span>';
_html += '<div class="captcha_img"><img id="captcha-image" src="/captcha_make.php?ver=' + new Date().getTime() + '" alt="CAPTCHA"></div>';
_html += '<div class="captcha_input"><input type="text" name="captcha_text" placeholder="자동입력 방지문자" > <span onclick="captcha_refresh()" alt="새로고침" /></div>';
_html += '</div>';
$(".login-check").before(_html);
}
},
});
}
</script>
<script>
function datatable_clear() {
var activeRequestsTable = $('#datatable1').DataTable();
activeRequestsTable.state.clear();
}
try {
if (!!window.navigator.userAgent.match(/(MSIE|Trident|Edge)/)) {
isPrivateMode().then((inPrivate) => {
console.log('is in private mode: ', inPrivate);
$.cookie('PRIVATE_MODE', inPrivate, { expires: 365, path: '/', domain: '.novelpia.com', secure: true });
});
} else {
isPrivateWindow(function (is_private) {
if (is_private) {
console.log('is in private mode: ', is_private);
$.cookie('PRIVATE_MODE', is_private, { expires: 365, path: '/', domain: '.novelpia.com', secure: true });
} else {
console.log('is in private mode: ', is_private);
$.cookie('PRIVATE_MODE', is_private, { expires: 365, path: '/', domain: '.novelpia.com', secure: true });
}
});
}
}
catch (e) {
console.log('is in private mode: ', e);
$.cookie('PRIVATE_MODE', 'error', { expires: 365, path: '/', domain: '.novelpia.com', secure: true });
}
$(window).bind("pageshow", function (event) { if (event.originalEvent && event.originalEvent.persisted) { $('.loads').hide(); } });
window.onpageshow = function (event) { if (event.persisted) { $('.loads').hide(); } else { } }
</script>
<!--사이트 연관 채널 마크업-->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"name": "노벨피아",
"url": "https://novelpia.com",
"sameAs": [
"https://blog.naver.com/adnovelpia",
"https://www.instagram.com/novelpia_official/",
"https://www.facebook.com/novelpia.page",
"https://twitter.com/novel_pia",
"https://www.youtube.com/channel/UC4Mw_07vcLJ9uOZuukobTYQ"
]
}
</script>
<script>
// 공통 함수
const _gotoOutlink = function (_url) {
window.open(_url, '_blank');
}
</script>
<script>
// http("get", "/proc/marketing", {cmd : "facebook_marketing", event_name : "S_VIEW"});
</script>
<!--애드픽 랜딩페이지 하단 삽입-->
<script type="text/javascript" src="https://dnh523js9661q.cloudfront.net/apis/apTracker.v3.js?v=0413"></script>
<!-- Google Tag Manager (noscript) 바디 태그-->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-TPMXGV7" height="0" width="0"
style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) 바디 태그-->
</body>
<!-- Google Tag Manager (noscript) -->
<noscript>
<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-TPMXGV7" height="0" width="0"
style="display:none;visibility:hidden"></iframe>
</noscript>
<!-- End Google Tag Manager (noscript) -->
</html>
<link rel='stylesheet' href='/css/_navi.css?v=1760926093'>
<!-- TODO : 다크모드, pathname 판별 후 아이콘 색 채워진걸로 변경작업 필요 -->
<div class="bt-nv-wrapper mobile_show " id="bottom-nav-bar">
<div class="bt-nv">
<div class="bt-nv-menu " @click="home()">
<p><img :src="`${CDN_DOMAIN_IMG}/img/new/navi/nv_icon_home.svg`"></p>
<p></p>
</div>
<!--
<div class="bt-nv-menu " @click="recommend()">
<p><img :src="`${CDN_DOMAIN_IMG}/img/new/navi/nv_icon_rcmd.svg`"></p>
<p>추천</p>
</div>
-->
<div class="bt-nv-menu" @click="books()">
<p><img src="//images.novelpia.com/img/new/navi/nv_icon_books.svg" style="width:26px;"></p>
<p>북스</p>
</div>
<div class="bt-nv-menu event">
<div class="event-img">
<a :href="this.banner.link">
<img class="s_inv" :src="this.banner.m_banner_link">
</a>
</div>
</div>
<div class="bt-nv-menu " @click="alarm()">
<p id="btn_m_alram">
<img :src="`${CDN_DOMAIN_IMG}/img/new/navi/nv_icon_alert.svg`">
<span id="alarm_dot" class="red-dot" style="display:none;"></span>
</p>
<p>알림</p>
</div>
<div class="bt-nv-menu " @click="mybook()">
<p><img :src="`${CDN_DOMAIN_IMG}/img/new/navi/nv_icon_recent.svg`"></p>
<p>최근기록</p>
</div>
</div>
</div>
<script>
new Vue({
el: '#bottom-nav-bar',
data: () => ({
CDN_DOMAIN_IMG: "//images.novelpia.com",
darkmode: '',
banner: {},
flag_type: 127,
}),
methods: {
home: function () {
let path = 'novel';
if (path == "comic_main" || path == "comic_episode" || path == "comic_search" || path == "comic_all" || path == "comic" || path == "mybook_comicbook_like") {
window.location.href = "/comic_main?sid=bt1";
} else {
window.location.href = "/?sid=bt1";
}
},
recommend() {
window.location.href = "/2025recommend?sid=bt2"
},
books() {
window.location.href = "https://book.novelpia.com/"
},
alarm() {
window.location.href = "/alarm?sid=bt3"
},
gift() {
window.location.href = "/n_user_free_ticket"
},
mybook() {
let path = 'novel';
if (path == "comic_main" || path == "comic_episode" || path == "comic_search" || path == "comic_all" || path == "comic") {
window.location.href = "/mybook_comicbook_like?sid=bt4";
} else {
window.location.href = "/mybook/last_view?sid=bt4";
}
},
async get_banner() {
const url = "/proc/banner";
const data = {
"cmd": "banner",
"flag_type": this.flag_type,
'rows': 1,
};
const result = await http("get", url, data);
const { status, errmsg = "연동오류", code, banner } = result;
if (!R.isEmpty(banner)) {
this.banner = banner[0];
} else {
this.banner = [{
"link": "/",
"m_banner_link": this.CDN_DOMAIN_IMG + "/img/new/navi/nv_event_temp2.png"
}]
}
},
getAlarmCnt: async function () { // 알람
if (_top_obj.data.mem_no === '0') {
return;
}
const url = "/proc/alarm";
const data = {
"mode": "getAlarmCnt"
};
const http_result = await http("post", url, data);
const { status, result } = http_result;
if (Number(status) !== 200) {
return;
}
const { cnt = 0 } = result;
// const cnt = 1 ;
if (cnt === 0) {
return;
}
$("#btn_m_alram #alarm_dot").remove();
$("#btn_m_alram").append('<span id="alarm_dot" class="red-dot"></span>');
}
},
mounted: async function () {
await this.get_banner();
await this.getAlarmCnt();
},
beforeDestroy() { }
});
</script>