Skip to content

Commit

Permalink
Merge pull request #49 from cookies-yam/feat/loadingPage
Browse files Browse the repository at this point in the history
[feat]로딩페이지
  • Loading branch information
doradora523 authored Jul 1, 2023
2 parents 464c423 + 9fa3960 commit 0ff51d1
Show file tree
Hide file tree
Showing 10 changed files with 54 additions and 35 deletions.
21 changes: 0 additions & 21 deletions src/components/common/Loading.jsx

This file was deleted.

3 changes: 2 additions & 1 deletion src/components/common/SearchedOutputList.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import SearchedOutput from './SearchedOutput';
import { ERROR_ALERT_MESSAGE, TEMPORARY_SRC, TIMEOUT } from '../../static/constants';
import searchApi from '../../api/searchApi';
import useThrottle from '../../hooks/useThrottle';
import { LoadingContents } from './loading/LoadingContents';

function SearchedOutputList({ keyword, category, orderBy, reload, reloadFinishCallback }) {
const metaRef = useRef({ fetching: true, page: 1, size: 15 });
Expand Down Expand Up @@ -92,7 +93,7 @@ function SearchedOutputList({ keyword, category, orderBy, reload, reloadFinishCa
))}
</div>
) : (
<div>로딩중</div>
<LoadingContents />
)}
</>
);
Expand Down
3 changes: 2 additions & 1 deletion src/components/common/SearchedOutputLists.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import useThrottle from '../../hooks/useThrottle';
import useCustomQuery from '../../hooks/useCustomQuery';

import { ERROR_ALERT_MESSAGE, TIMEOUT, TEMPORARY_SRC } from '../../static/constants';
import { LoadingContents } from './loading/LoadingContents';

const Wrapper = styled.div`
/* 스크롤바 숨기기 */
Expand Down Expand Up @@ -92,7 +93,7 @@ function SearchedOutputList({ searchedOutputList }) {
)}
</>
) : (
''
<LoadingContents />
)}
</Wrapper>
);
Expand Down
12 changes: 12 additions & 0 deletions src/components/common/loading/Loading.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import React from 'react';
import { LoadingContents } from './LoadingContents';

function Loading() {
return (
<div className="bg-[rgba(0,0,0,0.55)] w-full h-full fixed top-0 z-[999]">
<LoadingContents textColor={'#fff'} />
</div>
);
}

export default Loading;
19 changes: 19 additions & 0 deletions src/components/common/loading/LoadingContents.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import React from 'react';

export function LoadingContents({ textColor }) {
return (
<div className="flex flex-col absolute top-1/2 left-1/2 translate-x-[-50%] translate-y-[-50%]">
<div
className="w-[87px] h-[87px]"
style={{
backgroundImage: `url(${process.env.PUBLIC_URL}/images/loading.gif)`,
backgroundPosition: 'center',
backgroundSize: 'cover',
}}
></div>
<p className="font-semibold text-center" style={{ color: `${textColor ? textColor : '#39b549'}` }}>
로딩중...
</p>
</div>
);
}
21 changes: 14 additions & 7 deletions src/components/registerLocationPage/NearLoacation.jsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,20 @@
import React from 'react';
import { LoadingContents } from '../common/loading/LoadingContents';

function NearLoacation({ location, onClick }) {
function NearLoacation({ location, onClick, isLoading }) {
return (
<div
className="w-full h-[42px] border-b-[0.5px] border-gray text-[13px] leading-[29px] mb-[13px] cursor-pointer"
onClick={onClick}
>
{location}
</div>
<>
{!isLoading ? (
<div
className="w-full h-[42px] border-b-[0.5px] border-gray text-[13px] leading-[29px] mb-[13px] cursor-pointer"
onClick={onClick}
>
{location}
</div>
) : (
<LoadingContents />
)}
</>
);
}

Expand Down
4 changes: 2 additions & 2 deletions src/pages/MyPage.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import TabBar from '../components/common/navBar/TabBar';

import { MY_PAGE, SETTING_LOCATION, CHANGE_INFO, LOGOUT } from '../static/constants';
import { logoutFailure, logoutStart, logoutSuccess } from '../redux/slices/authSlice';
import Loading from '../components/common/Loading';
import Loading from '../components/common/loading/Loading';

function MyPage() {
const { isLoading } = useSelector((state) => state.auth);
Expand All @@ -21,7 +21,7 @@ function MyPage() {
localStorage.removeItem('signin-token');
localStorage.removeItem('username');
dispatch(logoutSuccess());
navigate('/');
navigate('/signin');
} catch (error) {
dispatch(logoutFailure('로그아웃에 실패했습니다.'));
}
Expand Down
2 changes: 1 addition & 1 deletion src/pages/RegisterLocationPage.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@ function RegisterLocationPage() {
className="flex flex-col items-center gap-[13px]"
contents={
searchedData &&
searchedData.map((el, id) => <NearLoacation key={id} location={el} onClick={() => onClickLocation(el)} />)
searchedData.map((el, id) => <NearLoacation key={id} location={el} onClick={() => onClickLocation(el)} isLoading={isLoading} />)
}
/>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/pages/SignInPage.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import LongButton from '../components/common/LongButton';
import TextAndBackBar from '../components/common/navBar/TextAndBackBar';
import { setUsername, setError, setPassword } from '../redux/slices/signinSlice';
import { loginFailure, loginStart, loginSuccess } from '../redux/slices/authSlice';
import Loading from '../components/common/Loading';
import Loading from '../components/common/loading/Loading';
import { signInAPI } from '../redux/api/authApi';

const SignInPage = () => {
Expand Down
2 changes: 1 addition & 1 deletion src/redux/api/authApi.js
Original file line number Diff line number Diff line change
Expand Up @@ -40,8 +40,8 @@ export const signUpAPI = async ({ address }) => {

const userInfo = {
userId: '',
pw: decryptedPassword,
email: decryptedUsername,
pw: decryptedPassword,
name: nickname,
address: address,
};
Expand Down

0 comments on commit 0ff51d1

Please sign in to comment.