[APP-254] 공지글 보기 진입 시 강제종료되는 현상 대응 (#304)

# Summary - 안드로이드에서 특정 공지글 진입 시 앱이 강제종료되는 현상을 해결했습니다. - 확인된 바로는 표(table)이 있는 공지글에서 발생하는 현상이었습니다. - `react-native-render-html`과 `@native-html/table-plugin` 두 라이브러리를 사용하는데, 해당 조합에서 발생하는 [버그](meliorence/react-native-render-html#393. - `HTML(imported from 'react-native-render-html')` 컴포넌트에 특정한 prop을 추가함으로서 간단히(검색에 들인 시간과 비교했을 때 매우..) 해결되는 문제였습니다. ```tsx <HTML // with some other props.. renderersProps={{ table: { webViewProps: { style: {opacity: 0.99}, }, }, }} /> ```` # Blackbox - 에러가 무슨 이유로 발생하는지 파악하지 못하였습니다. 그에 따라 저 스타일과 관련된 것으로만 보이는 코드가 어떻게 이 에러를 해결하는지도 알 수가 없었습니다. - 원리를 파악하려면 해당 라이브러리 소스, 심하면 native level까지 뜯어보아야 하는 것으로 보여, 도저히 그렇게 할 엄두는 내지 못했습니다. 그닥 효율적인 방법도 아닌 것 같아서 일단 이대로 두는 게 최선으로 보입니다. # 반성과 느낀 점 - rebuild 배포 후에, UX에 큰 해악을 끼치는 에러를 너무 오래 방치해 두었다는 생각이 듭니다. 다음에는 신경써서 신속하게 고칠 수 있도록 하겠습니다. - QA가 제대로 진행되었다면 배포 전에 파악되지 않았을까 하는 아쉬움도 남습니다. # Allocated issue - close #293 # For reviewers - 말씀드렸다시피 사용자 경험을 심각하게 저하시키는 문제라 가능한 한 빠르게 merge, 변경사항 배포해주시면 좋겠습니다. 감사합니다..
uoslife · Jan 29, 2024 · 5d3a68b · 5d3a68b
1 parent 325461c
commit 5d3a68b
Showing 1 changed file with 9 additions and 3 deletions.
diff --git a/src/components/molecules/screens/announcement/detail/AnnouncementHTML.tsx b/src/components/molecules/screens/announcement/detail/AnnouncementHTML.tsx
@@ -1,7 +1,7 @@
+import TableRenderer from '@native-html/table-plugin';
 import {useWindowDimensions} from 'react-native';
 import HTML from 'react-native-render-html';
 import WebView from 'react-native-webview';
-import TableRenderer, {tableModel} from '@native-html/table-plugin';
 
 // Source: https://github.com/native-html/plugins/tree/master/packages/table-plugin#readme
 const AnnouncementHTML = ({description}: {description: string}) => {
@@ -15,8 +15,14 @@ const AnnouncementHTML = ({description}: {description: string}) => {
       source={{html: description}}
       WebView={WebView}
       renderers={{table: TableRenderer}}
-      renderersProps={{table: {}}}
-      customHTMLElementModels={{table: tableModel}}
+      // 에러 해결을 위한 코드(Reference: https://github.com/uoslife/rebuild-client/pull/304)
+      renderersProps={{
+        table: {
+          webViewProps: {
+            style: {opacity: 0.99},
+          },
+        },
+      }}
     />
   );
 };