refactor: staletime, gctime default 값(0)으로 변경

prgrms-web-devcourse-final-project · Dec 1, 2024 · 8e6de57 · 8e6de57
1 parent b28320c
commit 8e6de57
Show file tree

Hide file tree

Showing 5 changed files with 160 additions and 146 deletions.
diff --git a/src/components/common/Footer.styles.ts b/src/components/common/Footer.styles.ts
@@ -0,0 +1,80 @@
+import styled from '@emotion/styled';
+import {
+  BottomNavigation,
+  BottomNavigationItem,
+  BottomNavigationLabel,
+} from 'chakra-ui-bottom-navigation';
+import theme from '@/styles/theme';
+
+export const FooterWrapper = styled.div`
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  height: 5.25rem; //84px
+  padding: 0;
+  margin: 0;
+  z-index: 300;
+`;
+
+export const Container = styled.div<{ maxWidth: string }>`
+  width: 100%;
+  max-width: ${(props) => props.maxWidth};
+  background-color: ${theme.colors.white};
+  overflow: hidden;
+  position: relative;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+`;
+
+export const StyledNavigationItem = styled(BottomNavigationItem)`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+`;
+
+export const IconWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 1.5rem; //24px
+`;
+
+export const StyledLabel = styled(BottomNavigationLabel)<{ isActive: boolean }>`
+  font-family: ${theme.typography.fontFamily};
+  font-size: ${theme.typography.body2.size};
+  font-weight: ${theme.typography.body2.weight};
+  color: ${(props) => (props.isActive ? theme.colors.primary : theme.colors.gray[300])};
+  margin-top: 4px;
+  text-align: center;
+  transition: color 0.2s ease-in-out;
+`;
+
+export const StyledBottomNavigation = styled(BottomNavigation)`
+  width: 100%;
+  height: 5.25rem; //84px
+  max-width: inherit;
+  position: relative;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  box-shadow: none;
+  padding: 10px;
+  margin: 0;
+
+  && {
+    box-shadow: none;
+  }
+`;
diff --git a/src/components/common/Footer.tsx b/src/components/common/Footer.tsx
@@ -1,11 +1,6 @@
 import { useState } from 'react';
-import styled from '@emotion/styled';
-import {
-  BottomNavigation,
-  BottomNavigationItem,
-  BottomNavigationIcon,
-  BottomNavigationLabel,
-} from 'chakra-ui-bottom-navigation';
+import { useNavigate } from 'react-router-dom';
+import { BottomNavigationIcon } from 'chakra-ui-bottom-navigation';
 
 import HomeIcon from '@/assets/images/home_icon.svg';
 import HomeIconClicked from '@/assets/images/home_icon_clicked.svg';
@@ -17,11 +12,46 @@ import MyPageIcon from '@/assets/images/mypage_icon.svg';
 import MyPageIconClicked from '@/assets/images/mypage_icon_clicked.svg';
 
 import theme from '@/styles/theme';
-import { useNavigate } from 'react-router-dom';
+import {
+  FooterWrapper,
+  Container,
+  StyledNavigationItem,
+  IconWrapper,
+  StyledLabel,
+  StyledBottomNavigation,
+} from './Footer.styles';
 
 interface FooterProps {
   maxWidth?: string;
 }
+
+const menuItems = [
+  {
+    path: '/',
+    label: '홈',
+    icon: HomeIcon,
+    activeIcon: HomeIconClicked,
+  },
+  {
+    path: '/qspace',
+    label: '큐스페이스',
+    icon: GroupIcon,
+    activeIcon: GroupIconClicked,
+  },
+  {
+    path: '/chat',
+    label: '채팅',
+    icon: ChatIcon,
+    activeIcon: ChatIconClicked,
+  },
+  {
+    path: '/mypage',
+    label: '마이',
+    icon: MyPageIcon,
+    activeIcon: MyPageIconClicked,
+  },
+];
+
 const Footer = ({ maxWidth = '425px' }: FooterProps) => {
   const navigate = useNavigate();
   const [value, setValue] = useState<string>('/');
@@ -32,33 +62,6 @@ const Footer = ({ maxWidth = '425px' }: FooterProps) => {
     navigate(newValue);
   };
 
-  const menuItems = [
-    {
-      path: '/',
-      label: '홈',
-      icon: HomeIcon,
-      activeIcon: HomeIconClicked,
-    },
-    {
-      path: '/qspace',
-      label: '큐스페이스',
-      icon: GroupIcon,
-      activeIcon: GroupIconClicked,
-    },
-    {
-      path: '/chat',
-      label: '채팅',
-      icon: ChatIcon,
-      activeIcon: ChatIconClicked,
-    },
-    {
-      path: '/mypage',
-      label: '마이',
-      icon: MyPageIcon,
-      activeIcon: MyPageIconClicked,
-    },
-  ];
-
   return (
     <FooterWrapper>
       <Container maxWidth={maxWidth}>
@@ -102,77 +105,4 @@ const Footer = ({ maxWidth = '425px' }: FooterProps) => {
   );
 };
 
-const FooterWrapper = styled.div`
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  height: 5.25rem; //84px
-  padding: 0;
-  margin: 0;
-  z-index: 300;
-`;
-
-const Container = styled.div<{ maxWidth: string }>`
-  width: 100%;
-  max-width: ${(props) => props.maxWidth};
-  background-color: ${theme.colors.white};
-  overflow: hidden;
-  position: relative;
-  height: 100%;
-  padding: 0;
-  margin: 0;
-`;
-
-const StyledNavigationItem = styled(BottomNavigationItem)`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  cursor: pointer;
-  transition: all 0.2s ease-in-out;
-`;
-
-const IconWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 1.5rem; //24px
-`;
-
-const StyledLabel = styled(BottomNavigationLabel)<{ isActive: boolean }>`
-  font-family: ${theme.typography.fontFamily};
-  font-size: ${theme.typography.body2.size};
-  font-weight: ${theme.typography.body2.weight};
-  color: ${(props) => (props.isActive ? theme.colors.primary : theme.colors.gray[300])};
-  margin-top: 4px;
-  text-align: center;
-  transition: color 0.2s ease-in-out;
-`;
-
-const StyledBottomNavigation = styled(BottomNavigation)`
-  width: 100%;
-  height: 5.25rem; //84px
-  max-width: inherit;
-  position: relative;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
-  box-shadow: none;
-  padding: 10px;
-  margin: 0;
-
-  && {
-    box-shadow: none;
-  }
-`;
-
 export default Footer;
