From 276eec9f9fa225f08639947a037b8d2b5daebd74 Mon Sep 17 00:00:00 2001 From: Minjae Kim Date: Wed, 20 Sep 2023 14:38:43 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20loading=20=EC=83=81=ED=83=9C=EC=97=90?= =?UTF-8?q?=20=ED=95=84=EC=9A=94=ED=95=9C=20skeleton=20=EC=A0=9C=EC=9E=91?= =?UTF-8?q?=20(#488)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: 데이터 추가 mock api 연결 * refactor: 인증 필요 없는 기능 client 변경 * feat: mse 동영상, 리뷰 기능 구현 (#472) * refactor: api 훅 함수로 분리, 적용 (#472) * refactor: 쓰지 않는 파일 삭제 (#472) * fix: console log 삭제 (#472) * Squashed commit of the following: commit 6e0068735b155b95ec45de7fd78eb241993dc513 Author: Jeremy <102432453+shackstack@users.noreply.github.com> 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) --- .../@common/NavItem/NavItemSkeleton.tsx | 51 +++++++++++++++++ .../src/components/@common/NavItem/index.tsx | 2 + .../MainPageNavBar/MainPageNavBarSkeleton.tsx | 57 +++++++++++++++++++ .../src/components/MainPageNavBar/index.tsx | 2 + frontend/src/pages/MainPage.tsx | 5 +- frontend/src/pages/RestaurantDetail.tsx | 1 - 6 files changed, 115 insertions(+), 3 deletions(-) create mode 100644 frontend/src/components/@common/NavItem/NavItemSkeleton.tsx create mode 100644 frontend/src/components/MainPageNavBar/MainPageNavBarSkeleton.tsx diff --git a/frontend/src/components/@common/NavItem/NavItemSkeleton.tsx b/frontend/src/components/@common/NavItem/NavItemSkeleton.tsx new file mode 100644 index 000000000..687618bae --- /dev/null +++ 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 ( + +
+
+ +
+ + ); +} + +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 index 3a623f836..9fa473243 100644 --- 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 new file mode 100644 index 000000000..6161d22c5 --- /dev/null +++ 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 ( + + + +
+ {Array.from({ length: navItemLength }, () => ( + + ))} +
+ + ); +} + +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 index 4f3ce590e..e1dfb47a1 100644 --- 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 index a38d28a39..39f810281 100644 --- 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 ( <> - 로딩중...
}> + }> diff --git a/frontend/src/pages/RestaurantDetail.tsx b/frontend/src/pages/RestaurantDetail.tsx index b66665ce7..55cbe4bf3 100644 --- a/frontend/src/pages/RestaurantDetail.tsx +++ b/frontend/src/pages/RestaurantDetail.tsx @@ -146,7 +146,6 @@ function RestaurantDetail() {
카테고리 : {category}