FE-46 ✨공용 컴포넌트 헤더 업데이트

src/components/Header/Header.tsx

@@ -18,9 +18,10 @@ import SHARE_ICON from '../../../public/icon/share-icon.svg';
 // NOTE isButton 일 경우 textInButton의 값을 무조건 지정해줘야 합니다.
 // NOTE SHARE_ICON 추가 시 토스트 기능도 사용하려면 해당 컴포넌트 아래 <Toaster /> 를 추가해주세요.
 
+// TODO 새로 바뀐 피그마 시안으로 바꿀지 추후 결정
+
 export interface HeaderProps {
   icon: 'back' | 'search' | '';
-  routerPage: string;
   isLogo: boolean;
   insteadOfLogo: string;
   isProfileIcon: boolean;
@@ -31,10 +32,15 @@ export interface HeaderProps {
   onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
 }
 
-function Header({ isLogo, icon, insteadOfLogo, isButton, isProfileIcon, isShareIcon, textInButton, routerPage, disabled, onClick }: HeaderProps) {
+function Header({ isLogo, icon, insteadOfLogo, isButton, isProfileIcon, isShareIcon, textInButton, disabled, onClick }: HeaderProps) {
   const router = useRouter();
   const { toast } = useToast();
 
+  // 뒤로가기
+  const handleBack = () => {
+    router.back();
+  };
+
   // 페이지 이동 함수
   const handleNavigateTo = (path: string) => {
     router.push(path);
@@ -65,7 +71,7 @@ function Header({ isLogo, icon, insteadOfLogo, isButton, isProfileIcon, isShareI
       <div className='container flex justify-between items-center'>
         <div className='flex items-center space-x-4'>
           {icon === 'back' && (
-            <button className='w-5 h-5 lg:w-9 lg:h-9' type='button' onClick={() => handleNavigateTo(routerPage)} aria-label='뒤로가기 버튼'>
+            <button className='w-5 h-5 lg:w-9 lg:h-9' type='button' onClick={handleBack} aria-label='뒤로가기 버튼'>
               <Image src={ARROW_LEFT_ICON} alt='뒤로가기 버튼 이미지' />
             </button>
           )}

src/components/epigram/EditEpigram.tsx

@@ -121,18 +121,7 @@ function EditEpigram({ epigram }: EditEpigramProps) {
 
   return (
     <>
-      <Header
-        icon='back'
-        routerPage={`/epigrams/${epigram.id}`}
-        isLogo
-        insteadOfLogo='에피그램 수정'
-        isProfileIcon
-        isShareIcon={false}
-        isButton={false}
-        textInButton=''
-        disabled={false}
-        onClick={() => {}}
-      />
+      <Header icon='back' isLogo insteadOfLogo='에피그램 수정' isProfileIcon isShareIcon={false} isButton={false} textInButton='' disabled={false} onClick={() => {}} />
       <div className='border-t-2 w-full flex flex-col justify-center items-center'>
         <Form {...form}>
           <form onSubmit={form.handleSubmit(handleSubmit)} className='flex flex-col justify-center item-center gap-6 lg:gap-8 w-[312px] md:w-[384px] lg:w-[640px] py-6'>

src/pageLayout/Epigram/AddEpigram.tsx

@@ -106,7 +106,7 @@ function AddEpigram() {
 
   return (
     <>
-      <Header icon='search' routerPage='/search' isLogo insteadOfLogo='' isProfileIcon isShareIcon={false} isButton={false} textInButton='' disabled={false} onClick={() => {}} />
+      <Header icon='search' isLogo insteadOfLogo='' isProfileIcon isShareIcon={false} isButton={false} textInButton='' disabled={false} onClick={() => {}} />
       <div className='border-t-2 w-full flex flex-col justify-center items-center'>
         <Form {...form}>
           <form onSubmit={form.handleSubmit(handleSubmit)} className='flex flex-col justify-center item-center gap-6 lg:gap-8 w-[312px] md:w-[384px] lg:w-[640px] py-6'>

src/pageLayout/Epigrams/MainLayout.tsx

@@ -9,7 +9,7 @@ import FAB from '@/components/main/FAB';
 function MainLayout() {
   return (
     <>
-      <Header icon='search' routerPage='/.' isLogo insteadOfLogo='' isProfileIcon isShareIcon={false} isButton={false} textInButton='' disabled={false} onClick={() => {}} />
+      <Header icon='search' isLogo insteadOfLogo='' isProfileIcon isShareIcon={false} isButton={false} textInButton='' disabled={false} onClick={() => {}} />
       <main className='w-full min-h-screen bg-background-100 flex flex-col items-center'>
         <div className='w-[360px] flex flex-col items-center gap-6 mt-10 mb-40'>
           <section className='mt-10'>

src/pageLayout/MypageLayout/MyPageLayout.tsx

@@ -27,7 +27,7 @@ export default function MyPageLayout() {
 
   return (
     <div className='bg-background-100 w-full relative h-dvh'>
-      <Header icon='back' routerPage='/mypage' isLogo={false} insteadOfLogo='' isProfileIcon={false} isShareIcon={false} isButton={false} textInButton='' disabled={false} onClick={() => {}} />
+      <Header icon='back' isLogo={false} insteadOfLogo='' isProfileIcon={false} isShareIcon={false} isButton={false} textInButton='' disabled={false} onClick={() => {}} />
       <div className='bg-background-100 w-full h-[200px]'></div>
       <div className='w-full flex flex-col items-center bg-blue-100 rounded-3xl relative shadow-3xl'>
         <Profile image={data.image} nickname={data.nickname} />

src/pageLayout/SearchLayout/SearchLayout.tsx

@@ -100,7 +100,7 @@ function SearchLayout() {
 
   return (
     <>
-      <Header icon='search' routerPage='/search' isLogo insteadOfLogo='' isProfileIcon isShareIcon={false} isButton={false} textInButton='' disabled={false} onClick={() => {}} />;
+      <Header icon='search' isLogo insteadOfLogo='' isProfileIcon isShareIcon={false} isButton={false} textInButton='' disabled={false} onClick={() => {}} />;
       <div className='container mx-auto max-w-screen-sm bg-blue-100'>
         <SearchBar onSearch={handleSearch} currentSearch={currentSearch} />
         <RecentSearches searches={searches} onSearch={handleSearch} onClear={handleClearAll} />

src/pages/epigrams/[id]/index.tsx

@@ -22,7 +22,7 @@ function DetailPage() {
 
   return (
     <div className='flex flex-col '>
-      <Header icon='search' routerPage='/search' isLogo insteadOfLogo='' isProfileIcon isShareIcon={false} isButton={false} textInButton='' disabled={false} onClick={() => {}} />
+      <Header icon='search' isLogo insteadOfLogo='' isProfileIcon isShareIcon={false} isButton={false} textInButton='' disabled={false} onClick={() => {}} />
       <EpigramFigure epigram={epigram} currentUserId={userData?.id} />
       <EpigramComment epigramId={epigram.id} currentUserId={userData?.id} userImage={userData?.image} />
     </div>