refac: 유니크 경매 UI 수정

hwe/ts/components/AuctionUniqueItem.vue

@@ -1,61 +1,121 @@
 <template>
   <div class="bg0">
-    <div class="bg2">유니크 경매장</div>
-    <div>내 가명: {{ obfuscatedName }}</div>
+    <div>
+      내 가명: <span class="isMe">{{ obfuscatedName }}</span>
+    </div>
     <template v-if="currentAuction !== undefined">
-      <div class="bg1">상세</div>
-      <div class="row gx-0">
-        <div class="col-4 col-md-2 bg2">경매 번호</div>
-        <div class="col-4 col-md-2">{{ currentAuction.auction.id }}</div>
-
-        <div class="col-4 col-md-2 bg2">경매명</div>
+      <div class="bg2">경매 {{ currentAuction.auction.id }}번 상세</div>
+      <div class="row gx-0 text-center">
+        <div class="col-2 col-md-1 bg1">경매명</div>
         <div class="col-4 col-md-2">{{ currentAuction.auction.title }}</div>
 
-        <div class="col-4 col-md-2 bg2">주최자(익명)</div>
-        <div class="col-4 col-md-2">{{ currentAuction.auction.hostName }}</div>
+        <div class="col-2 col-md-1 bg1">주최자(익명)</div>
+        <div :class="['col-4 col-md-2', currentAuction.auction.isCallerHost ? 'isMe' : '']">
+          {{ currentAuction.auction.hostName }}
+        </div>
 
-        <div class="col-4 col-md-2 bg2">종료시점</div>
-        <div class="col-4 col-md-2">{{ currentAuction.auction.closeDate }}</div>
+        <div class="col-2 col-md-1 bg1">종료일시</div>
+        <div class="col-4 col-md-2 f_tnum">{{ cutDateTime(currentAuction.auction.closeDate, true) }}</div>
 
-        <div class="col-4 col-md-2 bg2">최대지연</div>
-        <div class="col-4 col-md-2">{{ currentAuction.auction.availableLatestBidCloseDate }}</div>
+        <div class="col-2 col-md-1 bg1">최대지연</div>
+        <div class="col-4 col-md-2 f_tnum">
+          {{ cutDateTime(currentAuction.auction.availableLatestBidCloseDate, true) }}
+        </div>
       </div>
       <div class="bg1">입찰자 목록</div>
-      <div class="row gx-0 bg2">
-        <div class="col-4">입찰자</div>
-        <div class="col-4">입찰포인트</div>
-        <div class="col-4">시각</div>
+      <div
+        class="row gx-0 px-md-5 text-center"
+        :style="{
+          borderBottom: 'solid 1px white',
+        }"
+      >
+        <div class="col-4 offset-md-2 col-md-3">입찰자</div>
+        <div class="col-4 col-md-2 text-end px-5">입찰포인트</div>
+        <div class="col-4 col-md-3">시각</div>
       </div>
-      <div v-for="bidder of currentAuction.bidList" :key="bidder.amount" class="row gx-0">
-        <div class="col-4">{{ bidder.generalName }}</div>
-        <div class="col-4">{{ bidder.amount }}</div>
-        <div class="col-4">{{ bidder.date }}</div>
+      <div v-for="bidder of currentAuction.bidList" :key="bidder.amount" class="row gx-0 px-md-5 text-center">
+        <div :class="['col-4 offset-md-2 col-md-3', bidder.isCallerHighestBidder ? 'isMe' : '']">{{ bidder.generalName }}</div>
+        <div class="col-4 col-md-2 text-end px-5 f_tnum">{{ bidder.amount.toLocaleString() }}</div>
+        <div class="col-4 col-md-3 f_tnum">{{ cutDateTime(bidder.date) }}</div>
       </div>
       <div class="bg1">입찰하기</div>
       <div class="row">
