feat(order-service, customer-vue): 주문 페이지 추가

- 장바구니 데이터 조회
- 주문 페이지 개발

customer-vue/src/api/order.js

@@ -16,5 +16,13 @@ export default {
     }
     item.itemOptionIds.push(item.requireOption)
     return axios.post(process.env.VUE_APP_ORDER_API_URL+'/order/item', item);
-  }
+  },
+  saveOrder(order){
+    //만약 동시요청으로 장바구니가 두개 생겨버린다면?
+    return axios.post(process.env.VUE_APP_ORDER_API_URL + "/order/orders", order);
+  },
+  getOrder() {
+    return axios.get(process.env.VUE_APP_ORDER_API_URL + "/order/orders");
+  },
+
 }

customer-vue/src/components/AppNavigation.vue

@@ -4,18 +4,22 @@
       dense
       color="white"
       elevation="1"
+
   >
-    <v-app-bar-nav-icon>
-      <v-icon>mdi-arrow-left</v-icon>
-    </v-app-bar-nav-icon>
-    <v-spacer></v-spacer>
-    <v-toolbar-title>
-      <v-img :src="require('@/assets/just-logo.png')"></v-img>
-    </v-toolbar-title>
-    <v-spacer></v-spacer>
-    <v-btn icon>
-      <v-icon>mdi-magnify</v-icon>
-    </v-btn>
+
+    <v-row class="d-flex" style="max-width: 768px;display: table; margin-left: auto; margin-right: auto; width: 100%" align="center">
+      <v-app-bar-nav-icon>
+        <v-icon>mdi-arrow-left</v-icon>
+      </v-app-bar-nav-icon>
+      <v-spacer></v-spacer>
+      <v-toolbar-title>
+        <v-img :src="require('@/assets/just-logo.png')"></v-img>
+      </v-toolbar-title>
+      <v-spacer></v-spacer>
+      <v-btn icon>
+        <v-icon>mdi-magnify</v-icon>
+      </v-btn>
+    </v-row>
   </v-app-bar>
 </template>
 

customer-vue/src/router/router.js

@@ -59,13 +59,19 @@ const routes = [
         name: 'login',
         component: () => import('../views/LoginPage')
       },
+      {
+        path: "/item/:storeId/:itemId",
+        name: 'itemDetail',
+        component: () => import('../views/ItemDetail')
+      },
+      {
+        path: "/order",
+        name: 'orderPage',
+        component: () => import('../views/OrderPage')
+      },
     ]
   },
