From 2bca1a7e666f6d8b2d1f618cd2a3d47fc0cba1e5 Mon Sep 17 00:00:00 2001
From: JJongBin <gghkdu2@gmail.com>
Date: Sun, 11 Dec 2022 13:03:04 +0900
Subject: [PATCH] =?UTF-8?q?[feat]=20#179=20=EA=B1=B8=EC=9D=8C=EC=88=98=20?=
 =?UTF-8?q?=EB=B0=8F=20=EC=A0=91=EC=86=8D=EC=9C=A0=EC=A0=80=20=EC=84=A4?=
 =?UTF-8?q?=EB=AA=85=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/component/Info/Help.tsx          |  2 ++
 .../Info/HelpDescription/WalkAndUserInfo.tsx  | 25 +++++++++++++++++++
 .../boardAndRankInfo.styled.ts                | 10 --------
 .../HelpDescription/walkAndUserInfo.styled.ts | 11 ++++++++
 4 files changed, 38 insertions(+), 10 deletions(-)
 create mode 100644 frontend/src/component/Info/HelpDescription/WalkAndUserInfo.tsx
 create mode 100644 frontend/src/component/Info/HelpDescription/walkAndUserInfo.styled.ts

diff --git a/frontend/src/component/Info/Help.tsx b/frontend/src/component/Info/Help.tsx
index 6ca84e9..bea43b1 100644
--- 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
new file mode 100644
index 0000000..d87e42f
--- /dev/null
+++ 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
index 8b77ac8..5af223d 100644
--- 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
new file mode 100644
index 0000000..546e8b3
--- /dev/null
+++ 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;
+  }
+`;