[Fix] 프로필 페이지 버튼 표시 분기처리(내 페이지, 다른 사람 페이지)

src/app/(user)/mypage/page.tsx

@@ -1,5 +1,5 @@
 'use client';
-import { ProfileInfo, ProfileSetting } from '@/components/pages/profile';
+import { MyPageInfo, MyPageSetting } from '@/components/pages/user/mypage';
 import { useGetUser } from '@/hooks/use-user';
 
 const MyPage = () => {
@@ -9,9 +9,9 @@ const MyPage = () => {
   const { data: user } = useGetUser({ userId });
   if (!user) return null;
   return (
-    <div className='flex min-h-[calc(100dvh-113px)] flex-col justify-between bg-gray-50'>
-      <ProfileInfo user={user} />
-      <ProfileSetting user={user} />
+    <div className='flex min-h-[calc(100dvh-113px)] flex-col justify-between'>
+      <MyPageInfo user={user} />
+      <MyPageSetting user={user} />
     </div>
   );
 };

src/app/(user)/profile/[userId]/page.tsx

@@ -2,7 +2,7 @@
 
 import { use } from 'react';
 
-import { ProfileInfo } from '@/components/pages/profile';
+import { ProfileInfo } from '@/components/pages/user/profile';
 import { useGetUser } from '@/hooks/use-user';
 
 interface Props {
@@ -17,11 +17,7 @@ const ProfilePage = ({ params }: Props) => {
 
   if (!user) return null;
 
-  return (
-    <div className='bg-gray-50'>
-      <ProfileInfo user={user} />
-    </div>
-  );
+  return <ProfileInfo user={user} />;
 };
 
 export default ProfilePage;

src/components/pages/user/mypage/index.ts

@@ -0,0 +1,2 @@
+export { MyPageInfo } from './mypage-info';
+export { MyPageSetting } from './mypage-setting';

src/components/pages/profile/profile-info/index.tsx → src/components/pages/user/mypage/mypage-info/index.tsx

@@ -2,16 +2,18 @@
 import { Button, useModal } from '@/components/ui';
 import { User } from '@/types/service/user';
 
-import { ProfileCard } from '../profile-card';
-import { ProfileDescription } from '../profile-description';
-import { ProfileEditModal } from '../profile-edit-modal';
-import { ProfileFollowsBadge } from '../profile-follows-badge';
+import {
+  ProfileCard,
+  ProfileDescription,
+  ProfileEditModal,
+  ProfileFollowsBadge,
+} from '../../profile';
 
 interface Props {
   user: User;
 }
 
-export const ProfileInfo = ({ user }: Props) => {
+export const MyPageInfo = ({ user }: Props) => {
   const { open } = useModal();
 
   const handleButtonClick = () => {

src/components/pages/profile/profile-setting/profile-setting-button/index.tsx → src/components/pages/user/mypage/mypage-setting-button/index.tsx

@@ -9,7 +9,7 @@ import { cn } from '@/lib/utils';
 interface ToggleButtonProps extends Omit<ButtonProps, 'value'> {
   value?: boolean;
 }
-export const ProfileToggleButton = ({ children, value = false, ...props }: ToggleButtonProps) => {
+export const MyPageToggleButton = ({ children, value = false, ...props }: ToggleButtonProps) => {
   return (
     <Button {...props}>
       {children}
@@ -20,7 +20,7 @@ export const ProfileToggleButton = ({ children, value = false, ...props }: Toggl
 
 type ActionButtonProps = ButtonProps;
 
-export const ProfileActionButton = ({ children, ...props }: ActionButtonProps) => {
+export const MyPageActionButton = ({ children, ...props }: ActionButtonProps) => {
   return <Button {...props}>{children}</Button>;
 };
 

src/components/pages/user/mypage/mypage-setting/index.tsx

@@ -0,0 +1,26 @@
+'use client';
+import { useState } from 'react';
+
+import { User } from '@/types/service/user';
+
+import { MyPageActionButton, MyPageToggleButton } from '../mypage-setting-button';
+
+interface Props {
+  user: User;
+}
+
+export const MyPageSetting = ({ user }: Props) => {
+  console.log(user);
+  // useState 로직은 추후 삭제 예정
+  const [isOn, setIsOn] = useState(false);
+
+  return (
+    <section className='bg-mono-white flex flex-col gap-3 px-3 py-6'>
+      <MyPageToggleButton value={isOn} onClick={() => setIsOn((prev) => !prev)}>
+        알림 받기
+      </MyPageToggleButton>
+      <MyPageActionButton onClick={() => console.log('로그아웃')}>로그아웃</MyPageActionButton>
+      <MyPageActionButton onClick={() => console.log('회원탈퇴')}>회원탈퇴</MyPageActionButton>
+    </section>
+  );
+};

src/components/pages/profile/index.ts → src/components/pages/user/profile/index.ts

@@ -4,4 +4,3 @@ export { ProfileDescriptionBadge } from './profile-description-badge';
 export { ProfileEditModal } from './profile-edit-modal';
 export { ProfileFollowsBadge } from './profile-follows-badge';
 export { ProfileInfo } from './profile-info';
-export { ProfileSetting } from './profile-setting';

src/components/pages/user/profile/profile-info/index.tsx

@@ -0,0 +1,29 @@
+'use client';
+import { Button } from '@/components/ui';
+import { User } from '@/types/service/user';
+
+import { ProfileCard } from '../profile-card';
+import { ProfileDescription } from '../profile-description';
+import { ProfileFollowsBadge } from '../profile-follows-badge';
+
+interface Props {
+  user: User;
+}
+
+export const ProfileInfo = ({ user }: Props) => {
+  const handleFollowClick = () => {};
+
+  return (
+    <section className='px-4 py-8'>
+      <ProfileCard user={user} />
+      <ProfileFollowsBadge user={user} />
+      {!user.isFollowing && <Button onClick={handleFollowClick}>팔로우 하기</Button>}
+      {user.isFollowing && (
+        <Button variant='tertiary' onClick={handleFollowClick}>
+          팔로우 취소
+        </Button>
+      )}
+      <ProfileDescription user={user} />
+    </section>
+  );
+};

src/mock/service/user/users-mock.ts

@@ -15,6 +15,7 @@ export const mockUserItems: User[] = [
     createdAt: '2025-12-07T17:00:00+09:00',
     groupJoinedCnt: 5,
     groupCreatedCnt: 3,
+    isFollowing: true,
   },
   {
     userId: 2,
@@ -30,6 +31,7 @@ export const mockUserItems: User[] = [
     createdAt: '2025-08-03T17:00:00+09:00',
     groupJoinedCnt: 5,
     groupCreatedCnt: 3,
+    isFollowing: true,
   },
   {
     userId: 3,
@@ -45,5 +47,6 @@ export const mockUserItems: User[] = [
     createdAt: '2025-11-03T17:00:00+09:00',
     groupJoinedCnt: 2,
     groupCreatedCnt: 1,
+    isFollowing: false,
   },
 ];

src/types/service/user.ts

@@ -11,6 +11,7 @@ export interface User {
   groupCreatedCnt: number;
   isNotificationEnabled: boolean;
   createdAt: string;
+  isFollowing: boolean;
 }
 
 export interface GetUserPayload {