[FIX] 버튼 컴포넌트 에러 / 로직 수정 & 새 버튼 구현

package.json

@@ -18,6 +18,7 @@
 		"@emotion/styled": "^11.11.5",
 		"@svgr/cli": "^8.1.0",
 		"react": "^18.3.1",
+		"react-datepicker": "^7.2.0",
 		"react-dom": "^18.3.1",
 		"react-router-dom": "^6.24.1",
 		"vite-plugin-svgr": "^4.2.0"

src/assets/svg/index.ts

@@ -23,6 +23,7 @@ import UnselectedBox from '@/assets/svg/Selectbox_Unselected.svg?react';
 import SettingCheck1 from '@/assets/svg/SettingCheck1.svg?react';
 import SettingCheck2 from '@/assets/svg/SettingCheck2Icon.svg?react';
 import SettingCheck3 from '@/assets/svg/SettingCheck3Icon.svg?react';
+import SettingCheck4 from '@/assets/svg/SettingCheck4Icon.svg?react';
 import SettingProgress from '@/assets/svg/SettingProgressIcon.svg?react';
 import SettingX from '@/assets/svg/SettingXIcon.svg?react';
 import IcnXCricle from '@/assets/svg/x-circle.svg?react';
@@ -52,9 +53,12 @@ const Icons = {
 	UnselectedBox,
 	PlusArrow,
 	DeleteIcon,
-	SettingCheck1,
-	SettingCheck2,
-	SettingCheck3,
+	SettingIcons: {
+		SettingCheck1,
+		SettingCheck2,
+		SettingCheck3,
+		SettingCheck4,
+	},
 	SettingX,
 	SettingProgress,
 	DoneIcon,

src/components/common/button/CancelWhiteBtn.tsx

@@ -0,0 +1,33 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+
+import Icons from '@/assets/svg/index';
+
+function DeleteBtn() {
+	return (
+		<DeleteBtnLayout>
+			<StlyedDeleteIcon />
+		</DeleteBtnLayout>
+	);
+}
+
+export default DeleteBtn;
+
+const DeleteBtnCss = css`
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 3.2rem;
+	height: 3.2rem;
+
+	border-radius: 10px;
+`;
+
+const DeleteBtnLayout = styled.button`
+	${DeleteBtnCss}
+`;
+
+const StlyedDeleteIcon = styled(Icons.DeleteIcon)`
+	width: 1.8rem;
+	height: 1.8rem;
+`;

src/components/common/button/Check1Btn.tsx

@@ -1,27 +1,29 @@
-import styled from '@emotion/styled';
 import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 
 import Icons from '@/assets/svg/index';
 
-interface Check1 {
+interface Check1Props {
 	type: 'setting' | 'done';
+	isHover: boolean;
+	isPressed: boolean;
 }
 
-const Check1Btn = ({ type }: Check1) => {
+function Check1Btn({ type, isHover, isPressed }: Check1Props) {
 	return (
-		<>
+		<div>
 			{type === 'setting' ? (
-				<SettingCheck1Layout>
+				<SettingCheck1Layout isHover={isHover} isPressed={isPressed}>
 					<StlyedSettingCheck1Ic />
 				</SettingCheck1Layout>
 			) : (
 				<DoneLayout>
 					<StlyedDoneIc />
 				</DoneLayout>
 			)}
-		</>
+		</div>
 	);
-};
+}
 
 export default Check1Btn;
 
@@ -30,28 +32,35 @@ const alignCenterStyle = css`
 	align-items: center;
 	justify-content: center;
 `;
-const SettingCheck1Layout = styled.button`
+const SettingCheck1Layout = styled.button<{ isHover: boolean; isPressed: boolean }>`
 	${alignCenterStyle}
 	width: 2.4rem;
 	height: 2.4rem;
 
-	background-color: ${({ theme }) => theme.palette.BLUE_DISABLED}; /* 수정 필요 */
+	background-color: ${({ theme }) => theme.palette.Blue.Blue1};
 	border-radius: 8px;
 
-	&:hover {
-		background-color: ${({ theme }) => theme.palette.BLUE_DISABLED};
-	}
-
-	&:active {
-		background-color: ${({ theme }) => theme.palette.BLUE_PASSED};
+	${({ isHover, theme }) =>
+		isHover &&
+		css`
+			&:hover {
+				background-color: ${theme.palette.Blue.Blue3};
+			}
+		`}
+	${({ isPressed, theme }) =>
+		isPressed &&
+		css`
+			&:active {
+				background-color: ${theme.palette.Primary};
 
-		path {
-			stroke: ${({ theme }) => theme.palette.WITHE};
-		}
-	}
+				path {
+					stroke: ${theme.palette.Grey.White};
+				}
+			}
+		`}
 `;
 
-const StlyedSettingCheck1Ic = styled(Icons.SettingCheck1)`
+const StlyedSettingCheck1Ic = styled(Icons.SettingIcons.SettingCheck1)`
 	width: 1.3911rem;
 	height: 1.3911rem;
 `;
@@ -61,7 +70,7 @@ const DoneLayout = styled.button`
 	width: 3.2rem;
 	height: 3.2rem;
 
-	background-color: ${({ theme }) => theme.palette.BLUE_DISABLED}; /* 수정 필요 */
+	background-color: ${({ theme }) => theme.palette.Blue.Blue1};
 	border-radius: 10px;
 `;
 

src/components/common/button/DeleteBtn.tsx

@@ -2,13 +2,13 @@ import styled from '@emotion/styled';
 
 import Icons from '@/assets/svg/index';
 
-const DeleteBtn = () => {
+function DeleteBtn() {
 	return (
 		<DeleteBtnLayout>
 			<StlyedDeleteIcon />
 		</DeleteBtnLayout>
 	);
-};
+}
 
 export default DeleteBtn;
 
@@ -19,11 +19,11 @@ const DeleteBtnLayout = styled.button`
 	width: 3.2rem;
 	height: 3.2rem;
 
-	background-color: ${({ theme }) => theme.palette.GREY_01};
+	background-color: ${({ theme }) => theme.palette.Grey.Grey1};
 	border-radius: 10px;
 
 	&:active {
-		background-color: ${({ theme }) => theme.palette.GREY_03};
+		background-color: ${({ theme }) => theme.palette.Grey.Grey3};
 	}
 `;
 

src/components/common/button/DeleteCancelBtn.tsx

@@ -5,9 +5,9 @@ interface DeleteCancelBtnProps {
 	status: 'delete' | 'cancel';
 }
 
-const DeleteCancelBtn = ({ status }: DeleteCancelBtnProps) => {
-	return <>{status === 'delete' ? <DeleteBtn>삭제</DeleteBtn> : <CancelBtn>취소</CancelBtn>}</>;
-};
+function DeleteCancelBtn({ status }: DeleteCancelBtnProps) {
+	return <div>{status === 'delete' ? <DeleteBtn>삭제</DeleteBtn> : <CancelBtn>취소</CancelBtn>}</div>;
+}
 
 export default DeleteCancelBtn;
 
@@ -25,26 +25,26 @@ const DeleteCancelBtnCss = css`
 
 const DeleteBtn = styled.button`
 	${DeleteCancelBtnCss}
-	color: ${({ theme }) => theme.palette.WITHE};
+	color: ${({ theme }) => theme.palette.Grey.White};
 
-	background-color: ${({ theme }) => theme.palette.SECONDARY};
+	background-color: ${({ theme }) => theme.palette.Secondary};
 	${({ theme }) => theme.fontTheme.BODY_02};
 
 	&:hover {
-		background-color: ${({ theme }) => theme.palette.BLACK}; /* 수정 필요 */
+		background-color: ${({ theme }) => theme.palette.Orange.Orange7};
 	}
 `;
 
 const CancelBtn = styled.button`
 	${DeleteCancelBtnCss}
-	color: ${({ theme }) => theme.palette.GREY_05};
+	color: ${({ theme }) => theme.palette.Grey.Grey5};
 
-	background-color: ${({ theme }) => theme.palette.WITHE};
+	background-color: ${({ theme }) => theme.palette.Grey.White};
 	${({ theme }) => theme.fontTheme.BODY_02};
 
 	&:hover {
-		color: ${({ theme }) => theme.palette.GREY_06};
+		color: ${({ theme }) => theme.palette.Grey.Grey6};
 
-		background-color: ${({ theme }) => theme.palette.GREY_03};
+		background-color: ${({ theme }) => theme.palette.Grey.Grey3};
 	}
 `;

src/components/common/button/EnterBtn.tsx

@@ -7,13 +7,13 @@ interface EnterBtnProps {
 	isDisabled: boolean;
 }
 
-const EnterBtn = ({ isDisabled }: EnterBtnProps) => {
+function EnterBtn({ isDisabled }: EnterBtnProps) {
 	return (
 		<EnterBtnLayout isDisabled={isDisabled} disabled={isDisabled}>
 			<StyledIcon />
 		</EnterBtnLayout>
 	);
-};
+}
 
 export default EnterBtn;
 
@@ -29,23 +29,22 @@ const EnterBtnCss = css`
 
 const EnterBtnLayout = styled.button<{ isDisabled: boolean }>`
 	${EnterBtnCss}
-	color: ${({ theme }) => theme.palette.WITHE};
+	color: ${({ theme }) => theme.palette.Grey.White};
 
-	background-color: ${({ theme, isDisabled }) =>
-		isDisabled ? theme.palette.BLUE_DISABLED : theme.palette.PRIMARY}; /* 색 수정 필요 */
+	background-color: ${({ theme, isDisabled }) => (isDisabled ? theme.palette.Blue.Blue3 : theme.palette.Primary)};
 	${({ theme, isDisabled }) =>
 		!isDisabled &&
 		`
 		&:hover {
-			background-color: ${theme.palette.BLUE_PASSED};  /* 수정 필요 */
+			background-color: ${theme.palette.Blue.Blue8};
 			path {
-			stroke: ${theme.palette.BLUE_DEFAULT}; /* 수정 필요 */
+			stroke: ${theme.palette.Blue.Blue2};
 		}
 		}
 		&:active {
-			background-color: ${theme.palette.BLUE_DISABLED};
+			background-color: ${theme.palette.Blue.Blue9};
 			path {
-			stroke: ${theme.palette.BLACK}; /* 수정 필요 */
+			stroke: ${theme.palette.Blue.Blue4};
 		}
 		}
 	`}

src/components/common/button/HoverBarBtn.tsx

@@ -0,0 +1,32 @@
+import styled from '@emotion/styled';
+
+import Check1Btn from './Check1Btn';
+
+import SettingCheck4 from '@/components/common/button/SettingCheck4Btn';
+import SettingDeleteBtn from '@/components/common/button/SettingDeleteBtn';
+import TextBtn from '@/components/common/button/textBtn/TextBtn';
+
+function HoverBarBtn() {
+	return (
+		<HoverBarBtnLayout>
+			<SettingDeleteBtn isHover={false} isPressed />
+			<TextBtn size="small" text="취소" color="WHITE" mode="LIGHT" isHover={false} isPressed />
+			<SettingCheck4 isHover={false} isPressed />
+			<Check1Btn type="setting" isHover={false} isPressed />
+		</HoverBarBtnLayout>
+	);
+}
+
+export default HoverBarBtn;
+
+const HoverBarBtnLayout = styled.div`
+	display: flex;
+	gap: 0.4rem;
+	align-items: center;
+	width: 13.7rem;
+	height: 3.2rem;
+	padding: 0.4rem;
+
+	border: 1px solid ${({ theme }) => theme.palette.Grey.White};
+	border-radius: 12px;
+`;

src/components/common/button/OkayCancelBtn.tsx

@@ -5,9 +5,9 @@ interface OkayCancelBtnProps {
 	type: 'okay' | 'cancel';
 }
 
-const OkayCancelBtn = ({ type }: OkayCancelBtnProps) => {
-	return <>{type === 'okay' ? <OkayBtn>확인</OkayBtn> : <CancelBtn>취소</CancelBtn>}</>;
-};
+function OkayCancelBtn({ type }: OkayCancelBtnProps) {
+	return <div>{type === 'okay' ? <OkayBtn>확인</OkayBtn> : <CancelBtn>취소</CancelBtn>}</div>;
+}
 
 export default OkayCancelBtn;
 
@@ -23,17 +23,16 @@ const OkayCancelBtnCss = css`
 
 const OkayBtn = styled.button`
 	${OkayCancelBtnCss};
-	color: ${({ theme }) => theme.palette.WITHE};
+	color: ${({ theme }) => theme.palette.Grey.White};
 
-	background-color: ${({ theme }) => theme.palette.BLACK};
+	background-color: ${({ theme }) => theme.palette.Grey.Black};
 	${({ theme }) => theme.fontTheme.BODY_02};
-	box-shadow: 0 0 24px 0 rgb(0 0 0 / 12%);
 `;
 
 const CancelBtn = styled.button`
 	${OkayCancelBtnCss};
-	color: ${({ theme }) => theme.palette.GREY_05};
+	color: ${({ theme }) => theme.palette.Grey.Grey5};
 
-	background-color: ${({ theme }) => theme.palette.WITHE};
+	background-color: ${({ theme }) => theme.palette.Grey.White};
 	${({ theme }) => theme.fontTheme.BODY_02};
 `;