Merge branch 'feature/frontend/#33' of https://github.com/osamhack2021/Web_Handover_TeamName into feature/frontend/#33

Author: ntcho

frontend/assets/images/aboutpage-gif.gif

@@ -1,21 +1,24 @@
 // Images
-import "./images/profile-default.jpg";
-import "./images/handover-logo.png";
-import "./images/demopage.png";
-import "./images/share.png";
-import "./images/structure.png";
-import "./images/meeting.png";
-import "./images/wave.png";
-import "./svgs/pink_trapezoid.svg";
-import "./svgs/logo.svg";
-import "./svgs/bookmark.svg";
-import "./svgs/bookmark-filled.svg";
-import "./svgs/duplicate.svg";
-import "./svgs/print.svg";
-import "./svgs/show_content.svg";
-import "./svgs/comment.svg";
-import "./svgs/search_icon.svg";
-import "./svgs/clock_icon.svg";
-import "./svgs/bell.svg";
-import "./svgs/user.svg";
-import "./svgs/meeting.svg";
+import './images/profile-default.jpg';
+import './images/aboutpage-gif.gif';
+import './images/share.gif';
+import './images/comment.gif';
+import './images/handover-logo.png';
+import './images/demopage.png';
+import './images/share.png';
+import './images/structure.png';
+import './images/meeting.png';
+import './images/wave.png';
+import './svgs/pink_trapezoid.svg';
+import './svgs/logo.svg';
+import './svgs/bookmark.svg';
+import './svgs/bookmark-filled.svg';
+import './svgs/duplicate.svg';
+import './svgs/print.svg';
+import './svgs/show_content.svg';
+import './svgs/comment.svg';
+import './svgs/search_icon.svg';
+import './svgs/clock_icon.svg';
+import './svgs/bell.svg';
+import './svgs/user.svg';
+import './svgs/meeting.svg';

frontend/assets/images/comment.gif

@@ -6,6 +6,7 @@ import Divider from '@mui/material/Divider';
 import WelcomeHeader from '_organisms/WelcomeHeader';
 import Container from '@mui/material/Container';
 import Stack from '@mui/material/Stack';
+import Gif from '_assets/images/aboutpage-gif.gif';
 
 export default function AboutPage() {
   document.title = 'About - Handover';
@@ -30,12 +31,11 @@ export default function AboutPage() {
           spacing={3}
           sx={{ marginBottom: '200px' }}
         >
-          <div
-            style={{
-              backgroundColor: 'white',
-              width: '400px',
-              height: '300px',
-            }}
+          <img
+            alt="gif"
+            src={Gif}
+            width="400px"
+            style={{ border: '3px solid #555' }}
           />
           <Typography
             sx={{

frontend/assets/images/share.gif

@@ -12,9 +12,11 @@ import WelcomeHeader from '_organisms/WelcomeHeader';
 import WelcomeFooter from '_organisms/WelcomeFooter';
 import MeetingPNG from '_assets/images/meeting.png';
 import WaveVector from '_assets/images/wave.png';
+
+import Comment from '_assets/images/comment.gif';
+import Share from '_assets/images/share.gif';
 import DemoPage from '_assets/images/demopage.png';
-import Share from '_assets/images/share.png';
-import Structure from '_assets/images/structure.png';
+
 import BorderColorIcon from '@mui/icons-material/BorderColor';
 import GroupIcon from '@mui/icons-material/Group';
 import QuestionAnswerIcon from '@mui/icons-material/QuestionAnswer';
@@ -221,7 +223,7 @@ export default function WelcomePage() {
                 '인수 인계서 작성',
                 '효율적인 부대 관리',
                 '부대 업무를 한곳에 모아보세요. 사용자가 속한 그룹의 인수인계서, 업무들을 한번에 관리할 수 있습니다.',
-                Structure,
+                DemoPage,
                 'right',
                 'create',
               )}
@@ -237,7 +239,7 @@ export default function WelcomePage() {
                 '댓글 북마크 기능',
                 '보다 쉬운 인수인계서',
                 'Handover 의 모든 문서들은 서랍, 문서, 카드 의 구조를 가지고 있습니다 모든 보직, 근무의 인수인계서는 누구나 쉽게 이해할 수 있도록 서랍, 문서, 카드 3단계로 체계화 되어 있습니다. 어떤 업무를 수행하는지, 어떤 작업이 있는지 체계적으로 정리되어 있습니다. ',
-                DemoPage,
+                Comment,
                 'right',
                 'comment',
               )}