Merge pull request #99 from CoolPeace-yanolza/feature/#92

[#92] 전체 레이아웃 에러 및 로딩화면 개선

src/App.error.tsx

@@ -1,11 +1,25 @@
 import { FallbackProps } from 'react-error-boundary';
 import styled from '@emotion/styled';
 
+import theme from '@styles/theme';
+import errorIcon from '@assets/icons/ic-error.svg';
+import reloadIcon from '@assets/icons/ic-reload.svg';
+
 const ErrorFallback = ({ resetErrorBoundary }: FallbackProps) => {
   return (
     <Container>
-      <span>App 전체 에러 발생</span>
-      <button onClick={resetErrorBoundary}>다시 시도</button>
+      <ErrorIcon
+        src={errorIcon}
+        alt="에러 발생"
+      />
+      <ErrorWord>서비스를 이용할 수 없습니다.</ErrorWord>
+      <ReLoadButton onClick={resetErrorBoundary}>
+        <ReloadIcon
+          src={reloadIcon}
+          alt="에러 발생"
+        />
+        다시 시도 하기
+      </ReLoadButton>
     </Container>
   );
 };
@@ -24,3 +38,60 @@ const Container = styled.div`
   align-items: center;
   gap: 10px;
 `;
+
+const ErrorIcon = styled.img`
+  width: 80px;
+  height: 80px;
+
+  ${theme.response.tablet} {
+    width: 50px;
+    height: 50px;
+  }
+`;
+
+const ErrorWord = styled.span`
+  font-size: 20px;
+  font-weight: 500;
+
+  ${theme.response.tablet} {
+    font-size: 15px;
+  }
+`;
+
+const ReLoadButton = styled.button`
+  margin-top: 15px;
+  margin-left: 3px;
+  border: none;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  background-color: transparent;
+  font-size: 15px;
+  text-align: center;
+
+  transition: all 0.5s;
+
+  &:hover {
+    color: gray;
+  }
+
+  ${theme.response.tablet} {
+    margin-top: 10px;
+
+    font-size: 13px;
+  }
+`;
+
+const ReloadIcon = styled.img`
+  width: 25px;
+  height: 25px;
+
+  margin-right: 10px;
+
+  ${theme.response.tablet} {
+    width: 20px;
+    height: 20px;
+  }
+`;

src/App.loading.tsx

@@ -82,6 +82,7 @@ const Header = styled(BaseSkeleton)`
   width: 100%;
   height: 85px;
 
+  margin-top: 25px;
   border-radius: 20px;
 
   display: flex;
@@ -91,14 +92,15 @@ const Header = styled(BaseSkeleton)`
   ${theme.response.tablet} {
     height: 65px;
 
+    margin-top: 15px;
     border-radius: 10px;
   }
 `;
 
 const OutletLayout = styled(BaseSkeleton)`
   width: 100%;
-  height: 85vh;
-  max-height: 85vh;
+  height: 83vh;
+  max-height: 83vh;
 
   margin-top: 16px;
   border-radius: 20px;

src/components/common/Layout/Header/Select/index.tsx

@@ -68,6 +68,8 @@ const StyledDropdown = styled(Dropdown)`
   ${theme.response.tablet} {
     &.ui.dropdown {
       min-width: 180px;
+
+      margin-right: 15px;
       padding: 5px 15px;
 
       font-size: 12px;

src/components/common/Layout/Sidebar/Header/index.tsx

@@ -8,7 +8,10 @@ import theme from '@styles/theme';
 const Header = ({ isSidebarOpen, setIsSidebarOpen }: SidebarHeader) => {
   return (
     <Container $isSidebarOpen={isSidebarOpen}>
-      <Hamburger onClick={() => setIsSidebarOpen(prev => !prev)}>
+      <Hamburger
+        $isSidebarOpen={isSidebarOpen}
+        onClick={() => setIsSidebarOpen(prev => !prev)}
+      >
         <HamburgerIcon
           src={hamburger}
           alt="메뉴"
@@ -35,14 +38,13 @@ const Container = styled.div<SidebarOpen>`
   display: flex;
   justify-content: space-between;
   align-items: center;
-  z-index: 100;
 
   ${theme.response.tablet} {
     margin-left: 5px;
   }
 `;
 
-const Hamburger = styled.button`
+const Hamburger = styled.button<SidebarOpen>`
   width: 60px;
   height: 60px;
 
@@ -62,8 +64,9 @@ const Hamburger = styled.button`
     width: 50px;
     height: 50px;
 
-    margin: 8px 10px;
-    padding: 0 6px;
+    margin: 10px 5px 8px 5px;
+    ${props =>
+      props.$isSidebarOpen ? 'padding: 18px 0' : 'padding: 10px 0 0 0'};
   }
 `;
 

src/components/common/Layout/Sidebar/index.tsx

@@ -1,5 +1,6 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import styled from '@emotion/styled';
+import { useLocation } from 'react-router-dom';
 
 import Header from './Header';
 import Navigation from './Navigation';
@@ -8,6 +9,18 @@ import theme from '@styles/theme';
 
 const Sidebar = () => {
   const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+  const location = useLocation();
+  const locationPathname = location.pathname;
+  const [prevLocation, setPrevLocation] = useState('');
+
+  // 링크 이동 시 사이드바 닫힘
+  useEffect(() => {
+    if (prevLocation !== locationPathname) setIsSidebarOpen(false);
+  }, [prevLocation, locationPathname]);
+
+  useEffect(() => {
+    setPrevLocation(locationPathname);
+  }, [locationPathname]);
 
   return (
     <>
@@ -39,14 +52,13 @@ const Container = styled.div<SidebarOpen>`
 
   background-color: ${theme.colors.white};
   overflow: hidden;
-  // HACK: z-index 상수화 (const enum, as const 학습 후 적용)
-  z-index: 100;
+  z-index: ${props => (props.$isSidebarOpen ? 100 : 90)};
   transition: all 0.3s;
 
   ${theme.response.tablet} {
     width: ${props => (props.$isSidebarOpen ? '100%' : 'auto')};
-    height: ${props => (props.$isSidebarOpen ? 'fit-content' : '93px')};
-    min-height: ${props => (props.$isSidebarOpen ? 'fit-content' : '93px')};
+    height: ${props => (props.$isSidebarOpen ? 'fit-content' : '60px')};
+    min-height: ${props => (props.$isSidebarOpen ? 'fit-content' : '60px')};
 
     padding: 0;
 

src/components/common/MobileDashboardHeader/index.tsx

@@ -48,15 +48,14 @@ const Container = styled.div`
     width: 100%;
 
     border-bottom: 2px solid #c5c5c57f;
-    padding: 0 15px;
+    padding: 0 10px 0 25px;
 
     display: flex;
     justify-content: space-between;
     align-items: flex-end;
 
     font-size: 11px;
     font-weight: 700;
-    z-index: 100;
   }
 `;