From e9ccd60c43dcc27fcabea7646b0ce2641ba803f8 Mon Sep 17 00:00:00 2001 From: aowjarkwk Date: Sun, 14 Jan 2024 19:58:11 +0900 Subject: [PATCH] =?UTF-8?q?Refactor:=20React=20Query,=20NextAuth=20?= =?UTF-8?q?=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/card/Card.tsx | 19 +- components/cardList/CardList.tsx | 9 +- components/folderAddBar/FolderAddBar.tsx | 45 ++++- components/folderTabBar/FolderTabBar.tsx | 27 ++- components/folderToolBar/FolderToolBar.tsx | 45 ++++- components/globalNav/GlobalNav.tsx | 17 +- components/hocs/WithAuth.tsx | 19 ++ components/inputField/InputField.tsx | 10 +- components/kebabMenu/KebabMenu.tsx | 65 ++++++- components/modal/Modal.tsx | 16 +- .../modalSelectButton/ModalSelectButton.tsx | 9 +- hooks/useAsync.ts | 30 --- hooks/useGetFolders.ts | 18 -- hooks/useGetLinks.ts | 32 ---- hooks/useGetSharedFolder.ts | 41 ---- layouts/authLayout/AuthLayout.tsx | 9 +- layouts/globalLayout/GlobalLayout.tsx | 15 +- next-auth.d.ts | 15 ++ package-lock.json | 179 +++++++++++++++++- package.json | 3 + pages/_app.tsx | 38 ++-- pages/api/auth/[...nextauth].ts | 51 +++++ pages/folder/[[...folderId]].tsx | 38 ++-- pages/shared/[folderId].tsx | 24 ++- pages/user/signin.tsx | 18 +- pages/user/signup.tsx | 39 ++-- types/type.ts | 23 +-- utils/AuthProvider.tsx | 59 ------ utils/api.ts | 136 +++++++++++++ utils/axiosInstance.ts | 24 --- utils/fetchSharedFolder.ts | 50 ----- utils/getElapsedTime.ts | 8 +- 32 files changed, 718 insertions(+), 413 deletions(-) create mode 100644 components/hocs/WithAuth.tsx delete mode 100644 hooks/useAsync.ts delete mode 100644 hooks/useGetFolders.ts delete mode 100644 hooks/useGetLinks.ts delete mode 100644 hooks/useGetSharedFolder.ts create mode 100644 next-auth.d.ts create mode 100644 pages/api/auth/[...nextauth].ts delete mode 100644 utils/AuthProvider.tsx create mode 100644 utils/api.ts delete mode 100644 utils/axiosInstance.ts delete mode 100644 utils/fetchSharedFolder.ts diff --git a/components/card/Card.tsx b/components/card/Card.tsx index 36882bcd5..23c38ac5b 100644 --- a/components/card/Card.tsx +++ b/components/card/Card.tsx @@ -1,19 +1,23 @@ import * as S from "@/components/card/Card.style"; import KebabMenu from "@/components/kebabMenu/KebabMenu"; import kebabImageSrc from "@/images/kebab.png"; -import { Folder, MappedLink } from "@/types/type"; +import { Folder, Link as LinkProp } from "@/types/type"; +import getElapsedTime from "@/utils/getElapsedTime"; import Image from "next/image"; import Link from "next/link"; import { useEffect, useRef, useState } from "react"; interface CardProps { - link: MappedLink; + link: LinkProp; folders?: Folder[]; isShared: boolean; + folderId: string; } -const Card = ({ link, folders, isShared }: CardProps) => { - const { elapsedTime, createdAt, url, title, imageSource } = link; +const Card = ({ link, folders, isShared, folderId }: CardProps) => { + const { created_at, url, title, image_source: imageSource } = link; + + const { fromNow, formattedDate } = getElapsedTime(created_at); const [isKebabOpen, setIsKebabOpen] = useState(false); const kebabButtonRef = useRef(null); @@ -41,7 +45,7 @@ const Card = ({ link, folders, isShared }: CardProps) => { - {elapsedTime} + {fromNow} {!isShared && ( <> setIsKebabOpen((prev) => !prev)} ref={kebabButtonRef}> @@ -49,7 +53,8 @@ const Card = ({ link, folders, isShared }: CardProps) => { { {title ?? "제목 없는 링크"} - {createdAt} + {formattedDate} ); diff --git a/components/cardList/CardList.tsx b/components/cardList/CardList.tsx index ef046f862..da88a5d1e 100644 --- a/components/cardList/CardList.tsx +++ b/components/cardList/CardList.tsx @@ -1,19 +1,20 @@ import Card from "@/components/card/Card"; import * as S from "@/components/cardList/CardList.style"; -import { Folder, MappedLink } from "@/types/type"; +import { Folder, Link } from "@/types/type"; interface CardListProps { - links: MappedLink[]; + links: Link[]; folders?: Folder[]; isShared: boolean; + folderId: string; } -const CardList = ({ links, folders, isShared }: CardListProps) => { +const CardList = ({ links, folders, isShared, folderId }: CardListProps) => { if (!links?.length) return 저장된 링크가 없습니다.; return ( {links?.map((link) => ( - + ))} ); diff --git a/components/folderAddBar/FolderAddBar.tsx b/components/folderAddBar/FolderAddBar.tsx index 637e849f1..091eb67d3 100644 --- a/components/folderAddBar/FolderAddBar.tsx +++ b/components/folderAddBar/FolderAddBar.tsx @@ -4,6 +4,8 @@ import ModalSelectButton from "@/components/modalSelectButton/ModalSelectButton" import { MODALS_ID } from "@/constants/constants"; import linkIcon from "@/images/link.png"; import { Folder } from "@/types/type"; +import { postLinks } from "@/utils/api"; +import { useMutation, useQueryClient } from "@tanstack/react-query"; import Image from "next/image"; import { ChangeEvent, FormEvent, useState } from "react"; @@ -13,9 +15,8 @@ interface FolderAddBarProps { isHidden: boolean; } -// [ ]: 링크 개수 받아오기 - const FolderAddBar = ({ folders, isSticky, isHidden }: FolderAddBarProps) => { + const queryClient = useQueryClient(); const [addLinkValue, setAddLinkValue] = useState(""); const [modalComponent, setModalComponent] = useState(""); const handleInputChange = (e: ChangeEvent) => setAddLinkValue(e.target.value); @@ -25,6 +26,38 @@ const FolderAddBar = ({ folders, isSticky, isHidden }: FolderAddBarProps) => { setModalComponent(MODALS_ID.addLinkToFolder); }; + const [selectedFolders, setSelectedFolders] = useState<{ [key: number]: boolean }>({}); + + const handleSelectFolder = (folderId: number) => { + setSelectedFolders((prevSelectedFolders) => { + const newSelectedFolders = { ...prevSelectedFolders }; + if (newSelectedFolders[folderId]) { + delete newSelectedFolders[folderId]; + } else { + newSelectedFolders[folderId] = true; + } + return newSelectedFolders; + }); + }; + const addLink = () => { + createFolderMutation.mutate({ addLinkValue, selectedFolderIds: Object.keys(selectedFolders).map(String) }); + }; + const createFolderMutation = useMutation({ + mutationFn: ({ addLinkValue, selectedFolderIds }: { addLinkValue: string; selectedFolderIds: string[] }) => + postLinks(addLinkValue, selectedFolderIds), + onSuccess: () => { + Object.keys(selectedFolders) + .map(String) + .forEach((folderId) => { + queryClient.invalidateQueries({ queryKey: ["links", folderId] }); + queryClient.invalidateQueries({ queryKey: ["folders"] }); + }); + setModalComponent(""); + }, + onError: (error) => { + console.error(error); + }, + }); return ( <> @@ -41,11 +74,15 @@ const FolderAddBar = ({ folders, isSticky, isHidden }: FolderAddBarProps) => { {folders?.map((folder) => (
  • - + handleSelectFolder(folder.id)} + />
    • ))}     - 추가하기 + 추가하기 )} diff --git a/components/folderTabBar/FolderTabBar.tsx b/components/folderTabBar/FolderTabBar.tsx index 6a0771d72..1bc97b935 100644 --- a/components/folderTabBar/FolderTabBar.tsx +++ b/components/folderTabBar/FolderTabBar.tsx @@ -3,6 +3,8 @@ import InputField from "@/components/inputField/InputField"; import Modal from "@/components/modal/Modal"; import { ALL_LINKS_ID, MODALS_ID } from "@/constants/constants"; import { Folder } from "@/types/type"; +import { postFolder } from "@/utils/api"; +import { useMutation, useQueryClient } from "@tanstack/react-query"; import { useState } from "react"; interface FolderTabBarProps { @@ -12,9 +14,26 @@ interface FolderTabBarProps { const FolderTabBar = ({ folders, selectedFolderId }: FolderTabBarProps) => { const [modalComponent, setModalComponent] = useState(""); + const [folderName, setFolderName] = useState(""); + const queryClient = useQueryClient(); + const handleFolderAdd = () => { setModalComponent(MODALS_ID.addFolder); }; + const createFolder = () => { + createFolderMutation.mutate(folderName); + }; + const createFolderMutation = useMutation({ + mutationFn: (folderName: string) => postFolder(folderName), + onSuccess: () => { + queryClient.invalidateQueries({ queryKey: ["folders"] }); + setModalComponent(""); + setFolderName(""); + }, + onError: (error) => { + console.error(error); + }, + }); return ( <> @@ -25,8 +44,8 @@ const FolderTabBar = ({ folders, selectedFolderId }: FolderTabBarProps) => { 전체 - {folders.map((folder, i) => ( -
  • + {folders?.map((folder) => ( +
  • { {modalComponent === MODALS_ID.addFolder && ( setModalComponent("")}> 폴더 추가 - - 추가하기 + + 추가하기 )} diff --git a/components/folderToolBar/FolderToolBar.tsx b/components/folderToolBar/FolderToolBar.tsx index 36d0f2eec..cb2bf08d8 100644 --- a/components/folderToolBar/FolderToolBar.tsx +++ b/components/folderToolBar/FolderToolBar.tsx @@ -3,7 +3,10 @@ import InputField from "@/components/inputField/InputField"; import Modal from "@/components/modal/Modal"; import ShareButtons from "@/components/shareButtons/ShareButtons"; import { FOLDER_MANAGE_MENUS, MODALS_ID } from "@/constants/constants"; +import { deleteFolder, putFolder } from "@/utils/api"; +import { useMutation, useQueryClient } from "@tanstack/react-query"; import Image, { StaticImageData } from "next/image"; +import { useRouter } from "next/router"; import { MouseEvent, useState } from "react"; interface FolderManageMenusProps { @@ -14,16 +17,50 @@ interface FolderManageMenusProps { interface FolderToolbarProps { folderName: string; + folderId: string; } -const FolderToolbar = ({ folderName }: FolderToolbarProps) => { +const FolderToolbar = ({ folderName, folderId }: FolderToolbarProps) => { + const queryClient = useQueryClient(); const [modalComponent, setModalComponent] = useState(""); + const [newFolderName, setNewFolderName] = useState(folderName); + const router = useRouter(); const handleMenuClick = (e: MouseEvent, menu: FolderManageMenusProps) => { e.stopPropagation(); setModalComponent(menu.modalId); }; + const handleChangeFolder = () => { + changeFolderMutation.mutate({ folderId, newFolderName }); + }; + const changeFolderMutation = useMutation({ + mutationFn: ({ folderId, newFolderName }: { folderId: string; newFolderName: string }) => + putFolder(folderId, newFolderName), + onSuccess: () => { + queryClient.invalidateQueries({ queryKey: ["folders"] }); + setModalComponent(""); + }, + onError: (error) => { + console.error(error); + }, + }); + + const handleDeleteFolder = () => { + deleteFolderMutation.mutate(folderId); + }; + const deleteFolderMutation = useMutation({ + mutationFn: (folderId: string) => deleteFolder(folderId), + onSuccess: () => { + queryClient.invalidateQueries({ queryKey: ["folders"] }); + setModalComponent(""); + router.replace("/folder"); + }, + onError: (error) => { + console.error(error); + }, + }); + return ( <> @@ -50,15 +87,15 @@ const FolderToolbar = ({ folderName }: FolderToolbarProps) => { {modalComponent === MODALS_ID.rename && ( setModalComponent("")}> 폴더 이름 변경 - - 변경하기 + + 변경하기 )} {modalComponent === MODALS_ID.delete && ( setModalComponent("")}> 폴더 삭제 {folderName} - 삭제하기 + 삭제하기 )} diff --git a/components/globalNav/GlobalNav.tsx b/components/globalNav/GlobalNav.tsx index a0cb3b1d8..87d548d44 100644 --- a/components/globalNav/GlobalNav.tsx +++ b/components/globalNav/GlobalNav.tsx @@ -1,26 +1,25 @@ import * as S from "@/components/globalNav/GlobalNav.style"; -import { useUser } from "@/utils/AuthProvider"; +import { signOut, useSession } from "next-auth/react"; import Link from "next/link"; import { useRouter } from "next/router"; const GlobalNav = () => { - const { user } = useUser(); - const { email = "", image_source: profileImageSource = "" } = user || {}; - const { pathname } = useRouter(); + const { data: session, status } = useSession(); + const { pathname } = useRouter(); return ( - {user ? ( - + {status === "authenticated" ? ( + ) : ( 로그인 diff --git a/components/hocs/WithAuth.tsx b/components/hocs/WithAuth.tsx new file mode 100644 index 000000000..969feb68d --- /dev/null +++ b/components/hocs/WithAuth.tsx @@ -0,0 +1,19 @@ +import { useSession } from "next-auth/react"; +import { useRouter } from "next/router"; +import { ComponentType, useEffect } from "react"; + +const WithAuth =

    (Component: ComponentType

    ) => { + return function AuthenticatedComponent(props: P) { + const { data: session, status } = useSession(); + const router = useRouter(); + + useEffect(() => { + if (status === "loading") return; + if (!session) router.push("/user/signin"); + }, [session, status, router]); + + return ; + }; +}; + +export default WithAuth; diff --git a/components/inputField/InputField.tsx b/components/inputField/InputField.tsx index 07487711e..43ec61cfa 100644 --- a/components/inputField/InputField.tsx +++ b/components/inputField/InputField.tsx @@ -1,13 +1,11 @@ import * as S from "@/components/inputField/InputField.style"; -import { useState } from "react"; interface InputFieldProps { - modalTarget: string; + value: string; + onChange: (value: string) => void; } -const InputField = ({ modalTarget }: InputFieldProps) => { - const [value, setValue] = useState(modalTarget); - return setValue(e.target.value)} placeholder="내용 입력" />; +const InputField = ({ value, onChange }: InputFieldProps) => { + return onChange(e.target.value)} placeholder="내용 입력" />; }; - export default InputField; diff --git a/components/kebabMenu/KebabMenu.tsx b/components/kebabMenu/KebabMenu.tsx index a28dead8c..350aff194 100644 --- a/components/kebabMenu/KebabMenu.tsx +++ b/components/kebabMenu/KebabMenu.tsx @@ -3,12 +3,15 @@ import Modal from "@/components/modal/Modal"; import ModalSelectButton from "@/components/modalSelectButton/ModalSelectButton"; import { KEBAB_MENUS, MODALS_ID } from "@/constants/constants"; import { Folder } from "@/types/type"; +import { deleteLink, postLinks } from "@/utils/api"; +import { useMutation, useQueryClient } from "@tanstack/react-query"; import { MouseEvent, useState } from "react"; interface KebabMenusProps { linkUrl: string; isKebabOpen: boolean; - folderId: number; + linkId: number; + folderId: string; folders?: Folder[]; setIsKebabOpen: (isOpen: boolean) => void; } @@ -18,9 +21,8 @@ interface KebabProps { modalId: string; } -// [ ]: 링크 개수 받아오기 - -const KebabMenu = ({ linkUrl, isKebabOpen, setIsKebabOpen, folderId, folders }: KebabMenusProps) => { +const KebabMenu = ({ linkUrl, isKebabOpen, setIsKebabOpen, linkId, folders, folderId }: KebabMenusProps) => { + const queryClient = useQueryClient(); const [modalComponent, setModalComponent] = useState(""); const handleMenuClick = (e: MouseEvent, kebab: KebabProps) => { @@ -30,6 +32,51 @@ const KebabMenu = ({ linkUrl, isKebabOpen, setIsKebabOpen, folderId, folders }: setIsKebabOpen(false); }; + const handleDeleteLink = () => { + deleteLinkMutation.mutate(linkId.toString()); + }; + const deleteLinkMutation = useMutation({ + mutationFn: (linkId: string) => deleteLink(linkId), + onSuccess: () => { + queryClient.invalidateQueries({ queryKey: ["links", folderId] }); + setModalComponent(""); + }, + onError: (error) => { + console.error(error); + }, + }); + + const [selectedFolders, setSelectedFolders] = useState<{ [key: number]: boolean }>({}); + + const handleSelectFolder = (folderId: number) => { + setSelectedFolders((prevSelectedFolders) => { + const newSelectedFolders = { ...prevSelectedFolders }; + if (newSelectedFolders[folderId]) { + delete newSelectedFolders[folderId]; + } else { + newSelectedFolders[folderId] = true; + } + return newSelectedFolders; + }); + }; + const addLink = () => { + addLinkMutation.mutate({ linkUrl, selectedFolderIds: Object.keys(selectedFolders).map(String) }); + }; + const addLinkMutation = useMutation({ + mutationFn: ({ linkUrl, selectedFolderIds }: { linkUrl: string; selectedFolderIds: string[] }) => + postLinks(linkUrl, selectedFolderIds), + onSuccess: () => { + Object.keys(selectedFolders).forEach((folderId) => { + queryClient.invalidateQueries({ queryKey: ["links", folderId] }); + queryClient.invalidateQueries({ queryKey: ["folders"] }); + }); + setModalComponent(""); + }, + onError: (error) => { + console.error(error); + }, + }); + return ( <> @@ -43,7 +90,7 @@ const KebabMenu = ({ linkUrl, isKebabOpen, setIsKebabOpen, folderId, folders }: setModalComponent("")}> 링크 삭제 {linkUrl} - 삭제하기 + 삭제하기 )} {modalComponent === MODALS_ID.addLinkToFolder && ( @@ -53,11 +100,15 @@ const KebabMenu = ({ linkUrl, isKebabOpen, setIsKebabOpen, folderId, folders }: {folders?.map((folder) => (

  • - + handleSelectFolder(+folder.id)} + />
    • ))} - 추가하기 + 추가하기 )} diff --git a/components/modal/Modal.tsx b/components/modal/Modal.tsx index 5d6eec7c4..aed065516 100644 --- a/components/modal/Modal.tsx +++ b/components/modal/Modal.tsx @@ -26,11 +26,19 @@ const Title = ({ children }: { children: ReactNode }) => { return {children}; }; -const BlueButton = ({ children }: { children: ReactNode }) => { - return {children}; +const BlueButton = ({ children, handleClick }: { children: ReactNode; handleClick: () => void }) => { + return ( + + {children} + + ); }; -const RedButton = ({ children }: { children: ReactNode }) => { - return {children}; +const RedButton = ({ children, handleClick }: { children: ReactNode; handleClick: () => void }) => { + return ( + + {children} + + ); }; const TargetName = ({ children }: { children: ReactNode }) => { diff --git a/components/modalSelectButton/ModalSelectButton.tsx b/components/modalSelectButton/ModalSelectButton.tsx index a97b47afc..70acf81f6 100644 --- a/components/modalSelectButton/ModalSelectButton.tsx +++ b/components/modalSelectButton/ModalSelectButton.tsx @@ -6,12 +6,17 @@ import { useState } from "react"; interface ModalSelectButtonProps { folderName: string; linkCount: number; + onClick: () => void; } -const ModalSelectButton = ({ folderName, linkCount }: ModalSelectButtonProps) => { +const ModalSelectButton = ({ folderName, linkCount, onClick }: ModalSelectButtonProps) => { const [isSelect, setIsSelect] = useState(false); + const handleClick = () => { + onClick(); + setIsSelect((prev) => !prev); + }; return ( - setIsSelect((prev) => !prev)}> + {folderName} {linkCount}개 링크 {`${folderName}폴더 diff --git a/hooks/useAsync.ts b/hooks/useAsync.ts deleted file mode 100644 index 0d9f26662..000000000 --- a/hooks/useAsync.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { useCallback, useState } from "react"; - -interface UseAsyncReturn { - execute: () => void; - loading: boolean; - error: Error | null; - data: T | null; -} - -const useAsync = (asyncFunction: () => Promise<{ data: T }>): UseAsyncReturn => { - const [loading, setLoading] = useState(false); - const [error, setError] = useState(null); - const [data, setData] = useState(null); - const execute = useCallback(async () => { - setLoading(true); - try { - const response = await asyncFunction(); - setData(response?.data); - return response; - } catch (error) { - if (error instanceof Error) setError(error); - } finally { - setLoading(false); - } - }, [asyncFunction]); - - return { execute, loading, error, data }; -}; - -export default useAsync; diff --git a/hooks/useGetFolders.ts b/hooks/useGetFolders.ts deleted file mode 100644 index 28ccbdb7d..000000000 --- a/hooks/useGetFolders.ts +++ /dev/null @@ -1,18 +0,0 @@ -import useAsync from "@/hooks/useAsync"; -import { Folders } from "@/types/type"; -import { axiosInstance } from "@/utils/axiosInstance"; -import { useCallback, useEffect } from "react"; - -export const useGetFolders = () => { - const getFolders = useCallback(() => axiosInstance.get("folders"), []); - const { execute, loading, error, data } = useAsync(getFolders); - - const folders = data?.data?.folder; - const sortedFolders = folders ? [...folders].sort((a, b) => a.id - b.id) : []; - - useEffect(() => { - execute(); - }, [execute]); - - return { loading, error, data: sortedFolders }; -}; diff --git a/hooks/useGetLinks.ts b/hooks/useGetLinks.ts deleted file mode 100644 index 2dc73d1ef..000000000 --- a/hooks/useGetLinks.ts +++ /dev/null @@ -1,32 +0,0 @@ -import { ALL_LINKS_ID } from "@/constants/constants"; -import useAsync from "@/hooks/useAsync"; -import { Link, Links } from "@/types/type"; -import { axiosInstance } from "@/utils/axiosInstance"; -import mapLinksData from "@/utils/mapLinksData"; -import { useCallback, useEffect } from "react"; - -export const useGetLinks = (folderId: string) => { - const queryString = folderId === ALL_LINKS_ID ? "links" : `links?folderId=${folderId}`; - const getLinks = useCallback(() => axiosInstance.get<{ data: Links }>(queryString), [queryString]); - - const { execute, loading, error, data } = useAsync<{ data: Links }>(getLinks); - - const mapDataFormat = ({ id, created_at, url, image_source, title, description }: Link) => ({ - id, - created_at, - image_source, - url, - title, - description, - }); - - const linksData = data?.data?.folder?.map(mapDataFormat).map(mapLinksData); - - useEffect(() => { - if (folderId) { - execute(); - } - }, [execute, folderId]); - - return { execute, loading, error, data: linksData }; -}; diff --git a/hooks/useGetSharedFolder.ts b/hooks/useGetSharedFolder.ts deleted file mode 100644 index f8dfd4247..000000000 --- a/hooks/useGetSharedFolder.ts +++ /dev/null @@ -1,41 +0,0 @@ -import useAsync from "@/hooks/useAsync"; -import { Link } from "@/types/type"; -import fetchSharedFolder from "@/utils/fetchSharedFolder"; -import mapLinksData from "@/utils/mapLinksData"; -import { useCallback, useEffect } from "react"; - -interface SharedFolder { - folder: { - id: number; - name: string; - }; - owner: { - userId: number; - name: string; - profileImageSource: string; - }; - links: Link[]; -} - -const useGetSharedFolder = (folderId: string) => { - const getSharedFolder = useCallback(() => fetchSharedFolder(folderId), [folderId]); - - const mapDataFormat = ({ id, created_at, url, image_source, title, description }: Link) => ({ - id, - created_at, - image_source, - url, - title, - description, - }); - - const { execute, loading, error, data } = useAsync(getSharedFolder); - const linksData = data?.links?.map(mapDataFormat).map(mapLinksData); - useEffect(() => { - if (folderId) execute(); - }, [execute, folderId]); - - return { loading, error, data: { ...data, links: linksData } }; -}; - -export default useGetSharedFolder; diff --git a/layouts/authLayout/AuthLayout.tsx b/layouts/authLayout/AuthLayout.tsx index 459facaa6..6782ae306 100644 --- a/layouts/authLayout/AuthLayout.tsx +++ b/layouts/authLayout/AuthLayout.tsx @@ -1,9 +1,7 @@ import googleIcon from "@/images/auth/google-login-icon.png"; import kakaoIcon from "@/images/auth/kakao-login-icon.png"; import * as S from "@/layouts/authLayout/AuthLayout.style"; -import { useUser } from "@/utils/AuthProvider"; -import { useRouter } from "next/router"; -import { ReactNode, useEffect } from "react"; +import { ReactNode } from "react"; interface AuthLayoutProps { children: ReactNode; @@ -12,11 +10,6 @@ interface AuthLayoutProps { } const AuthLayout = ({ children, mode, handleSubmit }: AuthLayoutProps) => { - const router = useRouter(); - const { user } = useUser(); - useEffect(() => { - if (user) router.push("/folder"); - }, [user, router]); return ( diff --git a/layouts/globalLayout/GlobalLayout.tsx b/layouts/globalLayout/GlobalLayout.tsx index 7c7685e00..721cb0a7c 100644 --- a/layouts/globalLayout/GlobalLayout.tsx +++ b/layouts/globalLayout/GlobalLayout.tsx @@ -1,17 +1,12 @@ import Footer from "@/components/footer/Footer"; import GlobalNav from "@/components/globalNav/GlobalNav"; import * as S from "@/layouts/globalLayout/GlobalLayout.style"; -import { AuthProvider } from "@/utils/AuthProvider"; function GlobalLayout() { return ( - - - - -