[Refactor] 타이머 페이지 폴더 구조 변경 (#233)

* refactor: timer 컴포넌트/훅 컨벤션에 맞게 정리 및 불필요 컴포넌트/훅 삭제 (#230) * refactor: 불필요한 templates 컴포넌트 삭제 (#230) * Merge branch 'develop' of github.com:morib-in/Morib-Client into refactor/#230/timer-folder-structure
morib-in · Dec 27, 2024 · 201c4b0 · 201c4b0
1 parent d3708d8
commit 201c4b0
Show file tree

Hide file tree

Showing 24 changed files with 48 additions and 104 deletions.
diff --git a/src/components/templates/TimerPageTemplates/index.tsx b/src/components/templates/TimerPageTemplates/index.tsx
diff --git a/src/pages/TimerPage/components/Carousel.tsx → src/pages/TimerPage/Carousel/Carousel.tsx b/src/pages/TimerPage/components/Carousel.tsx → src/pages/TimerPage/Carousel/Carousel.tsx
@@ -1,10 +1,9 @@
 import ArrowSVGBtn from '@/shared/components/Button/ButtonArrowSVG/ButtonArrowSVG';
 
-import useFriendInfoCarousel from '@/shared/hooks/useFriendInfoCarousel';
-
 import { Direction } from '@/shared/types/global';
 
-import FriendInfo from '@/pages/TimerPage/components/CarouselContainer';
+import ContainerCarousel from './ContainerCarousel/ContainerCarousel';
+import useFriendInfoCarousel from './hooks/useFriendInfoCarousel';
 
 const Carousel = () => {
 	const { handlePrevClick, handleNextClick, visibleFriends } = useFriendInfoCarousel();
@@ -14,7 +13,7 @@ const Carousel = () => {
 			<ArrowSVGBtn className="mr-[5.8rem]" direction={Direction.LEFT} onClick={handlePrevClick} />
 			<div className="flex gap-[4.2rem] pl-[1rem] pr-[1rem]">
 				{visibleFriends().map((friend) => (
-					<FriendInfo
+					<ContainerCarousel
 						key={friend.id}
 						image={friend.image}
 						time={friend.time}

diff --git a/...imerPage/components/CarouselContainer.tsx → ...l/ContainerCarousel/ContainerCarousel.tsx b/...imerPage/components/CarouselContainer.tsx → ...l/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;
diff --git a/src/shared/hooks/useCarouselTimer.ts → ...ntainerCarousel/hooks/useCarouselTimer.ts b/src/shared/hooks/useCarouselTimer.ts → ...ntainerCarousel/hooks/useCarouselTimer.ts
diff --git a/src/shared/hooks/useFriendInfoCarousel.ts → ...e/Carousel/hooks/useFriendInfoCarousel.ts b/src/shared/hooks/useFriendInfoCarousel.ts → ...e/Carousel/hooks/useFriendInfoCarousel.ts
diff --git a/...Page/components/PopoverAllowedService.tsx → ...rAllowedService/PopoverAllowedService.tsx b/...Page/components/PopoverAllowedService.tsx → ...rAllowedService/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>
 						)),
 					)}

diff --git a/...ges/TimerPage/components/SideBoxTimer.tsx → ...s/TimerPage/SideBoxTimer/SideBoxTimer.tsx b/...ges/TimerPage/components/SideBoxTimer.tsx → ...s/TimerPage/SideBoxTimer/SideBoxTimer.tsx
diff --git a/...es/TimerPage/components/ButtonSideBar.tsx → ...ebarTimer/ButtonSideBar/ButtonSideBar.tsx b/...es/TimerPage/components/ButtonSideBar.tsx → ...ebarTimer/ButtonSideBar/ButtonSideBar.tsx
diff --git a/...ges/TimerPage/components/SideBarTimer.tsx → ...s/TimerPage/SidebarTimer/SideBarTimer.tsx b/...ges/TimerPage/components/SideBarTimer.tsx → ...s/TimerPage/SidebarTimer/SideBarTimer.tsx
@@ -13,7 +13,7 @@ import { Todo } from '@/shared/types/todoData';
 
 import BtnListIcon from '@/shared/assets/svgs/btn_list.svg?react';
 
-import ButtonSideBar from '@/pages/TimerPage/components/ButtonSideBar';
+import ButtonSideBar from './ButtonSideBar/ButtonSideBar';
 
 interface CategoryBoxProps {
 	completedTodos: Todo[];

diff --git a/...erPage/components/TitleAllowedService.tsx → ...tleAllowedService/TitleAllowedService.tsx b/...erPage/components/TitleAllowedService.tsx → ...tleAllowedService/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]">

diff --git a/...Page/components/ToolTipAllowedService.tsx → ...pAllowedService/ToolTipAllowedService.tsx b/...Page/components/ToolTipAllowedService.tsx → ...pAllowedService/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>

diff --git a/.../TimerPage/components/AccumulatedTime.tsx → ...Timer/AccumulatedTime/AccumulatedTime.tsx b/.../TimerPage/components/AccumulatedTime.tsx → ...Timer/AccumulatedTime/AccumulatedTime.tsx
diff --git a/.../TimerPage/components/ButtonTimerPlay.tsx → ...Timer/ButtonTimerPlay/ButtonTimerPlay.tsx b/.../TimerPage/components/ButtonTimerPlay.tsx → ...Timer/ButtonTimerPlay/ButtonTimerPlay.tsx
diff --git a/...s/TimerPage/components/ProgressCircle.tsx → ...e/Timer/ProgressCircle/ProgressCircle.tsx b/...s/TimerPage/components/ProgressCircle.tsx → ...e/Timer/ProgressCircle/ProgressCircle.tsx
diff --git a/src/pages/TimerPage/components/TaskTime.tsx → ...ges/TimerPage/Timer/TaskTime/TaskTime.tsx b/src/pages/TimerPage/components/TaskTime.tsx → ...ges/TimerPage/Timer/TaskTime/TaskTime.tsx
diff --git a/src/pages/TimerPage/components/Timer.tsx → src/pages/TimerPage/Timer/Timer.tsx b/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;

diff --git a/src/pages/TimerPage/TimerPage.tsx b/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';
@@ -19,12 +16,12 @@ import { DATE_FORMAT, DEFAULT_URL, TIMEZONE } from '@/shared/constants/timerPage
 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);
@@ -126,10 +123,14 @@ const TimerPage = () => {
 	}
 
 	return (
-		<TimerPageTemplates>
+		<div className="relative flex h-screen w-screen overflow-hidden bg-gray-bg-01">
 			<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 +144,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}
@@ -186,7 +187,7 @@ const TimerPage = () => {
 					resetAccumulatedIncreasedTime={resetAccumulatedIncreasedTime}
 				/>
 			</div>
-		</TimerPageTemplates>
+		</div>
 	);
 };
 

diff --git a/src/pages/TimerPage/components/FaviconSideBox.tsx b/src/pages/TimerPage/components/FaviconSideBox.tsx
diff --git a/src/pages/TimerPage/components/SideBoxTemporary.tsx b/src/pages/TimerPage/components/SideBoxTemporary.tsx
diff --git a/src/pages/TimerPage/hooks/index.ts b/src/pages/TimerPage/hooks/index.ts
@@ -0,0 +1,3 @@
+export { useSelectedTodo } from './useSelectedTodo';
+export { useTimerCount } from './useTimerCount';
+export { useToggleSidebar } from './useToggleSidebar';
diff --git a/src/shared/hooks/useSelectedTodo.ts → src/pages/TimerPage/hooks/useSelectedTodo.ts b/src/shared/hooks/useSelectedTodo.ts → src/pages/TimerPage/hooks/useSelectedTodo.ts
diff --git a/src/shared/hooks/useTimerCount.ts → src/pages/TimerPage/hooks/useTimerCount.ts b/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;
diff --git a/src/shared/hooks/useToggleSideBar.ts → ...pages/TimerPage/hooks/useToggleSidebar.ts b/src/shared/hooks/useToggleSideBar.ts → ...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;
diff --git a/src/shared/hooks/useFunnel.ts b/src/shared/hooks/useFunnel.ts