[FEAT] theme button 색상값 적용

src/assets/svg/index.ts

@@ -4,6 +4,20 @@ import Icn_nav_calendar from '@/assets/svg/icn_nav_calendar.svg?react';
 import Icn_nav_dashboard from '@/assets/svg/icn_nav_dashboard.svg?react';
 import Icn_nav_setting from '@/assets/svg/icn_nav_setting.svg?react';
 import Icn_nav_today from '@/assets/svg/icn_nav_today.svg?react';
+import DeleteIcon from '@/assets/svg/Delete.svg?react';
+import DoneIcon from '@/assets/svg/DoneIcon.svg?react';
+import PlusArrow from '@/assets/svg/PlusArrow.svg?react';
+import ProgressIcon from '@/assets/svg/ProgressIcon.svg?react';
+import SelectedBox from '@/assets/svg/Selectbox_Selected.svg?react';
+import UnselectedBox from '@/assets/svg/Selectbox_Unselected.svg?react';
+import SettingCheck2 from '@/assets/svg/SettingCheck2Icon.svg?react';
+import SettingCheck3 from '@/assets/svg/SettingCheck3Icon.svg?react';
+import SettingProgress from '@/assets/svg/SettingProgressIcon.svg?react';
+import SettingX from '@/assets/svg/SettingXIcon.svg?react';
+import Arrow_up from '@/assets/svg/arrow-up.svg?react';
+import TimelineDelete from '@/assets/svg/ic_delete.svg?react';
+import Refresh from '@/assets/svg/refresh.svg?react';
+import SettingCheck1 from '@/assets/svg/SettingCheck1.svg?react';
 
 const Icons = {
 	Icn_clock,
@@ -14,6 +28,20 @@ const Icons = {
 		Icn_nav_setting,
 		Icn_nav_today,
 	},
+	Arrow_up,
+	Refresh,
+	SelectedBox,
+	UnselectedBox,
+	PlusArrow,
+	DeleteIcon,
+	SettingCheck1,
+	SettingCheck2,
+	SettingCheck3,
+	SettingX,
+	SettingProgress,
+	DoneIcon,
+	ProgressIcon,
+	TimelineDelete,
 };
 
 export default Icons;

src/components/common/button/ArrangeBtn.tsx

@@ -0,0 +1,42 @@
+import styled from '@emotion/styled';
+
+interface ArrangeBtnProps {
+	text: string;
+}
+
+const ArrangeBtn = ({ text }: ArrangeBtnProps) => {
+	return <ArrangeBtnLayout>{text}</ArrangeBtnLayout>;
+};
+
+export default ArrangeBtn;
+
+const ArrangeBtnLayout = styled.button`
+	display: flex;
+	align-items: center;
+	width: 10.5rem;
+	height: 2.9rem;
+	padding: 7px;
+
+	color: ${({ theme }) => theme.palette.GREY_06};
+
+	background-color: ${({ theme }) => theme.palette.WITHE};
+	border-radius: 6px;
+
+	${({ theme }) => theme.fontTheme.CAPTION_01}; /* 수정 필요 */
+
+	&:hover {
+		color: ${({ theme }) => theme.palette.GREY_06};
+
+		background-color: ${({ theme }) => theme.palette.GREY_01};
+
+		${({ theme }) => theme.fontTheme.CAPTION_01}; /* 수정 필요 */
+	}
+
+	&:active {
+		color: ${({ theme }) => theme.palette.GREY_06}; /* 수정 필요 */
+
+		background-color: ${({ theme }) => theme.palette.GREY_03};
+
+		${({ theme }) => theme.fontTheme.CAPTION_01}; /* 수정 필요 */
+	}
+`;

src/components/common/button/Check1Btn.tsx

