From b53a97b2fad7275eaebb3c470c658a3284002d44 Mon Sep 17 00:00:00 2001
From: badahertz52 <badahertz52@gmail.com>
Date: Mon, 20 Jan 2025 16:21:48 +0900
Subject: [PATCH 1/5] =?UTF-8?q?feat=20:=20TextBlinkLoader=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/TextBlinkLoader/index.tsx          |  7 +++++++
 .../common/TextBlinkLoader/style.ts           | 19 +++++++++++++++++++
 frontend/src/components/common/index.tsx      |  1 +
 3 files changed, 27 insertions(+)
 create mode 100644 frontend/src/components/common/TextBlinkLoader/index.tsx
 create mode 100644 frontend/src/components/common/TextBlinkLoader/style.ts

diff --git a/frontend/src/components/common/TextBlinkLoader/index.tsx b/frontend/src/components/common/TextBlinkLoader/index.tsx
new file mode 100644
index 000000000..8b3209c4f
--- /dev/null
+++ b/frontend/src/components/common/TextBlinkLoader/index.tsx
@@ -0,0 +1,7 @@
+import * as S from './style';
+
+const TextBlinkLoader = (props: S.LoaderProps) => {
+  return <S.Loader {...props} />;
+};
+
+export default TextBlinkLoader;
diff --git a/frontend/src/components/common/TextBlinkLoader/style.ts b/frontend/src/components/common/TextBlinkLoader/style.ts
new file mode 100644
index 000000000..789022b0e
--- /dev/null
+++ b/frontend/src/components/common/TextBlinkLoader/style.ts
@@ -0,0 +1,19 @@
+import styled from '@emotion/styled';
+
+export interface LoaderProps {
+  $content?: string;
+}
+
+export const Loader = styled.div<LoaderProps>`
+  animation: l1 1.5s linear infinite alternate;
+
+  &::before {
+    content: '${({ $content }) => $content ?? 'Loading...'}';
+  }
+
+  @keyframes l1 {
+    to {
+      opacity: 0;
+    }
+  }
+`;
diff --git a/frontend/src/components/common/index.tsx b/frontend/src/components/common/index.tsx
index 4a34fce45..b399b6af1 100644
--- a/frontend/src/components/common/index.tsx
+++ b/frontend/src/components/common/index.tsx
@@ -16,3 +16,4 @@ export { default as ReviewEmptySection } from './ReviewEmptySection';
 export * from './modals';
 export { default as CopyTextButton } from './CopyTextButton';
 export { default as ReviewCard } from './ReviewCard';
+export { default as TextBlinkLoader } from './TextBlinkLoader';

From 2c3c3014f67f66d80e0704082058419a718ce7c1 Mon Sep 17 00:00:00 2001
From: badahertz52 <badahertz52@gmail.com>
Date: Mon, 20 Jan 2025 16:22:14 +0900
Subject: [PATCH 2/5] =?UTF-8?q?feat=20:=20=EB=A6=AC=EB=B7=B0=20=EB=A7=81?=
 =?UTF-8?q?=ED=81=AC=20=EC=83=9D=EC=84=B1=20=ED=8F=BC=20=EB=B2=84=ED=8A=BC?=
 =?UTF-8?q?=EC=97=90=20TextBlinkLoader=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../URLGeneratorForm/components/URLGeneratorButton/index.tsx  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/reviewURL/URLGeneratorForm/components/URLGeneratorButton/index.tsx b/frontend/src/components/reviewURL/URLGeneratorForm/components/URLGeneratorButton/index.tsx
index 56cdbd175..983486d12 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, TextBlinkLoader } 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 ? <TextBlinkLoader $content="리뷰 링크 생성 중..." /> : <p>리뷰 링크 생성하기</p>}
     </Button>
   );
 };