diff --git a/src/components/common/Header.styles.ts b/src/components/common/Header.styles.ts
@@ -0,0 +1,34 @@
+import styled from '@emotion/styled';
+import theme from '@/styles/theme';
+
+export const StyledHeader = styled.header`
+  width: 100%;
+  padding: 0.5rem 1.5rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: ${theme.colors.white};
+`;
+
+export const LogoWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+`;
+
+export const RightSection = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+`;
+
+export const IconButton = styled.button`
+  background: none;
+  border: none;
+  padding: 0.5rem;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: ${theme.colors.black};
+`;
diff --git a/src/components/common/Header.tsx b/src/components/common/Header.tsx
@@ -1,9 +1,13 @@
 import { IoSearch } from 'react-icons/io5';
 import { HiOutlineBell } from 'react-icons/hi';
-import styled from '@emotion/styled';
-import { useNavigate } from 'react-router-dom'; // React Router의 useNavigate 가져오기
-import theme from '@/styles/theme';
+import { useNavigate } from 'react-router-dom';
 import Logo from '@/assets/qfeed-logo.svg?react';
+import {
+  IconButton,
+  LogoWrapper,
+  RightSection,
+  StyledHeader,
+} from '@/components/common/Header.styles';
 
 interface HeaderProps {
   onSearchClick?: () => void;
@@ -37,35 +41,3 @@ const Header = ({ onSearchClick, onLogoClick, className }: HeaderProps) => {
 };
 
 export default Header;
-
-const StyledHeader = styled.header`
-  width: 100%;
-  padding: 0.5rem 1.5rem;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  background-color: ${theme.colors.white};
-`;
-
-const LogoWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-`;
-
-const RightSection = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-`;
-
-const IconButton = styled.button`
-  background: none;
-  border: none;
-  padding: 0.5rem;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: ${theme.colors.black};
-`;
diff --git a/src/main.tsx b/src/main.tsx
@@ -15,8 +15,6 @@ const queryClient = new QueryClient({
       refetchOnWindowFocus: false,
       refetchOnMount: false,
       retry: 1,
-      staleTime: 5 * 60 * 1000,
-      gcTime: 30 * 60 * 1000,
     },
   },
 });
@@ -31,7 +29,7 @@ ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
     <QueryClientProvider client={queryClient}>
       <ThemeProvider theme={theme}>
-        <ChakraProvider theme = {chakraTheme}>
+        <ChakraProvider theme={chakraTheme}>
           <GlobalStyles />
           <RouterProvider router={router} />
         </ChakraProvider>