refactor: 리팩토링

Step3-kakao-tech-campus · Nov 6, 2023 · 9c31cbc · 9c31cbc
1 parent 8c287a9
commit 9c31cbc
Show file tree

Hide file tree

Showing 12 changed files with 173 additions and 135 deletions.
diff --git a/.gitignore b/.gitignore
@@ -26,6 +26,6 @@ yarn-error.log*
 /k8s/secret.yaml
 /test-results/
 /playwright-report/
-/playwright/.cache/
+/playwright/
 /tests/tests-examples/
-/tests/logintest.ts
+/tests/logintest.ts
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;
-}
diff --git a/src/components/modals/GetInviteKeyModal/index.tsx b/src/components/modals/GetInviteKeyModal/index.tsx
@@ -1,17 +1,22 @@
 import { useQuery } from '@tanstack/react-query';
 import { getInviteKey } from 'apis/admin/manageGroup';
-
 import FlexContainer from 'components/@commons/FlexContainer';
 import SubmitButton from 'components/@commons/SubmitButton';
 import Text from 'components/@commons/Text';
+import { CheckIcon } from 'components/@commons/icons';
+import Loader from 'components/Suspenses/Loader';
+import { LinkBox } from 'components/modals/GetInviteKeyModal/styles';
 import useModal from 'hooks/useModal';
-import React from 'react';
+import { useState } from 'react';
 import CopyToClipboard from 'react-copy-to-clipboard';
-import styled from 'styled-components';
+import { myTheme } from 'styles/myTheme';
 
 const GetInviteKeyModal = (): JSX.Element => {
-  const { data: inviteKeyData } = useQuery(['inviteKey'], getInviteKey);
+  const { data: inviteKeyData, isFetching } = useQuery(['inviteKey'], getInviteKey);
   const { modalOffHandler } = useModal();
+  const [isCopied, setIsCopied] = useState(false);
+  const link = `${process.env.REACT_APP_BASE_URL}/invited/${inviteKeyData?.data.invitationKey}`;
+
   return (
     <FlexContainer $wFull $padding="20px" $gap="30px">
       <FlexContainer $gap="10px">
@@ -20,31 +25,33 @@ const GetInviteKeyModal = (): JSX.Element => {
         </Text>
         <Text>아래 링크에 접속하면 그룹에 가입됩니다.</Text>
       </FlexContainer>
-      <Box>
-        <Text>{inviteKeyData?.data.invitationKey}</Text>
-      </Box>
+      <FlexContainer $wFull $height="44px">
+        {isFetching ? <Loader size="1.5rem" isDeffered={false} /> : <LinkBox value={link} readOnly />}
+      </FlexContainer>
       <FlexContainer $gap="10px">
-        <CopyToClipboard text={inviteKeyData?.data.invitationKey || ''}>
-          <SubmitButton>복사하기</SubmitButton>
-        </CopyToClipboard>
-        <Button onClick={() => modalOffHandler()}>닫기</Button>
+        {isFetching && (
+          <SubmitButton>
+            <Loader size="1.3rem" isDeffered={false} />
+          </SubmitButton>
+        )}
+        {!isFetching && (
+          <CopyToClipboard text={inviteKeyData?.data.invitationKey || ''}>
+            {!isCopied ? (
+              <SubmitButton onClick={() => setIsCopied(true)}>복사하기</SubmitButton>
+            ) : (
+              <SubmitButton>
+                <Text margin="0 0.3rem 0 0">복사됨</Text>
+                <CheckIcon size="1rem" />
+              </SubmitButton>
+            )}
+          </CopyToClipboard>
+        )}
+        <SubmitButton $hasBorder $activeColor={myTheme.color.backgroundColor} onClick={() => modalOffHandler()}>
+          닫기
+        </SubmitButton>
       </FlexContainer>
     </FlexContainer>
   );
 };
 
 export default GetInviteKeyModal;
-
-const Box = styled.div`
-  display: flex;
-  justify-content: center;
-  padding: 10px;
-  border: 1px solid;
-  border-color: ${({ theme }) => theme.color.gray};
-`;
-
-const Button = styled(SubmitButton)`
-  background-color: ${({ theme }) => theme.color.backgroundColor};
-  border: 2px solid;
-  border-color: ${({ theme }) => theme.color.yellow};
-`;
diff --git a/src/components/modals/GetInviteKeyModal/styles.tsx b/src/components/modals/GetInviteKeyModal/styles.tsx
@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+
+export const LinkBox = styled.input`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px;
+  border: 1px solid;
+  border-color: ${({ theme }) => theme.color.gray};
+  overflow-x: scroll;
+  text-align: center;
+  height: 100%;
+`;
diff --git a/src/error/defaultErrorHandler.ts b/src/error/defaultErrorHandler.ts
@@ -11,6 +11,7 @@ export const defaultErrorHandler = (error: ErrorData) => {
 
   if (error.response === undefined) {
     alert('서버 오류');
+    removeLoginData();
     return;
   }
 
@@ -71,6 +72,7 @@ export const defaultErrorHandler = (error: ErrorData) => {
 
     default:
       alert(`잘못된 접근입니다`);
+      removeLoginData();
       redirect(convertPath('/'));
       return;
   }