From 43a664d2e444ac540179706ec5068fdc55b51dc3 Mon Sep 17 00:00:00 2001
From: badahertz52 <badahertz52@gmail.com>
Date: Mon, 20 Jan 2025 16:33:17 +0900
Subject: [PATCH 3/5] =?UTF-8?q?style=20:=20animation=20=EC=8B=9C=EA=B0=84?=
 =?UTF-8?q?=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/common/TextBlinkLoader/style.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/common/TextBlinkLoader/style.ts b/frontend/src/components/common/TextBlinkLoader/style.ts
index 789022b0e..6cedfc7da 100644
--- a/frontend/src/components/common/TextBlinkLoader/style.ts
+++ b/frontend/src/components/common/TextBlinkLoader/style.ts
@@ -5,7 +5,7 @@ export interface LoaderProps {
 }
 
 export const Loader = styled.div<LoaderProps>`
-  animation: l1 1.5s linear infinite alternate;
+  animation: l1 1s linear infinite alternate;
 
   &::before {
     content: '${({ $content }) => $content ?? 'Loading...'}';

From f98633d7b5ac6610e0086193e0fe892ca89bac07 Mon Sep 17 00:00:00 2001
From: badahertz52 <badahertz52@gmail.com>
Date: Wed, 22 Jan 2025 19:40:23 +0900
Subject: [PATCH 4/5] =?UTF-8?q?feat=20:=20=EA=B9=9C=EB=B0=95=EC=9D=B4?=
 =?UTF-8?q?=EB=8A=94=20=EB=A1=9C=EB=94=A9=20=ED=9A=A8=EA=B3=BC=20=EC=A0=81?=
 =?UTF-8?q?=EC=9A=A9=20=EB=B2=94=EC=9C=84=EB=A5=BC=20text=EC=9D=B4?=
 =?UTF-8?q?=EC=99=B8=EB=A1=9C=20=EB=84=93=ED=9E=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 컴포넌트명 변경 : TextBlinkLoader -> BlinkLoader
- common 하위에 loading 폴더 생성 및 컴포넌트 폴더 위치 이동
---
 .../common/TextBlinkLoader/index.tsx          |  7 -------
 .../common/TextBlinkLoader/style.ts           | 19 -------------------
 frontend/src/components/common/index.tsx      |  1 -
 frontend/src/components/index.tsx             |  1 +
 .../components/loading/BlinkLoader/index.tsx  | 11 +++++++++++
 .../components/loading/BlinkLoader/style.ts   | 11 +++++++++++
 frontend/src/components/loading/index.tsx     |  1 +
 .../components/URLGeneratorButton/index.tsx   |  4 ++--
 8 files changed, 26 insertions(+), 29 deletions(-)
 delete mode 100644 frontend/src/components/common/TextBlinkLoader/index.tsx
 delete mode 100644 frontend/src/components/common/TextBlinkLoader/style.ts
 create mode 100644 frontend/src/components/loading/BlinkLoader/index.tsx
 create mode 100644 frontend/src/components/loading/BlinkLoader/style.ts
 create mode 100644 frontend/src/components/loading/index.tsx

diff --git a/frontend/src/components/common/TextBlinkLoader/index.tsx b/frontend/src/components/common/TextBlinkLoader/index.tsx
deleted file mode 100644
index 8b3209c4f..000000000
--- a/frontend/src/components/common/TextBlinkLoader/index.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import * as S from './style';
-
-const TextBlinkLoader = (props: S.LoaderProps) => {
-  return <S.Loader {...props} />;
-};
-
-export default TextBlinkLoader;
diff --git a/frontend/src/components/common/TextBlinkLoader/style.ts b/frontend/src/components/common/TextBlinkLoader/style.ts
deleted file mode 100644
index 6cedfc7da..000000000
--- a/frontend/src/components/common/TextBlinkLoader/style.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import styled from '@emotion/styled';
-
-export interface LoaderProps {
-  $content?: string;
-}
-
-export const Loader = styled.div<LoaderProps>`
-  animation: l1 1s linear infinite alternate;
-
-  &::before {
-    content: '${({ $content }) => $content ?? 'Loading...'}';
-  }
-
-  @keyframes l1 {
-    to {
-      opacity: 0;
-    }
-  }
-`;
diff --git a/frontend/src/components/common/index.tsx b/frontend/src/components/common/index.tsx
index b399b6af1..4a34fce45 100644
--- a/frontend/src/components/common/index.tsx
+++ b/frontend/src/components/common/index.tsx
@@ -16,4 +16,3 @@ export { default as ReviewEmptySection } from './ReviewEmptySection';
 export * from './modals';
 export { default as CopyTextButton } from './CopyTextButton';
 export { default as ReviewCard } from './ReviewCard';
-export { default as TextBlinkLoader } from './TextBlinkLoader';
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..6bc1cc186
--- /dev/null
+++ b/frontend/src/components/loading/BlinkLoader/index.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+import { EssentialPropsWithChildren } from '@/types';
+
+import * as S from './style';
+
+const BlinkLoader = ({ children }: EssentialPropsWithChildren) => {
+  return <S.Loader>{children}</S.Loader>;
+};
+
+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..ac69b4833
--- /dev/null
+++ b/frontend/src/components/loading/BlinkLoader/style.ts
@@ -0,0 +1,11 @@
+import styled from '@emotion/styled';
+
+export const Loader = styled.div`
+  animation: l1 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 983486d12..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, TextBlinkLoader } 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 ? <TextBlinkLoader $content="리뷰 링크 생성 중..." /> : <p>리뷰 링크 생성하기</p>}
+      {mutation.isPending ? <BlinkLoader>리뷰 링크 생성 중...</BlinkLoader> : '리뷰 링크 생성하기'}
     </Button>
   );
 };

