diff --git a/src/components/common/Footer/index.tsx b/src/components/common/Footer/index.tsx new file mode 100644 index 00000000..b75cebc5 --- /dev/null +++ b/src/components/common/Footer/index.tsx @@ -0,0 +1,112 @@ +import { Fragment } from "react"; +import { Link, useNavigate } from "@tanstack/react-router"; +import { CircleUser, FolderUp, Heart, Home, LogOut, Plus } from "lucide-react"; +import { useOverlay } from "@toss/use-overlay"; +import { useAtom, useAtomValue } from "jotai"; +import LoginModal from "@/components/LoginModal"; +import { cn } from "@/utils/tailwind"; +import { getLocalStorage, setLocalStorage } from "@/utils/localStorage"; +import { $userInformation } from "@/store/user"; +import { REDIRECT_PATH, REFRESH_TOKEN } from "@/constants/auth"; +import useLogout from "@/hooks/api/auth/useLogout"; +import { $scrollDirection } from "@/store/scroll"; + +const NavigationFooter = () => { + const loginModalOverlay = useOverlay(); + const [userInformation, setUserInformation] = useAtom($userInformation); + const refreshToken = getLocalStorage(REFRESH_TOKEN); + const navigate = useNavigate(); + const { logout } = useLogout(); + const role = refreshToken && userInformation ? userInformation.role : "GUEST"; + const scrollDirection = useAtomValue($scrollDirection); + + const handleClickButton = (eventName: string) => () => { + gtag("event", "page_view", { event_category: eventName }); + }; + + const handleClickLogin = () => { + setLocalStorage(REDIRECT_PATH, "/"); + loginModalOverlay.open(({ isOpen, close }) => ); + gtag("event", "modal_open", { event_category: "로그인_모달_띄우기" }); + }; + + const handleClickLogout = () => { + logout(undefined, { + onSuccess: () => { + setUserInformation({ + userId: 0, + email: "", + role: "GUEST", + }); + navigate({ to: "/" }); + }, + }); + }; + + return ( +
+ + + + 홈 + + + + + + 좋아요한 짤 + + + +
+ +
+ + + + + 업로드한 짤 + + + {role === "GUEST" && ( +
+ + 로그인 +
+ )} + {role === "USER" && ( +
+ + 로그아웃 +
+ )} +
+ ); +}; + +export default NavigationFooter; diff --git a/src/routeTree.gen.ts b/src/routeTree.gen.ts index 66a3921b..afa61cc1 100644 --- a/src/routeTree.gen.ts +++ b/src/routeTree.gen.ts @@ -8,8 +8,6 @@ // This file is auto-generated by TanStack Router -import { createFileRoute, lazyRouteComponent } from "@tanstack/react-router" - // Import Routes import { Route as rootRoute } from "./routes/__root" @@ -18,15 +16,10 @@ import { Route as AuthenticationImport } from "./routes/_authentication" import { Route as LayoutWithChatIndexRouteImport } from "./routes/_layout-with-chat/index.route" import { Route as LayoutWithChatMyUploadedZzalsRouteImport } from "./routes/_layout-with-chat/my-uploaded-zzals/route" import { Route as LayoutWithChatMyLikedZzalsRouteImport } from "./routes/_layout-with-chat/my-liked-zzals/route" -import { Route as AuthenticationUploadZzalIndexImport } from "./routes/_authentication/upload-zzal/index" -import { Route as AuthenticationDeleteAccountIndexImport } from "./routes/_authentication/delete-account/index" -import { Route as AuthenticationAdminReportsIndexImport } from "./routes/_authentication/admin/reports/index" -import { Route as AuthenticationAdminReportsImageIdIndexImport } from "./routes/_authentication/admin/reports/$imageId/index" - -// Create Virtual Routes - -const AuthenticationAdminReportsAdminReportsPendingComponentImport = - createFileRoute("/_authentication/admin/reports/AdminReports")() +import { Route as AuthenticationUploadZzalRouteImport } from "./routes/_authentication/upload-zzal/route" +import { Route as AuthenticationDeleteAccountRouteImport } from "./routes/_authentication/delete-account/route" +import { Route as AuthenticationAdminReportsRouteImport } from "./routes/_authentication/admin/reports/route" +import { Route as AuthenticationAdminReportsImageIdRouteImport } from "./routes/_authentication/admin/reports/$imageId/route" // Create/Update Routes @@ -67,43 +60,45 @@ const LayoutWithChatMyLikedZzalsRouteRoute = ), ) -const AuthenticationUploadZzalIndexRoute = - AuthenticationUploadZzalIndexImport.update({ - path: "/upload-zzal/", - getParentRoute: () => AuthenticationRoute, - } as any) - -const AuthenticationDeleteAccountIndexRoute = - AuthenticationDeleteAccountIndexImport.update({ - path: "/delete-account/", +const AuthenticationUploadZzalRouteRoute = + AuthenticationUploadZzalRouteImport.update({ + path: "/upload-zzal", getParentRoute: () => AuthenticationRoute, - } as any) + } as any).lazy(() => + import("./routes/_authentication/upload-zzal/route.lazy").then( + (d) => d.Route, + ), + ) -const AuthenticationAdminReportsIndexRoute = - AuthenticationAdminReportsIndexImport.update({ - path: "/admin/reports/", +const AuthenticationDeleteAccountRouteRoute = + AuthenticationDeleteAccountRouteImport.update({ + path: "/delete-account", getParentRoute: () => AuthenticationRoute, - } as any) + } as any).lazy(() => + import("./routes/_authentication/delete-account/route.lazy").then( + (d) => d.Route, + ), + ) -const AuthenticationAdminReportsAdminReportsPendingComponentRoute = - AuthenticationAdminReportsAdminReportsPendingComponentImport.update({ - path: "/admin/reports/AdminReports", +const AuthenticationAdminReportsRouteRoute = + AuthenticationAdminReportsRouteImport.update({ + path: "/admin/reports", getParentRoute: () => AuthenticationRoute, - } as any).update({ - pendingComponent: lazyRouteComponent( - () => - import( - "./routes/_authentication/admin/reports/AdminReports.pendingComponent" - ), - "pendingComponent", + } as any).lazy(() => + import("./routes/_authentication/admin/reports/route.lazy").then( + (d) => d.Route, ), - }) + ) -const AuthenticationAdminReportsImageIdIndexRoute = - AuthenticationAdminReportsImageIdIndexImport.update({ - path: "/admin/reports/$imageId/", - getParentRoute: () => AuthenticationRoute, - } as any) +const AuthenticationAdminReportsImageIdRouteRoute = + AuthenticationAdminReportsImageIdRouteImport.update({ + path: "/$imageId", + getParentRoute: () => AuthenticationAdminReportsRouteRoute, + } as any).lazy(() => + import("./routes/_authentication/admin/reports/$imageId/route.lazy").then( + (d) => d.Route, + ), + ) // Populate the FileRoutesByPath interface @@ -117,6 +112,14 @@ declare module "@tanstack/react-router" { preLoaderRoute: typeof LayoutWithChatImport parentRoute: typeof rootRoute } + "/_authentication/delete-account": { + preLoaderRoute: typeof AuthenticationDeleteAccountRouteImport + parentRoute: typeof AuthenticationImport + } + "/_authentication/upload-zzal": { + preLoaderRoute: typeof AuthenticationUploadZzalRouteImport + parentRoute: typeof AuthenticationImport + } "/_layout-with-chat/my-liked-zzals": { preLoaderRoute: typeof LayoutWithChatMyLikedZzalsRouteImport parentRoute: typeof LayoutWithChatImport @@ -129,25 +132,13 @@ declare module "@tanstack/react-router" { preLoaderRoute: typeof LayoutWithChatIndexRouteImport parentRoute: typeof LayoutWithChatImport } - "/_authentication/delete-account/": { - preLoaderRoute: typeof AuthenticationDeleteAccountIndexImport - parentRoute: typeof AuthenticationImport - } - "/_authentication/upload-zzal/": { - preLoaderRoute: typeof AuthenticationUploadZzalIndexImport - parentRoute: typeof AuthenticationImport - } - "/_authentication/admin/reports/AdminReports": { - preLoaderRoute: typeof AuthenticationAdminReportsAdminReportsPendingComponentImport - parentRoute: typeof AuthenticationImport - } - "/_authentication/admin/reports/": { - preLoaderRoute: typeof AuthenticationAdminReportsIndexImport + "/_authentication/admin/reports": { + preLoaderRoute: typeof AuthenticationAdminReportsRouteImport parentRoute: typeof AuthenticationImport } - "/_authentication/admin/reports/$imageId/": { - preLoaderRoute: typeof AuthenticationAdminReportsImageIdIndexImport - parentRoute: typeof AuthenticationImport + "/_authentication/admin/reports/$imageId": { + preLoaderRoute: typeof AuthenticationAdminReportsImageIdRouteImport + parentRoute: typeof AuthenticationAdminReportsRouteImport } } } @@ -156,11 +147,11 @@ declare module "@tanstack/react-router" { export const routeTree = rootRoute.addChildren([ AuthenticationRoute.addChildren([ - AuthenticationDeleteAccountIndexRoute, - AuthenticationUploadZzalIndexRoute, - AuthenticationAdminReportsAdminReportsPendingComponentRoute, - AuthenticationAdminReportsIndexRoute, - AuthenticationAdminReportsImageIdIndexRoute, + AuthenticationDeleteAccountRouteRoute, + AuthenticationUploadZzalRouteRoute, + AuthenticationAdminReportsRouteRoute.addChildren([ + AuthenticationAdminReportsImageIdRouteRoute, + ]), ]), LayoutWithChatRoute.addChildren([ LayoutWithChatMyLikedZzalsRouteRoute, diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx index 87d2f134..fed11323 100644 --- a/src/routes/__root.tsx +++ b/src/routes/__root.tsx @@ -1,119 +1,13 @@ import { ToastContainer } from "react-toastify"; import "react-toastify/dist/ReactToastify.css"; -import { Fragment } from "react"; -import { Link, Outlet, createRootRouteWithContext, useNavigate } from "@tanstack/react-router"; -import { CircleUser, FolderUp, Heart, Home, LogOut, Plus } from "lucide-react"; -import { useOverlay } from "@toss/use-overlay"; -import { useAtom, useAtomValue } from "jotai"; +import { Outlet, createRootRouteWithContext } from "@tanstack/react-router"; import { ReactQueryDevtools } from "@tanstack/react-query-devtools"; import { AuthContextType } from "@/components/Auth"; -import LoginModal from "@/components/LoginModal"; -import { cn } from "@/utils/tailwind"; -import { getLocalStorage, setLocalStorage } from "@/utils/localStorage"; import NotFound from "./-NotFound"; import Header from "@/components/common/Header"; -import { $userInformation } from "@/store/user"; -import { REDIRECT_PATH, REFRESH_TOKEN } from "@/constants/auth"; -import useLogout from "@/hooks/api/auth/useLogout"; -import { $scrollDirection } from "@/store/scroll"; +import NavigationFooter from "@/components/common/Footer"; -const handleClickButton = (eventName: string) => () => { - gtag("event", "page_view", { event_category: eventName }); -}; - -const NavigationFooter = () => { - const loginModalOverlay = useOverlay(); - const [userInformation, setUserInformation] = useAtom($userInformation); - const refreshToken = getLocalStorage(REFRESH_TOKEN); - const navigate = useNavigate(); - const { logout } = useLogout(); - const role = refreshToken && userInformation ? userInformation.role : "GUEST"; - const scrollDirection = useAtomValue($scrollDirection); - - const handleClickLogin = () => { - setLocalStorage(REDIRECT_PATH, "/"); - loginModalOverlay.open(({ isOpen, close }) => ); - gtag("event", "modal_open", { event_category: "로그인_모달_띄우기" }); - }; - - const handleClickLogout = () => { - logout(undefined, { - onSuccess: () => { - setUserInformation({ - userId: 0, - email: "", - role: "GUEST", - }); - navigate({ to: "/" }); - }, - }); - }; - - return ( -
- - - - 홈 - - - - - - 좋아요한 짤 - - - -
- -
- - - - - 업로드한 짤 - - - {role === "GUEST" && ( -
- - 로그인 -
- )} - {role === "USER" && ( -
- - 로그아웃 -
- )} -
- ); -}; +// const NavigationFooter = lazy(() => import("@/components/common/Footer")); interface RouterContext { authorize: AuthContextType; diff --git a/src/routes/_authentication.tsx b/src/routes/_authentication.tsx index 045d86c2..e931cc86 100644 --- a/src/routes/_authentication.tsx +++ b/src/routes/_authentication.tsx @@ -3,7 +3,6 @@ import axios from "axios"; export const Route = createFileRoute("/_authentication")({ beforeLoad: async ({ context, location }) => { - console.log(location.pathname); if (location.pathname === "/") return; await context.authorize.isAuthenticated(); }, diff --git a/src/routes/_authentication/admin/reports/$imageId/index.tsx b/src/routes/_authentication/admin/reports/$imageId/route.lazy.tsx similarity index 92% rename from src/routes/_authentication/admin/reports/$imageId/index.tsx rename to src/routes/_authentication/admin/reports/$imageId/route.lazy.tsx index 60dee490..9d20f983 100644 --- a/src/routes/_authentication/admin/reports/$imageId/index.tsx +++ b/src/routes/_authentication/admin/reports/$imageId/route.lazy.tsx @@ -1,5 +1,5 @@ +import { createLazyFileRoute } from "@tanstack/react-router"; import { Trash2 } from "lucide-react"; -import { createFileRoute } from "@tanstack/react-router"; import { Link } from "@tanstack/react-router"; import { useOverlay } from "@toss/use-overlay"; import DeleteConfirmModal from "@/components/common/DeleteConfirmModal"; @@ -7,7 +7,6 @@ import ReportTableHead from "@/components/common/admin/ReportTableHead"; import ReportDetailsTableBody from "@/components/AdminReportsDetail/ReportDetailsTableBody"; import useGetReportsDetails from "@/hooks/api/report/useGetReportDetails"; import useDeleteReportedZzal from "@/hooks/api/report/useDeleteReportedZzal"; -import Pending from "@/routes/_authentication/admin/reports/AdminReports.pendingComponent"; const AdminImageDetail = () => { const { imageId } = Route.useParams(); @@ -79,7 +78,6 @@ const AdminImageDetail = () => { ); }; -export const Route = createFileRoute("/_authentication/admin/reports/$imageId/")({ +export const Route = createLazyFileRoute("/_authentication/admin/reports/$imageId")({ component: AdminImageDetail, - pendingComponent: Pending, }); diff --git a/src/routes/_authentication/admin/reports/$imageId/route.tsx b/src/routes/_authentication/admin/reports/$imageId/route.tsx new file mode 100644 index 00000000..c6002f5a --- /dev/null +++ b/src/routes/_authentication/admin/reports/$imageId/route.tsx @@ -0,0 +1,5 @@ +import { createFileRoute } from "@tanstack/react-router"; + +export const Route = createFileRoute("/_authentication/admin/reports/$imageId")({ + component: () =>
Hello /_authentication/admin/reports/$imageId!
, +}); diff --git a/src/routes/_authentication/admin/reports/AdminReports.pendingComponent.tsx b/src/routes/_authentication/admin/reports/AdminReports.pendingComponent.tsx deleted file mode 100644 index 06167f2d..00000000 --- a/src/routes/_authentication/admin/reports/AdminReports.pendingComponent.tsx +++ /dev/null @@ -1,8 +0,0 @@ -const Pending = () => { - return
pending admin reports
; - { - /*TODO: [2024.02.26] 추후 pending 컴포넌트 Ui 업데이트 */ - } -}; - -export default Pending; diff --git a/src/routes/_authentication/admin/reports/index.tsx b/src/routes/_authentication/admin/reports/route.lazy.tsx similarity index 89% rename from src/routes/_authentication/admin/reports/index.tsx rename to src/routes/_authentication/admin/reports/route.lazy.tsx index 0c360416..b8bf41b0 100644 --- a/src/routes/_authentication/admin/reports/index.tsx +++ b/src/routes/_authentication/admin/reports/route.lazy.tsx @@ -1,7 +1,6 @@ import { Fragment, useRef } from "react"; import { Helmet } from "react-helmet-async"; -import { createFileRoute } from "@tanstack/react-router"; -import Pending from "./AdminReports.pendingComponent"; +import { createLazyFileRoute } from "@tanstack/react-router"; import ReportTableHead from "@/components/common/admin/ReportTableHead"; import ReportsTableBody from "@/components/AdminReports/ReportsTableBody "; import useGetReports from "@/hooks/api/report/useGetReports"; @@ -49,7 +48,6 @@ const Admin = () => { ); }; -export const Route = createFileRoute("/_authentication/admin/reports/")({ +export const Route = createLazyFileRoute("/_authentication/admin/reports")({ component: Admin, - pendingComponent: Pending, }); diff --git a/src/routes/_authentication/admin/reports/route.tsx b/src/routes/_authentication/admin/reports/route.tsx new file mode 100644 index 00000000..3494ff89 --- /dev/null +++ b/src/routes/_authentication/admin/reports/route.tsx @@ -0,0 +1,9 @@ +import { createFileRoute } from "@tanstack/react-router"; + +const PendingComponent = () => { + return
pending...
; +}; + +export const Route = createFileRoute("/_authentication/admin/reports")({ + pendingComponent: PendingComponent, +}); diff --git a/src/routes/_authentication/delete-account/index.tsx b/src/routes/_authentication/delete-account/route.lazy.tsx similarity index 92% rename from src/routes/_authentication/delete-account/index.tsx rename to src/routes/_authentication/delete-account/route.lazy.tsx index 616af83f..966e7916 100644 --- a/src/routes/_authentication/delete-account/index.tsx +++ b/src/routes/_authentication/delete-account/route.lazy.tsx @@ -1,6 +1,7 @@ import { Helmet } from "react-helmet-async"; import { Fragment } from "react"; -import { createFileRoute } from "@tanstack/react-router"; +import { createLazyFileRoute } from "@tanstack/react-router"; + import { cn } from "@/utils/tailwind"; import useFunnel from "@/hooks/common/useFunnel"; import DeleteConfirm from "@/components/DeleteAccount/DeleteConfirm"; @@ -51,6 +52,6 @@ const DeleteAccount = () => { ); }; -export const Route = createFileRoute("/_authentication/delete-account/")({ +export const Route = createLazyFileRoute("/_authentication/delete-account")({ component: DeleteAccount, }); diff --git a/src/routes/_authentication/delete-account/route.tsx b/src/routes/_authentication/delete-account/route.tsx new file mode 100644 index 00000000..7361d5dd --- /dev/null +++ b/src/routes/_authentication/delete-account/route.tsx @@ -0,0 +1,5 @@ +import { createFileRoute } from "@tanstack/react-router"; + +export const Route = createFileRoute("/_authentication/delete-account")({ + component: () =>
Hello /_authentication/delete-account!
, +}); diff --git a/src/routes/_authentication/upload-zzal/index.tsx b/src/routes/_authentication/upload-zzal/route.lazy.tsx similarity index 96% rename from src/routes/_authentication/upload-zzal/index.tsx rename to src/routes/_authentication/upload-zzal/route.lazy.tsx index a31d5725..b4a47157 100644 --- a/src/routes/_authentication/upload-zzal/index.tsx +++ b/src/routes/_authentication/upload-zzal/route.lazy.tsx @@ -1,7 +1,8 @@ import { ChangeEvent, useEffect, useState } from "react"; import { Helmet } from "react-helmet-async"; import { toast } from "react-toastify"; -import { Link, createFileRoute } from "@tanstack/react-router"; +import { createLazyFileRoute } from "@tanstack/react-router"; +import { Link } from "@tanstack/react-router"; import { useAtom, useSetAtom } from "jotai"; import { Asterisk } from "lucide-react"; import { convertFileToJpg } from "@/utils/convertFileToJpg"; @@ -165,6 +166,6 @@ const UploadZzal = () => { ); }; -export const Route = createFileRoute("/_authentication/upload-zzal/")({ +export const Route = createLazyFileRoute("/_authentication/upload-zzal")({ component: UploadZzal, }); diff --git a/src/routes/_authentication/upload-zzal/route.tsx b/src/routes/_authentication/upload-zzal/route.tsx new file mode 100644 index 00000000..afe6fc53 --- /dev/null +++ b/src/routes/_authentication/upload-zzal/route.tsx @@ -0,0 +1,5 @@ +import { createFileRoute } from "@tanstack/react-router"; + +export const Route = createFileRoute("/_authentication/upload-zzal")({ + component: () =>
Hello /_authentication/upload-zzal!
, +}); diff --git a/src/routes/_layout-with-chat.tsx b/src/routes/_layout-with-chat.tsx index c961992c..4fa0e05d 100644 --- a/src/routes/_layout-with-chat.tsx +++ b/src/routes/_layout-with-chat.tsx @@ -1,4 +1,4 @@ -import { useEffect, useRef } from "react"; +import { useEffect, useRef, Suspense, lazy } from "react"; import { Link, Outlet, createFileRoute, redirect, useRouterState } from "@tanstack/react-router"; import { useAtom, useAtomValue, useSetAtom } from "jotai"; import { MessageCircle } from "lucide-react"; @@ -6,14 +6,15 @@ import axios from "axios"; import { cn } from "@/utils/tailwind"; import { getLocalStorage } from "@/utils/localStorage"; import { debounce } from "@/utils/debounce"; -import Chat from "@/components/common/Chat"; -import { $isChatOpen } from "@/store/chat"; import TagSearchForm from "@/components/common/SearchTag/TagSearchForm"; +import { $isChatOpen } from "@/store/chat"; import { REFRESH_TOKEN } from "@/constants/auth"; import { $userInformation } from "@/store/user"; import { $scrollDirection } from "@/store/scroll"; import { $selectedTags } from "@/store/tag"; +const Chat = lazy(() => import("@/components/common/Chat")); + const zzalPaths = [ { title: "취향 저격 짤", @@ -112,7 +113,7 @@ const LayoutWithChat = () => { > - + {isChatOpen && } );