Merge pull request #482 from woowacourse-teams/feature/#465

트립생성 페이지 스켈레톤 적용
woowacourse-teams · Aug 17, 2023 · 7465cc0 · 7465cc0
2 parents 757ddbd + 0bba6e4
commit 7465cc0
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 7 deletions.
diff --git a/frontend/src/components/common/TripInformation/TripShareButton/TripShareButton.style.ts b/frontend/src/components/common/TripInformation/TripShareButton/TripShareButton.style.ts
@@ -59,7 +59,14 @@ export const shareUrlWrapperStyling = css({
 export const shareUrlStyling = css({
   padding: `${Theme.spacer.spacing1} ${Theme.spacer.spacing2}`,
 
-  overflow: 'hidden',
+  overflowX: 'scroll',
+  whiteSpace: 'nowrap',
+  '-ms-overflow-style': 'none',
+  scrollbarWidth: 'none',
+
+  '::-webkit-scrollbar': {
+    display: 'none',
+  },
 
   color: Theme.color.black,
 });

diff --git a/frontend/src/components/trip/TripCreateForm/TripCreateForm.style.ts b/frontend/src/components/trip/TripCreateForm/TripCreateForm.style.ts
@@ -24,3 +24,13 @@ export const formStyling = css({
     },
   },
 });
+
+export const skeletonStyling = css({
+  width: '100%',
+  height: '70px',
+  marginTop: Theme.spacer.spacing5,
+
+  '@media screen and (max-width: 600px)': {
+    marginTop: Theme.spacer.spacing4,
+  },
+});
diff --git a/frontend/src/components/trip/TripCreateForm/TripCreateFormSkeleton.tsx b/frontend/src/components/trip/TripCreateForm/TripCreateFormSkeleton.tsx
@@ -0,0 +1,15 @@
+import { Skeleton } from 'hang-log-design-system';
+
+import { skeletonStyling } from '@components/trip/TripCreateForm/TripCreateForm.style';
+
+const TripCreateFormSkeleton = () => {
+  return (
+    <>
+      <Skeleton css={skeletonStyling} />
+      <Skeleton css={skeletonStyling} />
+      <Skeleton css={skeletonStyling} />
+    </>
+  );
+};
+
+export default TripCreateFormSkeleton;
diff --git a/frontend/src/pages/TripCreatePage/TripCreatePage.tsx b/frontend/src/pages/TripCreatePage/TripCreatePage.tsx
@@ -1,3 +1,5 @@
+import { Suspense } from 'react';
+
 import { useRecoilValue } from 'recoil';
 
 import { Box, Flex, Heading } from 'hang-log-design-system';
@@ -9,6 +11,7 @@ import {
 } from '@pages/TripCreatePage/TripCreatePage.style';
 
 import TripCreateForm from '@components/trip/TripCreateForm/TripCreateForm';
+import TripCreateFormSkeleton from '@components/trip/TripCreateForm/TripCreateFormSkeleton';
 
 import { mediaQueryMobileState } from '@store/mediaQuery';
 
@@ -21,7 +24,9 @@ const TripCreatePage = () => {
     <Flex css={containerStyling}>
       <Box css={boxStyling}>
         <Heading size={isMobile ? 'small' : 'medium'}>여행을 기록해 보세요</Heading>
-        <TripCreateForm />
+        <Suspense fallback={<TripCreateFormSkeleton />}>
+          <TripCreateForm />
+        </Suspense>
       </Box>
       <CreatePageImage aria-label="세계 랜드마크 이미지" css={backgroundImageStyling} />
     </Flex>

diff --git a/frontend/src/router/AppRouter.tsx b/frontend/src/router/AppRouter.tsx
@@ -62,11 +62,7 @@ const AppRouter = () => {
         },
         {
           path: PATH.CREATE_TRIP,
-          element: (
-            <Suspense>
-              <TripCreatePage />
-            </Suspense>
-          ),
+          element: <TripCreatePage />,
         },
         {
           path: PATH.EXPENSE(':tripId'),