Merge pull request #269 from lotteon2/develop

Develop

src/apis/order/orderDto.ts

@@ -1,8 +1,12 @@
 export interface OrderResponse {
   orderNo: string
+  memberId: number
   productsName: string
+  usedPoints: number
+  totalCouponDiscountPrice: number
   totalAmount: number
   status: string
+  type: string
   createdAt: string
 }
 

src/assets/css/notification/notification-component.css

@@ -1,87 +1,88 @@
 .notification-dropdown {
-    position: absolute;
-    font-family: 'TheJamsil';
-    font-weight: 300;
-    top: 100%;
-    left: 0;
-    width: 17vw; /* 드롭다운의 너비 */
-    background-color: white; /* 배경색 */
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* 그림자 효과 */
-    border-radius: 5px; /* 둥근 모서리 */
-    z-index: 100; /* 다른 요소들 위에 나타나도록 z-index 설정 */
-    padding: 1rem; /* 여백 */
-    box-sizing: border-box;
+  position: absolute;
+  font-family: 'TheJamsil';
+  font-weight: 300;
+  top: 100%;
+  left: 0;
+  width: 17vw; /* 드롭다운의 너비 */
+  background-color: white; /* 배경색 */
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* 그림자 효과 */
+  border-radius: 5px; /* 둥근 모서리 */
+  z-index: 100; /* 다른 요소들 위에 나타나도록 z-index 설정 */
+  padding: 1rem; /* 여백 */
+  box-sizing: border-box;
 }
 
 .notification-list {
-    max-height: 400px;
-    overflow-y: auto; /* 내용이 많을 경우 스크롤 */
+  max-height: 400px;
+  overflow-y: auto; /* 내용이 많을 경우 스크롤 */
 }
 
 .notification-item {
-    padding: 0.5rem 0;
-    border-bottom: 1px solid #eee;
+  padding: 0.5rem 0;
+  border-bottom: 1px solid #eee;
 }
 
 .notification-message {
-    margin: 0.5rem 0;
+  margin: 0.5rem 0;
 }
 
 .notification-actions {
-    display: flex;
-    justify-content: flex-end; /* 오른쪽 정렬 */
-    gap: 0.5rem; /* 버튼 사이의 간격 */
+  display: flex;
+  justify-content: flex-end; /* 오른쪽 정렬 */
+  gap: 0.5rem; /* 버튼 사이의 간격 */
 }
 
 .notification-footer {
-    display: flex;
-    justify-content: flex-end; /* 오른쪽 정렬 */
-    margin-top: 1rem;
+  display: flex;
+  justify-content: flex-end; /* 오른쪽 정렬 */
+  margin-top: 1rem;
 }
 
 .notification-empty {
-    margin-top: 1vh;
-    text-align: center;
-    padding: 1rem;
+  font-family: 'TheJamsil';
+  margin-top: 1vh;
+  text-align: center;
+  padding: 1rem;
 }
 
 /* 재사용 가능한 버튼 스타일 */
 button {
-    cursor: pointer;
-    color: #c8c8c8;
-    font-family: 'TheJamsil';
-    font-weight: 300;
-    font-size: 1rem;
-    /* background-color: #000; */
-    background-color: #fff;
-    /* color: #fff; */
-    border: none;
-    padding: 0.5rem 0.5rem 0rem 0.5rem;
-    border-radius: 5px;
-    transition: background-color 0.2s;
+  cursor: pointer;
+  color: #c8c8c8;
+  font-family: 'TheJamsil';
+  font-weight: 300;
+  font-size: 1rem;
+  /* background-color: #000; */
+  background-color: #fff;
+  /* color: #fff; */
+  border: none;
+  padding: 0.5rem 0.5rem 0rem 0.5rem;
+  border-radius: 5px;
+  transition: background-color 0.2s;
 
-    &:hover {
-        /* background-color: #333; */
-    }
+  &:hover {
+    /* background-color: #333; */
+  }
 }
 
 .flex-row-space-btw {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 
 .notification-read {
-    color: #b7b7b7;
-    cursor: pointer;
+  color: #b7b7b7;
+  cursor: pointer;
 }
 
 .close {
-    color: #000;
-    cursor: pointer;
+  color: #000;
+  cursor: pointer;
 }
 
 .notification-unread {
-    color: #000;
-    cursor: pointer;
+  color: #000;
+  cursor: pointer;
 }

src/components/order/OrderComponent.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import OrderDetailComponent from '@/components/order/orderDetail/OrderDetailComponent.vue'
-import type { OrderDetailResponse } from '@/apis/order/orderDto'
+import type { OrderDetailResponse, OrderResponse } from '@/apis/order/orderDto'
 
 const emit = defineEmits(['showModal'])
 const props = defineProps({
@@ -14,8 +14,8 @@ const props = defineProps({
 
 const selectedRowIndex = ref<any>(null)
 
-const toggleCard = async (orderNo: string) => {
-  emit('showModal', orderNo)
+const toggleCard = async (order: OrderResponse) => {
+  emit('showModal', order)
 }
 </script>
 
@@ -24,7 +24,7 @@ const toggleCard = async (orderNo: string) => {
     <tr
       v-for="(order, index) in props.orders"
       :key="'row-' + index"
-      @click="toggleCard(order.orderNo)"
+      @click="toggleCard(order)"
       class="table-inner-header"
     >
       <td>{{ order.orderNo }}</td>
@@ -34,14 +34,6 @@ const toggleCard = async (orderNo: string) => {
       <td>{{ order.status }}</td>
       <td>{{ order.createdAt }}</td>
     </tr>
-
-    <!-- <tr v-if="selectedRowIndex === order.orderNo" :key="'card-' + index">
-      <td colspan="6">
-        <div class="order-history">
-          <OrderDetailComponent :orderNo="order.orderNo" />
-        </div>
-      </td>
-    </tr> -->
   </tbody>
 </template>
 

src/components/order/OrderHistoryComponent.vue

@@ -15,7 +15,7 @@ const totalPages = ref<number>()
 const orders = ref<Array<OrderResponse>>([])
 const orderNo = ref<string>('')
 const showModal = ref<boolean>(false)
-
+const type = ref('일반주문')
 const defaultOption = ref({
   value: 'SINGLE',
   label: '일반주문'
@@ -44,8 +44,9 @@ const fetchDefaultData = async (requestPage: number, type: string): Promise<void
   totalPages.value = data.totalPages
 }
 
-const open = async (index: string) => {
-  orderNo.value = index
+const open = async (order: OrderResponse) => {
+  orderNo.value = order.orderNo
+  type.value = order.type
   showModal.value = true
 }
 
@@ -105,7 +106,7 @@ const handleSelectedOptionChange = async (
           <OrderComponent
             v-if="orders.length !== 0"
             :orders="orders"
-            @showModal="(index) => open(index)"
+            @showModal="(order) => open(order)"
           />
           <td v-else colspan="5" style="width: 100%; text-align: center">
             <WhitePageComponent message="주문 내역이 없습니다" />
@@ -116,7 +117,7 @@ const handleSelectedOptionChange = async (
       <div v-if="showModal" class="modal" @click="closeModal">
         <div class="modal-content" @click.stop>
           <span class="close" @click="closeModal">&times;</span>
-          <OrderDetailComponent :orderNo="orderNo" @closeModal="closeModal" />
+          <OrderDetailComponent :orderNo="orderNo" :type="type" @closeModal="closeModal" />
         </div>
       </div>
       <PaginationComponent

src/components/order/orderDetail/OrderDetailComponent.vue

@@ -19,6 +19,10 @@ const props = defineProps({
   orderNo: {
     type: String,
     required: true
+  },
+  type: {
+    type: String,
+    required: true
   }
 })
 
@@ -163,7 +167,7 @@ const formatPrice = (price: number | null | undefined) => {
       </div>
       <div class="left-inner-empty"></div>
     </div>
-    <div class="right-section">
+    <div class="right-section" v-if="type !== '경매'">
       <div v-if="orderDetail.reviewCheck === false">
         <div class="right-section-buttons">
           <div v-if="orderDetail.status !== '취소완료'" class="right-inner-button">