✨ Feat: 로딩 스피너

[JayChae]

🧩 이슈 번호

• close ✨ Feat: 로딩 컴포넌트 개발 #57

✅ 작업 사항

로딩 스피너

spinner.mp4

test 페이지에서 확인 가능,

list 페이지에서는

<div className={styles.loading_spinner}>
    <LoadingSpinner />
</div>

<div className={styles.moreButton}>
    <CustomButton btnText={<LoadingSpinner />} disabled={true} />
</div>

이렇게 사용했습니다.

👩‍💻 공유 포인트 및 논의 사항

이렇게 하는 게 맞나?
컴포넌트로 적절한지 의견 좀 주세요.

[github-actions]

🎉 구현한 기능 Preview: https://fandom-oz9mvww6h-easyhyun00s-projects.vercel.app

[easyhyun00]

수고하셨습니다!! 컴포넌트로 적절하다고 생각이 듭니다
근데 버튼 안에 있을 땐 색이 조금 안 어울리네요ㅋㅋㅋㅋㅋ버튼 안에서는 하얀색or검은색이 잘 어울릴 거 같아요
혹시 svg 로 하면 색상 수정할 수 있지 않을까요???

[easyhyun00]

props로 크기 같은 거 주는 거 있으면 좋을 거 같아요

[JayChae]

width랑 height 주는 방식으로 해보겠습니다

[easyhyun00]

boolean 값으로 props 넘기는건 true 일 때 그냥 아래처럼 적으셔도 됩니다!

<CustomButton btnText={<LoadingSpinner />} disabled />

[JayChae]

@easyhyun00

default.mp4

svg 컴포넌트로 수정하니까, 따로 컴포넌트는 필요 없을 것 같아요! svg 컴포넌트로 넓이 높이 색 다 지정할 수 있으니까 더 좋은 것 같네요. 더보기 버튼은 제가 볼 땐 흰색이 좋은 것 같은데 어떤가요

[easyhyun00]

@credit 오 완전좋아요 그리고 gif 보다 화질이 조금 더 좋아보이네요

[github-actions]

🎉 구현한 기능 Preview: https://fandom-2nxmfn1g9-easyhyun00s-projects.vercel.app