[리뷰용 PR] 탭투탭 구현 및 시간표 관련 코드 전체 리팩토링

.eslintrc.json

@@ -28,7 +28,8 @@
 
     "no-duplicate-imports": "error", //중복 Import 안돼
     "no-console": ["warn", { "allow": ["warn", "error", "info"] }], //콘솔은 확인 뒤 지우기
-    "no-unused-vars": "error", //사용하지 않은 변수면 없애기
+    "no-unused-vars": "off", //사용하지 않은 변수면 없애기
+    "@typescript-eslint/no-unused-vars": ["error"], //사용하지 않은 변수면 없애기
     "no-multiple-empty-lines": "error", //공백 금지
     "no-undef": "error", //정의 안 한 변수 사용 x
     "indent": "off", // 프리티어 충돌로 인한 OFF

package.json

@@ -11,6 +11,8 @@
     "lint:css": "stylelint './src/**/*.{ts,tsx}'"
   },
   "dependencies": {
+    "@tanstack/react-query": "^5.45.1",
+    "@tanstack/react-query-devtools": "^5.45.1",
     "@types/axios": "^0.14.0",
     "@types/react-copy-to-clipboard": "^5.0.4",
     "axios": "^1.4.0",

src/App.css

@@ -1,58 +1,57 @@
 #app {
-    height: 100%;
+  height: 100%;
 }
 
 html,
 body {
-    position: relative;
-    height: 100%;
+  position: relative;
+  height: 100%;
 }
 
 body {
-    margin: 0;
-    background: #eee;
-    padding: 0;
-    color: #000;
-    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
-    font-size: 14px;
+  margin: 0;
+  padding: 0;
+  color: #000;
+  font-size: 14px;
+  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
+  background: #eee;
 }
 
 .swiper {
-    z-index: 0;
-    width: 100%;
-    height: 100%;
+  z-index: 0;
+  width: 100%;
+  height: 100%;
 }
 
 .swiper-slide {
-
-    /* Center slide text vertically */
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: #141414;
-    text-align: center;
-    font-size: 18px;
+  /* Center slide text vertically */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  text-align: center;
+  background: #141414;
 }
 
 .swiper-slide img {
-    display: block;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
 }
 
 .swiper-button-prev {
-    display: none;
+  display: none;
 }
 
 .swiper-button-next {
-    display: none;
+  display: none;
 }
 
 .swiper-pagination-bullet {
-    background-color: #A4A4A4;
+  background-color: #a4a4a4 !important;
 }
 
 .swiper-pagination-bullet-active {
-    background-color: #3253FF;
-}
+  background-color: #3253ff !important;
+}

src/App.tsx

@@ -1,17 +1,18 @@
-import { useEffect } from 'react';
+/**카카오톡 인앱브라우저 종료후 크롬 및 사파리로 오픈하는 utils file */
+import './utils/changeBrowser';
+import 'react-toastify/dist/ReactToastify.css';
+import './App.css';
 
-import { ThemeProvider } from 'styled-components';
-import styled from 'styled-components/macro';
-import ToastContainerBox from 'utils/toast/ToastContainer';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
-import Router from './Router';
 import GlobalStyle from './styles/globalStyles';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import Router from './Router';
+import { ThemeProvider } from 'styled-components';
+import ToastContainerBox from 'utils/toast/ToastContainer';
+import styled from 'styled-components/macro';
 import { theme } from './styles/theme';
