refactor: timer 컴포넌트/훅 컨벤션에 맞게 정리 및 불필요 컴포넌트/훅 삭제 (#230)

src/pages/TimerPage/components/Carousel.tsx → src/pages/TimerPage/Carousel/Carousel.tsx

@@ -1,9 +1,9 @@
-import useFriendInfoCarousel from '@/shared/hooks/useFriendInfoCarousel';
-
 import { Direction } from '@/shared/types/global';
 
 import ArrowSVGBtn from '@/components/atoms/ArrowSVGBtn';
-import FriendInfo from '@/pages/TimerPage/components/CarouselContainer';
+import FriendInfo from '@/pages/TimerPage/ContainerCarousel/ContainerCarousel';
+
+import useFriendInfoCarousel from './hooks/useFriendInfoCarousel';
 
 const Carousel = () => {
 	const { handlePrevClick, handleNextClick, visibleFriends } = useFriendInfoCarousel();

src/pages/TimerPage/components/CarouselContainer.tsx → src/pages/TimerPage/ContainerCarousel/ContainerCarousel.tsx

@@ -1,18 +1,18 @@
-import useCarouselTimer from '@/shared/hooks/useCarouselTimer';
-
 import { formatSeconds } from '@/shared/utils/time';
 
 import ClockIcon from '@/shared/assets/svgs/icon_clock.svg?react';
 
-interface CarouselContainerProps {
+import useCarouselTimer from './hooks/useCarouselTimer';
+
+interface ContainerCarouselProps {
 	image: string;
 	name: string;
 	time: number;
 	categoryname: string;
 	isPlaying: boolean;
 }
 
-const CarouselContainer = ({ image, name, time, categoryname, isPlaying }: CarouselContainerProps) => {
+const ContainerCarousel = ({ image, name, time, categoryname, isPlaying }: ContainerCarouselProps) => {
 	const timer = useCarouselTimer({ isPlaying, previousTime: time });
 	const formattedTime = formatSeconds(timer);
 
@@ -21,12 +21,12 @@ const CarouselContainer = ({ image, name, time, categoryname, isPlaying }: Carou
 			<img src={image} alt="유저 프로필" className="mb-[1rem] h-[7.4rem] w-[7.4rem]" />
 			<div className="flex justify-center gap-[0.2rem]">
 				<ClockIcon />
-				<span className="detail-reg-14 text-mint-02">{formattedTime}</span>
+				<span className="text-mint-02 detail-reg-14">{formattedTime}</span>
 			</div>
-			<span className="detail-semibold-14 text-white">{name}</span>
-			<span className="detail-reg-12 text-gray-04">{categoryname}</span>
+			<span className="text-white detail-semibold-14">{name}</span>
+			<span className="text-gray-04 detail-reg-12">{categoryname}</span>
 		</div>
 	);
 };
 
-export default CarouselContainer;
+export default ContainerCarousel;

src/pages/TimerPage/components/PopoverAllowedService.tsx → src/pages/TimerPage/PopoverAllowedService/PopoverAllowedService.tsx

@@ -30,7 +30,7 @@ const PopoverAllowedService = ({
 	return (
 		<div className="ml-[4.899rem] flex h-[45rem] w-[53.2rem]">
 			<div className="flex w-[23rem] flex-col rounded-l-[8px] bg-gray-bg-02 p-[1rem]">
-				<h3 className="detail-reg-14 h-[3.4rem] w-[21rem] px-[1.7rem] py-[1rem] text-gray-04">허용서비스 세트</h3>
+				<h3 className="h-[3.4rem] w-[21rem] px-[1.7rem] py-[1rem] text-gray-04 detail-reg-14">허용서비스 세트</h3>
 				<ul className="mt-[0.8rem] h-[32.4rem] w-[20.4rem] overflow-y-auto">
 					{ALLOW_SITE_LIST.map((item) => (
 						<li
@@ -54,7 +54,7 @@ const PopoverAllowedService = ({
 									className="h-[1.4rem] w-[1.4rem] rounded border-gray-600 focus:ring"
 								/>
 							</div>
-							<div className="detail-semibold-14 w-[14.9rem] cursor-pointer overflow-hidden text-ellipsis whitespace-nowrap text-white">
+							<div className="w-[14.9rem] cursor-pointer overflow-hidden text-ellipsis whitespace-nowrap text-white detail-semibold-14">
 								{item.allowedservicesetname}
 							</div>
 
@@ -65,21 +65,21 @@ const PopoverAllowedService = ({
 				<div className="flex h-[5.4rem] justify-end gap-[0.5rem] p-[1rem]">
 					<button
 						onClick={onCancel}
-						className="detail-semibold-14 flex h-[3.4rem] w-[5.8rem] items-center justify-center rounded-[3.297px] bg-gray-bg-06 text-white"
+						className="flex h-[3.4rem] w-[5.8rem] items-center justify-center rounded-[3.297px] bg-gray-bg-06 text-white detail-semibold-14"
 					>
 						취소
 					</button>
 					<button
 						onClick={handleRegisterClick}
-						className="detail-semibold-14 flex h-[3.4rem] w-[5.8rem] items-center justify-center rounded-[3.297px] bg-mint-02 text-black"
+						className="flex h-[3.4rem] w-[5.8rem] items-center justify-center rounded-[3.297px] bg-mint-02 text-black detail-semibold-14"
 					>
 						등록
 					</button>
 				</div>
 			</div>
 
 			<div className="flex w-[30.2rem] flex-col gap-[0.8rem] rounded-r-[8px] bg-gray-bg-03 py-[1rem] pl-[0.9rem] pr-[1.7rem]">
-				<h3 className="detail-reg-14 h-[3.4rem] w-[28.6rem] p-[1rem] text-gray-04">허용할 사이트</h3>
+				<h3 className="h-[3.4rem] w-[28.6rem] p-[1rem] text-gray-04 detail-reg-14">허용할 사이트</h3>
 				<ul className="h-[37.6rem] overflow-y-auto">
 					{ALLOW_SITE_LIST.filter((item) => item.id === selectedSetId).map((item) =>
 						item.allowedsites.map((site, index) => (
@@ -88,7 +88,7 @@ const PopoverAllowedService = ({
 								className="flex h-[3.2rem] w-[27.6rem] items-center gap-[1rem] rounded-[3px] px-[0.7rem] odd:bg-gray-bg-02"
 							>
 								<img src={site.src} alt={`${site.name} Icon`} className="h-6 w-6" />
-								<span className="detail-reg-12 text-white">{site.name}</span>
+								<span className="text-white detail-reg-12">{site.name}</span>
 							</li>
 						)),
 					)}

src/pages/TimerPage/components/SideBarTimer.tsx → src/pages/TimerPage/SidebarTimer/SideBarTimer.tsx

@@ -12,7 +12,8 @@ import BtnListIcon from '@/shared/assets/svgs/btn_list.svg?react';
 
 import BoxTodo from '@/pages/HomePage/components/BoxTodo';
 import ButtonTodoToggle from '@/pages/HomePage/components/ButtonTodoToggle';
-import ButtonSideBar from '@/pages/TimerPage/components/ButtonSideBar';
+
+import ButtonSideBar from './ButtonSideBar/ButtonSideBar';
 
 interface CategoryBoxProps {
 	completedTodos: Todo[];
@@ -103,7 +104,7 @@ const SideBarTimer = ({
 			className={`absolute right-0 flex h-full w-[40.2rem] transform flex-col rounded-bl-[16px] rounded-tl-[16px] bg-gray-bg-03 pl-[1.8rem] transition-transform duration-300 ${isSideOpen ? 'translate-x-0' : 'translate-x-full'}`}
 		>
 			<div className="flex h-[5.4rem] w-[36.6rem] items-center justify-between pl-[0.2rem] pt-[2rem]">
-				<p className="head-bold-24 text-white">오늘 할 일</p>
+				<p className="text-white head-bold-24">오늘 할 일</p>
 				<button className="rounded-[1.5rem] hover:bg-gray-bg-04" onClick={toggleSidebar}>
 					<BtnListIcon />
 				</button>

src/pages/TimerPage/components/TitleAllowedService.tsx → src/pages/TimerPage/TItleAllowedService/TitleAllowedService.tsx

@@ -1,7 +1,7 @@
 import MoribSetBtnActiveIcon from '@/shared/assets/svgs/btn_moribset_active.svg?react';
 import MoribSetBtnDefaultIcon from '@/shared/assets/svgs/btn_moribset_default.svg?react';
 
-import ToolTipAllowedService from './ToolTipAllowedService';
+import ToolTipAllowedService from './TooltipAllowedService/ToolTipAllowedService';
 
 interface TitleAllowedServiceProps {
 	onClick: () => void;
@@ -17,7 +17,7 @@ const TitleAllowedService = ({ onClick, registeredNames, isAllowedServiceVisible
 			{registeredNames.length > 0 ? (
 				<>
 					<MoribSetBtnActiveIcon className="h-[5.5rem] w-[5.4rem] flex-shrink-0" />
-					<p className="subhead-semibold-20 flex items-center overflow-hidden whitespace-nowrap text-gray-03">
+					<p className="flex items-center overflow-hidden whitespace-nowrap text-gray-03 subhead-semibold-20">
 						<span className="text-mint-01">[</span>
 						<span className="overflow-hidden text-ellipsis whitespace-nowrap text-mint-01">{joinedNames}</span>
 						<span className="text-mint-01">] 허용 서비스 세트 실행 중</span>
@@ -27,7 +27,7 @@ const TitleAllowedService = ({ onClick, registeredNames, isAllowedServiceVisible
 				<div className="h-[7rem] flex-col items-center">
 					<div className="flex items-center">
 						<MoribSetBtnDefaultIcon />
-						<p className="subhead-semibold-20 text-gray-03">허용서비스 세트를 등록해주세요.</p>
+						<p className="text-gray-03 subhead-semibold-20">허용서비스 세트를 등록해주세요.</p>
 					</div>
 					{!isAllowedServiceVisible && (
 						<div className="ml-[1.2rem]">

src/pages/TimerPage/components/ToolTipAllowedService.tsx → src/pages/TimerPage/TItleAllowedService/TooltipAllowedService/ToolTipAllowedService.tsx

@@ -4,7 +4,7 @@ const ToolTipAllowedService = () => {
 	return (
 		<div className="relative">
 			<TriangleIcon className="absolute left-[1rem] top-[-1rem]" />
-			<div className="body-reg-16 flex h-[3.6rem] w-auto items-center justify-center rounded-[5px] bg-gray-bg-02 px-[2.8rem] py-[0.7rem] text-gray-05">
+			<div className="flex h-[3.6rem] w-auto items-center justify-center rounded-[5px] bg-gray-bg-02 px-[2.8rem] py-[0.7rem] text-gray-05 body-reg-16">
 				허용 서비스 세트를 먼저 설정해주세요.
 			</div>
 		</div>

src/pages/TimerPage/components/Timer.tsx → src/pages/TimerPage/Timer/Timer.tsx

@@ -4,10 +4,10 @@ import { usePostTimerStop } from '@/shared/apis/timer/queries';
 
 import InnerCircleIcon from '@/shared/assets/svgs/elipse.svg?react';
 
-import AccumulatedTime from '@/pages/TimerPage/components/AccumulatedTime';
-import ButtonTimerPlay from '@/pages/TimerPage/components/ButtonTimerPlay';
-import ProgressCircle from '@/pages/TimerPage/components/ProgressCircle';
-import TaskTime from '@/pages/TimerPage/components/TaskTime';
+import AccumulatedTime from './AccumulatedTime/AccumulatedTime';
+import ButtonTimerPlay from './ButtonTimerPlay/ButtonTimerPlay';
+import ProgressCircle from './ProgressCircle/ProgressCircle';
+import TaskTime from './TaskTime/TaskTime';
 
 interface TaskTotalTimeProps {
 	selectedTodo: number | null;

src/pages/TimerPage/TimerPage.tsx

@@ -4,9 +4,6 @@ import utc from 'dayjs/plugin/utc';
 
 import { useEffect, useMemo, useState } from 'react';
 
-import { useSelectedTodo } from '@/shared/hooks/useSelectedTodo';
-import useTimerCount from '@/shared/hooks/useTimerCount';
-import useToggleSidebar from '@/shared/hooks/useToggleSideBar';
 import useUrlHandler from '@/shared/hooks/useUrlHandler';
 
 import { useGetMoribSet, useGetTodoList, usePostTimerStop } from '@/shared/apis/timer/queries';
@@ -20,11 +17,13 @@ import HamburgerIcon from '@/shared/assets/svgs/btn_hamburger.svg?react';
 import HomeIcon from '@/shared/assets/svgs/btn_home.svg?react';
 
 import TimerPageTemplates from '@/components/templates/TimerPageTemplates';
-import Carousel from '@/pages/TimerPage/components/Carousel';
-import SideBarTimer from '@/pages/TimerPage/components/SideBarTimer';
-import Timer from '@/pages/TimerPage/components/Timer';
-import TitleAllowedService from '@/pages/TimerPage/components/TitleAllowedService';
-import PopoverAllowedService from '@/pages/TimerPage/components/PopoverAllowedService';
+
+import Carousel from './Carousel/Carousel';
+import PopoverAllowedService from './PopoverAllowedService/PopoverAllowedService';
+import SideBarTimer from './SidebarTimer/SideBarTimer';
+import TitleAllowedService from './TItleAllowedService/TitleAllowedService';
+import Timer from './Timer/Timer';
+import { useSelectedTodo, useTimerCount, useToggleSidebar } from './hooks';
 
 dayjs.extend(utc);
 dayjs.extend(timezone);
@@ -129,7 +128,11 @@ const TimerPage = () => {
 		<TimerPageTemplates>
 			<div className="flex flex-col">
 				<div className="relative flex w-screen justify-between">
-					<TitleAllowedService onClick={handleMoribSetTitleClick} registeredNames={registeredNames} isAllowedServiceVisible={isAllowedServiceVisible} />
+					<TitleAllowedService
+						onClick={handleMoribSetTitleClick}
+						registeredNames={registeredNames}
+						isAllowedServiceVisible={isAllowedServiceVisible}
+					/>
 					<div className="mr-[3.2rem] mt-[3.2rem] flex w-[10.8rem] items-center">
 						<button className="h-[5.4rem] w-[5.4rem] rounded-[1.5rem] hover:bg-gray-bg-04">
 							<HomeIcon />
@@ -143,17 +146,17 @@ const TimerPage = () => {
 					</div>
 				</div>
 				{isAllowedServiceVisible && (
-					<div className="absolute top-[8rem]  z-10 flex">
+					<div className="absolute top-[8rem] z-10 flex">
 						<PopoverAllowedService onCancel={handleCancelClick} onRegister={handleRegister} />
 					</div>
 				)}
 
 				<div
-					className={`mt-[-0.8rem] flex w-screen h-screen min-h-[908px] min-w-[1080px] flex-col items-center justify-center transition-[padding-right] duration-300 ${isSidebarOpen ? 'pr-0 2xl:pr-[40.2rem]' : 'pr-0'}`}
+					className={`mt-[-0.8rem] flex h-screen min-h-[908px] w-screen min-w-[1080px] flex-col items-center justify-center transition-[padding-right] duration-300 ${isSidebarOpen ? 'pr-0 2xl:pr-[40.2rem]' : 'pr-0'}`}
 				>
 					<header className="mt-[8.6rem] flex flex-col items-center gap-[1rem]">
-						<h1 className="title-semibold-64 text-white">{selectedTodoData?.name || ''}</h1>
-						<h2 className="title-med-32 text-gray-04">{selectedTodoData?.categoryName || ''}</h2>
+						<h1 className="text-white title-semibold-64">{selectedTodoData?.name || ''}</h1>
+						<h2 className="text-gray-04 title-med-32">{selectedTodoData?.categoryName || ''}</h2>
 					</header>
 					<Timer
 						selectedTodo={selectedTodo}

src/pages/TimerPage/hooks/index.ts

@@ -0,0 +1,3 @@
+export { useSelectedTodo } from './useSelectedTodo';
+export { useTimerCount } from './useTimerCount';
+export { useToggleSidebar } from './useToggleSidebar';

src/shared/hooks/useTimerCount.ts → src/pages/TimerPage/hooks/useTimerCount.ts

@@ -11,7 +11,7 @@ interface UseTimerCountReturn {
 	resetIncreasedTime: () => void;
 }
 
-const useTimerCount = ({ isPlaying, previousTime }: UseTimerCountProps): UseTimerCountReturn => {
+export const useTimerCount = ({ isPlaying, previousTime }: UseTimerCountProps): UseTimerCountReturn => {
 	const [increasedTime, setIncreasedTime] = useState(0);
 	const timerIntervalId = useRef<ReturnType<typeof setInterval> | null>(null);
 
@@ -50,5 +50,3 @@ const useTimerCount = ({ isPlaying, previousTime }: UseTimerCountProps): UseTime
 
 	return { timer, increasedTime, resetIncreasedTime };
 };
-
-export default useTimerCount;

src/shared/hooks/useToggleSideBar.ts → src/pages/TimerPage/hooks/useToggleSidebar.ts

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 
-const useToggleSideBar = () => {
+export const useToggleSidebar = () => {
 	const [isSidebarOpen, setIsSidebarOpen] = useState(false);
 
 	const handleSidebarToggle = () => {
@@ -12,5 +12,3 @@ const useToggleSideBar = () => {
 		handleSidebarToggle,
 	};
 };
-
-export default useToggleSideBar;