[BUG] 공통 컴포넌트 버튼 색상 및 구조 변경

src/components/common/button/settingBtn/SettingDeleteBtn.tsx

@@ -1,48 +1,68 @@
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 
+import { smallIcon, bigIcon, SettingCss, smallSize, bigSize } from './settingBtnStyle';
+
 import Icons from '@/assets/svg/index';
 
 interface SettingDeleteBtnProps {
+	size: 'small' | 'big';
+	onClick?: () => void;
 	isHover: boolean;
 	isPressed: boolean;
-	onClick?: () => void;
+	isActive: boolean;
 }
 
-function SettingDeleteBtn({ isHover, isPressed, onClick }: SettingDeleteBtnProps) {
+function SettingDeleteBtn({ size, onClick, isHover, isPressed, isActive }: SettingDeleteBtnProps) {
+	const StyledSettingDeleteIcon = styled(Icons.DeleteIcon)<{ size: string }>`
+		${({ size }) => (size === 'small' ? smallIcon : bigIcon)}
+	`;
 	return (
-		<SettingDeleteBtnLayout isHover={isHover} isPressed={isPressed} onClick={onClick}>
-			<StyledDeleteIcon />
+		<SettingDeleteBtnLayout size={size} onClick={onClick} isHover={isHover} isPressed={isPressed} isActive={isActive}>
+			<StyledSettingDeleteIcon size={size} />
 		</SettingDeleteBtnLayout>
 	);
 }
 
 export default SettingDeleteBtn;
 
-const SettingDeleteBtnCss = css`
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	width: 2.4rem;
-	height: 2.4rem;
-
-	border-radius: 8px;
-`;
-
-const SettingDeleteBtnLayout = styled.button<{ isHover: boolean; isPressed: boolean }>`
-	${SettingDeleteBtnCss}
-	background-color: ${({ theme, isPressed }) => (isPressed ? theme.palette.Primary : theme.palette.Blue.Blue1)};
+const SettingDeleteBtnLayout = styled.button<{
+	size: string;
+	isHover: boolean;
+	isPressed: boolean;
+	isActive: boolean;
+}>`
+	${SettingCss}
+	${({ size }) => (size === 'small' ? smallSize : bigSize)};
+	background-color: ${({ theme }) => theme.palette.Orange.Orange2};
 
 	${({ isHover, theme }) =>
 		isHover &&
 		css`
 			&:hover {
-				background-color: ${theme.palette.Blue.Blue3};
+				background-color: ${theme.palette.Orange.Orange4};
 			}
 		`}
-`;
 
-const StyledDeleteIcon = styled(Icons.DeleteIcon)`
-	width: 1.4rem;
-	height: 1.4rem;
+	${({ isActive, theme }) =>
+		isActive &&
+		css`
+			&:active {
+				background-color: ${theme.palette.Secondary};
+
+				path {
+					stroke: ${theme.palette.Grey.White};
+				}
+			}
+		`}
+
+	${({ isPressed, theme }) =>
+		isPressed &&
+		css`
+			background-color: ${theme.palette.Secondary};
+
+			path {
+				stroke: ${theme.palette.Grey.White};
+			}
+		`}
 `;

src/components/common/button/statusBtn/StatusStagingBtn.tsx

@@ -19,7 +19,13 @@ function StatusStagingBtn() {
 	return (
 		<StatusStagingBtnLayout>
 			{!isCheckingPressed && (
-				<SettingDeleteBtn isHover={false} isPressed={isDeletePressed} onClick={handleSettingCheckClick} />
+				<SettingDeleteBtn
+					size="small"
+					isHover={false}
+					isActive={false}
+					isPressed={isDeletePressed}
+					onClick={handleSettingCheckClick}
+				/>
 			)}
 			{!isDeletePressed && (
 				<SettingCheckBtn

src/components/common/modal/ModalHeaderBtn.tsx

@@ -1,13 +1,14 @@
 import styled from '@emotion/styled';
 
-import DeleteBtn from '@/components/common/button/DeleteBtn';
+import SettingDeleteBtn from '../button/settingBtn/SettingDeleteBtn';
+
 import SettingCheckBtn from '@/components/common/button/settingBtn/SettingCheckBtn';
 import { SizeType } from '@/types/textInputType';
 
 function ModalHeaderBtn({ type }: SizeType) {
 	return (
 		<ModalHeaderBtnLayout>
-			<DeleteBtn />
+			<SettingDeleteBtn size="big" isHover isPressed={false} isActive />
 			{type === 'long' && <SettingCheckBtn type="progress" size="big" isHover isPressed={false} isActive />}
 			<SettingCheckBtn type="complete" size="big" isHover isPressed={false} isActive />
 		</ModalHeaderBtnLayout>

src/pages/Setting.tsx

@@ -1,6 +1,5 @@
 import styled from '@emotion/styled';
 
-import DeleteBtn from '@/components/common/button/DeleteBtn';
 import DeleteCancelBtn from '@/components/common/button/DeleteCancelBtn';
 import EnterBtn from '@/components/common/button/EnterBtn';
 import OkayCancelBtn from '@/components/common/button/OkayCancelBtn';
@@ -29,14 +28,13 @@ function Setting() {
 			<TextBtn size="big" text="전체" color="BLUE" mode="LIGHT" isHover isPressed />
 			<TextBtn size="big" text="전체" color="BLUE" mode="DEFAULT" isHover isPressed />
 			<SortBtn text="최신 등록순" />
-			<DeleteBtn />
 			<DeleteCancelBtn status="delete" />
 			<EnterBtn isDisabled={false} />
 			<OkayCancelBtn type="okay" />
 			<ProgressBtn type="defaultProgress" />
 			<RefreshBtn isDisabled={false} />
 
-			<SettingDeleteBtn isHover isPressed />
+			<SettingDeleteBtn size="big" isHover isPressed={false} isActive />
 			<StatusDoneBtn />
 			<StatusInProgressBtn />
 			<StatusStagingBtn />