[#25] Layout, Footer 생성

components/Footer/Footer.tsx

@@ -0,0 +1,66 @@
+import React, { ReactElement, useContext, useMemo } from 'react';
+import styled from '@emotion/styled';
+import MemberContext from 'components/MemberProvider/MemberContext';
+import Icon from 'components/Icon';
+import UserAvatar from 'components/UserAvatar';
+import { useRouter } from 'next/router';
+import { IconTypes } from 'components/Icon/Icon';
+import Link from 'next/link';
+
+const TAB_LIST = [
+  { name: 'home', path: '/' },
+  { name: 'explore', path: '/explore' },
+  { name: 'newPost', path: '/newPost' },
+  { name: 'activity', path: '/accounts/activity' },
+];
+
+function Footer(): ReactElement {
+  const { member } = useContext(MemberContext);
+  const { pathname } = useRouter();
+  const tabList = useMemo(
+    () => TAB_LIST.map(({ name, path }) => ({ name: path === pathname ? `${name}Filled` : name, path })),
+    [pathname],
+  );
+  return (
+    <Nav>
+      {tabList.map(({ name, path }) =>
+        name === 'newPost' ? (
+          <Button>
+            <Icon name={name as IconTypes} size="big" key={`${name}Icon`} />
+          </Button>
+        ) : (
+          <Link href={path}>
+            <Tab>
+              <Icon name={name as IconTypes} size="big" key={`${name}Icon`} />
+            </Tab>
+          </Link>
+        ),
+      )}
+      <Link href={`/profiles/${member?.displayId}`}>
+        <Tab>
+          <UserAvatar size="small" thumbnail={member?.profileImageUrl} />
+        </Tab>
+      </Link>
+    </Nav>
+  );
+}
+
+export default Footer;
+
+const Nav = styled.nav`
+  height: 44px;
+  background-color: white;
+  display: flex;
+`;
+
+const Tab = styled.a`
+  all: unset;
+  cursor: pointer;
+  height: 100%;
+  flex: 1 1 auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+const Button = Tab.withComponent('button');

components/Footer/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Footer';
+export * from './Footer';

components/Icon/svg/index.ts

@@ -1,10 +1,13 @@
 export { ReactComponent as menu } from './menu.svg';
 export { ReactComponent as home } from './home.svg';
+export { ReactComponent as homeFilled } from './home-filled.svg';
 export { ReactComponent as activity } from './activity.svg';
-export { ReactComponent as search } from './search.svg';
+export { ReactComponent as activityFilled } from './activity-filled.svg';
+export { ReactComponent as explore } from './explore.svg';
+export { ReactComponent as exploreFilled } from './explore-filled.svg';
 export { ReactComponent as favorite } from './favorite.svg';
 export { ReactComponent as comment } from './comment.svg';
 export { ReactComponent as share } from './share.svg';
 export { ReactComponent as bookmark } from './bookmark.svg';
-export { ReactComponent as newpost } from './newpost.svg';
+export { ReactComponent as newPost } from './newpost.svg';
 export { ReactComponent as back } from './back.svg';

components/Layout/Layout.tsx

@@ -0,0 +1,30 @@
+import React, { ReactElement, ReactNode } from 'react';
+import styled from '@emotion/styled';
+
+export type LayoutProps = {
+  header: ReactNode;
+  footer: ReactNode;
+  children: ReactElement;
+};
+
+function Layout({ header, footer, children }: LayoutProps): ReactElement {
+  return (
+    <Container>
+      {header}
+      <ChildrenContainer>{children}</ChildrenContainer>
+      {footer}
+    </Container>
+  );
+}
+
+export default Layout;
+
+const Container = styled.div`
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+`;
+
+const ChildrenContainer = styled.div`
+  flex: 1 1 auto;
+`;

components/UserAvatar/index.tsx

@@ -2,12 +2,11 @@ import React from 'react';
 import styled from '@emotion/styled';
 
 export type UserAvatarType = {
-  thumbnail?: string;
+  thumbnail?: null | string;
   size?: 'small' | 'big';
 };
 
-const DEFAULT_THUMBNAIL =
-  'https://scontent-mxp1-2.cdninstagram.com/v/t51.2885-19/44884218_345707102882519_2446069589734326272_n.jpg?_nc_ht=scontent-mxp1-2.cdninstagram.com&_nc_ohc=q2X-4RcAgecAX-QGx5q&oh=911ea87522a15a1d1657ee9b1070086b&oe=606FB88F&ig_cache_key=YW5vbnltb3VzX3Byb2ZpbGVfcGlj.2';
+const DEFAULT_THUMBNAIL = '/img/default_avatar.jpg';
 
 const defaultProps = {
   thumbnail: DEFAULT_THUMBNAIL,

next.config.js

@@ -1,10 +1,12 @@
-module.exports = {
+const withImages = require('next-images');
+
+module.exports = withImages({
   webpack(config) {
-    config.module.rules.push({
+    config.module.rules.unshift({
       test: /\.svg$/,
       use: ['@svgr/webpack'],
     });
 
     return config;
   },
-};
+});

pages/_app.tsx

@@ -3,8 +3,11 @@ import { AppProps } from 'next/app';
 import { Global, css } from '@emotion/react';
 import { CookiesProvider } from 'react-cookie';
 import MemberProvider from 'components/MemberProvider/MemberProvider';
+import Layout from 'components/Layout/Layout';
+import Footer from 'components/Footer';
 
 export default function App({ Component, pageProps }: AppProps) {
+  const footer = <Footer />;
   return (
     <>
       <Global
@@ -19,7 +22,9 @@ export default function App({ Component, pageProps }: AppProps) {
       />
       <CookiesProvider>
         <MemberProvider>
-          <Component {...pageProps}>_App</Component>
+          <Layout header={null} footer={footer}>
+            <Component {...pageProps}>_App</Component>
+          </Layout>
         </MemberProvider>
       </CookiesProvider>
     </>

pages/accounts/activity.tsx

@@ -0,0 +1,7 @@
+import React, { ReactElement } from 'react';
+
+function Activity(): ReactElement {
+  return <div>Activity</div>;
+}
+
+export default Activity;

pages/explore.tsx

@@ -0,0 +1,7 @@
+import React, { ReactElement } from 'react';
+
+function Explore(): ReactElement {
+  return <div>Explore</div>;
+}
+
+export default Explore;

pages/index.tsx

@@ -1,7 +1,7 @@
 import React, { ReactElement } from 'react';
 
 function Index(): ReactElement {
-  return <div>Index</div>;
+  return <div>test</div>;
 }
 
 export default Index;

pages/profiles/[displayId].tsx

@@ -0,0 +1,12 @@
+import React, { ReactElement } from 'react';
+import { useRouter } from 'next/router';
+
+export type ProfileProps = {};
+
+function Profile({}: ProfileProps): ReactElement {
+  const router = useRouter();
+  const { displayId } = router.query;
+  return <div>{displayId}</div>;
+}
+
+export default Profile;