[FIX] 공통 모달 퍼블리싱 수정

src/assets/svg/index.ts

@@ -1,6 +1,7 @@
 import Icn_arrow_narrow_right from '@/assets/svg/arrow-narrow-right.svg?react';
 import Arrow_up from '@/assets/svg/arrow-up.svg?react';
 import Icn_calander from '@/assets/svg/calendar-minus-01.svg?react';
+import ClockCheck from '@/assets/svg/clock-check.svg?react';
 import Icn_date_clock from '@/assets/svg/clock.svg?react';
 import DeleteIcon from '@/assets/svg/Delete.svg?react';
 import DoneIcon from '@/assets/svg/DoneIcon.svg?react';
@@ -69,6 +70,7 @@ const Icons = {
 	DoneIcon,
 	ProgressIcon,
 	TimelineDelete,
+	ClockCheck,
 	plus_circle,
 };
 

src/components/common/button/CancelWhiteBtn.tsx

@@ -2,15 +2,15 @@ import styled from '@emotion/styled';
 
 import Icons from '@/assets/svg/index';
 
-function DeleteBtn() {
+function CancelWhiteBtn() {
 	return (
 		<DeleteBtnLayout>
 			<StlyedDeleteIcon />
 		</DeleteBtnLayout>
 	);
 }
 
-export default DeleteBtn;
+export default CancelWhiteBtn;
 
 const DeleteBtnLayout = styled.button`
 	display: flex;

src/components/common/button/OkayCancelBtn.tsx

@@ -27,6 +27,12 @@ const OkayBtn = styled.button`
 
 	background-color: ${({ theme }) => theme.palette.Grey.Black};
 	${({ theme }) => theme.fontTheme.BODY_02};
+
+	&:hover {
+		color: ${({ theme }) => theme.palette.Grey.White};
+
+		background-color: ${({ theme }) => theme.palette.Grey.Grey7};
+	}
 `;
 
 const CancelBtn = styled.button`
@@ -35,4 +41,10 @@ const CancelBtn = styled.button`
 
 	background-color: ${({ theme }) => theme.palette.Grey.White};
 	${({ theme }) => theme.fontTheme.BODY_02};
+
+	&:hover {
+		color: ${({ theme }) => theme.palette.Grey.Grey6};
+
+		background-color: ${({ theme }) => theme.palette.Grey.Grey3};
+	}
 `;

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

@@ -0,0 +1,46 @@
+import styled from '@emotion/styled';
+import { FunctionComponent, SVGProps } from 'react';
+
+import Icons from '@/assets/svg/index';
+import { SettingLayout, smallIcon, bigIcon } from '@/components/common/button/settingBtn/settingBtnStyle';
+
+const settingIconMap: Record<string, FunctionComponent<SVGProps<SVGSVGElement>>> = {
+	complete: Icons.SettingIcons.SettingCheck1,
+	check: Icons.SettingIcons.SettingCheck2,
+	done: Icons.SettingIcons.SettingCheck3,
+	progress: Icons.SettingIcons.SettingCheck4,
+	xBtn: Icons.SettingX,
+};
+interface SettingCheckBtnProps {
+	size: 'small' | 'big';
+	type: 'complete' | 'check' | 'done' | 'progress' | 'xBtn';
+	onClick?: () => void;
+	isHover: boolean;
+	isPressed: boolean;
+	isActive: boolean;
+}
+
+function SettingCheckBtn({ size, type, onClick, isHover, isPressed, isActive }: SettingCheckBtnProps) {
+	const IconComponent = settingIconMap[type];
+
+	const isFill = type === 'progress';
+
+	const StyledSettingCheckIcon = styled(IconComponent)<{ size: string }>`
+		${({ size }) => (size === 'small' ? smallIcon : bigIcon)};
+	`;
+
+	return (
+		<SettingLayout
+			size={size}
+			isFill={isFill}
+			onClick={onClick}
+			isHover={isHover}
+			isPressed={isPressed}
+			isActive={isActive}
+		>
+			<StyledSettingCheckIcon size={size} />
+		</SettingLayout>
+	);
+}
+
+export default SettingCheckBtn;