From e535720bce19dd0388a717e93d5502817be2f46f Mon Sep 17 00:00:00 2001 From: JAEMOONLEE Date: Tue, 26 Sep 2023 10:56:17 +0900 Subject: [PATCH] =?UTF-8?q?[feat]=20UserProfile=20=EB=B6=80=EB=B6=84=20Mou?= =?UTF-8?q?seHover=EA=B0=80=20=EC=99=9C=20=EC=95=88=EB=90=98=EC=A7=80..?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/ProfileCard/index.tsx | 91 +++++++++++++++++++++++++------- public/icons/LogOut.svg | 5 ++ public/icons/Password.svg | 5 ++ public/icons/Vector 115.svg | 3 ++ public/icons/changePassword.svg | 5 ++ public/icons/myPosting.svg | 5 ++ 6 files changed, 94 insertions(+), 20 deletions(-) create mode 100644 public/icons/LogOut.svg create mode 100644 public/icons/Password.svg create mode 100644 public/icons/Vector 115.svg create mode 100644 public/icons/changePassword.svg create mode 100644 public/icons/myPosting.svg 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}
+
+
+ +
+