diff --git a/frontend/src/components/index.tsx b/frontend/src/components/index.tsx index b1090db58..cbc79cc8d 100644 --- a/frontend/src/components/index.tsx +++ b/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'; diff --git a/frontend/src/components/loading/BlinkLoader/index.tsx b/frontend/src/components/loading/BlinkLoader/index.tsx new file mode 100644 index 000000000..8a28b1a00 --- /dev/null +++ b/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 {children}; +}; + +export default BlinkLoader; diff --git a/frontend/src/components/loading/BlinkLoader/style.ts b/frontend/src/components/loading/BlinkLoader/style.ts new file mode 100644 index 000000000..bd81b0785 --- /dev/null +++ b/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` + animation: l1 ${(props) => props.$animationDurationTime ?? '1s'} linear infinite alternate; + + @keyframes l1 { + to { + opacity: 0; + } + } +`; diff --git a/frontend/src/components/loading/index.tsx b/frontend/src/components/loading/index.tsx new file mode 100644 index 000000000..cecb1ff37 --- /dev/null +++ b/frontend/src/components/loading/index.tsx @@ -0,0 +1 @@ +export { default as BlinkLoader } from './BlinkLoader'; diff --git a/frontend/src/components/reviewURL/URLGeneratorForm/components/URLGeneratorButton/index.tsx b/frontend/src/components/reviewURL/URLGeneratorForm/components/URLGeneratorButton/index.tsx index 56cdbd175..e8b913fe6 100644 --- a/frontend/src/components/reviewURL/URLGeneratorForm/components/URLGeneratorButton/index.tsx +++ b/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 ? 리뷰 링크 생성 중... : '리뷰 링크 생성하기'} ); };