16_공동구매 목록 ② 메인카테고리/서브카테고리

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

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

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

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

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

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

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

---

중에서 이번에는 

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

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

를 진행할 예정~!@~!~!@~!~이었는데  코드를 작성하다보니 

메인카테고리코드와 서브카테고리코드를 같이 넘겨줘서 한 번에 하면 되는 거 같아서 한 번에 진행할 예정이다.

 

 

②,③ 카테고리 클릭 시 : 카테고리에 해당되는 서브카테고리의 게시물

메인화면에서 [전체 카테고리] 탭을 클릭하면 아래 사진과 같이 메인카테고리의 내용이 보여진다.

캡쳐화면이라 마우스는 보이지 않지만, 아래 사진은 [쌀/면/빵/떡]에 마우스를 올려놓은 상태이다.

 

카테고리 클릭 시, 메인카테고리 코드를 주소값으로 넘겨주면서, 아래 화면으로 이동하게 할 예정이다. (현재는 정적 데이터로 뷰만 만들어놓은 상태)

메인목록과 달리 조금 더 필요한 데이터 및 처리는,

- 메인 카테고리 이름

- 해당 메인 카테고리에 속한 모든 서브 카테고리의 이름

- 페이징처리

 

메인카테고리 공동구매목록 SQL 에서 필요한 매개변수는 사용자가 지역 선택 시 세션에 저장될 『지역구』와 『메인카테고리 코드』, 『서브카테고리 코드』3개이므로 hashmap을 사용했다. 

(+ 여기 할 때는 hashmap 썼는데 아래에서 페이징처리하면서 페이징 객체까지 같이 넘겨주려다보니 결국 에러나서 hashmap 안쓰고 객체로 넘겨줌..)

//--▷ 카테고리
public ArrayList<BuypostDTO> buypostList_category(HashMap<String, String> params);

이미 공동구매 목록 띄우는 건 메인 부분에서 해놨으니, 

메인카테고리이름/서브카테고리이름 목록과 

서브카테고리를 클릭했을 때, 해당 서브카테고리 공동구매 게시물 목록이 뜨도록 주소값으로 전달해주는 처리만 새로 작성했다.

아 그리고 해당 서브카테고리를 클릭했을 때, 클릭한 서브카테고리가 주황색으로 바뀌도록 css 속성을 부여했다.

var sub = '<%=request.getParameter("sub")%>';
if (sub === 'null')
{
    $('#subAll').css({"color":"#fca652", "-webkit-text-stroke":"0.8px"});
    $('#subAll>i').css("color", "#fca652");
}
else
{
    $('#'+sub).css({"color":"#fca652", "-webkit-text-stroke":"0.8px"});
    $('#'+sub+'>i').css("color", "#fca652");
}

여기까지 완성한 결과물은,,!

전체 카테고리 > 양념/소스를 클릭했을 때 뜨는 화면이다.

메인카테고리를 클릭해서 들어오면 서브카테고리부분에서는 『전체보기>』 가 선택되어있다.

양념/소스에서 서브카테고리 『양념』을 클릭했을 때의 화면

양념/소스에서 서브카테고리 『소스』을 클릭했을 때의 화면

 

 

이제 페이징처리만 하면 된다!

한 페이지에는 4 * 6 = 24개의 게시물이 필요한데, 현재는 카테고리에 24개 게시물이 있는 파트가 없어서....

과일/채소 부분에 데이터를 더 넣고 왔다...... ㅠ.ㅠ

 

카테고리 쪽은 검색기능은 없기 때문에 그냥 페이징 처리만 하면 되는데....생각보다 오래걸렸ㄷ..ㅏ

 

🔥 hashmap 에 지역정보, 서브카테고리코드, 메인카테고리코드, 저번에 만들어놓은 pagination 객체를 다 담아서 넘기려니까 타입이 안맞아서 안 넘어가서......

admin 쪽에서 페이징처리하면서 검색기능 때문에 만들어놨던 search.java를 활용해서 search_buypost.java를 만들어서 거기에 필요한 데이터들(지역정보, 메인카테, 서브카테) 넣고 getter/setter 를 만들어줬다.

요것도 당연히 Pagination을 상속받게 했다.

public class Search_buypost extends Pagination
{
	private String user_region, main_cate_code, sub_cate_code;
    
    // getter/setter 생성
    	:
 }

그러고 나서 그냥 hashmap이 아니라 search_buypost 자체를 넘겨줬다.

그러면 필요한 데이터들 + 페이징처리에 필요한 거 모두 한 번에 넘길 수 있으니까..!

 

위에서 Hashmap을 사용했다고 했는데 그거를 페이징 처리하면서 search객체로 수정..!!

//--▷ 카테고리
public ArrayList<BuypostDTO> buypostList_category(HashMap<String, String> params);

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

