[feat]로딩페이지

src/components/common/SearchedOutputList.jsx

@@ -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 });
@@ -92,7 +93,7 @@ function SearchedOutputList({ keyword, category, orderBy, reload, reloadFinishCa
           ))}
         </div>
       ) : (
-        <div>로딩중</div>
+        <LoadingContents />
       )}
     </>
   );

src/components/common/SearchedOutputLists.jsx

@@ -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`
   /* 스크롤바 숨기기 */
@@ -92,7 +93,7 @@ function SearchedOutputList({ searchedOutputList }) {
           )}
         </>
       ) : (
-        ''
+        <LoadingContents />
       )}
     </Wrapper>
   );

src/components/common/loading/Loading.jsx

@@ -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;

src/components/common/loading/LoadingContents.jsx

@@ -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>
+  );
+}

src/components/registerLocationPage/NearLoacation.jsx

@@ -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 />
+      )}
+    </>
   );
 }
 

src/pages/MyPage.jsx

@@ -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);
@@ -21,7 +21,7 @@ function MyPage() {
       localStorage.removeItem('signin-token');
       localStorage.removeItem('username');
       dispatch(logoutSuccess());
-      navigate('/');
+      navigate('/signin');
     } catch (error) {
       dispatch(logoutFailure('로그아웃에 실패했습니다.'));
     }

src/pages/RegisterLocationPage.jsx

@@ -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>

src/pages/SignInPage.jsx

@@ -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 = () => {

src/redux/api/authApi.js

@@ -40,8 +40,8 @@ export const signUpAPI = async ({ address }) => {
 
   const userInfo = {
     userId: '',
-    pw: decryptedPassword,
     email: decryptedUsername,
+    pw: decryptedPassword,
     name: nickname,
     address: address,
   };