헤더 유저검증 로직 수정 (#108)

* fix: box이름을 headerbox로 변경

* feat: TILOG_AUTH환경변수 추가

* feat: getme 커스텀훅 작성

* fix: 이벤트리스너로 리팩터링 및 로직 분리

* fix: 로그아웃 로직 수정

* feat: callback page 작성

* fix: 헤더 디자인 수정

* fix: 리덕스 삭제

* fix: 리덕스 삭제

* fix: code smell

Author: MINJE-98

constants/environment/index.ts

@@ -5,3 +5,7 @@ export const TILOG_API = !process.env.TILOG_API
 export const TILOG_INFO_COOKIE = !process.env.TILOG_INFO_COOKIE
   ? "TILog_Info"
   : process.env.TILOG_INFO_COOKIE;
+
+export const TILOG_AUTH = !process.env.TILOG_AUTH
+  ? "http://localhost/auth/github/login"
+  : process.env.TILOG_AUTH;

package.json

@@ -9,26 +9,20 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@reduxjs/toolkit": "^1.8.1",
     "@til-log.lab/tilog-api": "^0.1.9",
     "@tiptap/react": "^2.0.0-beta.108",
     "@tiptap/starter-kit": "^2.0.0-beta.183",
     "@types/react-responsive": "^8.0.5",
     "axios": "^0.26.1",
     "date-fns": "^2.28.0",
     "next": "12.1.4",
-    "next-redux-cookie-wrapper": "^2.1.2",
-    "next-redux-wrapper": "^7.0.5",
-    "next-transpile-modules": "^9.0.0",
     "react": "18.0.0",
     "react-dom": "18.0.0",
     "react-hook-form": "^7.29.0",
     "react-hot-toast": "^2.2.0",
     "react-icons": "^4.3.1",
     "react-query": "^3.38.0",
-    "react-redux": "^8.0.2",
-    "react-responsive": "^9.0.0-beta.6",
-    "redux": "^4.2.0"
+    "react-responsive": "^9.0.0-beta.6"
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.2",

src/components/box/HeaderBox.tsx

@@ -0,0 +1,14 @@
+import { ReactNode } from "react";
+
+interface NavBoxProps {
+  children: ReactNode;
+}
+
+const HeaderBox = ({ children }: NavBoxProps) => (
+  <header className="border-b border-neutral-250">
+    <div className="flex m-auto max-w-[1280px] h-20 items-center px-5">
+      {children}
+    </div>
+  </header>
+);
+export default HeaderBox;

src/components/box/NavBox.tsx

@@ -16,7 +16,18 @@ const LinkTo = ({
   ...anchorProps
 }: PropsWithChildren<PropTypes>) => {
   return (
-    <Link {...{ href, as, replace, scroll, shallow, prefetch, locale }}>
+    <Link
+      {...{
+        ...anchorProps,
+        href,
+        as,
+        replace,
+        scroll,
+        shallow,
+        prefetch,
+        locale,
+      }}
+    >
       <a {...anchorProps}>{children}</a>
     </Link>
   );

src/components/molecules/LinkTo.tsx

@@ -1,11 +1,16 @@
 import LinkTo from "@Components/molecules/LinkTo";
 
-const Logo = () => {
+interface LogoProps {
+  className: string;
+}
+
+const Logo = ({ className }: LogoProps) => {
   return (
-    <LinkTo
-      href="/"
-      className="w-20 h-10 rounded-tl-full rounded-tr-full bg-neutral-800 dark:bg-neutral-300"
-    />
+    <LinkTo href="/">
+      <div
+        className={`${className} w-20 h-10 rounded-tl-full rounded-tr-full `}
+      />
+    </LinkTo>
   );
 };
 export default Logo;

src/components/molecules/Logo.tsx

@@ -1,49 +1,16 @@
 import React from "react";
 
-import toast from "react-hot-toast";
-import { useDispatch } from "react-redux";
-
-import api from "@Library/api";
-import ExceptionInterface from "@Library/api/exception/interface";
-import { userInfoSlice } from "@Redux/userInfo";
-import TechIcons from "@TechIcons/TechIcons";
+import useLogin from "@Components/molecules/button/hooks/useLogin";
+import { TILOG_AUTH } from "@Constants/environment";
 
 const LoginButton = () => {
-  const dispatch = useDispatch();
-
+  useLogin();
   const handleLogin = () => {
-    const loginWindow = window.open(
-      `${process.env.TILOG_API}/auth/github/login`
+    return window.open(
+      TILOG_AUTH,
+      "",
+      "toolbar=no, menubar=no, width=600, height=700"
     );
-    if (!loginWindow) {
-      return toast.error("window open error");
-    }
-    const loginCheck = setInterval(async () => {
-      if (loginWindow.closed) {
-        clearInterval(loginCheck);
-      }
-      try {
-        const { data } = await api.usersService.getMe();
-
-        if (data) {
-          const userInfo = {
-            ...data,
-            isLogin: true,
-            language: "ko",
-          };
-          dispatch(userInfoSlice.actions.changeUserInfo(userInfo));
-
-          loginWindow.close();
-        }
-      } catch (e) {
-        const error = e as ExceptionInterface;
-        if (error.statusCode !== 401) {
-          loginWindow.close();
-          clearInterval(loginCheck);
-          // TODO: language error handling..
-        }
-      }
-    }, 1000);
   };
   return (
     <button
@@ -53,8 +20,8 @@ const LoginButton = () => {
     >
       <div className="flex flex-row items-center justify-center p-3 ">
         Login With Github
-        <div className="ml-3 text-2xl">
-          <TechIcons categoryName="Github" />
+        <div className="m-auto text-2xl font-eng-sub-font-2">
+          {/* <TechIcons categoryName="Github" /> */}
         </div>
       </div>
     </button>

src/components/molecules/button/LoginButton.tsx

@@ -0,0 +1,21 @@
+import { useEffect } from "react";
+
+import useGetMe from "@Hooks/react-query/useGetMe";
+
+const useLogin = () => {
+  const { refetch } = useGetMe();
+  useEffect(() => {
+    window.addEventListener(
+      "message",
+      async (event) => {
+        if (event.origin !== window.location.origin) return;
+        if (event.data === "login") {
+          refetch();
+        }
+      },
+      false
+    );
+  }, [refetch]);
+};
+
+export default useLogin;

src/components/molecules/button/hooks/useLogin.ts

@@ -1,15 +1,13 @@
-import { useDispatch } from "react-redux";
-
+import useGetMe from "@Hooks/react-query/useGetMe";
 import api from "@Library/api";
 import httpClient from "@Library/api/httpClient";
-import { userInfoSlice } from "@Redux/userInfo";
 
 const useLogout = () => {
-  const dispatch = useDispatch();
-  return async () => {
-    dispatch(userInfoSlice.actions.resetUserInfo());
+  const { refetch } = useGetMe();
+  return () => {
+    api.authService.deleteRefreshToken();
+    refetch();
     httpClient.http.defaults.headers.common.Authorization = "";
-    await api.authService.deleteRefreshToken();
   };
 };
 

src/components/molecules/button/hooks/useLogout.ts

@@ -1,32 +1,26 @@
 import Image from "next/image";
 
-import { FaUserCircle } from "react-icons/fa";
-import { useSelector } from "react-redux";
-
-import { userInfoSelector } from "@Redux/userInfo";
+import useGetMe from "@Hooks/react-query/useGetMe";
 
 interface UserImageProps {
-  onClick: () => void;
+  width?: string;
+  height?: string;
 }
 
-const UserImage = ({ onClick }: UserImageProps) => {
-  const { avatar } = useSelector(userInfoSelector);
-  if (!avatar) {
-    return (
-      <FaUserCircle
-        onClick={onClick}
-        className="w-[50px] mr-3 rounded-full h-[50px] dark:text-neutral-300 text-neutral-800 cursor-pointer"
-      />
-    );
+const UserImage = ({ width = "50", height = "50" }: UserImageProps) => {
+  const { data } = useGetMe();
+
+  if (!data || !data.data.avatar) {
+    return null;
   }
+
   return (
     <Image
-      onClick={onClick}
       className="rounded-full cursor-pointer focus:outline-none focus:ring focus:ring-signature-color"
-      width="50"
-      height="50"
+      width={width}
+      height={height}
       alt="avatar"
-      src={avatar}
+      src={data.data.avatar}
     />
   );
 };