8-1 [FE] [메인 - 로딩] 자동완성 검색 응답 대기시 스피너(달) 을 보여준다, 5-1-[refactor] - Githubissues

boostcampwm-2022 / web18-PRV

논문 인용관계를 밤하늘의 별 처럼 표시해보자 🌟-🌟

https://paperef.com

145 stars 3 forks source link

8-1 [FE] [메인 - 로딩] 자동완성 검색 응답 대기시 스피너(달) 을 보여준다, 5-1-[refactor] #36

Closed yeynii closed 1 year ago

yeynii commented 1 year ago

개요

8-1 [FE] [메인 - 로딩] 자동완성 검색 응답 대기시 스피너(달) 을 보여준다. & refactoring

작업사항

8-1 [FE] [메인 - 로딩] 자동완성 검색 응답 대기시 스피너(달) 을 보여준다.
Search.tsx refactoring
37 fix

리뷰 요청사항

Search.tsx 컴포넌트를 분리 하면서, 분리된 컴포넌트 내부에서 로직 간소화도 함께 진행했는데 이부분을 중점적으로 리뷰부탁드립니다. (해당 pr내에 컴포넌트 분리 + 로직수정이 같이 포함되어있어 전체 file changed를 보면 로직 변경사항 확인이 어려울 수 있으니 커밋단위로 코드 변경사항 확인하시기를 추천드립니다)
달 스피너는 svg 컴포넌트 내부 태그의 d 속성 상수 일부를 state에 종속되게 하여 100ms 마다 변경되며 애니매이션이 진행되는데, 이때문에 리렌더링이 100ms마다 반복적으로 발생합니다. (참고로 추후에는 상수들을 저장한 배열을 사용하지않고, 상수를 계산하는 함수를 사용할 예정입니다.) 이를 해결할 좋은 아이디어가 있다면 제안주시면 감사하겠습니다. => d3에 렌더링 로직을 위임하여 해결했습니다.

스크린샷

Nov-18-2022 18-54-41

(디자인은 추후 팀회의를 통해 변경될 수 있습니다.)

yeynii commented 1 year ago

깃 커밋기록이 어제부터 원인모를 이유로 꼬여서 ... 옛날 커밋 메시지까지 같이 들어가있네요. feat: moonLoader 추가 부터 봐주시면 됩니다.