Merge pull request #399 from woowacourse-teams/hotfix/snackbar

hotfix: 리뷰 수정버튼이 snackbar에 가려 안눌리는 버그 해결
woowacourse-teams · Oct 4, 2021 · 6d8254c · 6d8254c
2 parents 862797a + 3ff2212
commit 6d8254c
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 16 deletions.
diff --git a/backend/build.gradle b/backend/build.gradle
@@ -9,7 +9,7 @@ plugins {
 }
 
 group = 'com.jujeol.'
-version = '1.2.3-beta'
+version = '1.2.4-beta'
 sourceCompatibility = '11'
 
 configurations {

diff --git a/frontend/package.json b/frontend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "jujeol-jujeol-frontend",
-  "version": "1.2.3-beta",
+  "version": "1.2.4-beta",
   "description": "jujeol-jujeol-frontend",
   "main": "index.js",
   "scripts": {

diff --git a/frontend/src/GlobalStyle.tsx b/frontend/src/GlobalStyle.tsx
@@ -1,5 +1,5 @@
 import { Global, css } from '@emotion/react';
-import { COLOR } from './constants';
+import { COLOR, Z_INDEX } from './constants';
 
 const GlobalStyle = () => (
   <Global
@@ -43,15 +43,16 @@ const GlobalStyle = () => (
       }
 
       #snackbar {
-        position: absolute;
-        bottom: 10%;
-        left: 50%;
-        transform: translateX(-50%);
-
         width: 100%;
         max-width: 480px;
         min-width: 280px;
-        z-index: 15;
+
+        visibility: hidden;
+        position: fixed;
+        bottom: 10%;
+        left: 50%;
+        transform: translateX(-50%);
+        z-index: ${Z_INDEX.SNACKBAR};
       }
 
       html,

diff --git a/frontend/src/components/@shared/Snackbar/Snackbar.styles.ts b/frontend/src/components/@shared/Snackbar/Snackbar.styles.ts
@@ -13,30 +13,30 @@ const fadeInOut = keyframes`
 `;
 
 const Container = styled.section<{ message: boolean }>`
+  width: 90%;
+  padding: 1rem;
+  margin: 0 auto;
+
   ${Flex({
     flexDirection: 'column',
     justifyContent: 'center',
     alignItems: 'center',
   })}
-  width: 90%;
-  padding: 1rem;
-  margin: 0 auto;
 
   background-color: ${COLOR.PURPLE_500}CC;
-  color: ${COLOR.WHITE_200};
+
   font-size: 0.9rem;
   text-align: center;
   line-height: 1.5;
+  color: ${COLOR.WHITE_200};
 
   border-radius: 0.5rem;
-  visibility: hidden;
-
-  z-index: ${Z_INDEX.SNACKBAR};
 
   ${({ message }) =>
     message &&
     css`
       visibility: visible;
+
       animation: ${fadeInOut} 3s ease-out;
     `}