[design] boostcampwm-2022#179 도움말 레이아웃 수정

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

Hide file tree

Showing 2 changed files with 5 additions and 4 deletions.
diff --git a/frontend/src/component/Info/Help.tsx b/frontend/src/component/Info/Help.tsx
@@ -51,11 +51,11 @@ const Help = () => {
               <WalkAndUserInfo />
             </div>
             <div css={style.helpSettingWrapper}>
+              <p>우측 하단의 물음표 버튼을 클릭해서 도움말을 볼 수 있습니다.</p>
               <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/info.styled.ts b/frontend/src/component/Info/info.styled.ts
@@ -122,17 +122,18 @@ export const content = css`
 `;
 
 export const helpSettingWrapper = css`
-  font-size: 14px;
+  width: 100%;
+  font-size: 12px;
   padding-top: 20px;
   text-align: center;
 `;
 
 export const helpSetting = (isCheck: boolean) => css`
   ${flexCenter}
-  padding-bottom: 10px;
+  padding-top: 10px;
 
   button {
-    margin-left: 10px;
+    margin-left: 5px;
     width: 14px;
     height: 14px;
     background-image: url(${checkBox});