fixing

src/components/accumulatedEconomyTitle/AccumulatedEconomyTitle.tsx

@@ -0,0 +1,6 @@
+import React from 'react'
+import { AccumulatedEconomyTitleView } from './AccumulatedEconomyTitleView'
+
+export default function AccumulatedEconomyTitle({value}: {value: string}) {
+  return <AccumulatedEconomyTitleView>Economia Acumulada:<p>R${value}</p></AccumulatedEconomyTitleView>
+}

src/components/accumulatedEconomyTitle/AccumulatedEconomyTitleView.ts

@@ -0,0 +1,16 @@
+import styled from "styled-components";
+
+export const AccumulatedEconomyTitleView = styled.b`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  font-size: 17px;
+
+  color: #254F7F;
+  p {
+    font-size: 20px;
+    color: #018A8A;
+    margin-left: 5px
+  }
+`

src/components/graph/Chart.tsx

@@ -1,125 +0,0 @@
-import React, { useState, useEffect } from 'react'
-
-import { draw, generate } from 'patternomaly'
-
-import { Bar, Line } from 'react-chartjs-2';
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  BarElement,
-  Title,
-  Tooltip,
-  Legend
-} from 'chart.js'
-
-import faker from 'faker'
-import { ChartView } from './ChartView';
-import RenderIf from '../../utils/renderIf';
-import ChartTitle from './ChartTitle';
-// import { data } from './LineBarChart';
-
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  BarElement,
-  Title,
-  Tooltip,
-  Legend
-)
-
-interface ChartInterface {
-  title: string,
-  subtitle: string,
-  data1: any,
-  data2: any,
-  single?: any
-  label: any,
-  dataset1?: string,
-  dataset2?: string,
-  miniature?: boolean | undefined
-}
-
-export default function Chart({ title, data1, data2, label, subtitle, dataset1, dataset2, miniature }: ChartInterface) {
-
-  const labels = label;
-
-  const options: any = {
-    responsive: true,
-    scales: {
-      x: {
-        stacked: true,
-        grid: {
-          display: false
-        }
-      },
-    },
-    plugins: {
-      datalabels: {
-        display: true,
-        color: 'black',
-        formatter: (value, ctx) => {
-          let sum = 0;
-          const dataArr = ctx.chart.data.datasets[0].data;
-          dataArr.map(data => {
-              sum += data;
-          });
-          const result = `${parseInt(value).toLocaleString('pt-br')}`
-
-          return value==null? null : result
-        },
-        anchor: "end",
-        align: "end",
-        font: {
-          size: !miniature? 15 : 10,
-        }
-      },
-      legend: {
-        position: 'bottom' as const,
-
-      },
-      title: {
-        display: true,
-        text: '',
-      },
-    },
-  };
-
-  const data = {
-    labels,
-    datasets: [
-      {
-        label: dataset1? dataset1 : '2021',
-        data: data1.map(value => value.custo_unit>0? value.custo_unit : null),
-        backgroundColor: '#255488'
-        // backgroundColor: (value, ctx) => {
-        //   return data1[value.dataIndex]?.dad_estimado == false ? '#255488' : draw('diagonal-right-left', '#255488');
-        // },
-      },
-      {
-        label: dataset2? dataset2 : '2022',
-        data: data2.map(value => value.custo_unit>0? value.custo_unit : null),
-        // backgroundColor: '#C2d5fb'
-        backgroundColor: (value, ctx) => {
-          return data2[value.dataIndex]?.dad_estimado == false ? '#C2d5fb' : document ? document ? draw('diagonal-right-left', '#C2d5fb') : null: null;
-        },
-      }
-    ],
-  }
-
-  return (
-    <ChartView>
-      {/* <RenderIf isTrue={single? true : false} >
-        <Bar
-          options={options}
-          data={graphData}
-        />
-      </RenderIf> */}
-      <ChartTitle title={title} subtitle={subtitle} />
-      <Bar
-        options={options}
-        data={data}
-      />
-    </ChartView>
-  )
-}

