refactor: 충전소 검색창의 UX를 개선한다 (#502)

* feat: 충전소 검색 로드 시 스켈레톤이 아닌 스피너가 출력되는 기능 구현

[#501]

* feat: 검색 새로 요청하기 전에 이 전 데이터 들고 있는 기능 구현

[#501]

* refactor: Loader 컴포넌트 디자인 및 색상 개선

[#501]

* refactor: 피드백 반영 및 자동 페칭 제한

[#501]

---------

Co-authored-by: Dain Lee <[email protected]>

frontend/src/components/common/Loader/Loader.stories.tsx

@@ -0,0 +1,43 @@
+import type { Meta } from '@storybook/react';
+
+import type { LoaderProps } from '@common/Loader/Loader';
+import Loader from '@common/Loader/index';
+
+const meta = {
+  title: 'Components/Loader',
+  component: Loader,
+  tags: ['autodocs'],
+  args: {
+    size: 'xs',
+  },
+  argTypes: {
+    size: {
+      options: { none: false, xs: 'xs', sm: 'sm', md: 'md', lg: 'lg', xl: 'xl', xxl: 'xxl' },
+      control: {
+        type: 'select',
+      },
+      description:
+        '사이즈를 부여할 수 있습니다. Size Props이외에도 필요에 따라 수동으로도 제어할 수 있습니다.',
+    },
+  },
+} satisfies Meta<typeof Loader>;
+
+export default meta;
+
+export const Default = (args: LoaderProps) => {
+  return <Loader {...args} />;
+};
+export const Sizes = () => {
+  return (
+    <>
+      <Loader />
+      <Loader size="xs" />
+      <Loader size="sm" />
+      <Loader size="md" />
+      <Loader size="lg" />
+      <Loader size="xl" />
+      <Loader size="xxl" />
+      <Loader size="100px" />
+    </>
+  );
+};

frontend/src/components/common/Loader/Loader.tsx

@@ -0,0 +1,63 @@
+import styled from 'styled-components';
+
+import type { Size } from '@type';
+
+export interface LoaderProps {
+  size?: Size | string;
+}
+
+const Loader = styled.div<LoaderProps>`
+  width: ${({ size }) => {
+    switch (size) {
+      case 'xs':
+        return '1.2rem';
+      case 'sm':
+        return '1.6rem';
+      case 'md':
+        return '2.0rem';
+      case 'lg':
+        return '2.4rem';
+      case 'xl':
+        return '2.8rem';
+      case 'xxl':
+        return '3.2rem';
+      default:
+        return size || '2.0rem';
+    }
+  }};
+  height: ${({ size }) => {
+    switch (size) {
+      case 'xs':
+        return '1.2rem';
+      case 'sm':
+        return '1.6rem';
+      case 'md':
+        return '2.0rem';
+      case 'lg':
+        return '2.4rem';
+      case 'xl':
+        return '2.8rem';
+      case 'xxl':
+        return '3.2rem';
+      default:
+        return size || '2.0rem';
+    }
+  }};
+  border: 2px solid #e9ecef;
+  border-bottom-color: #212529bf;
+  border-radius: 50%;
+  display: inline-block;
+  box-sizing: border-box;
+  animation: rotation 1s linear infinite;
+
+  @keyframes rotation {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+`;
+
+export default Loader;

frontend/src/components/common/Loader/index.ts

@@ -0,0 +1,3 @@
+import Loader from './Loader';
+
+export default Loader;

frontend/src/components/ui/StationSearchWindow/StationSearchBar.tsx

@@ -16,6 +16,7 @@ import { useSearchedStations } from '@hooks/tanstack-query/useSearchedStations';
 import { useDebounce } from '@hooks/useDebounce';
 
 import Button from '@common/Button';
+import Loader from '@common/Loader';
 
 import StationDetailsWindow from '@ui/StationDetailsWindow';
 import SearchResultSkeleton from '@ui/StationSearchWindow/SearchResultSkeleton';
@@ -91,10 +92,14 @@ const StationSearchBar = () => {
           onBlur={() => setIsFocused(false)}
         />
         <Button type="submit" aria-label="검색하기">
-          <MagnifyingGlassIcon width="2.4rem" stroke="#767676" />
+          {isFetching ? (
+            <Loader size="md" />
+          ) : (
+            <MagnifyingGlassIcon width="2.4rem" stroke="#767676" />
+          )}
         </Button>
       </S.Form>
-      {isFetching && <SearchResultSkeleton />}
+      {/*{isFetching && <SearchResultSkeleton />}*/}
       {isFocused && stations && (
         <SearchResult
           stations={stations}

frontend/src/hooks/tanstack-query/useSearchedStations.ts

@@ -43,5 +43,7 @@ export const useSearchedStations = () => {
     queryKey: [QUERY_KEY_SEARCHED_STATION, searchWord],
     queryFn: () => fetchSearchedStations(searchWord),
     enabled: !!searchWord,
+    keepPreviousData: true,
+    refetchOnWindowFocus: false,
   });
 };