refactor: 서버 필터링 스켈레톤 컴포넌트를 구현한다 (#505)

[#504]

frontend/src/components/ui/ServerStationFilters/FilterOptionSkeleton.tsx

@@ -0,0 +1,35 @@
+import { css } from 'styled-components';
+
+import { generateRandomData } from '@utils/randomDataGenerator';
+
+import FlexBox from '@common/FlexBox';
+import Skeleton from '@common/Skeleton';
+
+const FilterOptionSkeleton = () => {
+  return (
+    <>
+      <FlexBox
+        width={30}
+        direction={'column'}
+        css={css`
+          margin-bottom: 4.8rem;
+        `}
+      >
+        <FlexBox justifyContent="between">
+          <Skeleton width="15rem" height="2rem" mb={1} />
+          <Skeleton width="8rem" height="2rem" mb={1} />
+        </FlexBox>
+        <FlexBox gap={2}>
+          {Array.from({ length: generateRandomData([10, 15, 20]) }, (_, index) => (
+            <Skeleton
+              key={index}
+              width={`${generateRandomData([8, 10, 12, 14])}rem`}
+              height="4rem"
+            />
+          ))}
+        </FlexBox>
+      </FlexBox>
+    </>
+  );
+};
+export default FilterOptionSkeleton;

frontend/src/components/ui/ServerStationFilters/ServerStationFilters.tsx

@@ -19,6 +19,7 @@ import ButtonNext from '@common/ButtonNext';
 import FlexBox from '@common/FlexBox';
 import Text from '@common/Text';
 
+import ServerStationFiltersSkeleton from '@ui/ServerStationFilters/ServerStationFiltersSkeleton';
 import { useNavigationBar } from '@ui/compound/NavigationBar/hooks/useNavigationBar';
 
 import { CONNECTOR_TYPES, COMPANIES } from '@constants/chargers';
@@ -45,7 +46,7 @@ const ServerStationFiltersComponent = () => {
   } = useServerStationFilterActions();
 
   if (isLoading) {
-    return <></>;
+    return <ServerStationFiltersSkeleton />;
   }
 
   const { connectorTypes, capacities, companies } = serverStationFilters;
@@ -166,7 +167,7 @@ const ServerStationFiltersComponent = () => {
   );
 };
 
-const overFlowCss = css`
+export const overFlowCss = css`
   overflow-y: scroll;
   overflow-x: hidden;
 
@@ -175,11 +176,11 @@ const overFlowCss = css`
   }
 `;
 
-const borderCss = css`
+export const borderCss = css`
   outline: 1.5px solid #e1e4eb;
 `;
 
-const buttonCss = css`
+export const buttonCss = css`
   width: 100%;
   height: 6rem;
 
@@ -188,10 +189,10 @@ const buttonCss = css`
 
   flex-shrink: 0;
 
-  color: \#fff;
+  color: #fff;
 `;
 
-const filterHeaderCss = css`
+export const filterHeaderCss = css`
   position: sticky;
   top: 0;
   background-color: #fff;

frontend/src/components/ui/ServerStationFilters/ServerStationFiltersSkeleton.tsx

@@ -0,0 +1,41 @@
+import FlexBox from '@common/FlexBox';
+import Skeleton from '@common/Skeleton';
+
+import FilterOptionSkeleton from '@ui/ServerStationFilters/FilterOptionSkeleton';
+import {
+  borderCss,
+  filterHeaderCss,
+  overFlowCss,
+} from '@ui/ServerStationFilters/ServerStationFilters';
+
+const ServerStationFiltersSkeleton = () => {
+  return (
+    <FlexBox
+      width={34}
+      height={'100vh'}
+      alignItems={'center'}
+      direction={'column'}
+      background={'white'}
+      css={[overFlowCss, borderCss]}
+      nowrap={true}
+      noRadius={'all'}
+    >
+      <FlexBox
+        width={34}
+        height={8}
+        justifyContent="between"
+        alignItems="center"
+        css={filterHeaderCss}
+      >
+        <Skeleton width="7rem" height="4rem" />
+        <Skeleton width="7rem" height="4rem" />
+        <Skeleton width="7rem" height="4rem" />
+      </FlexBox>
+      <FilterOptionSkeleton />
+      <FilterOptionSkeleton />
+      <FilterOptionSkeleton />
+    </FlexBox>
+  );
+};
+
+export default ServerStationFiltersSkeleton;