[feat] 인터랙션 모달 구현 #79
Conversation
| const lazyInteractionList = [ | ||
| lazy(() => import("./distanceDriven")), | ||
| lazy(() => import("./fastCharge")), | ||
| lazy(() => import("./univasalIsland")), | ||
| lazy(() => import("./v2l")), | ||
| lazy(() => import("./subsidy")), | ||
| ]; |
There was a problem hiding this comment.
편안-합니다. 컴포넌트 안에서 컴포넌트를 정의하면 서로 다른 컴포넌트로 취급하기 때문에 저걸 밖으로 선언하는게 버그를 없애는 길이라고 하네요:)
| const [isAnswerUp, setIsAnswerUp] = useState(false); | ||
| const interactionRef = useRef(null); | ||
|
|
||
| if (!InteractionComponent) return <></>; |
There was a problem hiding this comment.
return null도 동일한 기능을 수행합니다.
| if (!InteractionComponent) return <></>; | ||
|
|
||
| return ( | ||
| <Suspense fallback={<div>Loading...</div>}> |
There was a problem hiding this comment.
향후 fallback 컴포넌트를 따로 만들어주면 사용자 경험이 향상될 것으로 기대됩니다. 폴백 컴포넌트는 별 건 아니고 원래 띄워질 컴포넌트의 컨테이너 부분과 같은 크기와 스타일이기만 하면 됩니다. 내용이 있을 필요는 없어요.
| <InteractionComponent | ||
| interactCallback={() => setIsActive(true)} | ||
| $ref={interactionRef} | ||
| /> |
| <button | ||
| onClick={() => interactionRef.current.reset()} | ||
| className="border-2 border-neutral-100 p-2" | ||
| > | ||
| <img src="icons/refresh.svg" alt="다시하기" /> | ||
| </button> |
There was a problem hiding this comment.
클릭 가능한 것을 만들 때 div 대신 button을 쓰시는 습관 아주 좋습니다.
button을 쓰면 사용자가 탭 키 등으로 버튼을 탐색할 수 있어서 웹 접근성이 좋아지거든요.
| } | ||
|
|
||
| return ( | ||
| <div className="w-full h-full flex flex-col items-center select-none"> | ||
| <div | ||
| onClick={() => swiperRef.current.swiper.slideTo(index)} |
There was a problem hiding this comment.
사실 swiperRef가 swiperRef.current.swiper.slideTo(index)를 위해서만 props로 넘겨받고 있는데, swiperRef.current.swiper.slideTo(index)를 상위 컴포넌트에서 별도의 함수로 정의한 뒤, index번째로 슬라이드하는 함수를 하위 컴포넌트에 넘겨주면 하위 컴포넌트에서 굳이 swiperRef의 구조가 뭔지 알 필요가 없어서 결합도가 낮아지죠.
#️⃣ 연관 이슈
📝 작업 내용
참고 이미지 및 자료