Merge pull request #154 from bankidz/dev

QA : 안드로이드 기기 대응
bankidz · Aug 5, 2022 · 23737d7 · 23737d7
2 parents f913a43 + 6eba356
commit 23737d7
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 9 deletions.
diff --git a/src/components/common/buttons/RoleButton.tsx b/src/components/common/buttons/RoleButton.tsx
@@ -73,15 +73,14 @@ const StyledButton = styled.button<{
 
   .content {
     width: 100%;
+    height: 100%;
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate3d(-50%, -50%, 0);
 
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: flex-start;
+    display: grid;
+    grid-template-rows: 115fr 31fr;
 
     svg {
       margin-bottom: 10px;

diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx
@@ -16,7 +16,7 @@ function Layout() {
     };
     const setBodyWhite = () => {
       const bodyElement = document.querySelector('body');
-      bodyElement!.style.backgroundColor = '#ffffff';
+      bodyElement!.style.backgroundColor = '#fafafc';
     };
     if (isPC) {
       setBodyYellow();

diff --git a/src/components/walk/SwipeToWalk.stories.tsx b/src/components/walk/SwipeToWalk.stories.tsx
@@ -1,4 +1,5 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react';
+import styled from 'styled-components';
 import SwipeToWalk from './SwipeToWalk';
 
 export default {

diff --git a/src/components/walk/WalkDefault.tsx b/src/components/walk/WalkDefault.tsx
@@ -173,10 +173,12 @@ const DongilList = styled.div`
   margin-top: 23px;
 
   height: 56px;
-  gap: 12px;
 
   & > div {
     position: relative;
+    &:not(:last-child) {
+      margin-right: 12px;
+    }
     & > svg {
       position: absolute;
       bottom: -40.5px;

diff --git a/src/components/walk/WalkingItemNameButton.stories.tsx b/src/components/walk/WalkingItemNameButton.stories.tsx
@@ -1,14 +1,23 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react';
+import styled from 'styled-components';
 import WalkingItemNameButton from './WalkingItemNameButton';
 
 export default {
   title: 'walk/WalkingItemNameButton',
   component: WalkingItemNameButton,
   decorators: [
     (Story) => (
-      <div style={{ margin: '18px' }}>
-        <Story />
-      </div>
+      <DongilList>
+        <div>
+          <Story />
+        </div>
+        <div>
+          <Story />
+        </div>
+        <div>
+          <Story />
+        </div>
+      </DongilList>
     ),
   ],
 } as ComponentMeta<typeof WalkingItemNameButton>;
@@ -41,3 +50,26 @@ noticed_selected.args = {
   isSelected: true,
   isNoticed: true,
 };
+
+const DongilList = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 23px;
+
+  height: 56px;
+  //gap: 12px;
+
+  & > div {
+    position: relative;
+    &:not(:last-child) {
+      margin-right: 12px;
+    }
+    & > svg {
+      position: absolute;
+      bottom: -40.5px;
+      left: 50%;
+      transform: translate3d(-50%, 0, 0);
+    }
+  }
+`;