Skip to content

Refactor/페이지 스켈레톤UI 추가 #16

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
merged 12 commits into from
Jan 22, 2025
Merged

Refactor/페이지 스켈레톤UI 추가 #16

merged 12 commits into from
Jan 22, 2025

Conversation

@Ludovico7
Copy link
Collaborator

@Ludovico7 Ludovico7 commented Jan 22, 2025 •
edited
Loading

📝 변경 사항

Notion

  • 페이지 스켈레톤 UI 추가

🔍 변경 사항 설명

  • 페이지를 리사이징할 때, 실제 페이지가 아닌 스켈레톤 UI를 통해 리사이징하도록 수정했습니다.
  • 이를 통해 실제 페이지 및 에디터의 불필요한 렌더링을 최소화하고, 리사이징이 완료된 후 한번만 렌더링 되도록 수정했습니다.

🙏 질문 사항

📷 스크린샷 (선택)

✅ 작성자 체크리스트

  • Self-review: 코드가 스스로 검토됨
  • Unit tests 추가 또는 수정
  • 로컬에서 모든 기능이 정상 작동함
  • 린터 및 포맷터로 코드 정리됨
  • 의존성 업데이트 확인
  • 문서 업데이트 또는 주석 추가 (필요 시)

Ludovico7 and others added 12 commits January 16, 2025 16:50
@Ludovico7 @minjungw00 @pipisebastian
refactor: innerhtml 변경방식에서 dom api를 통한 dom 수정 방식으로 변경
c045a85 
Co-authored-by: minjungw00 <minjungw00@naver.com>
Co-authored-by: Jang seo yun <pipisebastian@users.noreply.github.com>
@Ludovico7
refactor: 스타일 없는 텍스트노드끼리 병합하도록 수정
ecc53e2
@Ludovico7
refactor: 페이지 컨트롤 버튼 transform 동작 조건 수정
b17dd8d
@Ludovico7
chore: lint 설정
4809ab1
@Ludovico7
chore: lint 설정
1adbc9f
@Ludovico7
refactor: transform 속성 제거
a6c70c2
@Ludovico7
refactor: Editor 컴포넌트 메모이제이션을 통한 렌더링 최적화
623364d
@Ludovico7
feat: 페이지 스켈레톤 UI 추가
c340308
@Ludovico7
design: 스켈레톤 ui 디자인 수정
be5defa
@Ludovico7
feat: 페이지 리사이징 로직 분리
a40415f 
- 페이지 리사이징은 스켈레톤 UI에서 담당(useSkeletonPage 훅)
- 기존 리사이징 로직(usePage훅) useSkeletonPage 훅으로 분리
- 리사이징이 완료되면, 해당 사이즈를 실제 페이지에 적용해 렌더링 최적화
@Ludovico7
feat: 스켈레톤 UI 적용
c636c86
@Ludovico7
refactor: position 속성 변경
4e983d4
@Ludovico7 Ludovico7 added Refactor refactor codes FE Front End labels Jan 22, 2025
@Ludovico7 Ludovico7 self-assigned this Jan 22, 2025
minjungw00
minjungw00 approved these changes Jan 22, 2025
View reviewed changes
Copy link
Collaborator

@minjungw00 minjungw00 left a comment

Choose a reason for hiding this comment

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

수고많으셨습니다!

@hyonun321
Copy link
Collaborator

hyonun321 commented Jan 22, 2025

첨부영상

_._2025-01-21_._7.26.26.mov
  • 리사이즈 중에 사용성이 떨어지는 문제있음
    • 저사양 사용자를 위한 개선방안

개선방안

  1. documentFragment (보안적 개선 : innerHTML, DOM API를 통해 리스트 요소 렌더링 최적화)
  2. react.memo 사용하여 블록 리렌더링 메모이제이션
  3. hover할때 scale 방지 처리
  4. 스켈레톤 UI

hyonun321
hyonun321 approved these changes Jan 22, 2025
View reviewed changes
Copy link
Collaborator

@hyonun321 hyonun321 left a comment

Choose a reason for hiding this comment

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

수고하셨습니다.

@github-actions github-actions bot merged commit c71c05e into dev Jan 22, 2025
5 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@minjungw00 minjungw00 minjungw00 approved these changes

@hyonun321 hyonun321 hyonun321 approved these changes

@pipisebastian pipisebastian Awaiting requested review from pipisebastian

Assignees

@Ludovico7 Ludovico7

Labels

FE Front End Refactor refactor codes

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@Ludovico7 @hyonun321 @minjungw00