Merge pull request #149 from Step3-kakao-tech-campus/newBranch

rollback 삭제내용 복구
Step3-kakao-tech-campus · Nov 7, 2023 · d5758a3 · d5758a3
2 parents a7233d3 + 17971c5
commit d5758a3
Show file tree

Hide file tree

Showing 20 changed files with 432 additions and 157 deletions.
diff --git a/.gitignore b/.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
diff --git a/playwright.config.ts b/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',

diff --git a/src/App.tsx b/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();

diff --git a/src/components/Calendar/CalenderOutter.tsx b/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;
+}
diff --git a/src/components/Suspenses/DefferedSuspense.tsx b/src/components/Suspenses/DefferedSuspense.tsx
@@ -1,12 +1,13 @@
-import React, { PropsWithChildren, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
-const DefferedSuspense = ({ children }: PropsWithChildren<{}>) => {
+const DefferedSuspense = ({ children, deffered = true }: { children: React.ReactNode; deffered?: boolean }) => {
   const [isDeferred, setIsDeferred] = useState(false);
+  const time = deffered ? 200 : 0;
 
   useEffect(() => {
     const timeout = setTimeout(() => {
       setIsDeferred(true);
-    }, 200);
+    }, time);
     return () => clearTimeout(timeout);
   }, []);
 

diff --git a/src/components/Suspenses/Loader.tsx b/src/components/Suspenses/Loader.tsx
@@ -1,16 +1,9 @@
-import React from 'react';
 import { styled } from 'styled-components';
 import DefferedSuspense from './DefferedSuspense';
 
-const StyledLoader = styled.div<{ $size?: string }>`
-  margin: auto;
-  width: ${(props) => (props.$size ? props.$size : '40px')};
-  height: ${(props) => (props.$size ? props.$size : '40px')};
-`;
-
-const Loader = ({ size }: { size?: string }) => {
+const Loader = ({ size, isDeffered = true }: { size?: string; isDeffered?: boolean }) => {
   return (
-    <DefferedSuspense>
+    <DefferedSuspense deffered={isDeffered}>
       <StyledLoader $size={size}>
         <svg
           version="1.1"
@@ -54,3 +47,9 @@ const Loader = ({ size }: { size?: string }) => {
 };
 
 export default Loader;
+
+const StyledLoader = styled.div<{ $size?: string }>`
+  margin: auto;
+  width: ${(props) => (props.$size ? props.$size : '40px')};
+  height: ${(props) => (props.$size ? props.$size : '40px')};
+`;
diff --git a/src/components/Suspenses/Skeleton.tsx b/src/components/Suspenses/Skeleton.tsx
@@ -1,7 +1,23 @@
-import React from 'react';
 import styled, { keyframes } from 'styled-components';
 import DefferedSuspense from './DefferedSuspense';
 
+interface Props {
+  width?: string;
+  height?: string;
+  aspectRatio?: string;
+  isDeffered?: boolean;
+}
+
+const Skeleton = ({ width, height, aspectRatio, isDeffered = true }: Props) => {
+  return (
+    <DefferedSuspense deffered={isDeffered}>
+      <SkeletonBox $width={width} $height={height} $aspectRatio={aspectRatio} />
+    </DefferedSuspense>
+  );
+};
+
+export default Skeleton;
+
 const skeletonAnimation = keyframes`
   0% {
     background-position: 200% 0;
@@ -25,23 +41,3 @@ const SkeletonBox = styled.div<{
   border-radius: 4px;
   object-fit: cover;
 `;
-
-const Skeleton = ({ width, height, aspectRatio, isDeffered }: Props) => {
-  if (isDeffered) {
-    return (
-      <DefferedSuspense>
-        <SkeletonBox $width={width} $height={height} $aspectRatio={aspectRatio} />
-      </DefferedSuspense>
-    );
-  }
-  return <SkeletonBox $width={width} $height={height} $aspectRatio={aspectRatio} />;
-};
-
-export default Skeleton;
-
-interface Props {
-  width?: string;
-  height?: string;
-  aspectRatio?: string;
-  isDeffered?: boolean;
-}