diff --git a/components/ProfileCard/index.tsx b/components/ProfileCard/index.tsx index 3c7936d..b6acf15 100644 --- a/components/ProfileCard/index.tsx +++ b/components/ProfileCard/index.tsx @@ -1,37 +1,88 @@ -import React from 'react'; +import React, { useState } from 'react'; import { Textarea } from '@/components/index.tsx'; import { useForm } from 'react-hook-form'; +import MyPosting from '@/public/icons/myPosting.svg'; +import ChangePassword from '@/public/icons/Password.svg'; +import Logout from '@/public/icons/LogOut.svg'; +import Vector from '@/public/icons/Vector 115.svg'; +import { useRouter } from 'next/router'; interface ProfileCardProps { name : string; age: number; gender : 'Male' | 'Female'; imageSrc : string; -} +}; + +interface ListItemProps { + IconComponent: React.FC>; + text: string; + route: string; + index: number; +}; + + export default function ProfileCard({ name, age, gender, imageSrc }: ProfileCardProps) { const { register } = useForm({ mode: 'onChange' }); + const [hoveredIndex, setHoveredIndex] = useState(null); + const router = useRouter(); + + const handleRouting = (route: string) => { + router.push(route); + } + const ListItem = ({ IconComponent, text, route, index }: ListItemProps) => ( +
{ console.log('mouseover', index); setHoveredIndex(index)} } + onMouseOut={() => setHoveredIndex(null)} + > +
+ handleRouting(route)}/> +
{text}
+
+ { hoveredIndex === index && } +
+ ); + + const items = [ + { IconComponent: MyPosting, text: "My postings", route: '/myPosting'}, + { IconComponent: ChangePassword, text: "Change password", route: '/resetPassword/step1'}, + { IconComponent: Logout, text: "Log out", route: "/"}, + ]; + + const ListContainer = () => ( +
+ {items.map((item, index) => ( + + ))} +
+ ); + return ( -
{/* flex-direction 변경 */} -
-
- {`${name}'s -
-
-
{name}
-
{age} years old | {gender}
-
-
- + <> +
+
+
+ {`${name}'s +
+
+
{name}
+
{age} years old | {gender}
+
+
+ +
+