사진원본보기

사용자가 사진을 클릭 했을 때, 원본 사진을 전체 화면으로 보여주는 기능입니다. 여기서 중요한것은, 사진을 전체화면으로 보여주기위해서 노치 부분을 투명하게 변경해야 한다는거에요.

전체 화면을 종료할때는, 설정을 다시 원래대로 돌려줘야겠죠 ?

 const onClickFullScreen = async () => {
    setIsLoading(true);

    setIsFullScreen(true);
    await fetchApp({ query: "toggleDeviceLayoutForNotchTranslucentSet" });
    await fetchApp({ query: "toggleDeviceLayoutForPinchZoomSet" });

    window.setTimeout(() => {
      setIsLoading(false);
    }, 100);
  };
  
    const onClickClose = async () => {
    setIsFullScreen(false);
    await fetchApp({ query: "toggleDeviceLayoutForNotchTranslucentSet" });
    await fetchApp({ query: "toggleDeviceLayoutForPinchZoomSet" });
  };

return (
    <>
      {isFullScreen ? (
        <div
          style={{
            width: "100vw",
            height: "100vh",
            display: "flex",
            flexDirection: "column",
            justifyContent: "center",
            backgroundColor: "black",
          }}
        >
          <div
            style={{
              position: "fixed",
              left: "20px",
              top: "20px",
              color: "white",
            }}
            onClick={onClickClose}
          >
            X
          </div>
          <img src="/images/07-01-dog.jpg" />
        </div>
      ) : (
        <button onClick={onClickFullScreen}>전체화면에서 사진 보기</button>
      )}
    </>
  );

핀치줌

핀치줌은 두 손가락으로 화면을 핀치하여 사진을 확대하거나 축소하는 기능입니다. 이 역시 API 로 요청하도록 할 수 있습니다.

  await fetchApp({ query: "toggleDeviceLayoutForPinchZoomSet" });