11_마이페이지>포인트 ① 메인

공동구매 관련 작업에 들어가기 전에 포인트 쪽 먼저 작업 ㄱㄱ~

공동구매 글을 쓰거나 참여/참여취소를 하려면 포인트 쪽이 필요하니까,,!

---

해야 할 작업 먼저 정뤼,,

① 포인트관련 페이지 및 팝업창 컨트롤러 연결 작업

② 포인트헤더에 회원 데이터 가져오기 작업

③ 포인트메인 사용내역 작업

④ 계좌등록팝업

⑤ 계좌관리팝업

⑥ 포인트충전팝업

⑦ 포인트인출팝업

---

① 포인트관련 페이지 및 팝업창 컨트롤러 연결 작업

마이페이지의 메뉴바에서 [포인트]를 클릭하거나, 마이페이지 헤더에서 [포인트]를 클릭하면 포인트메인으로 이동한다.

② 포인트헤더에 회원 데이터 가져오기 작업

포인트페이지의 포인트 헤더는 마이페이지 헤더와 같이 회원의 매너지수에 맞는 사진과 닉네임, 포인트 정보를 가져와서 보여준다.

아래  사용내역 목록은 아직 정적 데이터,,,

③ 포인트메인 사용내역 작업

정적인 데이터로 만들어놓은 화면 예시를 먼저 보면, 이런식으로 화면을 구성해놓았다.

포인트 사용내역 예시화면(정적 데이터)

포인트 사용에서 결제/인출/환불/지급은 모두 공동구매와 관련된 것이므로, 공동구매 게시물 이름을 클릭하면 해당 공동구매 페이지로 이동한다.

하지만 아직 공동구매 상세페이지 작업은 하지 않아서 404에러가 뜨겠지만,,,, 일단 공동구매 게시물 코드만 주소로 넘겨주게 할 계획이다.

 

🔥 CSS 작업할 때, select box가,,,너무 별로여서 nice select를 다 사용했더니 코드 부분에서 약간 걸림돌이,,,ㅎㅅㅎ

 selected 거는게 안됐는데...!! ㅎㅎ 그냥 selectbox 사용할 껄 ㅎㅎ ^-^,,,

그래도 해결했다 하핳

 

• HTML 코드

- nice select는 nice select가 보여지고 기존 selectbox는 display:none;으로 숨겨진 상태의 코드 구조이다.

- 그래서 내 마음대로 script 단에서 다루고 싶으면, 숨겨져 있던 코드들을 다 적어줘야 하는 것 같다.

- <span class="current"></span> 부분에 해당 값이 적혀있으면, 사용자에게는 현재 selected 된 걸로 보여진다.

<div class="myPoint-form-box">
    <select id="pointType" class="form-select point-select" aria-label="Default select example"
    style="display: none;">
        <option value="%">전체</option>
        <option value="charge">충전</option>
        <option value="pay">결제</option>
        <option value="withdraw">인출</option>
        <option value="refund">환불</option>
        <option value="complete">지급</option>
    </select>
    <div class="nice-select form-select point-select" tabindex="0">
        <span class="current"></span>
        <ul class="list">
            <li data-value="%" class="option">전체</li>
            <li data-value="charge" class="option">충전</li>
            <li data-value="pay" class="option">결제</li>
            <li data-value="withdraw" class="option">인출</li>
            <li data-value="refund" class="option">환불</li>
            <li data-value="complete" class="option">지급</li>
        </ul>
    </div>
</div>

• jQuery 코드

- 주소로 넘겨받은 parameter 값을 이용해서 그 값에 따라서 <span class="current></span> 사이의 html을 바꿔줬다.

$(function()
{
    let type = '<%=request.getParameter("type")%>';
    let value = '';
    if (type === 'null')
        value = '전체';
    else if (type === 'charge')
        value = '충전';
    else if (type === 'pay')
        value = '결제';
    else if (type === 'withdraw')
        value = '인출';
    else if (type === 'refund')
        value = '환불';
    else if (type === 'complete')
        value = '지급';

    $('span.current').html(value);

    $('.point-select').on("change", function()
    {
        location.href = 'mypage_point.lion?type=' + $(this).val();
    });
});

selectbox 작업을 끝낸 후에는 목록 가져오는 작업을 했다. 

DB상에서 금액에 +/-, 천 단위에 『,』 처리는 다 해서 가져왔다.

아래 이미지는 DB에서 데이터를 가져와서 띄운 목록이다!

목록 예시 1) 전체

목록 예시 2) 결제

목록 예시 3) 충전

목록 예시 4) 환불

목록의 날짜 아래 공동구매 게시물 제목 클릭 시, 공동구매 게시물 본문으로 이동해야 한다.

아직 본문 작업은 안돼서 404 에러는 뜨지만 주소에 공동구매게시물 코드만 넘겨주었다.

 

🔥 dao로 SQL구문에 2개 이상의 데이터를 넘겨줄 때는 DTO를 사용하거나, hashmap을 만들어서 넘겨줘야 한다.

그런데 hashmap을 만들어서 넘겨주는 과정이 복잡할 거 같아서..! 앞에서는 DTO를 만들어서 했는데, 이번에는 hashmap으로 넘기는 걸 했다!!!~!~!!~! 쉬웠다,,,ㅎ,,,,역시 해봐야,,,,

HashMap을 매개변수로 받는다고 IDAO 에 적어놓고, 처리해주는 부분에서 HashMap을 만들어서 그 안에 데이터를 담아주고, 해당 sql문을 실행할 때 hashmap을 넘겨주기만 하면 끝!

사용 내역을 가져오기 위해서 dao에 넘겨줘야 하는 데이터는 member_code와 사용자가 select 한 값!

HashMap에 데이터 2개를 담아서 보내려고 작업한 코드 과정이다.

 

• IMypageDAO.java  (DAO interface 파일)

// 사용내역
public ArrayList<PointDTO> pointList(HashMap<String, String> params);

• MypageDAO.xml  

<select id="pointList" resultType="com.test.mybatis.PointDTO">
	:
   SQL구문 작성
        :
</select>

• Controller  

@RequestMapping("/mypage_point.lion")
public String mypagePointMain(HttpServletRequest request, Model model)
{
    		:
    IMypageDAO dao = sqlSession.getMapper(IMypageDAO.class);
    		:
    HashMap<String, String> params = new HashMap<String, String>();
    String type = request.getParameter("type");
    if (type == null || type.equals("%")) type = "%";
    params.put("member_code", member_code);
    params.put("type", type);
    ArrayList<PointDTO> pointList = dao.pointList(params);
    		:
    model.addAttribute("pointList", pointList);

    return "/WEB-INF/view/user_mypage_point.jsp";
}

 

---

나머지 팝업창 작업들은,,,다음 게시물에서,,,,to be continue,,,

④ 계좌등록팝업

⑤ 계좌관리팝업

⑥ 포인트충전팝업

⑦ 포인트인출팝업