chore: 브랜치 머지

package.json

@@ -30,7 +30,7 @@
     "react-router-dom": "^6.8.1",
     "react-scripts": "5.0.1",
     "react-scrollable-picker": "^1.0.2",
-    "react-selecto": "^1.22.2",
+    "react-selecto": "^1.26.0",
     "react-slick": "^0.29.0",
     "react-spring-bottom-sheet": "^3.4.1",
     "recoil": "^0.7.6",

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';
@@ -25,6 +24,8 @@ import { getAllTimeRange } from '../../utils/getAllTimeRange';
 import { getTimeRange } from '../../utils/getTimeRange';
 import { useGetAvailableTimesByOne } from '../../queries/availableTimes/useGetAvailableTimesByOne';
 import { usePutAvailableTimes } from '../../queries/availableTimes/usePutAvailableTimes';
+import AddButton from '../addButton/AddButton';
+import { ROUTES } from '../../constants/ROUTES';
 
 const AddTimeTable = ({
   wrapperRef,
@@ -34,6 +35,9 @@ const AddTimeTable = ({
   setSelected,
   selectedMethod,
   dates,
+  setTableSelected,
+  isResetButtonClick,
+  setIsResetButtonClick,
 }: AddTimeTableTypes) => {
   const navigate = useNavigate();
   const { roomUUID } = useParams() as { roomUUID: string };
@@ -61,7 +65,7 @@ const AddTimeTable = ({
   } = useScroll();
 
   const { data } = useGetAvailableTimesByOne(roomUUID, userName);
-  const { mutate, isSuccess } = usePutAvailableTimes();
+  const { mutate, isSuccess, isError } = usePutAvailableTimes();
 
   useEffect(() => {
     if (data) {
@@ -112,7 +116,7 @@ const AddTimeTable = ({
     document.body.style.overflow = '';
     (wrapperRef.current as HTMLDivElement).style.overflow = 'auto';
 
-    navigate(`/current/${roomUUID}`);
+    navigate(`/${ROUTES.CURRENT}/${roomUUID}`);
   };
 
   const allTimeRange = getAllTimeRange(dates, timeRange);
@@ -148,7 +152,11 @@ const AddTimeTable = ({
     if (isSuccess) {
       goToCurrent();
     }
-  }, [isSuccess]);
+
+    if (isError) {
+      alert('처리 중 오류가 발생했습니다. 다시 시도해 주세요!');
+    }
+  }, [isSuccess, isError]);
 
   return (
     <>
@@ -177,6 +185,8 @@ const AddTimeTable = ({
           tablePage={tablePage}
           selectedMethod={selectedMethod}
           validDateChunks={validDateChunks}
+          isResetButtonClick={isResetButtonClick}
+          setIsResetButtonClick={setIsResetButtonClick}
         />
       </TableWrapper>
       <ScrollbarTrack ref={trackRef}>
@@ -189,11 +199,10 @@ const AddTimeTable = ({
         />
       </ScrollbarTrack>
 
-      <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) => {
@@ -67,6 +70,19 @@ const Table = ({
     setSelected(newObj);
   };
 
+  const handleClickOneElement = (e: React.MouseEvent<HTMLDivElement>) => {
+    const target = e.target as HTMLDivElement;
+
+    if (target.classList.contains('valid')) {
+      if (target.classList.contains('selected')) {
+        target.classList.remove('selected');
+      } else {
+        target.classList.add('selected');
+        addSelectedToObject();
+      }
+    }
+  };
+
   return (
     <Wrapper ref={contentRef}>
       <Top>
@@ -103,17 +119,14 @@ const Table = ({
                 onSelect={handleCellSelect}
                 onDragEnd={addSelectedToObject}
                 hitRate={0}
-                selectByClick={true}
                 selectFromInside={true}
                 continueSelect={true}
                 continueSelectWithoutDeselect={false}
-                toggleContinueSelect={'shift'}
-                toggleContinueSelectWithoutDeselect={[['ctrl'], ['meta']]}
                 ratio={0}
-              ></Selecto>
-
+              />
               {timeDetail.map((time) => (
                 <Select
+                  onMouseUp={handleClickOneElement}
                   className={isValidDate ? 'valid' : 'invalid'}
                   key={`${date} ${time}:00`}
                   id={`${date} ${time}`}

src/hooks/useInputScroll.ts

@@ -0,0 +1,21 @@
+import React, { useEffect } from 'react';
+
+const useInputScroll = (ref: React.RefObject<HTMLInputElement>) => {
+  useEffect(() => {
+    window.addEventListener('touchmove', handleScroll);
+    return () => {
+      window.removeEventListener('touchmove', handleScroll);
+    };
+  }, []);
+
+  const handleScroll = (e: TouchEvent) => {
+    if (
+      document.activeElement == ref.current ||
+      ref.current?.contains(e.target as Node)
+    ) {
+      (document.activeElement as HTMLElement).blur();
+    }
+  };
+};
+
+export default useInputScroll;

src/pages/addTime/AddTime.tsx

@@ -25,6 +25,7 @@ const AddTime = () => {
   const wrapperRef = useRef<HTMLDivElement>(null);
 
   const [selectedMethod] = useRecoilState(selectedMethodState);
+  const [isResetButtonClick, setIsResetButtonClick] = useState<boolean>(false);
 
   const [tableSelected, setTableSelected] = useState<TableSelectedTypes>({});
   const [calendarSelected, setCalendarSelected] = useState<string[]>([]);
@@ -69,7 +70,10 @@ const AddTime = () => {
               endTime={parseInt(endTime)}
               selected={tableSelected}
               setSelected={setTableSelected}
+              setTableSelected={setTableSelected}
               dates={dates}
+              isResetButtonClick={isResetButtonClick}
+              setIsResetButtonClick={setIsResetButtonClick}
             />
           ) : (
             <AddCalendar