주문하기 구현

• product.mustache + Java Script
  • 이미지 적용 아직 안함!

<!-- 로그인 여부 상관없이 header 출력 -->
{{#userName}}
{{>layouts/header}}
{{/userName}}
{{^userName}}
    {{>layouts/header}}
{{/userName}}

<!-- 로그인 안했으면 로그인하라는 버튼 -->
{{^userId}}
    <button class="btn btn-outline-danger  btn-lg m-5"><a href="signIn" style="color: black; text-decoration-line: none">로그인 후 이용해주세요</a></button>
{{/userId}}

<!-- 로그인 확인 후 출력 부분 -->
{{#userId}}
{{#products}}
    <div class="row row-cols-1 row-cols-md-3 g-4" style="margin: 0 auto">
        <div class="col">
            <div class="card">
                <img src="images/coffee.png" class="card-img-top">
                <div class="card-body">
                    <input type="hidden" id="id" value="{{id}}">
                    <h5 class="card-title" id="name">{{name}}</h5>
                    <p class="card-text">{{price}} 원</p>

                    <button class="btn btn-outline-secondary" id="order-btn" productId="{{id}}"
                    userId="{{userId}}" total="{{price}}">주문하기</button>
                </div>
            </div>
        </div>
    </div>
{{/products}}
{{/userId}}

<script>
    const orderBtns = document.querySelectorAll("#order-btn");

    orderBtns.forEach(btn => {
        btn.addEventListener("click", (event) => {
            const orderBtn = event.srcElement;

           const order = {
               userId: orderBtn.getAttribute("userId"),
               productId: orderBtn.getAttribute("productId"),
               total: orderBtn.getAttribute("total")
           }

           console.log(order);

            const url = `/order/product`
            fetch(url, {
                method: "POST",
                body: JSON.stringify(order),
                headers: {
                    "Content-Type": "application/json"
                }
            }).then(response => {
                const msg = (response.ok) ? "주문 완료" : "주문 실패";
                alert(msg);

            });
        });
    });
</script>

 

• MainController

@Controller
@RequiredArgsConstructor
@Slf4j
public class MainController {

    @Autowired
    private ProductService productService;


    @Autowired
    private OrderService orderService;

    @Autowired
    private OrderProductService orderProductService;

				
                .
                .
                .
                .
                

    //모든 상품 페이지
    @GetMapping("/product")
    public String product(Model model, @LoginUser SessionUser user) {    //모델 등록
        List<Product> products = productService.list();
        model.addAttribute("products", products);

        //올바른 User ID 인지 확인
        if (user != null) {
            model.addAttribute("userId", user.getId());
            model.addAttribute("userName", user.getName());
        }

        return "coffeeShop/product";
    }

    @PostMapping("/order/product")
    public ResponseEntity<OrderDto> create(@LoginUser SessionUser user, @RequestBody Map<String, Long> map, OrderDto dto,
                                           OrderProductDto orderDto) {

        // JSON 데이터 잘 매핑됐는지 확인
        log.info("map ->" + map);

        //Order 테이블 Insert
        OrderDto createdDto = orderService.create(user.getId(), dto);

        //Order_product 테이블 Insert
        OrderProductDto createdDto2 = orderProductService.create(createdDto.getId(), map.get("productId"), orderDto);
        log.info("orderProduct -> " + createdDto2);

        return ResponseEntity.status(HttpStatus.OK).body(createdDto);
    }

}

 

 

• 로그인 전 상품 페이지

 

• 로그인 후 상품 페이지

 

• 주문하기 버튼 클릭

 

• h2 console 로 데이터 Insert 확인

Order와 Order_Product에 데이터 Insert 확인

 

 

• git: https://github.com/Pearlmoon997/CoffeeShop

GitHub - Pearlmoon997/CoffeeShop: CoffeeShop