design: (#123) 헤더 상단 고정

woowacourse-teams · Jul 25, 2023 · 172865a · 172865a
1 parent 6fc960e
commit 172865a
Show file tree

Hide file tree

Showing 7 changed files with 21 additions and 5 deletions.
diff --git a/frontend/src/components/PostForm/style.ts b/frontend/src/components/PostForm/style.ts
@@ -3,8 +3,10 @@ import { styled } from 'styled-components';
 import { theme } from '@styles/theme';
 
 export const HeaderWrapper = styled.div`
- position: fixed;
  width: 100%;
+
+ position: fixed;
+
  z-index: ${theme.zIndex.header};
 
  @media (min-width: ${theme.breakpoint.sm}) {

diff --git a/frontend/src/components/common/Layout/style.ts b/frontend/src/components/common/Layout/style.ts
@@ -21,6 +21,8 @@ export const WideHeaderWrapper = styled.div`
  position: fixed;
  top: 0;
 
+ z-index: ${theme.zIndex.header};
+
  @media (max-width: ${theme.breakpoint.sm}) {
  display: none;
  visibility: hidden;

diff --git a/frontend/src/components/common/NarrowMainHeader/style.ts b/frontend/src/components/common/NarrowMainHeader/style.ts
@@ -10,7 +10,7 @@ export const Container = styled.div`
  height: 55px;
  padding: 0 20px;
 
- position: absolute;
+ position: fixed;
  top: 0;
 
  background-color: var(--header);

diff --git a/frontend/src/components/common/NarrowTemplateHeader/style.ts b/frontend/src/components/common/NarrowTemplateHeader/style.ts
@@ -10,7 +10,7 @@ export const Container = styled.div`
  height: 55px;
  padding: 0 20px;
 
- position: absolute;
+ position: fixed;
  top: 0;
 
  background-color: var(--header);

diff --git a/frontend/src/components/common/WideHeader/style.ts b/frontend/src/components/common/WideHeader/style.ts
@@ -8,7 +8,7 @@ export const Container = styled.div`
  width: 100%;
  height: 70px;
 
- position: absolute;
+ position: fixed;
  top: 0;
 
  background-color: var(--header);

diff --git a/frontend/src/pages/VoteStatistics/style.ts b/frontend/src/pages/VoteStatistics/style.ts
@@ -7,12 +7,18 @@ export const Container = styled.div`
  flex-direction: column;
  align-items: center;
 
- ${theme.breakpoint.sm}
  margin-top: 50px;
  margin-bottom: 20px;
+
+ @media (min-width: ${theme.breakpoint.sm}) {
+ margin-top: 30px;
+ }
 `;
 
 export const HeaderWrapper = styled.div`
+ position: fixed;
+ z-index: ${theme.zIndex.header};
+
  @media (min-width: ${theme.breakpoint.sm}) {
  display: none;
  }

diff --git a/frontend/src/pages/post/PostDetail/style.ts b/frontend/src/pages/post/PostDetail/style.ts
@@ -8,13 +8,19 @@ export const Container = styled.div`
  align-items: center;
 
  margin: 70px 10px 20px 10px;
+
+ @media (min-width: ${theme.breakpoint.sm}) {
+ margin-top: 30px;
+ }
 `;
 
 export const HeaderContainer = styled.div`
  position: fixed;
  width: 100%;
  top: 0;
 
+ z-index: ${theme.zIndex.header};
+
  @media (min-width: ${theme.breakpoint.sm}) {
  display: none;
  }