From 93e24cd310f9615425fe3542b51df697f63d7b43 Mon Sep 17 00:00:00 2001
From: Eugene Kim <67894159+eugene028@users.noreply.github.com>
Date: Wed, 7 Aug 2024 15:01:38 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EB=A1=9C=EB=94=A9=20=EC=8A=A4=ED=94=BC?=
=?UTF-8?q?=EB=84=88=20=EC=B6=94=EA=B0=80=20=EB=B0=8F=20=EA=B8=B0=EC=A1=B4?=
=?UTF-8?q?=20=ED=8C=A8=ED=82=A4=EC=A7=80=20=EC=A0=9C=EA=B1=B0=20(#89)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
package.json | 1 -
pnpm-lock.yaml | 13 --------
src/components/common/LoadingSpinner.tsx | 31 +++++++++++++++++++
src/pages/Dashboard.tsx | 8 +++--
src/pages/StudentVerification.tsx | 6 ++--
.../StudentVerificationServerRedirect.tsx | 4 +--
6 files changed, 41 insertions(+), 22 deletions(-)
create mode 100644 src/components/common/LoadingSpinner.tsx
diff --git a/package.json b/package.json
index 80bfdae..34b505c 100644
--- a/package.json
+++ b/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",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1d4121a..8d23160 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -44,9 +44,6 @@ dependencies:
react-router-dom:
specifier: ^6.22.1
version: 6.22.1(react-dom@18.2.0)(react@18.2.0)
- react-spinners:
- specifier: ^0.13.8
- version: 0.13.8(react-dom@18.2.0)(react@18.2.0)
react-toastify:
specifier: ^10.0.4
version: 10.0.4(react-dom@18.2.0)(react@18.2.0)
@@ -8899,16 +8896,6 @@ packages:
react: 18.2.0
dev: false
- /react-spinners@0.13.8(react-dom@18.2.0)(react@18.2.0):
- resolution: {integrity: sha512-3e+k56lUkPj0vb5NDXPVFAOkPC//XyhKPJjvcGjyMNPWsBKpplfeyialP74G7H7+It7KzhtET+MvGqbKgAqpZA==}
- peerDependencies:
- react: ^16.0.0 || ^17.0.0 || ^18.0.0
- react-dom: ^16.0.0 || ^17.0.0 || ^18.0.0
- dependencies:
- react: 18.2.0
- react-dom: 18.2.0(react@18.2.0)
- dev: false
-
/react-style-singleton@2.2.1(@types/react@18.2.58)(react@18.2.0):
resolution: {integrity: sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==}
engines: {node: '>=10'}
diff --git a/src/components/common/LoadingSpinner.tsx b/src/components/common/LoadingSpinner.tsx
new file mode 100644
index 0000000..5c31af5
--- /dev/null
+++ b/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 (
+
+
+
+ );
+};
+
+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;
+ }
+`;
diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx
index f600f59..47a56e1 100644
--- a/src/pages/Dashboard.tsx
+++ b/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 로딩중 ...
;
+ return (
+
+
+
+ );
}
const { member, currentRecruitmentRound, currentMembership } = data;
diff --git a/src/pages/StudentVerification.tsx b/src/pages/StudentVerification.tsx
index 5b24c9e..776e797 100644
--- a/src/pages/StudentVerification.tsx
+++ b/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 로딩중입니다...
;
- }
-
return (
+ {isPending && }
재학생 인증하기
diff --git a/src/pages/redirect/StudentVerificationServerRedirect.tsx b/src/pages/redirect/StudentVerificationServerRedirect.tsx
index d2c9056..f4916e7 100644
--- a/src/pages/redirect/StudentVerificationServerRedirect.tsx
+++ b/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 (
{isPending ? (
-
+
) : (