feat: Header 및 Home Page UI 구현

frontend/.prettierrc.json

@@ -10,7 +10,15 @@
   "arrowParens": "avoid",
   "endOfLine": "auto",
 
-  "importOrder": ["^@emotion", "^@custom-styles/(.*)$", "^@styles/(.*)$", "^@pages/(.*)$" ,"^@components/(.*)$", "^[./]"],
+  "importOrder": [
+    "^@emotion",
+    "^@assets/(.*)$",
+    "^@custom-types/(.*)$",
+    "^@styles/(.*)$",
+    "^@pages/(.*)$",
+    "^@components/(.*)$",
+    "^[./]"
+  ],
   "importOrderSeparation": true,
   "importOrderSortSpecifiers": true
 }

frontend/.storybook/main.js

@@ -16,6 +16,7 @@ module.exports = {
       '@styles': resolve(__dirname, '../src/styles'),
       '@types': resolve(__dirname, '../src/types'),
       '@pages': resolve(__dirname, '../src/pages'),
+      '@assets': resolve(__dirname, '../src/assets'),
     };
 
     config.module.rules[0].use[0].options.presets = [

frontend/package.json

@@ -66,6 +66,7 @@
   "dependencies": {
     "emotion-reset": "^3.0.1",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-icons": "^4.4.0"
   }
 }

frontend/src/App.tsx

@@ -1,5 +1,33 @@
+import { css } from '@emotion/react';
+
+import MainPage from '@pages/MainPage';
+
+import Header from '@components/Header';
+import Wrapper from '@components/Wrapper';
+
 const App = () => {
-  return <div>MoaMoa</div>;
+  return (
+    <div
+      css={css`
+        padding-top: 120px;
+      `}
+    >
+      <Header
+        css={css`
+          position: fixed;
+          top: 0;
+          left: 0;
+          right: 0;
+          z-index: 2;
+        `}
+      />
+      <main>
+        <Wrapper>
+          <MainPage />
+        </Wrapper>
+      </main>
+    </div>
+  );
 };
 
 export default App;

frontend/src/components/Avatar/Avatar.stories.tsx

@@ -0,0 +1,22 @@
+import { Story } from '@storybook/react';
+
+import Avatar from '@components/Avatar';
+import type { AvatarProps } from '@components/Avatar';
+
+export default {
+  title: 'Components/Avatar',
+  component: Avatar,
+  argTypes: {
+    profileImg: { controls: 'text' },
+    profileAlt: { controls: 'text' },
+  },
+};
+
+const Template: Story<AvatarProps> = props => <Avatar {...props} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  profileImg:
+    'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80',
+  profileAlt: '프로필 이미지',
+};

frontend/src/components/Avatar/index.tsx

@@ -0,0 +1,16 @@
+import * as S from './style';
+
+export interface AvatarProps {
+  profileImg: string;
+  profileAlt: string;
+}
+
+const Avatar: React.FC<AvatarProps> = ({ profileImg, profileAlt }) => {
+  return (
+    <S.ImageContainer>
+      <S.Image src={profileImg} alt={profileAlt} />
+    </S.ImageContainer>
+  );
+};
+
+export default Avatar;

frontend/src/components/Avatar/style.tsx

@@ -0,0 +1,26 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+
+export const ImageContainer = styled.div`
+  ${({ theme }) => css`
+    width: 36px;
+    min-width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    box-shadow: 0px 1px 5px 0px ${theme.colors.secondary.dark};
+    overflow: hidden;
+    transition: opacity 0.2s ease;
+
+    &:hover,
+    &:active {
+      opacity: 0.9;
+    }
+  `}
+`;
+
+export const Image = styled.img`
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
+`;

frontend/src/components/Card/style.ts

@@ -38,6 +38,8 @@ export const Image = styled.img`
 
 export const Contents = styled.div`
   padding: 8px 8px 12px;
+
+  background-color: ${({ theme }) => theme.colors.secondary.light};
 `;
 
 export const Title = styled.h4`

frontend/src/components/Header/Header.stories.tsx

@@ -0,0 +1,14 @@
+import { Story } from '@storybook/react';
+
+import Header from '@components/Header';
+import Wrapper from '@components/Wrapper';
+
+export default {
+  title: 'Components/Header',
+  component: Header,
+};
+
+const Template: Story = props => <Header {...props} />;
+
+export const Default = Template.bind({});
+Default.args = {};

frontend/src/components/Header/index.tsx

