Merge pull request #58 from TEAM-DAWM/fix/#54/folder-rename

[FIX] 버튼 컴포넌트 에러 / 로직 수정 & 새 버튼 구현
TEAM-DAWM · Jul 8, 2024 · ba31164 · ba31164
2 parents f0350c2 + 26e6a8b
commit ba31164
Show file tree

Hide file tree

Showing 40 changed files with 634 additions and 494 deletions.
diff --git a/package.json b/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"

diff --git a/src/assets/svg/SettingCheck1Icon.svg b/src/assets/svg/SettingCheck1Icon.svg
diff --git a/src/assets/svg/SettingCheck4Icon.svg b/src/assets/svg/SettingCheck4Icon.svg
diff --git a/src/assets/svg/icn_nav_calendar.svg b/src/assets/svg/icn_nav_calendar.svg
diff --git a/src/assets/svg/index.ts b/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,

diff --git a/src/components/common/button/CancelWhiteBtn.tsx b/src/components/common/button/CancelWhiteBtn.tsx
@@ -0,0 +1,28 @@
+import styled from '@emotion/styled';
+
+import Icons from '@/assets/svg/index';
+
+function DeleteBtn() {
+	return (
+		<DeleteBtnLayout>
+			<StlyedDeleteIcon />
+		</DeleteBtnLayout>
+	);
+}
+
+export default DeleteBtn;
+
+const DeleteBtnLayout = styled.button`
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 3.2rem;
+	height: 3.2rem;
+
+	border-radius: 10px;
+`;
+
+const StlyedDeleteIcon = styled(Icons.DeleteIcon)`
+	width: 1.8rem;
+	height: 1.8rem;
+`;
diff --git a/src/components/common/button/Check1Btn.tsx b/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,42 +32,48 @@ 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)`
-	width: 1.3911rem;
-	height: 1.3911rem;
+const StlyedSettingCheck1Ic = styled(Icons.SettingIcons.SettingCheck1)`
+	width: 1.6rem;
+	height: 1.6rem;
 `;
 
 const DoneLayout = styled.button`
 	${alignCenterStyle}
 	width: 3.2rem;
 	height: 3.2rem;
 
-	background-color: ${({ theme }) => theme.palette.BLUE_DISABLED}; /* 수정 필요 */
+	background-color: ${({ theme }) => theme.palette.Blue.Blue1};
 	border-radius: 10px;
 `;
 
 const StlyedDoneIc = styled(Icons.DoneIcon)`
-	width: 1.8548rem;
-	height: 1.8548rem;
+	width: 1.85rem;
 `;
diff --git a/src/components/common/button/DeleteBtn.tsx b/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};
 	}
 `;
 

diff --git a/src/components/common/button/DeleteCancelBtn.tsx b/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};
 	}
 `;
diff --git a/src/components/common/button/EnterBtn.tsx b/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};
 		}
 		}
 	`}

diff --git a/src/components/common/button/OkayCancelBtn.tsx b/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};
 `;