Skip to content

[FE] UI 개선 및 아바타 렌더링 최적화 #353

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
inaemin merged 12 commits into from
Feb 10, 2026
Merged

[FE] UI 개선 및 아바타 렌더링 최적화 #353

inaemin merged 12 commits into from
Feb 10, 2026
+371 −99

Conversation

@inaemin
Copy link
Collaborator

@inaemin inaemin commented Feb 9, 2026 •
edited
Loading

📋 작업 범위 (Scope)

  • Frontend (React)
  • Backend (NestJS)
  • Common (Shared Types, Utils)
  • Infrastructure (DevOps, CI/CD, Docker)
  • Documentation (README, Wiki)

🔗 관련 이슈 (Related Issue)

  • Issue Number: N/A (기술 부채 정리 및 UI 개선)

🛠️ 작업 내용 (Description)

UI/UX 개선

  • Textarea focus 색상을 Input과 동일한 brand-blue로 통일
  • 채팅 아이콘 크기 증가 및 hover/active 애니메이션 추가
  • 읽지 않은 메시지 배지 위치 조정
  • 참여자 목록에 ScrollArea 컴포넌트 적용 (수동 스크롤 숨김 CSS 제거)
  • 채팅 메시지 영역 select-none 제거

컴포넌트 분리 및 리팩토링

  • ChatMentionPopover 컴포넌트 분리
    • 파일 멘션 기능을 독립 컴포넌트로 추출
    • 키보드 네비게이션 지원 (↑↓, Enter, Esc)
    • scrollIntoView로 선택 항목 자동 스크롤
    • Textarea 포커스 유지 (onMouseDown preventDefault)
    • Popover 너비 자동 동기화

성능 최적화

  • 아바타 SVG 렌더링에서 react-dom/server 의존성 제거
    • renderToStaticMarkup 제거로 번들 크기 감소
    • Shape path 데이터를 별도 파일로 추출
    • 템플릿 리터럴로 직접 SVG 문자열 생성

기타

  • Popover 관련 export 정리 (PopoverDescription, PopoverHeader, PopoverTitle 추가)
  • CD 워크플로우 최적화 (base 파라미터 추가)

📦 패키지 변경 사항 (Dependencies)

  • 없음

✅ 체크리스트 (Self Checklist)

  • 코드가 정상적으로 빌드/실행되는지 확인했나요?
  • 관련된 변경 사항(DB 스키마, 환경변수 등)을 팀원에게 공지했나요?
  • 불필요한 로그(console.log)나 주석을 제거했나요?
  • (필요 시) 테스트 코드를 작성하거나 통과했나요?

💬 추가 논의사항 (Optional)

주요 개선사항:

  • 아바타 렌더링 최적화로 react-dom/server 의존성 제거하여 번들 크기 약 100KB 감소
  • ChatMentionPopover 분리로 ChatInput 복잡도 감소 및 재사용성 향상
  • 키보드 네비게이션 및 포커스 관리 개선으로 사용자 경험 향상
  • ScrollArea 컴포넌트로 일관된 스크롤 UX 제공

@inaemin
💄 style: Textarea focus 색상을 brand-blue로 통일
3fe17aa 
Input 컴포넌트와 동일한 focus 색상 적용

- focus-visible:border-ring → focus-visible:border-brand-blue
- focus-visible:ring-ring/50 → focus-visible:ring-brand-blue/50
@inaemin
♻️ refactor: 아바타 Shape path 데이터를 별도 파일로 추출
b29cc45 
SSR 의존성 제거를 위한 사전 작업

- 60개 Shape의 path 데이터와 clipPath 정보를 상수로 분리
- avvvatars-avatar.ts에서 재사용 가능하도록 구조화
@inaemin
⚡️ perf: 아바타 SVG 렌더링에서 react-dom/server 의존성 제거
cba50c7 
번들 크기 감소 및 렌더링 성능 개선

- react-dom/server의 renderToStaticMarkup 제거
- shape-paths.ts의 정적 데이터를 직접 사용하여 SVG 문자열 생성
- Character/Shape 모드 모두 템플릿 리터럴로 직접 구성
- 불필요한 HTML 파싱 로직 제거
@inaemin
♻️ refactor: Popover 관련 export를 파일 하단으로 이동
d71aa5d 
PopoverDescription, PopoverHeader, PopoverTitle export 추가

