From 4a923c9f628aac5970c14f107a1caa13144390c5 Mon Sep 17 00:00:00 2001
From: Shawn Kang <csm06063@naver.com>
Date: Mon, 28 Jul 2025 11:38:57 +0900
Subject: [PATCH 1/2] =?UTF-8?q?design:=20=EC=8B=9C=EA=B0=84=20=EC=B4=9D?=
 =?UTF-8?q?=EB=9F=89=EC=A0=9C=20=ED=83=80=EC=9D=B4=EB=A8=B8=20=EC=A0=9C?=
 =?UTF-8?q?=EB=AA=A9=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/TimeBasedTimerTitle.tsx        | 71 ++++++++++++++
 src/page/TimerPage/components/TimerView.tsx   | 92 ++++++++++---------
 2 files changed, 122 insertions(+), 41 deletions(-)
 create mode 100644 src/page/TimerPage/components/TimeBasedTimerTitle.tsx

diff --git a/src/page/TimerPage/components/TimeBasedTimerTitle.tsx b/src/page/TimerPage/components/TimeBasedTimerTitle.tsx
new file mode 100644
index 0000000..3ab0ca4
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/src/page/TimerPage/components/TimerView.tsx b/src/page/TimerPage/components/TimerView.tsx
index 328f558..07e1dcc 100644
--- a/src/page/TimerPage/components/TimerView.tsx
+++ b/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>
     );
   }

From 4ffac418f28b957ee9ac98022f6af7aa9ae8bae6 Mon Sep 17 00:00:00 2001
From: Shawn Kang <csm06063@naver.com>
Date: Mon, 28 Jul 2025 11:39:07 +0900
Subject: [PATCH 2/2] =?UTF-8?q?chore:=20=ED=95=B4=EC=83=81=EB=8F=84=20?=
 =?UTF-8?q?=EB=86=92=EC=9D=B4=20864=20px=EB=A1=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 electron/main.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/electron/main.ts b/electron/main.ts
index 1298138..e2a72c4 100644
--- a/electron/main.ts
+++ b/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