src/components/graph/Chart2.tsx

@@ -1,124 +0,0 @@
-import React from 'react'
-
-import { Bar, Line, Chart as ChartJs } from 'react-chartjs-2';
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  BarElement,
-  Title,
-  Tooltip,
-  Legend
-} from 'chart.js'
-
-import { draw, generate } from 'patternomaly'
-
-import { ChartView } from './ChartView';
-import ChartTitle from './ChartTitle';
-// import { data } from './LineBarChart';
-
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  BarElement,
-  Title,
-  Tooltip,
-  Legend
-)
-
-interface ChartInterface {
-  title: string,
-  subtitle: string,
-  data1: any,
-  data2: any,
-  single?: any
-  label: any,
-  dataset1?: string,
-  dataset2?: string,
-  miniature?: boolean | undefined
-}
-
-export default function Chart({ title, data1, data2, label, subtitle, dataset1, dataset2, miniature }: ChartInterface) {
-
-  const labels = label;
-
-  const options: any = {
-    responsive: true,
-    scales: {
-      x: {
-        grid: {
-          display: false
-        }
-      },
-      y: {
-        grid: {
-          display: false
-        }
-      },
-    },
-    plugins: {
-      datalabels: {
-        display: true,
-        color: 'black',
-        formatter: (value, ctx) => {
-          let sum = 0;
-          const dataArr = ctx.chart.data.datasets[0].data;
-          dataArr.map(data => {
-              sum += data;
-          });
-          const percentage = data1[ctx.dataIndex]?.econ_percentual? (data1[ctx.dataIndex].econ_percentual*100).toFixed(0)+"%" : '';
-          const result = `${parseInt(value)!=0? percentage : ''}\n  ${parseInt(value)!=0? parseInt(value).toLocaleString('pt-br') : ''}`
-
-          return value==null? null : result
-        },
-        anchor: "end",
-        offset: 0,
-        align: "end",
-        font: {
-          size: !miniature? 18 : 10,
-        }
-      },
-      legend: {
-        position: 'bottom' as const,
-
-      },
-      title: {
-        display: true,
-        text: '',
-      },
-    },
-  };
-
-  const data: any = {
-    labels,
-    datasets: [
-      {
-        type: 'bar',
-        label: 'Acumulado',
-        data: data1.map(value => value?.economia_acumulada),
-        backgroundColor: '#255488'
-      },
-      {
-        type: 'bar',
-        label: 'Estimado',
-        data: data2.map(value => value.dad_estimado? value?.economia_acumulada : null),
-        backgroundColor: document ? document ? draw('diagonal-right-left', '#C2d5fb') : null: null
-      },
-    ],
-  }
-
-  return (
-    <ChartView>
-      {/* <RenderIf isTrue={single? true : false} >
-        <Bar
-          options={options}
-          data={graphData}
-        />
-      </RenderIf> */}
-      <ChartTitle title={title} subtitle={subtitle} />
-      <ChartJs
-        options={options}
-        data={data} type={'bar'} />
-    </ChartView>
-  )
-}

src/components/graph/SingleBar.tsx

