[feat] boostcampwm-2022#179 안내 페이지 모달창

JJongBin · Dec 10, 2022 · 3c85eca · 3c85eca
1 parent 57f7b93
commit 3c85eca
Show file tree

Hide file tree

Showing 4 changed files with 233 additions and 3 deletions.
diff --git a/frontend/src/component/Info/Help.tsx b/frontend/src/component/Info/Help.tsx
@@ -0,0 +1,45 @@
+import { useState } from 'react';
+import help from '../../assets/icon/help.svg';
+import keyboardArrow from '../../assets/icon/keyboardArrow.svg';
+import keyboardSpace from '../../assets/icon/keyboardSpace.svg';
+import keyboardShift from '../../assets/icon/keyboardShift.svg';
+import keyboardA from '../../assets/icon/keyboardA.svg';
+import keyboardR from '../../assets/icon/keyboardR.svg';
+import * as style from './info.styled';
+
+const Help = () => {
+  const [isShowModal, setIsShowModal] = useState(false);
+  const [animation, setAnimation] = useState('show');
+
+  const handleModal = () => {
+    if (isShowModal) {
+      setAnimation('close');
+      setTimeout(() => setIsShowModal(false), 300);
+    } else {
+      setAnimation('show');
+      setIsShowModal(true);
+    }
+  };
+
+  return (
+    <>
+      {isShowModal && (
+        <>
+          <section css={style.modal(animation)}>
+            <button
+              type="button"
+              css={style.closeBtn}
+              onClick={handleModal}></button>
+            <h3 css={style.header}>📋 Notice</h3>
+          </section>
+        </>
+      )}
+      <button
+        type="button"
+        onClick={handleModal}
+        css={style.info(help)}></button>
+    </>
+  );
+};
+
+export default Help;
diff --git a/frontend/src/component/Info/help.styled.ts b/frontend/src/component/Info/help.styled.ts
@@ -0,0 +1,79 @@
+import { css } from '@emotion/react';
+import help from '../../assets/icon/help.svg';
+import help2 from '../../assets/icon/help2.svg';
+import close from '../../assets/icon/close.svg';
+
+export const helpBtn = css`
+  width: 60px;
+  height: 60px;
+
+  position: absolute;
+  bottom: 55px;
+  right: 60px;
+  background-image: url(${help2});
+  background-repeat: no-repeat;
+  background-position: center;
+`;
+
+export const modal = (animation: string) => css`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-flow: column;
+
+  width: 60%;
+  min-width: 600px;
+  max-width: 800px;
+  height: 60%;
+  min-height: 400px;
+  max-height: 600px;
+  padding: 20px;
+
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -60%);
+  border-radius: 0 20px 20px 20px;
+  background-color: rgba(255, 255, 255, 0.9);
+
+  animation: ${animation} 0.3s ease-in-out;
+
+  @keyframes show {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes close {
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
+  }
+`;
+
+export const closeBtn = css`
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  width: 20px;
+  height: 20px;
+  opacity: 0.7;
+  padding: 5px;
+
+  ::after {
+    content: '';
+    display: block;
+    width: 20px;
+    height: 20px;
+    background-image: url(${close});
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: contain;
+  }
+`;
diff --git a/frontend/src/component/Info/index.tsx b/frontend/src/component/Info/index.tsx
@@ -1,10 +1,12 @@
 import * as style from './info.styled';
+import Help from './Help';
 import Users from './Users';
 import Walk from './Walk';
 
 const Info = () => {
   return (
     <ul css={style.infoBox}>
+      <Help />
       <Walk />
       <Users />
     </ul>

diff --git a/frontend/src/component/Info/info.styled.ts b/frontend/src/component/Info/info.styled.ts
@@ -1,5 +1,6 @@
 import { css } from '@emotion/react';
 import theme from '../../styles/theme';
+import close from '../../assets/icon/close.svg';
 
 export const infoBox = css`
   display: flex;
@@ -10,7 +11,7 @@ export const infoBox = css`
 
 export const info = (content: string) => css`
   display: flex;
-  justify-content: space-between;
+  justify-content: space-around;
   align-items: center;
   font-size: 14px;
   color: ${theme.white};
@@ -22,13 +23,116 @@ export const info = (content: string) => css`
 
   ::after {
     content: '';
-    display: block;
+    display: 'block';
     width: 20px;
     height: 15px;
-    margin-left: 5px;
     background-image: url(${content});
     background-position: center;
     background-repeat: no-repeat;
     background-size: contain;
   }
 `;
+
+export const modal = (animation: string) => css`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-flow: column;
+
+  width: 60%;
+  min-width: 600px;
+  max-width: 800px;
+  height: 60%;
+  min-height: 400px;
+  max-height: 600px;
+  padding: 20px;
+
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -60%);
+  border-radius: 20px;
+  background-color: rgba(255, 255, 255, 0.9);
+
+  animation: ${animation} 0.3s ease-in-out;
+
+  @keyframes show {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes close {
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
+  }
+`;
+
+export const closeBtn = css`
+  position: absolute;
+  top: 15px;
+  right: 15px;
+  width: 20px;
+  height: 20px;
+  opacity: 0.7;
+  padding: 5px;
+
+  ::after {
+    content: '';
+    display: block;
+    width: 20px;
+    height: 20px;
+    background-image: url(${close});
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: contain;
+  }
+`;
+
+export const header = css`
+  font-weight: 700;
+  font-size: 30px;
+  line-height: 30px;
+  padding: 20px;
+  margin-bottom: 10px;
+`;
+
+export const description = css`
+  display: flex;
+  flex-grow: 1;
+
+  width: 100%;
+`;
+
+export const keyboard = css`
+  display: flex;
+  justify-content: space-around;
+  width: 100%;
+  height: 250px;
+
+  ul {
+    display: flex;
+    height: 100%;
+    flex-flow: column;
+    justify-content: space-between;
+    height: 100%;
+    padding: 0 20px;
+
+    img {
+      justify-items: center;
+      margin-top: 5px;
+    }
+
+    p {
+      font-size: 14px;
+      padding: 10px 0;
+    }
+  }
+`;