[feat] boostcampwm-2022#179 사이드바 각 기능 설명

frontend/src/component/Info/Help.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import help from '../../assets/icon/help.svg';
 import KeyBoardInfo from './HelpDescription/keyBoardInfo';
+import SidebarInfo from './HelpDescription/SidebarInfo';
 
 import * as style from './info.styled';
 
@@ -30,6 +31,7 @@ const Help = () => {
             <h3 css={style.header}>📋 Notice</h3>
             <div css={style.content}>
               <KeyBoardInfo />
+              <SidebarInfo />
             </div>
           </section>
         </>

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

@@ -0,0 +1,98 @@
+import * as style from './sidebarInfo.styled';
+import * as commonStyle from './common.styled';
+import sidebarImg from '../../../assets/sidebarImg.png';
+import mypageImg from '../../../assets/info-mypage.png';
+import friendsImg from '../../../assets/info-friends.png';
+import chatImg from '../../../assets/info-chat.png';
+import settingImg from '../../../assets/info-setting.png';
+
+const SidebarInfo = () => {
+  return (
+    <div css={commonStyle.infoContainer}>
+      <h4 css={commonStyle.header}>- 사이드바</h4>
+      <div css={style.description}>
+        <img src={sidebarImg} alt="사이드바 이미지" width={'100%'} />
+        <p>
+          왼쪽 상단의 <span>{'>'}</span> 버튼을 클릭하면 사이드바를 볼 수
+          있습니다.
+        </p>
+        <p>
+          사이드바 상단의 버튼을 클릭해 다음과 같은 기능을 사용할 수 있습니다.
+        </p>
+        <ul css={style.subContentBox}>
+          <li css={style.subContent}>
+            <img
+              src={mypageImg}
+              alt="마이페이지 이미지"
+              height={'200px'}
+              width={'100px'}
+            />
+            <div css={style.subDescription}>
+              <h4 css={style.subTitle}>1. 마이페이지</h4>
+              <p>
+                캐릭터 변경, 닉네임 수정, 로그아웃, 회원탈퇴를 할 수 있습니다.
+              </p>
+              <p>
+                회원탈퇴를 하는 경우{' '}
+                <span>같은 계정으로 다시는 회원가입할 수 없습니다.</span>
+              </p>
+            </div>
+          </li>
+          <li css={style.subContent}>
+            <img
+              src={friendsImg}
+              alt="친구목록 이미지"
+              height={'200px'}
+              width={'100px'}
+            />
+            <div css={style.subDescription}>
+              <h4 css={style.subTitle}>2. 친구목록</h4>
+              <p>친구목록을 볼 수 있습니다.</p>
+              <p>유저를 검색해서 친구추가 할 수 있습니다.</p>
+              <p>
+                친구목록의 아이콘을 클릭해 1:1 채팅 및 친구끊기가 가능합니다.
+              </p>
+              <p>친구를 아래로 드래그해서 영상통화가 가능합니다.</p>
+            </div>
+          </li>
+          <li css={style.subContent}>
+            <img
+              src={chatImg}
+              alt="일대일 채팅 이미지"
+              height={'200px'}
+              width={'100px'}
+            />
+            <div css={style.subDescription}>
+              <h4 css={style.subTitle}>3. 1:1 채팅</h4>
+              <p>채팅방 목록이 보여집니다.</p>
+              <p>
+                각각의 채팅방에는 닉네임, 시각, 마지막 메세지, 읽지않은 메세지가
+                표시됩니다.
+              </p>
+              <p>
+                채팅방을 클릭해 다른 유저와 실시간 1:1 채팅을 할 수 있습니다.
+              </p>
+            </div>
+          </li>
+          <li css={style.subContent}>
+            <img
+              src={settingImg}
+              alt="환경설정 이미지"
+              height={'200px'}
+              width={'100px'}
+            />
+            <div css={style.subDescription}>
+              <h4 css={style.subTitle}>4. 환경설정</h4>
+              <p>배경음악 및 눈내리기 효과를 on/off 할 수 있습니다.</p>
+              <p>
+                영상통화에 사용되는 기기(카메라, 마이크)를 설정할 수 있습니다.
+              </p>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+export default SidebarInfo;

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

@@ -7,7 +7,7 @@ export const infoContainer = css`
   margin-bottom: 10px;
 
   background-color: ${theme.white05};
-  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1);
+  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
   border-radius: 20px;
 `;
 

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

@@ -0,0 +1,60 @@
+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;
+
+    span {
+      width: 14px;
+      height: 14px;
+      display: inline-block;
+      background-color: ${theme.black06};
+      color: ${theme.white};
+      border-radius: 4px;
+    }
+  }
+`;
+
+export const subContentBox = css``;
+
+export const subContent = css`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 15px;
+  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
+
+  :nth-of-type(1) {
+    margin-top: 20px;
+  }
+  :nth-last-of-type(1) {
+    margin-bottom: 0;
+  }
+`;
+
+export const subTitle = css`
+  padding-bottom: 30px;
+  font-weight: 700;
+`;
+
+export const subDescription = css`
+  flex-grow: 1;
+  height: 200px;
+  padding: 10px 20px;
+  background-color: ${theme.white05};
+
+  & > p {
+    width: 100%;
+    padding-bottom: 15px;
+    font-size: 14px;
+
+    span {
+      color: ${theme.red};
+    }
+  }
+`;

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

@@ -112,6 +112,7 @@ export const header = css`
 
 export const content = css`
   overflow: auto;
+  padding: 5px;
 
   ::-webkit-scrollbar {
     display: none;