jhynsoo/worlabel
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'fe/refactor/header' into 'fe/develop'

Browse Source 
Refactor: 헤더 수정

See merge request s11-s-project/S11P21S002!208
This commit is contained in:
홍창기 2024-09-27 09:41:35 +09:00
commit 9cfdc10121
2 changed files with 45 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
frontend/src/components/Header/WorkspaceNavigation.tsx Normal file
View File

@ -0,0 +1,42 @@
import { cn } from '@/lib/utils';
import { Link, useParams } from 'react-router-dom';
import useAuthStore from '@/stores/useAuthStore';
import useWorkspaceListQuery from '@/queries/workspaces/useWorkspaceListQuery';
export default function WorkspaceNavigation() {
const { workspaceId } = useParams<{ workspaceId: string }>();
const profile = useAuthStore((state) => state.profile);
const memberId = profile?.id;
const { data: workspacesResponse } = useWorkspaceListQuery(memberId ?? 0);
const workspaces = workspacesResponse?.workspaceResponses || [];
const activeWorkspaceId = workspaceId ?? workspaces[0]?.id;
return (
<nav className="hidden items-center gap-5 md:flex">
<Link
to={activeWorkspaceId ? `/browse/${activeWorkspaceId}` : '/browse'}
className={cn('text-color-text-default-default', 'font-body-strong', 'text-sm sm:text-base md:text-lg')}
>
workspace
</Link>
{activeWorkspaceId && (
<>
<Link
to={`/workspace/${activeWorkspaceId}`}
className={cn('text-color-text-default-default', 'font-body', 'text-sm sm:text-base md:text-lg')}
>
labeling
</Link>
<Link
to={`/admin/${activeWorkspaceId}`}
className={cn('text-color-text-default-default', 'font-body', 'text-sm sm:text-base md:text-lg')}
>
admin
</Link>
</>
)}
</nav>
);
}

33
frontend/src/components/Header/index.tsx
View File

@ -1,16 +1,14 @@
import * as React from 'react';
import { cn } from '@/lib/utils';
import { Bell } from 'lucide-react';
import { useLocation, Link, useParams } from 'react-router-dom';
import { useLocation, Link } from 'react-router-dom';
import UserProfileModal from './UserProfileModal';
import WorkspaceNavigation from './WorkspaceNavigation';
export interface HeaderProps extends React.HTMLAttributes<HTMLDivElement> {}
export default function Header({ className, ...props }: HeaderProps) {
const location = useLocation();
const { workspaceId } = useParams<{ workspaceId: string }>();
const isWorkspaceIdNaN = isNaN(Number(workspaceId));
const isHomePage = location.pathname === '/';
return (
@ -30,32 +28,7 @@ export default function Header({ className, ...props }: HeaderProps) {
WorLabel
</Link>
{!isHomePage && (
<nav className="hidden items-center gap-5 md:flex">
<Link
to={isWorkspaceIdNaN ? '/browse' : `/browse/${workspaceId}`}
className={cn('text-color-text-default-default', 'font-body-strong', 'text-sm sm:text-base md:text-lg')}
>
workspace
</Link>
{!isWorkspaceIdNaN && (
<>
<Link
to={`/workspace/${workspaceId}`}
className={cn('text-color-text-default-default', 'font-body', 'text-sm sm:text-base md:text-lg')}
>
labeling
</Link>
<Link
to={`/admin/${workspaceId}`}
className={cn('text-color-text-default-default', 'font-body', 'text-sm sm:text-base md:text-lg')}
>
admin
</Link>
</>
)}
</nav>
)}
{!isHomePage && <WorkspaceNavigation />}
</div>
{!isHomePage && (