refactor: don't block render but handler

src/_app/App.tsx

@@ -44,8 +44,7 @@ function App() {
     
     
     useEffect(() => {
-        connector.current = new Connector(setLogin);
-        console.log('app', connector.current);
+        if (!connector.current) connector.current = new Connector(setLogin);
     }, []);
     
     useEffect(() => {
@@ -57,7 +56,6 @@ function App() {
         socket.current = new Socket();
         
         socket.current?.onOrder((d: CartItemPostModel) => {
-            console.log(d);
             setToastItem({
                 id: '', title: d.shopId, description: d.waitingCount.toString(), goto: ''
             });

src/common/instances/Connector.ts

@@ -10,17 +10,14 @@ class Connector {
     private randomUuid = Math.random();
     
     constructor(setLogin: LoginInstance) {
-        console.log('constructed');
         this.setLoginInstance = setLogin;
     }
     
     setIsAdmin(b: boolean) {
         this.isAdmin = b;
-        console.log('setIsAdmin', b);
     }
     
     getIsAdmin() {
-        console.log('getIsAdmin', this.isAdmin);
         return this.isAdmin;
     }
     

src/pages/admin-page/AdminPage.tsx

@@ -4,22 +4,18 @@ import { useNavigate } from "react-router-dom";
 import APP_ROUTE from "../../_app/config/route";
 import { ALERT } from "../../common/constants";
 
-import type Connector from "../../common/instances/Connector";
 import type { GFC } from "../../common/types/fc";
 
 
 const AdminPage: GFC = ({ connector }) => {
-    if (!connector) return <></>;
-    
     const navigator = useNavigate();
     
     useEffect(() => {
-        console.log('adminpage', connector);
-        // if (!connector.getIsAdmin()) {
-        //     alert(ALERT.REQ_WRONG);
-        //     navigator(APP_ROUTE.LOGIN);
-        //     return;
-        // }
+        if (!connector.current?.getIsAdmin()) {
+            alert(ALERT.REQ_WRONG);
+            navigator(APP_ROUTE.LOGIN);
+            return;
+        }
     }, [connector]);
     
     return (

src/pages/cart-page/CartPage.tsx

@@ -14,8 +14,6 @@ import type { GFC } from "../../common/types/fc";
 
 
 const CartPage: GFC = ({ connector }) => {
-    if (!connector) return <></>;
-    
     const { cartItem, setCartItem } = useContext(CartContext);
     const [quantities, setQuantities] = useState<number[]>([]);
     const [totalPrice, setTotalPrice] = useState(0);
@@ -45,7 +43,7 @@ const CartPage: GFC = ({ connector }) => {
     };
     
     const handleOrder = () => {
-        if (!cartItem?.shop) return;
+        if (!cartItem?.shop || !connector.current) return;
     
         void (async () => {
             try {

src/pages/history-page/HistoryPage.tsx

@@ -10,11 +10,11 @@ import type { GFC } from "../../common/types/fc";
 
 
 const HistoryPage: GFC = ({ connector }) => {
-    if (!connector) return <></>;
-    
     const [model, setModel] = useState<HistoryPageModel|null>(null);
     
     useEffect(() => {
+        if (!connector.current) return;
+        
         void (async () => {
             try {
                 const response = await connector.current!.get<HistoryPageModel>('/order');

src/pages/login-page/LoginPage.tsx

@@ -11,8 +11,6 @@ import type { GFC } from "../../common/types/fc";
 
 
 const LoginPage: GFC = ({ connector }) => {
-    if (!connector) return <></>;
-    
     const [account, setAccount] = useState({
         loginId: '', password: ''
     });
@@ -36,12 +34,13 @@ const LoginPage: GFC = ({ connector }) => {
         navigate(APP_ROUTE.SIGNUP);
     };
     const handleLogin = () => {
+        if (!connector.current) return;
+        
         void (async () => {
             try {
                 const response = await connector.current!.login<LoginPagePostModel>(account);
                 if (response.role?.isAdmin) {
                     connector.current!.setIsAdmin(true);
-                    console.log('loginpage', connector);
                     navigate(APP_ROUTE.ADMIN);
                 } else {
                     connector.current!.setIsAdmin(false);

src/pages/main-page/MainPage.tsx

@@ -13,16 +13,16 @@ import type { GFC } from "../../common/types/fc";
 
 
 const MainPage: GFC = ({ connector }) => {
-    if (!connector) return <></>;
-    
     const [model, setModel] = useState<MainPageModel|null>(null);
     
     useEffect(() => {
+        if (!connector.current) return;
+        
         void (async () => {
             try {
                 const response = await connector.current!.get<MainPageModel>('/shop');
                 setModel(response as MainPageModel);
-            } catch {
+            } catch(e) {
                 alert(ALERT.REQ_FAIL);
             }
         })();

src/pages/menu-page/MenuPage.tsx

@@ -15,12 +15,12 @@ interface Props {
     setHeaderName: Dispatch<SetStateAction<string>>;
 }
 const MenuPage: GFCWithProp<Props> = ({ connector, setHeaderName }) => {
-    if (!connector) return <></>;
-    
     const [model, setModel] = useState<MenuPageModel|null>(null);
     const { pathname } = useLocation();
     
     useEffect(() => {
+        if (!connector.current) return;
+        
         void (async () => {
             try {
                 const response = await connector.current!.get<MenuPageModel>(

src/pages/order-page/success-page/SuccessPage.tsx

@@ -8,12 +8,10 @@ import type { GFC } from "../../../common/types/fc";
 
 
 const SuccessPage: GFC = ({ connector }) => {
-    if (!connector) return <></>;
-    
     const location = useLocation();
     
     useEffect(() => {
-        if (!location.search) return;
+        if (!location.search || !connector.current) return;
         
         void (async () => {
             try {

src/pages/signup-page/SignupPage.tsx

@@ -10,8 +10,6 @@ import type { GFC } from "../../common/types/fc";
 
 
 const SignupPage: GFC = ({ connector }) => {
-    if (!connector) return <></>;
-    
     const navigate = useNavigate();
     const [accountData, setAccountData] = useState({
         loginId: '',
@@ -72,6 +70,8 @@ const SignupPage: GFC = ({ connector }) => {
     };
 
     const handleSignup = () => {
+        if (!connector.current) return;
+        
         if (
             accountData.loginId !== '' &&
             accountData.name !== '' &&