weekly > master

.gitignore

@@ -24,7 +24,8 @@ yarn-debug.log*
 yarn-error.log*
 
 /k8s/secret.yaml
+/test-results/
+/playwright-report/
+/playwright/
 /tests/tests-examples/
-/tests/tests-results/
-/tests/playwright-report/
-/playwright/.cache/
+/tests/logintest.ts

playwright.config.ts

@@ -1,15 +1,15 @@
 import { defineConfig, devices } from '@playwright/test';
+import path from 'path';
+require('dotenv').config();
 
-/**
- * Read environment variables from file.
- * https://github.com/motdotla/dotenv
- */
-// require('dotenv').config();
-
+export const ADMINSTATE = path.join(__dirname, './playwright/.auth/admin.json');
+export const ALBASTATE = path.join(__dirname, './playwright/.auth/alba.json');
 /**
  * See https://playwright.dev/docs/test-configuration.
  */
 export default defineConfig({
+  // globalSetup: require.resolve('./tests/globalSetup.ts'),
+
   testDir: './tests',
   /* Run tests in files in parallel */
   fullyParallel: true,
@@ -24,39 +24,74 @@ export default defineConfig({
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Base URL to use in actions like `await page.goto('/')`. */
-    // baseURL: 'http://127.0.0.1:3000',
+    baseURL: `${process.env.REACT_APP_BASE_URL}`,
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on-first-retry',
   },
-
+  timeout: 10000,
   /* Configure projects for major browsers */
   projects: [
+    // {
+    //   name: 'setup',
+    //   testMatch: /globalAdmin.setup\.ts/,
+    //   use: { storageState: ADMINSTATE },
+    // },
+    // {
+    //   name: 'setupAlba',
+    //   testMatch: /globalAlba.setup\.ts/,
+    //   use: { storageState: ALBASTATE },
+    // },
     {
-      name: 'chromium',
-      use: { ...devices['Desktop Chrome'] },
+      name: 'admin',
+      // dependencies: ['setup'],
+      use: {
+        ...devices['Desktop Chrome'],
+        storageState: ADMINSTATE,
+      },
+      testMatch: '**/tests/admin/**',
+      testIgnore: '**/tests/alba/**',
     },
-
     {
-      name: 'firefox',
-      use: { ...devices['Desktop Firefox'] },
+      name: 'alba',
+      // dependencies: ['setupAlba'],
+      use: {
+        ...devices['Desktop Chrome'],
+        storageState: ALBASTATE,
+      },
+      testMatch: '**/tests/alba/**',
+      testIgnore: '**/tests/admin/**',
     },
-
     {
-      name: 'webkit',
-      use: { ...devices['Desktop Safari'] },
+      name: 'logout',
+      use: { ...devices['Desktop Chrome'] },
+      testMatch: /login.spec\.ts/,
     },
+    // {
+    //   name: 'chromium',
+    //   use: { ...devices['Desktop Chrome'] },
+    // },
 
-    /* Test against mobile viewports. */
     // {
-    //   name: 'Mobile Chrome',
-    //   use: { ...devices['Pixel 5'] },
+    //   name: 'firefox',
+    //   use: { ...devices['Desktop Firefox'] },
     // },
+
     // {
-    //   name: 'Mobile Safari',
-    //   use: { ...devices['iPhone 12'] },
+    //   name: 'webkit',
+    //   use: { ...devices['Desktop Safari'] },
     // },
 
+    /* Test against mobile viewports. */
+    {
+      name: 'Mobile Chrome',
+      use: { ...devices['Pixel 5'] },
+    },
+    {
+      name: 'Mobile Safari',
+      use: { ...devices['iPhone 12'] },
+    },
+
     /* Test against branded browsers. */
     // {
     //   name: 'Microsoft Edge',

src/App.tsx

@@ -1,8 +1,7 @@
-import { QueryCache, QueryClient, QueryClientProvider, useQueryErrorResetBoundary } from '@tanstack/react-query';
+import { QueryClientProvider, useQueryErrorResetBoundary } from '@tanstack/react-query';
 import { convertPath } from 'apis/convertURI';
 import ViewPortContainer from 'components/@commons/ViewPortContainer';
 import ErrorFallback from 'error/ErrorFallback';
-import { defaultErrorHandler } from 'error/defaultErrorHandler';
 import { Provider } from 'jotai';
 import HomeIndex from 'pages/HomeIndex';
 import KakaoAuthPage from 'pages/KakaoAuthPage';
@@ -19,27 +18,7 @@ import { ErrorBoundary } from 'react-error-boundary';
 import { Route, Routes } from 'react-router-dom';
 import { ThemeProvider } from 'styled-components';
 import { myTheme } from 'styles/myTheme';
-
-const queryClient = new QueryClient({
-  queryCache: new QueryCache({
-    onError(error, query) {
-      defaultErrorHandler(error || { name: 'unknownError' });
-      setTimeout(() => {
-        queryClient.removeQueries(query.queryKey);
-      }, 1000);
-    },
-  }),
-  defaultOptions: {
-    queries: {
-      useErrorBoundary: true,
-      retry: 0,
-      refetchOnWindowFocus: false,
-    },
-    mutations: {
-      onError: (err) => defaultErrorHandler(err || { name: 'unknownError' }),
-    },
-  },
-});
+import { queryClient } from 'utils/queryClient';
 
 function App(): JSX.Element {
   const { reset } = useQueryErrorResetBoundary();

src/apis/convertURI.ts

@@ -4,3 +4,5 @@ export const apiURL: string = process.env.REACT_APP_API_URL;
 export const convertPath = (path: string): string => {
   return staticServerUrl_ + path;
 };
+
+export const baseURL = new URL(window.location.href).origin;

src/apis/schedule/getMonthly.ts

@@ -6,17 +6,18 @@ import { dateToString } from 'utils/dateToString';
 
 export const getMonthly = async (info: Info): Promise<Return> => {
   const { year, month } = { ...info };
+  const strMonth = String(month + 1).padStart(2, '0');
 
   let params = {};
 
   if (info.isAdmin) {
     params = {
-      month: `${year}-${month + 1}`,
+      month: `${year}-${strMonth}`,
       userId: info.userId,
     };
   } else {
     params = {
-      month: `${year}-${month + 1}`,
+      month: `${year}-${strMonth}`,
     };
   }
 

src/components/Calendar/CalendarStyle.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import FlexContainer from '../@commons/FlexContainer';
 import styled from 'styled-components';
+import FlexContainer from '../@commons/FlexContainer';
 
 export const DateCircle = styled.div<{ $isToday: boolean }>`
   background-color: ${(props) => (props.$isToday ? props.theme.color.yellow : null)};
@@ -20,7 +20,7 @@ export const BadgeText = styled.span`
   }
 `;
 
-export const Badge = styled.div<{ $color?: string }>`
+export const Badge = styled.ol<{ $color?: string }>`
   background-color: ${(props) => props.$color};
 
   display: flex;

src/components/Calendar/CalenderOutter.tsx

@@ -1,59 +1,63 @@
 import FlexContainer from 'components/@commons/FlexContainer';
 import Text from 'components/@commons/Text';
 import { NextButton, PrevButton } from 'components/@commons/icons/buttons';
-import { PrimitiveAtom, useAtom } from 'jotai';
-import React from 'react';
-import { WeekGrid } from './CalendarStyle';
 import weekdayArray from 'utils/weekdayArray';
+import { WeekGrid } from './CalendarStyle';
 
-interface Props {
-  monthDataAtom: PrimitiveAtom<{
-    year: number;
-    month: number;
-  }>;
-}
+const CalenderOutter = ({ selectedMonth, setMonth }: Props): JSX.Element => {
+  return (
+    <FlexContainer $wFull $gap="24px">
+      <MonthSelectBar selectedMonth={selectedMonth} setMonth={setMonth} />
+      <DayTitle />
+    </FlexContainer>
+  );
+};
 
-const CalenderOutter = ({ monthDataAtom }: Props): JSX.Element => {
-  const [nowMonth, setNowMonth] = useAtom(monthDataAtom);
-  const { year, month } = nowMonth;
+export default CalenderOutter;
 
+const MonthSelectBar = ({ selectedMonth, setMonth }: Props) => {
+  const { year, month } = selectedMonth;
   const monthMoveHandler = (dm: number) => {
-    const newDateObj = new Date(nowMonth.year, nowMonth.month + dm, 1);
-    const newObj = { year: newDateObj.getFullYear(), month: newDateObj.getMonth() };
-    setNowMonth(newObj);
+    const newDateObj = new Date(year, month + dm, 1);
+    setMonth({ year: newDateObj.getFullYear(), month: newDateObj.getMonth() });
   };
 
   return (
-    <FlexContainer $wFull $gap="24px">
-      <FlexContainer $direction="row" $justify="space-between" $wFull>
-        <PrevButton onClick={() => monthMoveHandler(-1)} />
+    <FlexContainer $direction="row" $justify="space-between" $wFull>
+      <PrevButton onClick={() => monthMoveHandler(-1)} />
 
-        <FlexContainer $direction="row" $gap="12px">
-          <Text size="lg" weight="bold">{`${year} 년`}</Text>
-          <Text size="lg" weight="bold">{`${month + 1} 월`}</Text>
-        </FlexContainer>
-
-        <NextButton onClick={() => monthMoveHandler(+1)} />
-      </FlexContainer>
-      <FlexContainer $direction="row" $wFull>
-        <DayTitle />
+      <FlexContainer $direction="row" $gap="12px">
+        <Text size="lg" weight="bold">{`${year} 년`}</Text>
+        <Text size="lg" weight="bold">{`${month + 1} 월`}</Text>
       </FlexContainer>
+
+      <NextButton onClick={() => monthMoveHandler(+1)} />
     </FlexContainer>
   );
 };
 
-export default CalenderOutter;
-
 const DayTitle = () => {
   return (
-    <WeekGrid>
-      {weekdayArray.map((e) => (
-        <FlexContainer $wFull key={e.eng}>
-          <Text size="xxs" weight="semiBold">
-            {e.eng}
-          </Text>
-        </FlexContainer>
-      ))}
-    </WeekGrid>
+    <FlexContainer $direction="row" $wFull>
+      <WeekGrid>
+        {weekdayArray.map((e) => (
+          <FlexContainer $wFull key={e.eng}>
+            <Text size="xxs" weight="semiBold">
+              {e.eng}
+            </Text>
+          </FlexContainer>
+        ))}
+      </WeekGrid>
+    </FlexContainer>
   );
 };
+
+export interface MonthData {
+  year: number;
+  month: number;
+}
+
+interface Props {
+  selectedMonth: MonthData;
+  setMonth: (monthdata: MonthData) => void;
+}

src/components/DailyWorkersTable/index.tsx

@@ -1,14 +1,13 @@
-import React from 'react';
+import { TimeWorkerListData, UserData } from 'apis/types';
 import FlexContainer from 'components/@commons/FlexContainer';
+import GrayBox from 'components/@commons/GrayBox';
 import Text from 'components/@commons/Text';
-import { NameBox, TitleBox } from './styles';
-import { TimeWorkerListData, UserData } from 'apis/types';
 import { strTimeProcessor } from 'utils/strTimeProcessor';
-import GrayBox from 'components/@commons/GrayBox';
+import { NameBox, TitleBox } from './styles';
 
 export const DailyWorkersTable = ({ dailyData }: { dailyData: TimeWorkerListData[] | undefined }): JSX.Element => {
   return (
-    <FlexContainer $direction="row" $wFull $gap="3%">
+    <FlexContainer $direction="row" $wFull $gap="3%" data-testId="일간근무표">
       {dailyData?.map((timeData: TimeWorkerListData, timeindex) => (
         <FlexContainer key={`${timeData.title}${timeindex}`} $wFull $gap="10px">
           <TitleBox $timeIndex={timeindex}>
@@ -34,7 +33,7 @@ export const DailyWorkersTable = ({ dailyData }: { dailyData: TimeWorkerListData
 
 export const NotFixedDateBox = (): JSX.Element => {
   return (
-    <GrayBox>
+    <GrayBox data-testId="미확정일간근무표">
       <Text size="lg" weight="medium">
         아직 확정된 스케줄이 없습니다
       </Text>

src/components/HeaderNB/HeaderNB.tsx

@@ -1,15 +1,15 @@
-import React, { useState } from 'react';
+import Text from 'components/@commons/Text';
+import { Hamburger } from 'components/@commons/icons';
 import {
+  HeaderButton,
   HeaderContainer,
   HeaderInnerBox,
-  HeaderButton,
   HeaderLeftMenuGroup,
   HeaderTitleCont,
 } from 'components/HeaderNB/HeaderNBStyels';
 import Sidebar from 'components/Sidebar';
-import Text from 'components/@commons/Text';
+import { useState } from 'react';
 import { useLocation } from 'react-router-dom';
-import { Hamburger } from 'components/@commons/icons';
 import { getLoginData } from 'utils/loginDatahandlers';
 
 const isAdmin = getLoginData().isAdmin;
@@ -29,7 +29,9 @@ const HeaderNB = (): JSX.Element => {
             </HeaderButton>
           </HeaderLeftMenuGroup>
           <HeaderTitleCont>
-            <Text size="lg">{isAdmin ? adminTitle[nowPath] : albaTitle[nowPath]}</Text>
+            <Text size="lg" key={isAdmin + nowPath} data-testId="페이지제목">
+              {isAdmin ? adminTitle[nowPath] : albaTitle[nowPath]}
+            </Text>
           </HeaderTitleCont>
         </HeaderInnerBox>
       </HeaderContainer>

src/components/PageStyledComponents/admin/MainPage/index.tsx

@@ -12,3 +12,11 @@ export const DropDownCont = styled.div`
   background-color: ${({ theme }) => theme.color.lightGray};
   z-index: 20;
 `;
+
+export const DropdownBtn = styled.button`
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 2px 0;
+`;