Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feature]: 와우 디자인 시스템의 RainbowSpinner를 적용해요 #89

Merged
merged 1 commit into from
Aug 7, 2024
Merged

[Feature]: 와우 디자인 시스템의 RainbowSpinner를 적용해요 #89

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
13 changes: 0 additions & 13 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

31 changes: 31 additions & 0 deletions src/components/common/LoadingSpinner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
`;
8 changes: 6 additions & 2 deletions src/pages/Dashboard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -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;
Expand Down
6 changes: 2 additions & 4 deletions src/pages/StudentVerification.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = () => {
Expand Down Expand Up @@ -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' }}>
재학생 인증하기
Expand Down
4 changes: 2 additions & 2 deletions src/pages/redirect/StudentVerificationServerRedirect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -26,7 +26,7 @@ export const StudentVerificationServerRedirect = () => {
return (
<Wrapper direction="column">
{isPending ? (
<PulseLoader loading={isPending} />
<LoadingSpinner />
) : (
<Container direction="column">
<Text
Expand Down
Loading