fix: 마이페이지 리스트 요소 분리

src/components/molecules/NavWhiteBoxItem.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import Link from 'next/link';
+import { AngleIcon } from '@/assets/icons';
+
+interface NavWhiteBoxItemProps {
+  name: string;
+  linkTo: string;
+  text?: string;
+  svgComponent: React.ReactNode;
+}
+
+const NavWhiteBoxItem: React.FC<NavWhiteBoxItemProps> = ({
+  name,
+  linkTo,
+  text,
+  svgComponent,
+}) => {
+  return (
+    <Link href={linkTo} className="w-full flex justify-between items-center">
+      <div className="flex items-center gap-[12px]">
+        {svgComponent} {name}
+      </div>
+      {text ? (
+        <div className="text-gray4">{text}</div>
+      ) : (
+        <AngleIcon
+          fill={'gray'}
+          width={16}
+          height={16}
+          transform="rotate(180)"
+        />
+      )}
+    </Link>
+  );
+};
+
+export default NavWhiteBoxItem;

src/components/molecules/index.ts

@@ -8,3 +8,4 @@ export { default as IngredientAddItemContainer } from './IngredientAddItemContai
 export { default as FridgeListItem } from './FridgeListItem';
 export { default as FriendsFridgeItem } from './FriendsFridgeItem';
 export { default as MyFridgeInfo } from './MyFridgeInfo';
+export { default as NavWhiteBoxItem } from './NavWhiteBoxItem';

src/components/organisms/NavWhiteBox.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { WhiteContainer } from '../atoms';
-import Link from 'next/link';
-import { AngleIcon } from '@/assets/icons';
+import { NavWhiteBoxItem } from '../molecules';
 
 interface NavItem {
   name: string;
@@ -19,25 +18,8 @@ const NavWhiteBox: React.FC<NavWhiteBoxProps> = ({ label, list }) => {
   return (
     <WhiteContainer>
       <label className="w-full text-gray6 body1-regular">{label}</label>
-      {list.map((navItem) => (
-        <Link
-          href={navItem.linkTo}
-          className="w-full flex justify-between items-center"
-        >
-          <div className="flex items-center gap-[12px]">
-            {navItem.svgComponent} {navItem.name}
-          </div>
-          {navItem.text ? (
-            <div className="text-gray4">{navItem.text}</div>
-          ) : (
-            <AngleIcon
-              fill={'gray'}
-              width={16}
-              height={16}
-              transform="rotate(180)"
-            />
-          )}
-        </Link>
+      {list.map((navItem, index) => (
+        <NavWhiteBoxItem key={index} {...navItem} />
       ))}
     </WhiteContainer>
   );