gahusb
bdb055cb32
2. API 호출 병렬 처리 3. UI개선 - 로딩 경험 개선 4. 반응형 디자인 5. API 통신 특이사항 - URL 구성 로직의 잠재적 위험 해결
24 lines
760 B
JavaScript
24 lines
760 B
JavaScript
import React from 'react';
|
|
import './Loading.css';
|
|
|
|
const Loading = ({ type = 'spinner', message = '로딩 중...' }) => {
|
|
if (type === 'skeleton') {
|
|
return (
|
|
<div className="loading-skeleton">
|
|
<div className="loading-skeleton__line" style={{ width: '60%' }}></div>
|
|
<div className="loading-skeleton__line" style={{ width: '80%' }}></div>
|
|
<div className="loading-skeleton__line" style={{ width: '40%' }}></div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="loading-spinner">
|
|
<div className="loading-spinner__circle"></div>
|
|
{message && <p className="loading-spinner__text">{message}</p>}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Loading;
|