[FEAT] 메인 세팅 모달 퍼블리싱

src/components/common/v2/TextBox/PopUp.tsx

@@ -16,14 +16,15 @@ type PopUpProps = {
 
 function PopUp({ type }: PopUpProps) {
 	const { state, handleFocus, handleBlur, handleChange } = useInputHandler();
+	const placeholder = type === TYPE.TITLE ? '제목을 입력하세요' : '설명을 추가하세요';
 
 	return (
 		<PopUpContainer>
 			{type === TYPE.DESC && state === INPUT_STATE.DEFAULT && <Icon name="IcnDescription" size="tiny" />}
 			<StyledInput
 				type={type}
 				state={state}
-				placeholder="제목을 입력하세요"
+				placeholder={placeholder}
 				onFocus={handleFocus}
 				onBlur={handleBlur}
 				onChange={handleChange}

src/components/common/v2/dropdown/TimeDropdown.tsx

@@ -3,25 +3,32 @@ import styled from '@emotion/styled';
 import Button from '@/components/common/v2/button/Button';
 import quarterTimes from '@/utils/generateQuarterTimes';
 
-function TimeDropdown() {
+interface TimeDropdownProps {
+	handleSelectTime: (time: string) => void;
+}
+
+function TimeDropdown({ handleSelectTime }: TimeDropdownProps) {
 	return (
 		<TimeDropdownContainer>
 			{quarterTimes.map((time) => (
-				<Button key={time} label={time} onClick={() => {}} size="large" type="text-assistive" />
+				<Button key={time} label={time} onClick={() => handleSelectTime(time)} size="large" type="text-assistive" />
 			))}
 		</TimeDropdownContainer>
 	);
 }
 
 const TimeDropdownContainer = styled.div`
+	box-sizing: border-box;
 	width: 16.8rem;
 	height: 30rem;
 	padding: 0.8rem;
 	overflow-y: auto;
 
+	background-color: ${({ theme }) => theme.colorToken.Neutral.normal};
 	border-radius: 12px;
 
 	${({ theme }) => theme.shadow.FloatingAction3};
+	${({ theme }) => theme.fontTheme.LABEL_03};
 
 	/* 스크롤바 전체 */
 	::-webkit-scrollbar {

src/components/common/v2/modal/MainSettingModal.tsx

@@ -0,0 +1,98 @@
+import styled from '@emotion/styled';
+import { useState } from 'react';
+
+import Button from '@/components/common/v2/button/Button';
+import DropdownButton from '@/components/common/v2/control/DropdownButton';
+import IconButton from '@/components/common/v2/IconButton';
+import DeadlineBox from '@/components/common/v2/popup/DeadlineBox';
+import PopUp from '@/components/common/v2/TextBox/PopUp';
+import { StatusType } from '@/types/tasks/taskType';
+
+function MainSettingModal() {
+	const [status, setStatus] = useState<StatusType>('미완료');
+
+	const handleStatusChange = (newStatus: StatusType) => {
+		setStatus(newStatus);
+	};
+
+	return (
+		<MainSettingModalLayout>
+			<MainSettingModalHeadLayout>
+				<ModalTopButtonBox>
+					<DropdownButton status={status} handleStatusChange={handleStatusChange} />
+					<ButtonBox>
+						<IconButton iconName="IcnDelete" type="normal" size="small" disabled />
+						<IconButton iconName="IcnX" type="normal" size="small" disabled />
+					</ButtonBox>
+				</ModalTopButtonBox>
+				<PopUp type="title" />
+			</MainSettingModalHeadLayout>
+			<MainSettingModalBodyLayout>
+				<DeadlineBox date={new Date()} endTime="06:00pm" label="마감 기간" />
+				<PopUpTitleBox>
+					<PopUp type="description" />
+				</PopUpTitleBox>
+				<DeadlineBox date={new Date()} startTime="11:00am" endTime="06:00pm" label="진행 기간" />
+			</MainSettingModalBodyLayout>
+			<MainSettingModalButtonLayout>
+				<Button type="solid" size="medium" label="확인" />
+			</MainSettingModalButtonLayout>
+		</MainSettingModalLayout>
+	);
+}
+
+const MainSettingModalLayout = styled.article`
+	display: flex;
+	flex-direction: column;
+	gap: 2.4rem;
+	box-sizing: border-box;
+	width: 41.6rem;
+	height: auto;
+	padding: 2.4rem 2.4rem 3.2rem;
+
+	background-color: ${({ theme }) => theme.colorToken.Neutral.normal};
+	box-shadow:
+		4px 4px 40px 20px #717e9833,
+		-4px -4px 40px 0 #717e9833;
+	border-radius: 20px;
+`;
+
+const MainSettingModalHeadLayout = styled.section`
+	display: flex;
+	flex-direction: column;
+	gap: 3.2rem;
+	width: 100%;
+	height: 9.2rem;
+`;
+
+const MainSettingModalBodyLayout = styled.section`
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+`;
+
+const ModalTopButtonBox = styled.div`
+	display: flex;
+	justify-content: space-between;
+`;
+
+const ButtonBox = styled.div`
+	display: flex;
+	gap: 0.8rem;
+`;
+
+const PopUpTitleBox = styled.div`
+	display: flex;
+	align-items: center;
+	width: 100%;
+	height: 5.9rem;
+`;
+
+const MainSettingModalButtonLayout = styled.div`
+	display: flex;
+	justify-content: flex-end;
+	width: 100%;
+	height: 3.2rem;
+`;
+
+export default MainSettingModal;

src/components/common/v2/popup/DateBtn.tsx

@@ -0,0 +1,108 @@
+import styled from '@emotion/styled';
+import { useState } from 'react';
+
+import DateCorrectionModal from '@/components/common/datePicker/DateCorrectionModal';
+import Icon from '@/components/common/Icon';
+import formatDateWithDay from '@/utils/formatDateWithDay';
+
+interface DateBtnProps {
+	isAllday: boolean;
+	isSetDate: boolean;
+	startTime?: string;
+	endTime: string;
+	date: Date;
+	setDate: (newDate: Date) => void;
+}
+
+function DateBtn({ isAllday, isSetDate, startTime, endTime, date, setDate }: DateBtnProps) {
+	const [isOpen, setIsOpen] = useState(false);
+
+	const renderTimeText = () => {
+		if (isAllday) return null;
+		if (startTime && endTime) {
+			return `${startTime}-${endTime}`;
+		}
+		if (endTime) {
+			return `${endTime} 까지`;
+		}
+		return null;
+	};
+
+	const onClickDateBtn = () => {
+		if (!isSetDate) setIsOpen((prev) => !prev);
+	};
+
+	const handleModalClose = () => {
+		setIsOpen(false);
+	};
+
+	const handleCurrentDate = (newDate: Date) => {
+		setDate(newDate);
+		setIsOpen(false);
+	};
+
+	const handleBlur = (event: React.FocusEvent<HTMLDivElement>) => {
+		if (!event.currentTarget.contains(event.relatedTarget)) {
+			setIsOpen(false);
+		}
+	};
+
+	return (
+		<DateWrapper onBlur={handleBlur} tabIndex={-1}>
+			<DateBtnLayout onClick={onClickDateBtn} isActive={isOpen}>
+				<Icon name={isSetDate ? 'IcnModify' : 'IcnCalendar'} size="tiny" color="nomal" />
+				<TextBox>
+					{formatDateWithDay(date)} {isSetDate && renderTimeText()}
+				</TextBox>
+			</DateBtnLayout>
+			{isOpen && (
+				<DropdownStyle tabIndex={-1}>
+					<DateCorrectionModal
+						date={formatDateWithDay(date)}
+						onClick={handleModalClose}
+						handleCurrentDate={handleCurrentDate}
+						top={0.8}
+					/>
+				</DropdownStyle>
+			)}
+		</DateWrapper>
+	);
+}
+
+const DateWrapper = styled.div`
+	position: relative;
+`;
+
+const DateBtnLayout = styled.button<{ isActive: boolean }>`
+	display: flex;
+	gap: 0.8rem;
+	align-items: center;
+	justify-content: center;
+	width: auto;
+	height: 3.2rem;
+	padding: 0 1.6rem;
+
+	background-color: ${({ theme, isActive }) => (isActive ? theme.color.Grey.Grey3 : theme.colorToken.Neutral.normal)};
+	border: 1px solid ${({ theme }) => theme.colorToken.Outline.neutralNormal};
+	border-radius: 8px;
+
+	:hover {
+		background-color: ${({ theme, isActive }) => (isActive ? theme.color.Grey.Grey3 : theme.color.Grey.Grey2)};
+	}
+`;
+
+const TextBox = styled.p`
+	width: auto;
+	height: 1.4rem;
+
+	color: ${({ theme }) => theme.colorToken.Text.assistive};
+	${({ theme }) => theme.font.label05};
+	font-weight: 500;
+`;
+
+const DropdownStyle = styled.div`
+	position: absolute;
+	z-index: 3;
+`;
+
+export default DateBtn;

src/components/common/v2/popup/DateTimeBtn.tsx

@@ -1,53 +1,72 @@
 import styled from '@emotion/styled';
+import { useState } from 'react';
 
-import Icon from '@/components/common/Icon';
+import DateBtn from '@/components/common/v2/popup/DateBtn';
 import TimeBtn from '@/components/common/v2/popup/TimeBtn';
 
 interface DateTimeBtnProps {
-	date: string;
+	date: Date;
 	startTime?: string;
 	endTime: string;
 	isSetDate: boolean;
 	isAllday?: boolean;
 	onClick: () => void;
 }
 
-function DateTimeBtn({ date, startTime, endTime, isSetDate = false, isAllday = false, onClick }: DateTimeBtnProps) {
-	const renderTimeText = () => {
-		if (isAllday) return null;
-		if (startTime && endTime) {
-			return `${startTime}-${endTime}`;
-		}
-		if (endTime) {
-			return `${endTime} 까지`;
-		}
-		return null;
+function DateTimeBtn({
+	date: initDate,
+	startTime: initStartTime,
+	endTime: initEndTime,
+	isSetDate,
+	isAllday = false,
+	onClick,
+}: DateTimeBtnProps) {
+	const [startTime, setStartTime] = useState(initStartTime);
+	const [endTime, setEndTime] = useState(initEndTime);
+	const [date, setDate] = useState(initDate);
+
+	const updateStartTime = (newTime: string) => {
+		setStartTime(newTime);
+	};
+
+	const updateEndTime = (newTime: string) => {
+		setEndTime(newTime);
+	};
+
+	const updateDate = (newDate: Date) => {
+		setDate(newDate);
 	};
 
 	return isSetDate ? (
 		<DateTimeBtnContainer onClick={onClick}>
-			<DateTimeBtnLayout>
-				<Icon name="IcnModify" size="tiny" color="nomal" />
-				<TextBox>
-					{date} {renderTimeText()}
-				</TextBox>
-			</DateTimeBtnLayout>
+			<DateBtn
+				isAllday={isAllday}
+				isSetDate={isSetDate}
+				startTime={startTime}
+				endTime={endTime}
+				date={date}
+				setDate={updateDate}
+			/>
 		</DateTimeBtnContainer>
 	) : (
 		<DateTimeBtnContainer isSingle={!startTime}>
-			<DateTimeBtnLayout>
-				<Icon name="IcnCalendar" size="tiny" color="nomal" />
-				<TextBox>{date}</TextBox>
-			</DateTimeBtnLayout>
+			<DateBtn
+				isAllday={isAllday}
+				isSetDate={isSetDate}
+				startTime={startTime}
+				endTime={endTime}
+				date={date}
+				setDate={updateDate}
+			/>
 			{!isAllday && (
 				<TimeBtnContainer>
 					{startTime && (
 						<>
-							<TimeBtn time={startTime} />
+							<TimeBtn time={startTime} setTime={updateStartTime} />
 							<GrayText>부터</GrayText>
 						</>
 					)}
-					<TimeBtn time={endTime} />
+					<TimeBtn time={endTime} setTime={updateEndTime} />
 					<GrayText>까지</GrayText>
 				</TimeBtnContainer>
 			)}
@@ -63,36 +82,15 @@ const DateTimeBtnContainer = styled.div<{ isSingle?: boolean }>`
 	margin: 0 0 0 0.8rem;
 `;
 
-const DateTimeBtnLayout = styled.button`
-	display: flex;
-	gap: 0.8rem;
-	align-items: center;
-	justify-content: center;
-	width: auto;
-	height: 3.2rem;
-	padding: 0 1.6rem;
-
-	background-color: ${({ theme }) => theme.colorToken.Neutral.normal};
-	border: 1px solid ${({ theme }) => theme.colorToken.Outline.neutralNormal};
-	border-radius: 8px;
-`;
-
-const TextBox = styled.p`
-	width: auto;
-	height: 1.4rem;
-
-	color: ${({ theme }) => theme.colorToken.Text.assistive};
-	${({ theme }) => theme.font.label05};
-	font-weight: 500;
-`;
-
 const GrayText = styled.p`
 	align-content: center;
 	height: 3.2rem;
 
 	color: ${({ theme }) => theme.colorToken.Text.disable};
 	font-weight: 600;
 	font-size: 1.4rem;
+
+	${({ theme }) => theme.font.label05};
 `;
 
 const TimeBtnContainer = styled.div`