[FIX] 버그 수정 및 사소한 디자인 개선

src/components/GoToHomeButton/GoToHomeButton.tsx

@@ -12,9 +12,9 @@ export default function GoToHomeButton() {
       type="button"
       aria-label="홈으로 돌아가기"
       onClick={handleClick}
-      className="flex h-[72px] w-[492px] items-center justify-center gap-[12px] rounded-full border-[2px] border-default-disabled/hover bg-default-white px-[16px] py-[11px] font-semibold text-default-black opacity-80 transition-colors duration-200 hover:bg-default-disabled/hover"
+      className="button enabled neutral flex w-[492px] flex-row space-x-[12px] rounded-full p-[24px]"
     >
-      <span>홈으로 돌아가기 →</span>
+      홈으로 돌아가기 →
     </button>
   );
 }

src/layout/components/header/StickyTriSectionHeader.tsx

@@ -85,6 +85,8 @@ StickyTriSectionHeader.Right = function Right(props: PropsWithChildren) {
               return (
                 <button
                   className="flex h-full items-center justify-center p-[4px]"
+                  aria-label="홈으로 이동"
+                  title="홈으로 이동"
                   key={`${iconName}-${index}`}
                   onClick={() => {
                     // 전체 화면 상태에서 홈으로 이동하는 경우, 전체 화면 비활성화
@@ -105,6 +107,8 @@ StickyTriSectionHeader.Right = function Right(props: PropsWithChildren) {
               return (
                 <button
                   className="flex h-full items-center justify-center p-[4px]"
+                  aria-label={isLoggedIn() ? '로그아웃' : '로그인'}
+                  title={isLoggedIn() ? '로그아웃' : '로그인'}
                   key={`${iconName}-${index}`}
                   onClick={() => {
                     // 전체 화면 상태에서 홈으로 이동하는 경우, 전체 화면 비활성화
@@ -119,7 +123,7 @@ StickyTriSectionHeader.Right = function Right(props: PropsWithChildren) {
                     }
                   }}
                 >
-                  <DTLogin className="h-full" />
+                  <DTLogin className="h-full w-full" />
                 </button>
               );
             default:

src/page/DebateEndPage/DebateEndPage.tsx

@@ -21,7 +21,7 @@ export default function DebateEndPage() {
   return (
     <div
       style={backgroundStyle}
-      className="flex min-h-screen flex-col items-center justify-center p-4 font-pretendard"
+      className="relative flex h-screen w-full flex-col items-center justify-center p-4"
     >
       <div className="mb-12 flex items-center justify-center gap-4 text-center lg:mb-16 xl:mb-24">
         <h1 className="text-3xl font-semibold text-default-black md:text-4xl lg:text-5xl xl:text-display-raw">
@@ -56,7 +56,7 @@ export default function DebateEndPage() {
         {/* 승패투표 카드 */}
         <button
           onClick={handleFeedbackClick}
-          className="flex h-[280px] w-[280px] flex-col items-center justify-center gap-6 rounded-[34px] border-2 border-default-disabled/hover bg-[#e3e3e3] text-default-disabled/hover md:h-[300px] md:w-[300px] lg:h-[340px] lg:w-[340px] xl:h-[370px] xl:w-[370px] xl:gap-[30px]"
+          className="flex h-[280px] w-[280px] flex-col items-center justify-center gap-6 rounded-[34px] border-2 border-default-disabled/hover bg-[#e3e3e3] text-default-disabled/hover transition-all duration-300 md:h-[300px] md:w-[300px] lg:h-[340px] lg:w-[340px] xl:h-[370px] xl:w-[370px] xl:gap-[30px]"
           disabled={true}
         >
           <img
@@ -79,7 +79,8 @@ export default function DebateEndPage() {
           </p>
         </button>
       </div>
-      <div className="mt-12 lg:mt-16 xl:mt-[74px]">
+
+      <div className="fixed bottom-[8%] xl:bottom-[12%]">
         <GoToHomeButton />
       </div>
     </div>

src/page/LandingPage/components/TemplateCard.tsx

@@ -33,7 +33,7 @@ export default function TemplateCard({
           <img
             src={logoSrc}
             alt={`${title} 로고`}
-            className="h-12 w-12 shrink-0 rounded-full object-contain"
+            className="h-12 w-12 shrink-0 object-contain"
           />
         )}
       </div>

src/page/TableComposition/components/TimerCreationContent/TimerCreationContent.tsx

@@ -38,13 +38,20 @@ type TimerCreationOption =
   | 'TIME_NORMAL'
   | 'BELL';
 
-type SpeechType = 'OPENING' | 'REBUTTAL' | 'TIMEOUT' | 'CLOSING' | 'CUSTOM';
+type SpeechType =
+  | 'OPENING'
+  | 'REBUTTAL'
+  | 'TIMEOUT'
+  | 'CLOSING'
+  | 'CROSS_EXAM'
+  | 'CUSTOM';
 
 const SPEECH_TYPE_RECORD: Record<SpeechType, string> = {
   OPENING: '입론',
   CLOSING: '최종 발언',
   CUSTOM: '직접 입력',
   REBUTTAL: '반론',
+  CROSS_EXAM: '교차 조사',
   TIMEOUT: '작전 시간',
 } as const;
 
@@ -122,6 +129,9 @@ export default function TimerCreationContent({
       case '작전시간':
       case '작전 시간':
         return 'TIMEOUT';
+      case '교차조사':
+      case '교차 조사':
+        return 'CROSS_EXAM';
       default:
         return 'CUSTOM';
     }
@@ -234,6 +244,7 @@ export default function TimerCreationContent({
     { value: 'OPENING', label: SPEECH_TYPE_RECORD['OPENING'] },
     { value: 'REBUTTAL', label: SPEECH_TYPE_RECORD['REBUTTAL'] },
     { value: 'TIMEOUT', label: SPEECH_TYPE_RECORD['TIMEOUT'] },
+    { value: 'CROSS_EXAM', label: SPEECH_TYPE_RECORD['CROSS_EXAM'] },
     { value: 'CLOSING', label: SPEECH_TYPE_RECORD['CLOSING'] },
     { value: 'CUSTOM', label: SPEECH_TYPE_RECORD['CUSTOM'] },
   ] as const;

src/page/TableOverviewPage/components/TeamSelectionModal/TeamSelectionModal.tsx

@@ -160,7 +160,7 @@ export default function TeamSelectionModal({
         {(coinState === 'front' || coinState === 'back') && (
           <div className="flex">
             <button
-              className="sm:text-lg sm:py-4 w-full border-[2px] border-default-disabled/hover py-3 text-lg font-semibold hover:bg-default-disabled/hover md:py-5 md:text-xl lg:py-[21px] lg:text-[22px]"
+              className="sm:text-lg sm:py-4 w-full border-[2px] border-default-disabled/hover bg-default-white py-3 text-lg font-semibold hover:bg-default-disabled/hover md:py-5 md:text-xl lg:py-[21px] lg:text-[22px]"
               onClick={handleEdit}
             >
               토론 정보 수정하기

src/page/TimerPage/FeedbackTimerPage.tsx

@@ -19,9 +19,12 @@ export default function FeedbackTimerPage() {
   return (
     <DefaultLayout>
       <DefaultLayout.ContentContainer>
-        <div className="relative flex h-full w-full flex-col items-center justify-center space-y-[54px] pb-[66px] xl:space-y-[60px]">
+        <div className="relative flex h-screen w-full flex-col items-center justify-center space-y-[54px] pb-[66px] xl:space-y-[60px]">
           <FeedbackTimer feedbackTimerInstance={feedbackTimerInstance} />
-          <GoToHomeButton />
+
+          <div className="fixed bottom-[8%] xl:bottom-[12%]">
+            <GoToHomeButton />
+          </div>
         </div>
       </DefaultLayout.ContentContainer>
     </DefaultLayout>

src/page/TimerPage/TimerPage.tsx

@@ -85,11 +85,13 @@ export default function TimerPage() {
           <DefaultLayout.Header.Right>
             <button
               className="flex h-full items-center justify-center p-[4px]"
+              aria-label="도움말"
               title="도움말"
               onClick={openUseTooltipModal}
             >
               <DTHelp className="h-full" />
             </button>
+
             <button
               className="flex aspect-square h-full items-center justify-center p-[4px]"
               title="전체 화면"

src/page/TimerPage/components/FeedbackTimer.tsx

@@ -38,7 +38,7 @@ export default function FeedbackTimer({
     timer !== null && defaultTimer > 0
       ? ((defaultTimer - timer) / defaultTimer) * 100
       : 0;
-  const progressMotionValue = useCircularTimerAnimation(rawProgress);
+  const progressMotionValue = useCircularTimerAnimation(rawProgress, isRunning);
   const breakpoint = useBreakpoint();
 
   const getStrokeWidth = () => {

src/page/TimerPage/components/NormalTimer.tsx

@@ -51,7 +51,7 @@ export default function NormalTimer({
   const titleText = item.speechType;
   const rawProgress =
     timer !== null && item.time ? ((item.time - timer) / item.time) * 100 : 0;
-  const progressMotionValue = useCircularTimerAnimation(rawProgress);
+  const progressMotionValue = useCircularTimerAnimation(rawProgress, isRunning);
   const breakpoint = useBreakpoint();
   const getStrokeWidth = () => {
     switch (breakpoint) {

src/page/TimerPage/components/TimeBasedTimer.tsx

@@ -12,15 +12,13 @@ type TimeBasedTimerInstance = {
   totalTimer: number | null;
   speakingTimer: number | null;
   isRunning: boolean;
-  startTimer: (isOpponentDone: boolean) => void;
+  startTimer: () => void;
   pauseTimer: () => void;
   resetCurrentTimer: () => void;
-  denominator: number;
 };
 
 interface TimeBasedTimerProps {
   timeBasedTimerInstance: TimeBasedTimerInstance;
-  isOpponentDone: boolean;
   isSelected: boolean;
   onActivate?: () => void;
   prosCons: TimeBasedStance;
@@ -30,7 +28,6 @@ interface TimeBasedTimerProps {
 
 export default function TimeBasedTimer({
   timeBasedTimerInstance,
-  isOpponentDone,
   isSelected,
   prosCons,
   teamName,
@@ -43,7 +40,6 @@ export default function TimeBasedTimer({
     startTimer,
     pauseTimer,
     resetCurrentTimer,
-    denominator,
   } = timeBasedTimerInstance;
 
   const minute = Formatting.formatTwoDigits(
@@ -59,44 +55,36 @@ export default function TimeBasedTimer({
   );
 
   const initRawProgress = (): number => {
-    if (isOpponentDone) {
-      if (speakingTimer === null) {
-        // 1회당 발언 시간 X일 때...
-        return ((denominator - (totalTimer ?? 0)) / denominator) * 100;
+    if (speakingTimer === null) {
+      // 1회당 발언 시간 X일 때...
+      if (item.timePerTeam && totalTimer && item.timePerTeam > 0) {
+        // 팀당 발언 시간 타이머가 정상 동작 중이고 남은 시간이 있을 경우, 진행도를 계산
+        if (totalTimer <= 0) {
+          return 100;
+        }
+        return ((item.timePerTeam - totalTimer) / item.timePerTeam) * 100;
       } else {
-        // 1회당 발언 시간 O일 때...
-        return ((denominator - (speakingTimer ?? 0)) / denominator) * 100;
+        // 팀당 발언 시간 타이머가 멈추거나 완료된 경우,
+        // 완료(100%)에 해당하는 진행도를 반환
+        return 100;
       }
     } else {
-      if (speakingTimer === null) {
-        // 1회당 발언 시간 X일 때...
-        if (item.timePerTeam && totalTimer && item.timePerTeam > 0) {
-          // 팀당 발언 시간 타이머가 정상 동작 중이고 남은 시간이 있을 경우, 진행도를 계산
-          if (totalTimer <= 0) {
-            return 100;
-          }
-          return ((item.timePerTeam - totalTimer) / denominator) * 100;
-        } else {
-          // 팀당 발언 시간 타이머가 멈추거나 완료된 경우,
-          // 완료(100%)에 해당하는 진행도를 반환
-          return 100;
-        }
+      // 1회당 발언 시간 O일 때...
+      if (item.timePerSpeaking && speakingTimer && item.timePerSpeaking > 0) {
+        // 1회당 발언 시간 타이머가 정상 동작 중이고 남은 시간이 있을 경우, 진행도를 계산
+        return (
+          ((item.timePerSpeaking - speakingTimer) / item.timePerSpeaking) * 100
+        );
       } else {
-        // 1회당 발언 시간 O일 때...
-        if (item.timePerSpeaking && speakingTimer && item.timePerSpeaking > 0) {
-          // 1회당 발언 시간 타이머가 정상 동작 중이고 남은 시간이 있을 경우, 진행도를 계산
-          return ((item.timePerSpeaking - speakingTimer) / denominator) * 100;
-        } else {
-          // 1회당 발언 시간 타이머가 멈추거나 완료된 경우,
-          // 완료(100%)에 해당하는 진행도를 반환
-          return 100;
-        }
+        // 1회당 발언 시간 타이머가 멈추거나 완료된 경우,
+        // 완료(100%)에 해당하는 진행도를 반환
+        return 100;
       }
     }
   };
 
   const rawProgress = initRawProgress();
-  const progressMotionValue = useCircularTimerAnimation(rawProgress);
+  const progressMotionValue = useCircularTimerAnimation(rawProgress, isRunning);
 
   const breakpoint = useBreakpoint();
   const getStrokeWidth = () => {
@@ -153,11 +141,11 @@ export default function TimeBasedTimer({
               전체 시간
             </h1>
             <span className="flex flex-row text-[56px] font-semibold tabular-nums text-default-black xl:text-[72px]">
-              <p className="flex w-[80px] items-center justify-center xl:w-[120px]">
+              <p className="flex w-[80px] items-center justify-center xl:w-[100px]">
                 {minute}
               </p>
               <p className="flex items-center justify-center">:</p>
-              <p className="flex w-[80px] items-center justify-center xl:w-[120px]">
+              <p className="flex w-[80px] items-center justify-center xl:w-[100px]">
                 {second}
               </p>
             </span>
@@ -173,12 +161,12 @@ export default function TimeBasedTimer({
             >
               현재 시간
             </h1>
-            <span className="flex flex-row text-[70px] font-bold tabular-nums text-default-black lg:text-[90px] xl:text-[110px]">
-              <p className="flex w-[108px] items-center justify-center xl:w-[180px]">
+            <span className="flex flex-row text-[80px] font-bold tabular-nums text-default-black xl:text-[110px]">
+              <p className="flex w-[120px] items-center justify-center xl:w-[180px]">
                 {speakingMinute}
               </p>
               <p className="flex items-center justify-center">:</p>
-              <p className="flex w-[108px] items-center justify-center xl:w-[180px]">
+              <p className="flex w-[120px] items-center justify-center xl:w-[180px]">
                 {speakingSecond}
               </p>
             </span>
@@ -189,7 +177,7 @@ export default function TimeBasedTimer({
       {/* 조작부 */}
       <TimerController
         isRunning={isRunning}
-        onStart={() => startTimer(isOpponentDone)}
+        onStart={startTimer}
         onPause={pauseTimer}
         onReset={resetCurrentTimer}
         stance={prosCons}

src/page/TimerPage/components/TimerView.tsx

@@ -53,11 +53,9 @@ export default function TimerView({ state }: { state: TimerPageLogics }) {
             isRunning: timer1.isRunning,
             startTimer: timer1.startTimer,
             pauseTimer: timer1.pauseTimer,
-            denominator: timer1.denominator,
             resetCurrentTimer: () => timer1.resetCurrentTimer(timer2.isDone),
           }}
           item={data.table[index]}
-          isOpponentDone={timer2.isDone}
           isSelected={prosConsSelected === 'PROS'}
           onActivate={() => handleActivateTeam('PROS')}
           prosCons="PROS"
@@ -81,11 +79,9 @@ export default function TimerView({ state }: { state: TimerPageLogics }) {
             isRunning: timer2.isRunning,
             startTimer: timer2.startTimer,
             pauseTimer: timer2.pauseTimer,
-            denominator: timer2.denominator,
             resetCurrentTimer: () => timer2.resetCurrentTimer(timer1.isDone),
           }}
           item={data.table[index]}
-          isOpponentDone={timer1.isDone}
           isSelected={prosConsSelected === 'CONS'}
           onActivate={() => handleActivateTeam('CONS')}
           prosCons="CONS"

src/page/TimerPage/hooks/useCircularTimerAnimation.ts

@@ -1,18 +1,21 @@
 import { animate, clamp, useMotionValue } from 'framer-motion';
 import { useEffect } from 'react';
 
-export default function useCircularTimerAnimation(rawProgress: number) {
+export default function useCircularTimerAnimation(
+  rawProgress: number,
+  isRunning: boolean,
+) {
   const progress = clamp(0, 100, rawProgress);
   const progressMotionValue = useMotionValue(0);
 
   useEffect(() => {
     const controls = animate(progressMotionValue, progress, {
-      duration: 0.7,
+      duration: isRunning ? 0.7 : 0,
       ease: 'easeOut',
     });
 
     return () => controls.stop();
-  }, [progress, progressMotionValue]);
+  }, [progress, progressMotionValue, isRunning]);
 
   return progressMotionValue;
 }

src/page/TimerPage/hooks/useFeedbackTimer.ts

@@ -82,16 +82,19 @@ export function useFeedbackTimer(): FeedbackTimerLogics {
    */
   const adjustTime = useCallback(
     (amount: number) => {
-      if (isRunning) return;
+      if (isRunning) {
+        return;
+      }
+
+      let newTime: number;
 
       setTimer((prevTimer) => {
-        const newTime = (prevTimer ?? 0) + amount;
+        newTime = (prevTimer ?? 0) + amount;
         return newTime < 0 ? 0 : newTime;
       });
 
-      setDefaultTimer((prevDefault) => {
-        const newDefault = prevDefault + amount;
-        return newDefault < 0 ? 0 : newDefault;
+      setDefaultTimer(() => {
+        return newTime < 0 ? 0 : newTime;
       });
     },
     [isRunning],