feat: (#16) 모바일용 짧은 헤더 템플릿 컴포넌트 생성

- 내용을 children 프롭스로 전달받도록 구현
- 상단 고정 등 공동의 스타일 공유하기 위해 컴포넌트 제작

frontend/src/components/common/NarrowTemplateHeader/index.tsx

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+
+import * as S from './style';
+
+export default function NarrowTemplateHeader({ children }: { children: ReactNode }) {
+ return <S.Container>{children}</S.Container>;
+}

frontend/src/components/common/NarrowTemplateHeader/style.ts

@@ -0,0 +1,17 @@
+import { styled } from 'styled-components';
+
+export const Container = styled.div`
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 20px;
+
+ width: 100%;
+ height: 55px;
+ padding: 0 20px;
+
+ position: absolute;
+ top: 0;
+
+ background-color: #1f1f1f;
+`;