From 5e6747148bd25b37cffa9778fab9c2d59e9e9e71 Mon Sep 17 00:00:00 2001
From: badahertz52 <badahertz52@gmail.com>
Date: Wed, 22 Jan 2025 19:51:02 +0900
Subject: [PATCH 5/5] =?UTF-8?q?feat=20:=20props=EC=97=90=20=EC=95=A0?=
 =?UTF-8?q?=EB=8B=88=EB=A9=94=EC=9D=B4=EC=85=98=20=EC=A7=80=EC=86=8D=20?=
 =?UTF-8?q?=EC=8B=9C=EA=B0=84=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/loading/BlinkLoader/index.tsx | 6 ++++--
 frontend/src/components/loading/BlinkLoader/style.ts  | 8 ++++++--
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/loading/BlinkLoader/index.tsx b/frontend/src/components/loading/BlinkLoader/index.tsx
index 6bc1cc186..8a28b1a00 100644
--- a/frontend/src/components/loading/BlinkLoader/index.tsx
+++ b/frontend/src/components/loading/BlinkLoader/index.tsx
@@ -4,8 +4,10 @@ import { EssentialPropsWithChildren } from '@/types';
 
 import * as S from './style';
 
-const BlinkLoader = ({ children }: EssentialPropsWithChildren) => {
-  return <S.Loader>{children}</S.Loader>;
+interface BlinkLoaderProps extends EssentialPropsWithChildren, S.LoaderProps {}
+
+const BlinkLoader = ({ children, $animationDurationTime }: BlinkLoaderProps) => {
+  return <S.Loader $animationDurationTime={$animationDurationTime}>{children}</S.Loader>;
 };
 
 export default BlinkLoader;
diff --git a/frontend/src/components/loading/BlinkLoader/style.ts b/frontend/src/components/loading/BlinkLoader/style.ts
index ac69b4833..bd81b0785 100644
--- a/frontend/src/components/loading/BlinkLoader/style.ts
+++ b/frontend/src/components/loading/BlinkLoader/style.ts
@@ -1,7 +1,11 @@
 import styled from '@emotion/styled';
 
-export const Loader = styled.div`
-  animation: l1 1s linear infinite alternate;
+export interface LoaderProps {
+  $animationDurationTime?: string;
+}
+
+export const Loader = styled.div<LoaderProps>`
+  animation: l1 ${(props) => props.$animationDurationTime ?? '1s'} linear infinite alternate;
 
   @keyframes l1 {
     to {