Develop

src/apis/order/order.ts

@@ -124,6 +124,27 @@ export const getOrderDetails = async (orderNo: String): Promise<OrderDetailRespo
   }
 }
 
+export const cancelOrderDetail = async (orderDetailNo: String) => {
+  try {
+    const response = await authAxiosInstance.delete(
+      `${ORDER_SERVICE_PREFIX_PATH}/orders/order-details/${orderDetailNo}`
+    )
+  } catch (error) {
+    if (error instanceof AxiosError) {
+      if (error.response) {
+        if (error.response.status >= 400) {
+          alert(error.response.data.message)
+          console.error(`Client Error=${error.response.data.message}`)
+        } else if (error.response.status < 500) {
+          alert('서버 내부 오류')
+          console.error('Internal Server Error')
+        }
+      }
+    }
+    throw error
+  }
+}
+
 export const gifts = async (giftInfo: GiftInfo): Promise<string> => {
   try {
     const { data } = await authAxiosInstance.post(`${ORDER_SERVICE_PREFIX_PATH}/gifts`, giftInfo)

src/apis/product/ProductClient.ts

@@ -1,7 +1,7 @@
 import type { AxiosResponse } from 'axios'
 import { AxiosError } from 'axios'
 import { defaultAxiosInstance } from '@/apis/utils'
-import type { ReadProductDetailResponse } from './ProductDto'
+import type { ReadProductDetailResponse, ReadProductSliceResponse } from './ProductDto'
 
 const PRODUCT_SERVICE_PREFIX: string = '/product-service'
 const PRODUCT_PREFIX: string = '/products'
@@ -43,3 +43,31 @@ export const getProductDetail = async (productId: number): Promise<ReadProductDe
     throw error
   }
 }
+
+export const searchProduct = async (
+  lastId: number,
+  query: string | null
+): Promise<ReadProductSliceResponse> => {
+  try {
+    const { data } = await defaultAxiosInstance.get(
+      `${PRODUCT_SERVICE_PREFIX}${PRODUCT_PREFIX}/search`,
+      {
+        params: { lastId: lastId, query: query }
+      }
+    )
+    return data
+  } catch (error) {
+    if (error instanceof AxiosError) {
+      if (error.response) {
+        if (error.response.status >= 400) {
+          alert(error.response.data.message)
+          console.error(`Client Error=${error.response.data.message}`)
+        } else if (error.response.status < 500) {
+          alert('서버 내부 오류')
+          console.error('Internal Server Error')
+        }
+      }
+    }
+    throw error
+  }
+}

src/assets/css/cart.css

@@ -25,6 +25,14 @@
     border-bottom: 1px solid #202027;
 }
 
