[FE] feat : 리뷰 생성 중 UI 구현

frontend/src/components/index.tsx

@@ -5,3 +5,4 @@ export * from './highlight/components';
 export * from './login';
 export * from './reviewURL';
 export * from './skeleton';
+export * from './loading';

frontend/src/components/loading/BlinkLoader/index.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import { EssentialPropsWithChildren } from '@/types';
+
+import * as S from './style';
+
+interface BlinkLoaderProps extends EssentialPropsWithChildren, S.LoaderProps {}
+
+const BlinkLoader = ({ children, $animationDurationTime }: BlinkLoaderProps) => {
+  return <S.Loader $animationDurationTime={$animationDurationTime}>{children}</S.Loader>;
+};
+
+export default BlinkLoader;

frontend/src/components/loading/BlinkLoader/style.ts

@@ -0,0 +1,15 @@
+import styled from '@emotion/styled';
+
+export interface LoaderProps {
+  $animationDurationTime?: string;
+}
+
+export const Loader = styled.div<LoaderProps>`
+  animation: l1 ${(props) => props.$animationDurationTime ?? '1s'} linear infinite alternate;
+
+  @keyframes l1 {
+    to {
+      opacity: 0;
+    }
+  }
+`;

frontend/src/components/loading/index.tsx

@@ -0,0 +1 @@
+export { default as BlinkLoader } from './BlinkLoader';

frontend/src/components/reviewURL/URLGeneratorForm/components/URLGeneratorButton/index.tsx

@@ -1,5 +1,5 @@
 import { DataForReviewRequestCode } from '@/apis/group';
-import { Button } from '@/components';
+import { Button, BlinkLoader } from '@/components';
 import { HOM_EVENT_NAME } from '@/constants';
 import { debounce, trackEventInAmplitude } from '@/utils';
 
@@ -42,7 +42,7 @@ const URLGeneratorButton = ({
       onClick={handleURLCreationButtonClick}
       disabled={!isFormValid && !mutation.isPending}
     >
-      {mutation.isPending ? '리뷰 링크 생성 중...' : '리뷰 링크 생성하기'}
+      {mutation.isPending ? <BlinkLoader>리뷰 링크 생성 중...</BlinkLoader> : '리뷰 링크 생성하기'}
     </Button>
   );
 };