@@ -1,127 +0,0 @@
-import { BarElement, CategoryScale, Chart as ChartJS, Legend, LinearScale, Title, Tooltip } from 'chart.js';
-import ChartDataLabels from 'chartjs-plugin-datalabels';
-import { draw, generate } from 'patternomaly'
-import React from 'react';
-import { Bar } from 'react-chartjs-2';
-
-import ChartTitle from './ChartTitle';
-import { ChartView } from './ChartView';
-
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  BarElement,
-  Title,
-  Tooltip,
-  Legend,
-  ChartDataLabels
-);
-
-interface SingleBarInterface{
-  title: string,
-  subtitle: string,
-  dataProps: any,
-  label: Array<string>,
-  dataset: string,
-  barLabel?: boolean | undefined,
-  miniature?: boolean | undefined,
-  bruta?: boolean | undefined
-}
-
-export function SingleBar({ title, subtitle, dataProps, label, dataset, barLabel, miniature, bruta }: SingleBarInterface) {
-  const options: object = {
-    responsive: true,
-    scales: {
-      x: {
-        font: {
-          size: 20
-        },
-        grid: {
-          display: false
-        }
-      },
-    },
-    series: {
-      downsample: {
-        threshold: 1000
-      }
-    },
-    plugins: {
-      datalabels: {
-        formatter: (value, ctx) => {
-          let sum = 0;
-          const dataArr = ctx.chart.data.datasets[0].data;
-          dataArr.map(data => {
-              sum += data;
-          });
-          const percentage = (dataProps[ctx.dataIndex].econ_percentual*100).toFixed(0)+"%";
-          const result = ` ${parseInt(value).toLocaleString('pt-br')}\n ${percentage}`
-
-          return value==null? null : result
-        },
-        display: true,
-        color: barLabel? 'black' : "rgba(255, 255, 255, 0)",
-        anchor: "end",
-        offset: -60,
-        align: "start",
-        font: {
-          size: !miniature? 22 : 10
-        }
-      },
-      legend: {
-        position: 'bottom' as const,
-        labels: {
-          font: {
-            size: 16
-          }
-        }
-      },
-      title: {
-        display: false,
-        text: '',
-      },
-    },
-  };
-
-  let labels: string[];
-  if (bruta) {
-    labels = label.map(value => value.replace('2021', 'até 2021'))
-  } else {
-    labels = label
-  }
-
-  const data: any = {
-    labels,
-    datasets: [
-      {
-        label: 'Estimado',
-        data: [],
-        backgroundColor: '#C2d5fb',
-      },
-      {
-        label: dataset,
-        data: dataProps.map((value, index) => {
-          return parseFloat(value.economia_acumulada).toFixed(2)
-        }),
-        backgroundColor: (value, ctx) => {
-          return dataProps[value.dataIndex]?.dad_estimado == false ? '#255488' : document ? document ? draw('diagonal-right-left', '#C2d5fb') : null: null;
-        },
-      },
-      {
-        label: '',
-        data: [dataProps[0]?.economia_acumulada?dataProps[0].economia_acumulada*1.1 : 1],
-        backgroundColor: 'transparent',
-        datalabels: {
-          display: false
-        }
-      },
-    ],
-  }
-
-  return (
-    <ChartView>
-      <ChartTitle title={title} subtitle={subtitle} />
-      <Bar options={options} data={data} />
-    </ChartView>
-  )
-}

src/components/graph/config.ts

@@ -0,0 +1,66 @@
+import { ChartOptions, ChartType } from "chart.js";
+
+const config = (miniature: boolean | undefined): ChartOptions<ChartType> => {
+  const options: any = {
+      responsive: true,
+      scales: {
+        x: {
+          stacked: false,
+          grid: {
+            display: false
+          },
+          ticks: {
+            font: {
+              size: !miniature? window.innerWidth/90 : window.innerWidth/110
+            }
+          },
+        },
+        y: {
+          stacked: false,
+          grid: {
+            display: false
+          },
+          ticks: {
+            font: {
+              size: !miniature? window.innerWidth/90 : window.innerWidth/110
+            }
+          },
+        },
+      },
+      plugins: {
+        datalabels: {
+          display: true,
+          color: '#255488',
+          formatter: (value, ctx) => {
+            let sum = 0;
+            const dataArr = ctx.chart.data.datasets[0].data;
+            dataArr.map(data => {
+                sum += data;
+            });
+            const result = `${parseFloat((parseFloat(value)).toLocaleString('pt-br'))}`
+
+            return value==null? null : result
+          },
+          anchor: "end",
+          align: "end",
+          font: {
+            weight: 'bold',
+            size: !miniature? window.innerWidth/80 : window.innerWidth/105
+          }
+        },
+        legend: {
+          position: 'bottom' as const,
+
+        },
+        title: {
+          display: true,
+          text: '',
+        },
+      },
+  };
+  return options
+}
+
+export {
+  config
+}

