Merge pull request #192 from bankidz/dev

그룹링크 테스트 배포용

package.json

@@ -28,7 +28,6 @@
     "polished": "^4.2.2",
     "rc-slider": "^10.0.1",
     "react": "^18.1.0",
-    "react-apple-login": "^1.1.5",
     "react-content-loader": "^6.2.0",
     "react-dom": "^18.1.0",
     "react-icons": "^4.3.1",
@@ -39,6 +38,7 @@
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
     "react-signature-canvas": "^1.0.6",
+    "react-spinners": "^0.13.4",
     "react-spring-bottom-sheet": "^3.4.1",
     "styled-components": "^5.3.5",
     "styled-reset": "^4.4.1",

src/App.tsx

@@ -9,9 +9,11 @@ import FinancialRouter from './pages/Financial';
 import NotFound from './pages/NotFound';
 import RequireAuth from '@components/auth/RequireAuth';
 import PersistLogin from '@components/auth/PersistLogin';
-import SungwooTestPage from './pages/SungwooTestPage';
+import TestPage from './pages/Test/TestPage';
 import { useQueryClient } from 'react-query';
 import GroupLink from './components/mypage/GroupLink';
+import Setting from './pages/Setting/Setting';
+import SettingRouter from './pages/Setting';
 
 function App() {
   const queryClient = useQueryClient();
@@ -37,10 +39,13 @@ function App() {
         <Route path="/*" element={<HomeRouter />} />
         <Route path="/walk/*" element={<WalkRouter />} />
         <Route path="/mypage/*" element={<MypageRouter />} />
+
+        <Route path="/setting/*" element={<SettingRouter />} />
         <Route path="/financial/*" element={<FinancialRouter />} />
         {/* <Route path="/sungwoo" element={<SungwooTestPage />} /> */}
         <Route path="*" element={<NotFound />} />
         {/* </Route> */}
+
         {/* </Route> */}
       </Route>
     </Routes>

src/components/auth/PersistLogin.tsx

@@ -1,13 +1,13 @@
 import { Outlet } from 'react-router-dom';
 import { useState, useEffect } from 'react';
-import useRefreshToken from '@lib/hooks/auth/useRefreshToken';
+import useRefreshAccessToken from '@lib/hooks/auth/useRefreshAccessToken';
 import { useAppSelector } from '@store/app/hooks';
 import { selectAccessToken } from '@store/slices/authSlice';
 import useLocalStorage from '@lib/hooks/auth/useLocalStorage';
 
 function PersistLogin() {
   const [isLoading, setIsLoading] = useState(true);
-  const refresh = useRefreshToken();
+  const refreshAccessToken = useRefreshAccessToken();
   const accessToken = useAppSelector(selectAccessToken);
   const [persist] = useLocalStorage('persist', true);
 
@@ -16,29 +16,44 @@ function PersistLogin() {
     let isMounted = true;
     const verifyRefreshToken = async () => {
       try {
-        await refresh();
+        await refreshAccessToken();
       } catch (err) {
         console.error(err);
       } finally {
         isMounted && setIsLoading(false); // escape memory leak
       }
     };
+
     // verify only on refresh
-    !accessToken && persist ? verifyRefreshToken() : setIsLoading(false);
+    if (!accessToken && persist) {
+      verifyRefreshToken();
+    } else {
+      setIsLoading(false);
+    }
+
     return () => (isMounted = false);
   }, []);
 
-  return (
-    <>
-      {!persist ? (
-        <Outlet />
-      ) : isLoading ? (
-        <p>자동 로그인 처리중입니다...</p>
-      ) : (
-        <Outlet />
-      )}
-    </>
-  );
+  if (persist && isLoading) {
+    // TODO: <p> 삭제
+    return <p>자동 로그인 처리중입니다...</p>;
+  } else {
+    return <Outlet />;
+  }
 }
 
 export default PersistLogin;
+
+// TODO: 테스트 후 주석 삭제
+// !accessToken && persist ? verifyRefreshToken() : setIsLoading(false);
+// return (
+//   <>
+//     {!persist ? (
+//       <Outlet />
+//     ) : isLoading ? (
+//       <p>자동 로그인 처리중입니다...</p>
+//     ) : (
+//       <Outlet />
+//     )}
+//   </>
+// );

src/components/auth/RequireAuth.tsx

@@ -6,8 +6,7 @@ function RequireAuth() {
   const accessToken = useAppSelector(selectAccessToken);
   const isKid = useAppSelector(selectIsKid);
 
-  console.log(accessToken);
-  console.log(isKid);
+  console.log('aT: ', accessToken);
   if (accessToken === '') {
     return <Navigate to="auth/login" replace />;
   } else if (isKid === null) {

src/components/common/CustomSyncLoader.tsx

@@ -0,0 +1,26 @@
+import SyncLoader from 'react-spinners/SyncLoader';
+import styled from 'styled-components';
+
+function CustomSyncLoader() {
+  return (
+    <Wrapper>
+      <SyncLoader
+        size={13}
+        margin={2}
+        color="#FFC52F" // yellow400
+        loading={true}
+        speedMultiplier={0.7}
+      />
+    </Wrapper>
+  );
+}
+
+export default CustomSyncLoader;
+
+const Wrapper = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;

src/components/common/modals/primaryModal/PrimaryModal.stories.tsx

@@ -13,8 +13,10 @@ const Template: ComponentStory<typeof PrimaryModal> = (args) => (
   <PrimaryModal {...args} />
 );
 
-export const 가족이_생겼어요 = Template.bind({});
-가족이_생겼어요.args = {
-  headerText: '가족이 생겼어요',
-  bodyText: '기획에서 워딩 생각해주세요',
+export const 에어팟_사기 = Template.bind({});
+에어팟_사기.args = {
+  isKid: false,
+  isFemale: false,
+  headerText: '뱅키즈 첫 가입을 축하해요',
+  bodyText: '뱅키와 저금을 통해 돈길만 걸어요',
 };

src/components/common/modals/primaryModal/PrimaryModal.tsx

@@ -9,7 +9,7 @@ import {
   MODAL_CLOSE_TRANSITION_TIME,
   MODAL_SLIDE_FROM_POSITION,
   MODAL_SLIDE_TO_POSITION,
-} from '@lib/constants';
+} from '@lib/constants/MODAL';
 import useModals from '@lib/hooks/useModals';
 import { modals } from '../Modals';
 

src/components/common/modals/receiptModal/ReceiptModal.tsx

@@ -7,7 +7,6 @@ import getHeightByVariant from './getHeightByVariant';
 import { IDongil } from '@lib/types/IDongil';
 import PerforatedLineTop from './perforatedLines/PerforatedLineTop';
 import PerforatedLineBottom from './perforatedLines/PerforatedLineBottom';
-import DashedBorder from './DashedBorder';
 import TopContent from './contents/TopContent';
 import BottomContent from './contents/BottomContent';
 import CommentContent from './contents/CommentContent';
@@ -16,7 +15,7 @@ import {
   MODAL_CLOSE_TRANSITION_TIME,
   MODAL_SLIDE_FROM_POSITION,
   MODAL_SLIDE_TO_POSITION,
-} from '@lib/constants';
+} from '@lib/constants/MODAL';
 import useModals from '@lib/hooks/useModals';
 import { modals } from '../Modals';
 import { TReceiptModalVariant } from './TReceiptModalVariant';
@@ -118,7 +117,6 @@ function ReceiptModal({
     // @ts-expect-error
     <StyledReactModal {...reactModalParams}>
       <Content>
-        <DashedBorder variant={variant} />
         <PerforatedLineTop fill={theme.palette.greyScale.white} />
         <TopContent variant={variant} title={title} />
         <BottomContent

src/components/common/modals/receiptModal/SubmitButton.tsx

@@ -2,7 +2,7 @@ import Button from '@components/common/buttons/Button';
 import CheckButton from '@components/common/buttons/CheckButton';
 import { Dispatch, SetStateAction } from 'react';
 import styled, { css } from 'styled-components';
-import { MODAL_CLOSE_TRANSITION_TIME } from '@lib/constants';
+import { MODAL_CLOSE_TRANSITION_TIME } from '@lib/constants/MODAL';
 import { TReceiptModalVariant } from './TReceiptModalVariant';
 
 interface SubmitButtonProps {

src/components/common/modals/receiptModal/contents/BottomContent.tsx

@@ -72,6 +72,9 @@ const Wrapper = styled.div<{ variant: TReceiptModalVariant }>`
   justify-content: flex-start;
   align-items: space-between;
   position: relative;
+
+  padding-left: 17px;
+  padding-right: 17px;
 `;
 
 const SignatureWrapper = styled.div`