From 5608cba05f49ed86b7db418e9bfd7f953af4ce6c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=98=A4=EC=8A=B9=ED=83=9C?= Date: Sat, 13 Jan 2024 01:25:51 +0900 Subject: [PATCH] =?UTF-8?q?=EC=83=88=EB=A1=9C=EA=B3=A0=EC=B9=A8=20?= =?UTF-8?q?=ED=9B=84=20=EC=9E=AC=EB=A1=9C=EA=B7=B8=EC=9D=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 2 +- src/App.tsx | 25 +++-- src/app/api.ts | 10 +- src/app/authSlice.ts | 1 + src/components/comment/CommentCard.tsx | 2 +- src/components/post/PostCard.tsx | 2 +- src/components/ui/HeaderSearch.tsx | 5 +- src/components/ui/Layout.tsx | 131 +++++++++++++------------ src/pages/OauthRedirect.tsx | 6 +- vite.config.ts | 5 + 10 files changed, 108 insertions(+), 81 deletions(-) diff --git a/index.html b/index.html index 0d7d4b1..c737979 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ - Vite + React + TS + Synergy | 팀프로젝트 협업 SNS
diff --git a/src/App.tsx b/src/App.tsx index efb0288..555330f 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,10 +1,11 @@ -import { MantineProvider } from "@mantine/core"; +import { LoadingOverlay, MantineProvider } from "@mantine/core"; import { BrowserRouter, Navigate, Outlet, Route, Routes, + useNavigate, } from "react-router-dom"; import Layout from "components/ui/Layout"; import ChatRoom from "components/chat/ChatRoom"; @@ -20,8 +21,8 @@ import Notification from "pages/Notification"; import RecentPost from "pages/RecentPost"; import RecentProject from "pages/RecentProject"; import Search from "pages/Search"; -import { selectCurrentToken } from "app/authSlice"; -import { useSelector } from "react-redux"; +import { selectCurrentToken, setAccessToken } from "app/authSlice"; +import { useDispatch, useSelector } from "react-redux"; import PostDetail from "pages/PostDetail"; import Following from "pages/Following"; import OauthRedirect from "pages/OauthRedirect"; @@ -29,11 +30,23 @@ import ProjectNotice from "components/project/ProjectNotice"; import ProjectSchedule from "components/project/ProjectSchedule"; import ProjectPeerRating from "components/project/ProjectPeerRating"; import ProjectTaskBoard from "components/project/task/ProjectTaskBoard"; +import { useEffect } from "react"; +import { useLocalStorage } from "@mantine/hooks"; const PrivateRoutes = () => { - const auth = useSelector(selectCurrentToken); - console.log(auth); - return auth ? : ; + const dispatch = useDispatch(); + const token = useSelector(selectCurrentToken); + + if (!token) { + localStorage.setItem("redirect-url-after-auth", window.location.pathname); + window.location.href = + import.meta.env.VITE_API_URL + + `/oauth2/authorization/google?redirect_uri=${window.location.origin}/oauth/redirect`; + return ; + } + + localStorage.removeItem("redirect-url-after-auth"); + return ; }; export default function App() { diff --git a/src/app/api.ts b/src/app/api.ts index 0bc3a67..7c671f8 100644 --- a/src/app/api.ts +++ b/src/app/api.ts @@ -41,8 +41,7 @@ const baseQueryWithReauth = async ( extraOptions: object ) => { let result = await baseQuery(args, api, extraOptions); - // if (result.error && result.error.status === 401) { - if (result.error) { + if (result.error && result.error.status === 401) { const state = api.getState() as RootState; console.log("state", state); const token = state.auth.token; @@ -53,7 +52,6 @@ const baseQueryWithReauth = async ( } = await axios.get(import.meta.env.VITE_API_URL + "/api/v1/auth/refresh", { headers: { Authorization: `Bearer ${token}`, - Credentials: "include", }, }); @@ -64,7 +62,8 @@ const baseQueryWithReauth = async ( } if (refreshResult.header?.code === 400) { - window.location.href = "/auth"; + console.log(refreshResult); + // window.location.href = "/auth"; } } @@ -110,6 +109,7 @@ export const api = createApi({ // MyInfo getMyInfo: build.query({ query: () => "/users/me/info", + providesTags: [{ type: "MyInfo" }], }), editMyInfo: build.mutation({ @@ -752,7 +752,7 @@ export const api = createApi({ { content: Post[]; totalPages: number }, [string, number] >({ - query: ([userId, page]) => `/posts?authorId=${userId}&page=${page}`, + query: ([userId, page]) => `/posts/other?userId=${userId}&page=${page}`, serializeQueryArgs: ({ queryArgs, endpointName }) => { return endpointName + queryArgs[0]; }, diff --git a/src/app/authSlice.ts b/src/app/authSlice.ts index 3a1198c..ae0e2e4 100644 --- a/src/app/authSlice.ts +++ b/src/app/authSlice.ts @@ -20,6 +20,7 @@ const authSlice = createSlice({ }); export const { setAccessToken } = authSlice.actions; + export default authSlice.reducer; export const selectCurrentToken = (state: RootState) => state.auth.token; diff --git a/src/components/comment/CommentCard.tsx b/src/components/comment/CommentCard.tsx index 2862ec5..a5cadec 100644 --- a/src/components/comment/CommentCard.tsx +++ b/src/components/comment/CommentCard.tsx @@ -10,7 +10,7 @@ export default function CommentCard({ userId, comment, updateAt }: Comment) { dayjs.extend(relativeTime); dayjs.extend(utc); - const fromNow = dayjs(updateAt).local().fromNow(); + const fromNow = dayjs.utc(updateAt).local().fromNow(); return ( diff --git a/src/components/post/PostCard.tsx b/src/components/post/PostCard.tsx index 531b54e..5b6f227 100644 --- a/src/components/post/PostCard.tsx +++ b/src/components/post/PostCard.tsx @@ -88,7 +88,7 @@ export default function PostCard({ {post.authorName} - {dayjs(post.createAt).local().fromNow()} + {dayjs.utc(post.createAt).local().fromNow()} diff --git a/src/components/ui/HeaderSearch.tsx b/src/components/ui/HeaderSearch.tsx index 8fce17e..99ab438 100644 --- a/src/components/ui/HeaderSearch.tsx +++ b/src/components/ui/HeaderSearch.tsx @@ -14,7 +14,7 @@ import { import { useDisclosure } from "@mantine/hooks"; import { IconSearch } from "@tabler/icons-react"; import { ReactComponent as Logo } from "assets/logo.svg"; -import { Link, useLocation } from "react-router-dom"; +import { Link, useLocation, useNavigate } from "react-router-dom"; import { SearchInput } from "../search/SearchInput"; import { api } from "app/api"; import { setAccessToken } from "app/authSlice"; @@ -73,6 +73,7 @@ interface HeaderSearchProps { export function HeaderSearch({ links, children }: HeaderSearchProps) { const dispatch = useDispatch(); + const navigate = useNavigate(); const activePage = useLocation().pathname.split("/")[1]; const { classes, cx } = useStyles(); @@ -171,7 +172,7 @@ export function HeaderSearch({ links, children }: HeaderSearchProps) { 내 프로필 로그아웃 diff --git a/src/components/ui/Layout.tsx b/src/components/ui/Layout.tsx index c97a3ba..2187f72 100644 --- a/src/components/ui/Layout.tsx +++ b/src/components/ui/Layout.tsx @@ -28,6 +28,7 @@ import { import { useEffect } from "react"; import { SseProvider } from "app/SseContext"; import { EditUserInfoModal } from "components/user/EditUserInfoModal"; +import { StompProvider } from "app/StompContext"; const headerLinks = [ { @@ -87,39 +88,25 @@ export default function Layout() { ); return ( - // - - - - // + } + footer={ + isChatRoom ? undefined : ( + +
+ +
+ + ) + } + header={ + + + + + + } + > + + + + + ); } diff --git a/src/pages/OauthRedirect.tsx b/src/pages/OauthRedirect.tsx index 9c9c044..fccb53b 100644 --- a/src/pages/OauthRedirect.tsx +++ b/src/pages/OauthRedirect.tsx @@ -1,12 +1,13 @@ import { setAccessToken } from "app/authSlice"; import { useEffect } from "react"; -import { useDispatch } from "react-redux"; +import { useDispatch, useSelector } from "react-redux"; import { useLocation, useNavigate } from "react-router-dom"; function OauthRedirect() { const location = useLocation(); const navigate = useNavigate(); const dispatch = useDispatch(); + const redirectUrl = localStorage.getItem("redirect-url-after-auth") || "/"; useEffect(() => { const searchParams = new URLSearchParams(location.search); @@ -14,7 +15,8 @@ function OauthRedirect() { if (token) dispatch(setAccessToken(token)); console.log(token); - navigate("/"); + console.log(redirectUrl); + navigate(redirectUrl); }, [location.search]); return null; diff --git a/vite.config.ts b/vite.config.ts index 7ab08d4..30f8b63 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -28,6 +28,11 @@ export default defineConfig({ changeOrigin: true, // host 헤더를 변경합니다. secure: false, // SSL 설정 (https 프로토콜) }, + "/oauth2/authorization": { + target: "https://synergyy.link", + changeOrigin: true, // host 헤더를 변경합니다. + secure: false, // SSL 설정 (https 프로토콜) + }, }, }, });