[ QA ] 홈, 타이머 페이지 최종 QA를 진행합니다.

src/pages/AllowedServicePage/AllowedServicePage.tsx

@@ -5,9 +5,12 @@ import { useQueryClient } from '@tanstack/react-query';
 import AutoFixedGrid from '@/shared/components/AutoFixedGrid/AutoFixedGrid';
 import ModalContentsFriends from '@/shared/components/ModalContentsFriends/ModalContentsFriends';
 import ModalWrapper, { ModalWrapperRef } from '@/shared/components/ModalWrapper/ModalWrapper';
+import NotificationPanel from '@/shared/components/NotificationPanel/NotificationPanel';
 import Spacer from '@/shared/components/Spacer/Spacer';
 import TextField from '@/shared/components/TextField/TextField';
 
+import useClickOutside from '@/shared/hooks/useClickOutside';
+
 import { isUrlValid } from '@/shared/utils/validation';
 
 import { ColorPaletteType } from '@/shared/types/allowedService';
@@ -43,11 +46,16 @@ const AllowedServicePage = () => {
 	const [isEditingTitle, setIsEditingTitle] = useState(false);
 	const [urlInput, setUrlInput] = useState('');
 	const [selectedColor, setSelectedColor] = useState<ColorPaletteType>('#868C93');
+	const [isNotificationVisible, setIsNotificationVisible] = useState(false);
 
 	const queryClient = useQueryClient();
 
 	const friendsModalRef = useRef<ModalWrapperRef>(null);
 	const requireTitleModalRef = useRef<ModalWrapperRef>(null);
+
+	const bellIconRef = useRef<HTMLButtonElement>(null);
+	const notificationPanelRef = useRef<HTMLDivElement>(null);
+
 
 	const handleChangeTitleInput = (e: ChangeEvent<HTMLInputElement>) => {
 		setTitleInput(e.target.value);
@@ -211,6 +219,24 @@ const AllowedServicePage = () => {
 		}
 	};
 
+	const toggleNotification = () => {
+		setIsNotificationVisible((prev) => !prev);
+	};
+
+	useClickOutside(
+		notificationPanelRef,
+		(event) => {
+			if (!isNotificationVisible) return;
+
+			if (bellIconRef.current && event && bellIconRef.current.contains(event.target as Node)) {
+				return;
+			}
+
+			setIsNotificationVisible(false);
+		},
+		isNotificationVisible,
+	);
+
 	// NOTE: 첫 렌더링 시 api를 통해 받은 첫번째 allowed service group id를 activeGroupId로 설정
 	// 리스트 삭제 후, 현재 active 그룹이 리스트에 없는 경우 첫 번째 그룹으로 설정
 	useEffect(() => {
@@ -252,7 +278,7 @@ const AllowedServicePage = () => {
 				<button onClick={handleOpenFriendsModal}>
 					<FriendSettingIcon className="rounded-[1.6rem] hover:bg-gray-bg-04 active:bg-gray-bg-05" />
 				</button>
-				<button>
+				<button ref={bellIconRef} onClick={toggleNotification}>
 					<BellIcon className="rounded-[1.6rem] hover:bg-gray-bg-04 active:bg-gray-bg-05" />
 				</button>
 			</div>
@@ -356,9 +382,13 @@ const AllowedServicePage = () => {
 			<ModalWrapper ref={friendsModalRef} backdrop>
 				{({ isModalOpen }) => <ModalContentsFriends isModalOpen={isModalOpen} />}
 			</ModalWrapper>
+
 			<ModalWrapper ref={requireTitleModalRef} backdrop>
 				{() => <ModalContentsAlert.RequireTitle onClick={handleCloseRequireTitleModal} />}
-			</ModalWrapper>
+      </ModalWrapper>
+
+			{isNotificationVisible && <NotificationPanel ref={notificationPanelRef} />}
+
 		</AutoFixedGrid>
 	);
 };

src/pages/HomePage/BoxCategory/BoxCategory.tsx

@@ -244,7 +244,10 @@ const BoxCategory = ({
 							onKeyDown={handleKeyDown}
 						/>
 					) : (
-						<h2 className="truncate text-white subhead-semibold-18" onClick={handleStartEditing}>
+						<h2
+							className={`truncate text-white subhead-semibold-18 ${addingTodayTodoStatus ? 'pointer-events-none' : ''}`}
+							onClick={handleStartEditing}
+						>
 							{title}
 						</h2>
 					)}
@@ -257,12 +260,12 @@ const BoxCategory = ({
 						<button
 							onMouseEnter={handleMouseEnter}
 							onClick={startAddingTodo}
-							className="rounded-full hover:bg-gray-bg-04 active:bg-gray-bg-05"
+							className={`rounded-full ${addingTodayTodoStatus ? 'pointer-events-none' : 'hover:bg-gray-bg-04 active:bg-gray-bg-05'}`}
 						>
 							<PlusIcon />
 						</button>
 						<Dropdown>
-							<Dropdown.Trigger>
+							<Dropdown.Trigger className={addingTodayTodoStatus ? 'pointer-events-none' : ''}>
 								<MeatballDefaultIcon className="rounded-full hover:bg-gray-bg-04 active:bg-gray-bg-05" />
 							</Dropdown.Trigger>
 							<Dropdown.Content className="right-0 top-[3.2rem]">

src/pages/HomePage/BoxTodayTodo/BoxTodayTodo.tsx

@@ -55,6 +55,7 @@ const BoxTodayTodo = ({
 					cancelComplete={cancelComplete}
 					addingComplete={addingComplete}
 					onCreateTodayTodos={onCreateTodayTodos}
+					addingTodayTodoStatus={addingTodayTodoStatus}
 				/>
 			) : (
 				<StatusDefaultBoxTodayTodo hasTodos={hasTodos} onEnableAddStatus={enableAddingTodayTodo} />

src/pages/HomePage/BoxTodayTodo/StatusAddBoxTodayTodo/StatusAddBoxTodayTodo.tsx

@@ -24,6 +24,7 @@ interface StatusAddBoxTodayTodoProps {
 	cancelComplete: () => void;
 	addingComplete: boolean;
 	onCreateTodayTodos: () => void;
+	addingTodayTodoStatus: boolean;
 }
 
 const StatusAddBoxTodayTodo = ({
@@ -35,6 +36,7 @@ const StatusAddBoxTodayTodo = ({
 	cancelComplete,
 	addingComplete,
 	onCreateTodayTodos,
+	addingTodayTodoStatus,
 }: StatusAddBoxTodayTodoProps) => {
 	const { data: allowedServiceList } = useGetPopoverAllowedServiceList();
 	const registerServiceModalRef = useRef<ModalWrapperRef>(null);
@@ -82,6 +84,7 @@ const StatusAddBoxTodayTodo = ({
 									selectedNumber={selectedNumber}
 									updateTodayTodos={deleteTodayTodos}
 									addingComplete={addingComplete}
+									addingTodayTodoStatus={addingTodayTodoStatus}
 								/>
 							</li>
 						);

src/pages/HomePage/BoxTodayTodo/StatusDefaultBoxTodayTodo/StatusDefaultBoxTodayTodo.tsx

@@ -12,8 +12,8 @@ const StatusDefaultBoxTodayTodo = ({ hasTodos, onEnableAddStatus }: StatusDefaul
 			<div className="mb-[24%]">
 				<p className="text-center text-gray-03 body-med-16">아직 오늘 할 일이 없어요</p>
 				<div className="mb-[2.2rem] mt-[0.8rem] flex flex-col gap-[0.5rem]">
-					<p className="text-center text-gray-05 subhead-semibold-18">할 일을 추가하려면</p>
-					<p className="text-center text-gray-05 subhead-semibold-18">+ 아이콘을 선택해주세요.</p>
+					<p className="text-center text-gray-05 subhead-semibold-18">할 일을 추가해</p>
+					<p className="text-center text-gray-05 subhead-semibold-18">타이머를 시작해 보세요.</p>
 				</div>
 
 				<div className="mx-auto">

src/pages/HomePage/HomePage.tsx

@@ -405,8 +405,13 @@ const HomePage = () => {
 													<PopoverAddCategoryIcon />
 												</button>
 											)}
-											<button className="flex-shrink-0" onClick={handleAddCategory}>
-												<LargePlusIcon className="rounded-full bg-gray-bg-03 hover:bg-gray-bg-05" />
+											<button
+												className={`flex-shrink-0 ${addingTodayTodoStatus ? 'pointer-events-none' : ''}`}
+												onClick={handleAddCategory}
+											>
+												<LargePlusIcon
+													className={`rounded-full bg-gray-bg-03 ${addingTodayTodoStatus ? '' : 'hover:bg-gray-bg-05'}`}
+												/>
 											</button>
 										</div>
 									)}
@@ -425,8 +430,13 @@ const HomePage = () => {
 
 						{dailyCategoryTask.length > 2 && (
 							<div className="ml-[1.4rem] flex flex-col">
-								<button className="flex-shrink-0" onClick={handleAddCategory}>
-									<LargePlusIcon className="rounded-full bg-gray-bg-03 hover:bg-gray-bg-05" />
+								<button
+									className={`flex-shrink-0 ${addingTodayTodoStatus ? 'pointer-events-none' : ''}`}
+									onClick={addingTodayTodoStatus ? undefined : handleAddCategory}
+								>
+									<LargePlusIcon
+										className={`rounded-full bg-gray-bg-03 ${addingTodayTodoStatus ? '' : 'hover:bg-gray-bg-05'}`}
+									/>
 								</button>
 							</div>
 						)}

src/pages/TimerPage/Carousel/CarouselFriend.tsx

@@ -43,7 +43,7 @@ const CarouselFriend = memo(function CarouselFriend({
 	return (
 		<div className="relative flex h-[15rem] w-[9.8rem] flex-shrink-0 flex-col items-center justify-center px-[0.8rem] py-[0.5rem]">
 			{/* 프로필 이미지 영역 */}
-			<span className="relative mb-[2.9rem] h-[7.4rem] w-[7.4rem]">
+			<span className="relative mb-[3rem] h-[7.4rem] w-[7.4rem]">
 				<img
 					src={image}
 					alt={`${name}의 프로필`}
@@ -61,7 +61,9 @@ const CarouselFriend = memo(function CarouselFriend({
 			{/* 타이머 표시 영역 */}
 			<div className="absolute top-[8.4rem] flex items-center gap-[0.4rem]">
 				<ClockIcon />
-				<span className={`detail-reg-14 ${isPlaying ? 'text-mint-02' : 'text-gray-03'}`}>{formattedTime}</span>
+				<span className={`pt-[0.1rem] detail-reg-14 ${isPlaying ? 'text-mint-02' : 'text-gray-03'}`}>
+					{formattedTime}
+				</span>
 			</div>
 
 			{/* 이름 및 카테고리 표시 */}

src/pages/TimerPage/MainTimer/MainTimer.tsx

@@ -1,6 +1,9 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
+
+import { splitTasksByCompletion } from '@/shared/utils/timer';
 
 import { getFormattedTimeInfo } from '@/pages/TimerPage/utils/timeFormat';
+import { useGetTimerTodos } from '@/shared/apisV2/timer/timer.queries';
 
 import { useTimerContext } from '../contexts/TimerContext';
 import TimerDisplay from './TimerDisplay/TimerDisplay';
@@ -13,18 +16,34 @@ import TimerHeader from './TimerHeader/TimerHeader';
  */
 const MainTimer = () => {
 	// 타이머 컨텍스트에서 필요한 상태와 액션만 가져오기
-	const { timer, elapsedTime, totalElapsedTimeOfToday, isPlaying, selectedTask, actions } = useTimerContext();
+	const { todayFormattedDate, timer, elapsedTime, totalElapsedTimeOfToday, isPlaying, selectedTask, actions } =
+		useTimerContext();
+
+	// 할일 데이터 조회
+	const { data: todosData } = useGetTimerTodos({ targetDate: todayFormattedDate });
+
+	// 완료된 할 일 목록 가져오기
+	const { completedTodos } = useMemo(() => {
+		const todos = todosData?.data?.task ?? [];
+		return splitTasksByCompletion(todos);
+	}, [todosData]);
 
 	// 작업이 선택되어 있는지 여부
 	const hasSelectedTask = selectedTask.id !== null;
 
+	// 선택된 작업이 완료되었는지 확인
+	const isSelectedTaskCompleted = useCallback(() => {
+		if (!selectedTask.id) return false;
+		return completedTodos.some((todo) => todo.id === selectedTask.id);
+	}, [completedTodos, selectedTask.id]);
+
 	// 재생/정지 토글 핸들러 - 작업이 선택되지 않은 경우 처리 방지
 	const handlePlayPauseToggle = useCallback(() => {
-		if (!hasSelectedTask) return;
+		if (!hasSelectedTask || isSelectedTaskCompleted()) return;
 
 		// 현재 상태의 반대로 토글
 		actions.togglePlay(!isPlaying);
-	}, [isPlaying, hasSelectedTask, actions]);
+	}, [isPlaying, hasSelectedTask, isSelectedTaskCompleted, actions]);
 
 	// 표시할 시간 정보 계산 - 유틸 함수로 분리하여 관심사 분리
 	const timeInfo = getFormattedTimeInfo(timer, elapsedTime, totalElapsedTimeOfToday);
@@ -36,6 +55,7 @@ const MainTimer = () => {
 				selectedTaskName={selectedTask.name}
 				selectedTaskCategoryName={selectedTask.categoryName}
 				hasSelectedTask={hasSelectedTask}
+				isCompleted={isSelectedTaskCompleted()}
 			/>
 
 			{/* 타이머 디스플레이 - 시간 표시 및 제어 버튼 */}
@@ -45,6 +65,7 @@ const MainTimer = () => {
 				timer={timer}
 				isPlaying={isPlaying}
 				onToggle={handlePlayPauseToggle}
+				disabled={!hasSelectedTask || isSelectedTaskCompleted()}
 			/>
 		</div>
 	);

src/pages/TimerPage/MainTimer/TimerDisplay/ButtonTimerPlay/ButtonTimerPlay.tsx

@@ -1,3 +1,5 @@
+import { MouseEvent } from 'react';
+
 import PauseIcon from '@/shared/assets/svgs/defaultpause.svg?react';
 import PlayIcon from '@/shared/assets/svgs/defaultplay.svg?react';
 import HoverPauseIcon from '@/shared/assets/svgs/hoverpause.svg?react';
@@ -6,14 +8,15 @@ import HoverPlayIcon from '@/shared/assets/svgs/hoverplay.svg?react';
 interface ButtonTimerPlayProps {
 	onClick: () => void;
 	isPlaying: boolean;
+	disabled?: boolean;
 }
 
-const ButtonTimerPlay = ({ onClick, isPlaying }: ButtonTimerPlayProps) => {
+const ButtonTimerPlay = ({ onClick, isPlaying, disabled = false }: ButtonTimerPlayProps) => {
 	const IconComponent = isPlaying ? PauseIcon : PlayIcon;
 	const HoverIconComponent = isPlaying ? HoverPauseIcon : HoverPlayIcon;
 
 	return (
-		<button onClick={onClick} className="group relative">
+		<button onClick={onClick} className={`group relative ${disabled ? 'cursor-not-allowed' : ''}`} disabled={disabled}>
 			<IconComponent className="block group-hover:hidden" />
 			<HoverIconComponent className="hidden group-hover:block" />
 		</button>

src/pages/TimerPage/MainTimer/TimerDisplay/TimerDisplay.tsx

@@ -14,14 +14,22 @@ interface TimerDisplayProps {
 	timer: number;
 	isPlaying: boolean;
 	onToggle: () => void;
+	disabled?: boolean;
 }
 
 /**
  * 타이머 디스플레이 컴포넌트
  *
  * 타이머의 시간 표시, 상태 텍스트 및 재생/정지 버튼을 포함하는 UI
  */
-const TimerDisplay = ({ statusText, formattedTimeText, timer, isPlaying, onToggle }: TimerDisplayProps) => {
+const TimerDisplay = ({
+	statusText,
+	formattedTimeText,
+	timer,
+	isPlaying,
+	onToggle,
+	disabled = false,
+}: TimerDisplayProps) => {
 	return (
 		<div className="relative flex items-center justify-center">
 			<ProgressCircle isPlaying={isPlaying} timer={timer} />
@@ -32,7 +40,7 @@ const TimerDisplay = ({ statusText, formattedTimeText, timer, isPlaying, onToggl
 					<span className="text-mint-01 title-semibold-48">{formattedTimeText}</span>
 				</div>
 
-				<ButtonTimerPlay onClick={onToggle} isPlaying={isPlaying} />
+				<ButtonTimerPlay onClick={onToggle} isPlaying={isPlaying} disabled={disabled} />
 			</div>
 		</div>
 	);

src/pages/TimerPage/MainTimer/TimerHeader/TimerHeader.tsx

@@ -7,14 +7,20 @@ interface TimerHeaderProps {
 	selectedTaskName: string;
 	selectedTaskCategoryName: string;
 	hasSelectedTask: boolean;
+	isCompleted?: boolean;
 }
 
 /**
  * 타이머 헤더 컴포넌트
  *
  * 선택된 할일의 이름과 카테고리를 표시하거나, 할일이 선택되지 않은 경우 안내 메시지를 표시.
  */
-const TimerHeader = ({ selectedTaskName, selectedTaskCategoryName, hasSelectedTask }: TimerHeaderProps) => {
+const TimerHeader = ({
+	selectedTaskName,
+	selectedTaskCategoryName,
+	hasSelectedTask,
+	isCompleted = false,
+}: TimerHeaderProps) => {
 	if (!hasSelectedTask) {
 		return (
 			<header className="flex flex-col items-center gap-[0.4rem]">

src/pages/TimerPage/SideMenuTimer/SideMenuTimer.tsx

@@ -84,14 +84,24 @@ const SideMenuTimer = ({ ongoingTodos = [], completedTodos = [] }: SideMenuTimer
 							setCompletedTodoToggle(true);
 						}
 
+						// 선택된 할 일의 상태가 변경되면 타이머 정지 및 남은 할 일 중 첫번 째 할 일 선택
+						if (selectedTask.id === taskId && actions.stopCurrentTimer) {
+							actions.stopCurrentTimer(selectedTask.id);
+							const remainingTodos = ongoingTodos.filter((todo) => todo.id !== taskId);
+							if (remainingTodos.length > 0) {
+								const next = remainingTodos[0];
+								actions.selectTask(next.id, next.elapsedTime, next.name, next.categoryName);
+							}
+						}
+
 						queryClient.invalidateQueries({
 							queryKey: timerKeys.todos({ targetDate: todayFormattedDate }),
 						});
 					},
 				},
 			);
 		},
-		[toggleTaskStatus, todayFormattedDate, queryClient],
+		[toggleTaskStatus, todayFormattedDate, queryClient, selectedTask.id, actions, ongoingTodos],
 	);
 
 	// 할일 항목 렌더링 함수 - 최적화됨
@@ -102,9 +112,13 @@ const SideMenuTimer = ({ ongoingTodos = [], completedTodos = [] }: SideMenuTimer
 				{...todo}
 				isSelected={todo.id === selectedTask.id}
 				onClick={() => handleTodoClick(todo)}
-				onToggleComplete={() => handleToggleTodoComplete(todo.id, isOngoing)}
+				onToggleComplete={(e) => {
+					e.stopPropagation();
+					handleToggleTodoComplete(todo.id, isOngoing);
+				}}
 				timerIncreasedTime={getTimerIncreasedTime(todo.id, todo.elapsedTime, selectedTask.id, timer)}
 				undeletable={true}
+				disableHoverCalendar={true}
 			/>
 		),
 		[handleTodoClick, handleToggleTodoComplete, selectedTask.id, timer],