[FE] feat: 문제 보여주기

[d0422]

PR 설명

문제 보여주기 기능 추가

✅ 완료한 기능 명세

• 모달을 통해 링크를 입력받고 이를 통해 문제를 보여주는 기능
• 변경하기 버튼을 눌러 변경하는 기능
• url별로 캐시하는 기능

📸 스크린샷

2023-11-28.20-47-53.mp4

고민과 해결과정

overflow-x처리, click disable

iframe내부의 body의 overflow를 해제시켜줘야했다.

  useEffect(() => {
    const iframe = iframeRef.current;
    const handleLoad = () => {
      const innerDocument = iframe?.contentDocument; //이렇게 내부 문서의 document를 가져온다.
      if (innerDocument) {
        overFlowXHidden(innerDocument);
        clickDisable(innerDocument);
      }
    };
    if (iframe && htmlData) {
      iframe.srcdoc = htmlData;
      iframe.onload = handleLoad;
    }
  }, [htmlData]);

fetching이 오래걸리는 문제

isLoading이면 로딩 컴포넌트를 보여주는 형태로 UX를 개선했다.
Suspense는 이후에 도입해볼 생각이다.

[HBSPS]

LGTM!

[HBSPS]

다른 컴포넌트와 동일하게 Props를 interface로 정의하는것은 어떨까요??

[d0422]

모달 컴포넌트의 경우 useModal의 Props type때문에 타입 정의를 명확하게 할 수가 없네요 ㅠㅠ