- Popover 관련 모든 export를 그룹화하여 가독성 개선
- 누락된 컴포넌트 export 추가
@inaemin
♻️ refactor: 파일 멘션 Popover를 별도 컴포넌트로 분리
4cd6276 
ChatInput의 복잡도 감소 및 재사용성 향상

- ChatMentionPopover 컴포넌트 신규 생성
- 파일 아이콘 렌더링 로직 포함
- 키보드 네비게이션 지원 (↑↓, Enter, Esc)
- scrollIntoView로 선택 항목 자동 스크롤
- onMouseDown preventDefault로 Textarea 포커스 유지
- Popover 너비가 Textarea와 자동 동기화
@inaemin
💄 style: 채팅 및 참여자 UI 개선
b9aba6e 
- ChatIcon: 버튼 크기 증가(14→16), hover/active 애니메이션 추가
- ChatIcon: 읽지 않은 메시지 배지 위치 조정
- ChatPanel: 메시지 영역 select-none 제거
- Participants: 스크롤바 숨김 처리
- Participants: 레이아웃 flex 구조 개선
@inaemin
⚙️ setting: CD 워크플로우 변경 감지 최적화
c213edd 
불필요한 빌드 트리거 제거

- pnpm-lock.yaml 변경을 트리거에서 제거
- base 파라미터 추가하여 정확한 diff 비교
@inaemin
docs: 7주차 최종데모 장표 추가
b216144
@inaemin inaemin self-assigned this Feb 9, 2026
@inaemin
♻️ refactor: 참가자 목록에 ScrollArea 컴포넌트 적용
bafe495 
수동 스크롤 숨김 CSS를 Radix UI ScrollArea로 교체

- 기존 수동 스크롤바 숨김 CSS 제거
  (overflow-y-auto, -ms-overflow-style:none 등)
- ScrollArea 컴포넌트로 교체하여 일관된 스크롤 UX 제공
- min-h-0 추가로 flex 컨테이너 내 스크롤 동작 보장
@inaemin inaemin changed the base branch from main to dev February 9, 2026 16:50
@inaemin
empty commit
f669051
@inaemin
⚙️ setting: CD 워크플로우에 pnpm-lock.yaml 트리거 재추가
7de9242 
의존성 변경 감지를 위한 안전장치 추가

- client 트리거에 pnpm-lock.yaml 추가
- server 트리거에 pnpm-lock.yaml 추가
- package.json 변경 시 lock 파일 미업데이트 케이스 대응
@github-actions
Copy link

github-actions bot commented Feb 9, 2026 •
edited
Loading

CI 결과 ✅

검사 항목 결과
Format ✅ success
Lint ✅ success
Type Check ✅ success
Test ✅ success
Build ✅ success

🎉 모든 검사를 통과했습니다!

@inaemin
Copy link
Collaborator Author

inaemin commented Feb 9, 2026

📸 스크린샷 (Screenshots - Frontend Only)

참가자목록스크롤 채팅메시지선택가능 채팅멘션팝오버에파일아이콘추가
ptlist_scroll chatmessageselectable chatmentionpopover_improve

@github-actions
Copy link

github-actions bot commented Feb 10, 2026

🍯 새로운 잼이 완성됐어요!

항목 내용
Preview URL https://codejam-m13lwmvje-jamstacks-projects.vercel.app
Commit b25e7fa96329299327bc81eb41fa556f8ac8b63d
Branch refactor/miscellaneous
작성자 @inaemin

이 배포는 client 코드 변경이 감지되어 자동으로 생성되었습니다.

@inaemin inaemin added FE 프론트엔드 (React) 관련 작업 🐞 Bug 버그 수정 및 오류 해결 ♻️ Refactor 기능 변화 없이 코드 구조 개선 P2: Medium 일반적인 기능, 개선 사항 labels Feb 10, 2026
@inaemin inaemin marked this pull request as ready for review February 10, 2026 08:57
@inaemin inaemin merged commit 10898aa into dev Feb 10, 2026
2 checks passed
@inaemin inaemin deleted the refactor/miscellaneous branch February 10, 2026 09:15
@inaemin inaemin mentioned this pull request Feb 10, 2026
Merged
10 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@lnxhigh lnxhigh lnxhigh approved these changes

@kindsmell kindsmell kindsmell approved these changes

Assignees

@inaemin inaemin

Labels

🐞 Bug 버그 수정 및 오류 해결 FE 프론트엔드 (React) 관련 작업 P2: Medium 일반적인 기능, 개선 사항 ♻️ Refactor 기능 변화 없이 코드 구조 개선

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@inaemin @lnxhigh @kindsmell