feat: loading 상태에 필요한 skeleton 제작 (#488)

* feat: 데이터 추가 mock api 연결 * refactor: 인증 필요 없는 기능 client 변경 * feat: mse 동영상, 리뷰 기능 구현 (#472) * refactor: api 훅 함수로 분리, 적용 (#472) * refactor: 쓰지 않는 파일 삭제 (#472) * fix: console log 삭제 (#472) * Squashed commit of the following: commit 6e00687 Author: Jeremy <[email protected]> Date: Fri Sep 15 17:18:33 2023 +0900 bug: 옵션관련 ux 개선 (#474) * fix: 검색창 옵션 수정 (#473) * fix: 지도 줌 limit 설정 (#473) * fix: 모바일 환경에서 거리순으로 설정 (#473) * design: 오버레이 마커 디자인 개선 (#473) * fix: 오류 수정 (#476) * refactor: useScrollBlock 보강 (#476) * refactor: 모바일 페이지 컴포넌트 분리 (#476) * refactor: 라우터 재설정 (#476) * fix: 잘못된 import 수정 (#476) * refactor: router 및 outlet 새로 설정 (#476) * feat: NavBar 관련 Skeleton 제작 (#480) * feat: NavBar 관련 Skeleton 제작 (#480) * refactor: navBarSkeleton의 NavItem 개수를 props로 받도록 설정 (#480)
woowacourse-teams · Sep 20, 2023 · 276eec9 · 276eec9
1 parent 4f92824
commit 276eec9
Show file tree

Hide file tree

Showing 6 changed files with 115 additions and 3 deletions.
diff --git a/frontend/src/components/@common/NavItem/NavItemSkeleton.tsx b/frontend/src/components/@common/NavItem/NavItemSkeleton.tsx
@@ -0,0 +1,51 @@
+import styled from 'styled-components';
+
+import { BORDER_RADIUS, paintSkeleton } from '~/styles/common';
+
+function NavItemSkeleton() {
+  return (
+    <StyledNavItem>
+      <div />
+      <div>
+        <span />
+      </div>
+    </StyledNavItem>
+  );
+}
+
+export default NavItemSkeleton;
+
+const StyledNavItem = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  width: 68px;
+
+  border: none;
+  background: none;
+
+  & > div {
+    ${paintSkeleton}
+  }
+
+  & > div:first-child {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    width: 36px;
+    height: 36px;
+
+    border-radius: 50%;
+    margin-bottom: 0.4rem;
+  }
+
+  & > div:last-child {
+    width: 40px;
+    height: 12px;
+
+    border-radius: ${BORDER_RADIUS.xs};
+  }
+`;
diff --git a/frontend/src/components/@common/NavItem/index.tsx b/frontend/src/components/@common/NavItem/index.tsx
@@ -1,3 +1,5 @@
 import NavItem from '~/components/@common/NavItem/NavItem';
+import NavItemSkeleton from './NavItemSkeleton';
 
+export { NavItemSkeleton };
 export default NavItem;
diff --git a/frontend/src/components/MainPageNavBar/MainPageNavBarSkeleton.tsx b/frontend/src/components/MainPageNavBar/MainPageNavBarSkeleton.tsx
@@ -0,0 +1,57 @@
+import styled from 'styled-components';
+import { NavItemSkeleton } from '../@common/NavItem';
+
+interface MainPageNavBarSkeletonProps {
+  navItemLength: number;
+}
+
+function MainPageNavBarSkeleton({ navItemLength }: MainPageNavBarSkeletonProps) {
+  return (
+    <StyledNavBar>
+      <NavItemSkeleton />
+      <StyledLine />
+      <div>
+        {Array.from({ length: navItemLength }, () => (
+          <NavItemSkeleton />
+        ))}
+      </div>
+    </StyledNavBar>
+  );
+}
+
+export default MainPageNavBarSkeleton;
+
+const StyledNavBar = styled.nav`
+  display: flex;
+  align-items: center;
+
+  position: sticky;
+  top: 80px;
+  z-index: 11;
+
+  width: 100%;
+  height: 80px;
+
+  background-color: var(--white);
+
+  padding-left: 1.2rem;
+  border-bottom: 1px solid var(--gray-1);
+
+  & > div:last-child {
+    display: flex;
+    align-items: center;
+
+    & > * {
+      margin: 0 0.6rem;
+    }
+  }
+`;
+
+const StyledLine = styled.div`
+  margin-left: 1.2rem;
+
+  width: 1px;
+  height: 46px;
+
+  background-color: var(--gray-3);
+`;
diff --git a/frontend/src/components/MainPageNavBar/index.tsx b/frontend/src/components/MainPageNavBar/index.tsx
@@ -1,3 +1,5 @@
 import MainPageNavBar from './MainPageNavBar';
+import MainPageNavBarSkeleton from './MainPageNavBarSkeleton';
 
+export { MainPageNavBarSkeleton };
 export default MainPageNavBar;
diff --git a/frontend/src/pages/MainPage.tsx b/frontend/src/pages/MainPage.tsx
@@ -3,11 +3,12 @@ import { styled, css } from 'styled-components';
 
 import Map from '~/components/@common/Map';
 import RestaurantCardList from '~/components/RestaurantCardList';
-import MainPageNavBar from '~/components/MainPageNavBar';
+import MainPageNavBar, { MainPageNavBarSkeleton } from '~/components/MainPageNavBar';
 import useBooleanState from '~/hooks/useBooleanState';
 import useMediaQuery from '~/hooks/useMediaQuery';
 import MobileMainPage from './MobileMainPage';
 import LoadingIndicator from '~/components/@common/LoadingIndicator';
+import RESTAURANT_CATEGORY from '~/constants/restaurantCategory';
 
 function MainPage() {
   const { isMobile } = useMediaQuery();
@@ -28,7 +29,7 @@ function MainPage() {
 
   return (
     <>
-      <Suspense fallback={<div>로딩중...</div>}>
+      <Suspense fallback={<MainPageNavBarSkeleton navItemLength={RESTAURANT_CATEGORY.length} />}>
         <MainPageNavBar />
       </Suspense>
       <StyledLayout isMapExpanded={isMapExpanded}>

diff --git a/frontend/src/pages/RestaurantDetail.tsx b/frontend/src/pages/RestaurantDetail.tsx
@@ -146,7 +146,6 @@ function RestaurantDetail() {
                     <button aria-label="전화번호 복사" type="button" onClick={copyClipBoard(phoneNumber)}>
                       <Copy width={16} />
                       복사
-
                     </button>
                   </div>
                   <div>카테고리 : {category}</div>