-  {
-    path: "/item/:storeId/:itemId",
-    name: 'itemDetail',
-    component: () => import('../views/ItemDetail')
-  },
+
 
   {
     path: '/auth',

customer-vue/src/views/ItemDetail.vue

@@ -1,6 +1,5 @@
 <template>
-  <v-main>
-    <v-container >
+    <div >
       <v-row>
         <v-col>
           <v-img :src="require('@/assets/store.jpeg')"
@@ -8,33 +7,29 @@
           />
         </v-col>
       </v-row>
-      <v-row >
-        <v-col >
-          <v-subheader >
+      <v-row class="mt-5" >
+        <v-col  >
+          <div class="text-h3" >
             {{itemData.name}}
-          </v-subheader>
+          </div>
         </v-col>
       </v-row>
-      <v-row >
-        <v-col class="text-h3">
-          <v-container>
-            <span class="text-h3">가격</span>
-          </v-container>
+      <v-row class="mt-5" >
+        <v-col class="text-h5">
+            <span class="text-h5">가격</span>
         </v-col>
         <v-spacer></v-spacer>
         <v-spacer></v-spacer>
         <v-col >
           <v-container>
-            <div class="text-h3">{{ itemData.price }}원</div>
+            <div class="text-h5">{{ itemData.price }}원</div>
           </v-container>
         </v-col>
       </v-row>
       <v-divider/>
-      <v-row >
-        <v-col >
-          <v-container>
-            <div class="text-h3">수량</div>
-          </v-container>
+      <v-row class="mt-5">
+        <v-col>
+            <div class="text-h5">수량</div>
         </v-col>
         <v-spacer></v-spacer>
         <v-spacer></v-spacer>
@@ -45,7 +40,6 @@
                 append-outer-icon="mdi-plus"
                 prepend-icon="mdi-minus"
                 filled
-                label="수량"
                 type="number"
                 @click:append-outer="addItemCount(1)"
                 @click:prepend="addItemCount(-1)"
@@ -55,10 +49,9 @@
         </v-col>
       </v-row>
       <v-divider/>
-      <v-row>
+      <v-row class="mt-5">
         <v-col>
-          <v-container>
-          <div class="text-h3"> 필수 옵션</div>
+          <div class="text-h5"> 필수 옵션</div>
           <v-radio-group v-model="setItem.requireOption">
             <v-radio
                 v-for="itemOption in requireGroup"
@@ -67,14 +60,12 @@
                 :value="itemOption.id"
             />
           </v-radio-group>
-          </v-container>
         </v-col>
       </v-row>
       <v-divider/>
-      <v-row>
+      <v-row class="mt-5">
         <v-col>
-          <v-container>
-          <div class="text-h3"> 추가 옵션</div>
+          <div class="text-h5"> 추가 옵션</div>
             <v-checkbox
                 class="shrink mr-2 mt-0"
                 v-model="setItem.otherOptions"
@@ -83,15 +74,13 @@
                 :label="itemOption.name"
                 :value="itemOption.id"
             />
-          </v-container>
         </v-col>
       </v-row>
       <v-btn
           block
           @click="addItem"
       >담기</v-btn>
-    </v-container>
-  </v-main>
+    </div>
 </template>
 
 <script>
@@ -100,12 +89,12 @@ import orderApi from "@/api/order";
 
 export default {
   name: "ItemDetail",
-  mounted() {
+  async beforeMount() {
     console.log(this.$route.params)
     this.storeId = this.$route.params.storeId
     this.itemId = this.$route.params.itemId
     this.setItem.storeId = this.storeId;
-    this.getItemData()
+    await this.getItemData()
   },
   computed: {
     requireGroup:function(){
@@ -114,7 +103,6 @@ export default {
     otherGroup:function(){
       return this.parseGroup('OTHER')
     }
-
   },
   data: function() {
     return {
@@ -134,7 +122,7 @@ export default {
     }
   },
   methods: {
-    getItemData: function (){
+    getItemData: async function (){
       storeApi.getItemById(this.itemId)
       .then(response=>{
         console.log(response)
@@ -144,6 +132,7 @@ export default {
       })
       .catch(error=>{
         console.log(error)
+        this.$router.replace("/")
       })
     },
     parseGroup: function (type){
@@ -158,10 +147,10 @@ export default {
           this.setItem.count+v >=0? this.setItem.count+v: 0;
     },
     addItem: function(){
-      console.log(this.setItem)
       orderApi.addItemToBasket(this.setItem)
           .then(response=>{
             console.log(response)
+            this.$router.replace("/store/"+this.storeId)
           })
           .catch(error=>{
             console.log(error)
@@ -172,12 +161,4 @@ export default {
 </script>
 
 <style scoped>
-.container {
-  max-width: 768px;
-  background-color: white;
-  height: 100%;
-}
-main {
-  background-color: #f2f2f2!important;
-}
 </style>

customer-vue/src/views/OrderPage.vue

@@ -0,0 +1,120 @@
+<template>
+  <div>
+    <v-row>
+      <v-col>
+        <div class="text-h4" style="white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">{{ orderData.storeId }}</div>
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col
+        v-for=" orderItem in orderData._orderItemDtos"
+        :key = "orderItem.itemId"
+      >
+        <v-card
+            class="mx-auto mb-5"
+            outlined
+        >
+          <v-list-item three-line>
+            <v-list-item-content>
+              <v-list-item-title class="text-h5 mb-3">
+                {{ orderItem.itemId }}
+              </v-list-item-title>
+              <div class="text-body-1 mb-5">
+                {{ orderItem.itemOptionIds.join(', ')}}
+              </div>
+              <div class="text--primary">
+                합계 : <b> {{ orderItem.price }} 원</b>
+              </div>
+            </v-list-item-content>
+
+            <v-list-item-avatar
+                tile
+                size="100"
+            >
+              <v-img :src="require('@/assets/store.jpeg')"></v-img>
+            </v-list-item-avatar>
+
+          </v-list-item>
+
+          <v-card-actions class="pb-2">
+            <v-btn block color="warning">삭제하기</v-btn>
+          </v-card-actions>
+
+        </v-card>
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col>
+        <div> 합계 : {{orderData.totalPrice}} 원</div>
+      </v-col>
+    </v-row>
+        <v-btn
+            block
+            @click="saveOrder"
+            color="primary"
+        >주문하기</v-btn>
+<!--    <v-btn-->
+<!--        style="position: absolute; bottom: 0;transform: translateY(-100%); width: 100%"-->
+<!--        @click="orderItems"-->
+<!--    >주문하기</v-btn>-->
+
+  </div>
+</template>
+
+<script>
+import orderApi from "@/api/order";
+export default {
+  name: "OrderPage",
+  mounted() {
+    this.getOrder();
+  },
+  data: function(){
+    return {
+      orderData:{
+        storeId:Number,
+        _orderItemDtos:[{
+          itemId:Number,
+          itemOptionIds:Array,
+          price:Number,
+        }],
+        totalPrice:Number,
+
+      },
+    }
+  },
+  computed:{
+    test:function (a){
+
+      return a;
+    }
+  },
+  methods:{
+    saveOrder: function(){
+
+      orderApi.saveOrder()
+          .then(()=>{
+            alert('주문되었습니다.')
+            this.$router.replace("/")
+          })
+          .catch(error=>{
+            console.log(error)
+            //this.$router.replace("/")
+          })
+    },
+    getOrder: function(){
+      orderApi.getOrder()
+          .then(response=>{
+            this.orderData=response.data.data
+          })
+          .catch(error=>{
+            console.log(error)
+            this.$router.replace("/")
+          })
+    },
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

order-service/build.gradle

@@ -35,7 +35,7 @@ dependencies {
 	/*implementation 'org.springframework.boot:spring-boot-starter-amqp'*/
 	/*implementation 'org.springframework.boot:spring-boot-starter-security'*/
 	/*implementation 'org.springframework.cloud:spring-cloud-starter-config'*/
-	/*implementation 'org.springframework.kafka:spring-kafka'*/
+	implementation 'org.springframework.kafka:spring-kafka'
 	// https://mvnrepository.com/artifact/com.github.gavlyukovskiy/p6spy-spring-boot-starter
 	implementation 'com.github.gavlyukovskiy:p6spy-spring-boot-starter:1.8.0'
 
@@ -46,7 +46,7 @@ dependencies {
 	annotationProcessor 'org.projectlombok:lombok'
 	testImplementation 'org.springframework.boot:spring-boot-starter-test'
 //    testImplementation 'org.springframework.amqp:spring-rabbit-test'
-//    testImplementation 'org.springframework.kafka:spring-kafka-test'
+    testImplementation 'org.springframework.kafka:spring-kafka-test'
 //    testImplementation 'org.springframework.security:spring-security-test'
 	testImplementation 'com.h2database:h2'
 

order-service/src/main/java/com/justpickup/orderservice/domain/order/dto/FetchOrderDto.java

@@ -0,0 +1,49 @@
+package com.justpickup.orderservice.domain.order.dto;
+
+import com.justpickup.orderservice.domain.order.entity.Order;
+import com.justpickup.orderservice.domain.order.entity.OrderStatus;
+import com.justpickup.orderservice.domain.orderItem.dto.OrderItemDto;
+import com.justpickup.orderservice.domain.orderItem.entity.OrderItem;
+import com.justpickup.orderservice.domain.orderItemOption.dto.OrderItemOptionDto;
+import lombok.Getter;
+import lombok.NoArgsConstructor;
+
+import java.time.LocalDateTime;
+import java.util.List;
+import java.util.stream.Collectors;
+
+@Getter
+@NoArgsConstructor
+public class FetchOrderDto {
+    private Long id;
+
+    private Long userId;
+
+    private String userName;
+
+    private Long userCouponId;
+
+    private Long orderPrice;
+
+    private Long storeId;
+
+    private LocalDateTime orderTime;
+
+    private Long usedPoint;
+
+    private OrderStatus orderStatus;
+
+    private List<OrderItemDto> orderItemDtoList;
+
+
+    public FetchOrderDto(Order order) {
+        this.id = order.getId();
+        this.userId = order.getUserId();
+        this.orderPrice = order.getOrderPrice();
+        this.storeId = order.getStoreId();
+        this.orderItemDtoList = order.getOrderItems().stream()
+                .map(orderItem -> OrderItemDto.of(orderItem.getId(),orderItem.getItemId(),orderItem.getPrice(),orderItem.getCount(),orderItem.getOrderItemOptions().stream().map(orderItemOption -> new OrderItemOptionDto(orderItemOption.getId())).collect(Collectors.toList())))
+                .collect(Collectors.toList());
+    }
+
+}

order-service/src/main/java/com/justpickup/orderservice/domain/order/dto/OrderDto.java

@@ -84,6 +84,8 @@ public class OrderDto {
     }
 
 
+
+
     // == 변수 변경 메소드 == //
     public void setUserName(String userName) {
         this.userName = userName;

order-service/src/main/java/com/justpickup/orderservice/domain/order/entity/Order.java

@@ -85,8 +85,10 @@ public class Order extends BaseEntity {
         transaction.setOrder(this);
     }
 
-    public void addOrderItem(OrderItem orderItem) {
+    public Order addOrderItem(OrderItem orderItem) {
         this.orderItems.add(orderItem);
+        this.orderPrice += orderItem.getPrice();
         orderItem.setOrder(this);
+        return this;
     }
 }

order-service/src/main/java/com/justpickup/orderservice/domain/order/repository/OrderRepository.java

@@ -1,10 +1,11 @@
 package com.justpickup.orderservice.domain.order.repository;
 
 import com.justpickup.orderservice.domain.order.entity.Order;
+import com.justpickup.orderservice.domain.order.entity.OrderStatus;
 import org.springframework.data.jpa.repository.JpaRepository;
 
 import java.util.Optional;
 
 public interface OrderRepository extends JpaRepository<Order, Long> {
-    Optional<Order> findByUserId(Long userId);
+    Optional<Order> findByUserIdAndOrderStatus(Long userId, OrderStatus orderStatus);
 }

order-service/src/main/java/com/justpickup/orderservice/domain/order/repository/OrderRepositoryCustom.java

@@ -3,6 +3,7 @@ package com.justpickup.orderservice.domain.order.repository;
 import com.justpickup.orderservice.domain.order.dto.OrderSearchCondition;
 import com.justpickup.orderservice.domain.order.dto.PrevOrderSearch;
 import com.justpickup.orderservice.domain.order.entity.Order;
+import com.justpickup.orderservice.domain.order.entity.OrderStatus;
 import com.querydsl.core.types.dsl.BooleanExpression;
 import com.querydsl.jpa.impl.JPAQueryFactory;
 import lombok.RequiredArgsConstructor;
@@ -14,8 +15,12 @@ import org.springframework.stereotype.Repository;
 
 import java.time.LocalDateTime;
 import java.util.List;
+import java.util.Optional;
 
 import static com.justpickup.orderservice.domain.order.entity.QOrder.order;
+import static com.justpickup.orderservice.domain.orderItem.entity.QOrderItem.orderItem;
+import static com.justpickup.orderservice.domain.orderItemOption.entity.QOrderItemOption.orderItemOption;
+import static com.justpickup.orderservice.domain.transaction.entity.QTransaction.transaction;
 
 @Repository
 @RequiredArgsConstructor
@@ -104,4 +109,19 @@ public class OrderRepositoryCustom {
 
         return new SliceImpl<>(contents, pageable, hasNext);
     }
+
+    public Optional<Order> fetchOrder(Long userId){
+
+        return Optional.ofNullable(queryFactory.selectFrom(order)
+                .leftJoin(order.orderItems, orderItem).fetchJoin()
+                .leftJoin(orderItem.orderItemOptions,orderItemOption)
+                .leftJoin(order.transaction,transaction)
+                    .where(
+                            order.userId.eq(userId),
+                            order.orderStatus.eq(OrderStatus.PENDING)
+                    )
+                        .distinct()
+                            .fetchOne());
+
+    }
 }

order-service/src/main/java/com/justpickup/orderservice/domain/order/service/OrderService.java

@@ -1,5 +1,6 @@
 package com.justpickup.orderservice.domain.order.service;
 
+import com.justpickup.orderservice.domain.order.dto.FetchOrderDto;
 import com.justpickup.orderservice.domain.order.dto.OrderDto;
 import com.justpickup.orderservice.domain.order.dto.OrderSearchCondition;
 import com.justpickup.orderservice.domain.order.dto.PrevOrderSearch;
@@ -15,4 +16,6 @@ public interface OrderService {
     Page<OrderDto> findPrevOrderMain(PrevOrderSearch search, Pageable pageable, Long storeId);
     SliceImpl<OrderDto> findOrderHistory(Pageable pageable, Long userId);
     void addItemToBasket(OrderItemDto orderItemDto,Long storeId, Long userId);
+    FetchOrderDto fetchOrder(Long userId);
+    void saveOrder(Long userId);
 }

order-service/src/main/java/com/justpickup/orderservice/domain/order/service/OrderServiceImpl.java

@@ -1,9 +1,11 @@
 package com.justpickup.orderservice.domain.order.service;
 
+import com.justpickup.orderservice.domain.order.dto.FetchOrderDto;
 import com.justpickup.orderservice.domain.order.dto.OrderDto;
 import com.justpickup.orderservice.domain.order.dto.OrderSearchCondition;
 import com.justpickup.orderservice.domain.order.dto.PrevOrderSearch;
 import com.justpickup.orderservice.domain.order.entity.Order;
+import com.justpickup.orderservice.domain.order.entity.OrderStatus;
 import com.justpickup.orderservice.domain.order.repository.OrderRepository;
 import com.justpickup.orderservice.domain.order.repository.OrderRepositoryCustom;
 import com.justpickup.orderservice.domain.orderItem.dto.OrderItemDto;
@@ -103,7 +105,6 @@ public class OrderServiceImpl implements OrderService {
     @Override
     @Transactional
     public void addItemToBasket(OrderItemDto orderItemDto,Long storeId, Long userId) {
-        orderItemDto.getCount();
 
         //orderItemOption Entity를 생성한다.
         List<OrderItemOption> orderItemOptions = orderItemDto.getOrderItemOptionDtoList()
@@ -119,11 +120,26 @@ public class OrderServiceImpl implements OrderService {
         //HARD_CODE
         Long userCouponId=0L;
 
-        Optional<Order> optionalOrder = orderRepository.findByUserId(userId);
+        Optional<Order> optionalOrder = orderRepository.findByUserIdAndOrderStatus(userId, OrderStatus.PENDING);
         if(optionalOrder.isPresent()){
-            optionalOrder.get().addOrderItem(orderItem);
+            if(optionalOrder.get().addOrderItem(orderItem)
+                    .getStoreId().equals(storeId))
+                throw new RuntimeException("장바구니에 여러 카페의 메뉴를 담을수 없습니다.");
         }else{
             orderRepository.save(Order.of(userId,userCouponId,storeId,orderItemDto.getPrice(),orderItem));
         }
     }
+
+    @Override
+    public FetchOrderDto fetchOrder(Long userId) {
+        Order order = orderRepositoryCustom.fetchOrder(userId)
+                .orElseThrow(RuntimeException::new);
+
+        return new FetchOrderDto(order);
+    }
+
+    @Override
+    public void saveOrder(Long userId) {
+
+    }
 }

order-service/src/main/java/com/justpickup/orderservice/domain/order/web/OrderCustomerApiController.java

@@ -1,9 +1,11 @@
 package com.justpickup.orderservice.domain.order.web;
 
+import com.justpickup.orderservice.domain.order.dto.FetchOrderDto;
 import com.justpickup.orderservice.domain.order.dto.OrderDto;
 import com.justpickup.orderservice.domain.order.entity.OrderStatus;
 import com.justpickup.orderservice.domain.order.service.OrderService;
 import com.justpickup.orderservice.domain.orderItem.dto.OrderItemDto;
+import com.justpickup.orderservice.domain.orderItemOption.dto.OrderItemOptionDto;
 import com.justpickup.orderservice.global.dto.Result;
 import lombok.AllArgsConstructor;
 import lombok.Data;
@@ -99,7 +101,7 @@ public class OrderCustomerApiController {
                 requestItem.itemId,
                 requestItem.getPrice(),
                 requestItem.getCount(),
-                requestItem.getItemOptionIds());
+                requestItem.getItemOptionIds().stream().map(OrderItemOptionDto::new).collect(Collectors.toList()));
         orderService.addItemToBasket(orderItemDto,requestItem.getStoreId() ,Long.parseLong(userId));
         return ResponseEntity.status(HttpStatus.NO_CONTENT)
                 .body(Result.createSuccessResult(null));
@@ -117,6 +119,58 @@ public class OrderCustomerApiController {
 
     }
 
+    @GetMapping("/orders")
+    public ResponseEntity getOrder(@RequestHeader(value = "user-id") String userId){
+        FetchOrderDto fetchOrderDto = orderService.fetchOrder(Long.parseLong(userId));
+        ResponseOrder responseOrder = new ResponseOrder(fetchOrderDto);
+
+        return ResponseEntity.ok(Result.createSuccessResult(responseOrder));
+    }
+
+    @Data
+    @NoArgsConstructor
+    @AllArgsConstructor
+    public static class ResponseOrder{
+        private Long storeId;
+        private List<_OrderItemDto> _orderItemDtos;
+        private Long totalPrice;
+
+        @Data
+        @NoArgsConstructor
+        @AllArgsConstructor
+        public static class _OrderItemDto {
+            private Long itemId;
+            private List<Long> itemOptionIds;
+            private Long price;
+
+            public _OrderItemDto(OrderItemDto orderItemDto) {
+
+                this.itemId = orderItemDto.getItemId();
+                this.itemOptionIds = orderItemDto.getOrderItemOptionDtoList()
+                        .stream()
+                        .map(OrderItemOptionDto::getId)
+                        .collect(Collectors.toList());
+                this.price = orderItemDto.getPrice();
+            }
+        }
+
+        public ResponseOrder(FetchOrderDto fetchOrderDto){
+            this.storeId = fetchOrderDto.getStoreId();
+            this._orderItemDtos = fetchOrderDto.getOrderItemDtoList().stream()
+                    .map(_OrderItemDto::new)
+                    .collect(Collectors.toList());
+            this.totalPrice = fetchOrderDto.getOrderPrice();
+
+        }
+
+    }
+
+    @PostMapping("/orders")
+    public ResponseEntity saveOrder(@RequestHeader(value = "user-id") String userId){
+        orderService.saveOrder(Long.parseLong(userId));
+
+        return ResponseEntity.status(HttpStatus.CREATED).body(Result.createSuccessResult(null));
+    }
 
 
 

order-service/src/main/java/com/justpickup/orderservice/domain/orderItem/dto/OrderItemDto.java

@@ -42,15 +42,13 @@ public class OrderItemDto {
                 .build();
     }
 
-    public static OrderItemDto of(Long id, Long itemId, Long price, Long count, List<Long> itemOptionIds) {
+    public static OrderItemDto of(Long id, Long itemId, Long price, Long count, List<OrderItemOptionDto> orderItemOptions) {
         OrderItemDto orderItemDto = new OrderItemDto();
         orderItemDto.id = id;
         orderItemDto.itemId = itemId;
         orderItemDto.price = price;
         orderItemDto.count = count;
-        orderItemDto.orderItemOptionDtoList = itemOptionIds.stream()
-                .map(OrderItemOptionDto::new)
-                .collect(Collectors.toList());
+        orderItemDto.orderItemOptionDtoList = orderItemOptions;
 
         return orderItemDto;
     }

order-service/src/main/resources/application.yml

@@ -1,5 +1,5 @@
 server:
-  port: 0
+  port: 54329
 
 spring:
   application: