대회 문제 풀이 페이지 내 남은 시간 표시하도록 수정 및 문제 풀이 결과 목록 표시 및 바로 이동 가능하도록 개선

Author: Neibce

frontend/src/pages/oj/components/NavBar.vue

@@ -182,15 +182,58 @@ export default {
       this._menuEl = menuEl
       this._onMenuOver = this.handleMenuMouseOver.bind(this)
       this._onMenuLeave = this.handleMenuMouseLeave.bind(this)
-      this._onWindowResize = () => this.moveIndicatorToActive()
+      this._onWindowResize = () => this.scheduleIndicatorUpdate()
+      this._onWindowLoad = () => this.scheduleIndicatorUpdate()
       menuEl.addEventListener("mouseover", this._onMenuOver)
       menuEl.addEventListener("mouseleave", this._onMenuLeave)
       window.addEventListener("resize", this._onWindowResize)
-      this.moveIndicatorToActive()
-      requestAnimationFrame(() => {
+      window.addEventListener("load", this._onWindowLoad)
+      this.observeIndicatorLayout(menuEl)
+      this.scheduleIndicatorUpdate()
+      this.showIndicatorWhenLayoutReady()
+    },
+    observeIndicatorLayout(menuEl) {
+      if (window.ResizeObserver) {
+        this._indicatorResizeObserver = new ResizeObserver(() => {
+          this.scheduleIndicatorUpdate()
+        })
+        this._indicatorResizeObserver.observe(menuEl)
+        this._indicatorResizeObserver.observe(this.$el)
+      }
+
+      this._indicatorImages = Array.prototype.slice.call(
+        menuEl.querySelectorAll("img"),
+      )
+      this._onIndicatorAssetLoad = () => this.scheduleIndicatorUpdate()
+      this._indicatorImages.forEach((img) => {
+        if (img.complete) return
+        img.addEventListener("load", this._onIndicatorAssetLoad)
+        img.addEventListener("error", this._onIndicatorAssetLoad)
+      })
+    },
+    showIndicatorWhenLayoutReady() {
+      const showIndicator = () => {
+        this.scheduleIndicatorUpdate()
         requestAnimationFrame(() => {
-          this.indicatorReady = true
+          requestAnimationFrame(() => {
+            if (this._menuEl) this.indicatorReady = true
+          })
         })
+      }
+
+      if (document.fonts && document.fonts.ready) {
+        document.fonts.ready.then(showIndicator)
+      } else {
+        showIndicator()
+      }
+    },
+    scheduleIndicatorUpdate() {
+      if (this._indicatorFrame) {
+        cancelAnimationFrame(this._indicatorFrame)
+      }
+      this._indicatorFrame = requestAnimationFrame(() => {
+        this._indicatorFrame = null
+        this.moveIndicatorToActive()
       })
     },
     teardownIndicator() {
@@ -201,10 +244,30 @@ export default {
       if (this._onWindowResize) {
         window.removeEventListener("resize", this._onWindowResize)
       }
+      if (this._onWindowLoad) {
+        window.removeEventListener("load", this._onWindowLoad)
+      }
+      if (this._indicatorResizeObserver) {
+        this._indicatorResizeObserver.disconnect()
+      }
+      if (this._indicatorImages && this._onIndicatorAssetLoad) {
+        this._indicatorImages.forEach((img) => {
+          img.removeEventListener("load", this._onIndicatorAssetLoad)
+          img.removeEventListener("error", this._onIndicatorAssetLoad)
+        })
+      }
+      if (this._indicatorFrame) {
+        cancelAnimationFrame(this._indicatorFrame)
+      }
       this._menuEl = null
       this._onMenuOver = null
       this._onMenuLeave = null
       this._onWindowResize = null
+      this._onWindowLoad = null
+      this._indicatorResizeObserver = null
+      this._indicatorImages = null
+      this._onIndicatorAssetLoad = null
+      this._indicatorFrame = null
     },
     handleMenuMouseOver(e) {
       if (!this._menuEl) return
@@ -267,7 +330,7 @@ export default {
   },
   watch: {
     activeMenu() {
-      this.$nextTick(() => this.moveIndicatorToActive())
+      this.$nextTick(() => this.scheduleIndicatorUpdate())
     },
   },
 }

frontend/src/pages/oj/views/contest/children/Overview.vue

@@ -3,9 +3,15 @@
     <div class="contestTitle">
       <p>{{ contest.title }}</p>
       <div slot="extra" style="flex-shrink: 0">
-        <Tag type="dot" :color="countdownColor">
-          <span id="countdown">{{ countdown }}</span>
-        </Tag>
+        <div class="contest-timer" :class="'contest-timer--' + (countdownParts ? countdownParts.status : 'ended')" v-if="countdown">
+          <template v-if="countdownParts && countdownParts.status !== 'ended'">
+            <span class="contest-timer__label">{{ countdownParts.status === 'running' ? '남은 시간' : '시작까지' }}</span>
+            <span class="contest-timer__text">{{ formattedTime }}</span>
+          </template>
+          <template v-else>
+            <span class="contest-timer__label">대회 종료</span>
+          </template>
+        </div>
       </div>
     </div>
     <div class="contestContent">
@@ -80,12 +86,25 @@ export default {
     ...mapState({
       contest: (state) => state.contest.contest,
     }),
-    ...mapGetters(["contestStatus", "countdown", "passwordFormVisible"]),
+    ...mapGetters(["contestStatus", "countdown", "countdownParts", "passwordFormVisible"]),
     countdownColor() {
       if (this.contestStatus) {
         return CONTEST_STATUS_REVERSE[this.contestStatus].color
       }
     },
+    formattedTime() {
+      if (!this.countdownParts || this.countdownParts.status === 'ended') {
+        return ''
+      }
+      const pad = (num) => String(num).padStart(2, '0')
+      const { days, hours, minutes, seconds } = this.countdownParts
+      
+      let timeStr = `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`
+      if (days > 0) {
+        timeStr = `${days}일 ${timeStr}`
+      }
+      return timeStr
+    },
   },
 }
 </script>
@@ -136,4 +155,28 @@ export default {
     padding: 2px 7px;
   }
 }
+
+/* ── Contest Timer ── */
+.contest-timer {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 16px;
+  color: var(--text-color);
+}
+
+.contest-timer__label {
+  font-weight: 500;
+  color: #64748b;
+}
+
+.contest-timer__text {
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  color: var(--text-color);
+}
+
+:root.dark .contest-timer__label {
+  color: #94a3b8;
+}
 </style>