Merge pull request #94 from Devminjeong-eum/fix/DEV-129

fix: 마이 페이지 url 변경

Author: uk11

src/app/home/page.tsx

@@ -7,7 +7,6 @@ import {
   dehydrate,
 } from '@tanstack/react-query';
 import { Suspense } from 'react';
-import { cookies } from 'next/headers';
 import {
   getAllPostsServer,
   getCurrentWeekTrendList,
@@ -32,11 +31,9 @@ export default async function HomePage({
     }),
   ]);
 
-  const isToken = cookies().has('accessToken');
-
   return (
     <HydrationBoundary state={dehydrate(queryClient)}>
-      <Header isToken={isToken} />
+      <Header />
       <Suspense fallback={<HomeSkeleton />}>
         <HomeClientPage />
       </Suspense>

src/app/profile/Non-login/page.tsx

@@ -16,6 +16,8 @@ const getUserInfo = async () => {
 export default async function ProfilePage() {
   const isToken = cookies().has('accessToken');
 
+  if (!isToken) return <Profile />;
+
   const {
     data: {
       data: { userId, likeCount, name, profileImage },

src/app/profile/[id]/page.tsx src/app/profile/page.tsx

@@ -1,7 +1,6 @@
 import { ResolvingMetadata } from 'next';
 import Header from '@/components/layout/Header';
 import Search from '@/components/pages/search';
-import { cookies } from 'next/headers';
 
 // eslint-disable-next-line react-refresh/only-export-components
 export async function generateMetadata(
@@ -46,11 +45,10 @@ type Props = {
 
 export default async function SearchPage({ searchParams }: Props) {
   const word = decodeURI(searchParams.keyword);
-  const isToken = cookies().has('accessToken');
 
   return (
     <>
-      <Header isToken={isToken} />
+      <Header />
       <main className="rounded-[24px] bg-[#FBFCFE] -mt-[20px] z-50 flex flex-col gap-[8px]">
         <Search word={word} />
       </main>

src/app/word/search/page.tsx

@@ -6,23 +6,17 @@ import QuizButton from '@/components/pages/home/QuizButton';
 import { useState } from 'react';
 import useScroll from '@/hooks/useScroll';
 import { useEffect } from 'react';
-import { QUIZ_PATH, WORD_LIST_PATH } from '@/routes/path.ts';
+import { PROFILE_PATH, QUIZ_PATH, WORD_LIST_PATH } from '@/routes/path.ts';
 import Link from 'next/link';
 import dynamic from 'next/dynamic';
-import { getUserInfo } from '@/fetcher';
 import MypageIconSvg from '@/components/svg-component/MypageIconSvg.tsx';
 
 const DynamicToolTip = dynamic(() => import('@/components/common/ToolTip'), {
   ssr: false,
 });
 
-type Props = {
-  isToken?: boolean;
-};
-
-export default function Header({ isToken }: Props) {
+export default function Header() {
   const isScrolled = useScroll();
-  const [id, setId] = useState('Non-login');
   const [isOpen, setIsOpen] = useState(
     () =>
       typeof window !== 'undefined' &&
@@ -34,21 +28,6 @@ export default function Header({ isToken }: Props) {
     if (!isOpen) sessionStorage.setItem('isOpen', 'false');
   }, [isOpen]);
 
-  useEffect(() => {
-    if (isToken) {
-      fetchUserId();
-    }
-  }, [isToken]);
-
-  const fetchUserId = async () => {
-    const {
-      data: {
-        data: { userId },
-      },
-    } = await getUserInfo();
-    setId(userId);
-  };
-
   return (
     <>
       <div className="bg-main-gradient-top h-[48px] flex items-center p-6 justify-between border-none">
@@ -60,7 +39,7 @@ export default function Header({ isToken }: Props) {
         <Link href={QUIZ_PATH}>
           <QuizButton />
         </Link>
-        <Link href={`/profile/${id}`}>
+        <Link href={PROFILE_PATH}>
           <div className="text-[#A8B8FF]">
             <MypageIconSvg />
           </div>

src/components/layout/Header.tsx

@@ -24,7 +24,7 @@ export default function DeleteAccountModal({
     postFeedback(selectedOption, text);
     deleteAccount(userId);
     handleModalClick();
-    router.push('/profile/Non-login');
+    router.push('/profile');
     router.refresh();
   };
 

src/components/pages/profile/Modal/DeleteAccountModal.tsx

@@ -13,7 +13,7 @@ export default function LogoutModal({ isOpen, handleModalClick }: Props) {
   const handleLogout = () => {
     logout();
     handleModalClick();
-    router.push('/profile/Non-login');
+    router.push('/profile');
     router.refresh();
   };
 

src/components/pages/profile/Modal/LogoutModal.tsx

@@ -9,7 +9,7 @@ import ProfileInfo from './ProfileInfo';
 import Link from 'next/link';
 import { QUIZ_PATH, WORDBOOK_PATH } from '@/routes/path';
 import NonLoginProfileInfo from './NonLoginProfileInfo';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import LogoutModal from './Modal/LogoutModal';
 import { useRouter } from 'next/navigation';
 import clsx from 'clsx';
@@ -56,12 +56,6 @@ export default function Profile({
     setIsContactOpen(!isContactOpen);
   };
 
-  useEffect(() => {
-    if (userId) {
-      router.push(`/profile/${userId}`);
-    }
-  }, [userId, router]);
-
   return (
     <>
       <ProfileHeader text={'마이페이지'} userId={userId} />

src/components/pages/profile/index.tsx

@@ -4,6 +4,8 @@ export const QUIZ_PATH = '/quiz';
 export const WORDBOOK_PATH = '/user/wordbook';
 export const NOTICE_PATH = '/notice';
 export const SEARCH_PATH = '/word/search/:wordName';
+export const PROFILE_PATH = '/profile';
+
 export const WORD_INQUIRY_FORM_URL = 'https://forms.gle/McGVzfsVT9SQkt1g8';
 export const OTHER_INQUIRY_FORM_URL =
   'https://docs.google.com/forms/d/e/1FAIpQLSd2XQqzR3dDb1aq_ipTmagcZr3f-uSwTqQsLpSB6u_vq9oxBA/viewform';