[ISSUE-152] 관리자 주문 조회 라이센스 배경이미지 + 옵션 (#162)

* [hotfix] 상품 소개 관리 수정 오류 해결 * [BUGFIX] 라이센스 주문 배경 이미지 조회 * [FEAT] 주문 조회에서 옵션 보여주기 * delete log msg
Liberty52 · Dec 3, 2023 · f96fb90 · f96fb90
1 parent cfbe361
commit f96fb90
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 15 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/screen/orders/OrderDetail.css b/src/screen/orders/OrderDetail.css
@@ -8,14 +8,14 @@
   align-items: center;
   display: flex;
   color: gray;
-  margin-left: 2rem;
 }
 
 .grid {
   border-bottom: 1px solid #8a8a8a;
   height: 2.5rem;
   display: grid;
   grid-template-columns: 2fr 4fr;
+  padding: 0 2rem;
 }
 
 /*//////////*/
@@ -41,6 +41,15 @@
   border-bottom: 1.5px solid lightgray;
 }
 
+.Inquiry-Option-wrapper .options {
+  display: flex;
+}
+
+.Inquiry-Option-wrapper .options > div {
+  margin-right: 25px;
+  margin-bottom: 5px;
+}
+
 .Inquiry-Delivery-wrapper {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr 1fr;

diff --git a/src/screen/orders/OrderDetail.js b/src/screen/orders/OrderDetail.js
@@ -74,7 +74,7 @@ function OrderImage({ product }) {
       <h2>배경 이미지</h2>
       <div>
         <img
-          src={product.productUrl}
+          src={product.custom ? product.productUrl : product.licenseArtUrl}
           alt={product.name}
           onClick={() => window.open(product.productUrl, '_blank')}
         />
@@ -101,24 +101,40 @@ function OrderInquiry() {
     </div>
   );
 }
+
 function OrderInquiryDetail({ order }) {
   return (
     <>
       {order.products.map((product, index) => (
-        <div key={index}>
-          <div className='Inquiry-Delivery-wrapper'>
+        <>
+          <div key={`wrapper-${index}`} className='Inquiry-Delivery-wrapper'>
             <div>{product.name}</div>
             <div>{product.price}원</div>
             <div>{order.deliveryFee}원</div>
             <div>{product.quantity}</div>
             <div>{product.price * product.quantity}원</div>
           </div>
-          <OrderImage product={product} />
-        </div>
+          <OrderOptionInquiry key={`options-${index}`} options={product.options} />
+          <OrderImage key={`image-${index}`} product={product} />
+        </>
       ))}
     </>
   );
 }
+
+function OrderOptionInquiry({ options }) {
+  return (
+    <div className='Inquiry-Option-wrapper'>
+      <h2>옵션</h2>
+      <div className='options'>
+        {options.map((option, index) => {
+          return <div key={option}>{option}</div>;
+        })}
+      </div>
+    </div>
+  );
+}
+
 function OrderInquiryDelivery({ order }) {
   return (
     <div className='Inquiry-Delivery-small-wrapper'>
@@ -197,19 +213,23 @@ function OrderDestination({ order }) {
 function OrderDelivery({ order }) {
   return (
     <>
-      <div className="grid">
+      <div className='grid'>
         <div className='Order-common'>택배사 이름</div>
         <div className='Order-common'>{order.orderDelivery?.name}</div>
       </div>
-      <div className="grid">
+      <div className='grid'>
         <div className='Order-common'>운송장번호</div>
         <div className='Order-common'>{order.orderDelivery?.trackingNumber}</div>
       </div>
-      <Button 
+      <Button
         text='배송조회'
         onClick={() => {
-          const popup = window.open("about:blank", "배송조회", "width=500,height=700,top=100,left=100");
-          fetchRealTimeDeliveryInfo(order, popup)
+          const popup = window.open(
+            'about:blank',
+            '배송조회',
+            'width=500,height=700,top=100,left=100',
+          );
+          fetchRealTimeDeliveryInfo(order, popup);
         }}
       ></Button>
     </>
@@ -354,9 +374,7 @@ export default function OrderDetail() {
           <OrderInquiryDelivery2 order={order} />
           <OrderPerson order={order} />
           <OrderDestination order={order} />
-          {order.orderDelivery !== null ? (
-            <OrderDelivery order={order} />
-          ) : (<></>)}
+          {order.orderDelivery !== null ? <OrderDelivery order={order} /> : <></>}
           <OrderPayment order={order} />
           <ReOrderDetail />
         </div>