feat: 워크스페이스 purpose별 navigation 분기 구현 (#15) #16
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,3 @@ | ||
| // 목업 워크스페이스 데이터와 타입의 공개 API입니다. | ||
| export type { Workspace, WorkspacePurpose } from './model/workspace.types'; | ||
| export { mockWorkspace } from './model/mock-workspace'; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,8 @@ | ||
| // Supabase 워크스페이스 데이터 연결 전 shell에서 사용하는 워크스페이스 타입입니다. | ||
| export type WorkspacePurpose = 'team-project' | 'side-project' | 'store-operation'; | ||
|
|
||
| export interface Workspace { | ||
| id: string; | ||
| name: string; | ||
| purpose: WorkspacePurpose; | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| // 워크스페이스 목적에 맞는 shell navigation 항목을 반환합니다. | ||
| import type { WorkspacePurpose } from '@/entities/workspace'; | ||
| import { workspaceNavigationByPurpose } from '@/widgets/workspace-shell/model/workspace-navigation'; | ||
|
|
||
| export function getWorkspaceNavigation(purpose: WorkspacePurpose) { | ||
| return workspaceNavigationByPurpose[purpose]; | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -4,19 +4,21 @@ | |
| import { Bell, Search, UserRoundPlus } from 'lucide-react'; | ||
| import { usePathname } from 'next/navigation'; | ||
| import { mockCurrentWorkspaceMember } from '@/entities/workspace-member'; | ||
| import type { WorkspaceNavigationItem } from '../model/workspace-navigation'; | ||
|
|
||
| interface WorkspaceHeaderProps { | ||
| navigationItems: WorkspaceNavigationItem[]; | ||
| } | ||
|
|
||
| function getCurrentPageTitle(pathname: string, navigationItems: WorkspaceNavigationItem[]): string { | ||
| const currentNavigationItem = navigationItems.find((item) => pathname.endsWith(`/${item.href}`)); | ||
|
|
||
| return currentNavigationItem?.label ?? '대시보드'; | ||
| } | ||
|
|
||
| export function WorkspaceHeader({ navigationItems }: WorkspaceHeaderProps) { | ||
| const pathname = usePathname(); | ||
| const title = getCurrentPageTitle(pathname, navigationItems); | ||
|
|
||
| return ( | ||
| <header className="flex h-[72px] items-center justify-between border-b border-slate-200 bg-white px-8"> | ||
|
|
@@ -46,7 +48,7 @@ export function WorkspaceHeader() { | |
| className="relative flex h-10 w-10 items-center justify-center rounded-full text-slate-500 hover:bg-slate-100" | ||
| > | ||
| <Bell className="h-5 w-5" aria-hidden="true" /> | ||
| <span className="absolute top-2 right-2 h-2 w-2 rounded-full bg-rose-500" /> | ||
| </button> | ||
|
|
||
| <div className="flex h-10 w-10 items-center justify-center rounded-full bg-orange-400 text-sm font-bold text-white"> | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -4,6 +4,8 @@ | |
| import { useState } from 'react'; | ||
| import { WorkspaceHeader } from './WorkspaceHeader'; | ||
| import { WorkspaceSidebar } from './WorkspaceSidebar'; | ||
| import { mockWorkspace } from '@/entities/workspace'; | ||
| import { getWorkspaceNavigation } from '@/widgets/workspace-shell/lib/get-workspace-navigation'; | ||
|
|
||
| interface WorkspaceShellProps { | ||
| workspaceId: string; | ||
|
|
@@ -12,17 +14,21 @@ interface WorkspaceShellProps { | |
|
|
||
| export function WorkspaceShell({ workspaceId, children }: WorkspaceShellProps) { | ||
| const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false); | ||
| const workspace = mockWorkspace; // 나중에는 workspaceId로 Supabase 조회 | ||
| const navigationItems = getWorkspaceNavigation(workspace.purpose); | ||
|
Comment on lines
+17
to
+18
There was a problem hiding this comment. 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win 향후 Supabase 교체를 대비해 workspace 조회를 함수로 캡슐화하는 것을 고려하세요. 현재 ♻️ 제안- const workspace = mockWorkspace; // 나중에는 workspaceId로 Supabase 조회
+ const workspace = getWorkspace(workspaceId); // 현재는 mock, 추후 Supabase 조회로 교체// 예: src/entities/workspace/model/get-workspace.ts
export function getWorkspace(workspaceId: string): Workspace {
// TODO: Supabase 조회로 교체
return mockWorkspace;
}🤖 Prompt for AI Agents |
||
|
|
||
| return ( | ||
| <div className="flex h-screen overflow-hidden bg-[#f7f8fc]"> | ||
| <WorkspaceSidebar | ||
| workspace={workspace} | ||
| workspaceId={workspaceId} | ||
| isCollapsed={isSidebarCollapsed} | ||
| navigationItems={navigationItems} | ||
| onToggleCollapsed={() => setIsSidebarCollapsed((current) => !current)} | ||
| /> | ||
|
|
||
| <div className="flex h-screen min-w-0 flex-1 flex-col"> | ||
| <WorkspaceHeader navigationItems={navigationItems} /> | ||
| <main className="min-h-0 flex-1 overflow-y-auto px-8 py-8">{children}</main> | ||
| </div> | ||
| </div> | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -5,20 +5,24 @@ import Image from 'next/image'; | |
| import Link from 'next/link'; | ||
| import { ChevronRight, LogOut, Menu, Store } from 'lucide-react'; | ||
| import { usePathname } from 'next/navigation'; | ||
| import type { Workspace } from '@/entities/workspace'; | ||
| import { mockCurrentWorkspaceMember } from '@/entities/workspace-member'; | ||
| import { cn } from '@/shared/lib/utils'; | ||
| import type { WorkspaceNavigationItem } from '../model/workspace-navigation'; | ||
|
|
||
| interface WorkspaceSidebarProps { | ||
| workspace: Workspace; | ||
| workspaceId: string; | ||
| isCollapsed: boolean; | ||
| navigationItems: WorkspaceNavigationItem[]; | ||
| onToggleCollapsed: () => void; | ||
| } | ||
|
|
||
| export function WorkspaceSidebar({ | ||
| workspace, | ||
| workspaceId, | ||
| isCollapsed, | ||
| navigationItems, | ||
| onToggleCollapsed, | ||
| }: WorkspaceSidebarProps) { | ||
| const pathname = usePathname(); | ||
|
|
@@ -50,7 +54,7 @@ export function WorkspaceSidebar({ | |
| onClick={onToggleCollapsed} | ||
| className={cn( | ||
| 'flex h-9 w-9 items-center justify-center rounded-lg text-slate-500 hover:bg-slate-100', | ||
| isCollapsed && 'absolute top-[84px] left-1/2 -translate-x-1/2', | ||
| )} | ||
| > | ||
| <Menu className="h-5 w-5" aria-hidden="true" /> | ||
|
|
@@ -69,8 +73,10 @@ export function WorkspaceSidebar({ | |
| <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-orange-400 text-white"> | ||
| <Store className="h-4 w-4" aria-hidden="true" /> | ||
| </span> | ||
| <span | ||
| className={cn('truncate text-sm font-bold text-slate-950', isCollapsed && 'sr-only')} | ||
| > | ||
| {workspace.name} | ||
| </span> | ||
| </span> | ||
| {!isCollapsed ? ( | ||
|
|
@@ -80,7 +86,7 @@ export function WorkspaceSidebar({ | |
| </div> | ||
|
|
||
| <nav className="flex-1 space-y-1 px-3 py-4"> | ||
| {navigationItems.map((item) => { | ||
| const Icon = item.icon; | ||
| const href = `/workspaces/${workspaceId}/${item.href}`; | ||
| const isActive = pathname === href; | ||
|
|
||
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win
sideProjectNavigationItems와teamProjectNavigationItems의 항목 중복.두 배열은 대시보드/캘린더/회의록/자료실/채팅/진행률 차트/설정 7개 항목이 동일하고, 스프린트보드↔프로젝트관리 라벨 및 공지 유무만 다릅니다. 공통 항목을 추출하면 향후 두 배열이 따로 갱신되며 어긋나는 것을 방지할 수 있습니다.
♻️ 공통 항목 추출 예시
📝 Committable suggestion
🤖 Prompt for AI Agents