Open
Conversation
📚 Storybook 배포 완료
|
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
📝 WalkthroughWalkthrough사이드바 상단에 워크스페이스 전환 UI(WorkspaceSwitcher)를 추가하고, 저장된 워크스페이스 조회/저장 API를 도입했으며, 워크스페이스 선택 우선순위 및 사이드바 기본 축소 상태를 변경했습니다. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant MainLayout
participant API
participant WorkspaceStore
participant Sidebar
participant WorkspaceSwitcher
User->>MainLayout: 페이지 진입
MainLayout->>API: getMyWorkspaces()
MainLayout->>API: getSavedWorkspace()
API-->>MainLayout: workspaces, savedWorkspace(orgId)
MainLayout->>WorkspaceStore: setSelectedOrgId(resolvedOrgId)
WorkspaceStore-->>Sidebar: selectedOrgId 반영
Sidebar->>WorkspaceSwitcher: isCollapsed prop 전달
User->>WorkspaceSwitcher: 드롭다운에서 워크스페이스 선택
WorkspaceSwitcher->>API: saveSelectedWorkspace(newOrgId)
API-->>WorkspaceSwitcher: 200 OK
WorkspaceSwitcher->>WorkspaceStore: setSelectedOrgId(newOrgId)
WorkspaceSwitcher->>API: invalidate ["my-workspaces","savedWorkspace"]
WorkspaceSwitcher-->>User: UI 업데이트
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related PRs
Suggested reviewers
세부 리뷰 포인트(요약)
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/components/Sidebar/WorkspaceSwitcher.tsx`:
- Around line 74-98: The dropdown trigger button that toggles isOpen (the
onClick using setIsOpen) must expose its state to assistive tech: add
aria-expanded (bound to isOpen) and aria-controls referencing a unique id on the
dropdown container (give the dropdown div an id, e.g. workspace-switcher-list or
similar) so screen readers know when it’s open; ensure the id used in
aria-controls matches the dropdown div id and keep current elements
(renderImage, ChevronIcon, currentWorkspace) unchanged.
- Around line 33-40: The saveWorkspace useMutation currently updates UI state
immediately and only invalidates ["my-workspaces"], leaving ["savedWorkspace"]
stale and providing no user feedback on failure; change the logic in the
useMutation defined around mutate/saveWorkspace so that UI state updates (calls
to setSelectedOrgId and setIsOpen) occur in onSuccess, call
queryClient.invalidateQueries for both ["my-workspaces"] and ["savedWorkspace"],
and implement onError to show a user-facing toast/alert (instead of only
console.error) to allow rollback/notification when saveSelectedWorkspace fails.
In `@src/layout/main/MainLayout.tsx`:
- Line 6: The import path casing for the Sidebar component in MainLayout.tsx is
incorrect: update the import of Sidebar (currently
"@/components/sidebar/Sidebar") to match the actual file casing
"@/components/Sidebar/Sidebar" so the module resolves on case-sensitive CI/OS;
locate the import statement in MainLayout.tsx and correct the path string to
exactly match the directory and filename casing used by the component
(Sidebar/Sidebar).
- Around line 19-22: The parallel queries getMyWorkspaces and getSavedWorkspace
cause the fallback selection to run before savedData arrives; update the
useCoreQuery call for getSavedWorkspace to also return its isFetched flag (e.g.,
const { data: savedData, isFetched: isSavedFetched } = useCoreQuery(...)) and
change the useEffect that sets the initial selectedOrgId (the block checking
selectedOrgId and applying fallback) so the fallback branch only runs when
isSavedFetched is true (i.e., guard the fallback logic with isSavedFetched) to
ensure savedData is applied when it resolves.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 9b4e54a7-f9de-423b-b72f-4edd3330fb97
📒 Files selected for processing (5)
src/api/workspace/org.tssrc/components/Sidebar/Sidebar.tsxsrc/components/Sidebar/WorkspaceSwitcher.tsxsrc/layout/main/MainLayout.tsxsrc/types/workspace/workspace.ts
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/components/sidebar/Sidebar.tsx`:
- Line 10: The import of WorkspaceSwitcher in Sidebar.tsx fails because there is
no ./WorkspaceSwitcher file; fix by either creating a new WorkspaceSwitcher
component file exporting the component (e.g., export default function
WorkspaceSwitcher(...) or named export) in
src/components/sidebar/WorkspaceSwitcher.tsx and then importing it as used in
Sidebar.tsx, or update the import in Sidebar.tsx to point to the correct
existing module path/name (and adjust default vs named import to match the
export). If you use a barrel index export for the sidebar folder, ensure
WorkspaceSwitcher is exported there and update Sidebar.tsx to import from that
barrel instead.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 0c797164-185c-4ace-9db8-485d0db99d3f
📒 Files selected for processing (4)
src/components/sidebar/Sidebar.tsxsrc/components/sidebar/SidebarItem.tsxsrc/components/sidebar/SubMenu.tsxsrc/hooks/sidebar/useSidebar.ts
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (3)
src/components/sidebar/WorkspaceSwitcher.tsx (3)
94-119: 드롭다운 외부 클릭 시 닫힘 처리가 없습니다.현재 드롭다운이 열린 상태에서 외부 영역을 클릭해도 드롭다운이 닫히지 않습니다. UX 개선을 위해 외부 클릭 감지 로직을 추가하는 것을 권장합니다.
💡 외부 클릭 감지 구현 예시
import { useRef, useEffect, useState } from "react"; // 컴포넌트 내부에 추가 const dropdownRef = useRef<HTMLDivElement>(null); useEffect(() => { const handleClickOutside = (event: MouseEvent) => { if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) { setIsOpen(false); } }; if (isOpen) { document.addEventListener("mousedown", handleClickOutside); } return () => { document.removeEventListener("mousedown", handleClickOutside); }; }, [isOpen]); // JSX에서 ref 연결 <div ref={dropdownRef} className="relative font-body1 mb-4">🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/sidebar/WorkspaceSwitcher.tsx` around lines 94 - 119, The dropdown in WorkspaceSwitcher.tsx doesn't close on outside clicks; add an element ref (e.g., dropdownRef) and a useEffect that registers a mousedown listener when isOpen is true which calls setIsOpen(false) if the event target is outside the ref.current, and removes the listener on cleanup; attach the ref to the wrapping div that renders the menu (the div using twMerge and mapping otherWorkspaces) so clicking outside that element will close the dropdown.
49-61: 이미지alt속성이 구체적이지 않아 접근성이 부족합니다.스크린 리더 사용자를 위해
alt텍스트에 워크스페이스 이름을 포함해야 합니다.♿ 접근성 개선 제안
const renderImage = (workspace: TWorkspace) => ( <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-component-sm overflow-hidden bg-bg-disabled/80 text-text-sub font-bold"> {workspace?.logoUrl ? ( <img src={workspace.logoUrl} className="w-full h-full object-cover" - alt="logo" + alt={`${workspace.name} 로고`} /> ) : ( workspace?.name?.[0] || "W" )} </div> );🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/sidebar/WorkspaceSwitcher.tsx` around lines 49 - 61, The img alt text in renderImage is not descriptive; update the <img> alt to include the workspace name (e.g., `${workspace.name} logo` or `${workspace.name} avatar`) and provide a sensible fallback when workspace.name is missing so screen readers get context; modify the renderImage function to use workspace.name when workspace.logoUrl is present and ensure the non-image branch still outputs an accessible label (e.g., first letter with aria-label or similarly descriptive text).
65-91: 드롭다운 토글 버튼에 ARIA 속성이 누락되었습니다.스크린 리더 사용자가 드롭다운 상태를 인지할 수 있도록
aria-expanded와aria-haspopup속성을 추가해야 합니다. 또한 키보드로 Escape 키를 눌러 드롭다운을 닫을 수 있도록 지원하면 좋습니다.♿ 접근성 속성 추가 제안
<button type="button" onClick={() => setIsOpen(!isOpen)} + aria-expanded={isOpen} + aria-haspopup="listbox" + onKeyDown={(e) => { + if (e.key === "Escape" && isOpen) { + setIsOpen(false); + } + }} className={twMerge( "flex items-center rounded-component-md transition-colors hover:bg-bg-surface", isCollapsed ? "h-[55px] w-[55px] justify-center p-0 mx-auto" : "w-full p-3 gap-3", )} >🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/sidebar/WorkspaceSwitcher.tsx` around lines 65 - 91, Add ARIA attributes and Escape-key handling to the dropdown toggle: set aria-expanded={isOpen} and aria-haspopup="true" on the button that calls setIsOpen(!isOpen) (the same element rendering renderImage, currentWorkspace, ChevronIcon and using isCollapsed), and implement an Escape key handler that closes the menu by calling setIsOpen(false) when isOpen is true (either via an onKeyDown on the button or a useEffect window keydown listener that checks for "Escape"); ensure the aria attributes reflect the isOpen state and do not alter existing visual logic around isCollapsed.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/components/sidebar/WorkspaceSwitcher.tsx`:
- Around line 104-117: In WorkspaceSwitcher (the otherWorkspaces.map rendering),
the button elements lack an explicit type so they default to "submit" and can
trigger unintended form submits; update the mapped <button> used in the
otherWorkspaces loop (the handler that calls setSelectedOrgId, saveWorkspace,
setIsOpen and uses renderImage) to include type="button" so clicks do not submit
surrounding forms.
- Around line 25-31: currentWorkspace can be undefined when workspaces is empty,
which may cause runtime errors when renderImage(currentWorkspace) or other
accesses occur; update the WorkspaceSwitcher component to explicitly handle the
empty-workspaces case by early-returning a safe fallback UI (e.g., a placeholder
button or "No workspaces" message) or by deriving a non-undefined
currentWorkspace default before usage; adjust derivation around
workspaces.find(...) for currentWorkspace and otherWorkspaces and guard calls to
renderImage, workspace?.logoUrl, and workspace?.name in the render path so all
usages of currentWorkspace, otherWorkspaces, renderImage, workspaces, and
selectedOrgId are safe when workspaces.length === 0.
- Around line 33-41: The saveWorkspace mutation currently only console.error(s)
on failure and the UI is optimistically updated via setSelectedOrgId before the
mutation, so failures leave UI/server out of sync; update the onError handler of
the useMutation for saveWorkspace to show user-facing feedback (e.g., call your
toast/notification API with a clear message) and perform rollback by resetting
setSelectedOrgId to the previous org id (capture previous id before calling
setSelectedOrgId), and keep the onSuccess invalidation
(queryClient.invalidateQueries(["my-workspaces"])) as-is; reference
saveWorkspace (mutation), saveSelectedWorkspace (mutationFn), setSelectedOrgId
(state updater), onError (mutation option), and
onSuccess/queryClient.invalidateQueries when making these changes.
---
Nitpick comments:
In `@src/components/sidebar/WorkspaceSwitcher.tsx`:
- Around line 94-119: The dropdown in WorkspaceSwitcher.tsx doesn't close on
outside clicks; add an element ref (e.g., dropdownRef) and a useEffect that
registers a mousedown listener when isOpen is true which calls setIsOpen(false)
if the event target is outside the ref.current, and removes the listener on
cleanup; attach the ref to the wrapping div that renders the menu (the div using
twMerge and mapping otherWorkspaces) so clicking outside that element will close
the dropdown.
- Around line 49-61: The img alt text in renderImage is not descriptive; update
the <img> alt to include the workspace name (e.g., `${workspace.name} logo` or
`${workspace.name} avatar`) and provide a sensible fallback when workspace.name
is missing so screen readers get context; modify the renderImage function to use
workspace.name when workspace.logoUrl is present and ensure the non-image branch
still outputs an accessible label (e.g., first letter with aria-label or
similarly descriptive text).
- Around line 65-91: Add ARIA attributes and Escape-key handling to the dropdown
toggle: set aria-expanded={isOpen} and aria-haspopup="true" on the button that
calls setIsOpen(!isOpen) (the same element rendering renderImage,
currentWorkspace, ChevronIcon and using isCollapsed), and implement an Escape
key handler that closes the menu by calling setIsOpen(false) when isOpen is true
(either via an onKeyDown on the button or a useEffect window keydown listener
that checks for "Escape"); ensure the aria attributes reflect the isOpen state
and do not alter existing visual logic around isCollapsed.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: f2a87372-68d1-4edf-b931-ea428429b5fc
📒 Files selected for processing (1)
src/components/sidebar/WorkspaceSwitcher.tsx
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/components/sidebar/WorkspaceSwitcher.tsx`:
- Around line 70-74: 현재 WorkspaceSwitcher 컴포넌트의 img 태그에 고정된 alt="logo"를 사용해
스크린리더 맥락이 부족하니, 이미지가 의미적(브랜딩)을 전달하면 workspace.name을 이용해 alt={`${workspace.name}
로고` 또는 `${workspace.name} logo`}처럼 동적으로 설정하고, 단순 장식용이면 빈 alt=""로 처리하도록 수정하세요; 대상
식별자는 WorkspaceSwitcher 컴포넌트의 img (src={workspace.logoUrl})와 workspace.name 변수를
사용하세요.
- Around line 26-30: The UI falls back to a different currentWorkspace when the
selectedOrgId is missing from workspaces, but the global selectedOrgId remains
stale; update the global state whenever selectedOrgId !== null but no matching
workspace exists. In WorkspaceSwitcher, after computing currentWorkspace (from
workspaces.find(...) || ... || workspaces[0]), if selectedOrgId !== null and no
workspace matched the original selectedOrgId, call the global setter used for
the org selection (e.g. setSelectedOrgId) with the fallback orgId
(currentWorkspace.orgId or workspaces[0].orgId) to synchronize global state and
UI. Ensure this runs only when workspaces is non-empty and avoid triggering if
selectedOrgId is already null.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: a4f962ad-70c1-459c-a8b3-585cdc9a3ffa
📒 Files selected for processing (1)
src/components/sidebar/WorkspaceSwitcher.tsx
Comment on lines
+26
to
+30
| const currentWorkspace = | ||
| workspaces.find((w) => w.orgId === selectedOrgId) || | ||
| workspaces.find((w) => w.isCurrentWorkspace) || | ||
| workspaces[0]; | ||
|
|
There was a problem hiding this comment.
선택된 워크스페이스가 목록에서 사라질 때 전역 상태와 UI가 불일치할 수 있어요
현재는 Line 26-30에서 표시용 currentWorkspace만 fallback으로 바꾸고, 전역 selectedOrgId는 그대로 남습니다. 이 상태가 유지되면 다른 화면/쿼리가 오래된 orgId를 계속 사용할 수 있습니다. selectedOrgId !== null인데 목록에 없는 경우에만 fallback orgId로 동기화해 주세요.
🔧 제안 코드
const currentWorkspace =
workspaces.find((w) => w.orgId === selectedOrgId) ||
workspaces.find((w) => w.isCurrentWorkspace) ||
workspaces[0];
+ useEffect(() => {
+ if (selectedOrgId === null || workspaces.length === 0) return;
+
+ const exists = workspaces.some((w) => w.orgId === selectedOrgId);
+ if (exists) return;
+
+ const fallback =
+ workspaces.find((w) => w.isCurrentWorkspace) || workspaces[0];
+ setSelectedOrgId(fallback.orgId);
+ }, [selectedOrgId, workspaces, setSelectedOrgId]);
+As per coding guidelines, src/**: 1. 상태 관리: 서버 상태(React Query)와 전역 상태(Zustand)의 분리 여부 확인. useMutation, useQuery의 올바른 사용 확인.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/components/sidebar/WorkspaceSwitcher.tsx` around lines 26 - 30, The UI
falls back to a different currentWorkspace when the selectedOrgId is missing
from workspaces, but the global selectedOrgId remains stale; update the global
state whenever selectedOrgId !== null but no matching workspace exists. In
WorkspaceSwitcher, after computing currentWorkspace (from workspaces.find(...)
|| ... || workspaces[0]), if selectedOrgId !== null and no workspace matched the
original selectedOrgId, call the global setter used for the org selection (e.g.
setSelectedOrgId) with the fallback orgId (currentWorkspace.orgId or
workspaces[0].orgId) to synchronize global state and UI. Ensure this runs only
when workspaces is non-empty and avoid triggering if selectedOrgId is already
null.
Comment on lines
+70
to
+74
| <img | ||
| src={workspace.logoUrl} | ||
| className="w-full h-full object-cover" | ||
| alt="logo" | ||
| /> |
There was a problem hiding this comment.
이미지 alt가 고정값("logo")이라 스크린리더 맥락이 부족합니다
워크스페이스별 의미를 전달하도록 alt를 이름 기반으로 넣거나, 장식용이면 alt=""로 처리해 주세요.
🔧 제안 코드
- <img
- src={workspace.logoUrl}
- className="w-full h-full object-cover"
- alt="logo"
- />
+ <img
+ src={workspace.logoUrl}
+ className="w-full h-full object-cover"
+ alt={`${workspace.name} 로고`}
+ />As per coding guidelines, src/**: 7. 접근성: 시맨틱 HTML, ARIA 속성 사용 확인.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| <img | |
| src={workspace.logoUrl} | |
| className="w-full h-full object-cover" | |
| alt="logo" | |
| /> | |
| <img | |
| src={workspace.logoUrl} | |
| className="w-full h-full object-cover" | |
| alt={`${workspace.name} 로고`} | |
| /> |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/components/sidebar/WorkspaceSwitcher.tsx` around lines 70 - 74, 현재
WorkspaceSwitcher 컴포넌트의 img 태그에 고정된 alt="logo"를 사용해 스크린리더 맥락이 부족하니, 이미지가
의미적(브랜딩)을 전달하면 workspace.name을 이용해 alt={`${workspace.name} 로고` 또는
`${workspace.name} logo`}처럼 동적으로 설정하고, 단순 장식용이면 빈 alt=""로 처리하도록 수정하세요; 대상 식별자는
WorkspaceSwitcher 컴포넌트의 img (src={workspace.logoUrl})와 workspace.name 변수를 사용하세요.
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
🚨 관련 이슈
close #111
✨ 변경사항
✏️ 작업 내용
1. 선택한 워크스페이스 조회
savedWorkspaceQuery.isFetched를 추가하여 모든 데이터가 완벽히 로드된 시점에만 초기 상태 결정하도록 개선2. 워크스페이스 선택 기능 및 동기화
onSuccess시점에만 UI 변경3. 사이드바 UI/UX 리팩토링
😅 미완성 작업
N/A
📢 논의 사항 및 참고 사항
N/A
Summary by CodeRabbit
Summary by CodeRabbit
릴리스 노트
새로운 기능
스타일
버그 픽스 / 동작 개선