Merge pull request #62 from wanted-fork-fork/feature/40-add-with-auth…

…-hoc

[Feature] 인증 여부 확인을 위한 withAuthenticated HOC 추가

src/components/atoms/Image.tsx

@@ -1,6 +1,6 @@
 import { ImgHTMLAttributes, useCallback, useState } from "react";
 
-interface Props extends ImgHTMLAttributes<any> {
+interface Props extends ImgHTMLAttributes<HTMLImageElement> {
   fallback?: string;
 }
 
@@ -13,8 +13,8 @@ function Image({ fallback, src, alt, ...props }: Props) {
   const [imgSrc, setImgSrc] = useState<string | undefined>(src);
   const onError = useCallback(() => setImgSrc(fallback), [fallback]);
 
-  // eslint-disable-next-line react/jsx-props-no-spreading
   return (
+    // eslint-disable-next-line react/jsx-props-no-spreading
     <img src={imgSrc || fallback} alt={alt} {...props} onError={onError} />
   );
 }

src/hooks/safeHydrate.hoc.tsx

@@ -0,0 +1,9 @@
+function SafeHydrateHoc({ children }) {
+  return (
+    <div suppressHydrationWarning>
+      {typeof window === "undefined" ? null : children}
+    </div>
+  );
+}
+
+export default SafeHydrateHoc;

src/hooks/withAuthentication.hoc.tsx

@@ -0,0 +1,31 @@
+import { useStores } from "@src/store/root.store";
+import { useEffect, useMemo } from "react";
+import GuestMainTemplate from "@src/templates/GuestMain.template";
+import { useRouter } from "next/router";
+
+const allowedOnlyToGuest = ["/", "/login", "/signup"];
+
+function WithAuthenticationHoc({ children }) {
+  const { userStore } = useStores();
+  const router = useRouter();
+
+  useEffect(() => userStore.isAuthenticated());
+
+  const component = useMemo(() => {
+    const unauthenticated = !userStore.authenticated;
+    const isAllowedForGuest = allowedOnlyToGuest.find(
+      (x) => x === router.pathname,
+    );
+    if (isAllowedForGuest) {
+      if (unauthenticated) return children;
+
+      router.push("/");
+      return children;
+    }
+    return unauthenticated ? <GuestMainTemplate /> : children;
+  }, [userStore.authenticated, children, router]);
+
+  return component;
+}
+
+export default WithAuthenticationHoc;

src/pages/_app.tsx

@@ -7,6 +7,8 @@ import GlobalStyle from "@src/styles/globals";
 import theme, { windowSize } from "@src/styles/theme";
 import GlobalFonts from "@src/styles/fonts";
 import "../styles/variables.less";
+import WithAuthenticationHoc from "@src/hooks/withAuthentication.hoc";
+import SafeHydrateHoc from "@src/hooks/safeHydrate.hoc";
 
 const Container = styled.div`
   ${({ theme: defaultTheme }) => css`
@@ -45,7 +47,11 @@ function MyApp({ Component, pageProps }: AppProps) {
         <GlobalFonts />
         <Container>
           <Content>
-            <Component {...pageProps} />
+            <SafeHydrateHoc>
+              <WithAuthenticationHoc>
+                <Component {...pageProps} />
+              </WithAuthenticationHoc>
+            </SafeHydrateHoc>
           </Content>
         </Container>
       </ThemeProvider>

src/pages/index.tsx

@@ -1,15 +1,7 @@
-import { useStores } from "@src/store/root.store";
-import { useMemo } from "react";
-import GuestMainTemplate from "@src/templates/GuestMain.template";
 import UserMainPage from "@src/pages/main";
 
 function MainPage() {
-  const { userStore } = useStores();
-
-  // TODO :: authenticated 확인을 HOC로 빼내기
-  const authenticated = useMemo(() => userStore.isAuthenticated(), [userStore]);
-
-  return authenticated ? <UserMainPage /> : <GuestMainTemplate />;
+  return <UserMainPage />;
 }
 
 export default MainPage;

src/store/user.store.ts

@@ -13,6 +13,10 @@ export default class UserStore {
 
   private readonly authService: AuthService;
 
+  authLoading = true;
+
+  authenticated = false;
+
   constructor(rootStore: RootStore, authService: AuthService) {
     this.authService = authService;
     this.rootStore = rootStore;
@@ -42,6 +46,7 @@ export default class UserStore {
 
   isAuthenticated() {
     const token = this.authService.accessToken;
-    return token !== null && token.length > 0;
+    this.authLoading = false;
+    this.authenticated = token !== null && token.length > 0;
   }
 }

src/templates/UserMain.template.tsx

@@ -16,7 +16,7 @@ import theme, { Color, FontSize, Padding } from "@src/styles/theme";
 import styled, { css } from "styled-components";
 import { NoScroll } from "@src/styles/common";
 
-const Container = styled.div`
+const MainContainer = styled.div`
   ${NoScroll};
   width: 100%;
   height: 100vh;
@@ -107,7 +107,7 @@ function UserMainTemplate({
     [studyList],
   );
   return (
-    <Container>
+    <MainContainer>
       <HeaderSectionsWrapper>
         <Link href="/search">
           <a>
@@ -155,7 +155,7 @@ function UserMainTemplate({
         </TextButton>
       )}
       <BottomNavigationComponent />
-    </Container>
+    </MainContainer>
   );
 }