[Refactor] 프로필,마이페이지 구조 리팩토링

src/app/login/_temp/login-temp-actions.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { MyPageActionButton } from '@/components/pages/user/mypage/mypage-setting-button';
+import { MyPageActionButton } from '@/components/pages/user/mypage/mypage-setting/mypage-setting-button';
 import { useLogout, useWithdraw } from '@/hooks/use-auth';
 
 const LoginTempActions = () => {

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

@@ -1,27 +1,19 @@
 'use client';
 import { useLogout, useWithdraw } from '@/hooks/use-auth';
-// import { useUpdateMyNotification } from '@/hooks/use-user/use-user-notification';
 import { User } from '@/types/service/user';
 
-import { MyPageActionButton, MyPageToggleButton as _ } from '../mypage-setting-button';
+import { MyPageActionButton } from './mypage-setting-button';
 
 interface Props {
   user: User;
 }
 
 export const MyPageSetting = ({ user: _ }: Props) => {
-  // const { mutate } = useUpdateMyNotification();
   const logout = useLogout();
   const withdraw = useWithdraw();
 
   return (
     <section className='bg-mono-white flex flex-col gap-3 px-3 py-6'>
-      {/* <MyPageToggleButton
-        value={user.isNotificationEnabled}
-        onClick={() => mutate({ isNotificationEnabled: !user.isNotificationEnabled })}
-      >
-        알림 받기
-      </MyPageToggleButton> */}
       <MyPageActionButton onClick={logout}>로그아웃</MyPageActionButton>
       <MyPageActionButton onClick={withdraw}>회원탈퇴</MyPageActionButton>
     </section>

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

@@ -1,6 +1,5 @@
 export { ProfileCard } from './profile-card';
 export { ProfileDescription } from './profile-description';
-export { ProfileDescriptionBadge } from './profile-description-badge';
 export { ProfileEditModal } from './profile-edit-modal';
 export { ProfileFollowsBadge } from './profile-follows-badge';
 export { ProfileFollowsModal } from './profile-follows-modal';

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

@@ -1,10 +1,7 @@
+import { Icon, IconId } from '@/components/icon';
+import { cn } from '@/lib/utils';
 import { User } from '@/types/service/user';
 
-import {
-  ProfileDescriptionBadge,
-  ProfileDescriptionBadgeProps,
-} from '../profile-description-badge';
-
 const formatISO = (dateString: string) => {
   const date = new Date(dateString);
   const y = date.getFullYear();
@@ -18,7 +15,11 @@ interface Props {
 }
 
 export const ProfileDescription = ({ user }: Props) => {
-  const listMap: ProfileDescriptionBadgeProps[] = [
+  const listMap: {
+    label: string;
+    iconId: IconId;
+    value: string;
+  }[] = [
     {
       label: 'MBTI',
       iconId: 'symbol',
@@ -41,10 +42,27 @@ export const ProfileDescription = ({ user }: Props) => {
     },
   ];
 
+  const PLACEHOLDER = '-';
+
   return (
-    <div className='bg-mono-white shadow-card mt-6 flex flex-col gap-5 rounded-3xl px-6 py-6.25'>
+    <div className='bg-mono-white mt-6 flex flex-col gap-5 rounded-3xl px-6 py-6.25 shadow-md'>
       {listMap.map((item) => (
-        <ProfileDescriptionBadge key={item.label} badgeItems={item} />
+        <div key={item.label} className='flex flex-row items-center gap-4'>
+          <div className='flex-center size-10 rounded-xl bg-gray-100'>
+            <Icon id={item.iconId} className='text-mint-500 size-6' />
+          </div>
+          <div className='flex flex-col'>
+            <span className='text-text-xs-medium text-gray-500'>{item.label}</span>
+            <span
+              className={cn(
+                'text-text-md-semibold h-6 text-gray-700',
+                !item.value && 'text-text-md-regular text-gray-500',
+              )}
+            >
+              {item.value || PLACEHOLDER}
+            </span>
+          </div>
+        </div>
       ))}
     </div>
   );

src/components/pages/user/profile/profile-edit-modal/index.tsx

@@ -21,7 +21,7 @@ import {
 } from '@/lib/schema/mypage';
 import { UpdateMyInfoPayloads, User } from '@/types/service/user';
 
-import { ImageField, MBTIField, MessageField, NickNameField } from '../profile-edit-fields';
+import { ImageField, MBTIField, MessageField, NickNameField } from './profile-edit-fields';
 
 interface Props {
   user: User;

src/components/pages/user/profile/profile-follows-badge/index.tsx

@@ -63,7 +63,7 @@ export const ProfileFollowsBadge = ({ user }: Props) => {
   }, [queryClient, user.userId]);
 
   return (
-    <div className='flex-center bg-mono-white shadow-card mb-4 rounded-3xl py-4'>
+    <div className='flex-center bg-mono-white mb-4 rounded-3xl py-4 shadow-sm'>
       {listMap.map((item, index) => (
         <Fragment key={item.label}>
           <button

src/styles/layout.css

@@ -26,8 +26,16 @@
   @apply flex flex-col items-center justify-between;
 }
 
-@utility shadow-card {
-  box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.08);
+@utility shadow-md {
+  box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.06);
+}
+
+@utility shadow-sm {
+  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.02);
+}
+
+@utility shadow-xs {
+  box-shadow: 0 -4px 6px 0 rgba(0, 0, 0, 0.02);
 }
 
 @utility scroll-stable {