Develop

src/apis/notification/NotificationDto.ts

@@ -0,0 +1,4 @@
+export interface EnrollRestockRequest {
+  productId: number
+  sizeId: number
+}

src/apis/notification/notification.ts

@@ -3,6 +3,7 @@ import { AxiosError } from 'axios'
 import { authAxiosInstance } from '@/apis/utils/index'
 import type { Notification } from '@/types/notification'
 import { NotificationType } from '@/types/notification'
+import type { EnrollRestockRequest } from '@/apis/notification/NotificationDto'
 import { EventSourcePolyfill } from 'event-source-polyfill'
 
 const BASE_URL = import.meta.env.VITE_API_BASE_URL
@@ -59,6 +60,18 @@ export const deleteAllNotifications = async (): Promise<void> => {
   await authAxiosInstance.delete(`${NOTIFICATION_PREFIX_PATH}${NOTIFICATION_DOMAIN_PREFIX_PATH}`)
 }
 
+// 재입고 알림 등록
+export const enrollRestockNotificaton = async (
+  enrollRestockRequest: EnrollRestockRequest
+): Promise<string> => {
+  const response = await authAxiosInstance.post<string>(
+    `${NOTIFICATION_PREFIX_PATH}${NOTIFICATION_DOMAIN_PREFIX_PATH}/restock/enroll`,
+    enrollRestockRequest
+  )
+  // 응답으로 return mongoDB string type id
+  return response.data
+}
+
 // 알림 구독
 export const subscribeToNotifications = (
   onMessage: (notification: Notification) => void,

src/apis/order/order.ts

@@ -85,11 +85,15 @@ export const order = async (orderSheet: OrderSheet): Promise<string> => {
   }
 }
 
