[Refactor] home 페이지 폴더구조 변경

src/pages/HomePage/components/BoxCategory.tsx → src/pages/HomePage/BoxCategory/BoxCategory.tsx

@@ -2,11 +2,10 @@ import { Dayjs } from 'dayjs';
 
 import { Suspense, lazy, useRef } from 'react';
 
-import ButtonSVG from '@/shared/components/ButtonSVG';
+import BoxTodo from '@/shared/components/BoxTodo/BoxTodo';
+import ButtonTodoToggle from '@/shared/components/ButtonTodayToggle/ButtonTodoToggle';
 
-import { useCalendar } from '@/shared/hooks/useCalendar';
 import useClickOutside from '@/shared/hooks/useClickOutside';
-import { useCreateTodo } from '@/shared/hooks/useCreateTodo';
 
 import { usePatchTaskStatus } from '@/shared/apis/common/queries';
 import { usePostCreateTask } from '@/shared/apis/home/queries';
@@ -16,10 +15,10 @@ import { Task } from '@/shared/types/home';
 import ButtonAddIcon from '@/shared/assets/svgs/btn_task_add.svg?react';
 import MeatBallDefault from '@/shared/assets/svgs/todo_meatball_default.svg?react';
 
-import BoxTodo from './BoxTodo';
-import BoxTodoInput from './BoxTodoInput';
-import ButtonTodoToggle from './ButtonTodoToggle';
-import StatusDefaultBoxCategory from './StatusDefaultBoxCategory';
+import { useCalendar } from '../hooks/useCalendar';
+import BoxTodoInput from './BoxTodoInput/BoxTodoInput';
+import StatusDefaultBoxCategory from './StatusDefaultBoxCategory/StatusDefaultBoxCategory';
+import { useCreateTodo } from './hooks/useCreateTodo';
 
 const Calendar = lazy(() => import('@/shared/components/Calendar'));
 
