From be9a7578e080bc447f78e9e2597c375215896fd4 Mon Sep 17 00:00:00 2001
From: somangoi <somi.c.hwang@gmail.com>
Date: Thu, 10 Nov 2022 09:41:17 +0900
Subject: [PATCH 1/2] fix title

---
 src/components/FloatingText.tsx | 17 ++++++++++++++---
 src/pages/Period.tsx            | 11 -----------
 src/pages/PeriodFAQ.tsx         | 13 +++++++++++--
 3 files changed, 25 insertions(+), 16 deletions(-)

diff --git a/src/components/FloatingText.tsx b/src/components/FloatingText.tsx
index e3bd985..516ed8f 100644
--- a/src/components/FloatingText.tsx
+++ b/src/components/FloatingText.tsx
@@ -7,6 +7,7 @@ import {
   Fade,
   ThemeProvider,
   Typography,
+  useMediaQuery,
 } from '@mui/material';
 
 type Props = {
@@ -35,11 +36,13 @@ function FloatingText(props: Props) {
   } = props;
   const [visible, setVisible] = useState<boolean>(false);
   const { scrollY } = useScroll();
+  const isMobile = useMediaQuery('(max-width: 600px)');
 
   const theme = createTheme({
     typography: {
       h1: {
-        fontSize: fontSize,
+        fontFamily: 'inherit',
+        fontSize: !isMobile ? fontSize : `calc(${fontSize} * 0.8)`,
         color: fontColor,
         fontWeight: fontWeight,
         wordBreak: 'keep-all',
@@ -59,7 +62,7 @@ function FloatingText(props: Props) {
     <Fade in={visible}>
       <Wrapper top={top} left={left} centerAlign={centerAlign ? true : false}>
         <ThemeProvider theme={theme}>
-          <Typography variant="h1">{text}</Typography>
+          <TypographyComponent variant="h1">{text}</TypographyComponent>
         </ThemeProvider>
       </Wrapper>
     </Fade>
@@ -67,9 +70,13 @@ function FloatingText(props: Props) {
 }
 
 const Wrapper = styled.div<{ top: string; left: string; centerAlign: boolean }>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
   position: fixed;
   top: ${({ top }) => top};
-  left: ${({ left }) => left};
+  /* left: ${({ left }) => left}; */
   transform: translate(
     ${({ centerAlign }) => (centerAlign ? '-50%' : '0')},
     ${({ centerAlign }) => (centerAlign ? '-50%' : '0')}
@@ -77,4 +84,8 @@ const Wrapper = styled.div<{ top: string; left: string; centerAlign: boolean }>`
   z-index: 999;
 `;
 
+const TypographyComponent = styled(Typography)`
+  max-width: 600px;
+  width: 80vw;
+`;
 export default FloatingText;
diff --git a/src/pages/Period.tsx b/src/pages/Period.tsx
index 8a43b82..d8262a5 100644
--- a/src/pages/Period.tsx
+++ b/src/pages/Period.tsx
@@ -197,17 +197,6 @@ function Period({ chapter }: PeriodProps) {
       top: '6rem',
       left: '15%',
     },
-    {
-      id: 'title2-3',
-      text: t('Chapter2-3Title'),
-      fontSize: '2rem',
-      fontColor: 'white',
-      fontWeight: 600,
-      start: 17500,
-      end: 20000,
-      top: '6rem',
-      left: '15%',
-    },
     {
       id: 'title2-4',
       text: t('Chapter2-4Title'),
diff --git a/src/pages/PeriodFAQ.tsx b/src/pages/PeriodFAQ.tsx
index 9ba74a1..023b1d4 100644
--- a/src/pages/PeriodFAQ.tsx
+++ b/src/pages/PeriodFAQ.tsx
@@ -10,12 +10,13 @@ type Props = {
 };
 
 const PeriodFAQ = (props: Props) => {
-  const { t } = useTranslation('PeriodFAQ');
+  const { t } = useTranslation(['PeriodFAQ', 'Period']);
   return (
     <PeriodFAQContainer
       virtualHeight={props.virtualHeight}
       currentScene={props.currentScene}
     >
+      <ComponentTitle>{t('Chapter2-3Title', { ns: 'Period' })}</ComponentTitle>
       <ToggleList title={t('1-1')} content={t('1-2')} />
       <ToggleList title={t('2-1')} content={t('2-2')} />
       <ToggleList title={t('3-1')} content={t('3-2')} />
@@ -33,7 +34,7 @@ const PeriodFAQContainer = styled.div<{
   height: ${({ virtualHeight }) => `${virtualHeight}px`};
   display: flex;
   flex-direction: column;
-  align-items: center;
+  align-items: flex-start;
   padding-top: 50rem;
   position: sticky;
   z-index: 999;
@@ -41,4 +42,12 @@ const PeriodFAQContainer = styled.div<{
   width: 100%;
 `;
 
+const ComponentTitle = styled.h1`
+  font-size: 2rem;
+  margin-bottom: 3rem;
+
+  @media (max-width: 600px) {
+    font-size: 1.6rem;
+  }
+`;
 export default PeriodFAQ;

From 63bce3063bbbbdcffbaa371ea7f99b6f08b55825 Mon Sep 17 00:00:00 2001
From: somangoi <somi.c.hwang@gmail.com>
Date: Thu, 10 Nov 2022 09:43:29 +0900
Subject: [PATCH 2/2] update version

---
 src/version.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/version.json b/src/version.json
index 58cbc8a..9a49998 100644
--- a/src/version.json
+++ b/src/version.json
@@ -1,3 +1,3 @@
 {
-  "version": "1.1.3"
+  "version": "1.1.4"
 }