-
-import './App.css';
-/**카카오톡 인앱브라우저 종료후 크롬 및 사파리로 오픈하는 utils file */
-import './utils/changeBrowser';
-import 'react-toastify/dist/ReactToastify.css';
+import { useEffect } from 'react';
 
 const MobileWrapper = styled.div`
   display: flex;
@@ -47,14 +48,19 @@ function App() {
       window.removeEventListener('resize', setScreenSize);
     };
   }, []);
+
+  const queryClient = new QueryClient();
   return (
     <>
       <ThemeProvider theme={theme}>
-        <GlobalStyle />
-        <MobileWrapper>
-          <Router />
-          <ToastContainerBox />
-        </MobileWrapper>
+        <QueryClientProvider client={queryClient}>
+          <GlobalStyle />
+          <MobileWrapper>
+            <Router />
+            <ToastContainerBox />
+          </MobileWrapper>
+          <ReactQueryDevtools initialIsOpen={false} />
+        </QueryClientProvider>
       </ThemeProvider>
     </>
   );

src/Router.tsx

@@ -1,14 +1,16 @@
-import ChooseBestTime from 'pages/BestMeetTime/ChooseBestTime';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+
+import ChooseBestTime from 'pages/bestMeetTime/ChooseBestTime';
 import CreateMeeting from 'pages/createMeeting/CreateMeeting';
 import CueCard from 'pages/cueCard/CueCard';
-import ErrorPage404 from 'pages/ErrorLoading/ErrorPage404';
-import LoadingPage from 'pages/ErrorLoading/LoadingPage';
-import LoginEntrance from 'pages/LoginEntrance/LoginEntrance';
+import ErrorPage404 from 'pages/errorLoading/ErrorPage404';
+import LoadingPage from 'pages/errorLoading/LoadingPage';
+import LoginEntrance from 'pages/loginEntrance/LoginEntrance';
 import OnBoarding from 'pages/onBoarding/OnBoarding';
-import SelectSchedulePriority from 'pages/selectSchedule/SelectPriorityPage';
-import SelectPage from 'pages/selectSchedule/SelectSchedulePage';
-import SteppingLayout from 'pages/SteppingStone/SteppingLayout';
-import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import SelectPage from 'pages/legacy/selectSchedule/SelectSchedulePage';
+import SelectSchedule from 'pages/selectSchedule/SelectSchedule';
+import SelectSchedulePriority from 'pages/legacy/selectSchedule/SelectPriorityPage';
+import SteppingLayout from 'pages/steppingStone/SteppingLayout';
 
 const Router = () => {
   return (
@@ -17,8 +19,7 @@ const Router = () => {
         <Route path="/" element={<OnBoarding />} />
         <Route path="/meet/create" element={<CreateMeeting />} />
         <Route path="/meet/complete" element={<SteppingLayout steppingType={'meetComplete'} />} />
-        <Route path="/:auth/schedule/:meetingId" element={<SelectPage />} />
-        <Route path="/:auth/priority/:meetingId" element={<SelectSchedulePriority />} />
+        <Route path="/:auth/select/:meetingId" element={<SelectSchedule />} />
         <Route
           path="/host/schedule-complete/:meetingId"
           element={<SteppingLayout steppingType={'hostScheduleComplete'} />}
@@ -35,7 +36,6 @@ const Router = () => {
         <Route path="/loadingpage" element={<LoadingPage />} />
         <Route path="*" element={<ErrorPage404 />} />
         <Route path="/error" element={<ErrorPage404 />} />
-        <Route path="/select" element={<SelectPage />} />
       </Routes>
     </BrowserRouter>
   );

src/atoms/atom.ts

@@ -1,5 +1,6 @@
-import { PreferTime } from 'components/scheduleComponents/types/AvailableScheduleType';
-import { DateStates, ScheduleStates, TimeStates } from 'pages/selectSchedule/types/Schedule';
+import { DateStates, ScheduleStates, TimeStates } from 'pages/legacy/selectSchedule/types/Schedule';
+
+import { PreferTime } from 'components/legacy/scheduleComponents/types/AvailableScheduleType';
 import { atom } from 'recoil';
 
 export const methodStateAtom = atom<boolean>({

src/components/atomComponents/Button.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
-
 import { css, styled } from 'styled-components';
 
+import React from 'react';
+
 interface ButtonProps {
   children: React.ReactNode;
   typeState: string;
@@ -73,6 +73,7 @@ const buttonCSS = {
     ${buttonDefaultCSS.basicCss};
     background: ${({ theme }) => theme.colors.grey7};
     color: ${({ theme }) => theme.colors.grey5};
+    pointer-events: none;
   `,
   halfsecondaryDisabled: css`
     ${buttonDefaultCSS.basicCss};

src/components/scheduleComponents/components/PriorityDropdown.tsx → src/components/legacy/scheduleComponents/components/PriorityDropdown.tsx

@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react';
 import { scheduleAtom } from 'atoms/atom';
 import Text from 'components/atomComponents/Text';
 import { Circle1Ic, Circle2Ic, Circle3Ic, DropDownIc, DropUpIc } from 'components/Icon/icon';
-import { ScheduleStates } from 'pages/selectSchedule/types/Schedule';
+import { ScheduleStates } from 'pages/legacy/selectSchedule/types/Schedule';
 import { useRecoilState } from 'recoil';
 import styled from 'styled-components/macro';
 import { theme } from 'styles/theme';

src/components/scheduleComponents/components/TimeTable.tsx → src/components/legacy/scheduleComponents/components/TimeTable.tsx

@@ -1,11 +1,11 @@
-import Text from 'components/atomComponents/Text';
-import { DateStates } from 'pages/selectSchedule/types/Schedule';
-import { styled } from 'styled-components';
-import { theme } from 'styles/theme';
+import { PreferTime, SelectedSchedule } from '../types/AvailableScheduleType';
 
+import { DateStates } from 'pages/legacy/selectSchedule/types/Schedule';
 import Row from './Row';
-import { PreferTime, SelectedSchedule } from '../types/AvailableScheduleType';
+import Text from 'components/atomComponents/Text';
 import getTimeSlots from '../utils/getTimeSlots';
+import { styled } from 'styled-components';
+import { theme } from 'styles/theme';
 
 interface TimeTableProps {
   selectedSchedule: SelectedSchedule[];

src/components/moleculesComponents/Header.tsx

@@ -1,30 +1,28 @@
-import { BackIc, ExitIc, HambergerIc, LinkIc, MainLogoIc } from 'components/Icon/icon';
 import { Dispatch, SetStateAction, useState } from 'react';
 
-import CopyToClipboard from 'react-copy-to-clipboard';
-import Navigation from './Navigation';
 import Text from 'components/atomComponents/Text';
-import { notify } from 'utils/toast/copyLink';
+import { BackIc, ExitIc, HambergerIc, LinkIc, MainLogoIc } from 'components/Icon/icon';
+import { useScheduleStepContext } from 'pages/selectSchedule/contexts/useScheduleStepContext';
+import { ScheduleStepType } from 'pages/selectSchedule/types';
+import CopyToClipboard from 'react-copy-to-clipboard';
+import { useParams } from 'react-router';
+import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components/macro';
 import { theme } from 'styles/theme';
-import { useNavigate } from 'react-router-dom';
-import { useParams } from 'react-router';
+import { notify } from 'utils/toast/copyLink';
+
+import Navigation from './Navigation';
+
 
 interface HeaderProps {
   position: string;
-  setStep?: Dispatch<SetStateAction<number>>;
+  setFunnelStep?: Dispatch<SetStateAction<number>>;
+  setSelectScheduleStep?: Dispatch<SetStateAction<ScheduleStepType>>;
 }
 
-function Header({ position, setStep }: HeaderProps) {
+function Header({ position, setFunnelStep }: HeaderProps) {
+  const { scheduleStep, setScheduleStep } = useScheduleStepContext();
   const navigationOptions = [
-    // {
-    //   title: '공지사항',
-    //   url: '',
-    // },
-    // {
-    //   title: 'ASAP family',
-    //   url: '',
-    // },
     {
       title: '약속 생성하기',
       url: '/meet/create',
@@ -38,8 +36,8 @@ function Header({ position, setStep }: HeaderProps) {
   const navigate = useNavigate();
   const [isNaviOpen, setIsNaviOpen] = useState(false);
   const backToFunnel = () => {
-    if (setStep !== undefined) {
-      setStep((prev) => {
+    if (setFunnelStep !== undefined) {
+      setFunnelStep((prev) => {
         if (prev === 0) {
           navigate('/');
           return prev;
@@ -48,6 +46,16 @@ function Header({ position, setStep }: HeaderProps) {
       });
     }
   };
+  const backToSelectSchedule = () => {
+    if (setScheduleStep !== undefined) {
+      if (scheduleStep === 'selectTimeSlot') {
+        window.history.back();
+        return;
+      } else if (scheduleStep === 'selectPriority') {
+        setScheduleStep('selectTimeSlot');
+      }
+    }
+  };
 
   const { meetingId } = useParams();
   return (
@@ -78,7 +86,7 @@ function Header({ position, setStep }: HeaderProps) {
               </CopyToClipboard>
             </ConfirmIconSection>
           ) : position === 'schedule' ? (
-            <ConfirmIconSection onClick={() => window.history.back()}>
+            <ConfirmIconSection onClick={backToSelectSchedule}>
               <IconSection>
                 <BackIc />
               </IconSection>

src/components/moleculesComponents/TitleComponents.tsx

@@ -4,30 +4,35 @@ import { theme } from 'styles/theme';
 
 interface TextProps {
   main: string;
-  sub: string;
+  sub?: string;
+  padding?: string;
 }
 
-function TitleComponents({ main, sub }: TextProps) {
+const defaultPadding = `4.4rem 0 4.2rem 0`;
+function TitleComponents({ main, sub, padding = defaultPadding }: TextProps) {
   return (
-    <TitleWrapper>
+    <TitleWrapper $padding={padding}>
       <Text font={'head2'} color={`${theme.colors.white}`}>
         {main}
       </Text>
-      <Text font={'body3'} color={`${theme.colors.grey4}`}>
-        {sub}
-      </Text>
+      {sub && (
+        <Text font={'body3'} color={`${theme.colors.grey4}`}>
+          {sub}
+        </Text>
+      )}
     </TitleWrapper>
   );
 }
 
 export default TitleComponents;
 
-const TitleWrapper = styled.div`
+const TitleWrapper = styled.div<{ $padding: string }>`
   display: flex;
   position: relative;
   flex-direction: column;
   gap: 1.2rem;
 
-  padding: 4.4rem 0 4.2rem 0;
+  padding: ${({ $padding }) => $padding};
+
   width: 100%;
 `;