25_공동구매 게시물 상세보기 ⑤ 버튼 관련_1

① 공동구매에 관련된 정보들 가져오기

② 참여자목록 (참여자들 프로필사진 및 닉네임)

③ 댓글(등록, 수정, 삭제, 고정 처리)

④ 신고팝업, 신고처리(게시물, 댓글)

⑤ 찜(♡) 

⑥ 버튼 관련

---

공동구매 게시물에 있는 버튼 종류 표이다.

공동구매 상태	대상	대상 상태	버튼
모집	비회원, 회원	참여 X	<참여하기>
	참여자	참여 O	<추가 참여> <참여 취소>
	진행자	<추가 참여> <수정> <진행 취소>
진행	<진행 중인 공동구매>
완료/모집마감/취소	<마감된 공동구매>

 

1) 공동구매 상태별 + 회원 상태별 버튼 표시

공동구매의 상태에 따라 버튼 표시가 달라야 하고,

비회원/미참여자/참여자/진행자에 따라 버튼 표시 및 클릭했을 때 결과를 달리 해야 한다.

 

공동구매별 상태를 나타내는 뷰와 

공동구매별 회원에 따른 참여 정보를 나타내는 쿼리문을 먼저 작성했다.

--▷ 공동구매 상태 뷰
CREATE OR REPLACE VIEW VIEW_BUYPOST_STATUS
AS
SELECT CODE
            --모집중(모집마감일 > 현재날짜)DEADLINE > SYSDATE
     , CASE WHEN DEADLINE > SYSDATE THEN 'RECRUIT'
            --모집실패(모집마감일 < 현재날짜 && 목표개수 > 구매개수)
            WHEN DEADLINE < SYSDATE AND GOODS_NUM > (SELECT SUM(BUY_NUMBER)
                                                     FROM BUYPOST_PARTICIPANT
                                                     WHERE BUYPOST_CODE = B.CODE) THEN 'FAIL'     
            --취소(취소된공동구매 테이블 존재여부)
            WHEN (SELECT COUNT(*)
                  FROM BUYPOST_CANCEL
                  WHERE BUYPOST_CODE = B.CODE) > 0 THEN 'CANCLE'
            --진행중(SYSDATE <= 거래희망일+7 && 진행자 제외 구매확정 안 한 참여자 있음)
            WHEN SYSDATE <= TRADE_DATETIME + 7 AND (SELECT RESULT FROM VIEW_CONFIRM_COUNT WHERE BUYPOST_CODE = B.CODE) != 0 THEN 'PROCEED'
            --완료(SYSDATE > 거래희망일+7 || 진행자 제외 구매확정 모두 다 함)
            WHEN SYSDATE > TRADE_DATETIME + 7 AND (SELECT RESULT FROM VIEW_CONFIRM_COUNT WHERE BUYPOST_CODE = B.CODE) = 0 THEN 'COMPLETE'
            ELSE 'WHAT'
       END "STATUS"
FROM BUYPOST B
ORDER BY TO_NUMBER(SUBSTR(CODE, 3)) ASC;

--▷해당 회원이 공동구매의 참여자인지, 진행자인지, 아닌지 여부
SELECT CASE WHEN (MEMBER_CODE = 'M13') THEN 'HOST'
            WHEN (SELECT COUNT(*)
                  FROM BUYPOST_PARTICIPANT
                  WHERE BUYPOST_CODE = B.CODE AND MEMBER_CODE = 'M13') > 0 THEN 'PARTICIPANT'
            ELSE 'NOT'
       END "IS_PARTICIPANT"
FROM BUYPOST B
WHERE CODE = 'BP302'
;

 

모집중인 공동구매를 먼저 살펴보면, 계속 보던 딸기 공동구매로 ㅎㅎ

1. (모집) 비회원/참여하지 않은 회원일 때!

2. (모집) 참여 중인 회원일 때 

3. (모집) 진행자

4. 진행 중인 공동구매

5. 완료/모집마감/취소된 공동구매

- 현재 구매한 상품개수 >= 모집 목표 상품개수 일 경우에는, <참여하기> 버튼을 <모집완료> 버튼으로 보이게 처리

 

- 마감까지 남은 시간이 24시간 미만일 경우, <참여취소> 또는 <진행취소>, <수정> 불가하도록 처리

- 참여자가 있을 시, 공동구매 <수정> 불가하도록 처리

참여자: <취소불가> 불가 예시

진행자: <취소불가>, <수정불가> 버튼 예시 

진행자: 참여자 있을 시 <수정불가> 버튼 예시

 

 

2) <참여하기> & 결제팝업창

구매할 개수를 선택하고 <참여하기>를 누르면, 결제를 진행하고나서 참여가 완료되게 할 예정이다.

- 모든 버튼에는 비회원이 클릭했을 때에 로그인폼으로 이동하도록 처리했다.

- 구매 개수 선택할 때, 0개 클릭 시 → 안내 알림 띄움 (<참여하기>, <추가참여> 둘 다 해당)

- 구매 개수 선택할 때, 남은 모집상품개수보다 초과해서 입력하면 → 안내 알림 띄움 (<참여하기>, <추가참여> 둘 다 해당)

  → 공동구매 상세보기 데이터에 있는 현재까지 구입된 상품 개수와 마감까지 목표 상품개수를 상품개수를 선택하는

       input의 속성값으로 넘겨줘서 스크립트로 처리했다.

<div class="pro-qty">
    <input type="text" value="1"  id="buyNum"
    data-buy_number="${buypost.buy_number }" data-goods_num="${buypost.goods_num }">
</div>

 

이제 개수를 제대로 선택하고 <참여하기> 혹은 <추가참여>를 눌렀을 때 나타나는 결제 팝업창!

