✨ feat : bottom button 에 로딩 구현

src/app/_component/atom/BottomButton/index.tsx

@@ -6,6 +6,7 @@ import { BottomButtonWrap } from './style';
 import BackHeader from '@/app/_component/molecule/BackHeader';
 import JoinTemplate from '@/app/_component/temp/JoinTemplate';
 import { ButtonType } from '@/app/_component/atom/atomType';
+import Loading from '@/app/_component/atom/Loading';
 type props = {
   loading: boolean;
   filled: boolean;
@@ -25,8 +26,9 @@ const BottomButton: React.FC<props> = ({
     <BottomButtonWrap
       className={filled ? 'confirm_button_Filled' : 'confirm_button'}
       onClick={onClickValid}
+      data-loading={loading}
     >
-      다음
+      {loading ? <Loading /> : '다음'}
     </BottomButtonWrap>
   );
 };

src/app/_component/atom/Loading/index.tsx

@@ -0,0 +1,13 @@
+import { LoadingSection } from '../Loading/styles';
+
+const Loading = () => {
+  return (
+    <LoadingSection>
+      <div />
+      <div />
+      <div />
+    </LoadingSection>
+  );
+};
+
+export default Loading;

src/app/_component/atom/Loading/styles.ts

@@ -0,0 +1,36 @@
+import { Colors, fontGenerator } from '@/styles';
+import styled from '@emotion/styled';
+
+export const LoadingSection = styled.section`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 6px;
+
+  & > div {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background-color: $gray-100;
+    animation: loading 1s linear infinite;
+
+    &:nth-child(2) {
+      animation-delay: 0.1s;
+    }
+    &:nth-child(3) {
+      animation-delay: 0.2s;
+    }
+  }
+
+  @keyframes loading {
+    0% {
+      transform: scale(0.8);
+    }
+    50% {
+      transform: scale(1);
+    }
+    100% {
+      transform: scale(0.8);
+    }
+  }
+`;

src/app/signup/page.tsx

@@ -63,16 +63,7 @@ export default function Signup(): React.JSX.Element {
   return (
     <JoinWrap>
       <BackHeader title={' '} url={'/'} />
-      <JoinTemplate
-        title={'예방접종도우미에 가입한 적이 있나요?'}
-        subTop={'백곰을 이용하기 위해서는'}
-        subBottom={'질병관리청의 예방접종도우미 가입이 필요해요'}
-        falseLabel={'아니요, 가입한 적이 없어요'}
-        trueLabel={'네, 가입한 적이 있어요'}
-        params={params}
-        field={'signupState'}
-        onChangeValue={onChangeValue}
-      />
+
       <BottomButton
         filled={params.signupState !== undefined}
         handleNextButtonClick={() => {