-        <div class="col">
+        <label class="col-5 offset-md-3 col-md-3 col-form-label text-center">유산포인트 (잔여: {{ currentAuction.remainPoint.toLocaleString() }}포인트)</label>
+        <div class="col-4 col-md-2">
           <NumberInputWithInfo
             v-model="bidAmount"
             :int="true"
             :min="currentAuction.bidList[0].amount"
-            title="유산포인트"
+            :max="currentAuction.remainPoint"
+            title=""
             :step="1"
           ></NumberInputWithInfo>
         </div>
-        <div class="col"><BButton @click="bidAuction">입찰</BButton></div>
+        <div class="col-3 col-md-1 d-grid"><BButton @click="bidAuction">입찰</BButton></div>
       </div>
     </template>
 
-    <div class="bg1">목록</div>
-    <div v-for="[auctionID, auction] of auctionList" :key="auctionID" class="row" @click="currentAuctionID = auctionID">
-      <div class="col">{{ auction.id }}</div>
-      <div class="col">{{ auction.finished ? "종료됨" : "진행중" }}</div>
-      <div class="col">{{ auction.title }}</div>
-      <div class="col">{{ auction.hostName }}</div>
-      <div class="col">{{ auction.closeDate }}</div>
-      <div class="col">{{ auction.remainCloseDateExtensionCnt > 0 ? "남음" : "소진" }}</div>
-      <div class="col">{{ auction.highestBid.generalName }}</div>
-      <div class="col">{{ auction.highestBid.amount }}</div>
+    <div class="bg1">진행중인 경매 목록</div>
+    <div
+      class="row gx-0 text-center"
+      :style="{
+        borderBottom: 'solid 1px white',
+      }"
+    >
+      <div class="col-1">번호</div>
+      <div class="col-4">경매명</div>
+      <div class="col-1">주최자</div>
+      <div class="col-2">종료일시</div>
+      <div class="col-1">연장</div>
+      <div class="col-1">1순위</div>
+      <div class="col-2 text-end px-2">포인트</div>
+    </div>
+    <div
+      v-for="[auctionID, auction] of ongoingAuctionList"
+      :key="auctionID"
+      class="row gx-0 text-center clickableRow"
+      @click="currentAuctionID = auctionID"
+    >
+      <div class="col-1">{{ auction.id }}</div>
+      <div class="col-4">{{ auction.title }}</div>
+      <div :class="['col-1', auction.isCallerHost ? 'isMe' : '']">{{ auction.hostName }}</div>
+      <div class="col-2 f_tnum">{{ cutDateTime(auction.closeDate) }}</div>
+      <div class="col-1">{{ auction.remainCloseDateExtensionCnt > 0 ? "남음" : "소진" }}</div>
+      <div :class="['col-1', auction.highestBid.isCallerHighestBidder ? 'isMe' : '']">
+        {{ auction.highestBid.generalName }}
+      </div>
+      <div class="col-2 text-end px-2 f_tnum">{{ auction.highestBid.amount.toLocaleString() }}</div>
+    </div>
+    <div class="bg1">종료된 경매 목록</div>
+    <div
+      class="row gx-0 text-center"
+      :style="{
+        borderBottom: 'solid 1px white',
+      }"
+    >
+      <div class="col-1">번호</div>
+      <div class="col-4">경매명</div>
+      <div class="col-1">주최자</div>
+      <div class="col-2">종료일시</div>
+      <div class="col-1">연장</div>
+      <div class="col-1">1순위</div>
+      <div class="col-2 text-end px-2">포인트</div>
+    </div>
+    <div
+      v-for="[auctionID, auction] of finishedAuctionList"
+      :key="auctionID"
+      class="row gx-0 text-center clickableRow"
+      @click="currentAuctionID = auctionID"
+    >
+      <div class="col-1">{{ auction.id }}</div>
+      <div class="col-4">{{ auction.title }}</div>
+      <div :class="['col-1', auction.isCallerHost ? 'isMe' : '']">{{ auction.hostName }}</div>
+      <div class="col-2 f_tnum">{{ cutDateTime(auction.closeDate) }}</div>
+      <div class="col-1">{{ auction.remainCloseDateExtensionCnt > 0 ? "남음" : "소진" }}</div>
+      <div :class="['col-1', auction.highestBid.isCallerHighestBidder ? 'isMe' : '']">
+        {{ auction.highestBid.generalName }}
+      </div>
+      <div class="col-2 text-end px-2 f_tnum">{{ auction.highestBid.amount.toLocaleString() }}</div>
     </div>
   </div>
 </template>
