FEAT :: 로그인 안 되어 있을 시 로그인 모달 표시

atoms/Etc/isNeedLogin.ts

@@ -0,0 +1,6 @@
+import { atom } from "recoil";
+
+export const isNeedLoginState = atom<boolean>({
+  key: "isNeedLoginState",
+  default: false,
+});

components/etc/HeaderLogin/index.tsx

@@ -2,14 +2,16 @@ import React, { useEffect, useState } from "react";
 import * as S from "./style";
 import { useRouter } from "next/router";
 import { getLogoutMutation, getRefreshTokenMutation } from "@/utils/apis/auth";
-import { useMutation, useQuery } from "react-query";
-import { getMyInfo, getMyInfoQuery } from "@/utils/apis/user";
+import { getMyInfoQuery } from "@/utils/apis/user";
 import { instance } from "@/utils/instance";
 import { AxiosError, InternalAxiosRequestConfig } from "axios";
+import { useSetRecoilState } from "recoil";
+import { isNeedLoginState } from "@/atoms/Etc/isNeedLogin";
 
 function HeaderLogin() {
-  const { pathname } = useRouter();
+  const { pathname, push } = useRouter();
   const [mount, setMount] = useState(false);
+  const setIsNeedLogin = useSetRecoilState(isNeedLoginState);
 
   const getRefreshTokenFunc = getRefreshTokenMutation();
 
@@ -29,7 +31,7 @@ function HeaderLogin() {
           getRefreshTokenFunc.data?.accessToken,
         );
       }
-      return getRefreshTokenFunc.data?.accessToken;
+      // return getRefreshTokenFunc.data?.accessToken;
     } catch (e) {
       localStorage.removeItem("accessToken");
       localStorage.removeItem("refreshToken");
@@ -39,15 +41,17 @@ function HeaderLogin() {
     (res) => res,
     (err: AxiosError): Promise<AxiosError> => {
       if (!localStorage.refreshToken) {
+        setIsNeedLogin(true);
         return Promise.reject(err);
       }
       const { config, response } = err;
       const originalRequest = config as InternalAxiosRequestConfig;
       if (response?.status !== 401) {
+        setIsNeedLogin(true);
         return Promise.reject(err);
       }
 
-      const accessToken = getRefreshToken();
+      getRefreshToken();
 
       // if (accessToken) {
       //   originalRequest.headers.token = accessToken;

components/etc/Layout/index.tsx

@@ -1,14 +1,17 @@
 import { isLoadingState } from "@/atoms/Etc/isLoading";
 import React from "react";
-import { useRecoilState } from "recoil";
+import { useRecoilValue } from "recoil";
 import Header from "../Header";
 import Loading from "../Loading";
 import { ToastContainer } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
+import { isNeedLoginState } from "@/atoms/Etc/isNeedLogin";
+import NeedLoginModal from "../NeedLoginModal";
 
 function Layout() {
-  const [isLoading, setIsLoading] = useRecoilState(isLoadingState);
-  console.log(isLoading);
+  const isLoading = useRecoilValue(isLoadingState);
+  const isNeedLogin = useRecoilValue(isNeedLoginState);
+  console.log(isNeedLogin);
   return (
     <>
       <Header />
@@ -25,6 +28,7 @@ function Layout() {
         theme="light"
       />
       {isLoading && <Loading />}
+      {isNeedLogin && <NeedLoginModal />}
     </>
   );
 }

components/etc/NeedLoginModal/index.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import * as S from "./style";
+import Image from "next/image";
+import { FcGoogle } from "react-icons/fc";
+
+function NeedLoginModal() {
+  return (
+    <S.NeedLoginModalBackground>
+      <S.NeedLoginModal>
+        <S.ModalHeader>
+          <Image
+            src={"/images/Logo.svg"}
+            width={40}
+            height={40}
+            alt="레시피GPT 로고"
+          />
+          <S.HeaderTitle>Recipe-GPT</S.HeaderTitle>
+        </S.ModalHeader>
+        <S.NeedLoginText>로그인이 필요한 서비스입니다.</S.NeedLoginText>
+        <S.LoginButton href="https://recipe-api.bssm.kro.kr/oauth2/authorization/google">
+          <FcGoogle size={30} />
+          <S.LoginButtonText>구글로 로그인하기</S.LoginButtonText>
+        </S.LoginButton>
+      </S.NeedLoginModal>
+    </S.NeedLoginModalBackground>
+  );
+}
+
+export default NeedLoginModal;

components/etc/NeedLoginModal/style.ts

@@ -0,0 +1,57 @@
+import Link from "next/link";
+import styled from "styled-components";
+
+export const NeedLoginModalBackground = styled.div`
+  min-width: 100%;
+  min-height: 100%;
+  background-color: rgba(0, 0, 0, 0.3);
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 100000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+export const NeedLoginModal = styled.div`
+  background-color: white;
+  border-radius: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem 2rem;
+  gap: 1.5rem;
+`;
+
+export const ModalHeader = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+`;
+
+export const HeaderTitle = styled.h1`
+  font-size: 1.5rem;
+  margin: 0;
+`;
+
+export const NeedLoginText = styled.p`
+  font-size: 1.375rem;
+`;
+
+export const LoginButton = styled(Link)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: white;
+  padding: 0.5rem;
+  gap: 1rem;
+  border-radius: 0.5rem;
+  filter: drop-shadow(#88888888 0 0.2rem 0.2rem);
+`;
+
+export const LoginButtonText = styled.span`
+  font-size: 1.125rem;
+`;

utils/apis/user.ts

@@ -8,7 +8,7 @@ export const getMyInfo = async () => {
 
 export const getMyInfoQuery = (mount: boolean) => {
   return useQuery("myInfo", getMyInfo, {
-    enabled: mount,
+    enabled: mount && !!localStorage.accessToken,
     staleTime: Infinity,
     retry: false,
   });