Merge pull request #240 from ASAP-as-soon-as-possible/feat/AvailableS…

…cheduleApi/#239

[Feat/#239] 가능 시간 입력 GET, POST react-query로 구현

.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,15 +1,16 @@
+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 SelectSchedulePriority from 'pages/legacy/selectSchedule/SelectPriorityPage';
-import SelectPage from 'pages/legacy/selectSchedule/SelectSchedulePage';
 import LoginEntrance from 'pages/loginEntrance/LoginEntrance';
 import OnBoarding from 'pages/onBoarding/OnBoarding';
+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';
-import { BrowserRouter, Route, Routes } from 'react-router-dom';
 
 const Router = () => {
   return (
@@ -18,8 +19,6 @@ 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"

src/components/moleculesComponents/Header.tsx

@@ -2,7 +2,7 @@ import { Dispatch, SetStateAction, useState } from 'react';
 
 import Text from 'components/atomComponents/Text';
 import { BackIc, ExitIc, HambergerIc, LinkIc, MainLogoIc } from 'components/Icon/icon';
-import { useScheduleStepContext } from 'pages/selectSchedule/context';
+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';

src/components/timetableComponents/Timetable.tsx

@@ -1,8 +1,7 @@
-import { ReactNode, useState } from 'react';
+import { ReactNode } from 'react';
 
 import styled from 'styled-components';
 
-import { SelectedSlotType, TimetableContext } from './context';
 import DateTitle from './parts/ColumnTitle';
 import SlotTitle from './parts/SlotTitle';
 import { ColumnStructure, DateType } from './types';
@@ -15,35 +14,29 @@ interface TimetableProps {
 }
 
 function Timetable({ timeSlots, availableDates, children, bottomItem }: TimetableProps) {
-  const [startSlot, setStartSlot] = useState<string | undefined>(undefined);
-  const [selectedSlots, setSelectedSlots] = useState<SelectedSlotType>({});
-
   const emptyDates = Array.from({ length: 7 - availableDates.length }, (_, i) => `empty${i + 1}`);
 
   return (
-    <TimetableContext.Provider
-      value={{
-        startSlot,
-        setStartSlot,
-        selectedSlots,
-        setSelectedSlots,
-      }}
-    >
+    <>
       <TimetableWrapper>
         <SlotTitle timeSlots={timeSlots} />
-        <TableWrapper>
+        <TableWithDateWrapper>
           <DateTitle availableDates={availableDates} />
-          <Table>
+          <TableWrapper>
             {availableDates.map((date) => {
               const dateKey = Object.values(date).join('/');
-              return <Column key={dateKey}>{children({ date: dateKey, timeSlots })}</Column>;
+              return (
+                <ColumnWrapper key={dateKey}>
+                  {children({ date: dateKey, timeSlots })}
+                </ColumnWrapper>
+              );
             })}
-            {emptyDates && emptyDates.map((value) => <EmptyColumn key={value} />)}
-          </Table>
-        </TableWrapper>
+            {emptyDates && emptyDates.map((value) => <EmptyColumnWrapper key={value} />)}
+          </TableWrapper>
+        </TableWithDateWrapper>
       </TimetableWrapper>
       {bottomItem}
-    </TimetableContext.Provider>
+    </>
   );
 }
 
@@ -54,26 +47,26 @@ const TimetableWrapper = styled.div`
   gap: 0.75rem;
 `;
 
-const TableWrapper = styled.div`
+const TableWithDateWrapper = styled.div`
   display: flex;
   flex-direction: column;
   gap: 0.8rem;
 `;
 
-const Table = styled.div`
+const TableWrapper = styled.div`
   display: flex;
   border-bottom: 1px solid ${({ theme }) => theme.colors.grey7};
   border-left: 1px solid ${({ theme }) => theme.colors.grey7};
 `;
 
-const Column = styled.div`
+const ColumnWrapper = styled.div`
   display: flex;
   flex-direction: column;
 
   border-right: 1px solid ${({ theme }) => theme.colors.grey7};
 `;
 
-const EmptyColumn = styled.div`
+const EmptyColumnWrapper = styled.div`
   display: flex;
   flex-direction: column;
   border-top: 1px solid ${({ theme }) => theme.colors.grey7};

src/components/timetableComponents/types.ts

@@ -15,3 +15,8 @@ export interface DateType {
   day: string | undefined;
   dayOfWeek: string | undefined;
 }
+
+export interface SlotType {
+  startTime: string;
+  endTime: string;
+}

src/components/timetableComponents/utils.ts

@@ -1,4 +1,4 @@
-import { SlotType } from 'pages/selectSchedule/SelectSchedule';
+import { SlotType } from './types';
 /**
  *
  * @desc 문자열로 된 time('HH:MM')에 minutes을 더하는 함수
@@ -16,15 +16,12 @@ export const addMinutes = (time: string, minutes: number) => {
  * @desc 시작 시간(startTime)과 종료 시간(endTime) 사이에서 30분 간격으로 시간 슬롯을 생성하여 반환하는 함수
  */
 
-export const getAvailableTimes = (times: SlotType) => {
-  function getTimeSlots(startTime: string, endTime: string): string[] {
-    const slots = [];
-    let curTime = startTime;
-    while (curTime < endTime) {
-      slots.push(curTime);
-      curTime = addMinutes(curTime, 30);
-    }
-    return slots;
+export const getAvailableTimes = ({ startTime, endTime }: SlotType) => {
+  const slots = [];
+  let curTime = startTime;
+  while (curTime < endTime) {
+    slots.push(curTime);
+    curTime = addMinutes(curTime, 30);
   }
-  return getTimeSlots(times.startTime, times.endTime);
+  return slots;
 };

src/pages/LoginEntrance/components/MemberComponent.tsx

@@ -1,16 +1,16 @@
 import React, { Dispatch, SetStateAction } from 'react';
 
-import { userNameAtom } from 'atoms/atom';
 import Button from 'components/atomComponents/Button';
+import Header from 'components/moleculesComponents/Header';
 import Text from 'components/atomComponents/Text';
 import TextInput from 'components/atomComponents/TextInput';
-import Header from 'components/moleculesComponents/Header';
 import TitleComponent from 'components/moleculesComponents/TitleComponents';
-import { useParams } from 'react-router';
-import { useNavigate } from 'react-router-dom';
-import { useRecoilState } from 'recoil';
 import styled from 'styled-components/macro';
 import { theme } from 'styles/theme';
+import { useNavigate } from 'react-router-dom';
+import { useParams } from 'react-router';
+import { useRecoilState } from 'recoil';
+import { userNameAtom } from 'atoms/atom';
 
 interface HostInfoProps {
   name: string;
@@ -38,7 +38,7 @@ function MemberComponent({ hostInfo, setHostInfo }: HostProps) {
 
   const loginMember = () => {
     setUserName(hostInfo.name);
-    navigate(`/member/schedule/${meetingId}`);
+    navigate(`/member/select/${meetingId}`);
   };
 
   return (