[HotFix]: 프로필 피드 설정 아이콘 위치 및 책 추가하기 버튼 추가

src/components/Button/LinkButton.tsx

@@ -9,7 +9,7 @@ interface Props {
   children: React.ReactNode;
   route: string;
   disabled?: boolean;
-  theme?: 'normal' | 'light' | 'gray';
+  theme?: 'normal' | 'light' | 'gray' | 'ghost';
   extraClass?: string;
   isReplace?: boolean;
 }

src/features/Profile/components/Feed/NoProfileFeed.tsx

@@ -1,7 +1,11 @@
 import Image from 'next/image';
 import { IMAGES } from '@/constants/images';
+import Button from '@/components/Button/Button';
+import { useCustomRouter } from '@/hooks/useCustomRouter';
+import { PAGES } from '@/constants/page';
 
 function NoProfileFeed() {
+  const { navigate } = useCustomRouter('profile');
   return (
     <div className='mt-3 flex w-full flex-col items-center justify-center gap-[15px]'>
       <Image
@@ -16,6 +20,9 @@ function NoProfileFeed() {
           리뷰를 작성하면 여기에 표시됩니다.
         </p>
       </div>
+      <Button theme='normal' onClick={() => navigate(PAGES.SEARCH)}>
+        책 추가하기
+      </Button>
     </div>
   );
 }

src/features/Profile/components/Profile/Profile.tsx

@@ -21,7 +21,7 @@ function Profile({ userId, isRootUser = false, profileDetail }: Props) {
       <UserType profileDetail={profileDetail} />
       {isRootUser && (
         <div className='flex px-page'>
-          <LinkButton route={getPath.profileEdit(userId)} theme='normal'>
+          <LinkButton route={getPath.profileEdit(userId)} theme='ghost'>
             프로필 편집
           </LinkButton>
         </div>

src/features/Profile/components/Profile/ProfilePageHeader.tsx

@@ -15,15 +15,17 @@ function ProfilePageHeader({ isRootUser, userId }: Props) {
   return (
     <WellEntryHeader title='프로필' hasBackButton={!isRootUser}>
       {isRootUser && (
-        <CustomMotionLink
-          id='setting-button'
-          type='button'
-          whileTap={{ scale: 0.9 }}
-          href={getPath.profileSetting(userId)}
-          className='absolute right-[28px] top-[35px] z-70'
-        >
-          <SettingIcon />
-        </CustomMotionLink>
+        <div className='safe-header absolute left-[50%] z-70 flex w-[450px] translate-x-[-50%] gap-[20px] pt-[70px] mobile:left-0 mobile:w-full mobile:translate-x-0'>
+          <CustomMotionLink
+            id='setting-button'
+            type='button'
+            whileTap={{ scale: 0.9 }}
+            href={getPath.profileSetting(userId)}
+            className='absolute right-[28px] top-[28px] z-70'
+          >
+            <SettingIcon />
+          </CustomMotionLink>
+        </div>
       )}
     </WellEntryHeader>
   );

src/styles/buttons.css

@@ -19,6 +19,9 @@
   .button-error {
     @apply button-common bg-error text-white;
   }
+  .button-ghost {
+    @apply button-common border border-main bg-white text-main;
+  }
   .add-button-wrapper {
     @apply w-full px-page pb-[24px];
   }

src/utils/getButtonColor.ts

@@ -11,6 +11,8 @@ export const getButtonColor = (theme: string) => {
       return 'button-gray';
     case 'light':
       return 'button-light';
+    case 'ghost':
+      return 'button-ghost';
     default:
       return `button-common ${theme}`;
   }