-
Notifications
You must be signed in to change notification settings - Fork 0
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.
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
#44 refactor : 로딩 컴포넌트 추가 및 QA(+디자인) 수정 #45
base: main
Are you sure you want to change the base?
The head ref may contain hidden characters: "refactor/#44/\uB85C\uB529UI\uBC0F\uB514\uC790\uC778\uC218\uC815"
Conversation
src/App.tsx
Outdated
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
오앙 여기는 import문에 대해 정렬이 적용된 건가요?!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
허허 원래는 App.tsx에서 각 컴포넌트에 lazy loading을 적용하려 import문을 수정한 것이었는데 잘 안된 이슈로..🥹
수정된 김에 보기 좋은 선에서 import문 정리했습니다..!
const Skeleton = styled.div<{ width: string; height: string }>` | ||
width: ${(props) => props.width}; | ||
height: ${(props) => props.height}; | ||
border-radius: 8px; | ||
background: linear-gradient( | ||
120deg, | ||
rgba(245, 245, 245, 1) 0%, | ||
#ffffffae 10%, | ||
rgba(245, 245, 245, 1) 20% | ||
); | ||
animation: loading 1.5s infinite linear; | ||
`; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
이미지와 관련된 부분에 스켈레톤 로딩을 추가한 것 같은데, 상세조회 시에도 추가하면 좋을 것 같아요!!
그리고 스타일을 전역적으로 사용할 수 있게 분리해도 좋을 것 같아요!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
각 컴포넌트에 중복적으로 작성되어있던 스켈레톤 컴포넌트를 삭제하고 별도의 공통 컴포넌트로 분리하였습니다!
추가적으로 상세조회 시 보여지는 초대장 앞면 이미지에 대해서도 스켈레톤 UI가 적용되도록 수정했습니다:)
- 스켈레톤 컴포넌트 분리 - 상세페이지 이미지 스켈레톤 UI 추가 (InvitationFront.tsx) ref : #44
1. 무슨 이유로 코드를 변경했나요?
2. 어떤 위험이나 장애를 발견했나요?
X
3. 관련 스크린샷을 첨부해주세요.
메인 홈 이미지 파일 변경
닉네임 기본 입력
Skeleton UI
마이페이지 헤더 X버튼 추가
4. 완료 사항
5. 추가 사항