fix: 로딩 스피너 추가 및 기존 패키지 제거 (#89)

package.json

@@ -26,7 +26,6 @@
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.50.1",
     "react-router-dom": "^6.22.1",
-    "react-spinners": "^0.13.8",
     "react-toastify": "^10.0.4",
     "wowds-icons": "^0.1.0",
     "wowds-tokens": "^0.0.9",

src/components/common/LoadingSpinner.tsx

@@ -0,0 +1,31 @@
+import RainbowSpinner from 'wowds-ui/RainbowSpinner';
+import { media } from '@/styles';
+import GlobalSize from '@/constants/globalSize';
+import { Flex } from './Wrapper';
+import { color } from 'wowds-tokens';
+import styled from '@emotion/styled';
+
+const LoadingSpinner = () => {
+  return (
+    <Wrapper justify="center" align="center">
+      <RainbowSpinner width={60} height={60} />
+    </Wrapper>
+  );
+};
+
+export default LoadingSpinner;
+
+const Wrapper = styled(Flex)`
+  min-height: 100vh;
+  position: fixed;
+  top: 0;
+  z-index: 999;
+  width: ${GlobalSize.width};
+  margin: 0px -16px;
+  padding: 0px 16px;
+  gap: 40px;
+  background-color: ${color.blackOpacity40};
+  ${media.mobile} {
+    width: 100vw;
+  }
+`;

src/pages/Dashboard.tsx

@@ -12,6 +12,7 @@ import memberApi from '@/apis/member/memberApi';
 import GlobalSize from '@/constants/globalSize';
 import JoinStatus from '@/components/myPage/JoinStatus';
 import useBottomSheet from '@/hooks/common/useBottomSheet';
+import LoadingSpinner from '@/components/common/LoadingSpinner';
 
 export const Dashboard = () => {
   const { isOpen } = useBottomSheet();
@@ -20,9 +21,12 @@ export const Dashboard = () => {
     queryFn: memberApi.GET_DASHBOARD
   });
 
-  //TODO: 추후 로딩 스피너 삽입할 것
   if (!data) {
-    return <div> 로딩중 ...</div>;
+    return (
+      <Wrapper direction="column" justify="flex-start">
+        <LoadingSpinner />
+      </Wrapper>
+    );
   }
 
   const { member, currentRecruitmentRound, currentMembership } = data;

src/pages/StudentVerification.tsx

@@ -10,6 +10,7 @@ import { Controller } from 'react-hook-form';
 import { useEffect, useState } from 'react';
 import { media } from '@/styles';
 import GlobalSize from '@/constants/globalSize';
+import LoadingSpinner from '@/components/common/LoadingSpinner';
 
 /** 재학생 인증 페이지 */
 export const StudentVerification = () => {
@@ -39,12 +40,9 @@ export const StudentVerification = () => {
     onSubmit();
   };
 
-  if (isPending) {
-    return <div>로딩중입니다...</div>;
-  }
-
   return (
     <Wrapper direction="column" justify="flex-start" gap="lg">
+      {isPending && <LoadingSpinner />}
       <TextContainer>
         <Text typo="h1" style={{ marginBottom: '12px' }}>
           재학생 인증하기

src/pages/redirect/StudentVerificationServerRedirect.tsx

@@ -7,9 +7,9 @@ import { media } from '@/styles';
 import styled from '@emotion/styled';
 import { css } from '@emotion/react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
-import { PulseLoader } from 'react-spinners';
 import RoutePath from '@/routes/routePath';
 import { useLayoutEffect } from 'react';
+import LoadingSpinner from '@/components/common/LoadingSpinner';
 
 export const StudentVerificationServerRedirect = () => {
   const [searchParams] = useSearchParams();
@@ -26,7 +26,7 @@ export const StudentVerificationServerRedirect = () => {
   return (
     <Wrapper direction="column">
       {isPending ? (
-        <PulseLoader loading={isPending} />
+        <LoadingSpinner />
       ) : (
         <Container direction="column">
           <Text