스프링부트+jsp로 배달사이트 만들기-10 음식 목록 가져오기

자신이 만든 가게 번호에 맞게 음식 목록을 추가합니다

 

 

INSERT INTO BM_FOOD (ID, STORE_ID, FOOD_NAME, FOOD_PRICE, FOOD_DEC, FOOD_IMG, FOOD_THUMB) 
VALUES (FOOD_ID_SEQ.NEXTVAL, 7, '불고기피자', '11000', '불고기피자 입니다', '\img\none.gif', '\img\none.gif');
 
INSERT INTO BM_FOOD (ID, STORE_ID, FOOD_NAME, FOOD_PRICE, FOOD_DEC, FOOD_IMG, FOOD_THUMB) 
VALUES (FOOD_ID_SEQ.NEXTVAL, 7, '포테이토피자', '12000', '포테이토피자 입니다', '\img\none.gif', '\img\none.gif');
 
INSERT INTO BM_FOOD (ID, STORE_ID, FOOD_NAME, FOOD_PRICE, FOOD_DEC, FOOD_IMG, FOOD_THUMB) 
VALUES (FOOD_ID_SEQ.NEXTVAL, 7, '고구마피자', '4000', '고구마피자 입니다', '\img\none.gif', '\img\none.gif');
 
INSERT INTO BM_FOOD (ID, STORE_ID, FOOD_NAME, FOOD_PRICE, FOOD_DEC, FOOD_IMG, FOOD_THUMB) 
VALUES (FOOD_ID_SEQ.NEXTVAL, 7, '페퍼로니피자', '21000', '페퍼뢰니피자 입니다', '\img\none.gif', '\img\none.gif');

commit;

 

 

Food 클래스를 생성합니다

@Getter
@Setter
@ToString
public class Food {
	private long id;
    private long storeId;
    private String foodName;
    private String foodPrice;
    private String foodDec;
    private String foodImg;
    private String foodThumb;
}

 

StoreDetail클래스의 foodList 주석을 해제하고 

Service의 storeDetail메서드를 수정합니다

	@Override
	public StoreDetail storeDetail(long storeId) {
		Store storeInfo = storeDAO.storeDetail(storeId); 
		List<Food> foodList = storeDAO.foodList(storeId);
//		List<Review> reviewList = storeDAO.reviewList(storeId);
		
		return new StoreDetail(storeInfo, foodList);
	}

 

코드를 추가합니다

StoreDAO

List<Food> foodList(long storeId);

 

StoreDAOImp

	@Override
	public List<Food> foodList(long id) {
		return sql.selectList("store.foodList", id);
	}

StoreMapper

<select id="foodList" resultType="Food">
		SELECT
		    id,
		    store_id,
		    food_name,
		    food_price,
		    food_dec,
		    food_img,
		    food_thumb
		FROM
		    bm_food
		WHERE
			STORE_ID = #{id }    
	</select>

 

storeDetail.jsp의 <ul class="menu">태그 아래에 추가합니다

<c:forEach items="${store.foodList }" var="foodList" >
	            <li>
		            <c:if test="${adminPage && SPRING_SECURITY_CONTEXT.authentication.principal.user.role == 'ROLE_ADMIN' }">
		                <label class="menu_delete_label">
		                	<i class="fas fa-check-square" ></i>
		                	<input type="checkbox" class="menu_delete_checkbox" name="deleteNumber" value="${foodList.id }">
	                	</label>
	                </c:if>
	                
	                <div class="menu_box">
	                    <div>
							<h2>${foodList.foodName } </h2>
		                    
   		                    <fm:formatNumber value="${foodList.foodPrice }" pattern="###,###" />원 
		                    <input type="hidden" value="${foodList.storeId }" name="storeId" >
				            <input type="hidden" value="${foodList.id }" name="foodId" class="food_id"   >
				            <input type="hidden" value="${foodList.foodName }" name="foodName" class="food_name" >
				            <input type="hidden" value="${foodList.foodPrice }" name="foodPrice" class="food_price"   >
				            <input type="hidden" value="${foodList.foodDec }" name="foodDec" class="food_dec"   >
				            <input type="hidden" value="${foodList.foodImg }" name="foodImg" class="food_img"   >
				            <input type="hidden" value="${foodList.foodThumb }" name="foodThumb" class="food_thumb"   >
		                </div>
		                
                    	<div><img src="${foodList.foodImg }" alt="이미지"></div>
                    </div>
	             </li>
	        </c:forEach>

 

 

 

 

