Skip to content

fix(layout/ux): 레이아웃·UX 개선 14건 (#98–#111) - #115

Merged
lnu8926-web merged 16 commits into
mainfrom
fix/layout-ux
May 14, 2026
Merged

fix(layout/ux): 레이아웃·UX 개선 14건 (#98–#111)#115
lnu8926-web merged 16 commits into
mainfrom
fix/layout-ux

Conversation

@lnu8926-web

@lnu8926-web lnu8926-web commented May 14, 2026

Copy link
Copy Markdown
Owner

개요

UX 전문가 관점에서 로그인~전체 화면을 분석하여 도출한 레이아웃·UX 이슈 14건을 수정합니다.

변경 사항

# 이슈 내용
#98 헤더 오프셋 통일 root layout 한 곳에서 pt-16 처리, 각 페이지별 중복 오프셋 제거
#99 메모 패널 토글 이동 BottomNavigation → 워크스페이스 헤더로 이동, MemoView에 닫기 버튼 추가
#100 ProjectCard 메뉴 개선 hover 의존 수정/삭제 → 항상 노출되는 드롭다운 메뉴로 교체
#101 SidePanel 자동 닫힘 TaskDetail SidePanel 열릴 때 다른 패널 자동 닫힘 처리
#102 필터 통합 KanbanBoard·CalendarView 각각의 필터 인터페이스를 WorkspaceFilter로 통합
#103 SidePanel 헤더 겹침 백드롭·패널 모두 top-16 기준으로 수정, 이중 스크롤 해소
#104 피커 Popover 교체 MemoView 색상·이모지 피커를 Radix Popover로 교체 (overflow 클리핑 해소)
#105 모달 step 순서 ProjectCreationModal: 이름 → 기간 → 유형 순서로 재배치
#106 하드코딩 height 제거 ProjectBoardBody h-[calc(100vh-400px)] → 자연스러운 flex 레이아웃
#107 KanbanLegend 중복 DOM 이중 렌더링(sm:hidden/hidden sm:block) → 단일 반응형 컴포넌트
#108 CalendarNavigation 중복 4개 뷰 각각에 중복 마운트 → 공통 래퍼 밖으로 단일 렌더링
#109 AdminPageWrapper 정렬 max-w-4xl mx-auto 추가, 하드코딩 배경색 → 디자인 토큰(bg-muted/30)
#110 KanbanLayout 데드코드 미사용 MemoView, KanbanLayoutContext, useKanbanLayout 제거
#111 Notice scroll 핵 제거 body.classList 직접 조작 제거, root layout scroll 구조 활용

테스트 포인트

  • 칸반/캘린더 뷰 전환 시 헤더 오프셋 정상
  • 메모 패널 열기/닫기 (헤더 버튼)
  • ProjectCard 수정·삭제 드롭다운 (터치/마우스 모두)
  • TaskDetail SidePanel 열릴 때 메모 패널 자동 닫힘
  • 칸반·캘린더 필터 동작
  • SidePanel 스크롤 (헤더 미겹침)
  • 메모 색상·이모지 피커 (overflow 없이 정상 노출)
  • 프로젝트 생성 모달 step 순서
  • 공지사항 페이지 스크롤

🤖 Generated with Claude Code

lnu8926-web and others added 15 commits May 13, 2026 17:25
@lnu8926-web @claude
fix(layout): 헤더 오프셋 처리를 root layout으로 통일 (#98)
489b402 
- layout.tsx content div에 pt-16 추가로 단일 오프셋 처리
- Container의 py-25를 pb-25 pt-6으로 분리해 상단 중복 제거
- workspace 페이지 로딩/메인 div의 pt-16 제거

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@lnu8926-web @claude
fix(ux): 메모 패널 토글을 BottomNavigation에서 워크스페이스 헤더로 분리 (#99)
b235a90 
- BottomNavigation에서 메모 탭 제거 (캘린더/칸반 뷰 전환만 담당)
- KanbanHeader, CalendarHeader에 메모 토글 버튼 추가
- KanbanBoard, CalendarView에 onToggleMemo/showMemoPanel prop 연결
- 뷰 전환 시 메모 패널 강제 닫힘 동작 제거

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@lnu8926-web @claude
fix(ux): ProjectCard 수정/삭제 버튼을 항상 표시되는 메뉴로 교체 (#100)
d0784ab 
- opacity-0 group-hover 방식 제거 → 터치 기기 접근 불가 문제 해결
- 우상단 ⋮ 버튼 추가, 클릭 시 수정/삭제 드롭다운 표시
- 외부 클릭 시 메뉴 닫힘 처리

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@lnu8926-web @claude
fix(ux): MemoView 헤더에 닫기 버튼 추가 (#99)
af3043a 
- onClose prop 추가 및 헤더 내 X 버튼 렌더링
- workspace에서 onClose={() => setShowMemoPanel(false)} 전달

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@lnu8926-web @claude
fix(layout): TaskDetail SidePanel 열릴 때 다른 패널 자동 닫힘 처리 (#101)
0f03145 
- KanbanBoard에 onPanelOpen prop 추가
- 태스크 클릭 시 MemoView, ProjectInfoPanel 닫힘 처리

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@lnu8926-web @claude
fix(filter): KanbanBoard·CalendarView 필터를 WorkspaceFilter로 통합 (#102)
bda368b 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@lnu8926-web @claude
fix(layout): SidePanel 헤더 겹침·이중스크롤 해소 및 하드코딩 색상 토큰화 (#103)
fe7360f 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@lnu8926-web @claude
fix(memo): 색상·이모지 피커를 Radix Popover로 교체하여 overflow 클리핑 해소 (#104)
1e911b4 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@lnu8926-web @claude
fix(ux): ProjectCreationModal step 순서 변경 — 기간 → 유형으로 재배치 (#105)
96f1a09 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@lnu8926-web @claude
fix(layout): ProjectBoardBody 하드코딩 height 제거 및 이중스크롤 해소 (#106)
3d70c72 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@lnu8926-web @claude
fix(perf): KanbanLegend 이중 DOM 렌더링 제거 — 단일 컴포넌트 내 반응형 처리 (#107)
532e508 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@lnu8926-web @claude
fix(calendar): CalendarNavigation 중복 렌더링 제거 및 하드코딩 색상 토큰화 (#108)
a3df330 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@lnu8926-web @claude
fix(admin): AdminPageWrapper max-width 통일 및 하드코딩 색상 토큰화 (#109)
67d4263 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@lnu8926-web @claude
fix(cleanup): KanbanLayout 죽은 MemoView 코드 및 미사용 Context 제거 (#110)
583fddf 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@lnu8926-web @claude
fix(notice): body.classList 스크롤 조작 핵 제거 (#111)
5b91956 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@vercel

vercel Bot commented May 14, 2026 •
edited
Loading

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
next_taskry Error Error May 14, 2026 3:16am

@lnu8926-web
lnu8926-web merged commit 67391f5 into main May 14, 2026
1 of 3 checks passed
@lnu8926-web
lnu8926-web deleted the fix/layout-ux branch May 14, 2026 03:16
lnu8926-web added a commit that referenced this pull request May 14, 2026
@lnu8926-web @claude
fix(filter): WorkspaceFilter 컴포넌트 누락 파일 추가
b39baae 
PR #115 머지 이후 누락된 WorkspaceFilter.tsx 추가.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
lnu8926-web added a commit that referenced this pull request May 14, 2026
@lnu8926-web @claude
feat(layout): 전역 AppSidebar 네비게이션 + GNB 정렬 (#116)
5a97506 
* feat(layout): 워크스페이스 사이드 네비게이션 추가

데스크탑에서 BottomNavigation을 WorkspaceSidebar(240px)로 대체.
칸반/캘린더/메모 전환 및 프로젝트 목록 링크 포함.
모바일(< md)에서는 기존 BottomNavigation 유지.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* fix(filter): WorkspaceFilter 컴포넌트 누락 파일 추가

PR #115 머지 이후 누락된 WorkspaceFilter.tsx 추가.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* feat(layout): 전역 AppSidebar로 네비게이션 통합

- WorkspaceNavProvider: 워크스페이스 뷰 상태를 전역 context로 관리
- AppSidebar: 루트 레이아웃에 240px 사이드바 추가
  - 전역 메뉴(프로젝트, 공지사항, 어드민) + 워크스페이스 진입 시 sub-nav 표시
  - 모바일(< md)에서는 숨김
- Header: 공지사항/어드민 아이콘 데스크탑에서 제거(md:hidden)
- workspace 페이지: WorkspaceSidebar 제거, context 연결
- WorkspaceSidebar.tsx 삭제

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* fix(gnb): 헤더 로고 존을 사이드바 너비에 맞게 정렬

- 헤더를 로고 존(w-60)과 컨트롤 존으로 분리
- 데스크탑: 로고가 사이드바(w-60)와 grid 정렬, border-r로 시각적 연결
- 모바일: 기존 레이아웃 유지
- w-[240px] → w-60으로 AppSidebar/Header 통일

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@lnu8926-web