[FEAT] Arrange Modal 생성

src/components/common/button/SortBtn.tsx

@@ -2,35 +2,35 @@ import styled from '@emotion/styled';
 
 interface SortBtnProps {
 	text: string;
+	isActive?: boolean;
+	onClick?: () => void;
 }
 
-function SortBtn({ text }: SortBtnProps) {
-	return <SortBtnLayout>{text}</SortBtnLayout>;
+function SortBtn({ text, isActive = false, onClick }: SortBtnProps) {
+	return (
+		<SortBtnLayout onClick={onClick} isActive={isActive}>
+			{text}
+		</SortBtnLayout>
+	);
 }
 
 export default SortBtn;
 
-const SortBtnLayout = styled.button`
+const SortBtnLayout = styled.button<{ isActive: boolean }>`
 	display: flex;
 	align-items: center;
 	width: 10.5rem;
 	height: 2.9rem;
-	padding: 7px;
+	padding: 0.7rem;
 
-	color: ${({ theme }) => theme.palette.Grey.Grey6};
+	color: ${({ theme, isActive }) => (isActive ? theme.palette.Grey.Grey7 : theme.palette.Grey.Grey6)};
 
-	background-color: ${({ theme }) => theme.palette.Grey.White};
+	background-color: ${({ theme, isActive }) => (isActive ? theme.palette.Grey.Grey3 : theme.palette.Grey.White)};
 	border-radius: 6px;
 
-	${({ theme }) => theme.fontTheme.CAPTION_01}; /* 수정 필요 */
+	${({ theme }) => theme.fontTheme.CAPTION_04};
 
 	&:hover {
 		background-color: ${({ theme }) => theme.palette.Grey.Grey1};
 	}
-
-	&:active {
-		color: ${({ theme }) => theme.palette.Grey.Grey7};
-
-		background-color: ${({ theme }) => theme.palette.Grey.Grey3};
-	}
 `;

src/components/common/modal/ModalArrange/ModalArrange.tsx

@@ -0,0 +1,80 @@
+import styled from '@emotion/styled';
+import { useState } from 'react';
+
+import SortBtn from '../../button/SortBtn';
+
+import SORT_BY from '@/constants/sortType';
+
+function ModalArrange() {
+	const [activeSorByDateAdded, setActiveSorByDateAdded] = useState<string | null>(null);
+	const [activeSorByDeadLine, setActiveSorByDeadLine] = useState<string | null>(null);
+
+	const handleSortByDateAddedClick = (sortType: string) => {
+		setActiveSorByDateAdded((prev) => (prev === sortType ? null : sortType));
+	};
+
+	const handleSortByDeadLineClick = (sortType: string) => {
+		setActiveSorByDeadLine((prev) => (prev === sortType ? null : sortType));
+	};
+
+	return (
+		<ModalArrangeLayout>
+			<SortBy>
+				<SortBtn
+					text={SORT_BY.NEWEST}
+					isActive={activeSorByDateAdded === SORT_BY.NEWEST}
+					onClick={() => handleSortByDateAddedClick(SORT_BY.NEWEST)}
+				/>
+				<SortBtn
+					text={SORT_BY.OLDEST}
+					isActive={activeSorByDateAdded === SORT_BY.OLDEST}
+					onClick={() => handleSortByDateAddedClick('오래된 등록순')}
+				/>
+			</SortBy>
+			<ModalArrangeLine />
+			<SortBy>
+				<SortBtn
+					text={SORT_BY.CLOSEST}
+					isActive={activeSorByDeadLine === SORT_BY.CLOSEST}
+					onClick={() => handleSortByDeadLineClick(SORT_BY.CLOSEST)}
+				/>
+				<SortBtn
+					text={SORT_BY.CLOSEST}
+					isActive={activeSorByDeadLine === SORT_BY.CLOSEST}
+					onClick={() => handleSortByDeadLineClick(SORT_BY.CLOSEST)}
+				/>
+			</SortBy>
+		</ModalArrangeLayout>
+	);
+}
+
+export default ModalArrange;
+
+const ModalArrangeLayout = styled.div`
+	display: flex;
+	flex-direction: column;
+	flex-shrink: 0;
+	gap: 1.2rem;
+	align-items: center;
+	justify-content: center;
+	width: 10.6rem;
+	height: 14.6rem;
+	padding: 0.6rem;
+
+	background: ${({ theme }) => theme.palette.Grey.White};
+	box-shadow: 0 0.3rem 0.8rem 0 rgb(0 0 0 / 32%);
+	border-radius: 10px;
+`;
+
+const SortBy = styled.div`
+	display: flex;
+	flex-direction: column;
+`;
+
+const ModalArrangeLine = styled.div`
+	display: flex;
+	width: 11.8rem;
+	height: 0.1rem;
+
+	background-color: ${({ theme }) => theme.palette.Grey.Grey2};
+`;

src/constants/sortType.ts

@@ -0,0 +1,8 @@
+const SORT_BY = {
+	NEWEST: '최신 등록순',
+	OLDEST: '오래된 등록순',
+	CLOSEST: '지연된 할 일',
+	FARTHEST: '먼 마감기한순',
+};
+
+export default SORT_BY;

src/pages/Today.tsx

@@ -5,6 +5,7 @@ import StatusDoneBtn from '@/components/common/button/statusBtn/StatusDoneBtn';
 import StatusInProgressBtn from '@/components/common/button/statusBtn/StatusInProgressBtn';
 import StatusStagingBtn from '@/components/common/button/statusBtn/StatusStagingBtn';
 import StatusTodoBtn from '@/components/common/button/statusBtn/StatusTodoBtn';
+import ModalArrange from '@/components/common/modal/ModalArrange/ModalArrange';
 import NavBar from '@/components/common/NavBar';
 import ScrollGradient from '@/components/common/ScrollGradient';
 import StagingArea from '@/components/common/StagingArea/StagingArea';
@@ -21,6 +22,8 @@ function Today() {
 		<>
 			<NavBar />
 
+			<ModalArrange />
+
 			<ScrollGradient />
 
 			<StagingArea />