hyeonga_code

reProject_35_사용자 메인페이지, 상품 목록 페이지 기능 구현 본문

Project_WEATHERWEAR

reProject_35_사용자 메인페이지, 상품 목록 페이지 기능 구현

hyeonga 2024. 1. 28. 06:59
반응형

 

reProject_34_트랜잭션 적용하기

reProject_33_ZenBlog 부트스트랩을 사용하여 사용자 화면 작업(메인페이지, 상품 목록 페이지, 상품 reProject_32_배송관리 페이지 작업 2024.01.20 배송관리는 택배사를 관리하는 페이지가 있어야 해서 작

hyeonga493.tistory.com


2024.01.26
메인페이지, 상품 목록 페이지 작업
product 관련 패키지가 관리자와 사용자가 동일하게 사용하는 부분으로 하나의 패키지로 작업해두었으나 추후 의논을 통해 결정할 문제(의논하기)
관리자 기능에서 적용한 orderbypaging.js를 적용해서 최대한 활용할 수 있도록 작업 중에 있
 
main.jsp 수정

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>WeatherWear 사용자</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;500&amp;family=Inter:wght@400;500&amp;family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&amp;display=swap" rel="stylesheet">
 
<!-- Vendor CSS Files -->
<link href="resources/client/ZenBlog/assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="resources/client/ZenBlog/assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
 
<!-- Swiper -->
<link href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" rel="stylesheet"/>
 
<!-- Template Main CSS Files -->
<link href="resources/client/ZenBlog/assets/css/main.css" rel="stylesheet">
<link href="resources/client/ZenBlog/assets/css/variables.css" rel="stylesheet">
 
<style>
.mb-2 { width: 210px; height: 50px; overflow: hidden}
.col-lg-3 { height: 440px; padding-left: 5%;}
.productDiv:hover { cursor: pointer; }
</style>
</head>
<body class="hold-transition sidebar-collapse layout-top-nav">
    <div class="wrapper">
        <%@ include file="header.jsp" %>
        <main id="main">
            
            <section id="hero-slider" class="hero-slider">
                <div class="container-md aos-init aos-animate" data-aos="fade-in">
                    <div class="row">
                        <div class="col-12">
                            <div class="swiper sliderFeaturedPosts swiper-initialized swiper-horizontal swiper-pointer-events swiper-backface-hidden">
                            <div class="swiper-wrapper" id="swiper-wrapper-f11091073a160510f1f" aria-live="off" style="transition-duration: 0ms; transform: translate3d(-814px, 0px, 0px);">
                                <div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="3" role="group" aria-label="4 / 4" style="width: 407px;">
                                    <a href="#" class="img-bg d-flex align-items-end" style="background-image: url('resources/client/images/eventbanner.png');">
                                    </a>
                                </div>
                                <div class="swiper-slide swiper-slide-prev" data-swiper-slide-index="0" role="group" aria-label="1 / 4" style="width: 407px;">
                                    <a href="#" class="img-bg d-flex align-items-end" style="background-image: url('resources/client/images/eventbanner.png')">
                                    </a>
                                </div>
                                    
                                <div class="swiper-slide swiper-slide-active" data-swiper-slide-index="1" role="group" aria-label="2 / 4" style="width: 407px;">
                                    <a href="#" class="img-bg d-flex align-items-end" style="background-image: url('resources/client/images/eventbanner2.png')">
                                    </a>
                                </div>
                            
                            </div>
                            <div class="custom-swiper-button-next" tabindex="0" role="button" aria-label="Next slide" aria-controls="swiper-wrapper-f11091073a160510f1f">
                                <span class="bi-chevron-right"></span>
                            </div>
                            <div class="custom-swiper-button-prev" tabindex="0" role="button" aria-label="Previous slide" aria-controls="swiper-wrapper-f11091073a160510f1f">
                                <span class="bi-chevron-left"></span>
                            </div>
                        
                            <div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets swiper-pagination-horizontal"><span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 1"></span><span class="swiper-pagination-bullet swiper-pagination-bullet-active" tabindex="0" role="button" aria-label="Go to slide 2" aria-current="true"></span><span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 3"></span><span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 4"></span></div>
                            <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span></div>
                        </div>
                    </div>
                </div>
            </section>
            <section class="category-section">
                <div class="container aos-init aos-animate" data-aos="fade-up">
                    <div class="section-header d-flex justify-content-between align-items-center mb-5">
                        <h2>BEST</h2>
                        <div>
                            <a href="#" class="more">MORE</a>
                        </div>
                    </div>
                    <!-- 상품 한 줄 시작 -->
                    <div class="row">
                    <c:forEach var="item" items="${ bestItem }" varStatus="num">
                        <c:if test="${ num.index%4 == 0 }">
                            </div>
                            <!-- 상품 한 줄 끝 -->
                            <!-- 상품 한 줄 시작 -->
                            <div class="row">
                        </c:if>
                            <!-- 상품 하나 반복 시작 -->
                            <div class="col-lg-3">
                                <div class="post-entry-1 border-bottom productDiv" onclick="location.href='productInfo.do?productId=${ item.productId }'">
                                    <img src="${ item.mainImage }" alt="mainLogo" class="img-fluid" style="width: 200px; height: 200px;">
                                    <div class="post-meta">
                                        <span class="date">
                                            <c:choose>
                                                <c:when test="${ item.productCate == 11}">OUTER</c:when>
                                                <c:when test="${ item.productCate == 12}">TOPS</c:when>
                                                <c:when test="${ item.productCate == 13}">PANTS</c:when>
                                                <c:when test="${ item.productCate == 14}">SKIRTS</c:when>
                                                <c:when test="${ item.productCate == 15}">DRESS</c:when>
                                            </c:choose>
                                        </span> 
                                        <span class="mx-1"></span> 
                                        <span>view: ${ item.productView }</span>
                                        <span class="mx-1"></span> 
                                        <span>buy: ${ item.productCnt }</span>
                                    </div>
                                    <h2 class="mb-2">${ item.productName }</h2>
                                    <span class="author mb-3 d-block"><fmt:formatNumber value="${item.productPrice}" pattern="###,###"/></span>
                                    <p class="mb-4 d-block">1/26일 순차배송</p>
                                </div>
                            </div>
                            <!-- 상품 하나 반복 끝 -->
                        <c:if test="${ num.index%4 == 0 }">
                        </c:if>
                    </c:forEach>
                    </div>
                    <!-- 상품 한 줄 끝 -->
                </div>
            </section>
            <section class="category-section">
                <div class="container aos-init aos-animate" data-aos="fade-up">
                    <div class="section-header d-flex justify-content-between align-items-center mb-5">
                        <h2>NEW</h2>
                        <div>
                            <a href="#" class="more">MORE</a>
                        </div>
                    </div>
                    <!-- 상품 한 줄 시작 -->
                    <div class="row">
                    <c:forEach var="item" items="${ newItem }" varStatus="num">
                        <c:if test="${ num.index%4 == 0 }">
                            </div>
                            <!-- 상품 한 줄 끝 -->
                            <!-- 상품 한 줄 시작 -->
                            <div class="row">
                        </c:if>
                            <!-- 상품 하나 반복 시작 -->
                            <div class="col-lg-3">
                                <div class="post-entry-1 border-bottom productDiv" onclick="location.href='productInfo.do?productId=${ item.productId }'">
                                    <img src="${ item.mainImage }" alt="mainLogo" class="img-fluid" style="width: 200px; height: 200px;">
                                    <div class="post-meta">
                                        <span class="date">
                                            <c:choose>
                                                <c:when test="${ item.productCate == 11}">OUTER</c:when>
                                                <c:when test="${ item.productCate == 12}">TOPS</c:when>
                                                <c:when test="${ item.productCate == 13}">PANTS</c:when>
                                                <c:when test="${ item.productCate == 14}">SKIRTS</c:when>
                                                <c:when test="${ item.productCate == 15}">DRESS</c:when>
                                            </c:choose>
                                        </span> 
                                        <span class="mx-1"></span> 
                                        <span>view: ${ item.productView }</span>
                                    </div>
                                    <h2 class="mb-2">${ item.productName }</h2>
                                    <span class="author mb-3 d-block"><fmt:formatNumber value="${item.productPrice}" pattern="###,###"/></span>
                                    <p class="mb-4 d-block">1/26일 순차배송</p>
                                </div>
                            </div>
                            <!-- 상품 하나 반복 끝 -->
                        <c:if test="${ num.index%4 == 0 }">
                        </c:if>
                    </c:forEach>
                    </div>
                    <!-- 상품 한 줄 끝 -->
                </div>
            </section>
        </main>
        
        <%@ include file="footer.jsp" %>
    </div>
 
<script src="resources/client/ZenBlog/assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
 
<!-- Template Main JS File -->
<script src="resources/client/ZenBlog/assets/js/main.js"></script>
 
</body>
</html>

 
 
productList.jsp 수정

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>WeatherWear 사용자</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;500&amp;family=Inter:wght@400;500&amp;family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&amp;display=swap" rel="stylesheet">
 
<!-- Vendor CSS Files -->
<link href="resources/client/ZenBlog/assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="resources/client/ZenBlog/assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
 
<!-- Template Main CSS Files -->
<link href="resources/client/ZenBlog/assets/css/main.css" rel="stylesheet">
<link href="resources/client/ZenBlog/assets/css/variables.css" rel="stylesheet">
 
<style>
.mb-2 { width: 210px; height: 50px; overflow: hidden}
.col-lg-3 { height: 440px; padding-left: 5%;}
.productName { width: 250px; }
.productList { display: flex; flex-direction: row; flex-wrap: wrap;}
.productOne { height: 470px; display: flex; flex-direction: column; align-items: center;}
</style>
</head>
<body class="hold-transition sidebar-collapse layout-top-nav">
    <div class="wrapper">
        <%@ include file="../header.jsp" %>
        <main id="main">
            <section>
                <div class="container">
                    <div class="row">
                        <div class="col-md-10 aos-init aos-animate" data-aos="fade-up">
                            <c:if test="${ param.searchType != null }">
                                <h3 class="category-title">Category: ${ param.searchType }</h3>
                            </c:if>
                            <!-- ProductList -->
                            <div class="productList row">
                                <c:forEach var="item" items="${productList}" varStatus="status">
                                <!-- 상품 시작 -->
                                <div class="col-md-3 lg productOne row" onclick="location.href='productInfo.do?productId=${ item.productId }'">
                                    <img src="${ item.mainImage }" alt="${ item.productId }_mainImage" class="img-fluid" style="width:250px; height:250px;">
                                    <div class="productOneInfo row"><br>
                                        <div class="post-meta">
                                            <span class="date">
                                                <c:choose>
                                                    <c:when test="${ item.productCate == 11}">OUTER</c:when>
                                                    <c:when test="${ item.productCate == 12}">TOPS</c:when>
                                                    <c:when test="${ item.productCate == 13}">PANTS</c:when>
                                                    <c:when test="${ item.productCate == 14}">SKIRTS</c:when>
                                                    <c:when test="${ item.productCate == 15}">DRESS</c:when>
                                                </c:choose>
                                            </span> 
                                            <span class="mx-1"></span> 
                                            <span>VIEW: ${ item.productView }</span></div>
                                        <h4 class="productName">${ item.productName }</h4>
                                        <h4>${ item.productPrice }</h4>
                                    </div>
                                </div>
                                <!-- 상품 끝 -->
                                </c:forEach>
                            </div>
                            <!-- End ProductList -->
                            <!-- Paging -->
                            <div class="text-start py-4">
                                <div class="custom-pagination">
                                    <c:if test="${pagination.prev}">
                                        <a href="#" class="prev" onclick="fn_prev('${pagination.page}', '${pagination.range}', '${pagination.rangeSize}', '${pagination.listSize}', '${search.searchType}', '${search.keyword}', '${search.orderby}')">Prevous</a>
                                    </c:if>
                                    <c:forEach begin="${pagination.startPage}" end="${pagination.endPage}" var="pageId">
                                        <a class="page-link <c:out value="${pagination.page == pageId ? 'active':''}"/>" href="#" onclick="fn_pagination('${pageId}', '${pagination.range}', '${pagination.rangeSize}', '${pagination.listSize}', '${search.searchType}', '${search.keyword}', '${search.orderby}')">${pageId}</a>
                                    </c:forEach>    
                                    <c:if test="${pagination.next}">
                                        <a href="#" class="next" onclick="fn_next('${pagination.page}', '${pagination.range}', '${pagination.rangeSize}', '${pagination.listSize}', '${search.searchType}', '${search.keyword}', '${search.orderby}')">Next</a>
                                    </c:if>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Category -->
                        <div class="col-md-2">
                            <div class="aside-block">
                                <h3 class="aside-title">Categories</h3>
                                <ul class="aside-links list-unstyled">
                                    <li><a href="productList.do"><i class="bi bi-chevron-right"></i> NEW</a></li>
                                    <li><a href="productList.do?searchType=outer"><i class="bi bi-chevron-right"></i> OUTER</a></li>
                                    <li><a href="productList.do?searchType=tops"><i class="bi bi-chevron-right"></i> TOPS</a></li>
                                    <li><a href="productList.do?searchType=pants"><i class="bi bi-chevron-right"></i> PANTS</a></li>
                                    <li><a href="productList.do?searchType=skirts"><i class="bi bi-chevron-right"></i> SKIRTS</a></li>
                                    <li><a href="productList.do?searchType=dress"><i class="bi bi-chevron-right"></i> DRESS</a></li>
                                </ul>
                            </div>
                            <!-- End Categories -->
                        </div>
                    </div>
                </div>
            </section>
        </main>
        <%@ include file="../footer.jsp" %>
    </div>
 
<script src="resources/client/ZenBlog/assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
 
<!-- Template Main JS File -->
<script src="resources/client/ZenBlog/assets/js/main.js"></script>
 
<script src="resources/util/js/orderbypaging.js"></script>
 
</body>
</html>

 
 
header.jsp 수정

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<header id="header" class="header d-flex align-items-center fixed-top">
    <div class="container-fluid container-xl d-flex align-items-center justify-content-between">
        <a href="main.do" class="logo d-flex align-items-center">
<!--             <img src="resources/client/images/logo_pull.png" alt="mainLogo"> -->
            <h1>WeatherWear</h1>
        </a>
        <nav id="navbar" class="navbar">
            <ul>
                <li><a href="productList.do">NEW</a></li>
                <li><a href="productList.do?searchType=outer">OUTER</a></li>
                <li><a href="productList.do?searchType=tops">TOP</a></li>
                <li><a href="productList.do?searchType=pants">PANTS</a></li>
                <li><a href="productList.do?searchType=skirts">SKIRTS</a></li>
                <li><a href="productList.do?searchType=dress">DRESS</a></li>
                <li class="dropdown"><a href="#"><span>COMMUNITY</span> <i class="bi bi-chevron-down dropdown-indicator"></i></a>
                    <ul>
                        <li><a href="#">NOTICE</a></li>
                        <li><a href="#">QNA</a></li>
                        <li><a href="#">REVIEW</a></li>
                    </ul>
                </li>
            </ul>
        </nav>
        <!-- .navbar -->
        
        <div class="position-relative">
            <a href="#" class="mx-2 js-search-open"><span class="bi-search"></span></a>
            <a href="#">Login</a>&nbsp;
            <i class="bi bi-list mobile-nav-toggle"></i>
            <!-- ======= Search Form ======= -->
            <div class="search-form-wrap js-search-form-wrap">
                <form action="search-result.html" class="search-form">
                    <span class="icon bi-search"></span>
                    <input type="text" placeholder="Search" class="form-control">
                    <button class="btn js-search-close"><span class="bi-x"></span></button>
                </form>
            </div>&nbsp;
            <!-- End Search Form -->
        </div>
    </div>
</header>
 
<!-- Swiper -->
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
    

 
 
ClientController.java 수정

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
package com.w2.client.controller;
 
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;
 
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
 
import com.w2.product.service.ProductService;
import com.w2.util.SearchOrderby;
 
import lombok.extern.slf4j.Slf4j;
 
@Slf4j
@Controller
public class ClientController {
    
    @Autowired
    private ProductService productService;
    
    @RequestMapping("test.do")
    public String test() {
        return "test";
    }
 
    /**
     * 메인 화면 호출
     * @return
     */
    @RequestMapping("main.do")
    public String mainView(Model model, HttpServletRequest request) {
        HttpSession session = request.getSession(false);
        model.addAttribute("bestItem", productService.getMainProductList("best"));
        model.addAttribute("newItem", productService.getMainProductList("new"));
        //model.addAttribute("userInfo", session.getAttribute("userInfo"));
        return "main";
    }
 
    /**
     * 상품 목록 화면 호출
     * @return
     */
    @RequestMapping("productList.do")
    public String productList(Model model, @RequestParam(required = false, defaultValue = "1"int page,
            @RequestParam(required = false, defaultValue = "1"int range, @RequestParam(required = false, defaultValue = "productName"String searchType,
            @RequestParam(required = falseString keyword, @RequestParam(required = false, defaultValue = "productRegDate"String orderby, @ModelAttribute("search") SearchOrderby search) {
        // 검색
        model.addAttribute("search", search);
        search.setListSize(20);
        search.setSearchType(searchType);
        search.setKeyword(keyword);
        search.setOrderby(orderby);
        
        // 전체 게시글 개수
        int listCnt = productService.getProductListCnt(search);
        
        // 검색 페이지 정보
        search.pageInfo(page, range, listCnt);
        // 페이징
        model.addAttribute("pagination", search);
        // 화면 출력
        model.addAttribute("productList", productService.getProductList(search));
        
        return "product/productList";
    }
 
    /**
     * 상품 상세 화면 호출
     * @return
     */
    @RequestMapping("productInfo.do")
    public String productInfo(Model model, HttpServletRequest request) {
        return "product/productInfo";
    }
    
}

 
 
ProductService.java 수정

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
package com.w2.product.service;
 
import java.util.HashMap;
import java.util.List;
import java.util.Map;
 
import org.springframework.ui.Model;
 
import com.w2.product.ProductVO;
import com.w2.util.SearchOrderby;
 
public interface ProductService {
 
    // 관리자
    List<ProductVO> getProductList(SearchOrderby search);    // 상품 목록 가져오기
    int getProductListCnt(SearchOrderby search);            // 상품 목록 개수 가져오기
    int insertProduct(Map<String, Object> pro);            // 상품 등록
    HashMap<String, Object> getProduct(String productId, Model model);            // 상품 상세
    int updateProduct(Map<String, Object> pro);            // 상품 수정
    int updateProductStatus(List<Map<StringString>> checkList);    // 상품 상태 변경
    int deleteProduct(String productId);                    // 상품 삭제
    
    // 사용자
    List<ProductVO> getMainProductList(String string);        // 메인페이지 상품 리스트 가져오기
    
}
 

 
 
ProductServiceImpl.java 수정

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
package com.w2.product.service;
 
import java.util.HashMap;
import java.util.List;
import java.util.Map;
 
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import org.springframework.ui.Model;
 
import com.w2.product.ProductDAO;
import com.w2.product.ProductVO;
import com.w2.util.SearchOrderby;
 
@Transactional
@Service("ProductService")
public class ProductServiceImpl implements ProductService {
 
    @Autowired
    private ProductDAO productDAO;
    
    @Override
    public List<ProductVO> getProductList(SearchOrderby search) {
        return productDAO.getProductList(search);
    }
    
    @Override
    public int getProductListCnt(SearchOrderby search) {
        return productDAO.getProductListCnt(search);
    }
 
    @Override
    public int insertProduct(Map<String, Object> pro) {
        int result = -1;
        try {
            result = productDAO.insertProduct((ProductVO)pro.get("product"));
            result = productDAO.insertPrice(pro);
            result = productDAO.insertOption(pro);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return result;
    }
 
    @Override
    public HashMap<String, Object> getProduct(String productId, Model model) {
        return productDAO.getProduct(productId, model);
    }
 
    @Override
    public int updateProduct(Map<String, Object> pro) {
        int result=-1;
        try {
            result = productDAO.updateProduct((ProductVO)pro.get("product"));
            result = productDAO.updatePrice(pro);
            result = productDAO.deleteOption((String)pro.get("productId"));
            if(result > 0) {
                result = productDAO.insertOption(pro);
                System.err.println("insert option : " + result);
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
        return result;
    }
 
    @Override
    public int deleteProduct(String productId) {
        int result = -1;
        result = productDAO.deletePrice(productId);
        result = productDAO.deleteOption(productId);
        result = productDAO.deleteProduct(productId);
        
        return result;
    }
 
    @Override
    public int updateProductStatus(List<Map<StringString>> checkList) {
        return productDAO.updateProductStatus(checkList);
    }
 
    @Override
    public List<ProductVO> getMainProductList(String type) {
        return productDAO.getMainProductList(type);
    }
}
 

 
 
ProductDAO.java 수정

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
package com.w2.product;
 
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
 
import org.mybatis.spring.SqlSessionTemplate;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;
import org.springframework.ui.Model;
 
import com.w2.util.SearchOrderby;
 
@Repository
public class ProductDAO {
    @Autowired
    private SqlSessionTemplate sqlSessionTemplate;
 
    public List<ProductVO> getProductList(SearchOrderby search) {
        System.err.println("search : " + search);
        return sqlSessionTemplate.selectList("ProductDAO.getProductList", search);
    }
 
    public int getProductListCnt(SearchOrderby search) {
        System.err.println(">>search : " + search);
        return sqlSessionTemplate.selectOne("ProductDAO.getProductListCnt", search);
    }
 
    public int insertProduct(ProductVO product) {
        return sqlSessionTemplate.insert("ProductDAO.insertProduct", product);
    }
 
    public int insertPrice(Map<String, Object> pro) {
        return sqlSessionTemplate.insert("ProductDAO.insertPrice", pro);
    }
 
    public int insertOption(Map<String, Object> pro) {
        List<OptionVO> optionList = new ArrayList<OptionVO>();
        List<String> optionColorList = (List<String>)pro.get("optionColorList");
        List<String> optionSizeList = (List<String>)pro.get("optionSizeList");
        List<Integer> stockCntList = (List<Integer>)pro.get("stockCntList");
 
        
        for(int i=0; i<optionColorList.size(); i++) {
            for(int j=0; j<optionSizeList.size(); j++) {
                OptionVO option = new OptionVO();
                option.setProductId(((ProductVO)pro.get("product")).getProductId());
                option.setOptionColor(optionColorList.get(i));
                option.setOptionSize(optionSizeList.get(j));
                option.setStockCnt(stockCntList.get(((i+1)*(j+1)-1)));
                System.err.println("option : " + option);
                optionList.add(option);
            }
        }
        return sqlSessionTemplate.insert("ProductDAO.insertOption", optionList);
    }
 
    public HashMap<String, Object> getProduct(String productId, Model model) {
        model.addAttribute("optionInfo",sqlSessionTemplate.selectOne("ProductDAO.getOptionInfo", productId));
        model.addAttribute("optionList",sqlSessionTemplate.selectList("ProductDAO.getOptionList", productId));
        model.addAttribute("detailImageList",sqlSessionTemplate.selectList("ProductDAO.getDetailImage", productId));
        return sqlSessionTemplate.selectOne("ProductDAO.getProduct", productId);
    }
 
    public int updateProduct(ProductVO product) {
        return sqlSessionTemplate.update("ProductDAO.updateProduct", product);
    }
 
    public int updatePrice(Map<String, Object> pro) {
        return sqlSessionTemplate.update("ProductDAO.updatePrice", pro);
    }
 
    public int deleteOption(String productId) {
        return sqlSessionTemplate.delete("ProductDAO.deleteOption", productId);
    }
 
    public int deleteProduct(String productId) {
        return sqlSessionTemplate.delete("ProductDAO.deleteProduct", productId);
    }
 
    public int deletePrice(String productId) {
        return sqlSessionTemplate.delete("ProductDAO.deletePrice", productId);
    }
 
    public int updateProductStatus(List<Map<StringString>> checkList) {
        int result = -1;
        for(Map<StringString> product: checkList) {
            result = sqlSessionTemplate.update("ProductDAO.updateStatus", product);
            if(result < 1) {
                return -1;
            }
        }
        return result;
    }
 
    public List<ProductVO> getMainProductList(String type) {
        return sqlSessionTemplate.selectList("ProductDAO.getMainProductList", type);
    }
}
 

 
 
product-mappin.xml 수정
-- 관리자 상품 목록 페이지에서 사용하는 메소드를 적용시켜 작업했다.
-- 추후 추가할 부분이나 따로 적용해야 하는 부분이 있는 경우 별도로 분리하여 작업할 예정

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
                 
<mapper namespace="ProductDAO">
    <resultMap id="optionInfoResult" type="hashMap">
        <result property="optionColor" column="optionColor" />
        <result property="optionSize" column="optionSize" />
        <result property="stockCnt" column="stockCnt" />
    </resultMap>
    
    <resultMap id="insertResult" type="String">
        <result property="productId" column="productId" />
    </resultMap>
 
    <select id="getProductList" resultType="product">
        SELECT p.*, CONCAT(pm.imageDir, pm.imageName) as mainImage, pr.productPrice
        FROM product p
        LEFT JOIN product_image pm ON (p.productId = pm.imageBy AND pm.imageStatus = '대표')
        LEFT JOIN product_price pr ON (p.productId = pr.productId)
        <trim prefix="WHERE" prefixOverrides="AND|OR">
            <if test="keyword != null and keyword != ''">
                <if test="searchType == 'productName'">
                    AND productName like CONCAT('%', #{keyword}, '%')
                </if>
                <if test="searchType == 'productId'">
                    AND productId like CONCAT('%', #{keyword}, '%')
                </if>
            </if>
            <if test="keyword == null or keyword == ''">
                <if test="searchType == 'outer'">
                    AND p.productCate Like '11%'
                </if>
                <if test="searchType == 'tops'">
                    AND p.productCate Like '12%'
                </if>
                <if test="searchType == 'pants'">
                    AND p.productCate Like '13%'
                </if>
                <if test="searchType == 'skirts'">
                    AND p.productCate Like '14%'
                </if>
                <if test="searchType == 'dress'">
                    AND p.productCate Like '15%'
                </if>
            </if>
        </trim>
        ORDER BY ${ orderby }
        LIMIT #{startList}, #{listSize};
    </select>
    
    <select id="getProductListCnt" resultType="int">
        SELECT count(*)
        FROM product
        <trim prefix="WHERE" prefixOverrides="AND|OR">
            <if test="keyword != null and keyword != ''">
                <if test="searchType == 'productName'">
                    AND productName like CONCAT('%', #{keyword}, '%')
                </if>
                <if test="searchType == 'productId'">
                    AND productId like CONCAT('%', #{keyword}, '%')
                </if>
            </if>
            <if test="keyword == null or keyword == ''">
                <if test="searchType == 'outer'">
                    AND p.productCate Like '11%'
                </if>
                <if test="searchType == 'tops'">
                    AND p.productCate Like '12%'
                </if>
                <if test="searchType == 'pants'">
                    AND p.productCate Like '13%'
                </if>
                <if test="searchType == 'skirts'">
                    AND p.productCate Like '14%'
                </if>
                <if test="searchType == 'dress'">
                    AND p.productCate Like '15%'
                </if>
            </if>
        </trim>
        ORDER BY ${ orderby }
    </select>
    
 
    <select id="getMainProductList" parameterType="String" resultType="product">
        SELECT p.*, CONCAT(pm.imageDir, pm.imageName) as mainImage, pr.productPrice
        FROM product p
        LEFT JOIN product_image pm ON (p.productId = pm.imageBy AND pm.imageStatus = '대표')
        LEFT JOIN product_price pr ON (p.productId = pr.productId)
        ORDER BY 
        <choose>
            <when test="type == 'best'">p.productCnt DESC, p.productView DESC</when>
            <when test="type == 'new'">p.productRegDate DESC</when>
        </choose>
        LIMIT 0,8;
    </select>
</mapper>

 
 
>> 실행
- 메인페이지

 
 
- 상품 목록 페이지 (OUTER 선택시)
-- 현재 searchType에 outer/tops/pants/skirts/dress를 주어 productCate로 구분하여 조회하고 있는데 추후 수정될 수 있음

 
>>> 페이징 적용

 

reProject_36_사용자 장바구니 기능 구현(수량 변경, 선택 삭제, 전체 삭제)

2024.01.28 장바구니 페이지를 작업하려고 보니 ZenBlog에는 table 태그에 관련된 코드가 없어 기존에 작업한 화면을 적용하여 작업했다. 기능 부분도 기존의 작업을 적용하여 작업. 현재 회원/비회원

hyeonga493.tistory.com

 

반응형