diff --git a/package.json b/package.json
index c87872e..ddfa91b 100644
--- a/package.json
+++ b/package.json
@@ -18,9 +18,11 @@
     "react-calendar": "^5.0.0",
     "react-dom": "^18.3.1",
     "react-icons": "^5.2.1",
+    "react-kakao-maps-sdk": "^1.1.27",
     "react-router-dom": "^6.24.0",
-    "swiper": "^11.1.4",
-    "react-kakao-maps-sdk": "^1.1.27"
+    "react-time-picker": "^7.0.0",
+    "react-time-picker-typescript": "^1.2.3",
+    "swiper": "^11.1.4"
   },
   "devDependencies": {
     "@types/react": "^18.3.3",
diff --git a/src/App.tsx b/src/App.tsx
index 3de3065..f21bc6f 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -36,7 +36,7 @@ function App() {
             element={<AttendanceEdit />}
           />
         </Route>
-        <Route path='/owner-calendar' element={<OwnerCalendarPage />} />
+        {/* <Route path='/owner-calendar' element={<OwnerCalendarPage />} /> */}
         <Route path='/part-time/*' element={<PaymentMain />}>
           <Route path='worktime' element={<WorkTime />} />
           <Route path='payment' element={<Payment />} />
diff --git a/src/components/calendar-owner/AttendanceEdit.tsx b/src/components/calendar-owner/AttendanceEdit.tsx
index 7cb6d6b..b397d97 100644
--- a/src/components/calendar-owner/AttendanceEdit.tsx
+++ b/src/components/calendar-owner/AttendanceEdit.tsx
@@ -1,71 +1,164 @@
-import { useState } from 'react';
+import { ChangeEvent, useState } from 'react';
 import { useAttendance } from '../../contexts/Attendance-Context';
 import InputBox from '../ui/InputBox';
-import { VStack } from '../ui/Stack';
+import { Spacer, VStack } from '../ui/Stack';
 import TimeBox from './TimeBox';
 import WorkPlaceName from '../ui/WorkPlaceName';
 import SelectOptions from './SelectOptions';
 import Select from './Select';
+import { getTimeString } from '../../utils/get-TimeString';
+import { MINIMUM_PAY_PER_HOUR } from '../../utils/const-value';
+import BtnBottom from '../BtnBottom';
+import ModalCenter from '../ModalCenter';
+import { useNavigate } from 'react-router-dom';
 
 const mockData = [
   {
     workPlaceId: 1, // Long
     workPlaceNm: '롯데리아 자양점',
     workPlaceColor: '01', // String
-    workPlaceEmployeeId: 1, // Long
+    workPlaceEmployeeId: 10, // Long
     employeeNm: '이신광', // String
   },
   {
     workPlaceId: 1, // Long
     workPlaceNm: '롯데리아 자양점',
     workPlaceColor: '01', // String
-    workPlaceEmployeeId: 2, // Long
+    workPlaceEmployeeId: 12, // Long
     employeeNm: '이서하', // String
   },
   {
     workPlaceId: 1, // Long
     workPlaceNm: '롯데리아 자양점',
     workPlaceColor: '01',
-    workPlaceEmployeeId: 3, // Long
+    workPlaceEmployeeId: 13, // Long
     employeeNm: '정연주', // String
   },
   {
     workPlaceId: 2, // Long
     workPlaceNm: '버거킹',
     workPlaceColor: '02', // String
-    workPlaceEmployeeId: 4, // Long
+    workPlaceEmployeeId: 14, // Long
     employeeNm: '고영우', // String
   },
   {
     workPlaceId: 2, // Long
     workPlaceNm: '버거킹',
     workPlaceColor: '02', // String
-    workPlaceEmployeeId: 5, // Long
+    workPlaceEmployeeId: 18, // Long
     employeeNm: '최은진', // String
   },
 ];
 
 const AttendanceEdit = () => {
-  const [workEmployeeList, setWorkEmployeeList] = useState(mockData);
+  const navigation = useNavigate();
+
+  const [workEmployeeList] = useState(mockData); // 나의 전체 사업장의 전 직원들
 
   const { attendance, changeAttendance } = useAttendance();
-  const [employeeId, setEmployeeId] = useState(attendance?.workPlaceEmployeeId);
-  const [startTime, setStartTime] = useState(attendance?.startTime);
-  const [endTime, setEndTime] = useState(attendance?.endTime);
+  const [workPlaceEmployeeId, setWorkPlaceEmployeeId] = useState(
+    attendance?.workPlaceEmployeeId
+  );
+  const [startTime, setStartTime] = useState<Date | undefined>(
+    attendance?.startTime
+  );
+  const [endTime, setEndTime] = useState<Date | undefined>(attendance?.endTime);
+  const [restMinutes, setRestMinutes] = useState(attendance?.restMinutes);
   const [payPerHour, setPayPerHour] = useState(attendance?.payPerHour);
 
-  console.log(attendance);
+  const dateUrl = startTime!.toLocaleDateString('en-CA');
+
+  // 모달 관련
+  const [isModalOpen, setModalOpen] = useState(false);
+
+  const onSelectWorkEmployeeId = (id: number) => {
+    setWorkPlaceEmployeeId(id);
+  };
+
+  const onChangePayPerHour = (e: ChangeEvent<HTMLInputElement>) => {
+    if (Number(e.target.value) <= MINIMUM_PAY_PER_HOUR) {
+      e.target.value = `${MINIMUM_PAY_PER_HOUR}`;
+    }
+    setPayPerHour(Number(e.target.value));
+  };
+
+  const updateTime = (
+    date: Date | undefined,
+    time: string
+  ): Date | undefined => {
+    if (!date) return undefined;
+    const [hours, minutes] = time.split(':').map(Number);
+    const newDate = new Date(date);
+    newDate.setHours(hours, minutes);
+    return newDate;
+  };
 
   return (
-    <VStack className='px-6 py-10 gap-6'>
-      <InputBox label='근무자명'>
-        <Select options={workEmployeeList} />
-      </InputBox>
-      <InputBox label='근무 시간'>
-        <TimeBox />
-      </InputBox>
-      <InputBox label='시급' value={String(payPerHour)} />
-    </VStack>
+    <>
+      {isModalOpen && (
+        <ModalCenter
+          title={' '}
+          closeModal={() => setModalOpen(false)}
+          hasDecline
+          confirmAction={() => navigation(`/owner/calendar/${dateUrl}`)}
+        >{`정말로 수정하시겠습니까?`}</ModalCenter>
+      )}
+
+      <VStack className='px-6 py-10 gap-6'>
+        <InputBox label='근무자명'>
+          <Select
+            options={workEmployeeList}
+            selectedId={workPlaceEmployeeId!}
+            onSelect={onSelectWorkEmployeeId}
+          />
+        </InputBox>
+        <InputBox label='근무 시간'>
+          <TimeBox
+            startTime={getTimeString(attendance!.startTime)}
+            changeStartTime={(time: string) =>
+              setStartTime(updateTime(startTime, time))
+            }
+            endTime={getTimeString(attendance!.endTime)}
+            changeEndTime={(time: string) =>
+              setEndTime(updateTime(endTime, time))
+            }
+            restMinutes={restMinutes!}
+            changeRestMinutes={(minutes: number) => setRestMinutes(minutes)}
+          />
+        </InputBox>
+        <InputBox
+          label='시급'
+          value={String(payPerHour)}
+          onChange={onChangePayPerHour}
+        />
+
+        <div className='text-gray-400 text-sm'>
+          현재 최저시급은
+          <span className='underline'>{`${MINIMUM_PAY_PER_HOUR}`}</span>원
+          이에요..
+        </div>
+        <div className='text-gray-400 text-sm'>
+          근무 시간이 4시간 이상이면 30분 이상, <br />
+          8시간 이상이면 1시간 이상 휴게시간이 필요해요. <br /> (근로기준법
+          54조)
+        </div>
+
+        <Spacer />
+        <BtnBottom
+          text='근무 수정'
+          action={() => {
+            changeAttendance({
+              workPlaceEmployeeId: workPlaceEmployeeId!,
+              payPerHour: payPerHour!,
+              startTime: startTime!,
+              endTime: endTime!,
+              restMinutes: restMinutes!,
+            });
+            setModalOpen(true);
+          }}
+        />
+      </VStack>
+    </>
   );
 };
 export default AttendanceEdit;
diff --git a/src/components/calendar-owner/DateDetail.tsx b/src/components/calendar-owner/DateDetail.tsx
index 1ad3a45..9b706b7 100644
--- a/src/components/calendar-owner/DateDetail.tsx
+++ b/src/components/calendar-owner/DateDetail.tsx
@@ -23,8 +23,7 @@ const onClickChangeAttendance = (data: DateWorkDetail) => {
     payPerHour: data.payPerHour,
     startTime: data.startTime,
     endTime: data.endTime,
-    restStartTime: new Date(),
-    restEndTime: new Date(),
+    restMinutes: data.restMinutes,
   };
 };
 
@@ -41,15 +40,13 @@ const DateDetail = () => {
   const targetDate = new Date(date!);
 
   const temp = getFilteredData(targetDate);
-  console.log(temp);
+  // console.log(temp);
 
   return (
-    <div className='px-6'>
-      <h2>Selected Date: {date}</h2>
-
+    <div className='px-6 py-7'>
       <VStack className='gap-3'>
         <HStack className='justify-between items-center'>
-          <div>총 근무 시간: 8시간</div>
+          <div>총 근무 시간: 8시간 이거 꼭 바꿔야함</div>
           <button className='bg-hanaLightGreen gap-2 py-1 px-2 flex items-center rounded-lg text-white'>
             <AiOutlinePlusCircle />
             <div>근무 추가</div>
@@ -66,8 +63,7 @@ const DateDetail = () => {
                 payPerHour: item.payPerHour,
                 startTime: item.startTime,
                 endTime: item.endTime,
-                restStartTime: new Date(),
-                restEndTime: new Date(),
+                restMinutes: item.restMinutes,
               }),
                 onClickEditAttendance(item.attendanceId);
             }}
