21.02.19~20 JSPCommunity 프로젝트(홈 페이지스크롤 효과 추가, 댓글 ajax 보류, 대댓글 추가, 임시비밀번호 발급 오류 수정)

<홈 스크롤 효과 js>

/* 홈 스크롤 애니메이션 시작 */
var Pages__nowWorking = false;

function Pages__goToScroll(top) {
  if (Pages__nowWorking) {
    return false;
  }

  Pages__nowWorking = true;

  $("html,body")
    .stop()
    .animate(
      {
        scrollTop: top - 40
      },
      500,
      function () {
        Pages__nowWorking = false;
      }
    );
}

function Pages__goTo(index) {
  var $page = $(".section-home > .section-home-box");

  if (index < 0) {
    index = 0;
  } else if (index >= $page.length) {
    index = $page.length - 1;
  }

  var top = parseInt(
    $(".section-home > .section-home-box").eq(index).attr("data-offsetTop")
  );

  Pages__goToScroll(top);
}

var Pages__activedMenuItem = -1;

function Pages__activeMenuItem(index) {
  if (Pages__activedMenuItem == index) {
    return false;
  }
  Pages__activedMenuItem = index;
}

function Pages__init() {
  $(".section-home > .section-home-box").on(
    "mousewheel DOMMouseScroll",
    function (e) {
      var index = $(this).index();

      // html, body 에 마우스 휠 이벤트와 돔마우스스크롤 이벤트를 걸었습니다.
      var E = e.originalEvent;
      // 변수 E 에다가는 이벤트 객체의 속성으로 사용할 수 있는 속성 인 originalEvent 를 넣었습니다.
      delta = 0;
      if (E.detail) {
        delta = E.detail * -40;
      } else {
        delta = E.wheelDelta;
      }

      if (delta > 0) {
        Pages__goTo(index - 1);
      } else {
        Pages__goTo(index + 1);
      }

      return false;
    }
  );

  $(window).scroll(function () {
    var scrollTop = $(this).scrollTop();
    $(".section-home > .section-home-box").each(function (index, node) {
      var offsetTop = parseInt($(this).attr("data-offsetTop"));

      if (scrollTop <= offsetTop) {
        Pages__activeMenuItem(index);
        return false;
      }
    });
  });

  $(window)
    .resize(function () {
      Pages__updatePageShapeInfo();

      $(window).scroll();
    })
    .resize();
}

function Pages__updatePageShapeInfo() {
  $(".section-home > .section-home-box").each(function (index, node) {
    var width = $(this).width();
    var height = $(this).height();
    var offsetTop = $(this).offset().top;

    $(this).attr("data-width", width);
    $(this).attr("data-height", height);
    $(this).attr("data-offsetTop", offsetTop);
  });
}

Pages__init();
/* 홈 스크롤 애니메이션 끝 */

 

<detail.jsp>

