design: 공통 컴포넌트 - 헤더 디자인

src/components/Button/style.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { ReactComponent as Image } from '../../assets/icon-image.svg';
+import { ReactComponent as Image } from '../../assets/icons/icon-image.svg';
 
 export const Button = styled.button`
   color: ${({ theme }) => theme.palette.white};

src/components/Header/index.jsx

@@ -0,0 +1,68 @@
+import * as S from './style';
+import { SmallButton } from '../index';
+
+function HeaderBasic() {
+  return (
+    <S.HeaderContainer>
+      <S.PreviousIcon />
+      <S.SettingIcon />
+    </S.HeaderContainer>
+  );
+}
+
+function HeaderSearch() {
+  return (
+    <S.HeaderContainer>
+      <S.PreviousIcon />
+      <S.HeaderInput />
+    </S.HeaderContainer>
+  );
+}
+
+function HeaderMain() {
+  return (
+    <S.HeaderContainer>
+      <S.HeaderMainText>빵굿빵굿 피드</S.HeaderMainText>
+      <S.SearchIcon />
+    </S.HeaderContainer>
+  );
+}
+
+function HeaderChat() {
+  return (
+    <S.HeaderContainer>
+      <S.PreviousIcon />
+      <S.HeaderChatText></S.HeaderChatText>
+      <S.SettingIcon />
+    </S.HeaderContainer>
+  );
+}
+
+function HeaderUpload() {
+  return (
+    <S.HeaderContainer>
+      <S.PreviousIcon />
+      <SmallButton content='업로드' isActive={false} />
+    </S.HeaderContainer>
+  );
+}
+
+function HeaderSave() {
+  return (
+    <S.HeaderContainer>
+      <S.PreviousIcon />
+      <SmallButton content='저장' isActive={true} />
+    </S.HeaderContainer>
+  );
+}
+
+function HeaderFollowers() {
+  return (
+    <S.HeaderContainer>
+      <S.PreviousIcon />
+      <S.HeaderFollowersText>Followers</S.HeaderFollowersText>
+    </S.HeaderContainer>
+  );
+}
+
+export { HeaderBasic, HeaderSearch, HeaderMain, HeaderChat, HeaderUpload, HeaderSave, HeaderFollowers };

src/components/Header/style.js

@@ -0,0 +1,88 @@
+import styled from 'styled-components';
+import IconArrowLeft from '../../assets/icons/icon-arrow-left.svg';
+import IconMoreVertical from '../../assets/icons/icon-more-vertical.svg';
+import IconSearch from '../../assets/icons/icon-search.svg';
+
+export const HeaderContainer = styled.header`
+  height: 48px;
+  position: sticky;
+  top: 0;
+  padding: 0 16px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: ${({ theme }) => theme.palette.white};
+`;
+
+export const PreviousIcon = styled.img.attrs({
+  src: IconArrowLeft,
+  alt: '뒤로가기',
+})`
+  width: 22px;
+  height: 22px;
+  cursor: pointer;
+`;
+
+export const SettingIcon = styled.img.attrs({
+  src: IconMoreVertical,
+  alt: '더보기',
+})`
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+`;
+
+export const SearchIcon = styled.img.attrs({
+  src: IconSearch,
+  alt: '검색하기',
+})`
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+`;
+
+export const HeaderInput = styled.input.attrs({
+  type: 'text',
+  placeholder: '계정 검색',
+})`
+  width: 316px;
+  height: 32px;
+  padding: 8px 16px 7px;
+  border-radius: 32px;
+  border: none;
+  background-color: ${({ theme }) => theme.palette.searchbarGray};
+  color: ${({ theme }) => theme.palette.black};
+  ::placeholder {
+    color: ${({ theme }) => theme.palette.mediumGray};
+    font-size: 14px;
+    line-height: 18px;
+  }
+  :focus {
+    outline: 2px solid ${({ theme }) => theme.palette.darkGray};
+  }
+`;
+
+export const HeaderMainText = styled.p`
+  height: 22px;
+  font-weight: 500;
+  font-size: 18px;
+  line-height: 22px;
+`;
+
+export const HeaderChatText = styled.p`
+  height: 22px;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 18px;
+  margin-left: 10px;
+  margin-right: auto;
+`;
+
+export const HeaderFollowersText = styled.p`
+  display: flex;
+  height: 22px;
+  font-size: 14px;
+  margin-left: 8px;
+  margin-right: auto;
+  align-items: center;
+`;

src/components/index.js

@@ -1,4 +1,15 @@
 export { MediumImgButton, SmallImgButton, LargeButton, MediumButton, SmallButton, XSmallButton } from './Button/index';
 export { Layout } from './Layout/index';
 export { Label, EmailInput, PasswordInput, NameInput, IDInput, IntroduceInput } from './ActiveInputs/style';
+export {
+  HeaderBasic,
+  HeaderSearch,
+  HeaderMain,
+  HeaderChat,
+  HeaderUpload,
+  HeaderSave,
+  HeaderFollowers,
+}
+from './Header/index';
 export { Navbar } from './Navbar/index';
+

src/style/theme.jsx

@@ -7,7 +7,9 @@ const palette = {
   white: '#ffffff',
   black: '#000000',
   darkGray: '#767676',
+  mediumGray: '#C4C4C4',
   lightGray: '#DBDBDB',
+  searchbarGray: '#F2F2F2',
   kakao: '#F2C94C',
   facebook: '#2D9CDB',
 };