[feat] boostcampwm-2022#179 각 설명 분리 및 키보드 설명

frontend/src/component/Info/Help.tsx

@@ -1,10 +1,7 @@
 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 KeyBoardInfo from './HelpDescription/keyBoardInfo';
+
 import * as style from './info.styled';
 
 const Help = () => {
@@ -31,6 +28,9 @@ const Help = () => {
               css={style.closeBtn}
               onClick={handleModal}></button>
             <h3 css={style.header}>📋 Notice</h3>
+            <div css={style.content}>
+              <KeyBoardInfo />
+            </div>
           </section>
         </>
       )}

frontend/src/component/Info/HelpDescription/KeyBoardInfo.tsx

@@ -0,0 +1,45 @@
+import * as style from './keyBoardInfo.styled';
+import * as commonStyle from './common.styled';
+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';
+
+const keyBoardInfo = () => {
+  return (
+    <div css={commonStyle.infoContainer}>
+      <h4 css={commonStyle.header}>- 기본키 조작법</h4>
+      <div css={style.description}>
+        <div css={style.keyboard}>
+          <ul>
+            <li>
+              <img src={keyboardArrow} alt="" height={'80px'} />
+              <p>화살표 방향키로 이동할 수 있습니다.</p>
+            </li>
+            <li>
+              <img src={keyboardSpace} alt="" height={'40px'} />
+              <p>space키로 점프할 수 있습니다.</p>
+            </li>
+          </ul>
+          <ul>
+            <li>
+              <img src={keyboardA} alt="" height={'40px'} />
+              <p>A키로 공격 모션을 취할 수 있습니다.</p>
+            </li>
+            <li>
+              <img src={keyboardR} alt="" height={'40px'} />
+              <p>R키로 구르기를 할 수 있습니다.</p>
+            </li>
+            <li>
+              <img src={keyboardShift} alt="" height={'40px'} />
+              <p>shift키로 달리기를 할 수 있습니다.</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default keyBoardInfo;

frontend/src/component/Info/HelpDescription/common.styled.ts

@@ -0,0 +1,18 @@
+import { css } from '@emotion/react';
+import theme from '../../../styles/theme';
+
+export const infoContainer = css`
+  width: 100%;
+  padding: 20px;
+  margin-bottom: 10px;
+
+  background-color: ${theme.white05};
+  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1);
+  border-radius: 20px;
+`;
+
+export const header = css`
+  font-size: 18px;
+  font-weight: 700;
+  padding-bottom: 15px;
+`;

frontend/src/component/Info/HelpDescription/keyBoardInfo.styled.ts

@@ -0,0 +1,34 @@
+import { css } from '@emotion/react';
+
+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;
+    }
+  }
+`;

frontend/src/component/Info/info.styled.ts

@@ -54,6 +54,11 @@ export const modal = (animation: string) => css`
   border-radius: 20px;
   background-color: rgba(255, 255, 255, 0.9);
 
+  overflow: auto;
+  ::-webkit-scrollbar {
+    display: none;
+  }
+
   animation: ${animation} 0.3s ease-in-out;
 
   @keyframes show {
@@ -102,37 +107,13 @@ export const header = css`
   line-height: 30px;
   padding: 20px;
   margin-bottom: 10px;
+  text-align: center;
 `;
 
-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;
-    }
+export const content = css`
+  overflow: auto;
 
-    p {
-      font-size: 14px;
-      padding: 10px 0;
-    }
+  ::-webkit-scrollbar {
+    display: none;
   }
 `;