<!-- 메인 컨텐츠 박스 시작 -->
<main class="main-box flex-grow-1 visible-md-up">
  <section class="main-box-section con">
    <!-- 메인-상세페이지 시작 -->
    .....................................
    <!-- 메인-상세페이지 끝 -->

    <!-- 댓글창 시작 -->
    <c:if test="${isLogined}">
      <div class="reply-write-box">
        <form class="reply-write-box-form flex flex-jc-c flex-ai-c" name="form" onsubmit="checkWrite(this); return false;" action="reply" method="POST">
          <input type="hidden" name="articleId" value="${article.id}">
          <input type="hidden" name="memberId" value="${loginedMemberId}">
          <input type="hidden" name="redirectUrl"
				value="${Util.getNewUrl(currentUrl, 'focusReplyId', '[NEW_REPLY_ID]')}" />
          <span><i class="far fa-comment-dots"></i></span>
          <input type="text" name="replyBody" placeholder="댓글 입력">
          <div class="reply-write-box-form__option ">
            <button class="btn btn-go" type="submit"><i class="fas fa-pen"></i> 등록</button>
          </div>
        </form>
      </div>
    </c:if>
    <div class="reply-count-box"><i class="far fa-comments"></i> Total ${article.repliesCount}</div>
    <c:forEach var="reply" items="${replies}">
      <div class="reply-list-box">
        <div class="reply-list-box-writer"><i class="far fa-user-circle"></i> ${reply.extra_memberNickname}</div>
        <div class="reply-list-box__cell flex flex-jc-sb">
          <div class="reply-list-box__cell-contents flex flex-ai-fs">
            <div class="reply-list-box__cell-updateDate">${reply.updateDate}</div>
            <div data-id="${reply.id}" class="reply-list-box__cell-body">${reply.body}</div>
            <nav class="reply-list-box__cell-reReply"><i class="fas fa-reply"></i> 답글쓰기</nav>
          </div>
     ...............................................
        </div>
        
        <!-- 대댓글창 시작 -->
          <div class="reReply-write-box">
            <form class="reReply-write-box-form flex flex-jc-fe flex-ai-c" name="form" onsubmit="checkWrite(this); return false;" action="reply" method="POST">
              <input type="hidden" name="replyId" value="${reply.id}">
              <input type="hidden" name="memberId" value="${loginedMemberId}">
              <input type="hidden" name="redirectUrl"
				value="${Util.getNewUrl(currentUrl, 'focusReplyId', '[NEW_REPLY_ID]')}" />
              <span><i class="fas fa-reply"></i></span>
              <input type="text" name="replyBody" maxlength="50" placeholder="댓글 입력">
              <div class="reReply-write-box-form__option ">
                <button class="btn btn-go" type="submit"><i class="fas fa-pen"></i> 등록</button>
              </div>
            </form>
          </div>
        </div> 
            <c:forEach var="reReply" items="${reReplies}">
            <c:if test="${reReply.relId == reply.id}">
          <div class="reReply-list-box">
            <div class="reReply-list-box-writer"><i class="fas fa-reply"></i><i class="far fa-user-circle"></i> ${reReply.extra_memberNickname}</div>
            <div class="reReply-list-box__cell flex flex-jc-sb">
              <div class="reReply-list-box__cell-contents flex flex-ai-fs">
                <div class="reReply-list-box__cell-updateDate">${reReply.updateDate}</div>
                <div class="reReply-list-box__cell-body">${reReply.body}</div>
              </div>
              
              <div class="reReply-list-box-cell__option">
                <div class="reReply-detail-cell-likesCount flex">
				
				<c:if test="${isLogined == false}">
                		<button class="addLike" type="button" onclick="alert('로그인 후 이용해 주세요.')">
                        <i class="far fa-thumbs-up"></i>
                        &nbsp;<span class="likesCount">${reReply.extra_likeOnlyPoint}</span>
                      </a>
                    </button>
                    <button class="addUnLike" type="button" onclick="alert('로그인 후 이용해 주세요.')">
                        <i class="far fa-thumbs-down"></i>
                        &nbsp;<span class="unLikesCount">${reReply.extra_dislikeOnlyPoint}</span>
                      </a>
                    </button>
					</c:if>
                  <c:if test="${reReply.extra.actorCanLike}">

                    <button class="addLike" type="button">
                      <a href="../like/doLike?relTypeCode=reply&relId=${reReply.id}&redirectUrl=${encodedCurrentUrl}" onclick="if ( !confirm('`좋아요` 처리 하시겠습니까?') ) return false;">
                        <i class="far fa-thumbs-up"></i>
                        &nbsp;<span class="likesCount">${reReply.extra_likeOnlyPoint}</span>
                      </a>
                    </button>

                  </c:if>

                  <c:if test="${reReply.extra.actorCanCancelLike}">
                    <button class="addLike" type="button">
                      <a href="../like/doCancelLike?relTypeCode=reply&relId=${reReply.id}&redirectUrl=${encodedCurrentUrl}" onclick="if ( !confirm('`좋아요`를 취소 처리 하시겠습니까?') ) return false;">
                        <i class="fas fa-thumbs-up"></i>
                        &nbsp;<span class="likesCount">${reReply.extra_likeOnlyPoint}</span>
                      </a>
                    </button>
                  </c:if>

                  <c:if test="${reReply.extra.actorCanDislike}">
                    <button class="addUnLike" type="button">
                      <a href="../like/doDislike?relTypeCode=reply&relId=${reReply.id}&redirectUrl=${encodedCurrentUrl}" onclick="if ( !confirm('`싫어요` 처리 하시겠습니까?') ) return false;">
                        <i class="far fa-thumbs-down"></i>
                        &nbsp;<span class="unLikesCount">${reReply.extra_dislikeOnlyPoint}</span>
                      </a>
                    </button>
                  </c:if>

                  <c:if test="${reReply.extra.actorCanCancelDislike}">
                    <button class="addUnLike" type="button">
                      <a href="../like/doCancelDislike?relTypeCode=reply&relId=${reReply.id}&redirectUrl=${encodedCurrentUrl}" onclick="if ( !confirm('`싫어요`를 취소 처리 하시겠습니까?') ) return false;">
                        <i class="fas fa-thumbs-down"></i>
                        &nbsp;<span class="unLikesCount">${reReply.extra_dislikeOnlyPoint}</span>
                      </a>
                    </button>
                  </c:if>

                </div>
                <c:if test="${loginedMemberId == reReply.memberId}">
                  <form class="reReplyModifyForm flex flex-jc-a" name="replyModifyForm" action="doModifyReply" method="POST" onsubmit="checkModify(this); return false;">
                    <input type="hidden" name="id" value="${reReply.id}">
                    <input type="hidden" name="relId" value="${reReply.relId}">
                    <input type="hidden" name="memberId" value="${loginedMemberId}">
                    <input type="hidden" name="redirectUrl"
				value="${Util.getNewUrl(currentUrl, 'focusReplyId', '[NEW_REPLY_ID]')}" />
                    <input class="reReplyBodyInput" type="text" name="body" maxlength="50" placeholder="${reReply.body}" value="${reReply.body}">
                    <div class="reReplyModifyForm__option flex flex-jc-fe">
                      <button class="btn btn-modify" type="submit" onclick="if(confirm('해당 내용으로 수정하시겠습니까?') == false) {return false;}"><i class="far fa-edit"></i> 수정</button>
                      <button class="btn btn-back" type="button" onclick="location.reload()"><i class="fas fa-ban"></i> 취소</button>
                    </div>
                  </form>              
                  <div class="reReply-list-box-cell__option-btns flex flex-ai-c">
                    <button class="btn btn-modify doModifyreReplyForm" type="button"><i class="far fa-edit"></i> 수정</button>
                    <button class="btn btn-back" onclick="if(confirm('정말 삭제하시겠습니까?') == false) {return false;}" type="button">
                      <a href="doDeleteReply?id=${reReply.id}&articleId=${article.id}&relId=${reReply.relId}"><i class="far fa-trash-alt"></i> 삭제</a>
                    </button>
                  </div>
                </c:if>
              </div>
            </div>
          </div>
          </c:if>
        </c:forEach>
          <!-- 대댓글창 끝 -->
      </div>
    </c:forEach>
    </div>

       ...............................................

      <!-- 댓글창 끝 -->

      <!-- 메인-상세 하단 메뉴 시작 -->
           ...............................................
      <!-- 메인-상세 하단 메뉴 끝 -->
  </section>