@@ -0,0 +1,30 @@
+import { SerializedStyles } from '@emotion/react';
+
+import Avatar from '@components/Avatar';
+import Logo from '@components/Logo';
+import SearchBar from '@components/SearchBar';
+
+import * as S from './style';
+
+type Props = {
+  className?: string;
+  css?: SerializedStyles;
+};
+
+const Header: React.FC<Props> = ({ className }) => {
+  return (
+    <S.Row className={className}>
+      <Logo />
+      <S.SearchBarContainer>
+        <SearchBar />
+      </S.SearchBarContainer>
+      <Avatar
+        // TODO: Context에서 정보를 가져온다
+        profileImg="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80"
+        profileAlt="프로필 이미지"
+      />
+    </S.Row>
+  );
+};
+
+export default Header;

frontend/src/components/Header/style.ts

@@ -0,0 +1,60 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+
+import * as Logo from '@components/Logo/style';
+import * as SearchBar from '@components/SearchBar/style';
+
+export const SearchBarContainer = styled.div`
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+
+  width: 100%;
+  max-width: 400px;
+`;
+
+export const Row = styled.header`
+  ${({ theme }) => css`
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 20px;
+
+    position: relative;
+
+    padding: 20px 40px;
+
+    background-color: ${theme.colors.secondary.light};
+    border-bottom: 1px solid ${theme.colors.secondary.dark};
+
+    @media (max-width: 1100px) {
+      ${Logo.ImageContainer} {
+        margin-right: 0;
+      }
+      ${Logo.BorderText} {
+        display: none;
+      }
+      ${SearchBarContainer} {
+        position: static;
+        left: 0;
+        top: 0;
+        transform: none;
+      }
+    }
+
+    @media (max-width: 800px) {
+      padding: 16px 24px;
+      ${SearchBar.Input} {
+        font-size: 18px;
+      }
+    }
+
+    @media (max-width: 500px) {
+      padding: 10px 12px;
+      ${SearchBar.Input} {
+        font-size: 16px;
+      }
+    }
+  `}
+`;

frontend/src/components/Logo/Logo.stories.tsx

@@ -0,0 +1,15 @@
+import { Story } from '@storybook/react';
+
+import Logo from "@components/Logo";
+
+export default {
+  title: 'Components/Logo',
+  component: Logo,
+};
+
+const Template: Story = props => (
+  <Logo {...props} />
+);
+
+export const Default = Template.bind({});
+Default.args = {};

frontend/src/components/Logo/index.tsx

@@ -0,0 +1,16 @@
+import logoImage from '@assets/images/logo.png';
+
+import * as S from './style';
+
+const Logo: React.FC = () => {
+  return (
+    <S.Row>
+      <S.ImageContainer>
+        <img src={logoImage} alt="모아모아 로고 이미지" />
+      </S.ImageContainer>
+      <S.BorderText>MOAMOA</S.BorderText>
+    </S.Row>
+  );
+};
+
+export default Logo;

frontend/src/components/Logo/style.tsx

@@ -0,0 +1,30 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+
+export const Row = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  cursor: pointer;
+`;
+
+export const ImageContainer = styled.div`
+  display: flex;
+  align-items: center;
+
+  width: 40px;
+  margin-right: 4px;
+  img {
+    width: 100%;
+  }
+`;
+
+export const BorderText = styled.h1`
+  ${({ theme }) => css`
+    color: ${theme.colors.primary.base};
+    font-size: 40px;
+    font-weight: 800;
+    -webkit-text-stroke: 1px ${theme.colors.primary.dark};
+  `}
+`;

frontend/src/components/SearchBar/SearchBar.stories.tsx

@@ -0,0 +1,13 @@
+import { Story } from '@storybook/react';
+
+import SearchBar from '@components/SearchBar';
+
+export default {
+  title: 'Components/SearchBar',
+  component: SearchBar,
+};
+
+const Template: Story = props => <SearchBar {...props} />;
+
+export const Default = Template.bind({});
+Default.args = {};

frontend/src/components/SearchBar/index.tsx

@@ -0,0 +1,16 @@
+import { FiSearch } from 'react-icons/fi';
+
+import * as S from './style';
+
+const SearchBar: React.FC = () => {
+  return (
+    <S.Container>
+      <S.Input maxLength={20} placeholder="스터디 검색" />
+      <S.Button>
+        <FiSearch />
+      </S.Button>
+    </S.Container>
+  );
+};
+
+export default SearchBar;