리스트 클릭시 음식의 추가옵션들을 가져올 수 있게 코드를 추가합니다

 

FoodOption

@Getter
@Setter
@ToString
public class FoodOption {
    private long id;
    private long foodId;
    private String optionName;
    private long optionPrice;
}

 

StoreController

	// 메뉴 클릭시 음식 추가옵션 가져요기
	@ResponseBody
	@GetMapping("/foodOption")
	public List<FoodOption> menuDetail(int foodId) {
		List<FoodOption> foodOption = storeService.foodOption(foodId);
		return foodOption;
	}

 

StoreService

	// 해당 메뉴의 옵션 가져오기
	List<FoodOption> foodOption(int foodId);

 

StoreServiceImp

	@Override
	public List<FoodOption> foodOption(int foodId) {
		return storeDAO.foodOption(foodId);
	}

 

StoreDAO

List<FoodOption> foodOption(int foodId);

 

StoreDAOImp

	@Override
	public List<FoodOption> foodOption(int foodId) {
		return sql.selectList("store.foodOption", foodId);
	}

 

StoreMapper

	<select id="foodOption" resultType="FoodOption">
		SELECT
		    id,
		    food_id,
		    option_name,
		    option_price
		FROM
		    bm_food_option
		WHERE
			food_id = #{foodId }    
	</select>

 

util.js 아래에 모달관련 함수를 추가합니다

function openModal(modal) {
	const size = window.innerWidth;
	
	if (size > 767) {
		modal.css("transition", "0s").css("top", "0%");
		console.log("pc");
	} else {
		modal.css("transition", "0.2s").css("top", "0%");
		console.log("mobile");
	}
	$("#modal_bg").show();
	$("body").css("overflow", "hidden");
	$("body").css("overflow-y", "hidden");
	
	
	$(".closeA").click(function() {
		closeModal();
	});
	
	$("#modal_bg").click(function() {
		closeModal();
	});
	
	$(".closeB").click(function() {
		closeModal();
	});
}




function closeModal() {
	$("#modal_bg").hide();
	$(".modal").css("top", "100%");
	$(".modal_box").scrollTop(0);
	$("body").css("overflow", "visible");
	$(".modal input[type='checkBox']").prop("checked", false);
	
	$("#amount").val(1);
};

 

footer.jsp 아래에 util.js를 첨부합니다

<script src="/js/util/util.js"></script>

 

이후 메뉴목록을 클릭했을 때 모달이 나타납니다

 

 

아직 추가옵션이 없기 때문에 db에서 직접 추가해주겠습니다

음식의 id에 맞게 수정후 추가해줍니다

 

INSERT INTO BM_FOOD_OPTION VALUES (OPTION_ID_SEQ.NEXTVAL, 5, '치즈크러스트로 변경', 3000);
INSERT INTO BM_FOOD_OPTION VALUES (OPTION_ID_SEQ.NEXTVAL, 5, '파스타 추가', 4000);
INSERT INTO BM_FOOD_OPTION VALUES (OPTION_ID_SEQ.NEXTVAL, 5, '베이컨 토핑 추가', 1000);
INSERT INTO BM_FOOD_OPTION VALUES (OPTION_ID_SEQ.NEXTVAL, 5, '치즈 토핑 추가', 1000);
commit;

 

실행화면