Fix: 포트폴리오 편집 페이지에서 로그인 된 사용자와 일치하는지 확인하는 로직 추가

src/app/(portfolio)/edit/[username]/page.tsx

@@ -1,9 +1,8 @@
 import PortfolioEditor from '@/containers/portfolio/PortfolioEditor'
-import { fetchAuthInfo } from '@/fetch/fetchAuthInfo'
 import { fetchPortfolio } from '@/fetch/fetchPortfolio'
 import { removeTagsText } from '@/lib/utils'
 import { Metadata } from 'next'
-import { notFound, redirect } from 'next/navigation'
+import { notFound } from 'next/navigation'
 
 type Props = {
   params: { username: string }
@@ -51,15 +50,7 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
   return metadata
 }
 
-export default async function EditPage({
-  params,
-}: {
-  params: { username: string }
-}) {
+export default function EditPage({ params }: { params: { username: string } }) {
   const { username } = params
-  const authInfo = await fetchAuthInfo()
-  if (!authInfo || authInfo.username !== username) {
-    redirect('/')
-  }
   return <PortfolioEditor username={username} />
 }

src/containers/portfolio/PortfolioEditor.tsx

@@ -19,27 +19,38 @@ import { useSetRecoilState } from 'recoil'
 import progressBarState from '@/recoil/atoms/progressBarState'
 import PortfolioLayout from '@/components/layout/PortfolioLayout'
 import Button from '@/components/common/Button'
+import { useAuthQuery } from '@/hooks/queries/auth'
 
 interface PortfolioEditorProps {
   username: string
 }
 
 export default function PortfolioEditor({ username }: PortfolioEditorProps) {
   const { openAlert } = useOpenAlertModal()
-  const { data, isLoading } = usePortfolioQuery(username)
+  const router = useRouter()
+  const { data: currentUser, isLoading: isLoadingCurrentUser } = useAuthQuery()
+  const { data, isLoading } = usePortfolioQuery(username, {
+    enabled: currentUser?.username === username,
+  })
   const [portfolio, setPortfolio] = useState<UserData | null>(null)
   const [socialLinks, setSocialLinks] = useState<SocialLinks | null>(null)
   const [layouts, setLayouts] = useState<Layouts>({
     lg: [],
     md: [],
   })
-  const router = useRouter()
   const { mutate } = usePortfolioMutation()
   const setIsLoading = useSetRecoilState(progressBarState)
 
   const handleBeforeUnload = (event: Event) => {
     event.preventDefault()
   }
+
+  useEffect(() => {
+    if (!isLoadingCurrentUser && currentUser?.username !== username) {
+      router.push('/')
+    }
+  }, [currentUser?.username, isLoadingCurrentUser, router, username])
+
   useEffect(() => {
     window.addEventListener('beforeunload', handleBeforeUnload)
     return () => {

src/hooks/queries/portfolio.ts

@@ -11,6 +11,7 @@ import {
   UpdatelikePortfolioPayload,
 } from '@/services/portfolio/type'
 import {
+  UseQueryOptions,
   useInfiniteQuery,
   useMutation,
   useQuery,
@@ -46,12 +47,22 @@ export const useInfiniteLikePortfolioQuery = () => {
   })
 }
 
-export const usePortfolioQuery = (username: string) => {
+export const usePortfolioQuery = <
+  TData = PortfolioDetailResponse,
+  TError = unknown,
+>(
+  username: string,
+  options?: Omit<
+    UseQueryOptions<PortfolioDetailResponse, TError, TData>,
+    'queryKey'
+  >,
+) => {
   return useQuery({
     queryKey: ['portfolio', username],
     queryFn: () => getPortfolio(username),
-    enabled: !!username,
     staleTime: 60 * 1000,
+    enabled: !!username && options?.enabled,
+    ...options,
   })
 }
 

src/middleware.ts

@@ -3,10 +3,9 @@ import { NextResponse } from 'next/server'
 
 // eslint-disable-next-line consistent-return
 export function middleware(request: NextRequest) {
-  const accessToken = request.cookies.get('accessToken')?.value
   const refreshToken = request.cookies.get('refreshToken')?.value
 
-  if (!accessToken && !refreshToken) {
+  if (!refreshToken) {
     return NextResponse.redirect(new URL('/', request.url))
   }
 }