</main>
<!-- 메인 컨텐츠 박스 끝 -->



<!-- 모바일 메인 컨텐츠 박스 시작 -->
<main class="main-box flex-grow-1 visible-sm-down" style="min-height:500px;">
  <section class="main-box-section con">
    <!-- 모바일 메인-상세페이지 시작 -->
         ...............................................

      <!-- 모바일 댓글창 시작 -->
      <c:if test="${isLogined}">
        <div class="mobile-reply-write-box">
          <form class="mobile-reply-write-box-form flex flex-jc-c flex-ai-c" name="form" onsubmit="checkWrite(this); return false;" action="reply" method="POST">
            <input type="hidden" name="articleId" value="${article.id}">
            <input type="hidden" name="memberId" value="${loginedMemberId}">
            <input type="hidden" name="redirectUrl"
				value="${Util.getNewUrl(currentUrl, 'focusReplyId', '[NEW_REPLY_ID]')}" />
            <span><i class="far fa-comment-dots"></i></span>
            <input type="text" name="replyBody" placeholder="댓글 입력">
            <div class="mobile-reply-write-box-form__option ">
              <button class="m-btn btn-go" type="submit"><i class="fas fa-pen"></i> 등록</button>
            </div>
          </form>
        </div>
      </c:if>
      <div class="mobile-reply-count-box"><i class="far fa-comments"></i> Total ${article.repliesCount}</div>
      <c:forEach var="reply" items="${replies}">
        <div class="mobile-reply-list-box">
          <div class="mobile-reply-list-box-writer"><i class="far fa-user-circle"></i> ${reply.extra_memberNickname}</div>
          <div class="mobile-reply-list-box__cell flex flex-column">
            <div class="mobile-reply-list-box__cell-contents">
              <div class="mobile-reply-list-box__cell-updateDate">${reply.updateDate}</div>
              <div data-id="${reply.id}" class="mobile-reply-list-box__cell-body">${reply.body}</div>
              <nav class="reply-list-box__cell-reReply"><i class="fas fa-reply"></i> 답글쓰기</nav>
            </div>
                 ...............................................
        
        
        <!-- 모바일 대댓글창 시작 -->

          <div class="mobile-reReply-write-box">
            <form class="mobile-reReply-write-box-form flex flex-jc-c flex-ai-c" name="form" onsubmit="checkWrite(this); return false;" action="reply" method="POST">
              <input type="hidden" name="replyId" value="${reply.id}">
              <input type="hidden" name="memberId" value="${loginedMemberId}">
              <input type="hidden" name="redirectUrl"
				value="${Util.getNewUrl(currentUrl, 'focusReplyId', '[NEW_REPLY_ID]')}" />
              <span><i class="fas fa-reply"></i></span>
              <input type="text" name="replyBody" maxlength="50" placeholder="댓글 입력">
              <div class="mobile-reReply-write-box-form__option ">
                <button class="m-btn btn-go" type="submit"><i class="fas fa-pen"></i> 등록</button>
              </div>
            </form>
          </div>
		</div>
        <c:forEach var="reReply" items="${reReplies}">
         <c:if test="${reReply.relId == reply.id}">
          <div class="mobile-reReply-list-box">
            <div class="mobile-reReply-list-box-writer"><i class="fas fa-reply"></i><i class="far fa-user-circle"></i> ${reReply.extra_memberNickname}</div>
            <div class="mobile-reReply-list-box__cell flex flex-column">
              <div class="mobile-reReply-list-box__cell-contents">
                <div class="mobile-reReply-list-box__cell-updateDate">${reReply.updateDate}</div>
                <div class="mobile-reReply-list-box__cell-body">${reReply.body}</div>
              </div>
              </div>
              <div class="mobile-reReply-detail-cell-likesCount flex">
				<c:if test="${isLogined == false}">
                		<button class="addLike" type="button" onclick="alert('로그인 후 이용해 주세요.')">
                        <i class="far fa-thumbs-up"></i>
                        &nbsp;<span class="likesCount">${reReply.extra_likeOnlyPoint}</span>
                      </a>
                    </button>
                    <button class="addUnLike" type="button" onclick="alert('로그인 후 이용해 주세요.')">
                        <i class="far fa-thumbs-down"></i>
                        &nbsp;<span class="unLikesCount">${reReply.extra_dislikeOnlyPoint}</span>
                      </a>
                    </button>
				</c:if>	
					
                  <c:if test="${reReply.extra.actorCanLike}">

                    <button class="addLike" type="button">
                      <a href="../like/doLike?relTypeCode=reply&relId=${reReply.id}&redirectUrl=${encodedCurrentUrl}" onclick="if ( !confirm('`좋아요` 처리 하시겠습니까?') ) return false;">
                        <i class="far fa-thumbs-up"></i>
                        &nbsp;<span class="likesCount">${reReply.extra_likeOnlyPoint}</span>
                      </a>
                    </button>

                  </c:if>

                  <c:if test="${reReply.extra.actorCanCancelLike}">
                    <button class="addLike" type="button">
                      <a href="../like/doCancelLike?relTypeCode=reply&relId=${reReply.id}&redirectUrl=${encodedCurrentUrl}" onclick="if ( !confirm('`좋아요`를 취소 처리 하시겠습니까?') ) return false;">
                        <i class="fas fa-thumbs-up"></i>
                        &nbsp;<span class="likesCount">${reReply.extra_likeOnlyPoint}</span>
                      </a>
                    </button>
                  </c:if>

                  <c:if test="${reReply.extra.actorCanDislike}">
                    <button class="addUnLike" type="button">
                      <a href="../like/doDislike?relTypeCode=reply&relId=${reReply.id}&redirectUrl=${encodedCurrentUrl}" onclick="if ( !confirm('`싫어요` 처리 하시겠습니까?') ) return false;">
                        <i class="far fa-thumbs-down"></i>
                        &nbsp;<span class="unLikesCount">${reReply.extra_dislikeOnlyPoint}</span>
                      </a>
                    </button>
                  </c:if>

                  <c:if test="${reReply.extra.actorCanCancelDislike}">
                    <button class="addUnLike" type="button">
                      <a href="../like/doCancelDislike?relTypeCode=reply&relId=${reReply.id}&redirectUrl=${encodedCurrentUrl}" onclick="if ( !confirm('`싫어요`를 취소 처리 하시겠습니까?') ) return false;">
                        <i class="fas fa-thumbs-down"></i>
                        &nbsp;<span class="unLikesCount">${reReply.extra_dislikeOnlyPoint}</span>
                      </a>
                    </button>
                  </c:if>

                </div>
              <div class="mobile-reReply-list-box-cell__option">
                <c:if test="${loginedMemberId == reReply.memberId}">
                  <form class="mobile-reReplyModifyForm flex flex-jc-a" name="replyModifyForm" action="doModifyReply" method="POST" onsubmit="checkModify(this); return false;">
                    <input type="hidden" name="id" value="${reReply.id}">
                    <input type="hidden" name="relId" value="${reReply.relId}">
                    <input type="hidden" name="memberId" value="${loginedMemberId}">
                    <input type="hidden" name="redirectUrl"
				value="${Util.getNewUrl(currentUrl, 'focusReplyId', '[NEW_REPLY_ID]')}" />
                    <input class="mobile-reReplyBodyInput" type="text" name="body" placeholder="${reReply.body}" value="${reReply.body}">
                    <div class="mobile-reReplyModifyForm__option flex flex-jc-fe">
                      <button class="btn btn-modify" type="submit" onclick="if(confirm('해당 내용으로 수정하시겠습니까?') == false) {return false;}"><i class="far fa-edit"></i> 수정</button>
                      <button class="btn btn-back" type="button" onclick="location.reload()"><i class="fas fa-ban"></i> 취소</button>
                    </div>
                  </form>
                  <div class="mobile-reReply-list-box-cell__option-btns flex flex-ai-c">
                    <button class="btn btn-modify doModifyreReplyForm" type="button"><i class="far fa-edit"></i> 수정</button>
                    <button class="btn btn-back" onclick="if(confirm('정말 삭제하시겠습니까?') == false) {return false;}" type="button">
                      <a href="doDeleteReply?id=${reReply.id}&articleId=${article.id}&relId=${reReply.relId}"><i class="far fa-trash-alt"></i> 삭제</a>
                    </button>
                  </div>
                </c:if>
              </div>
            </div>
          
          </c:if>
        </c:forEach>
        </div>
          <!-- 모바일 대댓글창 끝 -->
        
        
           ...............................................
    <!-- 모바일 메인-상세 하단 메뉴 끝 -->
  </section>
</main>
<!-- 모바일 메인 컨텐츠 박스 끝 -->