[feat] boostcampwm-2022#179 걸음수 및 접속유저 설명 추가

JJongBin · Dec 11, 2022 · 2bca1a7 · 2bca1a7
1 parent 824e373
commit 2bca1a7
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 10 deletions.
diff --git a/frontend/src/component/Info/Help.tsx b/frontend/src/component/Info/Help.tsx
@@ -3,6 +3,7 @@ import help from '../../assets/icon/help.svg';
 import BoardAndRankInfo from './HelpDescription/BoardAndRankInfo';
 import KeyBoardInfo from './HelpDescription/keyBoardInfo';
 import SidebarInfo from './HelpDescription/SidebarInfo';
+import WalkAndUserInfo from './HelpDescription/WalkAndUserInfo';
 
 import * as style from './info.styled';
 
@@ -34,6 +35,7 @@ const Help = () => {
               <KeyBoardInfo />
               <SidebarInfo />
               <BoardAndRankInfo />
+              <WalkAndUserInfo />
             </div>
           </section>
         </>

diff --git a/frontend/src/component/Info/HelpDescription/WalkAndUserInfo.tsx b/frontend/src/component/Info/HelpDescription/WalkAndUserInfo.tsx
@@ -0,0 +1,25 @@
+import * as style from './boardAndRankInfo.styled';
+import * as commonStyle from './common.styled';
+import walkAndUserImg from '../../../assets/info-walkAndUser.png';
+
+const WalkAndUserInfo = () => {
+  return (
+    <div css={commonStyle.infoContainer}>
+      <h4 css={commonStyle.header}>- 걸음수 & 접속유저</h4>
+      <div css={style.description}>
+        <img
+          src={walkAndUserImg}
+          alt="걸음수와 접속유저 이미지"
+          width={'100%'}
+        />
+        <p>
+          오른쪽 하단에 자신의 <strong> 걸음수</strong>와{' '}
+          <strong>접속유저</strong>가 표시됩니다.
+        </p>
+        <p>방향키로 이동했을때 걸음수가 증가하며 랭킹에 반영됩니다.</p>
+      </div>
+    </div>
+  );
+};
+
+export default WalkAndUserInfo;
diff --git a/frontend/src/component/Info/HelpDescription/boardAndRankInfo.styled.ts b/frontend/src/component/Info/HelpDescription/boardAndRankInfo.styled.ts
@@ -8,15 +8,5 @@ export const description = css`
     padding: 15px;
     font-size: 14px;
     text-align: center;
-
-    /* strong {
-      color: ${theme.deepGreen};
-      font-weight: 700;
-    }
-
-    span {
-      color: ${theme.red};
-      font-weight: 700;
-    } */
   }
 `;
diff --git a/frontend/src/component/Info/HelpDescription/walkAndUserInfo.styled.ts b/frontend/src/component/Info/HelpDescription/walkAndUserInfo.styled.ts
@@ -0,0 +1,11 @@
+import { css } from '@emotion/react';
+
+export const description = css`
+  width: 100%;
+
+  & > p {
+    padding: 15px;
+    font-size: 14px;
+    text-align: center;
+  }
+`;