17_공동구매 목록 ③ 최근공구/마감임박

① 메인(게시물 4 * 8 = 32개만)  : 최근 작성된 거에서 32개만 띄움

나머지 아래 목록은 → 게시물 4 * 6 = 24개 + 페이징처리

② 메인카테고리 클릭 시 : 메인카테고리에 해당되는 모든 서브카테고리의 게시물

③ 서브카테고리 클릭 시 : 해당 서브카테고리의 게시물

④ <최근공구> : 최근(7일 이내)에 올라온 공동구매 게시물 

⑤ <마감임박> : 남은 시간이 24시간 이내인 공동구매 게시물

⑥ 검색했을 시 : 게시물의 제목/내용/카테고리 중 검색 내용에 해당되는 게시물 모두 띄움

---

중에서 이번에는 

     ④ <최근공구> : 최근(7일 이내)에 올라온 공동구매 게시물

     ⑤ <마감임박> : 남은 시간이 24시간 이내인 공동구매 게시물

를 진행할 계획!

 

<최근공구>와 <마감임박> 모두 상단 헤더탭으로 접근할 수 있다.

 

나머지는 다 동일하지만, 최근공구/마감임박에서는 대분류 카테고리를 selectbox로 선택가능하기 때문에

헤더에 있는 전체 카테고리와 동일한 목록을 가져와서, 클릭했을 때 그 대분류에 맞는 최근공구/마감임박 공동구매 목록을 띄워줘야 한다.

이건 카테고리했던 부분과 동일하게 주소로 전달!

④ <최근공구> : 최근(7일 이내)에 올라온 공동구매 게시물

🔥 카테고리 목록 불러오려는데....제대로 가져온 거 같은데 계속 에러가 떴다...

javax.el.PropertyNotFoundException: 타입 [java.lang.String]에서 프로퍼티 [code]을(를) 찾을 수 없습니다.

왜인지 찾았다,,,,빈칸 하나를 넣어놔서...그런거였다...ㅎㅎ

<c:forEach var="mainCate" items="${mainCateList } ">
    <option value="${mainCate.code }">${mainCate.name }</option>
</c:forEach>

↓↓↓↓↓ 수정 ↓↓↓↓↓

<c:forEach var="mainCate" items="${mainCateList }">
    <option value="${mainCate.code }">${mainCate.name }</option>
</c:forEach>

위의 코드에서 items="#{} " 뒤의 큰 따옴표 닫기 전에 빈 칸 하나...!,... 빈칸 지우니까 제대로 잘 뜬다..

 

ㅎㅎ 그런데 selectbox는 포인트쪽에서와 마찬가지로 niceselect를 썼기 때문에..! 이렇게 하면 선택하고 그 값을 가져왔을 때 selected 설정이 안 된다.

그래서 예전에 마이페이지>포인트 쪽에서 했던거와 같이...!!!

<!-- view 코드 -->
<select name="category-select" id="category-select" style="display:none;">
    <option value="%">전체</option>
    <c:forEach var="mainCate" items="${mainCateList }">
        <option value="${mainCate.code }">${mainCate.name }</option>
    </c:forEach>
</select>
<div class="nice-select" tabindex="0">
    <span class="current">전체</span>
    <ul class="list">
        <li data-value="%" class="option selected">전체</li>
        <c:forEach var="mainCate" items="${mainCateList }">
            <li data-value="${mainCate.code }" class="option">${mainCate.name }</li>
        </c:forEach>
    </ul>
</div>

이렇게 <select>와 <div> 모두 적어주고,,!

선택된 option의 text를  span.current 태그 안에 넣어주면 새로고침해도 selected 되게 할 수 있다.

 

그래서 스크립트 영역에서는 value값으로 option을 가져와서 그거의 text() 를 가져왔다.

그리고 그 text 내용을 <span> 태그에 넣어줬다.

$(function()
{
    let maincate = '<%=request.getParameter("maincate")%>';
    if (maincate === 'null')
        maincate = '%';
    $('span.current').html($("select[name='category-select'] option[value='" + maincate + "']").text());

    $('#category-select').on("change", function()
    {
        location.href='buypostnew.lion?maincate=' + $(this).val();
    });
});

페이징처리 부분은 카테고리 쪽과 다른 거 없이 진행!

 

최근공구 - 카테고리(쌀/면/빵/떡)

최근공구 - 카테고리(밀키트/간편식/냉동)

 

 

⑤ <마감임박> : 남은 시간이 24시간 이내인 공동구매 게시물

마감임박도 최근공구와 똑같이 진행하면 되는데, 현재 24시간 이내로 남은 공동구매 게시물 데이터가 없기 때문에 새로 넣고 진행했다.

아 그리고 목록 띄울 때에도 다른 건 최근에 올라온 순서대로 띄웠지만,

여기서는 마감기간이 얼마 안 남은 거 순 + 마감기간이 같다면 최근에 쓴 순서대로 띄웠다.

<!-- 마감임박 -->
<select id="buypostList_final" resultType="com.test.mybatis.BuypostDTO">
    SELECT CODE, TITLE, AMOUNT, COUNT, GOODS_PHOTO_NAME, LEFT_DAY, LEFT_HOUR, LEFT_MINUTE
    FROM
    (
        SELECT ROWNUM RNUM, T.*
        FROM
        (
            SELECT CODE, TITLE, AMOUNT, BUY_NUMBER||'/'||GOODS_NUM "COUNT", GOODS_PHOTO_NAME
                 , LEFT_DAY, LEFT_HOUR, LEFT_MINUTE
            FROM VIEW_BUYPOSTLIST
            WHERE REGION LIKE '%'||#{user_region}||'%'
              AND MAIN_CATE_CODE LIKE '%'||#{main_cate_code}||'%'
              AND DEADLINE - SYSDATE <![CDATA[<=]]> 1
            ORDER BY DEADLINE, WRITE_DATETIME DESC
        ) T
        WHERE ROWNUM <![CDATA[<]]> #{startList} + #{listSize}
    )
    WHERE RNUM <![CDATA[>=]]> #{startList}
</select>

내용은 위와 완전 동일하기 때문에...결과 화면만,,!!

마감임박 - 카테고리(전체)

마감임박 - 카테고리(양념/소스)

 

최근공구 & 마감임박 파트 끝~~!!