같은 팝업창에서 1)진행자가 공동구매 글을 작성하고 참여할 때와 2)진행자/참여자가 참여/추가참여할 때 팝업창의 안내멘트가 다르게 뜨도록 했다. get 방식으로 type을 participant와 host로 나눠서 보여지는 멘트가 다르게 처리했다.

 

1)번 케이스는 공동구매 글 작성할 때 뜨는 결제 팝업창이라 여기서 제대로 처리하지는 않지만, 팝업창 형태의 틀만 만들어놓으려고 한다.

현재는 일단 정적인 데이터이지만, <참여하기> 혹은 <추가참여>를 눌렀을 때 나오는 결제 팝업창의 내용이다.

그 다음은 진행자가 공동구매 글을 작성하고 공동구매를 진행하려고 할 때 나오는 결제 팝업창의 내용이다.

결제 팝업창에 필요한 데이터(구매 수량, 회원의 잔여 포인트, 결제할 포인트)를 가져오자

구매 수량과 결제 포인트는 공동구매 게시물로부터 받아와서 처리했고, 회원의 잔여포인트 데이터는 DB에서 가져왔다.

 

- 잔여 포인트 >= 결제 포인트 → <결제하기> 버튼

- 잔여 포인트  < 결제 포인트  → <충전하러 가기> 버튼 (클릭 시, 포인트 충전 팝업으로 연결)

<c:set var="amount" value="<%=Integer.parseInt(amount.replaceAll(\",\", \"\")) %>" />
<c:set var="pointAmount" value="${Integer.parseInt(pointAmount.replaceAll(',', '')) }" />
<c:choose>
    <c:when test='${pointAmount >= amount }'>
        <button type="button" class="btn btn-primary lion-primary-btn popupBtn buypostPayBtn">결제하기</button>
    </c:when>
    <c:otherwise>
        <button type="button" class="btn btn-primary lion-primary-btn popupBtn linkPayToChargeBtn"
        onclick="javascript:charge()">
            포인트가 부족합니다. <br />
            포인트 충전하러 가기 Click!				
        </button>
    </c:otherwise>
</c:choose>

 

berry 회원의 포인트를 다 인출해버리고 0원으로 테스트! 모카빵 공구에 3개 구매해서 참여해보자

잔여 포인트가 결제 포인트부터 적은 상황이라 결제를 할 수 없다.

<포인트 충전하러 가기> 버튼을 눌러서 충전하고 돌아와서 <결제하기> 클릭하면,

결제 및 공구 참여가 완료되었다는 알림 팝업이 뜬다.

3개를 구매하여 현재 구매상품개수가 7개로 늘어났고, 버튼도 참여자에게 보이는 버튼으로 바뀌었다.

버튼관련 작업은 거의 다 테이블 여러 개를 insert/update/delete 해줘야해서 프로시저로 처리했다.

 

mybatis 프로시저 코드

// dao Interface
// 공동구매 참여
public void insertParticipant(ParticipantDTO participant);

<!-- DAO.XML -->
<!-- <참여하기> -->
<select id="insertParticipant" statementType="CALLABLE">
    {CALL PRC_BP_PARTICIPATE
        (#{amount}, #{buypost_code}, #{member_code}, #{buy_number})}
</select>

 

3) <추가 참여>

화면으로 보여질 때, <추가 참여> 도 <참여하기>와 똑같다.

차이는 쿼리에서 공동구매 참여자테이블 쪽에 INSERT/UPDATE 해주는 부분!

<참여하기> : 결제테이블 INSERT + 공동구매참여자테이블 INSERT

<추가참여> : 결제테이블 INSERT + 공동구매참여자테이블 UPDATE

 

🔥 <참여> <추가참여> 버튼에 따라 결제 팝업창에서 각각 insert, update 해주는 controller로 가도록 했다.

그러고나서 redirect로 결제 팝업창으로 아무것도 넘겨주는거 없이 그냥 오니까 

공동구매 게시물에서 넘겨주던 구매 개수, 1인 가격을 가지고 계산하는 결제.jsp에서 nullpointerException 발생

jsp 위쪽에서 넘겨받아서 null 생각안하고 그냥 계산하던걸 null 일때는 계산하지 않도록 처리해줬다.

<%
	String buy_num_str = request.getParameter("buy_num");
	String price_str = request.getParameter("price");
	
	int buy_num = 0, price = 0;
	String amount = "";
	if (buy_num_str != null && price_str != null) 
	{
		buy_num = Integer.parseInt(buy_num_str);
		price = Integer.parseInt(price_str);
		DecimalFormat df = new DecimalFormat("###,###");
		amount = df.format(price * buy_num);
	}
%>

 

🔥 ....<추가참여>가  계ㅔㅔㅔ속 제대로 동작 안해서 하나하나 살펴봤는데....이유를 찾았다....

ㅎ,,,,어이없는 걸 빠뜨렸다

UPDATE 해줄 때, 구매수량 = 기존구매수량 + 추가구매수량으로 해줘야되는데.....

그냥 호다닥 작성하면서 추가구매수량으로만 UPDATE해줘가지고 계속 안됐다.....

UPDATE BUYPOST_PARTICIPANT
SET BUY_NUMBER = V_BUY_NUMBER
WHERE CODE = BUYPOST_PARTICIPANT_CODE;

↓↓↓↓  『구매수량 = 기존구매수량 + 추가구매수량』 으로 UPDATE.....↓↓↓↓ 

UPDATE BUYPOST_PARTICIPANT
SET BUY_NUMBER = BUY_NUMBER + V_BUY_NUMBER
WHERE CODE = BUYPOST_PARTICIPANT_CODE;

 

2개 추가 구매해서 현재 구매 상품개수가 5개 → 7개로 바꼈다.

 

 

나머지 버튼은 다음에 이어서,,,!!