[faet] boostcampwm-2022#179 board, rank 설명

- 강조효과
JJongBin · Dec 10, 2022 · b672371 · b672371
1 parent c3974c0
commit b672371
Show file tree

Hide file tree

Showing 6 changed files with 92 additions and 12 deletions.
diff --git a/frontend/src/component/Info/Help.tsx b/frontend/src/component/Info/Help.tsx
@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import help from '../../assets/icon/help.svg';
+import BoardAndRankInfo from './HelpDescription/BoardAndRankInfo';
 import KeyBoardInfo from './HelpDescription/keyBoardInfo';
 import SidebarInfo from './HelpDescription/SidebarInfo';
 
@@ -32,6 +33,7 @@ const Help = () => {
             <div css={style.content}>
               <KeyBoardInfo />
               <SidebarInfo />
+              <BoardAndRankInfo />
             </div>
           </section>
         </>

diff --git a/frontend/src/component/Info/HelpDescription/BoardAndRankInfo.tsx b/frontend/src/component/Info/HelpDescription/BoardAndRankInfo.tsx
@@ -0,0 +1,30 @@
+import * as style from './boardAndRankInfo.styled';
+import * as commonStyle from './common.styled';
+import boardAndRankImg from '../../../assets/info-boardAndRank.png';
+
+const BoardAndRankInfo = () => {
+  return (
+    <div css={commonStyle.infoContainer}>
+      <h4 css={commonStyle.header}>- Board & Rank</h4>
+      <div css={style.description}>
+        <img src={boardAndRankImg} alt="보드와 순위 이미지" width={'100%'} />
+        <p>
+          오른쪽 하단의 트로피 모양의 버튼을 클릭하면 SleepyBoard가 보여집니다.
+        </p>
+        <p>
+          상단의 탭을 클릭하여 <strong>업적</strong>을 보거나,{' '}
+          <strong>걸음수 랭킹</strong>을 볼 수 있습니다.
+        </p>
+        <p>
+          탭 아래의 필터를 클릭해 모든 유저, 좋아요, 친구, 기간을 설정할 수
+          있습니다.
+        </p>
+        <p>
+          걸음수 갱신은 <span>매일 자정</span>에 이루어집니다.
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default BoardAndRankInfo;
diff --git a/frontend/src/component/Info/HelpDescription/SidebarInfo.tsx b/frontend/src/component/Info/HelpDescription/SidebarInfo.tsx
@@ -30,7 +30,8 @@ const SidebarInfo = () => {
             <div css={style.subDescription}>
               <h4 css={style.subTitle}>1. 마이페이지</h4>
               <p>
-                캐릭터 변경, 닉네임 수정, 로그아웃, 회원탈퇴를 할 수 있습니다.
+                <strong>캐릭터 변경, 닉네임 수정, 로그아웃, 회원탈퇴</strong>를
+                할 수 있습니다.
               </p>
               <p>
                 회원탈퇴를 하는 경우{' '}
@@ -47,12 +48,19 @@ const SidebarInfo = () => {
             />
             <div css={style.subDescription}>
               <h4 css={style.subTitle}>2. 친구목록</h4>
-              <p>친구목록을 볼 수 있습니다.</p>
-              <p>유저를 검색해서 친구추가 할 수 있습니다.</p>
               <p>
-                친구목록의 아이콘을 클릭해 1:1 채팅 및 친구끊기가 가능합니다.
+                <strong>친구목록</strong>을 볼 수 있습니다.
+              </p>
+              <p>
+                유저를 검색해서 <strong>친구추가</strong> 할 수 있습니다.
+              </p>
+              <p>
+                친구목록의 아이콘을 클릭해 <strong>1:1 채팅 및 친구끊기</strong>
+                가 가능합니다.
+              </p>
+              <p>
+                친구를 아래로 드래그해서 <strong>영상통화</strong>가 가능합니다.
               </p>
-              <p>친구를 아래로 드래그해서 영상통화가 가능합니다.</p>
             </div>
           </li>
           <li css={style.subContent}>
@@ -64,13 +72,17 @@ const SidebarInfo = () => {
             />
             <div css={style.subDescription}>
               <h4 css={style.subTitle}>3. 1:1 채팅</h4>
-              <p>채팅방 목록이 보여집니다.</p>
               <p>
-                각각의 채팅방에는 닉네임, 시각, 마지막 메세지, 읽지않은 메세지가
+                <strong>채팅방 목록</strong>이 보여집니다.
+              </p>
+              <p>
+                각각 채팅방에는{' '}
+                <strong>닉네임, 시각, 마지막 메세지, 읽지않은 메세지</strong>가
                 표시됩니다.
               </p>
               <p>
-                채팅방을 클릭해 다른 유저와 실시간 1:1 채팅을 할 수 있습니다.
+                채팅방을 클릭해 다른 유저와 <strong>실시간 1:1 채팅</strong>을
+                할 수 있습니다.
               </p>
             </div>
           </li>
@@ -83,9 +95,13 @@ const SidebarInfo = () => {
             />
             <div css={style.subDescription}>
               <h4 css={style.subTitle}>4. 환경설정</h4>
-              <p>배경음악 및 눈내리기 효과를 on/off 할 수 있습니다.</p>
               <p>
-                영상통화에 사용되는 기기(카메라, 마이크)를 설정할 수 있습니다.
+                <strong>배경음악 및 눈내리기 효과를 on/off</strong> 할 수
+                있습니다.
+              </p>
+              <p>
+                영상통화에 사용되는 <strong>기기(카메라, 마이크)를 설정</strong>
+                할 수 있습니다.
               </p>
             </div>
           </li>

diff --git a/frontend/src/component/Info/HelpDescription/boardAndRankInfo.styled.ts b/frontend/src/component/Info/HelpDescription/boardAndRankInfo.styled.ts
@@ -0,0 +1,22 @@
+import { css } from '@emotion/react';
+import theme from '../../../styles/theme';
+
+export const description = css`
+  width: 100%;
+
+  & > p {
+    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/common.styled.ts b/frontend/src/component/Info/HelpDescription/common.styled.ts
@@ -9,6 +9,16 @@ export const infoContainer = css`
   background-color: ${theme.white05};
   box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
   border-radius: 20px;
+
+  strong {
+    color: ${theme.deepGreen};
+    font-weight: 700;
+  }
+
+  span {
+    color: ${theme.red};
+    font-weight: 700;
+  }
 `;
 
 export const header = css`

diff --git a/frontend/src/component/Info/HelpDescription/sidebarInfo.styled.ts b/frontend/src/component/Info/HelpDescription/sidebarInfo.styled.ts
@@ -53,8 +53,8 @@ export const subDescription = css`
     padding-bottom: 15px;
     font-size: 14px;
 
-    span {
+    /* span {
       color: ${theme.red};
-    }
+    } */
   }
 `;