Merge pull request #143 from themoment-team/feature/updateCSS

[Hotfix] Update CSS

src/components/Header/index.tsx

@@ -11,12 +11,17 @@ import * as S from './style';
 
 import * as I from '@/assets';
 import { useGetMyInfo } from '@/hooks';
+import { HeaderPosition } from '@/types';
 
 interface Props {
+  position?: HeaderPosition;
   clearList?: () => void;
 }
 
-const Header: React.FC<Props> = ({ clearList }) => {
+const Header: React.FC<Props> = ({
+  clearList,
+  position = HeaderPosition.ABSOLUTE,
+}) => {
   const { data } = useGetMyInfo();
 
   const { push } = useRouter();
@@ -27,7 +32,7 @@ const Header: React.FC<Props> = ({ clearList }) => {
   };
 
   return (
-    <S.Header>
+    <S.Header position={position}>
       <meta
         name='viewport'
         content='width=device-width, initial-scale=1, maximum-scale=1'

src/components/Header/style.ts

@@ -1,14 +1,16 @@
+import { HeaderPosition } from '@/types';
 import styled from '@emotion/styled';
 import Link from 'next/link';
 
-export const Header = styled.header`
+export const Header = styled.header<{ position: HeaderPosition }>`
   width: 100%;
   height: 4.375rem;
   display: flex;
   justify-content: center;
   align-items: center;
   border-bottom: 0.0625rem solid ${({ theme }) => theme.color.grey[100]};
-  position: absolute;
+  background-color: ${({ theme }) => theme.color.white};
+  position: ${({ position }) => position};
   left: 0;
   top: 0;
   z-index: 5;

src/pageContainer/community/board/detail/index.tsx

@@ -16,7 +16,7 @@ import {
 } from '@/components';
 import { BOARD_PATH } from '@/constants';
 import { useGetBoardDetail, usePostComment } from '@/hooks';
-import type { BoardType } from '@/types';
+import { HeaderPosition, type BoardType } from '@/types';
 import { isAllowedContent, scrollToBottom } from '@/utils';
 
 interface Props {
@@ -58,7 +58,7 @@ const BoardDetail: React.FC<Props> = ({ boardId, initialData }) => {
 
   return (
     <S.Container>
-      <Header />
+      <Header position={HeaderPosition.STICKY} />
       {boardData && (
         <S.PostContainer>
           <SubFunctionHeader prevPath={BOARD_PATH} title='글' />

src/pageContainer/community/board/detail/style.ts

@@ -6,10 +6,10 @@ const FlexBox = styled.div`
 `;
 
 export const Container = styled.div`
-  padding: 4.375rem 0 6.75rem;
+  padding: 0 0 6.75rem;
 
   @media (max-width: 600px) {
-    padding: 4.375rem 1rem 0 1rem;
+    padding: 0 1rem;
   }
 `;
 

src/pageContainer/community/board/style.ts

@@ -29,7 +29,7 @@ export const TitleBox = styled.div`
   align-items: center;
   justify-content: space-between;
   gap: 0.75rem;
-  margin-top: 2.5rem;
+  margin-top: 2rem;
 `;
 
 export const Title = styled.h1`

src/types/header.ts

@@ -0,0 +1,4 @@
+export enum HeaderPosition {
+  ABSOLUTE = 'absolute',
+  STICKY = 'sticky',
+}

src/types/index.ts

@@ -7,6 +7,7 @@ export * from './comment';
 export * from './form';
 export * from './generation';
 export * from './gwangya';
+export * from './header';
 export * from './mentee';
 export * from './mentor';
 export * from './mentorInfo';