[feat] V2L 인터랙션 구현 ( resolved #22 )

[lybell-art]

#️⃣ 연관 이슈

• [feat] 인터랙션-V2L #22

📝 작업 내용

V2L 인터랙션을 구현했습니다.

• 반응형으로 디자인되었습니다.
• 명세에 더 나아가서 초기 렌더링 혹은 리셋 시 랜덤한 정답과 랜덤한 보드가 나오도록 하였습니다.

ClientOnly라는 래퍼 컴포넌트를 추가했습니다.

<ClientOnly fallback={<Skeleton />}>
  <MyClientOnlyComponent />
</ClientOnly>

• 이 객체가 랜덤을 사용하거나, 현재시간을 사용하거나, 클라이언트에서만 존재하는 함수를 사용해야 할 때 ClientOnly 컴포넌트로 감싸시면 됩니다.
• ClientOnly 컴포넌트는 서버측에서는 fallback 컴포넌트를 렌더링합니다.
• 이 컴포넌트를 이용하여 Suspense 래퍼 컴포넌트를 리팩토링했습니다.

테스트 방법

import { useRef } from "react";
import Demo from "./interactions/v2l";
function App() {
  const ref = useRef(null);
  return (
    <div className="w-full h-dvh bg-black relative">
      <Demo $ref={ref} />
      <div
        className="absolute top-0 left-0 text-white"
        onClick={() => ref.current.reset()}
      >
        리셋
      </div>
    </div>
  );
}

export default App;

app.js를 일시적으로 다음과 같이 바꿔보세요.

[darkdulgi]

고생하셨습니다!