diff --git a/src/app/mydashboard/layout.tsx b/src/app/mydashboard/layout.tsx index 371f2f8..a7f359c 100644 --- a/src/app/mydashboard/layout.tsx +++ b/src/app/mydashboard/layout.tsx @@ -1,11 +1,12 @@ import Sidebar from '@/components/Sidebar/Sidebar'; import { ReactNode } from 'react'; +import Header from '@/components/dashboard-header/Header'; export default function Layout({ children }: { children: ReactNode }) { return (
- +
{children}
); diff --git a/src/components/dashboard-header/Header.tsx b/src/components/dashboard-header/Header.tsx new file mode 100644 index 0000000..38c0d3a --- /dev/null +++ b/src/components/dashboard-header/Header.tsx @@ -0,0 +1,72 @@ +'use client'; + +import React from 'react'; +import { usePathname } from 'next/navigation'; +import Image from 'next/image'; +import Crown from '@/assets/icons/crown.svg'; +import Title from './Title'; +import SettingBtn from './SettingBtn'; +import Members from './Members'; +import Profile from './Profile'; + +interface HeaderProps { + title?: string; + showCrown?: boolean; + showSetting?: boolean; + showMembers?: boolean; + showProfile?: boolean; +} + +const titleMap: { [key: string]: string } = { + '/mydashboard': '내 대시보드', + '/mypage': '계정관리', +}; + +// TODO : API 연동 이후 추가 작업 예정, 우선 mock 데이터로 집어넣어놨습니다. +interface UserType { + nickname: string; + profileImageUrl: string; +} + +const mockUsers: UserType[] = [ + { nickname: '배유철', profileImageUrl: 'B' }, + { nickname: '김철수', profileImageUrl: 'K' }, + { nickname: '이영희', profileImageUrl: 'L' }, +]; + +export default function Header({ showCrown = false, showSetting = false, showMembers = false, showProfile = false }: HeaderProps) { + const pathname = usePathname(); + const title = titleMap[pathname] || '내 대시보드'; + const handleSettingClick = () => { + console.log('관리 버튼 클릭'); + // TODO : 디버깅 용도 console.log API 기능 구현 후 수정 예정 + }; + + const handleInviteClick = () => { + console.log('초대 버튼 클릭'); + // TODO : 디버깅 용도 console.log API 기능 구현 후 수정 예정 + }; + + const handleProfileClick = () => { + console.log('프로필 버튼 클릭'); + // TODO : 디버깅 용도 console.log API 기능 구현 후 수정 예정 + }; + + return ( +
+ {/* 왼쪽 제목 그룹 */} +
+ + {showCrown && <Image src={Crown} alt='방장 표시' width={20} height={16} className='hidden lg:block' />} + </div> + {/* 오른쪽 버튼 그룹 */} + <div className='flex items-center'> + <div className='flex items-center gap-[16px] border-r border-gray-30 pr-[12px] sm:gap-[32px] sm:pr-[24px] md:gap-[40px] md:pr-[32px]'> + {showSetting && <SettingBtn onSettingClick={handleSettingClick} onInviteClick={handleInviteClick} />} + {showMembers && <Members users={mockUsers} />} + </div> + {showProfile && <Profile nickname={mockUsers[0].nickname} profileImageUrl={mockUsers[0].profileImageUrl} onClick={handleProfileClick} />} + </div> + </header> + ); +} diff --git a/src/components/dashboard-header/Members.tsx b/src/components/dashboard-header/Members.tsx new file mode 100644 index 0000000..568c7d5 --- /dev/null +++ b/src/components/dashboard-header/Members.tsx @@ -0,0 +1,17 @@ +import React from 'react'; + +interface MembersProps { + users: { profileImageUrl: string }[]; +} + +export default function Members({ users }: MembersProps) { + return ( + <div className='flex'> + {users.map((user, index) => ( + <span key={index} className='-ml-[8px] flex h-[34px] w-[34px] items-center justify-center rounded-full border-2 border-white bg-green-30 text-white sm:h-[38px] sm:w-[38px]'> + {user.profileImageUrl} + </span> + ))} + </div> + ); +} diff --git a/src/components/dashboard-header/Profile.tsx b/src/components/dashboard-header/Profile.tsx new file mode 100644 index 0000000..327c094 --- /dev/null +++ b/src/components/dashboard-header/Profile.tsx @@ -0,0 +1,16 @@ +import React from 'react'; + +interface ProfileProps { + nickname: string; + profileImageUrl: string; + onClick: () => void; +} + +export default function Profile({ nickname, profileImageUrl, onClick }: ProfileProps) { + return ( + <button onClick={onClick} className='mr-[40px] flex items-center justify-center gap-[12px] pl-[12px] sm:pl-[24px] md:pl-[32px]'> + <span className='flex h-[34px] w-[34px] items-center justify-center rounded-full border-2 border-white bg-green-30 text-white sm:h-[38px] sm:w-[38px]'>{profileImageUrl}</span> + <span className='hidden text-[16px] md:block'>{nickname}</span> + </button> + ); +} diff --git a/src/components/dashboard-header/SettingBtn.tsx b/src/components/dashboard-header/SettingBtn.tsx new file mode 100644 index 0000000..679aca8 --- /dev/null +++ b/src/components/dashboard-header/SettingBtn.tsx @@ -0,0 +1,30 @@ +import React from 'react'; +import Image from 'next/image'; +import Setting from '@/assets/icons/setting.svg'; +import AddBox from '@/assets/icons/add_box.svg'; + +interface SettingBtnProps { + onSettingClick: () => void; + onInviteClick: () => void; +} + +export default function SettingBtn({ onSettingClick, onInviteClick }: SettingBtnProps) { + return ( + <div className='flex items-center gap-[6px] sm:gap-[12px] md:gap-[16px]'> + <button + className='flex h-[30px] w-[49px] items-center justify-center gap-[8px] rounded-[8px] border border-gray-30 text-[14px] text-gray-50 transition-transform hover:scale-105 hover:border-violet-20 hover:bg-violet-20 hover:text-white sm:h-[40px] sm:w-[88px] md:text-[16px]' + onClick={onSettingClick} + > + <Image src={Setting} alt='관리 버튼' width={15} height={15} className='hidden sm:block' /> + 관리 + </button> + <button + className='flex h-[30px] w-[73px] items-center justify-center gap-[8px] rounded-[8px] border border-gray-30 text-[14px] text-gray-50 transition-transform hover:scale-105 hover:border-violet-20 hover:bg-violet-20 hover:text-white sm:h-[40px] sm:w-[116px] md:text-[14px]' + onClick={onInviteClick} + > + <Image src={AddBox} alt='초대 버튼' width={15} height={15} className='hidden sm:block' /> + 초대하기 + </button> + </div> + ); +} diff --git a/src/components/dashboard-header/Title.tsx b/src/components/dashboard-header/Title.tsx new file mode 100644 index 0000000..c124769 --- /dev/null +++ b/src/components/dashboard-header/Title.tsx @@ -0,0 +1,13 @@ +import React from 'react'; + +interface TitleProps { + title?: string; +} + +export default function Title({ title }: TitleProps) { + return ( + <div className='flex items-center'> + <span className='hidden text-[20px] font-bold lg:block'>{title}</span> + </div> + ); +}