refactor: ButtonSVG 사용 불필요하여 삭제 (#230)

morib-in · Dec 21, 2024 · 962b859 · 962b859
1 parent a73b3af
commit 962b859
Show file tree

Hide file tree

Showing 8 changed files with 25 additions and 50 deletions.
diff --git a/src/pages/HomePage/Box/BoxCategory/BoxCategory.tsx b/src/pages/HomePage/Box/BoxCategory/BoxCategory.tsx
@@ -3,7 +3,6 @@ import { Dayjs } from 'dayjs';
 import { Suspense, lazy, useRef } from 'react';
 
 import BoxTodo from '@/shared/components/BoxTodo/BoxTodo';
-import ButtonSVG from '@/shared/components/ButtonSVG';
 import ButtonTodoToggle from '@/shared/components/ButtonTodayToggle/ButtonTodoToggle';
 
 import useClickOutside from '@/shared/hooks/useClickOutside';
@@ -118,16 +117,16 @@ const BoxCategory = ({
 			<div className="mt-[0.4rem] flex items-center justify-between">
 				<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>
 

diff --git a/src/pages/HomePage/Box/BoxCategory/BoxTodoInput/BoxTodoInput.tsx b/src/pages/HomePage/Box/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,9 +64,9 @@ 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="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"
@@ -83,9 +81,9 @@ const BoxTodoInput = forwardRef<HTMLDivElement, BoxTodoInputProps>(function BoxT
 							</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]">

diff --git a/src/pages/HomePage/DatePicker/DatePicker.tsx b/src/pages/HomePage/DatePicker/DatePicker.tsx
@@ -13,7 +13,6 @@ import ButtonTodayIcon from '@/shared/assets/svgs/btn_today.svg?react';
 
 import DateBtn from '@/pages/HomePage/DatePicker/ButtonDate/ButtonDate';
 
-import ButtonSVG from '../../../shared/components/ButtonSVG';
 import { useDatePicker } from './hooks/useDatePicker';
 
 interface DatePickerProps {
@@ -81,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>

diff --git a/src/pages/HomePage/HomePage.tsx b/src/pages/HomePage/HomePage.tsx
@@ -7,7 +7,6 @@ import { useNavigate } from 'react-router-dom';
 
 import { useQueryClient } from '@tanstack/react-query';
 
-import ButtonSVG from '@/shared/components/ButtonSVG';
 import ModalWrapper, { ModalWrapperRef } from '@/shared/components/ModalWrapper';
 
 import useClickOutside from '@/shared/hooks/useClickOutside';
@@ -220,9 +219,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>
 									)}
 								</>
@@ -232,9 +231,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>

diff --git a/...ge/ModalContents/ModalContentsFriends/FriendRequest/InputSendRequest/InputSendRequest.tsx b/...ge/ModalContents/ModalContentsFriends/FriendRequest/InputSendRequest/InputSendRequest.tsx
@@ -1,6 +1,5 @@
 import React, { useRef, useState } from 'react';
 
-import ButtonSVG from '@/shared/components/ButtonSVG';
 import ButtonSendRequest from '@/shared/components/ModalContents/ButtonSendRequest';
 
 import { emailRegex } from '@/shared/constants/emailRegex';
@@ -53,26 +52,26 @@ const InputSendRequest = () => {
 					placeholder="이메일을 입력해주세요."
 					ref={inputRef}
 					onChange={handleInputChange}
-					className={`${alert.error.length > 0 ? errorStyle : alert.success.length > 0 ? successStyle : `border-[1px] border-gray-bg-02`} subhead-med-18 placeholder-text-gray-04 w-full rounded-[8px] bg-gray-bg-02 px-[2rem] py-[2rem] text-white focus:outline-none`}
+					className={`${alert.error.length > 0 ? errorStyle : alert.success.length > 0 ? successStyle : `border-[1px] border-gray-bg-02`} placeholder-text-gray-04 w-full rounded-[8px] bg-gray-bg-02 px-[2rem] py-[2rem] text-white subhead-med-18 focus:outline-none`}
 				/>
 				{alert.error && (
 					<div className="absolute mt-[1rem] flex gap-[5px]">
 						<IconInputError />
-						<p className="body-reg-16 text-error-01">{alert.error}</p>
+						<p className="text-error-01 body-reg-16">{alert.error}</p>
 					</div>
 				)}
 				{alert.success && (
 					<div className="absolute mt-[1rem] flex gap-[5px]">
 						<IconInputSuccess />
-						<p className="body-reg-16 text-mint-01">{alert.success}</p>
+						<p className="text-mint-01 body-reg-16">{alert.success}</p>
 					</div>
 				)}
 			</>
 
 			{showClearBtn && (
-				<ButtonSVG className="absolute right-[18rem] top-[2rem]" type="button" onClick={handleClearBtn}>
+				<button className="absolute right-[18rem] top-[2rem]" type="button" onClick={handleClearBtn}>
 					<InputClearButton />
-				</ButtonSVG>
+				</button>
 			)}
 
 			<ButtonSendRequest type="submit" disabled={!inputRef.current?.value}>

diff --git a/src/pages/LoginPage/index.tsx b/src/pages/LoginPage/index.tsx
@@ -1,7 +1,5 @@
 import Lottie from 'react-lottie';
 
-import ButtonSVG from '@/shared/components/ButtonSVG';
-
 import { useLottieAnimation } from '@/shared/hooks/useLottieAnimation';
 
 import LottieData from '@/shared/assets/lotties/morib_logo_motion.json';
@@ -49,13 +47,13 @@ const LoginPage = () => {
 					]}
 				/>
 				{/* Todo: 추후 로그인 로직 추가 */}
-				<ButtonSVG
+				<button
 					onMouseEnter={handleMouseEnter}
 					onClick={handleClick}
 					className={`ml-[12rem] transition-opacity duration-300 ${isAnimationComplete ? 'opacity-100' : 'opacity-0'}`}
 				>
 					<GoogleLoginIcon />
-				</ButtonSVG>
+				</button>
 			</div>
 		</LoginPageWrapper>
 	);

diff --git a/src/shared/components/BoxTodo/BoxTodo.tsx b/src/shared/components/BoxTodo/BoxTodo.tsx
@@ -10,8 +10,6 @@ import TimeLineIcon from '@/shared/assets/svgs/mingcute_time-line.svg?react';
 import NumberIcon from '@/shared/assets/svgs/selected_number_icon.svg?react';
 import MeatBall from '@/shared/assets/svgs/todo_meatball_default.svg?react';
 
-import SVGBtn from '../ButtonSVG';
-
 interface BoxTodoProps {
 	id: number;
 	name: string;
@@ -84,14 +82,14 @@ const BoxTodo = ({
 			<div className="flex flex-col justify-center">
 				<div className="flex items-center justify-between">
 					<div className="flex items-center gap-[0.6rem]">
-						<SVGBtn onClick={onToggleComplete} className={disableBtnStyle}>
+						<button onClick={onToggleComplete} className={disableBtnStyle}>
 							{CheckBoxIcon}
-						</SVGBtn>
+						</button>
 						<h3 className={`+ mt-[0.42rem] text-white body-semibold-16 ${nameStyle}`}>{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]">

diff --git a/src/shared/components/ButtonSVG.tsx b/src/shared/components/ButtonSVG.tsx