@@ -0,0 +1,69 @@
+import styled from '@emotion/styled';
+
+import Icons from '@/assets/svg/index';
+
+interface Check1 {
+	type: 'setting' | 'done';
+}
+
+const Check1Btn = ({ type }: Check1) => {
+	return (
+		<>
+			{type === 'setting' ? (
+				<SettingCheck1Layout>
+					<StlyedSettingCheck1Ic />
+				</SettingCheck1Layout>
+			) : (
+				<DoneLayout>
+					<StlyedDoneIc />
+				</DoneLayout>
+			)}
+		</>
+	);
+};
+
+export default Check1Btn;
+
+const SettingCheck1Layout = styled.button`
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 2.4rem;
+	height: 2.4rem;
+
+	background-color: ${({ theme }) => theme.palette.BLUE_DISABLED}; /* 수정 필요 */
+	border-radius: 8px;
+
+	&:hover {
+		background-color: ${({ theme }) => theme.palette.BLUE_DISABLED};
+	}
+
+	&:active {
+		background-color: ${({ theme }) => theme.palette.BLUE_PASSED};
+
+		path {
+			stroke: ${({ theme }) => theme.palette.WITHE};
+		}
+	}
+`;
+
+const StlyedSettingCheck1Ic = styled(Icons.SettingCheck1)`
+	width: 1.3911rem;
+	height: 1.3911rem;
+`;
+
+const DoneLayout = styled.button`
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 3.2rem;
+	height: 3.2rem;
+
+	background-color: ${({ theme }) => theme.palette.BLUE_DISABLED}; /* 수정 필요 */
+	border-radius: 10px;
+`;
+
+const StlyedDoneIc = styled(Icons.DoneIcon)`
+	width: 1.8548rem;
+	height: 1.8548rem;
+`;

src/components/common/button/DeleteBtn.tsx

@@ -0,0 +1,38 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+
+import Icons from '@/assets/svg/index';
+
+const 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}
+	background-color: ${({ theme }) => theme.palette.GREY_01};
+
+	&:active {
+		background-color: ${({ theme }) => theme.palette.GREY_03};
+	}
+`;
+
+const StlyedDeleteIcon = styled(Icons.DeleteIcon)`
+	width: 1.8rem;
+	height: 1.8rem;
+`;

src/components/common/button/DeleteCancelBtn.tsx

@@ -0,0 +1,50 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+
+interface DeleteCancelBtnProps {
+	status: 'delete' | 'cancel';
+}
+
+const DeleteCancelBtn = ({ status }: DeleteCancelBtnProps) => {
+	return <>{status === 'delete' ? <DeleteBtn>삭제</DeleteBtn> : <CancelBtn>취소</CancelBtn>}</>;
+};
+
+export default DeleteCancelBtn;
+
+const DeleteCancelBtnCss = css`
+	display: flex;
+	align-items: center;
+	align-self: stretch;
+	width: 13rem;
+	height: 3.2rem;
+	padding: 0.7rem 1.2rem;
+
+	box-shadow: 0 0 24px 0 rgb(0 0 0 / 12%);
+	border-radius: 8px;
+`;
+
+const DeleteBtn = styled.button`
+	${DeleteCancelBtnCss}
+	color: ${({ theme }) => theme.palette.WITHE};
+
+	background-color: ${({ theme }) => theme.palette.SECONDARY};
+	${({ theme }) => theme.fontTheme.BODY_02};
+
+	&:hover {
+		background-color: ${({ theme }) => theme.palette.BLACK}; /* 수정 필요 */
+	}
+`;
+
+const CancelBtn = styled.button`
+	${DeleteCancelBtnCss}
+	color: ${({ theme }) => theme.palette.GREY_05};
+
+	background-color: ${({ theme }) => theme.palette.WITHE};
+	${({ theme }) => theme.fontTheme.BODY_02};
+
+	&:hover {
+		color: ${({ theme }) => theme.palette.GREY_06};
+
+		background-color: ${({ theme }) => theme.palette.GREY_03};
+	}
+`;

src/components/common/button/EnterBtn.tsx

@@ -0,0 +1,48 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+
+import Icons from '@/assets/svg/index';
+
+const EnterBtn = () => {
+	return (
+		<EnterBtnLayout>
+			<StyledIcon />
+		</EnterBtnLayout>
+	);
+};
+
+export default EnterBtn;
+
+const EnterBtnCss = css`
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 4rem;
+	height: 2.2rem;
+
+	border-radius: 8px;
+`;
+
+const EnterBtnLayout = styled.button`
+	${EnterBtnCss}
+	background-color: ${({ theme }) => theme.palette.PRIMARY};
+
+	&:hover {
+		background-color: ${({ theme }) => theme.palette.BLUE_PASSED}; /* 수정 필요 */
+		path {
+			stroke: ${({ theme }) => theme.palette.BLUE_DEFAULT}; /* 수정 필요 */
+		}
+	}
+
+	&:active {
+		background-color: ${({ theme }) => theme.palette.BLUE_DISABLED}; /* svg 색 수정 필요 */
+		path {
+			stroke: ${({ theme }) => theme.palette.BLACK}; /* 수정 필요 */
+		}
+	}
+`;
+
+const StyledIcon = styled(Icons.Arrow_up)`
+	width: 1.6rem;
+	height: 1.6rem;
+`;