-export const getOrders = async (page: number): Promise<OrderPageResponse<OrderResponse>> => {
+export const getOrders = async (
+  page: number,
+  type: string
+): Promise<OrderPageResponse<OrderResponse>> => {
   try {
     const { data } = await authAxiosInstance.get(`${ORDER_SERVICE_PREFIX_PATH}/orders`, {
       params: {
-        page: page
+        page: page,
+        type: type
       }
     })
     return data

src/components/order/OrderHistoryComponent.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onBeforeMount, ref, watch, watchEffect } from 'vue'
+import { onBeforeMount, ref, watch } from 'vue'
 import { getOrders } from '@/apis/order/order'
 import type { OrderResponse } from '@/apis/order/orderDto'
 import PaginationComponent from '../ootd/PaginationComponent.vue'
@@ -17,12 +17,12 @@ const orderNo = ref<string>('')
 const showModal = ref<boolean>(false)
 
 const defaultOption = ref({
-  value: 'NORMAL',
+  value: 'SINGLE',
   label: '일반주문'
 })
 const options = ref<SelectProps['options']>([
   {
-    value: 'NORMAL',
+    value: 'SINGLE',
     label: '일반주문'
   },
   {
@@ -31,12 +31,14 @@ const options = ref<SelectProps['options']>([
   }
 ])
 
+const selectedOption = ref<string>('SINGLE')
+
 onBeforeMount(async () => {
-  await fetchDefaultData(0)
+  await fetchDefaultData(0, defaultOption.value.value)
 })
 
-const fetchDefaultData = async (requestPage: number): Promise<void> => {
-  const data = await getOrders(requestPage)
+const fetchDefaultData = async (requestPage: number, type: string): Promise<void> => {
+  const data = await getOrders(requestPage, type)
   orders.value = data.orders
   totalElements.value = data.totalElements
   totalPages.value = data.totalPages
@@ -57,15 +59,20 @@ const onChangePage = async (page: number) => {
   }
 }
 
-watchEffect(() => {
-  fetchDefaultData(requestPage.value), requestPage.value
+watch(requestPage, async (afterPage, beforePage) => {
+  if (afterPage < totalPages.value!) {
+    fetchDefaultData(requestPage.value, selectedOption.value), requestPage.value
+  }
 })
 
 // TODO: Select 옵션 변경 이벤트
-const handleSelectedOptionChange = (
+const handleSelectedOptionChange = async (
   value: SelectValue,
   option: DefaultOptionType | DefaultOptionType[]
-) => {}
+) => {
+  selectedOption.value = String(value)
+  await fetchDefaultData(0, selectedOption.value)
+}
 </script>
 <template>
   <div class="order-check-container">

src/views/ProductDetailView.vue

@@ -15,10 +15,12 @@ import { readWishListFromProduct, toggleWishList } from '@/apis/wishcart/WishLis
 import type { AxiosResponse } from 'axios'
 import TOP4OOTDComponent from '@/components/ootd/TOP4OOTDComponent.vue'
 import { Image, Select, SelectOption } from 'ant-design-vue'
-import { errorModal, infoModal, warningModal } from '@/utils/Modal'
+import { errorModal, infoModal, warningModal, confirmModal } from '@/utils/Modal'
 import { LOGIN_NEED_MSG } from '@/utils/CommonMessage'
 import { SizeOrder } from '@/types/enums/SizeOrder'
 import type { ProductStock } from '@/types/product/Product'
+import { enrollRestockNotificaton } from '@/apis/notification/notification'
+import type { EnrollRestockRequest } from '@/apis/notification/NotificationDto'
 
 const productStore = useProductStore()
 
@@ -233,7 +235,52 @@ const bestPromotionalPriceUpdatedHandler = (maxDiscount: number) => {
   }
 }
 
+/**
+ * 재입고 알림신청 관련
+ */
+const enrollRestockNotificationHandler = async () => {
+  if (!localStorage.getItem('accessToken')) {
+    infoModal('알림', LOGIN_NEED_MSG)
+    return
+  }
+
+  if (selectedProductSize.value.quantity) {
+    infoModal(
+      '알림',
+      '재고가 없는 사이즈의 알림 신청만 가능합니다. \n 재입고 알림을 받고싶은 사이즈 선택 후 눌러주세요.'
+    )
+    return
+  }
+
+  if (selectedProductSize.value.productSizeId <= 0) {
+    warningModal('알림', '옵션을 지정해주세요.')
+    return
+  }
+
+  const confirmed = await confirmModal(
+    '재입고 알림 신청',
+    `해당 상품 ${selectedProductSize.value.productSizeName}사이즈의 재입고 알림을 신청하시겠습니까?`
+  )
+
+  if (confirmed) {
+    await postEnrollRestockNotificaton()
+  }
+}
+
+const postEnrollRestockNotificaton = async () => {
+  const enrollRestockRequest: EnrollRestockRequest = {
+    productId: productId.value,
+    sizeId: selectedProductSize.value.productSizeId
+  }
+
+  const restockId = await enrollRestockNotificaton(enrollRestockRequest)
+  if (restockId) {
+    infoModal('알림', '상품 재입고시, 신속하게 알려드리겠습니다.') // 이미 재입고 신청 취소도 가능해야하는지?
+  }
+}
+
 const getOrder = (size: string): number => {
+  // 상품 option 순서 맞추기
   const defaultOrder = 1000
   const normalizedSize = size.charAt(0).toUpperCase() + size.slice(1).toLowerCase()
 
@@ -255,6 +302,7 @@ const getOrder = (size: string): number => {
 }
 
 const sortedProductStocks = computed(() => {
+  // computed로 사이즈끼리의 순서 맞춘걸 가짐
   return product.value.productStocks.slice().sort((a: ProductStock, b: ProductStock) => {
     const orderA = getOrder(a.productSizeName)
     const orderB = getOrder(b.productSizeName)
@@ -441,7 +489,7 @@ watch(selectedProductSize, () => {
           </div>
 
           <div class="buttons-wrapper">
-            <div class="bell-box">
+            <div class="bell-box" @click="enrollRestockNotificationHandler">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 width="60"