[OD-201] 스켈레톤 UI 컴포넌트화 및 Profile/Account/Post 적용

[lalaurrel]

주요 작업 내용

• 스켈레톤 UI 컴포넌트화했습니다
• 컴포넌트 폴더 안에 Skeleton으로 넣어뒀습니다

• 이렇게 {} 안에 넓이랑 높이만 넣어주면 자동으로 rem으로 변환하게 했습니다.

const getSize = (size: string | number) => {
		if (typeof size === 'number') {
			return ``${size}px``;
		}
		return size;
	};

사용하시는 뷰에서

				<Header>
					<Skeleton width={70} height={70} borderRadius={40} />

					<ProfileDetail>
						<Skeleton width={100} height={20} />
						<Skeleton width={300} height={20} />
					</ProfileDetail>
				</Header>`

이런식으로 width, height, borderRadius와 같은 속성들을 지정해서 사용하시면 되는데 borderRadius는 기본값이 이미 설정돼있어서 특별한 경우가 아니라면 그냥 높이랑 넓이만 넣어주면 됩니다!

기타 작업 내용

-애니메이션을 주고 싶어서 @Keyframes를 사용했는데 생각보다 만족스럽네요
-색상을 키 컬러인 핑크로도 해봤는데 애니메이션을 주니까 조금 피처럼 보이기도 하고 기괴해서 무난한 그레이로 설정했습니다

• Profile/Account/Post 적용완료했습니다

코드 리뷰 포인트

• 없음

작업 화면

적용된 스켈레톤을 보여주기 위해서 타이머 설정 해놓은 화면입니다.

2025-03-22.6.17.08.mov

[gustn99]

주석에는 숫자인 경우 rem 단위를 추가한다고 되어 있는데 코드는 px로 반환하고 있는 것 같네요! 충돌 해결하면서 함께 수정하면 좋을 것 같습니다. 스켈레톤 너무 예쁘게 나왔군요. . . 고생하셨습니다!

[gustn99]

이게 애초에 props로 받기를 rem 단위로 받는 거군요?... 사용에 유의해야겠습니다... 고생하셨습니다!

[lalaurrel]

감사합니다!😊