Merge branch 'master' into 23-feat-fe-detail한-부분들-수정-및-구현

package.json

@@ -22,6 +22,7 @@
     "moment-timezone": "^0.5.39",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-ga": "^3.3.1",
     "react-quill": "^2.0.0",
     "react-router-dom": "^6.4.1",
     "react-scripts": "5.0.1",

src/components/Drawer.tsx

@@ -14,7 +14,7 @@ import { appThemeMode } from '@atoms/theme';
 import ThemeSwitch from './buttons/ThemeSwitch';
 import HomeIcon from '@mui/icons-material/Home';
 import SearchIcon from '@mui/icons-material/Search';
-// import CommentIcon from '@mui/icons-material/Comment';
+import ContactsIcon from '@mui/icons-material/Contacts';
 import SettingsAccessibilityIcon from '@mui/icons-material/SettingsAccessibility';
 import LogoutIcon from '@mui/icons-material/Logout';
 import { UserDispatchContext, UserStateContext } from '@contexts/UserContext';
@@ -31,6 +31,7 @@ const PAGE = [
 
 const USER_PAGE = [
   { ...path.profile, icon: <SettingsAccessibilityIcon /> },
+  { ...path.about, icon: <ContactsIcon /> },
   // { ...path.setting, icon: <SettingsIcon /> },
 ];
 

src/components/Footer.tsx

@@ -1,55 +1,61 @@
-import { Box, Grid, IconButton, Typography } from '@mui/material';
+import { AppBar, Box, Grid, IconButton, Typography } from '@mui/material';
 import React from 'react';
 import GitHubIcon from '@mui/icons-material/GitHub';
+import Logo from '@assets/logo.png';
 
 const Footer = () => {
   return (
-    <Box
+    <AppBar
+      position="static"
+      sx={{ top: 'auto', bottom: 0 }}
       component="footer"
-      bgcolor="primary.main"
-      p={5}
-      mt={5}
-      // sx={{ position: 'absolute', left: 0, bottom: 0, width: '100vw' }}
     >
-      <Grid container rowSpacing={2}>
-        <Grid
-          item
-          xs={12}
-          sm={6}
-          color={'primary.contrastText'}
-          sx={{
-            textAlign: {
-              xs: 'center',
-              sm: 'left',
-            },
-          }}
-        >
-          <IconButton
-            color="inherit"
-            LinkComponent="a"
-            href="https://github.com/MBTIWithUs"
+      <Box p={5}>
+        <Grid container rowSpacing={2}>
+          <Grid
+            item
+            xs={12}
+            sm={6}
+            sx={{
+              textAlign: {
+                xs: 'center',
+                sm: 'left',
+              },
+            }}
           >
-            <GitHubIcon />
-          </IconButton>
-        </Grid>
-        <Grid
-          item
-          xs={12}
-          sm={6}
-          sx={{
-            textAlign: {
-              xs: 'center',
-              sm: 'right',
-            },
-            m: 'auto',
-          }}
-        >
-          <Typography color="primary.contrastText">
-            © MbtiWithUs, 2022. All rights reserved.
-          </Typography>
+            <IconButton
+              color="inherit"
+              LinkComponent="a"
+              href="https://github.com/MBTIWithUs"
+            >
+              <GitHubIcon />
+            </IconButton>
+          </Grid>
+          <Grid
+            item
+            xs={12}
+            sm={6}
+            sx={{
+              textAlign: {
+                xs: 'center',
+                sm: 'right',
+              },
+              m: 'auto',
+            }}
+          >
+            <img
+              src={Logo}
+              style={{
+                verticalAlign: 'middle',
+                marginRight: 10,
+                height: 14,
+              }}
+            />
+            <Typography component="span">MbtiWithUs, umtuk ha4219</Typography>
+          </Grid>
         </Grid>
-      </Grid>
-    </Box>
+      </Box>
+    </AppBar>
   );
 };
 

src/components/Header.tsx

@@ -81,7 +81,7 @@ const Header = () => {
 
   return (
     <Box sx={{ flexGrow: 1 }}>
-      <AppBar position="static" sx={{ py: 0.5, boxShadow: 0 }}>
+      <AppBar position="static" sx={{ py: 1, boxShadow: 0 }}>
         <Container>
           <Toolbar disableGutters sx={{ justifyContent: 'space-between' }}>
             <Box
@@ -222,6 +222,24 @@ const Header = () => {
                   </Box>
                 </Box>
               </Box>
+              <Typography
+                variant="h6"
+                noWrap
+                component={Link}
+                to={path.about.route}
+                sx={{
+                  mr: 3,
+                  color: 'inherit',
+                  display: {
+                    xs: 'none',
+                    sm: 'none',
+                    md: 'flex',
+                  },
+                  textDecoration: 'none',
+                }}
+              >
+                {path.about.title}
+              </Typography>
             </Box>
             <Box
               sx={{

src/components/board/BoardCommentInput.tsx

@@ -41,7 +41,7 @@ const BoardCommentInput = ({ community_id, parent_comment_id }: IProps) => {
   const handleSubmit = useCallback(
     async (e: React.MouseEvent<HTMLButtonElement>) => {
       e.preventDefault();
-      if (!auth) {
+      if (!auth?.token) {
         toast.error('로그인이 필요합니다');
         return;
       }

src/components/board/BoardWriter.tsx

@@ -86,6 +86,8 @@ const BoardWriter = ({
 
     input.setAttribute('type', 'file');
     input.setAttribute('accept', 'image/*');
+    input.setAttribute('id', 'imageinput');
+    input.setAttribute('style', 'display: none');
     document.body.appendChild(input);
 
     input.click();
@@ -110,7 +112,7 @@ const BoardWriter = ({
             'image',
             `${config.deployUrl}${data}`,
           );
-          document.body.querySelector(':scope > input')?.remove();
+          document.body.querySelector('#imageinput')?.remove();
         }
       }
     });

src/components/main/Partners.tsx

@@ -73,7 +73,7 @@ const Partners = () => {
           }}
           variant="contained"
           LinkComponent="a"
-          href="https://m.blog.naver.com/taxandlove/221988052765"
+          href="https://www.16personalities.com/country-profiles/republic-of-korea"
         >
           <Typography fontWeight={500}>Learn More</Typography>
         </Button>

src/contexts/AppThemeProvider.tsx

@@ -17,13 +17,10 @@ function AppThemeProvider({ children }: Props): ReactElement {
         palette: {
           mode,
           // primary: {
-          //   main: '#74c69d',
+          //   main: '#845EC2',
           // },
           // secondary: {
-          //   main: '#EB9612CC',
-          // },
-          // white: {
-          //   main: '#ffffff',
+          //   main: '#F3C5FF',
           // },
         },
         // typography: {

src/hooks/usePageTracking.ts

@@ -0,0 +1,25 @@
+import { useLocation } from 'react-router-dom';
+import RG from 'react-ga';
+import { useEffect, useState } from 'react';
+
+const usePageTracking = () => {
+  const location = useLocation();
+  const [init, setInit] = useState(false);
+
+  useEffect(() => {
+    if (!window.location.href.includes('localhost')) {
+      RG.initialize(
+        process.env.REACT_APP_GATI ? process.env.REACT_APP_GATI : '',
+      );
+    }
+    setInit(true);
+  }, []);
+
+  useEffect(() => {
+    if (init) {
+      RG.pageview(location.pathname + location.search);
+    }
+  }, [init, location]);
+};
+
+export default usePageTracking;

src/pages/About.tsx

@@ -0,0 +1,49 @@
+import { Box, Container, Typography } from '@mui/material';
+import React from 'react';
+import Logo from '@assets/logo512.png';
+
+const AboutPage = () => {
+  return (
+    <Container maxWidth="sm">
+      <Box sx={{ textAlign: 'center' }} py={10}>
+        <img src={Logo} alt="logo" style={{ width: 256, height: 256 }} />
+        <Box py={3}>
+          <Typography variant="h6">Beta version</Typography>
+          <Typography>
+            현재 베타 버전입니다. 점진적으로 수정 계획에 있습니다.
+          </Typography>
+        </Box>
+        <Box py={3}>
+          <Typography variant="h6">MbtiWithUs</Typography>
+          <Typography>
+            {`Lorem Ipsum is simply dummy text of the printing and typesetting
+            industry. Lorem Ipsum has been the industry's standard dummy text
+            ever since the 1500s, when an unknown printer took a galley of type
+            and scrambled it to make a type specimen book. It has survived not
+            only five centuries, but also the leap into electronic typesetting,
+            remaining essentially unchanged. It was popularised in the 1960s
+            with the release of Letraset sheets containing Lorem Ipsum passages,
+            and more recently with desktop publishing software like Aldus
+            PageMaker including versions of Lorem Ipsum.`}
+          </Typography>
+        </Box>
+        <Box py={3}>
+          <Typography variant="h6">MbtiWithUs</Typography>
+          <Typography>
+            {`Lorem Ipsum is simply dummy text of the printing and typesetting
+            industry. Lorem Ipsum has been the industry's standard dummy text
+            ever since the 1500s, when an unknown printer took a galley of type
+            and scrambled it to make a type specimen book. It has survived not
+            only five centuries, but also the leap into electronic typesetting,
+            remaining essentially unchanged. It was popularised in the 1960s
+            with the release of Letraset sheets containing Lorem Ipsum passages,
+            and more recently with desktop publishing software like Aldus
+            PageMaker including versions of Lorem Ipsum.`}
+          </Typography>
+        </Box>
+      </Box>
+    </Container>
+  );
+};
+
+export default React.memo(AboutPage);

src/pages/board/BoardDetail.tsx

@@ -161,7 +161,7 @@ const BoardDetailPage = () => {
               <Typography
                 fontSize={13}
                 mr={1}
-                sx={{ float: 'left', color: '#c62917' }}
+                sx={{ float: 'right', color: '#c62917' }}
               >
                 <ThumbUpOffAltIcon
                   sx={{ fontSize: 13, verticalAlign: 'middle', mr: 0.3 }}
@@ -171,7 +171,7 @@ const BoardDetailPage = () => {
               <Typography
                 fontSize={13}
                 mr={1}
-                sx={{ float: 'left', color: '#0ca5af' }}
+                sx={{ float: 'right', color: '#0ca5af' }}
               >
                 <ChatBubbleOutlineIcon
                   sx={{ fontSize: 13, verticalAlign: 'middle', mr: 0.3 }}
@@ -181,7 +181,7 @@ const BoardDetailPage = () => {
               <Typography
                 fontSize={13}
                 mr={1}
-                sx={{ float: 'left', color: '#ffcc1c' }}
+                sx={{ float: 'right', color: '#ffcc1c' }}
               >
                 <VisibilityIcon
                   sx={{ fontSize: 13, verticalAlign: 'middle', mr: 0.3 }}
@@ -199,6 +199,7 @@ const BoardDetailPage = () => {
                     <ThumbUpOffAltIcon sx={{ mr: 0 }} />
                   )
                 }
+                sx={{ ml: 'auto' }}
                 size="small"
                 onClick={handleLike}
               >

src/routes/index.tsx

@@ -12,6 +12,7 @@ import ProfilePage from '@pages/profile';
 import ResultPage from '@pages/profile/Result';
 import BoardPage from '@pages/board';
 import BoardDetailPage from '@pages/board/BoardDetail';
+import AboutPage from '@pages/About';
 
 export default function Routes() {
   const router = createBrowserRouter([
@@ -95,6 +96,15 @@ export default function Routes() {
             </>
           ),
         },
+        {
+          path: '/about',
+          element: (
+            <>
+              <Header />
+              <AboutPage />
+            </>
+          ),
+        },
       ],
     },
   ]);

src/routes/path.ts

@@ -2,6 +2,7 @@ export default {
   home: { title: 'Home', route: '/' },
   mbti: { title: 'MBTI', route: '/mbti' },
   board: { title: 'Community', route: '/board' },
+  about: { title: 'About', route: '/about' },
   profile: { title: 'Profile', route: '/profile' },
   setting: { title: 'Setting', route: '/setting' },
 };

yarn.lock

@@ -8210,6 +8210,11 @@ react-event-listener@^0.6.0:
     prop-types "^15.6.0"
     warning "^4.0.1"
 
+react-ga@^3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/react-ga/-/react-ga-3.3.1.tgz#d8e1f4e05ec55ed6ff944dcb14b99011dfaf9504"
+  integrity sha512-4Vc0W5EvXAXUN/wWyxvsAKDLLgtJ3oLmhYYssx+YzphJpejtOst6cbIHCIyF50Fdxuf5DDKqRYny24yJ2y7GFQ==
+
 react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"