Merge pull request #75 from TEAM-DAWM/fix/#65/fix-modal

[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/SettingPage/AccountArea.tsx

@@ -2,7 +2,7 @@ import styled from '@emotion/styled';
 
 import google_calendar from '@/assets/images/google_calendar.png';
 import Icons from '@/assets/svg/index';
-import SettingXBtn from '@/components/common/button/settingBtn/SettingXBtn';
+import SettingCheckBtn from '@/components/common/button/settingBtn/SettingCheckBtn';
 import USERS from '@/constants/users';
 
 function AccountArea() {
@@ -19,7 +19,7 @@ function AccountArea() {
 				</CalendarContainer>
 				<InputBox>
 					<EmailWrapper>{USERS.data.email}</EmailWrapper>
-					<SettingXBtn />
+					<SettingCheckBtn size="small" type="close" isHover isPressed={false} isActive />
 				</InputBox>
 			</AccountWrapper>
 		</AccountAreaWrapper>

src/components/calendarPage/CategoryBox.tsx

@@ -0,0 +1,26 @@
+import styled from '@emotion/styled';
+
+function CategoryBox() {
+	return (
+		<CategoryBoxLayout>
+			<TitleSection>카테고리</TitleSection>
+		</CategoryBoxLayout>
+	);
+}
+
+const CategoryBoxLayout = styled.div`
+	width: 31.7rem;
+	height: 49rem;
+
+	border: 1px solid #e4e4e4;
+	border-radius: 12px;
+`;
+
+const TitleSection = styled.section`
+	width: 100%;
+	height: 6.6rem;
+	padding: 2rem 0.8rem 1.8rem 2.8rem;
+    
+	${({ theme }) => theme.fontTheme.HEADLINE_02}
+`;
+export default CategoryBox;

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,
+	close: Icons.SettingX,
+};
+interface SettingCheckBtnProps {
+	size: 'small' | 'big';
+	type: 'complete' | 'check' | 'done' | 'progress' | 'close';
+	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;