Skip to content

[REFACTOR] UX 에러 수정#159

Merged
sunhwaaRj merged 3 commits intodevelopfrom
feature/#158-ux-refactor
Mar 4, 2026
Merged

[REFACTOR] UX 에러 수정#159
sunhwaaRj merged 3 commits intodevelopfrom
feature/#158-ux-refactor

Conversation

@sunhwaaRj
Copy link
Copy Markdown
Contributor

@sunhwaaRj sunhwaaRj commented Mar 4, 2026

✅ PR 유형

어떤 변경 사항이 있었나요?

  • 새로운 기능 추가
  • 버그 수정
  • 코드에 영향을 주지 않는 변경사항(오타 수정, 탭 사이즈 변경, 변수명 변경)
  • 코드 리팩토링
  • 주석 추가 및 수정
  • 문서 수정
  • 빌드 부분 혹은 패키지 매니저 수정
  • 파일 혹은 폴더명 수정
  • 파일 혹은 폴더 삭제

📌 관련 이슈번호


✅ Key Changes

  • 키워드 코멘트 바텀시트 개선
  • 표 drag 버튼 사이즈 증가

📸 스크린샷 or 실행영상


🎸 기타 사항 or 추가 코멘트

Summary by CodeRabbit

개선사항

  • UI/UX 개선
    • 하단 시트 내부를 유연한 스크롤 영역으로 변경해 컨텐츠 스크롤이 더 안정적이고 매끄럽게 동작
    • 터치 핸들 반응성 향상으로 터치 기반 드래그 조작이 더 정확하고 쾌적해짐
    • 드래그 아이콘 크기 확대로 가시성 및 접근성 개선

@sunhwaaRj sunhwaaRj self-assigned this Mar 4, 2026
@sunhwaaRj sunhwaaRj added the REFACTOR 코드 수정 / 리팩토링 label Mar 4, 2026
@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented Mar 4, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 5873ecc4-90e5-464b-a040-86f3ab6955e6

📥 Commits

Reviewing files that changed from the base of the PR and between babc397 and 4723313.

📒 Files selected for processing (1)
  • src/app/(main)/teampsylog/_components/BottomComment.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
  • src/app/(main)/teampsylog/_components/BottomComment.tsx

Walkthrough

바텀 시트 내부를 유연한 스크롤 컨테이너로 변경하고 오버스크롤/터치 동작을 제어하며, 표 드래그 핸들 아이콘의 크기를 늘렸습니다. (공개 API 변경 없음)

Changes

Cohort / File(s) Summary
바텀 시트 터치/스크롤 수정
src/app/(main)/teampsylog/_components/BottomComment.tsx
컨테이너에 overscrollBehavior: 'contain' 추가, 내부 콘텐츠를 flex 기반의 scrollable 영역(min-h-0, flex-1)으로 전환, 그랩 핸들에 touch-action: none 적용 및 자식 요소를 스크롤 가능 래퍼로 감쌈.
테이블 드래그 핸들 시각 수정
src/components/recruit/editor/table/TableHandles.tsx
DragIcon SVG의 width/height를 10 → 16으로 확대(뷰박스 변경 없음).

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Possibly related PRs

Suggested reviewers

  • woneeeee
🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name Status Explanation Resolution
Title check ❓ Inconclusive 제목이 PR의 주요 변경사항을 충분히 설명하지 못합니다. '[REFACTOR] UX 에러 수정'은 구체적인 변경 내용을 명확히 드러내지 않습니다. 제목을 더 구체적으로 수정하세요. 예: '[REFACTOR] 바텀시트 오버스크롤 개선 및 드래그 버튼 크기 증가'
✅ Passed checks (4 passed)
Check name Status Explanation
Description check ✅ Passed PR 설명이 템플릿 구조를 따르고 있으나, 스크린샷/실행영상이 누락되어 있고 기타 사항도 비어있습니다.
Linked Issues check ✅ Passed PR이 연결된 이슈 #158의 모든 요구사항을 충족합니다. 키워드 코멘트 바텀시트 개선 및 드래그 버튼 크기 증가가 모두 구현되었습니다.
Out of Scope Changes check ✅ Passed 모든 변경사항이 이슈 #158의 요구사항 범위 내에 있습니다. 바텀시트 UX 개선과 드래그 버튼 크기 증가만 포함되어 있습니다.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
  • 📝 Generate docstrings (stacked PR)
  • 📝 Generate docstrings (commit on current branch)
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch feature/#158-ux-refactor

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 and usage tips.

Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

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

🧹 Nitpick comments (1)
src/app/(main)/teampsylog/_components/BottomComment.tsx (1)

66-68: h-full 사용 시 레이아웃 오버플로우 가능성

현재 구조에서 부모 컨테이너가 height: 70vh이고, 그랩 핸들이 추가 공간을 차지합니다. 콘텐츠 div에 h-full(100%)을 적용하면 그랩 핸들 높이를 고려하지 않아 컨테이너를 초과할 수 있습니다.

Flexbox 레이아웃을 사용하면 남은 공간을 자동으로 계산합니다.

♻️ Flex 레이아웃 적용 제안

부모 컨테이너에 flex를 적용하고 콘텐츠 영역에 flex-1을 사용:

       <div
         className="desktop:hidden fixed inset-x-0 bottom-0 z-50 rounded-t-2xl bg-gray-200"
         style={{
           height: '70vh',
           maxHeight: '70vh',
           overscrollBehavior: 'contain',
+          display: 'flex',
+          flexDirection: 'column',
           transform: isDragging
-        <div className="h-full overflow-y-auto pb-5" style={{ overscrollBehavior: 'contain' }}>
+        <div className="min-h-0 flex-1 overflow-y-auto pb-5" style={{ overscrollBehavior: 'contain' }}>
           {children}
         </div>
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/app/`(main)/teampsylog/_components/BottomComment.tsx around lines 66 -
68, In BottomComment.tsx the inner content div uses h-full which can overflow
because the parent has a fixed 70vh and a grab handle consumes space; change the
parent container to use a flex column layout and replace the inner div's h-full
with flex-1 and overflow-y-auto (keep style={{ overscrollBehavior: 'contain'
}}), so the remaining space is computed automatically and the grab handle height
is respected; update the className on the parent wrapper and the inner content
div (the JSX surrounding {children}) accordingly.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@src/app/`(main)/teampsylog/_components/BottomComment.tsx:
- Around line 66-68: In BottomComment.tsx the inner content div uses h-full
which can overflow because the parent has a fixed 70vh and a grab handle
consumes space; change the parent container to use a flex column layout and
replace the inner div's h-full with flex-1 and overflow-y-auto (keep style={{
overscrollBehavior: 'contain' }}), so the remaining space is computed
automatically and the grab handle height is respected; update the className on
the parent wrapper and the inner content div (the JSX surrounding {children})
accordingly.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 1658cd0f-290f-4cbc-8957-2f66960d1d8f

📥 Commits

Reviewing files that changed from the base of the PR and between 4cb8a54 and babc397.

📒 Files selected for processing (2)
  • src/app/(main)/teampsylog/_components/BottomComment.tsx
  • src/components/recruit/editor/table/TableHandles.tsx

@sunhwaaRj sunhwaaRj merged commit d16dd5f into develop Mar 4, 2026
2 checks passed
@sunhwaaRj sunhwaaRj deleted the feature/#158-ux-refactor branch March 8, 2026 16:20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

REFACTOR 코드 수정 / 리팩토링

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[REFACTOR] UX 에러 수정

1 participant