//--▷ 카테고리
public ArrayList<BuypostDTO> buypostList_category(Search_buypost search) throws Exception;

SQL 구문도 검색기능 없는 페이징처리만 적용한 걸로 수정!

<!-- 카테고리 목록 개수 -->
<select id="count_category" resultType="java.lang.Integer">
    SELECT COUNT(*) COUNT
    FROM VIEW_BUYPOSTLIST
    WHERE REGION LIKE '%'||#{user_region}||'%'
      AND MAIN_CATE_CODE = #{main_cate_code}
      AND SUB_CATE_CODE LIKE '%'||#{sub_cate_code}||'%'	
</select>

<!-- 카테고리 -->
<select id="buypostList_category" 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 = #{main_cate_code}
              AND SUB_CATE_CODE LIKE '%'||#{sub_cate_code}||'%'	
        ) T
        WHERE ROWNUM <![CDATA[<]]> #{startList} + #{listSize}
    )
    WHERE RNUM <![CDATA[>=]]> #{startList}		  	  
</select>

Controller 에서는 Search_buypost 객체를 생성해서 이번에는 한 페이지에 게시물이 24개씩이므로

Listsize를 setter를 사용해서 지정해주고, 지역구/메인카테/서브카테코드도 set해줬다.

그러고나서는 값 받아서 view로 넘겨주고 view에서 그거 출력해주고 끝

// 공동구매 목록 - 카테고리
@RequestMapping("/buypostcategory.lion")
public String buypostList_category(HttpServletRequest request, Model model
          , @RequestParam(required = false, defaultValue = "1") int page
          , @RequestParam(required = false, defaultValue = "1") int range) throws Exception
{
    HttpSession session = request.getSession();
    String user_region = (String)session.getAttribute("user_region");
    if (user_region == null) 
        user_region = "";

    IBuypostDAO dao = sqlSession.getMapper(IBuypostDAO.class);
    String main_cate_code = request.getParameter("main");
    String sub_cate_code = request.getParameter("sub");
    if (main_cate_code == null)
        main_cate_code = dao.searchMainCate(sub_cate_code);
    if (sub_cate_code == null)
        sub_cate_code = "";

    ArrayList<SubCategoryDTO> categoryList = dao.categoryList(main_cate_code);

    Search_buypost search = new Search_buypost();
    search.setListSize(24);
    search.setUser_region(user_region);
    search.setMain_cate_code(main_cate_code);
    search.setSub_cate_code(sub_cate_code);

    int listCnt = dao.count_category(search);
    search.pageInfo(page, range, listCnt);
    System.out.println("page: " + page + ", range: " + range);
    ArrayList<BuypostDTO> buypostList_category = dao.buypostList_category(search);

    model.addAttribute("categoryList", categoryList);
    model.addAttribute("pagination", search);
    model.addAttribute("buypostList", buypostList_category);
    return "/WEB-INF/view/user_buypost_category.jsp";
}

view에서는 뭐 저번 페이징처리와 데이터 받아서 공동구매게시물 출력하는 건 동일하기 때문에 쉽게 했다.

 

paging처리 스크립트 구문쪽에서 검색기능을 없앴기 때문에 약간 수정했다.

그리고 관리자 파트>전체회원조회에서 페이징처리할 때에는 주소로 값을 넘겨주는 다른 게 없었는데,

이번에는 이미 메인카테고리코드와 서브카테고리코드를 주소로 넘겨받고 있었기 때문에...

그 값 유지하면서 페이징처리와 관련된 값도 같이 넘겨주는 방식으로 수정했다.

 

페이지 번호 클릭했을 때만 보자면,

// 페이지 번호 클릭
function fn_pagination(page, range, rangeSize)
{
    var url = window.location.href;

    if (url.indexOf('&page') != -1)
        url = url.substring(0, url.indexOf('&page'));

    url += "&page=" + page;
    url += "&range=" + range;
    location.href = url;
}

원래는 url에 window.location.pathname을 저장했었는데,

이번에는 window.location.href 로 가져와서 원래 받아온 값들 뒤에 page와 range 정보를 붙여줬다.

 

이렇게 다~~ 해서 완성된 과일/채소 부분을 보면....

데이터를 추가로 많이는 못 넣고 한 페이지만 더 생기게 36개의 게시물이 들어있는 상태이다.

 

먼저 데이터가 별로 없어서 1 페이지 밖에 없는 『물/음료/커피/차』 카테고리이다.

데이터가 36개 들어있는 과일/채소의 페이지는 1, 2 페이지만 뜸!

현재는 1 페이지

2 페이지로 넘어가보면,

 

ㅎㅎㅎㅎ 이렇게 카테고리 부분 끝,,,,,,!!!!!!