@@ -116,18 +115,18 @@ const BoxCategory = ({
 	return (
 		<article className="flex h-full w-[40.2rem] flex-shrink-0 flex-col rounded-[16px] bg-gray-bg-03 px-[1.8rem] pt-[1.8rem]">
 			<div className="mt-[0.4rem] flex items-center justify-between">
-				<h2 className="head-bold-24 text-white">{title}</h2>
+				<h2 className="text-white head-bold-24">{title}</h2>
 				<div className="flex gap-[0.1rem]">
-					<ButtonSVG
+					<button
 						onMouseEnter={handleMouseEnter}
 						onClick={startAddingTodo}
 						className="rounded-full hover:bg-gray-bg-04 active:bg-gray-bg-05"
 					>
 						<ButtonAddIcon />
-					</ButtonSVG>
-					<ButtonSVG onClick={() => onDeleteCategory(id)}>
+					</button>
+					<button onClick={() => onDeleteCategory(id)}>
 						<MeatBallDefault className="rounded-full hover:bg-gray-bg-04 active:bg-gray-bg-05" />
-					</ButtonSVG>
+					</button>
 				</div>
 			</div>
 

src/pages/HomePage/components/BoxTodoInput.tsx → src/pages/HomePage/BoxCategory/BoxTodoInput/BoxTodoInput.tsx

@@ -7,8 +7,6 @@ import CheckBoxBlankIcon from '@/shared/assets/svgs/check_box_blank.svg?react';
 import TimeLineIcon from '@/shared/assets/svgs/mingcute_time-line.svg?react';
 import MeatBall from '@/shared/assets/svgs/todo_meatball_default.svg?react';
 
-import SVGBtn from '../../../shared/components/ButtonSVG';
-
 interface BoxTodoInputProps {
 	editable: boolean;
 	onEditComplte: () => void;
@@ -66,31 +64,31 @@ const BoxTodoInput = forwardRef<HTMLDivElement, BoxTodoInputProps>(function BoxT
 			<div className="flex flex-col justify-center">
 				<div className="flex items-center justify-between">
 					<div className="flex items-center gap-[0.6rem]">
-						<SVGBtn>
+						<button>
 							<CheckBoxBlankIcon />
-						</SVGBtn>
+						</button>
 						{isEditing ? (
 							<input
-								className="detail-reg-14 mt-[0.42rem] w-[27.8rem] border-b-[0.1rem] border-b-white bg-transparent text-gray-04 placeholder:text-gray-04 focus:outline-none"
+								className="mt-[0.42rem] w-[27.8rem] border-b-[0.1rem] border-b-white bg-transparent text-gray-04 detail-reg-14 placeholder:text-gray-04 focus:outline-none"
 								value={name}
 								onChange={handleInputChange}
 								onKeyPress={handleKeyPress}
 								placeholder="할 일 입력"
 							/>
 						) : (
-							<h3 className="detail-reg-14 mt-[0.42rem] text-gray-04" onDoubleClick={handleDoubleClick}>
+							<h3 className="mt-[0.42rem] text-gray-04 detail-reg-14" onDoubleClick={handleDoubleClick}>
 								{name}
 							</h3>
 						)}
 					</div>
-					<SVGBtn>
+					<button>
 						<MeatBall className="opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
-					</SVGBtn>
+					</button>
 				</div>
 				<div className="ml-[0.8rem] mt-[0.7rem] flex flex-col gap-[0.2rem]">
 					<button className="flex items-center gap-[0.6rem]">
 						<ButtonCalendarIcon />
-						<p className="detail-reg-12 mt-[0.3rem] text-gray-04">
+						<p className="mt-[0.3rem] text-gray-04 detail-reg-12">
 							{formatDateRange(selectedStartDate, selectedEndDate).length === 0
 								? '오늘'
 								: formatDateRange(selectedStartDate, selectedEndDate)}
@@ -99,7 +97,7 @@ const BoxTodoInput = forwardRef<HTMLDivElement, BoxTodoInputProps>(function BoxT
 
 					<div className="flex items-center gap-[0.6rem]">
 						<TimeLineIcon />
-						<p className="detail-reg-12 mt-[0.3rem] text-gray-04">00:00:00</p>
+						<p className="mt-[0.3rem] text-gray-04 detail-reg-12">00:00:00</p>
 					</div>
 				</div>
 			</div>

src/pages/HomePage/components/StatusDefaultBoxCategory.tsx → src/pages/HomePage/BoxCategory/StatusDefaultBoxCategory/StatusDefaultBoxCategory.tsx

@@ -1,7 +1,7 @@
 const StatusDefaultBoxCategory = () => {
 	return (
 		<div className="flex justify-center text-gray-05">
-			<p className="subhead-bold-22 mt-[27.2rem] text-center">
+			<p className="mt-[27.2rem] text-center subhead-bold-22">
 				할 일을 추가하려면
 				<br />+ 아이콘을 선택해주세요.
 			</p>

src/pages/HomePage/components/BoxTodayTodo.tsx → src/pages/HomePage/BoxTodayTodo/BoxTodayTodo.tsx

@@ -2,8 +2,8 @@ import { convertTime } from '@/shared/utils/time';
 
 import { Task } from '@/shared/types/home';
 
-import StatusAddBoxTodayTodo from './StatusAddBoxTodayTodo';
-import StatusDefaultBoxTodayTodo from './StatusDefaultBoxTodayTodo';
+import StatusAddBoxTodayTodo from './StatusAddBoxTodayTodo/StatusAddBoxTodayTodo';
+import StatusDefaultBoxTodayTodo from './StatusDefaultBoxTodayTodo/StatusDefaultBoxTodayTodo';
 
 interface BoxTodayTodoProps {
 	time: number;
@@ -43,7 +43,7 @@ const BoxTodayTodo = ({
 					<p className="head-bold-24">오늘 나의 몰입 시간</p>
 					<p className="title-bold-32">{`${hours}시간 ${minutes}분 ${seconds}초`}</p>
 				</div>
-				<h3 className="head-bold-24 mt-[3.2rem] text-white">오늘 할 일</h3>
+				<h3 className="mt-[3.2rem] text-white head-bold-24">오늘 할 일</h3>
 				{addingTodayTodoStatus ? (
 					<StatusAddBoxTodayTodo
 						selectedTodayTodos={selectedTodayTodos}

src/components/atoms/HomeSmallBtn/index.tsx → src/pages/HomePage/BoxTodayTodo/StatusAddBoxTodayTodo/ButtonHomeSmall/ButtonHomeSmall.tsx

@@ -1,6 +1,6 @@
 import { ButtonHTMLAttributes } from 'react';
 
-const HomeSmallBtn = ({ children, disabled = false, ...props }: ButtonHTMLAttributes<HTMLButtonElement>) => {
+const ButtonHomeSmall = ({ children, disabled = false, ...props }: ButtonHTMLAttributes<HTMLButtonElement>) => {
 	const defaultStyle =
 		'subhead-bold-20 flex items-center justify-center rounded-[0.8rem] px-[3.6rem] py-[2rem] flex-shrink-0 ';
 	const buttonStyle = disabled
@@ -14,4 +14,4 @@ const HomeSmallBtn = ({ children, disabled = false, ...props }: ButtonHTMLAttrib
 	);
 };
 
-export default HomeSmallBtn;
+export default ButtonHomeSmall;

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

@@ -1,12 +1,12 @@
+import BoxTodo from '@/shared/components/BoxTodo/BoxTodo';
+import HomeLargeBtn from '@/shared/components/Button/ButtonHomeLarge/ButtonHomeLarge';
+
 import { HomeLargeBtnVariant } from '@/shared/types/global';
 import { Task } from '@/shared/types/home';
 
 import { LARGE_BTN_TEXT, SMALL_BTN_TEXT } from '@/shared/constants/btnText';
 
-import HomeLargeBtn from '@/components/atoms/HomeLargeBtn';
-import HomeSmallBtn from '@/components/atoms/HomeSmallBtn';
-
-import BoxTodo from './BoxTodo';
+import HomeSmallBtn from './ButtonHomeSmall/ButtonHomeSmall';
 
 interface StatusAddBoxTodayTodoProps {
 	selectedTodayTodos: Omit<Task, 'isComplete'>[];
@@ -64,7 +64,7 @@ const StatusAddBoxTodayTodo = ({
 					})}
 				</ul>
 			) : (
-				<p className="head-bold-24 mx-auto mt-[22.2rem] text-center text-gray-05">
+				<p className="mx-auto mt-[22.2rem] text-center text-gray-05 head-bold-24">
 					할 일 카드를 선택하여
 					<br />
 					오늘 할 일을 추가해 보세요.

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

@@ -1,8 +1,9 @@
-import HomeLargeBtn from '@/components/atoms/HomeLargeBtn';
+import HomeLargeBtn from '@/shared/components/Button/ButtonHomeLarge/ButtonHomeLarge';
 
-import { LARGE_BTN_TEXT } from '@/shared/constants/btnText';
 import { HomeLargeBtnVariant } from '@/shared/types/global';
 
+import { LARGE_BTN_TEXT } from '@/shared/constants/btnText';
+
 interface StatusDefaultBoxTodayTodoProps {
 	hasTodos: boolean;
 	onEnableAddStatus: () => void;
@@ -11,8 +12,8 @@ interface StatusDefaultBoxTodayTodoProps {
 const StatusDefaultBoxTodayTodo = ({ hasTodos, onEnableAddStatus }: StatusDefaultBoxTodayTodoProps) => {
 	return (
 		<div className="mt-[21.4rem] flex w-full flex-col justify-center text-white">
-			<p className="subhead-med-18 text-center text-gray-03">아직 오늘 할 일이 없어요</p>
-			<p className="subhead-bold-22 mb-[2.2rem] mt-[1.2rem] text-center text-gray-05">
+			<p className="text-center text-gray-03 subhead-med-18">아직 오늘 할 일이 없어요</p>
+			<p className="mb-[2.2rem] mt-[1.2rem] text-center text-gray-05 subhead-bold-22">
 				할 일을 추가해
 				<br />
 				타이머를 시작해보세요.

src/pages/HomePage/components/ButtonMoreFriends.tsx → src/pages/HomePage/ButtonMoreFriends/ButtonMoreFriends.tsx

@@ -10,7 +10,7 @@ const ButtonMoreFriends = ({ friendsCount, ...props }: ButtonMoreFriendsProps) =
 	return (
 		<button className="relative mb-[2rem] h-[5.4rem] w-[5.4rem]" {...props}>
 			<ButtonMoreFriendIcon className="rounded-full hover:bg-gray-bg-04" />
-			<p className="subhead-med-18 absolute left-[1.4rem] top-[1.9rem] z-10 text-gray-04">+{friendsCount}</p>
+			<p className="absolute left-[1.4rem] top-[1.9rem] z-10 text-gray-04 subhead-med-18">+{friendsCount}</p>
 		</button>
 	);
 };

src/pages/HomePage/components/ButtonUserProfile.tsx → src/pages/HomePage/ButtonUserProfile/ButtonUserProfile.tsx

@@ -29,7 +29,7 @@ const ButtonUserProfile = ({
 				</div>
 			</div>
 			{(isMyProfile || isSelectedUser) && (
-				<h3 className="detail-semibold-14 mt-[0.2rem] max-w-full truncate text-mint-01">{userName}</h3>
+				<h3 className="mt-[0.2rem] max-w-full truncate text-mint-01 detail-semibold-14">{userName}</h3>
 			)}
 		</button>
 	);

src/components/atoms/DateBtn/index.tsx → src/pages/HomePage/DatePicker/ButtonDate/ButtonDate.tsx

@@ -5,7 +5,7 @@ interface DateBtnProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 	children: ReactNode;
 }
 
-const DateBtn = ({ isSelected, children, ...props }: DateBtnProps) => {
+const ButtonDate = ({ isSelected, children, ...props }: DateBtnProps) => {
 	const commonBtnStyle = 'flex w-full h-[7.6rem] items-center justify-center text-white ';
 	const textStyle = isSelected ? 'head-bold-24' : 'subhead-reg-22';
 	const borderStyle = isSelected ? 'border-b-[0.3rem] border-mint-01' : 'border-b-[0.2rem] border-gray-02';
@@ -22,4 +22,4 @@ const DateBtn = ({ isSelected, children, ...props }: DateBtnProps) => {
 	);
 };
 
-export default DateBtn;
+export default ButtonDate;

src/pages/HomePage/components/DatePicker.tsx → src/pages/HomePage/DatePicker/DatePicker.tsx

@@ -1,21 +1,19 @@
 import { Dayjs } from 'dayjs';
 
+import ArrowSVGBtn from '@/shared/components/Button/ButtonArrowSVG/ButtonArrowSVG';
 import ButtonDropdownOptions from '@/shared/components/ButtonDropdownOptions';
 import Dropdown from '@/shared/components/Dropdown';
 
-import { useDatePicker } from '@/shared/hooks/useDatePicker';
-
 import { getHomeDropdownData } from '@/shared/utils/date';
 
 import { Direction } from '@/shared/types/global';
 
 import ButtonArrowIcon from '@/shared/assets/svgs/btn_arrow.svg?react';
 import ButtonTodayIcon from '@/shared/assets/svgs/btn_today.svg?react';
 
-import ArrowSVGBtn from '@/components/atoms/ArrowSVGBtn';
-import DateBtn from '@/components/atoms/DateBtn';
+import DateBtn from '@/pages/HomePage/DatePicker/ButtonDate/ButtonDate';
 
-import ButtonSVG from '../../../shared/components/ButtonSVG';
+import { useDatePicker } from './hooks/useDatePicker';
 
 interface DatePickerProps {
 	todayDate: Dayjs;
@@ -40,7 +38,7 @@ const DatePicker = ({ todayDate, selectedDate, onSelectedDateChange }: DatePicke
 				<Dropdown.Root>
 					<Dropdown.Trigger>
 						<div className="mb-[0.6rem] flex items-center gap-[2rem]">
-							<h1 className="title-bold-32 text-white">{currentDate.format('YYYY년 MM월')}</h1>;
+							<h1 className="text-white title-bold-32">{currentDate.format('YYYY년 MM월')}</h1>;
 							<ButtonArrowIcon className={'rounded-full bg-gray-bg-03 hover:bg-gray-bg-05'} />
 						</div>
 					</Dropdown.Trigger>
@@ -82,9 +80,9 @@ const DatePicker = ({ todayDate, selectedDate, onSelectedDateChange }: DatePicke
 				</nav>
 				<div className="mr-[9.8rem] flex gap-[1rem]">
 					<ArrowSVGBtn direction={Direction.LEFT} onClick={handlePreviousWeek} />
-					<ButtonSVG onClick={handleClickTodayBtn}>
+					<button onClick={handleClickTodayBtn}>
 						<ButtonTodayIcon className="rounded-[37px] bg-gray-bg-03 hover:bg-gray-bg-05" />
-					</ButtonSVG>
+					</button>
 					<ArrowSVGBtn direction={Direction.RIGHT} onClick={handleNextWeek} />
 				</div>
 			</div>

src/pages/HomePage/HomePage.tsx

@@ -29,14 +29,14 @@ import LargePlusIcon from '@/shared/assets/svgs/large_plus.svg?react';
 
 import { ROUTES_CONFIG } from '@/router/routesConfig';
 
-import ButtonSVG from '../../shared/components/ButtonSVG';
-import BoxCategory from './components/BoxCategory';
-import BoxTodayTodo from './components/BoxTodayTodo';
-import ButtonMoreFriends from './components/ButtonMoreFriends';
-import ButtonUserProfile from './components/ButtonUserProfile';
-import DatePicker from './components/DatePicker';
-import { ModalContentsCategory, ModalContentsFriends } from './components/ModalContents';
-import StatusDefaultHome from './components/StatusDefaultHome';
+import BoxCategory from './BoxCategory/BoxCategory';
+import BoxTodayTodo from './BoxTodayTodo/BoxTodayTodo';
+import ButtonMoreFriends from './ButtonMoreFriends/ButtonMoreFriends';
+import ButtonUserProfile from './ButtonUserProfile/ButtonUserProfile';
+import DatePicker from './DatePicker/DatePicker';
+import ModalContentsCategory from './ModalContentsCategory/ModalContentsCategory';
+import ModalContentsFriends from './ModalContentsFriends/ModalContentsFriends';
+import StatusDefaultHome from './StatusDefaultHome/StatusDefaultHome';
 
 dayjs.extend(utc);
 dayjs.extend(timezone);
@@ -222,9 +222,9 @@ const HomePage = () => {
 									})}
 									{dailyCategoryTask.length <= 2 && (
 										<div className="flex flex-col">
-											<ButtonSVG className="flex-shrink-0" onClick={handleOpenCategoryModal}>
+											<button className="flex-shrink-0" onClick={handleOpenCategoryModal}>
 												<LargePlusIcon className="rounded-full bg-gray-bg-03 hover:bg-gray-bg-05" />
-											</ButtonSVG>
+											</button>
 										</div>
 									)}
 								</>
@@ -234,9 +234,9 @@ const HomePage = () => {
 						</div>
 						{dailyCategoryTask.length > 2 && (
 							<div className="mx-[2.2rem] flex flex-col">
-								<ButtonSVG className="flex-shrink-0" onClick={handleOpenCategoryModal}>
+								<button className="flex-shrink-0" onClick={handleOpenCategoryModal}>
 									<LargePlusIcon className="rounded-full bg-gray-bg-03 hover:bg-gray-bg-05" />
-								</ButtonSVG>
+								</button>
 							</div>
 						)}
 					</div>

src/pages/HomePage/components/ModalContents/Setting/components/ButtonAlert.tsx → src/pages/HomePage/ModalContentsAlert/ButtonAlert/ButtonAlert.tsx

@@ -13,7 +13,7 @@ const ButtonAlert = ({ children, variant = 'primary', className = '', ...props }
 	return (
 		<button
 			{...props}
-			className={`subhead-semibold-18 w-full rounded-[5px] px-[4.8rem] py-[1rem] text-center text-white ${buttonStyle} ${className}`}
+			className={`w-full rounded-[5px] px-[4.8rem] py-[1rem] text-center text-white subhead-semibold-18 ${buttonStyle} ${className}`}
 		>
 			{children}
 		</button>

src/pages/HomePage/ModalContentsAlert/Complete/Complete.tsx

@@ -0,0 +1,16 @@
+import ButtonAlert from '../ButtonAlert/ButtonAlert';
+import { AlertModalProps } from '../types/index';
+
+const Complete = ({ handleClose, userEmail }: AlertModalProps) => (
+	<div className="flex flex-col rounded-[0.8rem] bg-gray-bg-04 p-[3rem]">
+		<div className="w-[47.2rem]">
+			<p className="flex justify-center text-white subhead-bold-22">{userEmail} 계정이</p>
+			<p className="mb-[3rem] flex justify-center text-white subhead-bold-22"> 삭제되었습니다.</p>
+			<ButtonAlert variant="primary" onClick={handleClose}>
+				확인
+			</ButtonAlert>
+		</div>
+	</div>
+);
+
+export default Complete;

src/pages/HomePage/components/ModalContents/Setting/ModalContentsAlert/DeleteAccount.tsx → src/pages/HomePage/ModalContentsAlert/DeleteAccount/DeleteAccount.tsx

@@ -2,8 +2,8 @@ import { FormEvent, useRef, useState } from 'react';
 
 import IconWarning from '@/shared/assets/svgs/ic_delete_alert.svg?react';
 
-import { AlertModalProps } from '@/pages/HomePage/components/ModalContents/Setting/ModalContentsAlert/ModalContentsAlert';
-import ButtonAlert from '@/pages/HomePage/components/ModalContents/Setting/components/ButtonAlert';
+import ButtonAlert from '../ButtonAlert/ButtonAlert';
+import { AlertModalProps } from '../types/index';
 
 const DeleteAccount = ({ handleClose, userEmail }: AlertModalProps) => {
 	const inputRef = useRef<HTMLInputElement | null>(null);
@@ -27,22 +27,22 @@ const DeleteAccount = ({ handleClose, userEmail }: AlertModalProps) => {
 				<div className="mb-[3rem] flex justify-center">
 					<IconWarning width="5.4rem" />
 				</div>
-				<p className="subhead-bold-22 flex justify-center text-white">{userEmail} 계정이</p>
-				<p className="subhead-bold-22 mb-[3rem] flex justify-center text-white">
+				<p className="flex justify-center text-white subhead-bold-22">{userEmail} 계정이</p>
+				<p className="mb-[3rem] flex justify-center text-white subhead-bold-22">
 					영구적으로 삭제됩니다. 삭제하시겠습니까?
 				</p>
-				<p className="subhead-med-18 mb-[1rem] flex justify-center text-gray-05">이메일을 입력하여 확인해주세요.</p>
+				<p className="mb-[1rem] flex justify-center text-gray-05 subhead-med-18">이메일을 입력하여 확인해주세요.</p>
 				<form action="" onSubmit={handleSubmit}>
 					<input
 						ref={inputRef}
 						type="text"
 						placeholder={userEmail}
 						onChange={handleInputChange}
-						className={`${error ? 'border-[1px] border-error-01' : ''} subhead-med-18 placeholder-text-gray-03 w-full rounded-[5px] bg-gray-bg-02 p-[1rem] text-white outline-none`}
+						className={`${error ? 'border-[1px] border-error-01' : ''} placeholder-text-gray-03 w-full rounded-[5px] bg-gray-bg-02 p-[1rem] text-white outline-none subhead-med-18`}
 					/>
 					{error && (
 						<div className="absolute mt-[1rem]">
-							<p className="body-reg-16 mb-[3rem] text-error-01">계속하려면 “{userEmail}”을(를) 입력하세요.</p>
+							<p className="mb-[3rem] text-error-01 body-reg-16">계속하려면 “{userEmail}”을(를) 입력하세요.</p>
 						</div>
 					)}
 					<div className="mt-[5.7rem] flex gap-[1rem]">