dev fix#4-1

src/pages/BackstageSinglePage/GraphSection.js

@@ -3,6 +3,7 @@ import styled from '@emotion/styled'
 import PropTypes from 'prop-types'
 import { useParams } from 'react-router-dom'
 import SectionWrapper from './components/SectionWrapper'
+import Title from './components/Title'
 import flexJustifyAlign from '../../styles/flexJustifyAlign'
 import { getIssueData } from '../../webapi/issueApi'
 import {
@@ -18,8 +19,8 @@ import LoadingContext from '../../contexts/loadingContext'
 
 const Buttons = styled.div`
   width: 100%;
-  min-width: 400px;
-  padding: 1rem 2rem;
+  min-width: calc(400px - 4rem);
+  padding: 1rem 0rem;
   ${flexJustifyAlign('space-between')}
   flex-flow: row wrap;
 `
@@ -47,6 +48,10 @@ const Button = styled.div`
   }
 `
 
+const TitleWrapper = styled.div`
+  padding: 1rem 2rem;
+`
+
 const GraphWrapper = styled.div`
   ${flexJustifyAlign('center')}
 `
@@ -109,7 +114,7 @@ ButtonContainer.propTypes = {
 
 // main component ------------------------
 const GraphSection = () => {
-  const [filter, setFilter] = useState('all')
+  const [filter, setFilter] = useState('')
   const [data, setData] = useState([])
   const setIsLoading = useContext(LoadingContext)
   const { url } = useParams()
@@ -128,8 +133,8 @@ const GraphSection = () => {
   useEffect(() => {
     if (!url) return
     const doAsyncEffects = async () => {
+      setIsLoading(true)
       try {
-        setIsLoading(true)
         const response = await getIssueData(url)
         const { data } = response
         if (!data.ok) throw new Error(data.message)
@@ -139,23 +144,28 @@ const GraphSection = () => {
             date: e.date.slice(5, 10).replace(/-/, '/')
           }))
         )
+        setFilter('all')
       } catch (error) {
         console.log(error.message)
+      } finally {
+        setIsLoading(false)
       }
-      setIsLoading(false)
     }
     doAsyncEffects()
   }, [url])
 
   return (
     <SectionWrapper isGreyBackground={true}>
-      <ButtonContainer
-        filter={filter}
-        setFilter={setFilter}
-        data={data}
-        setData={setData}
-        lineColor={LINE_COLOR}
-      />
+      <TitleWrapper>
+        <Title>分析告報</Title>
+        <ButtonContainer
+          filter={filter}
+          setFilter={setFilter}
+          data={data}
+          setData={setData}
+          lineColor={LINE_COLOR}
+        />
+      </TitleWrapper>
       <GraphWrapper>
         <LineChart
           width={graphWidth}

src/pages/BackstageSinglePage/QRcodeSection.js

@@ -5,7 +5,9 @@ import styled from '@emotion/styled'
 
 import logo from '../../logo.svg'
 import SectionWrapper from './components/SectionWrapper'
+import Title from './components/Title'
 import { FRONTEND_BASE_URL } from '../../constants/baseURL'
+import scrollbarStyle from '../../styles/scrollbarStyle'
 
 const QRcodeWrapper = styled.div`
   display: flex;
@@ -19,11 +21,6 @@ const QRcodeWrapper = styled.div`
   }
 `
 
-const Title = styled.h2`
-  font-size: 1.25rem;
-  align-self: flex-start;
-`
-
 const QRcodeImageWrapper = styled.div`
   width: 200px;
   height: 200px;
@@ -44,18 +41,7 @@ const URLWrapper = styled.div`
   border-radius: 1.3rem;
   border: 1px solid ${({ theme }) => theme.secondary_300};
   padding: 0.3rem 1rem;
-  ::-webkit-scrollbar {
-    width: 0.5rem;
-    height: 0.5rem;
-  }
-  ::-webkit-scrollbar-track {
-    background: ${({ theme }) => theme.secondary_850};
-    border-radius: 0.5rem;
-  }
-  ::-webkit-scrollbar-thumb:hover {
-    background: ${({ theme }) => theme.secondary_300};
-    border-radius: 0.5rem;
-  }
+  ${scrollbarStyle}
 `
 
 const CopyWrapper = styled.a`

src/pages/BackstageSinglePage/components/Title.js

@@ -0,0 +1,8 @@
+import styled from '@emotion/styled'
+
+const Title = styled.h2`
+  font-size: 1.25rem;
+  align-self: flex-start;
+`
+
+export default Title

src/pages/IssuePage/IssuePage.js

@@ -20,6 +20,7 @@ import {
   UserTokenContext
 } from '../../contexts/tokenContexts'
 import { isIssueFinished, isIssueOncoming, isIssueOngoing } from '../../utils'
+import scrollbarStyle from '../../styles/scrollbarStyle'
 
 const Wrapper = styled.div`
   height: calc(100vh - 4rem);
@@ -41,8 +42,12 @@ const BackstageCommentsBlockTitle = styled.h2`
 const CommentsWrapper = styled.div`
   width: 95%;
   position: relative;
-  padding: 2rem 0 7rem;
-  ${flexJustifyAlign()}
+  padding-top: 2rem;
+  margin-bottom: 7rem;
+  ${flexJustifyAlign('flex-start')}
+  ${scrollbarStyle}
+  overflow-x: hidden;
+  overflow-y: scroll;
   flex-direction: column;
   gap: 1rem;
   svg {

src/styles/scrollbarStyle.js

@@ -0,0 +1,20 @@
+import theme from './theme'
+
+export default `
+  ::-webkit-scrollbar {
+    width: 0.5rem;
+    height: 0.5rem;
+  }
+  ::-webkit-scrollbar-track {
+    background: ${theme.secondary_850};
+    border-radius: 0.5rem;
+  }
+  ::-webkit-scrollbar-thumb {
+    background: ${theme.secondary_300};
+    border-radius: 0.5rem;
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    background: ${theme.secondary_200};
+    border-radius: 0.5rem;
+  }
+`

src/webapi/instance.js

@@ -9,8 +9,6 @@ const instance = axios.create({
 instance.interceptors.request.use((config) => {
   config.headers.Authorization = `Bearer ${storage.getUserToken()}`
   config.headers['guest-token'] = storage.getGuestToken()
-  config.headers['X-Z-Header'] = 'z-axis'
-  config.headers['Access-Control-Allow-Origin'] = '*'
   return config
 })