From 452a4024941f20a2c609ebf0e9bf9f6e0f57db59 Mon Sep 17 00:00:00 2001
From: Jihyeong <iolpd42@gmail.com>
Date: Tue, 8 Oct 2024 00:58:17 +0900
Subject: [PATCH] Fix/#77 root layout navigation error (#82)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* refactor: onboarding 속성을 제거합니다.

* fix: navigation error를 수정합니다.
---
 .../oauth2/authorization/login.tsx            | 35 ++++++++++++++-----
 app/(beforeLogin)/sign-in.tsx                 | 13 ++++---
 .../BusinessCard/BusinessCard.stories.tsx     |  6 ----
 src/store/useSession.tsx                      | 10 ++----
 4 files changed, 37 insertions(+), 27 deletions(-)

diff --git a/app/(beforeLogin)/oauth2/authorization/login.tsx b/app/(beforeLogin)/oauth2/authorization/login.tsx
index efb0252..5e30472 100644
--- a/app/(beforeLogin)/oauth2/authorization/login.tsx
+++ b/app/(beforeLogin)/oauth2/authorization/login.tsx
@@ -1,24 +1,42 @@
 import styled from '@emotion/native';
 import { useRoute } from '@react-navigation/core';
-import React, { useEffect } from 'react';
+import { useRouter } from 'expo-router';
+import React, { useEffect, useState } from 'react';
 import { ActivityIndicator } from 'react-native';
 
 import { useSession } from '@/store';
+import { flexDirectionColumnItemsCenter } from '@/styles/common';
 import { setHeader } from '@/utils';
 
 function Login() {
+  const [loading, setLoading] = useState(true);
   const route = useRoute();
+  const router = useRouter();
   const { signIn } = useSession();
 
   const { token, refresh } = route.params as { token?: string; refresh?: string };
 
-  useEffect(() => {
-    if (typeof token === 'string' && typeof refresh === 'string') {
-      setHeader('Authorization', `Bearer ${token}`);
-      signIn(refresh);
-    }
-    // ts-expect-error signIn을 넣을 경우 무한 재 렌더링을 하게 됩니다.
-  }, [refresh, token]);
+  useEffect(
+    function setToken() {
+      if (typeof token === 'string' && typeof refresh === 'string') {
+        setHeader('Authorization', `Bearer ${token}`);
+        signIn(refresh);
+      }
+
+      setLoading(false);
+      // ts-expect-error signIn을 넣을 경우 무한 재 렌더링을 하게 됩니다.
+    },
+    [refresh, token]
+  );
+
+  useEffect(
+    function isNotLoadRedirect() {
+      if (!loading) {
+        router.replace('/');
+      }
+    },
+    [loading, router]
+  );
 
   return (
     <S.Container>
@@ -32,6 +50,7 @@ function Login() {
 
 const S = {
   Container: styled.SafeAreaView`
+    ${flexDirectionColumnItemsCenter};
     flex: 1;
   `,
 };
diff --git a/app/(beforeLogin)/sign-in.tsx b/app/(beforeLogin)/sign-in.tsx
index 8fe25dc..09ad088 100644
--- a/app/(beforeLogin)/sign-in.tsx
+++ b/app/(beforeLogin)/sign-in.tsx
@@ -16,11 +16,14 @@ import { getSize } from '@/utils';
 function SignIn() {
   const { signIn, refreshToken } = useSession();
 
-  useEffect(() => {
-    if (refreshToken) {
-      signIn();
-    }
-  }, [refreshToken, signIn]);
+  useEffect(
+    function ifHasRefreshTokenGoToMain() {
+      if (refreshToken) {
+        signIn(refreshToken);
+      }
+    },
+    [refreshToken, signIn]
+  );
 
   return (
     <S.LoginWrapper>
diff --git a/src/components/home/BusinessCard/BusinessCard.stories.tsx b/src/components/home/BusinessCard/BusinessCard.stories.tsx
index 4d0ba25..b23b85b 100644
--- a/src/components/home/BusinessCard/BusinessCard.stories.tsx
+++ b/src/components/home/BusinessCard/BusinessCard.stories.tsx
@@ -33,12 +33,6 @@ const SkeletonMeta: Meta<typeof BusinessCard> = {
       },
       description: '스크린에 보이는지 여부를 입력해주세요',
     },
-    onboarding: {
-      control: {
-        type: 'boolean',
-      },
-      description: '온보딩 화면인지 여부를 입력해주세요',
-    },
   },
   parameters: {
     layout: 'centered',
diff --git a/src/store/useSession.tsx b/src/store/useSession.tsx
index bbaf6b7..01e5a58 100644
--- a/src/store/useSession.tsx
+++ b/src/store/useSession.tsx
@@ -1,4 +1,3 @@
-import { useRouter } from 'expo-router';
 import { createContext, type PropsWithChildren, useContext } from 'react';
 
 import { STORAGE_KEYS } from '@/constants';
@@ -6,7 +5,7 @@ import { useStorageState } from '@/hooks/useStorageState';
 import { useOnboarding } from '@/store/useOnboarding';
 
 const AuthContext = createContext<{
-  signIn: (refreshToken?: string | null) => void;
+  signIn: (refreshToken: string) => void;
   signOut: () => void;
   refreshToken?: string | null;
   isLoading: boolean;
@@ -33,18 +32,13 @@ export function useSession() {
 
 export function SessionProvider({ children }: PropsWithChildren) {
   const [[isLoading, refreshToken], setSession] = useStorageState(STORAGE_KEYS.SESSION);
-  const router = useRouter();
   const { resetOnBoarding } = useOnboarding();
 
   return (
     <AuthContext.Provider
       value={{
-        signIn: (refreshToken = null) => {
-          if (refreshToken !== null) {
-            router.push('/');
-          }
+        signIn: (refreshToken: string) => {
           setSession(refreshToken);
-          router.push('/');
         },
         signOut: () => {
           setSession(null);