From 9fa3960db32cd68a8b845cae0db4419a7f805caf Mon Sep 17 00:00:00 2001
From: doradora523 <doradora523@naver.com>
Date: Sun, 2 Jul 2023 03:09:40 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EB=A1=9C=EB=94=A9=EC=9D=B4=20=ED=95=84?=
 =?UTF-8?q?=EC=9A=94=ED=95=9C=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8?=
 =?UTF-8?q?=EC=97=90=20=EB=A1=9C=EB=94=A9=20=EC=97=B0=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/Loading.jsx             | 21 -------------------
 src/components/common/SearchedOutputList.jsx  |  3 ++-
 src/components/common/SearchedOutputLists.jsx |  3 ++-
 src/components/common/loading/Loading.jsx     | 12 +++++++++++
 .../common/loading/LoadingContents.jsx        | 19 +++++++++++++++++
 .../registerLocationPage/NearLoacation.jsx    | 21 ++++++++++++-------
 src/pages/MyPage.jsx                          |  4 ++--
 src/pages/RegisterLocationPage.jsx            |  2 +-
 src/pages/SignInPage.jsx                      |  2 +-
 src/redux/api/authApi.js                      |  2 +-
 10 files changed, 54 insertions(+), 35 deletions(-)
 delete mode 100644 src/components/common/Loading.jsx
 create mode 100644 src/components/common/loading/Loading.jsx
 create mode 100644 src/components/common/loading/LoadingContents.jsx

diff --git a/src/components/common/Loading.jsx b/src/components/common/Loading.jsx
deleted file mode 100644
index b9dce98..0000000
--- a/src/components/common/Loading.jsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-
-const Loading = () => {
-  return (
-    <div className="bg-[rgba(0,0,0,0.55)] w-[390px] h-full fixed top-0 z-[999]">
-      <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="text-white font-semibold text-center">로딩중...</p>
-      </div>
-    </div>
-  );
-};
-
-export default Loading;
diff --git a/src/components/common/SearchedOutputList.jsx b/src/components/common/SearchedOutputList.jsx
index 4b7e6a9..9dfd41d 100644
--- a/src/components/common/SearchedOutputList.jsx
+++ b/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 />
       )}
     </>
   );
diff --git a/src/components/common/SearchedOutputLists.jsx b/src/components/common/SearchedOutputLists.jsx
index 05f535d..b2b97dc 100644
--- a/src/components/common/SearchedOutputLists.jsx
+++ b/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>
   );
diff --git a/src/components/common/loading/Loading.jsx b/src/components/common/loading/Loading.jsx
new file mode 100644
index 0000000..43d98ff
--- /dev/null
+++ b/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;
diff --git a/src/components/common/loading/LoadingContents.jsx b/src/components/common/loading/LoadingContents.jsx
new file mode 100644
index 0000000..b748ff2
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/components/registerLocationPage/NearLoacation.jsx b/src/components/registerLocationPage/NearLoacation.jsx
index e987784..1c336fe 100644
--- a/src/components/registerLocationPage/NearLoacation.jsx
+++ b/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 />
+      )}
+    </>
   );
 }
 
diff --git a/src/pages/MyPage.jsx b/src/pages/MyPage.jsx
index fad5d03..af29e9b 100644
--- a/src/pages/MyPage.jsx
+++ b/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('로그아웃에 실패했습니다.'));
     }
diff --git a/src/pages/RegisterLocationPage.jsx b/src/pages/RegisterLocationPage.jsx
index 43c35dc..efdbbfd 100644
--- a/src/pages/RegisterLocationPage.jsx
+++ b/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>
diff --git a/src/pages/SignInPage.jsx b/src/pages/SignInPage.jsx
index 80c58c1..c1a834d 100644
--- a/src/pages/SignInPage.jsx
+++ b/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 = () => {
diff --git a/src/redux/api/authApi.js b/src/redux/api/authApi.js
index 3e26c0d..f3a1fd2 100644
--- a/src/redux/api/authApi.js
+++ b/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,
   };