diff --git a/src/components/calendar-owner/Select.tsx b/src/components/calendar-owner/Select.tsx
index dced398..400090c 100644
--- a/src/components/calendar-owner/Select.tsx
+++ b/src/components/calendar-owner/Select.tsx
@@ -3,23 +3,26 @@ import WorkPlaceName from '../ui/WorkPlaceName';
 import SelectBox from './SelectBox';
 import { useState } from 'react';
 
+type optionView = {
+  workPlaceId: number;
+  workPlaceNm: string;
+  workPlaceColor: string;
+  workPlaceEmployeeId: number;
+  employeeNm: string;
+};
 type SelectProps = {
-  options: [];
+  options: optionView[];
+  selectedId: number;
+  onSelect: (id: number) => void;
 };
 
-const Select = ({ options }: SelectProps) => {
-  const [selected, setSelected] = useState({
-    workPlaceId: 1, // Long
-    workPlaceNm: '롯데리아 자양점',
-    workPlaceColor: '01', // String
-    workPlaceEmployeeId: 1, // Long
-    employeeNm: '이신광', // String
-  });
-  const [showList, setShowList] = useState(false);
+const filteredData = (options: optionView[], selectedId: number) => {
+  return options.find((e) => e.workPlaceEmployeeId === selectedId);
+};
 
-  const onClickSelect = (data) => {
-    setSelected(data);
-  };
+const Select = ({ options, selectedId, onSelect }: SelectProps) => {
+  const [showList, setShowList] = useState(false);
+  const selected = filteredData(options, selectedId);
 
   return (
     <div className='w-full'>
@@ -29,18 +32,18 @@ const Select = ({ options }: SelectProps) => {
       >
         <div className='w-1/2 px-1 py-2'>
           <WorkPlaceName
-            name={selected.workPlaceNm}
-            colorType={selected.workPlaceColor}
+            name={selected!.workPlaceNm}
+            colorType={selected!.workPlaceColor}
           />
         </div>
-        <div className='w-1/2'>{selected.employeeNm}</div>
+        <div className='w-1/2 font-bold'>{selected!.employeeNm}</div>
         <FaAngleDown />
       </button>
       <SelectBox
         isOpen={showList}
         options={options}
         onClose={() => setShowList(false)}
-        onClick={onClickSelect}
+        onClick={onSelect}
       />
     </div>
   );
diff --git a/src/components/calendar-owner/SelectBox.tsx b/src/components/calendar-owner/SelectBox.tsx
index b1db9b3..167fad8 100644
--- a/src/components/calendar-owner/SelectBox.tsx
+++ b/src/components/calendar-owner/SelectBox.tsx
@@ -51,20 +51,20 @@ type SelectBoxProps = {
     employeeNm: string;
   }[];
   onClose: () => void;
-  onClick: (data) => void;
+  onClick: (id: number) => void;
 };
 
 const SelectBox = ({ isOpen, options, onClose, onClick }: SelectBoxProps) => {
   if (!isOpen) return null;
 
   return (
-    <div className='w-full border overflow-y-scroll rounded-b-xl'>
-      <VStack>
+    <div className='w-full h-full border rounded-b-xl'>
+      <VStack className='h-40 overflow-scroll '>
         {options.map((data) => (
           <button
             key={data.workPlaceEmployeeId}
             onClick={() => {
-              onClick(data);
+              onClick(data.workPlaceEmployeeId);
               onClose();
             }}
             className='bg-white'
diff --git a/src/components/calendar-owner/TimeBox.tsx b/src/components/calendar-owner/TimeBox.tsx
index 613bfad..aff121b 100644
--- a/src/components/calendar-owner/TimeBox.tsx
+++ b/src/components/calendar-owner/TimeBox.tsx
@@ -1,30 +1,54 @@
 import { CgBorderStyleSolid } from 'react-icons/cg';
 import { HStack, VStack } from '../ui/Stack';
 import { FaAngleDown } from 'react-icons/fa6';
+import TimePickerCustom from './TimePickerCustom';
+import { ChangeEvent } from 'react';
+
+type TimeBoxProps = {
+  startTime: string;
+  changeStartTime: (time: string) => void;
+  endTime: string;
+  changeEndTime: (time: string) => void;
+  restMinutes: number;
+  changeRestMinutes: (minutes: number) => void;
+};
+
+const TimeBox = (props: TimeBoxProps) => {
+  const {
+    startTime,
+    changeStartTime,
+    endTime,
+    changeEndTime,
+    restMinutes,
+    changeRestMinutes,
+  } = props;
+
+  const onChangeRestMinute = (e: ChangeEvent<HTMLInputElement>) => {
+    if (Number(e.target.value) < 0) {
+      return (e.target.value = '0');
+    }
+    changeRestMinutes(Number(e.target.value));
+  };
 
-const TimeBox = () => {
   return (
-    <VStack className='mx-auto'>
-      <HStack className='justify-center items-center'>
+    <VStack className='mx-auto gap-3'>
+      <HStack className='items-center justify-between'>
         <div className='font-semibold text-sm me-3'>근무 시간</div>
-        <HStack className='border-b-2 border-b-black font-bold items-center'>
-          10:30
-          <FaAngleDown />
-        </HStack>
+        <TimePickerCustom time={startTime} onChangeTime={changeStartTime} />
         <CgBorderStyleSolid />
-        <HStack className='border-b-2 border-b-black font-bold items-center'>
-          20:00 <FaAngleDown />
-        </HStack>
+        <TimePickerCustom time={endTime} onChangeTime={changeEndTime} />
       </HStack>
-      <HStack className='justify-center items-center'>
+      <HStack className='items-center justify-between'>
         <div className='font-semibold text-sm me-3'>휴게 시간</div>
-        <HStack className='border-b-2 border-b-black font-bold items-center'>
-          18:00 <FaAngleDown />
-        </HStack>
-        <CgBorderStyleSolid />
-        <HStack className='border-b-2 border-b-black font-bold items-center'>
-          18:30 <FaAngleDown />
-        </HStack>
+        <div>
+          <input
+            className='max-w-16 border-b-2 border-b-gray-400 font-bold items-center'
+            type={'number'}
+            value={restMinutes}
+            onChange={onChangeRestMinute}
+          />
+          분
+        </div>
       </HStack>
     </VStack>
   );
diff --git a/src/components/calendar-owner/TimePickerCustom.css b/src/components/calendar-owner/TimePickerCustom.css
new file mode 100644
index 0000000..1923b26
--- /dev/null
+++ b/src/components/calendar-owner/TimePickerCustom.css
@@ -0,0 +1,34 @@
+.react-ios-time-picker {
+  @apply !bg-white border border-hanaLightGreen;
+}
+.react-ios-time-picker-input {
+  @apply w-16 border-none;
+}
+
+.react-ios-time-picker-container {
+  @apply !bg-white;
+}
+.react-ios-time-picker-colon {
+  @apply text-hanaLightGreen;
+}
+.react-ios-time-picker-btn-container {
+  @apply bg-gray-50;
+}
+.react-ios-time-picker-btn {
+  @apply text-hanaLightGreen font-bold hover:bg-gray-300;
+}
+.react-ios-time-picker-selected-overlay {
+  @apply bg-white border border-hanaLightGreen;
+}
+.react-ios-time-picker-cell-inner-selected {
+  @apply text-hanaLightGreen;
+}
+.react-ios-time-picker-cell-inner-hour {
+  @apply hover:bg-red-300;
+}
+.react-ios-time-picker-cell-inner-minute {
+  @apply hover:bg-red-300;
+}
+/* .react-ios-time-picker-btn {
+  @apply text-hanaLightGreen font-bold;
+} */
diff --git a/src/components/calendar-owner/TimePickerCustom.tsx b/src/components/calendar-owner/TimePickerCustom.tsx
new file mode 100644
index 0000000..6192512
--- /dev/null
+++ b/src/components/calendar-owner/TimePickerCustom.tsx
@@ -0,0 +1,41 @@
+import { useState } from 'react';
+import { FaAngleDown } from 'react-icons/fa6';
+import { TimePicker } from 'react-time-picker-typescript';
+import 'react-time-picker-typescript/dist/style.css';
+import './TimePickerCustom.css';
+import { HStack } from '../ui/Stack';
+
+type TimePickerCustomProps = {
+  time: string;
+  onChangeTime: (time: string) => void;
+};
+
+const TimePickerCustom = ({ time, onChangeTime }: TimePickerCustomProps) => {
+  // const [value, setValue] = useState('10:00');
+  const [isFocused, setIsFocused] = useState(false);
+
+  const handleTimeChange = (timeValue: string | null) => {
+    if (timeValue) onChangeTime(timeValue);
+  };
+
+  return (
+    <HStack
+      className={`border-b-2 font-bold items-center ${isFocused ? 'border-b-hanaLightGreen' : 'border-b-gray-400'}`}
+    >
+      <TimePicker
+        onChange={handleTimeChange}
+        value={time}
+        saveButtonText='저장'
+        cancelButtonText='취소'
+        inputClassName={`${isFocused ? 'text-hanaLightGreen' : 'text-black'}`}
+        onOpen={() => setIsFocused(true)}
+        onCancel={() => setIsFocused(false)}
+      />
+      <FaAngleDown
+        className={`${isFocused ? 'text-hanaLightGreen' : 'text-gray-400'}`}
+      />
+    </HStack>
+  );
+};
+
+export default TimePickerCustom;
diff --git a/src/components/calendar-owner/modal/Modal.tsx b/src/components/calendar-owner/modal/Modal.tsx
deleted file mode 100644
index 4836688..0000000
--- a/src/components/calendar-owner/modal/Modal.tsx
+++ /dev/null
@@ -1,135 +0,0 @@
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-import { HTMLAttributes, useEffect, useState } from 'react';
-import StatusBar from './StatusBar';
-import cn from './cn';
-import XButton from './Xbutton';
-import { VStack } from '../../ui/Stack';
-
-interface ModalProps extends HTMLAttributes<HTMLDivElement> {
-  show: boolean;
-  xButton?: boolean;
-  dark?: boolean;
-  hideBackDrop?: boolean;
-  modalType?: 'modal' | 'sheet';
-  backDrop?: boolean;
-  onClose: () => void;
-}
-
-function Modal({
-  show,
-  xButton = false,
-  dark = false,
-  hideBackDrop = false,
-  modalType = 'modal',
-  backDrop = false,
-  onClose,
-  children,
-  className = '',
-  ...props
-}: ModalProps) {
-  // 내용 보여줄지
-  const [showContent, setShowContent] = useState<boolean>(false);
-
-  // 기본 백드롭 클래스네임
-  const baseBackDropClassName = 'transition-opacity';
-  // 백드롭 투명도 처리
-  const backDropOpacityClassName = showContent ? 'opacity-100' : 'opacity-0';
-  // 백드롭 클래스네임
-  const processedBackDropClassName = cn(
-    baseBackDropClassName,
-    backDropOpacityClassName
-  );
-
-  // 애니메이션 고려해서 모달/시트 열 때는 바로 컨텐츠 보여주지만
-  // 닫을 때는 0.2초 지연 후 가림
-  useEffect(() => {
-    if (show) setShowContent(true);
-    else {
-      const hideContent = setTimeout(() => setShowContent(false), 200);
-      return () => {
-        clearTimeout(hideContent);
-      };
-    }
-  }, [show]);
-
-  if (show || showContent)
-    return (
-      <div
-        className={cn(
-          'absolute top-0 left-0 w-iPhone h-iPhone z-40',
-          !hideBackDrop && showContent ? 'backdrop-blur-sm' : 'delay-100'
-        )}
-        style={{ translate: '0.25px -0.25px' }}
-      >
-        {/* 백드롭(어두운 오버레이) + 상단 스테이터스바 흰색버전 */}
-        <div className={processedBackDropClassName}>
-          {!hideBackDrop && <StatusBar className='absolute' white />}
-          <div
-            className={cn(
-              'absolute w-iPhone h-iPhone bg-black z-30 rounded-3xl transition-opacity',
-              !hideBackDrop && showContent ? 'opacity-50' : 'opacity-0'
-            )}
-            onClick={() => {
-              if (backDrop) onClose();
-            }}
-          />
-          <div className='absolute w-iPhone h-iPhone flex flex-col items-center justify-center'>
-            {
-              // 모달 또는 시트 렌더링
-              {
-                // 모달
-                modal: (
-                  <div
-                    className={cn(
-                      'absolute p-8 shadowed rounded-3xl w-fit h-fit z-40 transition-all delay-100',
-                      show && showContent
-                        ? 'opacity-100'
-                        : 'translate-y-10 opacity-0',
-                      dark ? 'bg-secondary' : 'bg-white',
-                      className
-                    )}
-                    {...props}
-                  >
-                    {xButton && (
-                      <XButton
-                        className='absolute -translate-x-4 -translate-y-4'
-                        onClick={onClose}
-                        white={dark}
-                      />
-                    )}
-                    {children}
-                  </div>
-                ),
-                // 시트
-                sheet: (
-                  <VStack
-                    className={cn(
-                      'absolute bottom-0 w-iPhone h-fit p-6 rounded-t-3xl z-40 transition-all delay-100',
-                      show && showContent
-                        ? 'opacity-100'
-                        : 'translate-y-20 opacity-0',
-                      dark ? 'bg-secondary' : 'bg-white',
-                      className
-                    )}
-                    {...props}
-                  >
-                    {xButton && (
-                      <XButton
-                        className='absolute -translate-x-4 -translate-y-4'
-                        onClick={onClose}
-                        white={dark}
-                      />
-                    )}
-                    {children}
-                  </VStack>
-                ),
-              }[modalType]
-            }
-          </div>
-        </div>
-      </div>
-    );
-}
-
-export default Modal;
diff --git a/src/components/calendar-owner/modal/StatusBar.tsx b/src/components/calendar-owner/modal/StatusBar.tsx
deleted file mode 100644
index 724b7f9..0000000
--- a/src/components/calendar-owner/modal/StatusBar.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { useEffect, useState } from 'react';
-import { HStack, Spacer } from '../../ui/Stack';
-import currentTime from './currentTime';
-import cn from './cn';
-
-interface StatusBarProps {
-  white?: boolean;
-  className?: string;
-}
-
-function StatusBar({ className = '', white = false }: StatusBarProps) {
-  const [time, setTime] = useState<string>(currentTime());
-  useEffect(() => {
-    const interval = setInterval(() => {
-      setTime(currentTime());
-    }, 1000);
-    return () => clearInterval(interval);
-  }, []);
-  const color = white ? 'white' : 'black';
-  return (
-    <HStack
-      className={cn(
-        'items-center py-2 px-8 font-bold text-lg w-full',
-        white ? 'text-white' : 'text-black',
-        className
-      )}
-    >
-      {/* 시계 */}
-      <span className={white ? 'z-50' : ''}>{time}</span>
-      <Spacer />
-      {/* 와이파이 아이콘 */}
-      <svg
-        className={cn('w-6 h-6', white ? 'z-50' : '')}
-        viewBox='0 0 1024 1024'
-        fill={color}
-      >
-        <path d='M512 192c-163 0-326 67.2-443 176.6-6.6 6-6.8 16.2-0.6 22.8l53.4 55.8c6.2 6.6 16.6 6.8 23.2 0.6 46.6-43.2 99.8-77.6 158.6-102 66-27.6 136.2-41.4 208.6-41.4s142.6 14 208.6 41.4c58.8 24.6 112 58.8 158.6 102 6.6 6.2 17 6 23.2-0.6l53.4-55.8c6.2-6.4 6-16.6-0.6-22.8C838 259.2 675 192 512 192z' />
-        <path d='M226.4 555l57.2 56.6c6.2 6 16 6.4 22.4 0.6 56.6-50.2 129.2-77.8 205.8-77.8s149.2 27.4 205.8 77.8c6.4 5.8 16.2 5.4 22.4-0.6l57.2-56.6c6.6-6.6 6.4-17.2-0.6-23.4-75-67.8-175.2-109.2-285-109.2s-210 41.4-285 109.2c-6.6 6.2-6.8 16.8-0.2 23.4zM512 648.4c-46.8 0-89.2 19.6-118.8 51-6 6.4-5.8 16.2 0.4 22.4l106.8 105.4c6.4 6.4 16.8 6.4 23.2 0l106.8-105.4c6.2-6.2 6.4-16 0.4-22.4-29.6-31.2-72-51-118.8-51z' />
-      </svg>
-      {/* 배터리 아이콘 */}
-      <svg
-        className={cn('w-8 h-8', white ? 'z-50' : '')}
-        viewBox='0 0 1024 1024'
-        fill={color}
-      >
-        <path d='M792 288H128c-52.8 0-96 43.2-96 96v256c0 52.8 43.2 96 96 96h664c52.8 0 96-43.2 96-96V384c0-52.8-43.2-96-96-96z m40 352c0 22-18 40-40 40H128c-22 0-40-18-40-40V384c0-22 18-40 40-40h664c22 0 40 18 40 40v256z m96-230.8v205.6c32 0 64-55.4 64-102.8s-32-102.8-64-102.8z' />
-        <path d='M768 384H152c-13.2 0-24 10.8-24 24v208c0 13.2 10.8 24 24 24h616c13.2 0 24-10.8 24-24V408c0-13.2-10.8-24-24-24z' />
-      </svg>
-    </HStack>
-  );
-}
-export default StatusBar;
diff --git a/src/components/calendar-owner/modal/Xbutton.tsx b/src/components/calendar-owner/modal/Xbutton.tsx
deleted file mode 100644
index 533d640..0000000
--- a/src/components/calendar-owner/modal/Xbutton.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { ButtonHTMLAttributes } from 'react';
-import cn from './cn';
-
-interface XButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  white?: boolean;
-}
-
-function XButton({ white = false, className = '', ...props }: XButtonProps) {
-  return (
-    <button
-      className={cn(
-        'h-fit w-fit p-2',
-        className,
-        white ? 'text-white' : 'text-black'
-      )}
-      {...props}
-    >
-      <svg
-        className='h-6 w-6'
-        xmlns='http://www.w3.org/2000/svg'
-        fill='none'
-        viewBox='0 0 24 24'
-        stroke='currentColor'
-        aria-hidden='true'
-      >
-        <path
-          strokeLinecap='round'
-          strokeLinejoin='round'
-          strokeWidth='2'
-          d='M6 18L18 6M6 6l12 12'
-        />
-      </svg>
-    </button>
-  );
-}
-
-export default XButton;
diff --git a/src/components/calendar-owner/modal/cn.ts b/src/components/calendar-owner/modal/cn.ts
deleted file mode 100644
index 5da96f0..0000000
--- a/src/components/calendar-owner/modal/cn.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-const cn = (...classNames: string[]) => classNames.join(' ');
-export default cn;
diff --git a/src/components/calendar-owner/modal/currentTime.ts b/src/components/calendar-owner/modal/currentTime.ts
deleted file mode 100644
index 7c8373b..0000000
--- a/src/components/calendar-owner/modal/currentTime.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-const currentTime = () => {
-  const now = new Date();
-  const hours = now.getHours().toString().padStart(2, '0');
-  const minutes = now.getMinutes().toString().padStart(2, '0');
-  return `${hours}:${minutes}`;
-};
-
-export const currentTime2 = () => {
-  const now = new Date();
-  const year = now.getFullYear();
-  const month = String(now.getMonth() + 1).padStart(2, '0');
-  const day = String(now.getDate()).padStart(2, '0');
-  const hours = String(now.getHours()).padStart(2, '0');
-  const minutes = String(now.getMinutes()).padStart(2, '0');
-  const seconds = String(now.getSeconds()).padStart(2, '0');
-  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
-};
-
-export default currentTime;
diff --git a/src/components/ui/CalendarCustom.tsx b/src/components/ui/CalendarCustom.tsx
index d79113b..91ab968 100644
--- a/src/components/ui/CalendarCustom.tsx
+++ b/src/components/ui/CalendarCustom.tsx
@@ -6,93 +6,12 @@ import CalendarMark from './CalendarMark';
 import { useNavigate } from 'react-router-dom';
 import { useCalendarData } from '../../contexts/Calender-Data-Context';
 
-const mockData = [
-  {
-    workPlaceId: 1,
-    workPlaceName: '롯데리아',
-    workPlaceColor: '01',
-    days: [
-      {
-        attendanceId: 2453,
-        workPlaceEmployeeId: 10,
-        employeeName: '이신광',
-        attendanceType: 'real', // expect, real
-        payPerHour: 10000,
-        startTime: '2024-06-26T10:30:00',
-        endTime: '2024-06-26T14:30:00',
-      },
-      {
-        attendanceId: 2460,
-        workPlaceEmployeeId: 10,
-        employeeName: '이신광',
-        attendanceType: 'expect', // expect, real
-        payPerHour: 10000,
-        startTime: '2024-06-30T09:30:00',
-        endTime: '2024-06-30T18:30:00',
-      },
-      {
-        attendanceId: 2461,
-        workPlaceEmployeeId: 12,
-        employeeName: '이서하',
-        attendanceType: 'expect', // expect, real
-        payPerHour: 12000,
-        startTime: '2024-06-30T09:30:00',
-        endTime: '2024-06-30T18:30:00',
-      },
-      {
-        attendanceId: 2991,
-        workPlaceEmployeeId: 12,
-        employeeName: '이서하',
-        attendanceType: 'real', // expect, real
-        payPerHour: 9910,
-        startTime: '2024-06-28T09:30:00',
-        endTime: '2024-06-28T18:30:00',
-      },
-    ],
-  },
-  {
-    workPlaceId: 2,
-    workPlaceName: '버거킹',
-    workPlaceColor: '02',
-    days: [
-      {
-        attendanceId: 1999,
-        workPlaceEmployeeId: 15,
-        employeeName: '정연주',
-        attendanceType: 'real', // expect, real
-        payPerHour: 10000,
-        startTime: '2024-06-26T10:30:00',
-        endTime: '2024-06-26T14:30:00',
-      },
-      {
-        attendanceId: 2464,
-        workPlaceEmployeeId: 18,
-        employeeName: '최은진',
-        attendanceType: 'expect', // expect, real
-        payPerHour: 12000,
-        startTime: '2024-06-29T09:30:00',
-        endTime: '2024-06-29T18:30:00',
-      },
-      {
-        attendanceId: 2479,
-        workPlaceEmployeeId: 18,
-        employeeName: '최은진',
-        attendanceType: 'expect', // expect, real
-        payPerHour: 12000,
-        startTime: '2024-06-30T09:30:00',
-        endTime: '2024-06-30T18:30:00',
-      },
-    ],
-  },
-];
-
 type ValuePiece = Date | null;
 type Value = ValuePiece | [ValuePiece, ValuePiece];
 
 const CalendarCustom = () => {
   const [value, setValue] = useState<Value>(new Date());
   const { calendarData } = useCalendarData();
-  // const [data, setData] = useState(mockData);
   const navigate = useNavigate();
 
   const onChangeCurrentDate = (args: OnArgs) => {
diff --git a/src/components/ui/InputBox.tsx b/src/components/ui/InputBox.tsx
index 16bced6..7f55ce8 100644
--- a/src/components/ui/InputBox.tsx
+++ b/src/components/ui/InputBox.tsx
@@ -8,6 +8,7 @@ import { VStack } from './Stack';
 
 interface InputBoxProps extends InputHTMLAttributes<HTMLInputElement> {
   type?: 'UNDER_BAR' | 'BORDER';
+  valueType?: 'NUMBER';
   label: string;
   value?: string;
   onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
@@ -25,6 +26,7 @@ const getClassNameByType = (type: string) => {
 const InputBox = (props: PropsWithChildren<InputBoxProps>) => {
   const {
     type = 'UNDER_BAR',
+    valueType = 'NUMBER',
     label,
     value,
     onChange,
@@ -40,7 +42,9 @@ const InputBox = (props: PropsWithChildren<InputBoxProps>) => {
     <VStack
       className={`border-2 border-gray-300  focus-within:border-hanaLightGreen  rounded-xl p-5 shadow-lg gap-2 transition-all duration-300`}
     >
-      <div className={`text-left font-bold ${isFocused ? 'text-lg' : ''}`}>
+      <div
+        className={`text-left font-bold ${isFocused ? 'text-lg' : 'text-md'}`}
+      >
         {label}
       </div>
       <div>
@@ -48,6 +52,7 @@ const InputBox = (props: PropsWithChildren<InputBoxProps>) => {
           <input
             className={`w-full border-gray-300 ${getClassNameByType(type)} focus:outline-none focus:border-hanaLightGreen`}
             value={value}
+            type={valueType}
             onChange={onChange}
             onFocus={onFocusHandle}
             onBlur={onBlurHnadle}
diff --git a/src/contexts/Calender-Data-Context.tsx b/src/contexts/Calender-Data-Context.tsx
index f05faf4..e037c35 100644
--- a/src/contexts/Calender-Data-Context.tsx
+++ b/src/contexts/Calender-Data-Context.tsx
@@ -15,6 +15,7 @@ const mockData = [
         payPerHour: 10000,
         startTime: new Date('2024-06-26T10:30:00'),
         endTime: new Date('2024-06-26T14:30:00'),
+        restMinutes: 60,
       },
       {
         attendanceId: 2460,
@@ -24,6 +25,7 @@ const mockData = [
         payPerHour: 10000,
         startTime: new Date('2024-06-30T10:30:00'),
         endTime: new Date('2024-06-30T18:30:00'),
+        restMinutes: 60,
       },
       {
         attendanceId: 2461,
@@ -33,6 +35,7 @@ const mockData = [
         payPerHour: 12000,
         startTime: new Date('2024-06-30T08:30:00'),
         endTime: new Date('2024-06-30T18:30:00'),
+        restMinutes: 30,
       },
       {
         attendanceId: 2991,
@@ -42,6 +45,7 @@ const mockData = [
         payPerHour: 9910,
         startTime: new Date('2024-06-28T09:30:00'),
         endTime: new Date('2024-06-28T18:30:00'),
+        restMinutes: 30,
       },
     ],
   },
@@ -58,6 +62,7 @@ const mockData = [
         payPerHour: 10000,
         startTime: new Date('2024-06-26T10:30:00'),
         endTime: new Date('2024-06-26T14:30:00'),
+        restMinutes: 60,
       },
       {
         attendanceId: 2464,
@@ -67,6 +72,7 @@ const mockData = [
         payPerHour: 12000,
         startTime: new Date('2024-06-29T09:30:00'),
         endTime: new Date('2024-06-29T18:30:00'),
+        restMinutes: 30,
       },
       {
         attendanceId: 2479,
@@ -76,6 +82,7 @@ const mockData = [
         payPerHour: 12000,
         startTime: new Date('2024-06-30T09:30:00'),
         endTime: new Date('2024-06-30T18:30:00'),
+        restMinutes: 60,
       },
     ],
   },
@@ -86,7 +93,10 @@ type CalendarDataContextProps = {
   getFilteredData: (date: Date) => DateWorkDetail[];
 };
 
-const CalendarDataContext = createContext<CalendarDataContextProps>([]);
+const CalendarDataContext = createContext<CalendarDataContextProps>({
+  calendarData: [],
+  getFilteredData: (date: Date) => [],
+});
 
 export const CalendarDataProvider = ({ children }: PropsWithChildren) => {
   const [calendarData, setCalendarData] = useState(mockData);
diff --git a/src/types/calendar.d.ts b/src/types/calendar.d.ts
index 0bdf2fa..3064c64 100644
--- a/src/types/calendar.d.ts
+++ b/src/types/calendar.d.ts
@@ -6,6 +6,7 @@ export type CalendarDayType = {
   payPerHour: number;
   startTime: Date;
   endTime: Date;
+  restMinutes: number;
 };
 
 export type CalendarSalaryType = {
@@ -25,6 +26,7 @@ export type DateWorkDetail = {
   payPerHour: number;
   startTime: Date;
   endTime: Date;
+  restMinutes: number;
 };
 
 export type Attendance = {
@@ -33,6 +35,5 @@ export type Attendance = {
   payPerHour: number; // 시급
   startTime: Date; // 시작 시간
   endTime: Date; // 끝 시간
-  restStartTime: Date;
-  restEndTime: Date;
+  restMinutes: number;
 };
diff --git a/src/utils/const-value.ts b/src/utils/const-value.ts
new file mode 100644
index 0000000..d9c7a7e
--- /dev/null
+++ b/src/utils/const-value.ts
@@ -0,0 +1 @@
+export const MINIMUM_PAY_PER_HOUR = 9860;
diff --git a/yarn.lock b/yarn.lock
index 82aea05..dde75e3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -450,6 +450,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-portal@^4.0.4":
+  version "4.0.7"
+  resolved "https://registry.yarnpkg.com/@types/react-portal/-/react-portal-4.0.7.tgz#c7436c5039e74ec80d488fbe5c98dbcc6469bf44"
+  integrity sha512-3zQJL6Pqcq7d73+cakVkZDqAYGFBo37XXPfahjhdScr9EdYPlf9evYilL38Fpzs1YGWz7F2SkPtN6+ygTO7ymg==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-router-dom@^5.3.3":
   version "5.3.3"
   resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-5.3.3.tgz#e9d6b4a66fcdbd651a5f106c2656a30088cc1e83"
@@ -568,7 +575,7 @@
   dependencies:
     "@swc/core" "^1.5.7"
 
-"@wojtekmaj/date-utils@^1.1.3":
+"@wojtekmaj/date-utils@^1.1.3", "@wojtekmaj/date-utils@^1.5.0":
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/@wojtekmaj/date-utils/-/date-utils-1.5.1.tgz#c3cd67177ac781cfa5736219d702a55a2aea5f2b"
   integrity sha512-+i7+JmNiE/3c9FKxzWFi2IjRJ+KzZl1QPu6QNrsgaa2MuBgXvUy4gA1TVzf/JMdIIloB76xSKikTWuyYAIVLww==
@@ -1027,6 +1034,11 @@ delayed-stream@~1.0.0:
   resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
   integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==
 
+detect-element-overflow@^1.4.0:
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/detect-element-overflow/-/detect-element-overflow-1.4.2.tgz#2e48509e5aa07647f4335b5f4f52c146b92f99c5"
+  integrity sha512-4m6cVOtvm/GJLjo7WFkPfwXoEIIbM7GQwIh4WEa4g7IsNi1YzwUsGL5ApNLrrHL29bHeNeQ+/iZhw+YHqgE2Fw==
+
 didyoumean@^1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/didyoumean/-/didyoumean-1.2.2.tgz#989346ffe9e839b4555ecf5666edea0d3e8ad037"
@@ -2063,6 +2075,11 @@ lru-cache@^10.2.0:
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-10.2.2.tgz#48206bc114c1252940c41b25b41af5b545aca878"
   integrity sha512-9hp3Vp2/hFQUiIwKo8XCeFVnrg8Pk3TYNPIR7tJADKi5YfcF7vEaK7avFHTlSy3kOKYaJQaalfEo6YuXdceBOQ==
 
+make-event-props@^1.6.0:
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/make-event-props/-/make-event-props-1.6.2.tgz#c8e0e48eb28b9b808730de38359f6341de7ec5a2"
+  integrity sha512-iDwf7mA03WPiR8QxvcVHmVWEPfMY1RZXerDVNCRYW7dUr2ppH3J58Rwb39/WG39yTZdRSxr3x+2v22tvI0VEvA==
+
 map-age-cleaner@^0.1.3:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/map-age-cleaner/-/map-age-cleaner-0.1.3.tgz#7d583a7306434c055fe474b0f45078e6e1b4b92a"
@@ -2419,7 +2436,7 @@ prettier@^3.3.2:
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.3.2.tgz#03ff86dc7c835f2d2559ee76876a3914cec4a90a"
   integrity sha512-rAVeHYMcv8ATV5d508CFdn+8/pHPpXeIid1DdrPwXnaAdH7cqjVbpJaT5eq4yRAFU/lsbwYwSF/n5iNrdJHPQA==
 
-prop-types@^15.8.1:
+prop-types@^15.5.8, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -2453,6 +2470,15 @@ react-calendar@*, react-calendar@^5.0.0:
     get-user-locale "^2.2.1"
     warning "^4.0.0"
 
+react-clock@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/react-clock/-/react-clock-5.0.0.tgz#369b1c258b304a538a4de7d8cae18c7be77e51d5"
+  integrity sha512-Cj3XqwLB1svtGWiw/A6vmLIPb9OhA/BsWUpS46lXTNTilK7zmP2zmtFgQEAfWUssc3nERXkMXzI0YrkzDpc0gQ==
+  dependencies:
+    "@wojtekmaj/date-utils" "^1.5.0"
+    clsx "^2.0.0"
+    get-user-locale "^2.2.1"
+
 react-dom@^18.3.1:
   version "18.3.1"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.3.1.tgz#c2265d79511b57d479b3dd3fdfa51536494c5cb4"
@@ -2461,6 +2487,14 @@ react-dom@^18.3.1:
     loose-envify "^1.1.0"
     scheduler "^0.23.2"
 
+react-fit@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/react-fit/-/react-fit-2.0.1.tgz#4bcb4de7aa94c9fdf452b0c63de0889496f50244"
+  integrity sha512-Eip6ALs/+6Jv82Si0I9UnfysdwVlAhkkZRycgmMdnj7jwUg69SVFp84ICxwB8zszkfvJJ2MGAAo9KAYM8ZUykQ==
+  dependencies:
+    detect-element-overflow "^1.4.0"
+    warning "^4.0.0"
+
 react-icons@^5.2.1:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-5.2.1.tgz#28c2040917b2a2eda639b0f797bff1888e018e4a"
@@ -2479,6 +2513,13 @@ react-kakao-maps-sdk@^1.1.27:
     "@babel/runtime" "^7.22.15"
     kakao.maps.d.ts "^0.1.39"
 
+react-portal@^4.2.2:
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/react-portal/-/react-portal-4.2.2.tgz#bff1e024147d6041ba8c530ffc99d4c8248f49fa"
+  integrity sha512-vS18idTmevQxyQpnde0Td6ZcUlv+pD8GTyR42n3CHUQq9OHi1C4jDE4ZWEbEsrbrLRhSECYiao58cvocwMtP7Q==
+  dependencies:
+    prop-types "^15.5.8"
+
 react-router-dom@^6.24.0:
   version "6.24.0"
   resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.24.0.tgz#ec49dc38c49bb9bd25b310a8ae849268d3085e1d"
@@ -2494,6 +2535,28 @@ react-router@6.24.0:
   dependencies:
     "@remix-run/router" "1.17.0"
 
+react-time-picker-typescript@^1.2.3:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/react-time-picker-typescript/-/react-time-picker-typescript-1.2.3.tgz#5e2074318c38174d0af217859b0cb69188bc0daa"
+  integrity sha512-sENSnh2JG2PyTYSiVCCvawVJVwchwwjt05mkEj1XoPUIWEg2saMgBYRG5duRUh5LqlHLY7gqGOMlLlWPgEGTNQ==
+  dependencies:
+    "@types/react-portal" "^4.0.4"
+    react-portal "^4.2.2"
+    tiny-warning "^1.0.3"
+
+react-time-picker@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/react-time-picker/-/react-time-picker-7.0.0.tgz#3f9d80d2de8a8ffc57c41dd71095477f6a7ffc03"
+  integrity sha512-k6mUjkI+OsY73mg0yjMxqkLXv/UXR1LN7AARNqfyGZOwqHqo1JrjL3lLHTHWQ86HmPTBL/dZACbIX/fV1NLmWg==
+  dependencies:
+    "@wojtekmaj/date-utils" "^1.1.3"
+    clsx "^2.0.0"
+    get-user-locale "^2.2.1"
+    make-event-props "^1.6.0"
+    react-clock "^5.0.0"
+    react-fit "^2.0.0"
+    update-input-width "^1.4.0"
+
 react@^18.3.1:
   version "18.3.1"
   resolved "https://registry.yarnpkg.com/react/-/react-18.3.1.tgz#49ab892009c53933625bd16b2533fc754cab2891"
@@ -2889,6 +2952,11 @@ thenify-all@^1.0.0:
   dependencies:
     any-promise "^1.0.0"
 
+tiny-warning@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
+  integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
+
 to-regex-range@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
@@ -2990,6 +3058,11 @@ update-browserslist-db@^1.0.16:
     escalade "^3.1.2"
     picocolors "^1.0.1"
 
+update-input-width@^1.4.0:
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/update-input-width/-/update-input-width-1.4.2.tgz#49d327a39395185b0fd440b9c3b1d6f81173655c"
+  integrity sha512-/p0XLhrQQQ4bMWD7bL9duYObwYCO1qGr8R19xcMmoMSmXuQ7/1//veUnCObQ7/iW6E2pGS6rFkS4TfH4ur7e/g==
+
 uri-js@^4.2.2:
   version "4.4.1"
   resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.4.1.tgz#9b1a52595225859e55f669d928f88c6c57f2a77e"