[feat] boostcampwm-2022#179 게임 접속시 도움말 열기 설정

JJongBin · Dec 11, 2022 · caa27af · caa27af
1 parent fb7ab81
commit caa27af
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 84 deletions.
diff --git a/frontend/src/component/Info/Help.tsx b/frontend/src/component/Info/Help.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import help from '../../assets/icon/help.svg';
 import BoardAndRankInfo from './HelpDescription/BoardAndRankInfo';
 import KeyBoardInfo from './HelpDescription/keyBoardInfo';
@@ -10,17 +10,30 @@ import * as style from './info.styled';
 const Help = () => {
   const [isShowModal, setIsShowModal] = useState(false);
   const [animation, setAnimation] = useState('show');
+  const [setOpen, isSetOpen] = useState(true);
+
+  const setOpenModal = () => {
+    isSetOpen(!setOpen);
+  };
 
   const handleModal = () => {
     if (isShowModal) {
       setAnimation('close');
       setTimeout(() => setIsShowModal(false), 300);
+
+      const setValue = setOpen ? 'open' : 'close';
+      localStorage.setItem('openHelp', setValue);
     } else {
       setAnimation('show');
       setIsShowModal(true);
     }
   };
 
+  useEffect(() => {
+    const openHelp = localStorage.getItem('openHelp');
+    if (openHelp === 'open') setIsShowModal(true);
+  }, []);
+
   return (
     <>
       {isShowModal && (
@@ -37,6 +50,13 @@ const Help = () => {
               <BoardAndRankInfo />
               <WalkAndUserInfo />
             </div>
+            <div css={style.helpSettingWrapper}>
+              <div css={style.helpSetting(setOpen)}>
+                <p>접속시 도움말 켜기</p>
+                <button type="button" onClick={setOpenModal}></button>
+              </div>
+              <p>우측 하단의 물음표 버튼을 클릭해서 도움말을 볼 수 있습니다.</p>
+            </div>
           </section>
         </>
       )}

diff --git a/frontend/src/component/Info/HelpDescription/sidebarInfo.styled.ts b/frontend/src/component/Info/HelpDescription/sidebarInfo.styled.ts
@@ -52,9 +52,5 @@ export const subDescription = css`
     width: 100%;
     padding-bottom: 15px;
     font-size: 14px;
-
-    /* span {
-      color: ${theme.red};
-    } */
   }
 `;
diff --git a/frontend/src/component/Info/help.styled.ts b/frontend/src/component/Info/help.styled.ts
diff --git a/frontend/src/component/Info/info.styled.ts b/frontend/src/component/Info/info.styled.ts
@@ -1,6 +1,8 @@
 import { css } from '@emotion/react';
 import theme from '../../styles/theme';
 import close from '../../assets/icon/close.svg';
+import checkBox from '../../assets/icon/checkBox.svg';
+import { flexCenter } from '../../styles/mixin.styled';
 
 export const infoBox = css`
   display: flex;
@@ -118,3 +120,25 @@ export const content = css`
     display: none;
   }
 `;
+
+export const helpSettingWrapper = css`
+  font-size: 14px;
+  padding-top: 20px;
+  text-align: center;
+`;
+
+export const helpSetting = (isCheck: boolean) => css`
+  ${flexCenter}
+  padding-bottom: 10px;
+
+  button {
+    margin-left: 10px;
+    width: 14px;
+    height: 14px;
+    background-image: url(${checkBox});
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    opacity: ${isCheck ? 1 : 0.3};
+  }
+`;