Skip to content

[Feature/#431] 담당 페이지(워크스페이스/타임라인/알림/설정) 모바일 반응형 및 타임라인 드랍다운 수정 - #441

Merged
jjjsun merged 2 commits into
developfrom
feature/#431
Aug 11, 2026
Merged

[Feature/#431] 담당 페이지(워크스페이스/타임라인/알림/설정) 모바일 반응형 및 타임라인 드랍다운 수정#441
jjjsun merged 2 commits into
developfrom
feature/#431

Conversation

@jjjsun

@jjjsun jjjsun commented Aug 10, 2026

Copy link
Copy Markdown
Collaborator

🚨 관련 이슈

Closed #431

✨ 변경사항

  • 🐞 BugFix Something isn't working
  • 💻 CrossBrowsing Browser compatibility
  • 🌏 Deploy Deploy
  • 🎨 Design Markup & styling
  • 📃 Docs Documentation writing and editing (README.md, etc.)
  • ✨ Feature Feature
  • 🔨 Refactor Code refactoring
  • ⚙️ Setting Development environment setup
  • ✅ Test Test related (storybook, jest, etc.)

✏️ 작업 내용

타임라인

  • 성과 패널 KPI를 모바일에서는 최대 2열로 유지하고, 홀수 개이면 마지막 카드만 한줄 전체 차지
  • 타임라인 바 케밥 드롭다운이 화면 밖으로 나가지 않도록 좌우/상하 위치 보정
  • 타임라인 바 중 최하단 바의 메뉴는 위로 열리도록하고, 나머지는 아래로 열리도록 수정
  • 바가 1칸일때, 제목/status등 정보가 한글자만 나와 사용자가 쓰기 불편하다고 판단되어, 영역 확보를 위해 케밥 버튼을 absolute로 배치하였습니다!

알림/설정

  • NotificationSection 모바일 스택 레이아웃 적용
  • <켜짐> 뱃지는 토글로도 충분히 확인이 가능하다 판단되어 Badge 제거했습니다
  • 프로필/비밀번호 카드 p-8 tablet:p-6으로 패딩 동일하게 정리

워크스페이스

  • 멤버 리스트 행을 태블릿 이하에서는 세로 스택으로 변경
  • 권한 설정 테이블 패팅/컬럼 폭/가로 스크롤 대응
  • 조직 소유권 양도 모달 반응형 및 검색 인풋/설명 문구 줄바꿈 처리
  • 워크스페이스 설정 관련하여 모바일 여백과 레이아웃 보완작업

공통

  • 반응형 작업중 모달 오른쪽이 비어보이는 문제 해결하기 위해 Modal 닫기 버튼용 비대칭 pr-12제거하였습니다.
  • SearchSelect 검색 아이콘을 rightElement로 배치하여 placeholder` 겹침을 방지하였습니다.

😅 미완성 작업

  • 워크스페이스 삭제 모달을 조직양도 모달 패턴으로 컴포넌트 분리 (해당 작업은 이번 이슈범위밖이라고 생각하여 새로 이슈파서 추가브랜치에서 작업 예정입니다)

📢 논의 사항 및 참고 사항

  • 1칸짜리 타임라인에서는 제목 가독성을 위해서 케밥을 abolute 배치하여케밥과 본문이 겹칠수도있습니다 (기존 방식대로면 문자열 하나밖에 보이지 않아 사용자의 입장에서 불편하다고 생각되어 변경하였습니다)

💬 리뷰어 가이드 (P-Rules)
P1: 필수 반영 (Critical) - 버그 가능성, 컨벤션 위반. 해결 전 머지 불가.
P2: 적극 권장 (Recommended) - 더 나은 대안 제시. 가급적 반영 권장.
P3: 제안 (Suggestion) - 아이디어 공유. 반영 여부는 드라이버 자율.
P4: 단순 확인/칭찬 (Nit) - 사소한 오타, 칭찬 등 피드백.

Summary by CodeRabbit

  • 개선 사항
    • 드롭다운 메뉴가 화면 공간을 고려해 상·하·좌·우 방향과 정렬을 자동 조정합니다.
    • 타임라인 메뉴의 배치 방향을 상황에 맞게 설정할 수 있습니다.
    • 검색 선택 필드와 모달의 콘텐츠 표시가 개선되었습니다.
    • 알림 설정, 권한 표, 멤버 목록 및 KPI 카드가 태블릿·모바일 화면에 더 적합하게 표시됩니다.
    • 웹훅 입력 영역과 설정 카드의 반응형 레이아웃이 개선되었습니다.
    • 소유권 이전 및 워크스페이스 관련 안내 문구의 줄바꿈과 간격을 조정했습니다.

@coderabbitai

coderabbitai Bot commented Aug 10, 2026

Copy link
Copy Markdown

Review Change Stack

Warning

Review limit reached

@jjjsun, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 47 minutes

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: e37162ab-faec-4a07-91da-dac97740749f

📥 Commits

Reviewing files that changed from the base of the PR and between 4b38eac and 53a82a0.

📒 Files selected for processing (3)
  • src/components/common/dropdownmenu/DropdownMenu.tsx
  • src/components/setting/NotificationSection.tsx
  • src/components/timeline/TimelineBar.tsx
📝 Walkthrough

Walkthrough

드롭다운의 상하·좌우 배치 계산을 개선했습니다. 타임라인 메뉴에 배치 옵션을 추가했습니다. 설정과 워크스페이스 화면에 모바일·태블릿 반응형 스타일과 줄바꿈 처리를 적용했습니다.

Changes

반응형 UI 개선

Layer / File(s) Summary
드롭다운 위치 및 정렬 계산
src/components/common/dropdownmenu/DropdownMenu.tsx, src/components/common/modal/Modal.tsx
드롭다운이 클리핑 경계와 메뉴 너비를 기준으로 좌우 정렬을 계산합니다. 상단 공간이 충분하면 위쪽 배치를 선택합니다. 모달 콘텐츠의 조건부 pr-12 패딩을 제거했습니다.
타임라인 메뉴 배치 연동
src/components/timeline/TimelineBar.tsx, src/pages/dashboard/timeline/Timeline.tsx, src/components/timeline/TimelinePerformancePanel.tsx
TimelineBarmenuPlacement prop을 추가했습니다. 타임라인 마지막 행은 메뉴를 위쪽에 표시합니다. 모바일 KPI 그리드의 마지막 카드를 조정했습니다.
설정 화면 반응형 레이아웃
src/components/setting/NotificationSection.tsx, src/components/setting/PasswordSection.tsx, src/components/setting/ProfileSection.tsx
알림 상태 배지를 제거했습니다. 알림 행과 Webhook 입력 영역에 반응형 너비, 줄바꿈, 태블릿 배치를 적용했습니다. 설정 카드의 태블릿 패딩을 조정했습니다.
워크스페이스 화면 반응형 레이아웃
src/components/workspace/*, src/pages/workspace/*, src/components/common/select/SearchSelect.tsx
멤버와 권한 테이블의 태블릿·모바일 레이아웃을 조정했습니다. 모달 안내 문구의 줄바꿈과 여백을 변경했습니다. MemberSearchSelectclassNameSearchSelect에 전달합니다.

Estimated code review effort: 3 (Moderate) | ~25 minutes

Sequence Diagram(s)

sequenceDiagram
  participant Timeline
  participant TimelineBar
  participant DropdownMenu
  Timeline->>TimelineBar: 마지막 행에 menuPlacement="top" 전달
  TimelineBar->>DropdownMenu: menuPlacement 전달
  DropdownMenu->>DropdownMenu: 클리핑 경계와 공간 계산
  DropdownMenu-->>TimelineBar: 메뉴 위치와 transform origin 적용
Loading

Possibly related PRs

Suggested labels: 🎨 Html&css, 🐞 BugFix, ✨ Feature

Suggested reviewers: seojegyeong, yermim

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (2 warnings)

Check name Status Explanation Resolution
Linked Issues check ⚠️ Warning 타임라인·알림·워크스페이스·설정 변경은 확인되지만 팀원 초대 모달·로그아웃·회원탈퇴 범위의 구현 근거가 없습니다. 누락된 기능의 반응형 구현을 추가하거나, 별도 변경으로 완료되었다는 근거를 PR에 명시하고 이슈 범위를 분리해 주세요.
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (3 passed)
Check name Status Explanation
Out of Scope Changes check ✅ Passed 모든 변경은 모바일 반응형 개선 또는 타임라인 드롭다운·공통 입력 및 모달 보정과 직접 관련됩니다.
Title check ✅ Passed 제목이 담당 페이지의 모바일 반응형 개선과 타임라인 드롭다운 수정이라는 주요 변경 사항을 명확하게 요약합니다.
Description check ✅ Passed 관련 이슈, 변경 사항, 작업 내용, 미완성 작업, 논의 사항을 모두 포함하며 변경 범위와 후속 작업도 명확하게 설명합니다.
✨ Finishing Touches 💡 1
📝 Generate docstrings 💡
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feature/#431

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@github-actions

github-actions Bot commented Aug 10, 2026

Copy link
Copy Markdown

📚 Storybook 배포 완료

항목 링크
📖 Storybook https://69a147b60a56365d9e2185ef-ymcnbamexy.chromatic.com/
🔍 Chromatic https://www.chromatic.com/build?appId=69a147b60a56365d9e2185ef&number=628

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 3

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/components/common/dropdownmenu/DropdownMenu.tsx`:
- Around line 152-175: 분리한 위치 계산 함수를 사용해 열린 메뉴의 배치를 재계산하세요. DropdownMenu의
useLayoutEffect에서 viewport resize와 capture 단계 scroll 이벤트를 구독하고, 관련 요소의 크기 변경은
ResizeObserver로 관찰해 resolvedPlacement와 horizontalAlign을 갱신하세요. 메뉴가 닫혔거나 inFlow인
경우 기존 기본값 처리는 유지하고, effect 정리 시 모든 이벤트 리스너와 observer를 제거하세요.

In `@src/components/setting/NotificationSection.tsx`:
- Line 269: Update the Discord Webhook wrapperClassName to use the Tailwind
utility tablet:w-full instead of tablet:w-fill, while preserving the base w-1/4
and shrink-0 classes.

In `@src/components/timeline/TimelineBar.tsx`:
- Around line 132-140: Update the main content layout in TimelineBar so that
when showActions is enabled it reserves trailing space for the absolute menu
container, such as by applying the existing layout’s equivalent of pr-10. Keep
the spacing conditional and ensure long titles or status text cannot overlap the
DropdownMenu area.
🪄 Autofix

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 Plus

Run ID: ea282d64-d670-4f6c-8597-337a6d483865

📥 Commits

Reviewing files that changed from the base of the PR and between b7126dc and 4b38eac.

📒 Files selected for processing (15)
  • src/components/common/dropdownmenu/DropdownMenu.tsx
  • src/components/common/modal/Modal.tsx
  • src/components/common/select/SearchSelect.tsx
  • src/components/setting/NotificationSection.tsx
  • src/components/setting/PasswordSection.tsx
  • src/components/setting/ProfileSection.tsx
  • src/components/timeline/TimelineBar.tsx
  • src/components/timeline/TimelinePerformancePanel.tsx
  • src/components/workspace/MemberItem.tsx
  • src/components/workspace/MemberSearchSelect.tsx
  • src/components/workspace/PermissionTable.tsx
  • src/components/workspace/TransferOwnerModal.tsx
  • src/pages/dashboard/timeline/Timeline.tsx
  • src/pages/workspace/Workspace.tsx
  • src/pages/workspace/WorkspaceSetting.tsx
💤 Files with no reviewable changes (1)
  • src/components/common/modal/Modal.tsx

Comment thread src/components/common/dropdownmenu/DropdownMenu.tsx
Comment thread src/components/setting/NotificationSection.tsx Outdated
Comment thread src/components/timeline/TimelineBar.tsx
@jjjsun jjjsun self-assigned this Aug 10, 2026
@jjjsun jjjsun added 🎨 Html&css 마크업 & 스타일링 ✨ Feature 기능 개발 labels Aug 10, 2026
@jjjsun
jjjsun requested review from Seojegyeong and YermIm August 10, 2026 07:13

@YermIm YermIm left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P4: 확인했습니다!

@jjjsun
jjjsun merged commit 1714c0c into develop Aug 11, 2026
3 checks passed
@jjjsun
jjjsun deleted the feature/#431 branch August 11, 2026 18:32
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

✨ Feature 기능 개발 🎨 Html&css 마크업 & 스타일링

Projects

None yet

Development

Successfully merging this pull request may close these issues.

✨ [Feature] 담당페이지(워크스페이스/타임라인/알림/설정) 모바일 반응형 처리

2 participants