fix: 일기 저장 html2canvas 클래스 인식 이슈로 인해 인라인 스타일로 변경

meommu · Nov 18, 2023 · 4de3f1e · 4de3f1e
1 parent 4f23cd7
commit 4de3f1e
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 8 deletions.
diff --git a/components/Widget/ImageSlider/index.tsx b/components/Widget/ImageSlider/index.tsx
@@ -42,8 +42,15 @@ export function ImageSlider({
         ))}
       </Swiper>
 
-      <View style={styles.order}>
-        <Text style={styles.orderText}>
+      {/**
+       * 스타일을 전개 연산자로 풀어 인라인 스타일로 적용한 이유
+       *
+       * : html2canvas 에서 동적으로 생성된 스타일을 찾을 수 없어 올바르게 내보내기 되지 않는 이슈를 해결하기 위함.
+       *
+       * (+) 이미지 슬라이더는 공유 일기 페이지에서도 사용 됨
+       */}
+      <View style={{ ...styles.order }}>
+        <Text style={{ ...styles.orderText }}>
           {swiperIndex + 1}/{imageIds.length}
         </Text>
       </View>

diff --git a/pages/Diary/DiaryPresenter/index.tsx b/pages/Diary/DiaryPresenter/index.tsx
@@ -43,10 +43,15 @@ export function DiaryPresenter({
       )}
 
       <NonIndicatorScrollView>
-        <View style={styles.captureArea} ref={imageRef}>
+        {/**
+         * 스타일을 전개 연산자로 풀어 인라인 스타일로 적용한 이유
+         *
+         * : html2canvas 에서 동적으로 생성된 스타일을 찾을 수 없어 올바르게 내보내기 되지 않는 이슈를 해결하기 위함.
+         */}
+        <View style={{ ...styles.captureArea }} ref={imageRef}>
           {isShared && (
             <Header
-              style={[styles.header, { height: 64 }]}
+              style={{ ...styles.header, height: 64 }}
               title={<Text style={styles.headerTitle}>meommu</Text>}
             />
           )}
@@ -57,10 +62,10 @@ export function DiaryPresenter({
             borderRadius={0}
           />
 
-          <View style={styles.body}>
-            <Text style={styles.bodyTitle}>{diary.title}</Text>
-            <Text style={styles.bodyContent}>{diary.content}</Text>
-            <Text style={styles.bodyDate}>
+          <View style={{ ...styles.body }}>
+            <Text style={{ ...styles.bodyTitle }}>{diary.title}</Text>
+            <Text style={{ ...styles.bodyContent }}>{diary.content}</Text>
+            <Text style={{ ...styles.bodyDate }}>
               {diary.date.replaceAll("-", ".")} {diary.dogName} 일기
             </Text>
           </View>