feat: 일정 등록 시 초기화 버튼 구현

src/atoms/resetButtonAtom.ts

@@ -0,0 +1,6 @@
+import { atom } from 'recoil';
+
+export const resetButtonState = atom<boolean>({
+  key: 'resetButton',
+  default: false,
+});

src/components/addButton/AddButton.styles.ts

@@ -0,0 +1,66 @@
+import styled from '@emotion/styled';
+import theme from '../../styles/theme';
+
+export const Wrapper = styled.div`
+  width: 100%;
+  max-width: 412px;
+  height: 90px;
+
+  position: fixed;
+  z-index: 3;
+  bottom: 0;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+`;
+
+export const BottomWrapper = styled.div`
+  width: 100%;
+  border-top: 1px solid ${theme.colors.gray02};
+
+  background: ${theme.colors.gray01};
+
+  display: flex;
+  justify-content: space-between;
+  padding: 10px 20px 28px 20px;
+`;
+
+export const ResetButtonWrapper = styled.div`
+  width: 52px;
+  height: 52px;
+  border-radius: 50%;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: ${theme.colors.gray01};
+
+  filter: drop-shadow(0px 0px 7px rgba(0, 0, 0, 0.1));
+  cursor: pointer;
+`;
+
+export const ResetButton = styled.img`
+  width: 20px;
+  height: 20px;
+`;
+
+export const ResetText = styled.span`
+  color: ${theme.colors.gray05};
+  ${theme.typography.medium06};
+`;
+
+export const BottomButton = styled.button`
+  width: 273px;
+  height: 52px;
+  border-radius: 6px;
+
+  ${theme.typography.semibold03};
+  color: ${theme.colors.gray01};
+  background: ${theme.colors.purple06};
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;

src/components/addButton/AddButton.tsx

@@ -0,0 +1,52 @@
+import reset from '../../assets/icons/reset.svg';
+
+import {
+  BottomButton,
+  BottomWrapper,
+  ResetButton,
+  ResetButtonWrapper,
+  ResetText,
+  Wrapper,
+} from './AddButton.styles';
+
+interface TableSelectedTypes {
+  [key: number]: string[];
+}
+
+interface AddButtonTypes {
+  handleApplyClick: () => void;
+  setTableSelected: React.Dispatch<React.SetStateAction<TableSelectedTypes>>;
+  setIsResetButtonClick: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+const AddButton = ({
+  setTableSelected,
+  handleApplyClick,
+  setIsResetButtonClick,
+}: AddButtonTypes) => {
+  const handleResetClick = () => {
+    setTableSelected({});
+
+    const selected = document.querySelectorAll('.selected');
+
+    selected.forEach((element) => {
+      element.classList.remove('selected');
+    });
+
+    setIsResetButtonClick(true);
+  };
+
+  return (
+    <Wrapper>
+      <BottomWrapper>
+        <ResetButtonWrapper onClick={handleResetClick}>
+          <ResetButton src={reset} alt="reset" />
+          <ResetText>초기화</ResetText>
+        </ResetButtonWrapper>
+        <BottomButton onClick={handleApplyClick}>등록하기</BottomButton>
+      </BottomWrapper>
+    </Wrapper>
+  );
+};
+
+export default AddButton;

src/components/addTimeTable/AddTimeTable.tsx

@@ -11,7 +11,6 @@ import {
   TableWrapper,
 } from './AddTimeTable.styles';
 import Table from './Table';
-import BottomButton from '../bottomButton/BottomButton';
 
 import addPrevDisable from '../../assets/icons/addPrevDisable.png';
 import addNextDisable from '../../assets/icons/addNextDisable.png';
@@ -24,7 +23,7 @@ import { API } from '../../utils/API';
 import { getAddTimeTableInfo } from '../../utils/getAddTimeTableInfo';
 import { getAllTimeRange } from '../../utils/getAllTimeRange';
 import { getTimeRange } from '../../utils/getTimeRange';
-import { AxiosError } from 'axios';
+import AddButton from '../addButton/AddButton';
 
 const AddTimeTable = ({
   wrapperRef,
@@ -34,6 +33,9 @@ const AddTimeTable = ({
   setSelected,
   selectedMethod,
   dates,
+  setTableSelected,
+  isResetButtonClick,
+  setIsResetButtonClick,
 }: AddTimeTableTypes) => {
   const { roomUUID } = useParams();
   const navigate = useNavigate();
@@ -213,6 +215,8 @@ const AddTimeTable = ({
           tablePage={tablePage}
           selectedMethod={selectedMethod}
           validDateChunks={validDateChunks}
+          isResetButtonClick={isResetButtonClick}
+          setIsResetButtonClick={setIsResetButtonClick}
         />
       </TableWrapper>
       <ScrollbarTrack ref={trackRef}>
@@ -225,11 +229,16 @@ const AddTimeTable = ({
         />
       </ScrollbarTrack>
 
-      <BottomButton
+      {/* <BottomButton
         onClick={handleApplyClick}
         navigate={goToCurrent}
         text="등록하기"
         isActivated={true}
+      /> */}
+      <AddButton
+        setTableSelected={setTableSelected}
+        handleApplyClick={handleApplyClick}
+        setIsResetButtonClick={setIsResetButtonClick}
       />
     </>
   );

src/components/addTimeTable/AddTimeTable.types.ts

@@ -26,6 +26,9 @@ export interface AddTimeTableTypes {
   dates: string[];
   selected: TableSelectedTypes;
   setSelected: React.Dispatch<React.SetStateAction<TableSelectedTypes>>;
+  setTableSelected: React.Dispatch<React.SetStateAction<TableSelectedTypes>>;
+  isResetButtonClick: boolean;
+  setIsResetButtonClick: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 export interface TableType {
@@ -36,4 +39,6 @@ export interface TableType {
   tablePage: number;
   validDateChunks: Array<ChunkType[]>;
   times: number[];
+  isResetButtonClick: boolean;
+  setIsResetButtonClick: React.Dispatch<React.SetStateAction<boolean>>;
 }

src/components/addTimeTable/Table.tsx

@@ -24,6 +24,8 @@ const Table = ({
   tablePage,
   validDateChunks,
   times,
+  isResetButtonClick,
+  setIsResetButtonClick,
 }: TableType) => {
   const timeDetail = getTimeArray(times);
 
@@ -44,7 +46,8 @@ const Table = ({
 
   useEffect(() => {
     selectoRef.current.setSelectedTargets([]);
-  }, [selectedMethod]);
+    setIsResetButtonClick(false);
+  }, [selectedMethod, isResetButtonClick]);
 
   const handleCellSelect = (e: any) => {
     e.added.forEach((el: any) => {

src/pages/addTime/AddTime.tsx

@@ -15,6 +15,7 @@ import Tooltip from '../../components/tooltip/Tooltip';
 import { RoomTypes } from '../../types/roomInfo';
 import { TableSelectedTypes } from './AddTime.types';
 import { API } from '../../utils/API';
+import { resetButtonState } from '../../atoms/resetButtonAtom';
 
 const AddTime = () => {
   const { roomUUID } = useParams();
@@ -37,6 +38,8 @@ const AddTime = () => {
 
   const [selectedMethod, setSelectedMethod] =
     useRecoilState(selectedMethodState);
+  const [isResetButtonClick, setIsResetButtonClick] =
+    useRecoilState(resetButtonState);
 
   const [tableSelected, setTableSelected] = useState<TableSelectedTypes>({});
   const [calendarSelected, setCalendarSelected] = useState<string[]>([]);
@@ -80,7 +83,10 @@ const AddTime = () => {
               endTime={parseInt(endTime)}
               selected={tableSelected}
               setSelected={setTableSelected}
+              setTableSelected={setTableSelected}
               dates={dates}
+              isResetButtonClick={isResetButtonClick}
+              setIsResetButtonClick={setIsResetButtonClick}
             />
           ) : (
             <AddCalendar

src/styles/theme.ts

@@ -89,6 +89,11 @@ const typography = {
     font-weight: 500;
     line-height: 130%;
   `,
+  medium06: css`
+    font-size: 10px;
+    font-weight: 500;
+    line-height: 130%;
+  `,
 
   regular01: css`
     font-size: 16px;