Refactor/tutorial

.gitignore

@@ -18,8 +18,10 @@
 .env.test.local
 .env.production.local
 .env
+.env.development
+.env.production
 
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-node_modules
+node_modules

src/App.tsx

@@ -1,17 +1,17 @@
 import { Route, Routes } from 'react-router-dom';
+import { useQueryClient } from 'react-query';
 import Layout from './components/layout/Layout';
+import RequireAuth from '@components/auth/RequireAuth';
+import PersistLogin from '@components/auth/PersistLogin';
 import OnBoardingRouter from './pages/OnBoarding';
 import HomeRouter from './pages/Home';
 import WalkRouter from './pages/Walk';
 import MypageRouter from './pages/Mypage';
-import NotFound from './pages/NotFound';
-import RequireAuth from '@components/auth/RequireAuth';
-import PersistLogin from '@components/auth/PersistLogin';
-import TestPage from './pages/Test/TestPage';
-import { useQueryClient } from 'react-query';
 import GroupLink from './components/mypage/GroupLink';
 import ManageRouter from './pages/Manage';
 import InterestRouter from './pages/Interest';
+import NotFound from './pages/NotFound';
+import TestPage from './pages/Test/TestPage';
 
 function App() {
   const queryClient = useQueryClient();
@@ -32,7 +32,7 @@ function App() {
       <Route element={<Layout />}>
         <Route path="/auth/*" element={<OnBoardingRouter />} />
         <Route path="/link/:groupCode" element={<GroupLink />} />
-        <Route path="/test/*" element={<TestPage />} />
+        {/* <Route path="/test/*" element={<TestPage />} /> */}
         <Route element={<PersistLogin />}>
           <Route element={<RequireAuth />}>
             <Route path="/*" element={<HomeRouter />} />

src/apis/axios.tsx

@@ -1,11 +1,11 @@
 import { BASE_URL } from '@lib/constants/BASE_URL';
 import getLocalStorage from '@lib/utils/localStorage/getLocalStorage';
-import axios, { AxiosRequestConfig } from 'axios';
+import axios from 'axios';
 
 export const axiosPublic = axios.create({
   baseURL: BASE_URL,
   headers: { 'Content-Type': 'application/json' },
-  withCredentials: true,
+  // withCredentials: true,
 });
 
 // axiosPrivateInstance는 useAxiosPrivate hook에서 import 되고,
@@ -16,18 +16,11 @@ export const axiosPrivateInstance = axios.create({
   withCredentials: true,
 });
 
-export interface ApiResponse<T> {
-  data: T | null;
-  statusCode: string | null;
-  responseMessage: string | null;
-}
-
 // 임시 axiosPrivate
 export const axiosPrivateTemp = axios.create({
   baseURL: BASE_URL,
   headers: { 'Content-Type': 'application/json' },
 });
-
 axiosPrivateTemp.interceptors.request.use((request) => {
   const accessToken = getLocalStorage('accessToken');
   // @ts-expect-error
@@ -37,11 +30,12 @@ axiosPrivateTemp.interceptors.request.use((request) => {
   }
   return request;
 });
-
 axiosPrivateTemp.interceptors.response.use((response) => {
   return response.data;
 });
 
-// https://2mojurmoyang.tistory.com/212
-// https://velog.io/@bang9dev/axios-interceptor-with-ts
-// https://github.com/Team-MailedIt/mailedit-client/blob/master/src/utils/API.js
+export interface ApiResponse<T> {
+  data: T | null;
+  statusCode: string | null;
+  responseMessage: string | null;
+}

src/components/auth/PersistLogin.tsx

@@ -8,11 +8,12 @@ import {
   setLevel,
 } from '@store/slices/authSlice';
 import CustomSyncLoader from '@components/common/CustomSyncLoader';
+import registerEXPOToken from '@lib/utils/registerEXPOToken';
 
 function PersistLogin() {
   const accessToken = useAppSelector(selectAccessToken);
   const isKid = useAppSelector(selectIsKid);
-  const [isLoading, setIsLoading] = useState(true);
+  const [isFetching, setIsFetching] = useState(true);
   const dispatch = useAppDispatch();
   const axiosPrivate = useAxiosPrivate();
   const navigate = useNavigate();
@@ -32,15 +33,16 @@ function PersistLogin() {
       } catch (error) {
         navigate('/auth/login'); // access token expired
       } finally {
-        isMounted && setIsLoading(false); // escape memory leak
+        isMounted && setIsFetching(false); // escape memory leak
       }
     }
     console.log('aT in fetchLevel: ', accessToken);
     isRegisteredUser && fetchLevel();
+    registerEXPOToken();
     return () => (isMounted = false);
   }, []);
 
-  if (isRegisteredUser && isLoading) {
+  if (isRegisteredUser && isFetching) {
     return <CustomSyncLoader />;
   } else {
     return <Outlet />;

src/components/register/RegisterBirthday.tsx

@@ -38,7 +38,7 @@ function RegisterBirthday() {
   const dayInputRef = useRef<HTMLInputElement>(null);
   useEffect(() => {
     const parsedIntYear = parseInt(year);
-    if (1923 <= parsedIntYear && parsedIntYear <= 2022) {
+    if (1923 <= parsedIntYear && parsedIntYear <= 2021) {
       setIsValidYear(true);
       monthInputRef.current!.focus();
     } else {
@@ -75,7 +75,7 @@ function RegisterBirthday() {
     e.preventDefault();
     const parsedIntYear = parseInt(year);
     let temp1 = false;
-    if (1923 <= parsedIntYear && parsedIntYear <= 2022) {
+    if (1923 <= parsedIntYear && parsedIntYear <= 2021) {
       temp1 = true;
     }
     const temp2 = MONTH_REGEX.test(month);

src/components/register/RegisterRole.tsx

@@ -12,18 +12,19 @@ import { TFetchStatus } from '@lib/types/TFetchStatus';
 import useGlobalBottomSheet from '@lib/hooks/useGlobalBottomSheet';
 import setLocalStorage from '@lib/utils/localStorage/setLocalStorage';
 import getLocalStorage from '@lib/utils/localStorage/getLocalStorage';
+import GuideTemplate from '@components/manage/guides/GuideTemplate';
 
 function RegisterRole() {
   const birthday = useAppSelector(selectBirthday);
   const [isKid, setIsKid] = useState<boolean | null>(null);
   const [isFemale, setIsFemale] = useState<boolean | null>(null);
+  const [isTutorial, setIsTutorial] = useState<boolean>(false);
 
   const { openModal } = useModals();
-  const navigate = useNavigate();
   function handleModalOpen(isKid: boolean, isFemale: boolean) {
     openModal(modals.primaryModal, {
       onSubmit: () => {
-        navigate('/', { replace: true });
+        setIsTutorial(true);
       },
       isKid,
       isFemale,
@@ -80,54 +81,60 @@ function RegisterRole() {
 
   return (
     <Wrapper>
-      <span>프로필을 선택해요</span>
-      <RoleButtonWrapper>
-        {/* 아빠 */}
-        <RoleButton
-          onClick={() => {
-            openSelectProfileSheet(false, false);
-            setIsKid(false);
-            setIsFemale(false);
-          }}
-          isKid={false}
-          isFemale={false}
-          isSelected={isOpen && isKid === false && isFemale === false}
-        />
-        {/* 엄마 */}
-        <RoleButton
-          onClick={() => {
-            openSelectProfileSheet(false, true);
-            setIsKid(false);
-            setIsFemale(true);
-          }}
-          isKid={false}
-          isFemale={true}
-          isSelected={isOpen && isKid === false && isFemale === true}
-        />
-        {/* 아들 */}
-        <RoleButton
-          onClick={() => {
-            openSelectProfileSheet(true, false);
-            setIsKid(true);
-            setIsFemale(false);
-          }}
-          isKid={true}
-          isFemale={false}
-          isSelected={isOpen && isKid === true && isFemale === false}
-        />
-        {/* 딸 */}
-        <RoleButton
-          onClick={() => {
-            openSelectProfileSheet(true, true);
-            setIsKid(true);
-            setIsFemale(true);
-          }}
-          isKid={true}
-          isFemale={true}
-          isSelected={isOpen && isKid === true && isFemale === true}
-        />
-      </RoleButtonWrapper>
       <Modals />
+      {isTutorial ? (
+        <GuideTemplate page="onboarding" isKid={isKid!} />
+      ) : (
+        <>
+          <span>프로필을 선택해요</span>
+          <RoleButtonWrapper>
+            {/* 아빠 */}
+            <RoleButton
+              onClick={() => {
+                openSelectProfileSheet(false, false);
+                setIsKid(false);
+                setIsFemale(false);
+              }}
+              isKid={false}
+              isFemale={false}
+              isSelected={isOpen && isKid === false && isFemale === false}
+            />
+            {/* 엄마 */}
+            <RoleButton
+              onClick={() => {
+                openSelectProfileSheet(false, true);
+                setIsKid(false);
+                setIsFemale(true);
+              }}
+              isKid={false}
+              isFemale={true}
+              isSelected={isOpen && isKid === false && isFemale === true}
+            />
+            {/* 아들 */}
+            <RoleButton
+              onClick={() => {
+                openSelectProfileSheet(true, false);
+                setIsKid(true);
+                setIsFemale(false);
+              }}
+              isKid={true}
+              isFemale={false}
+              isSelected={isOpen && isKid === true && isFemale === false}
+            />
+            {/* 딸 */}
+            <RoleButton
+              onClick={() => {
+                openSelectProfileSheet(true, true);
+                setIsKid(true);
+                setIsFemale(true);
+              }}
+              isKid={true}
+              isFemale={true}
+              isSelected={isOpen && isKid === true && isFemale === true}
+            />
+          </RoleButtonWrapper>
+        </>
+      )}
     </Wrapper>
   );
 }
@@ -152,23 +159,3 @@ const RoleButtonWrapper = styled.div`
   row-gap: 16px;
   column-gap: 16px;
 `;
-
-// let accessToken;
-// let level: TLevel | null = null;
-// if (isKid === false && isFemale === false) {
-//   accessToken =
-//     'eyJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE2NjE0ODQyMTQsInN1YiI6IjUiLCJleHAiOjE2NjI2OTM4MTQsImlkIjo1LCJyb2xlcyI6IlVTRVIifQ.5fKVlH-BGRRXiSP2WFtiLGheiNThQAC8wc7yj38MAG8';
-// } else if (isKid === false && isFemale === true) {
-//   accessToken =
-//     'eyJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE2NjE0MTMxNTcsInN1YiI6IjIiLCJleHAiOjE2NjI2MjI3NTcsImlkIjoyLCJyb2xlcyI6IlVTRVIifQ.ev6Jy4r-sgdOmASOLQ2aioMVhkYhXFZz3HXeyBzvYwU';
-// } else if (isKid === true && isFemale === false) {
-//   accessToken =
-//     'eyJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE2NjIxOTg5NTQsInN1YiI6IjQiLCJleHAiOjE2NjM0MDg1NTQsImlkIjo0LCJyb2xlcyI6IlVTRVIifQ.F3tKrx-cVOHqPeU-a8opyLVK6oHbm83eAmh12HDNji0';
-//   level = -4;
-// } else if (isKid === true && isFemale === true) {
-//   accessToken =
-//     'eyJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE2NjI0Nzk4MzksInN1YiI6IjMiLCJleHAiOjE2NjI0Nzk4OTksImlkIjozLCJyb2xlcyI6IlVTRVIifQ.KmzWCJfLq_b2pJ_O1NaahjDStoYWa1PB7cG4PAUZnX0';
-//   level = 2;
-// }
-// accessToken &&
-//   dispatch(setCredentials({ accessToken, isKid, level, provider: 'kakao' }));

src/lib/constants/BASE_URL.ts

@@ -1,2 +1,3 @@
-export const BASE_URL = 'https://api.bankidz.com'; // 배포 환경
+// export const BASE_URL = 'https://api.bankidz.com'; // 배포 환경
 // export const BASE_URL = 'https://bankids.click'; // 테스트 환경
+export const BASE_URL = `${process.env.REACT_APP_BASE_URL}`;

src/lib/constants/KAKAO_AUTH_URL.ts

@@ -1,5 +1,6 @@
-const DOMAIN = 'https://bankidz.com'; // 배포 환경(고정)
+// const DOMAIN = 'https://bankidz.com'; // 배포 환경(고정)
 // const DOMAIN = 'http://localhost:3000'; // 테스트 환경
+const DOMAIN = `${process.env.REACT_APP_DOMAIN}`;
 const REST_API_KEY = `${process.env.REACT_APP_KAKAO_REST_API_KEY}`;
 const REDIRECT_URI = `${DOMAIN}/auth/kakao/callback`;
 export const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code`;

src/pages/OnBoarding/LoginPage.tsx

@@ -4,23 +4,15 @@ import MarginTemplate from '@components/layout/MarginTemplate';
 import { ReactComponent as Logo } from '@assets/icons/logo.svg';
 import { KAKAO_AUTH_URL } from '@lib/constants/KAKAO_AUTH_URL';
 import { APPLE_AUTH_URL } from '@lib/constants/APPLE_AUTH_URL';
-import { axiosPrivateTemp } from '@apis/axios';
 
 function LoginPage() {
-  const handleClick = async () => {
-    const response = await axiosPrivateTemp.get('/user');
-    console.log(response);
-  };
-
   return (
     <Wrapper>
       <MarginTemplate>
         <TextWrapper>
           <Logo />
           <p>뱅키즈에 오신 것을 환영합니다!</p>
         </TextWrapper>
-        <span>09090619</span>
-        <button onClick={handleClick}>axios private test</button>
         <ButtonWithMarginBottom
           label="카카오로 시작하기"
           onClick={() => (window.location.href = KAKAO_AUTH_URL)}