[DESIGN] 시간 총량제 타이머 제목 추가 및 해상도 제한 변경

electron/main.ts

@@ -14,9 +14,9 @@ function createWindow() {
   // Set window specs
   const mainWindow = new BrowserWindow({
     width: 1280,
-    height: 1080,
+    height: 864,
     minWidth: 1280,
-    minHeight: 1080,
+    minHeight: 864,
     icon: path.join(__dirname, '../renderer/icon.ico'), // Set the window icon
     webPreferences: {
       preload: path.join(__dirname, '../preload/preload.js'), // Path of preload script

src/page/TimerPage/components/TimeBasedTimerTitle.tsx

@@ -0,0 +1,71 @@
+import React, { PropsWithChildren, useId } from 'react';
+
+interface TimeBasedTimerTitleProps extends PropsWithChildren {
+  width?: number;
+  height?: number;
+  className?: string;
+}
+
+export default function TimeBasedTimerTitle({
+  children,
+  width = 320,
+  height = 60,
+  className,
+}: TimeBasedTimerTitleProps) {
+  return (
+    <div
+      className={`relative inline-block ${className || ''}`}
+      style={{ width, height }}
+    >
+      <div className="absolute h-full w-full">
+        <SvgShape width={width} height={height} />
+      </div>
+
+      <div className="absolute left-0 top-0 flex h-full w-full items-center justify-center pl-4 pr-7">
+        {children}
+      </div>
+    </div>
+  );
+}
+
+const SvgShape: React.FC<{ width: number; height: number }> = ({
+  width,
+  height,
+}) => {
+  const id = useId();
+  const pathData = `
+    M0 4.875
+    C0 2.666, 1.791 0.875, 4 0.875 H${width - 4.131}
+    C${width - 0.811} 0.875, ${width + 1.064} 4.686, ${width - 0.962} 7.316
+    L${width - 17.231} 28.434 C${width - 18.339} 29.873, ${width - 18.339} 31.878, ${width - 17.231} 33.317
+    L${width - 0.962} 54.434 C${width + 1.064} 57.064, ${width - 0.811} 60.875, ${width - 4.131} 60.875
+    H4 C1.791 60.875, 0 59.085, 0 56.875 V4.875 Z
+  `;
+  const gradientId = `grad_${id}`;
+
+  return (
+    <svg
+      width="100%"
+      height="100%"
+      viewBox={`0 0 ${width} ${height}`}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d={pathData} fill={`url(#${gradientId})`} />
+      <defs>
+        <linearGradient
+          id={gradientId}
+          x1="0"
+          y1={height / 2}
+          x2={width}
+          y2={height / 2}
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#FFE7A8" />
+          <stop offset="0.322" stopColor="#FFDD85" />
+          <stop offset="1" stopColor="#FECD4C" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+};

src/page/TimerPage/components/TimerView.tsx

@@ -3,6 +3,7 @@ import { TimerPageLogics } from '../hooks/useTimerPageState';
 import NormalTimer from './NormalTimer';
 import TimeBasedTimer from './TimeBasedTimer';
 import { FaExchangeAlt } from 'react-icons/fa';
+import TimeBasedTimerTitle from './TimeBasedTimerTitle';
 
 export default function TimerView({ state }: { state: TimerPageLogics }) {
   const {
@@ -43,47 +44,56 @@ export default function TimerView({ state }: { state: TimerPageLogics }) {
   }
   if (data?.table[index]?.boxType === 'TIME_BASED') {
     return (
-      <div className="relative flex flex-row items-center justify-center space-x-[30px]">
-        {/* 왼쪽 타이머 */}
-        <TimeBasedTimer
-          timeBasedTimerInstance={{
-            totalTimer: timer1.totalTimer,
-            speakingTimer: timer1.speakingTimer,
-            isRunning: timer1.isRunning,
-            startTimer: timer1.startTimer,
-            pauseTimer: timer1.pauseTimer,
-            resetCurrentTimer: timer1.resetCurrentTimer,
-          }}
-          isSelected={prosConsSelected === 'PROS'}
-          onActivate={() => handleActivateTeam('PROS')}
-          prosCons="PROS"
-          teamName={data.info.prosTeamName}
-        />
-        {/* 오른쪽 타이머 */}
-        <TimeBasedTimer
-          timeBasedTimerInstance={{
-            totalTimer: timer2.totalTimer,
-            speakingTimer: timer2.speakingTimer,
-            isRunning: timer2.isRunning,
-            startTimer: timer2.startTimer,
-            pauseTimer: timer2.pauseTimer,
-            resetCurrentTimer: timer2.resetCurrentTimer,
-          }}
-          isSelected={prosConsSelected === 'CONS'}
-          onActivate={() => handleActivateTeam('CONS')}
-          prosCons="CONS"
-          teamName={data.info.consTeamName}
-        />
-        {/* ENTER 버튼 */}
-        <button
-          onClick={switchCamp}
-          className="absolute left-1/2 top-1/2 flex h-[78px] w-[78px] -translate-x-[70px] -translate-y-6 flex-col items-center justify-center rounded-full bg-neutral-600 text-white shadow-lg transition hover:bg-neutral-500 lg:h-[100px] lg:w-[100px] lg:-translate-x-20 lg:-translate-y-8"
-        >
-          <FaExchangeAlt className="text-[28px] lg:text-[36px]" />
-          <span className="text-[12px] font-semibold lg:text-[18px] lg:font-bold">
-            ENTER
-          </span>
-        </button>
+      <div className="flex flex-col space-y-12">
+        {/* 현재 순서 제목 */}
+        <TimeBasedTimerTitle>
+          <h1 className="truncate text-[32px] font-bold text-neutral-900">
+            {data.table[index].speechType}
+          </h1>
+        </TimeBasedTimerTitle>
+
+        <div className="relative flex flex-row items-center justify-center space-x-[30px]">
+          {/* 왼쪽 타이머 */}
+          <TimeBasedTimer
+            timeBasedTimerInstance={{
+              totalTimer: timer1.totalTimer,
+              speakingTimer: timer1.speakingTimer,
+              isRunning: timer1.isRunning,
+              startTimer: timer1.startTimer,
+              pauseTimer: timer1.pauseTimer,
+              resetCurrentTimer: timer1.resetCurrentTimer,
+            }}
+            isSelected={prosConsSelected === 'PROS'}
+            onActivate={() => handleActivateTeam('PROS')}
+            prosCons="PROS"
+            teamName={data.info.prosTeamName}
+          />
+          {/* 오른쪽 타이머 */}
+          <TimeBasedTimer
+            timeBasedTimerInstance={{
+              totalTimer: timer2.totalTimer,
+              speakingTimer: timer2.speakingTimer,
+              isRunning: timer2.isRunning,
+              startTimer: timer2.startTimer,
+              pauseTimer: timer2.pauseTimer,
+              resetCurrentTimer: timer2.resetCurrentTimer,
+            }}
+            isSelected={prosConsSelected === 'CONS'}
+            onActivate={() => handleActivateTeam('CONS')}
+            prosCons="CONS"
+            teamName={data.info.consTeamName}
+          />
+          {/* ENTER 버튼 */}
+          <button
+            onClick={switchCamp}
+            className="absolute left-1/2 top-1/2 flex h-[78px] w-[78px] -translate-x-[70px] -translate-y-6 flex-col items-center justify-center rounded-full bg-neutral-600 text-white shadow-lg transition hover:bg-neutral-500 lg:h-[100px] lg:w-[100px] lg:-translate-x-20 lg:-translate-y-8"
+          >
+            <FaExchangeAlt className="text-[28px] lg:text-[36px]" />
+            <span className="text-[12px] font-semibold lg:text-[18px] lg:font-bold">
+              ENTER
+            </span>
+          </button>
+        </div>
       </div>
     );
   }