+.cart-table-data2 {
+    cursor: pointer;
+}
+
+.cart-table-data2:hover {
+    background-color: rgba(0, 0, 0, 0.1);
+}
+
 .cart-table-data2 > td {
     color: var(--Grayscale7, #202027);
     font-family: TheJamsil;
@@ -88,6 +96,8 @@
 .basket-img {
     flex-shrink: 0;
     margin: 20px 0;
+    width: 100px;
+    height: 100px;
 }
 
 .basket-column {

src/assets/css/order/order-detail.css

@@ -143,6 +143,20 @@
   cursor: pointer;
 }
 
+.gray-button,
+.gray-cancel-button {
+  width: 100%;
+  height: 40px;
+  border: none;
+  border-radius: 2.5px;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: normal;
+  color: #fff;
+  background-color: gray;
+  cursor: default;
+}
+
 /* ant */
 .ant-rate {
   color: var(--Grayscale7, #000);

src/assets/css/wish.css

@@ -55,6 +55,14 @@
     padding-bottom: 10px;
 }
 
+.wish-table-data2 {
+    cursor: pointer;
+}
+
+.wish-table-data2:hover {
+    background-color: rgba(0, 0, 0, 0.1);
+}
+
 .wish-table-data2 > td {
     color: var(--Grayscale7, #202027);
     font-family: TheJamsil;
@@ -67,6 +75,8 @@
 .basket-img {
     flex-shrink: 0;
     margin: 20px 0;
+    width: 100px;
+    height: 100px;
 }
 
 .basket-column {

src/components/HeaderComponent.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
 import { RouterLink } from 'vue-router'
-import { onBeforeMount, onMounted, onBeforeUnmount, ref, computed, watch } from 'vue'
+import { computed, onBeforeMount, onBeforeUnmount, ref, watch } from 'vue'
 import HeaderCategoryComponent from '@/components/HeaderCategoryComponent.vue'
 import NotificationComponent from '@/components/notification/NotificationComponent.vue'
 import { useMemberStore } from '@/stores/member/MemberStore'
 import { useCategoryStore } from '@/stores/category/CategoryStore'
 import { useNotificationStore } from '@/stores/notification/NotificationStore'
+import router from '@/router'
 
 const VITE_STATIC_IMG_URL = ref<string>(import.meta.env.VITE_STATIC_IMG_URL)
 
@@ -49,6 +50,12 @@ const showCategoryDropdown = ref<boolean>(true)
 const memberStore = useMemberStore()
 const memberInfo = computed(() => memberStore.getMemberInfo())
 
+const searchQuery = ref<string | null>(null)
+
+const routeSearch = () => {
+  router.push({ name: 'productSearch', query: { query: searchQuery.value } })
+}
+
 const categoryStore = useCategoryStore()
 
 onBeforeMount(() => {
@@ -67,9 +74,14 @@ onBeforeMount(() => {
     </RouterLink>
     <div class="search-wrapper">
       <div class="search-input-wrapper">
-        <input class="search-input" placeholder="통합 검색" />
+        <input
+          class="search-input"
+          placeholder="통합 검색"
+          v-model="searchQuery"
+          @keyup.enter="routeSearch"
+        />
       </div>
-      <div class="search-logo-wrapper">
+      <div class="search-logo-wrapper" @click="routeSearch">
         <svg
           class="search-logo"
           xmlns="http://www.w3.org/2000/svg"
@@ -87,20 +99,20 @@ onBeforeMount(() => {
     </div>
     <div class="auth-wrapper">
       <RouterLink v-if="!isLoggedIn()" to="/login" class="login-text">Login</RouterLink>
- <div v-else class="profile-wrapper">
-          <RouterLink to="/member-info" class="profile-link">
-            <img
-              v-if="`${VITE_STATIC_IMG_URL}${memberInfo.profileImgUrl}`"
-              :src="`${VITE_STATIC_IMG_URL}${memberInfo.profileImgUrl}`"
-              alt="Profile Image"
-              class="profile-image"
-            />
-            <div class="profile-text">
-              <span v-if="memberInfo.nickname" class="nickname">{{ memberInfo.nickname }}님</span>
-              <span class="welcome">환영합니다!</span>
-            </div>
-          </RouterLink>
-        </div>
+      <div v-else class="profile-wrapper">
+        <RouterLink to="/member-info" class="profile-link">
+          <img
+            v-if="`${VITE_STATIC_IMG_URL}${memberInfo.profileImgUrl}`"
+            :src="`${VITE_STATIC_IMG_URL}${memberInfo.profileImgUrl}`"
+            alt="Profile Image"
+            class="profile-image"
+          />
+          <div class="profile-text">
+            <span v-if="memberInfo.nickname" class="nickname">{{ memberInfo.nickname }}님</span>
+            <span class="welcome">환영합니다!</span>
+          </div>
+        </RouterLink>
+      </div>
     </div>
   </div>
   <div class="header-divide-line-wrapper">
@@ -130,26 +142,26 @@ onBeforeMount(() => {
     </div>
     <div class="nav-tab-wrapper">
       <RouterLink to="/luxury" class="nav-tab-text" :class="{ selected: $route.path === '/luxury' }"
-        >LUXURY</RouterLink
-      >
+        >LUXURY
+      </RouterLink>
     </div>
     <div class="nav-tab-wrapper">
       <RouterLink
         to="/fashions"
         class="nav-tab-text"
         :class="{ selected: $route.path === '/fashions' }"
-        >FASHION</RouterLink
-      >
+        >FASHION
+      </RouterLink>
     </div>
     <div class="nav-tab-wrapper">
       <RouterLink to="/ootds" class="nav-tab-text" :class="{ selected: $route.path === '/ootds' }"
-        >OOTD</RouterLink
-      >
+        >OOTD
+      </RouterLink>
     </div>
     <div class="nav-tab-wrapper">
       <RouterLink to="/events" class="nav-tab-text" :class="{ selected: $route.path === '/events' }"
-        >EVENT</RouterLink
-      >
+        >EVENT
+      </RouterLink>
     </div>
     <div class="nav-tab-wrapper">
       <NotificationComponent v-show="showNotificationDropdown" />
@@ -218,4 +230,4 @@ onBeforeMount(() => {
 
 <style scoped>
 @import '@/assets/header.css';
-</style>
+</style>

src/components/order/OrderHistoryComponent.vue

@@ -77,7 +77,7 @@ watchEffect(() => {
     <div v-if="showModal" class="modal" @click="closeModal">
       <div class="modal-content" @click.stop>
         <span class="close" @click="closeModal">&times;</span>
-        <OrderDetailComponent :orderNo="orderNo" />
+        <OrderDetailComponent :orderNo="orderNo" @closeModal="closeModal" />
       </div>
     </div>
     <PaginationComponent

src/components/order/orderDetail/OrderDetailComponent.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { ref, onBeforeMount } from 'vue'
+import { ref, onBeforeMount, defineEmits } from 'vue'
 import { storeToRefs } from 'pinia'
-import { getOrderDetails } from '@/apis/order/order'
+import { getOrderDetails, cancelOrderDetail } from '@/apis/order/order'
 import { createReview } from '@/apis/review/review'
 import { uploadImageToS3 } from '@/apis/s3/S3Client'
 import { PlusOutlined } from '@ant-design/icons-vue'
@@ -12,7 +12,7 @@ import type { ReviewCreateRequest } from '@/apis/review/reviewDto'
 import type { UploadProps, UploadChangeParam, UploadFile } from 'ant-design-vue'
 const { nickname, profileImgUrl } = storeToRefs(useMemberStore())
 const orderDetails = ref<Array<OrderDetailResponse>>([])
-
+const emits = defineEmits(['closeModal'])
 const VITE_STATIC_IMG_URL = ref<string>(import.meta.env.VITE_STATIC_IMG_URL)
 const props = defineProps({
   orderNo: {
@@ -124,6 +124,15 @@ const beforeUpload = (file: UploadFile) => {
   }
   return false
 }
+
+const cancel = async (orderDetailNo: string) => {
+  if (confirm('정말로 취소하시겠습니까?')) {
+    await cancelOrderDetail(orderDetailNo)
+    alert('취소 요청이 접수되었습니다.')
+    emits('closeModal')
+    return
+  }
+}
 </script>
 <template v-if="orderDetails.length">
   <div v-for="(orderDetail, index) in orderDetails" :key="index" class="order-detail-container">
@@ -151,7 +160,7 @@ const beforeUpload = (file: UploadFile) => {
     <div class="right-section">
       <div v-if="orderDetail.reviewCheck === false">
         <div class="right-section-buttons">
-          <div class="right-inner-button">
+          <div v-if="orderDetail.status !== '취소완료'" class="right-inner-button">
             <button class="black-button" @click="showModal(index)">리뷰 쓰기</button>
           </div>
         </div>
@@ -166,7 +175,18 @@ const beforeUpload = (file: UploadFile) => {
       <div v-if="orderDetail.status == '배송전'">
         <div class="right-section-buttons">
           <div class="right-inner-button">
-            <button class="white-button">주문 취소</button>
+            <button class="white-button" @click="cancel(orderDetail.orderDetailNo)">
+              주문 취소
+            </button>
+          </div>
+        </div>
+      </div>
+      <div v-if="orderDetail.status == '취소완료'">
+        <div class="right-section-buttons">
+          <div class="right-inner-button">
+            <button class="gray-cancel-button" disabled>
+              {{ orderDetail.status }}
+            </button>
           </div>
         </div>
       </div>

src/components/promotion/coupon/checkout/CheckoutCouponModal.vue

@@ -118,7 +118,7 @@ const applyCouponDatas = () => {
     let discount = 0
 
     if (item.couponInfoId !== null && item.discountValue !== null) {
-      const totalPrice = item.orderPrice * item.quantity
+      const totalPrice = item.orderPrice
 
       if (item.discountType === 'PERCENTAGE') {
         discount = totalPrice * (item.discountValue / 100)

src/components/promotion/coupon/checkout/OrderItem.vue

@@ -3,7 +3,7 @@
     <div class="order-item">
       <div class="product-name-block">
         <div class="image-container">
-          <img :src="orderItem.imgUrl as string" alt="상품이미지" />
+          <img :src="`${VITE_STATIC_IMG_URL}${orderItem.imgUrl}`" alt="상품이미지" />
         </div>
         <div class="product-name">{{ orderItem.productName }}</div>
       </div>
@@ -88,6 +88,8 @@ import type {
 import type { OrderItemDto } from '@/types/coupon'
 import type { ProductInfo } from '@/apis/product/ProductDto'
 
+const VITE_STATIC_IMG_URL = ref<string>(import.meta.env.VITE_STATIC_IMG_URL)
+
 const emit = defineEmits<{
   // (event: 'apply-coupon', orderItemIndex: number, couponInfoId: number | null): void
   (

src/components/wishcart/CartComponent.vue

@@ -212,7 +212,12 @@ const routeOrderSheet = () => {
         <td class="center-text">상품 가격</td>
         <td class="center-text">총금액</td>
       </tr>
-      <tr v-for="(cartItem, idx) in cartItems" :key="idx" class="cart-table-data2">
+      <tr
+        v-for="(cartItem, idx) in cartItems"
+        :key="idx"
+        class="cart-table-data2"
+        @click="router.push(`/products/${cartItem.productId}`)"
+      >
         <td class="left-margin">
           <div class="align-center">
             <input
@@ -345,4 +350,4 @@ const routeOrderSheet = () => {
 
 <style scoped>
 @import '@/assets/css/cart.css';
-</style>
+</style>