src/components/graph/costIndicatorChart/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React from 'react'
 
 import { draw } from 'patternomaly'
 
@@ -16,6 +16,7 @@ import {
 import { CostIndicatorChartView } from './CostIndicatorChartView';
 import ChartTitle from '../ChartTitle';
 import { Stack } from '@mui/material';
+import { config } from '../config';
 
 ChartJS.register(
   CategoryScale,
@@ -40,72 +41,18 @@ export default function CostIndicatorChart({ title, data1, data2, label, subtitl
 
   const labels = label;
 
-  const options: any = {
+  const options: any = config(miniature)
-    responsive: true,
-    scales: {
-      x: {
-        stacked: false,
-        grid: {
-          display: false
-        },
-        ticks: {
-          font: {
-            size: !miniature? window.innerWidth/90 : window.innerWidth/110
-          }
-        },
-      },
-      y: {
-        stacked: false,
-        grid: {
-          display: false
-        },
-        ticks: {
-          font: {
-            size: !miniature? window.innerWidth/90 : window.innerWidth/110
-          }
-        },
-      },
-    },
-    plugins: {
-      datalabels: {
-        display: true,
-        color: '#255488',
-        formatter: (value, ctx) => {
-          let sum = 0;
-          const dataArr = ctx.chart.data.datasets[0].data;
-          dataArr.map(data => {
-              sum += data;
-          });
-          const result = `${parseFloat((parseFloat(value)).toLocaleString('pt-br'))}`
 
-          return value==null? null : result
+  console.log(data1?.map(value => value))
-        },
-        anchor: "end",
-        align: "end",
-        font: {
-          weight: 'bold',
-          size: !miniature? window.innerWidth/80 : window.innerWidth/105
-        }
-      },
-      legend: {
-        position: 'bottom' as const,
-
-      },
-      title: {
-        display: true,
-        text: '',
-      },
-    },
-  };
 
   const data = {
     labels,
     datasets: [
       {
         label: '2021',
-        data: data1?.map(value => value.custo_unit>0? value.custo_unit : null),
+        data: data1?.map(value => value),
-        borderRadius: 8,
         skipNull: true,
+        borderRadius: 8,
         datalabels: {
           backgroundColor: 'white',
           borderRadius: 8,
@@ -113,7 +60,7 @@ export default function CostIndicatorChart({ title, data1, data2, label, subtitl
           offset: -5
         },
         backgroundColor: (value, ctx) => {
-          if (value.dad_estimado)
+          if (value?.dad_estimado)
             return draw('diagonal-right-left', '#C2d5fb');
           else
             return '#C2d5fb'
@@ -121,11 +68,11 @@ export default function CostIndicatorChart({ title, data1, data2, label, subtitl
       },
       {
         label: '2022',
-        data: data2?.map(value => value.custo_unit>0? value.custo_unit : null),
+        data: data2?.map(value => value?.custo_unit),
         skipNull: true,
         borderRadius: 8,
         backgroundColor: (value, ctx) => {
-          if (value.dad_estimado)
+          if (value?.dad_estimado)
             return draw('diagonal-right-left', '#255488');
           else
             return '#255488'

src/components/graph/graphCard/ChartCardView.ts

@@ -26,21 +26,6 @@ export const ChartCardView = styled.article`
     margin-bottom: 10px;
   }
 
-  b {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    font-size: 17px;
-
-    color: #254F7F;
-    p {
-      font-size: 20px;
-      color: #018A8A;
-      margin-left: 5px
-    }
-  }
-
   a {
     font-family: 'Poppins';
     font-style: normal;

src/pages/aboutUs/index.tsx

@@ -3,7 +3,6 @@ import Head from 'next/head'
 import Image from 'next/image'
 import { parseCookies } from 'nookies'
 import React from 'react'
-import Banner from '../../components/banner/Banner'
 import Header from '../../components/header/Header'
 import PageTitle from '../../components/pageTitle/PageTitle'
 import getAPIClient from '../../services/ssrApi'
@@ -38,7 +37,7 @@ export default function aboutUs({userName, text}) {
           </ul>
         </section>
         <div className='image'>
-          <Image src='/assets/banners/aboutUs.jpg' width={280} height={180}/>
+          <Image src='/assets/banners/aboutUs.jpg' width={310} height={210}/>
         </div>
         <article>
           <aside>

src/pages/dashboard/index.tsx

@@ -16,6 +16,7 @@ import CostIndicatorChart from '../../components/graph/costIndicatorChart'
 import { CativoXLivreChart } from '../../components/graph/cativoXLivreChart'
 import GrossMensalChart from '../../components/graph/grossMensalChart/GrossMensalChart'
 import Head from 'next/head'
+import AccumulatedEconomyTitle from '../../components/accumulatedEconomyTitle/AccumulatedEconomyTitle'
 
 export default function Dashboard({grossAnualGraph, grossAnualYears, grossMensalGraph, grossMensalYears, acumulatedGraph, mapsInfo, userName, costIndicator} : any) {
   const months = [
@@ -79,7 +80,7 @@ export default function Dashboard({grossAnualGraph, grossAnualYears, grossMensal
         <>
           <section className='dashboard'>
             <GraphCard title='Economia Anual' subtitle='Economia Bruta Estimada e Acumulada Anual - Valores em R$ x mil'>
-              <b>Economia Acumulada:<p>R${lastDataBrutaMensalS}</p></b>
+              <AccumulatedEconomyTitle value={lastDataBrutaAnualS}/>
               <GrossAnualChart title='' subtitle=''
                 dataset='Consolidada'
                 dataProps={grossAnualGraph}
@@ -87,7 +88,7 @@ export default function Dashboard({grossAnualGraph, grossAnualYears, grossMensal
             </GraphCard>
 
             <GraphCard title='Economia Mensal' subtitle='Economia Bruta Estimada e Acumulada Mensal - Valores em R$ x mil'>
-              <b>Economia Acumulada:<p>{` R$${lastDataBrutaMensalS}`}</p></b>
+              <AccumulatedEconomyTitle value={lastDataBrutaMensalS}/>
               <GrossMensalChart title='' subtitle=''
                 data1={grossMensalGraph}
                 data2={grossMensalGraph}
@@ -104,9 +105,9 @@ export default function Dashboard({grossAnualGraph, grossAnualYears, grossMensal
 
             <GraphCard title='Indicador de Custo' subtitle='Indicador de Custo - Valores em R$/MWh'>
               <CostIndicatorChart title='' subtitle=''
-                data1={costIndicator.filter((value, index) => value.mes.slice(0, 4).includes('2021'))}
+                data1={costIndicator?.filter((value, index) => value?.mes.slice(0, 4).includes('2021')).map(value => value?.custo_unit? value.custo_unit : null)}
                 // data1={graphData}
-                data2={costIndicator.filter((value, index) => value.mes.slice(0, 4).includes('2022'))}
+                data2={costIndicator?.filter((value, index) => value?.mes.slice(0, 4).includes('2022'))}
                 label={months}
                 miniature
               />
@@ -114,7 +115,6 @@ export default function Dashboard({grossAnualGraph, grossAnualYears, grossMensal
           </section>
         </>
       }
-
     </DashboardView>
   )
 }

src/pages/economy/index.tsx

@@ -23,8 +23,9 @@ import GrossMensalChart from '../../components/graph/grossMensalChart/GrossMensa
 import { CativoXLivreChart } from '../../components/graph/cativoXLivreChart';
 import CostIndicatorChart from '../../components/graph/costIndicatorChart';
 import { EconomyView } from '../../styles/layouts/economy/economy';
+import AccumulatedEconomyTitle from '../../components/accumulatedEconomyTitle/AccumulatedEconomyTitle';
 
-export default function economy({userName, anual, years, brutaMensal, yearsBrutaMensal, catLiv, clients, indicatorCost}: any) {
+export default function economy({userName, anual, years, brutaMensal, catLiv, clients, indicatorCost}: any) {
   const {economyMenu, setEconomyMenu} = useContext(MenuContext)
 
   const [unity, setUnity] = useState<string>('');
@@ -47,7 +48,7 @@ export default function economy({userName, anual, years, brutaMensal, yearsBruta
     'Dez'
   ]
 
-  const [lastDataBrutaMensalS, setLastDataBrutaMensal] = useState('')
+  const [lastDataBruta, setLastDataBruta] = useState('')
   useEffect(() => {
     let lastData = '0'
     let index=0
@@ -60,11 +61,11 @@ export default function economy({userName, anual, years, brutaMensal, yearsBruta
     } else {
       while (index < anual.length) {
         if (!anual[index].dad_estimado)
-          lastData=brutaMensal[index].economia_acumulada
+        lastData=anual[index].economia_acumulada
         index++
       }
     }
-    setLastDataBrutaMensal(`${parseFloat(lastData).toFixed(3)}`)
+    setLastDataBruta(`${parseFloat(lastData).toFixed(3)}`)
   }, [economyMenu])
 
   useEffect(() => {
@@ -113,12 +114,12 @@ export default function economy({userName, anual, years, brutaMensal, yearsBruta
             :
             <p>Indicador de Custo - Valores em R$/MWh</p>
           }
-          <p>{
+          {
             economyMenu===0 || economyMenu===1?
-              <><b>Economia Acumulada: <p style={{color: '#018A8A', marginLeft: '5px'}}>R${lastDataBrutaMensalS}</p></b></>
+              <AccumulatedEconomyTitle value={lastDataBruta}/>
               :
               null
-          }</p>
+          }
         </article>
         {
           typeof window === 'undefined' || typeof window === undefined? null :
@@ -139,7 +140,7 @@ export default function economy({userName, anual, years, brutaMensal, yearsBruta
                 <GrossMensalChart title='' subtitle=''
                   data1={brutaMensal}
                   data2={brutaMensal}
-                  label={yearsBrutaMensal}
+                  label={months}
                 />
               </section>
             </RenderIf>
@@ -222,8 +223,6 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
 
   await apiClient.post('/economy/grossAnnual').then(res => {
     anual = res.data.data
-  }).catch(res => {
-    // console.log(res)
   })
 
   const years = anual.map((value) => value.ano)
@@ -232,9 +231,6 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
 
   await apiClient.post('/economy/grossMonthly').then(res => {
     brutaMensal = res.data.data
-    // console.log(graphData[0].mes)
-  }).catch(res => {
-    // console.log(res)
   })
 
   const yearsBrutaMensal = brutaMensal.map((value) => value.mes)
@@ -254,24 +250,15 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
 		"distinct": true
   }).then(res => {
     clients = res.data.data
-  }).catch(res => {
-    // console.log(res)
   })
-
   await apiClient.post('/economy/estimates').then(res => {
     catLiv = res.data.data
-  }).catch(res => {
-    // console.log(res)
   })
-
   let indicatorCost = []
 
   await apiClient.post('/economy/MWh').then(res => {
     indicatorCost = res.data.data
-  }).catch(res => {
-    // console.log(res)
   })
-
   if (!token) {
     return {
       redirect: {

src/pages/industryInfo/index.tsx

@@ -65,9 +65,9 @@ export default function industryInfo({userName}: any) {
       <IndustryInfoView>
         <section>
           <article>
-            <p>A Smart é uma empresa de vanguarda na informação sobre o Setor Elétrico Brasileiro e mantém sólidos relacionamentos com os agentes e entidades do setor,
+            <p style={{marginRight: '10px'}}>A Smart é uma empresa de vanguarda na informação sobre o Setor Elétrico Brasileiro e mantém sólidos relacionamentos com os agentes e entidades do setor,
               a informação precisa aliada à mais de 21 anos de experiência torna a sua consultoria estratégica para consumidores e geradores</p>
-            <Image src='/assets/banners/sectoriaInf.jpg' width={200} height={200}/>
+            <Image src='/assets/banners/sectoriaInf.jpg' width={350} height={250}/>
           </article>
           <p>Um resumo das atualizações gerais do Setor Elétrico, com dados sobre geração consumo, demanda, meteorologia baseadas em informações do ONS, CCEE, ANEEL, 10 Maiores Jornais e Revistas e CPTEC</p>
         </section>

src/styles/layouts/ResumoOperacao/ResumoOperacaoView.ts

@@ -175,6 +175,12 @@ export const TableBodyView = styled.section`
   border-style:solid;
   border-width: 1px;
 
+  background: #F8F8F8;
+	box-shadow: 0 0 11px rgba(0, 0, 0, 0.2)  ;
+	-webkit-box-shadow: 0 0 11px rgba(0, 0, 0, 0.2)  ;
+	-moz-box-shadow: 0 0 11px rgba(0, 0, 0, 0.2)  ;
+  border-radius: 10px;
+
   tr {
     :last-child {
       /* background-color: red; */

src/styles/layouts/aboutUs/AboutUsView.ts

@@ -19,7 +19,12 @@ export const AboutUsView = styled.main`
     transform: translateY(-190px);
   }
 
+  p {
+    text-align: justify;
+  }
+
   h2 {
+    margin-top: 40px;
     font-size: 16px;
   }
 

src/styles/layouts/economy/economy.ts

@@ -34,25 +34,13 @@ export const EconomyView = styled.main`
     align-items: center;
     justify-content: space-between;
 
-    b {
+    /* p {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      font-size: 17px;
-      p {
-        font-size: 20px;
-        text-decoration: underline;
-      }
-    }
-
-    p {
       :first-child {
         margin-left: '3%'
       }
       :last-child {
         color: #254F7F;
       }
-    }
+    } */
   }
 `

src/styles/layouts/industryInfo/IndustryInfoView.ts

@@ -18,7 +18,7 @@ export const IndustryInfoView = styled.main`
   }
 
   p {
-    text-align: justify;
+    text-align: justify!important;
   }
 
   button{
@@ -64,6 +64,7 @@ export const IndustryInfoView = styled.main`
     flex-direction: row;
 
     p {
+      text-align: justify;
       width: 75%
     }
   }

src/styles/layouts/pld/PldView.ts

@@ -9,6 +9,12 @@ export const PldTableMinMaxView = styled.div`
   border-style:solid;
   border-width: 1px;
 
+  background: #F8F8F8;
+	box-shadow: 0 0 11px rgba(0, 0, 0, 0.2)  ;
+	-webkit-box-shadow: 0 0 11px rgba(0, 0, 0, 0.2)  ;
+	-moz-box-shadow: 0 0 11px rgba(0, 0, 0, 0.2)  ;
+  border-radius: 10px;
+
   background-color: #FFFFFF;
 
   margin-top: 15px;
@@ -218,6 +224,12 @@ export const PldTableView = styled.div<{display?: boolean}>`
   border-style:solid;
   border-width: 1px;
 
+  background: #F8F8F8;
+	box-shadow: 0 0 11px rgba(0, 0, 0, 0.2)  ;
+	-webkit-box-shadow: 0 0 11px rgba(0, 0, 0, 0.2)  ;
+	-moz-box-shadow: 0 0 11px rgba(0, 0, 0, 0.2)  ;
+  border-radius: 10px;
+
   background-color: #FFFFFF;
 
   margin-top: 38px;