@@ -95,19 +155,35 @@ async function refreshDetail() {
 watch(currentAuctionID, () => {
   void refreshDetail();
 });
-const auctionList = ref(new Map<number, AuctionItemInfo>());
+const ongoingAuctionList = ref(new Map<number, AuctionItemInfo>());
+const finishedAuctionList = ref(new Map<number, AuctionItemInfo>());
 const obfuscatedName = ref("");
 
 const toasts = unwrap(useToast());
 
+function cutDateTime(dateTime: string, showSecond = false) {
+  if (showSecond) {
+    return dateTime.substring(5, 19);
+  }
+  return dateTime.substring(5, 16);
+}
+
 async function refreshList() {
   try {
     const result = await SammoAPI.Auction.GetUniqueItemAuctionList();
     obfuscatedName.value = result.obfuscatedName;
-    auctionList.value = new Map(result.list.map((auction) => [auction.id, auction]));
-    if (currentAuctionID.value === undefined && result.list.length > 0) {
-      currentAuctionID.value = result.list[0].id;
-      bidAmount.value = result.list[0].highestBid.amount;
+    finishedAuctionList.value = new Map(
+      result.list.filter((auction) => auction.finished).map((auction) => [auction.id, auction])
+    );
+    ongoingAuctionList.value = new Map(
+      result.list.filter((auction) => !auction.finished).map((auction) => [auction.id, auction])
+    );
+    if (currentAuctionID.value === undefined && ongoingAuctionList.value.size > 0) {
+      const auctionIterator = ongoingAuctionList.value.values().next();
+      if (!auctionIterator.done) {
+        currentAuctionID.value = auctionIterator.value.id;
+        bidAmount.value = auctionIterator.value.highestBid.amount;
+      }
     }
   } catch (e) {
     console.error(e);
@@ -148,19 +224,31 @@ async function bidAuction() {
   }
 }
 
-async function refresh(){
-  const waiters = [
-    refreshList(),
-    refreshDetail(),
-  ];
+async function refresh() {
+  const waiters = [refreshList(), refreshDetail()];
   await Promise.all(waiters);
 }
 
 defineExpose({
-  refresh
-})
+  refresh,
+});
 
 onMounted(() => {
   void refreshList();
 });
 </script>
+
+<style>
+.isMe {
+  font-weight: bold;
+  color: aquamarine;
+}
+
+.clickableRow{
+  cursor: pointer;
+}
+
+.clickableRow:hover{
+  background-color: rgba(255, 255, 255, 0.3);
+}
+</style>

hwe/ts/components/NumberInputWithInfo.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="row form-group number-input-with-info">
-    <label v-if="!right" class="col-6 col-form-label">{{ title }}</label>
-    <div class="col-6">
+    <label v-if="!right && title" class="col col-form-label">{{ title }}</label>
+    <div class="col">
       <input
         ref="input"
         v-model="rawValue"
@@ -23,7 +23,7 @@
         @focus="onFocusText"
       />
     </div>
-    <label v-if="right" class="col-6 col-form-label">{{ title }}</label>
+    <label v-if="right && title" class="col col-form-label">{{ title }}</label>
   </div>
   <div style="text-align: right">
     <small class="form-text text-muted"><slot /></small>