Merge pull request 'style: 지붕재 적합성 pdf pub 수정' (#64) from feature/suitable-pub into dev

Reviewed-on: #64

src/components/pdf/SuitablePdf.tsx

@@ -10,45 +10,127 @@ Font.register({
 
 const styles = StyleSheet.create({
   page: {
-    padding: 30,
-    fontSize: 10,
+    maxWidth: 840,
+    minWidth: 840,
+    margin: '0 auto',
+    padding: 20,
     fontFamily: 'NotoSansJP',
   },
-  text: {
+  introPage: {
+    height: 550,
+    padding: '60 20',
+  },
+  introTitWrap: {
+    textAlign: 'center',
+    marginBottom: 70,
+  },
+  introTit: {
+    fontSize: 18,
+    fontWeight: 500,
+    color: '#101010',
     fontFamily: 'NotoSansJP',
+    marginBottom: 20,
+  },
+  introDate: {
+    fontSize: 16,
+    fontWeight: 400,
+    color: '#101010',
+    fontFamily: 'NotoSansJP',
+  },
+  introContText: {
+    fontSize: 13,
+    fontWeight: 400,
+    color: '#101010',
+    fontFamily: 'NotoSansJP',
+  },
+  tableGridWrap: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    flexDirection: 'row',
+    gap: 20
+  },
+  tableCard:{
+    width: '48.7%',
+  },
+  tableTitWrap: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 5,
+  },
+  tableTit:{
+    fontSize: 8,
+    fontWeight: 500,
+    fontFamily: 'NotoSansJP',
+    color: '#101010',
+  },
+  tableTit01: {
+    paddingRight: 6,
+    borderRight: '1px solid #101010'
+  },
+  tableTit02: {
+    padding: '0 6',
+    borderRight: '1px solid #101010'
+  },
+  tableTit03: {
+    paddingLeft: 6,
   },
   table: {
     display: 'flex',
-    width: 'auto',
-    borderStyle: 'solid',
-    borderWidth: 1,
-    borderColor: '#000',
+    width: '100%',
   },
   tableRow: {
     flexDirection: 'row',
   },
-  tableColHeader: {
-    width: '25%',
-    borderStyle: 'solid',
-    borderWidth: 1,
-    backgroundColor: '#f0f0f0',
-    padding: 2,
+  tableCol01: {
+    width: '18%',
   },
-  tableCol: {
-    width: '25%',
-    borderStyle: 'solid',
-    borderWidth: 1,
-    padding: 2,
+  tableCol02: {
+    width: '23%',
+  },
+  tableCol03: {
+    width: '18%',
+  },
+  tableCol04: {
+    width: '41%',
+  },
+  tableTh: {
+    fontSize: 5,
+    fontWeight: 500,
+    color: '#fff',
+    backgroundColor: '#18B490',
+    border: '1px solid #18B490',
+    textAlign: 'center'
+  },
+  tableTd: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    fontSize: 5,
+    fontWeight: 300,
+    color: '#101010',
+    backgroundColor: '#fff',
+    border: '1px solid #CBCBCB',
+    padding: 3,
+  },
+  marginL:{
+    marginLeft: -1,
+  },
+  marginT:{
+    marginTop: -1,
   },
   footer: {
     position: 'absolute',
-    bottom: 30,
+    bottom: 5,
     left: 30,
     right: 30,
   },
   footerDate: {
-    fontSize: 10,
+    fontSize: 7,
     textAlign: 'right',
+    fontFamily: 'NotoSansJP',
+    fontWeight: 400,
+    color: '#101010',
   },
 })
 
@@ -70,52 +152,52 @@ export default function SuitablePdf({ data, fileTitle, firstPage }: { data: Suit
     <Page size="A4" orientation="landscape" style={styles.page}>
       {/* Intro Section */}
       {firstPage && (
-        <View>
-          <View>
-            <Text style={styles.text}>ハンファジャパン株式会社</Text>
-            <Text style={styles.text}>{fileTitle}</Text>
-            <Text style={styles.text}>{createTime}</Text>
+        <View style={styles.introPage}>
+          <View style={styles.introTitWrap}>
+            <Text style={styles.introTit}>ハンファジャパン株式会社</Text>
+            <Text style={styles.introTit}>{fileTitle}</Text>
+            <Text style={styles.introDate}>{createTime}</Text>
           </View>
           <View>
-            <Text style={styles.text}>本適合表は参考資料としてご使用下さい。</Text>
-            <Text style={styles.text}>屋根材製品の形状・仕様はメーカーより変更される場合が御座います。</Text>
-            <Text style={styles.text}>
+            <Text style={styles.introContText}>本適合表は参考資料としてご使用下さい。</Text>
+            <Text style={styles.introContText}>屋根材製品の形状・仕様はメーカーより変更される場合が御座います。</Text>
+            <Text style={styles.introContText}>
               又、現場環境（働き、勾配、瓦桟木条件等）により本適合表と異なる適合結果となる場合が御座います。予めご了承下さい。
             </Text>
-            <Text style={styles.text}>屋根材以外の設置条件（垂木、野地板等の設置基準）も必ずご確認下さい。</Text>
+            <Text style={styles.introContText}>屋根材以外の設置条件（垂木、野地板等の設置基準）も必ずご確認下さい。</Text>
           </View>
         </View>
       )}
 
-      <View>
+      <View style={styles.tableGridWrap}>
         {/* Cards Section */}
         {data?.map((item: Suitable) => (
-          <View key={item.id}>
+          <View key={item.id} style={styles.tableCard}>
             {/* Table Title */}
-            <View>
-              <Text style={styles.text}>{item.productName}</Text>
-              <Text style={styles.text}>{item.manuFtCd}</Text>
-              <Text style={styles.text}>{item.roofMtCd}</Text>
+            <View style={styles.tableTitWrap}>
+              <Text style={[styles.tableTit, styles.tableTit01]}>{item.productName}</Text>
+              <Text style={[styles.tableTit, styles.tableTit02]}>{item.manuFtCd}</Text>
+              <Text style={[styles.tableTit, styles.tableTit03]}>{item.roofMtCd}</Text>
             </View>
 
             {/* Table */}
             <View style={styles.table}>
               {/* Table Header */}
               <View style={styles.tableRow}>
-                <Text style={[styles.tableColHeader, styles.text]}>金具タイプ</Text>
-                <Text style={[styles.tableColHeader, styles.text]}>金具名</Text>
-                <Text style={[styles.tableColHeader, styles.text]}>設置可否</Text>
-                <Text style={[styles.tableColHeader, styles.text]}>備考</Text>
+                <Text style={[styles.tableCol01, styles.tableTh]}>金具タイプ</Text>
+                <Text style={[styles.tableCol02, styles.tableTh , styles.marginL]}>金具名</Text>
+                <Text style={[styles.tableCol03, styles.tableTh, styles.marginL]}>設置可否</Text>
+                <Text style={[styles.tableCol04 , styles.tableTh,  styles.marginL]}>備考</Text>
               </View>
 
               {/* Table Body */}
               <View>
                 {JSON.parse(item.detail)?.map((subItem: SuitableDetail) => (
                   <View key={subItem.id} style={styles.tableRow}>
-                    <Text style={[styles.tableCol, styles.text]}>{item.roofShCd}</Text>
-                    <Text style={[styles.tableCol, styles.text]}>{subItem.trestleMfpcCd}</Text>
-                    <Text style={[styles.tableCol, styles.text]}>{subItem.trestleManufacturerProductName}</Text>
-                    <Text style={[styles.tableCol, styles.text]}>{subItem.memo}</Text>
+                    <View style={[styles.tableCol01, styles.tableTd, styles.marginT]}><Text>{item.roofShCd}</Text></View>
+                    <View style={[styles.tableCol02, styles.tableTd, styles.marginL, styles.marginT]}><Text>{subItem.trestleMfpcCd}</Text></View>
+                    <View style={[styles.tableCol03, styles.tableTd, styles.marginL, styles.marginT]}><Text>{subItem.trestleManufacturerProductName}</Text></View>
+                    <View style={[styles.tableCol04, styles.tableTd, styles.marginL, styles.marginT]}><Text>{subItem.memo}</Text></View>
                   </View>
                 ))}
               </View>
@@ -126,7 +208,7 @@ export default function SuitablePdf({ data, fileTitle, firstPage }: { data: Suit
 
       {/* Footer */}
       <View style={styles.footer} fixed>
-        <Text style={[styles.footerDate, styles.text]}>{createTime}</Text>
+        <Text style={styles.footerDate}>{createTime}</Text>
       </View>
     </Page>
   )