## Navigation 제어

### InApp Webview에서 접근할 때 webAppBar 가리기

1. querystring으로 interface 노출 (o)
2. app_bar 노출 여부를 global variable로 관리
- As-Is: SessionStorage를 사용한 Hook
- To-Be: Global 저장소 사용
3. 각 페이지에서 app_bar 노출여부 제어
- Layout 제어가 일관되지 않음

### Route Change 시 DeepLink 호출

#### As-Is

convertDeepLink helper로 구현

#### To-Be

Route Chnage에 대한 Intercept를 구현하여 Route를 DeepLink와 Mapping
Transition에 대한 Meta 정보를 알기 어려움

Link를 확장한 Component 구현하거나 HOC 구현

type LinkProps = ReactRouterLinkProps & {
    deeplink?: `classting://webview?url={string}`;
    transition?: 'stack' | 'sheet' | 'drawer';
};

function Link(props: LinkProps): ReactElement {
    const [isInApp] = useInApp();
    
    const onLinkClick = (e) => {
        e.stopPropagation();
        
        if (isInApp) {
            location.href = props.deeplink + '?=' + props.transition;
        }
    };
    
    return (
        /* ... */
    );
}

### 웹뷰 닫힐 때 Refresh 또는 이후 플로우 구현

window event를 React Component lifecycle에 포함
useEffect 또는 react-use의 useEvent를 사용한 useInAppFocus hook 생성

https://github.com/classtinginc/classroom-service/pull/6218#pullrequestreview-1022688406

## Bridge 통신

### Page 단위

#### AppBar Top title, subtitle 세팅
#### AppBar Top Button Left/Right 세팅

- Web: HTML Title, Metadata 세팅
- NextJS: SEO Component
- React: Helmet
- App: HTML Title, Metadata 를 AppBar에 세팅

해결방안

// web title과 inapp title이 같다는 가정
function SEO(props: SEOProps) {
    const [isInApp] = useInApp();
    
    useEffect(() => {
        if (isInApp) {
            WebViewBridge.call({
               title: props.inappTitle,
               descript: props.inappDescription,
            });
        }
    }, [isInApp]);
    
    return (
        <Helmet>
        </Helmet>
    );
}

// web title과 inapp title이 같지 않다.
function NativeAppBarTop(props: InAppSEO) {
    useEffect(() => {
        if (isInApp) {
            WebViewBridge.call({
               title: props.title,
               descript: props.description,
            });
        }
    }, [isInApp]);
    
    return null;
}

### Page, Component 단위

#### AppBar Top Show/Hide
#### AppBar Bottom Show/Hide

WebViewBridge 호출

1. Component를 사용한 선언적 방식
- `<NativeAppBarTop hide />`
- `<NativeAppBarBottom hide />`
- Event에 따라 show/hide를 제어하기 어려움
2. helper function 호출 방식
- hook으로 정의
- frontned/feat/webview-appbartop 에 provider, context 정의

## Action Items

- [ ] Bridge 통신을 위한 Context Provider와 Hook @sora
- [ ] AppBar 설정을 위한 Component
- [ ] Deeplink를 위한 Custom Link Component @saebinna
- [ ] 화면 Refresh 또는 WebView 닫힘 이후 플로우를 위한 window event hook @saebinna