diff --git a/components/Footer/Footer.tsx b/components/Footer/Footer.tsx new file mode 100644 index 0000000..0385547 --- /dev/null +++ b/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 ( + + ); +} + +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'); diff --git a/components/Footer/index.ts b/components/Footer/index.ts new file mode 100644 index 0000000..dc67484 --- /dev/null +++ b/components/Footer/index.ts @@ -0,0 +1,2 @@ +export { default } from './Footer'; +export * from './Footer'; diff --git a/components/Icon/svg/activity-filled.svg b/components/Icon/svg/activity-filled.svg new file mode 100644 index 0000000..e58cbbc --- /dev/null +++ b/components/Icon/svg/activity-filled.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/components/Icon/svg/activity.svg b/components/Icon/svg/activity.svg index 62a3fe5..7388873 100644 --- a/components/Icon/svg/activity.svg +++ b/components/Icon/svg/activity.svg @@ -1 +1,3 @@ - \ No newline at end of file + + + \ No newline at end of file diff --git a/components/Icon/svg/explore-filled.svg b/components/Icon/svg/explore-filled.svg new file mode 100644 index 0000000..2c38528 --- /dev/null +++ b/components/Icon/svg/explore-filled.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/components/Icon/svg/search.svg b/components/Icon/svg/explore.svg similarity index 100% rename from components/Icon/svg/search.svg rename to components/Icon/svg/explore.svg diff --git a/components/Icon/svg/home-filled.svg b/components/Icon/svg/home-filled.svg new file mode 100644 index 0000000..a793e2d --- /dev/null +++ b/components/Icon/svg/home-filled.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/components/Icon/svg/home.svg b/components/Icon/svg/home.svg index a793e2d..0069110 100644 --- a/components/Icon/svg/home.svg +++ b/components/Icon/svg/home.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/components/Icon/svg/index.ts b/components/Icon/svg/index.ts index f118bc8..b6cd228 100644 --- a/components/Icon/svg/index.ts +++ b/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'; diff --git a/components/Layout/Layout.tsx b/components/Layout/Layout.tsx new file mode 100644 index 0000000..46fa37d --- /dev/null +++ b/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 ( + + {header} + {children} + {footer} + + ); +} + +export default Layout; + +const Container = styled.div` + display: flex; + height: 100%; + flex-direction: column; +`; + +const ChildrenContainer = styled.div` + flex: 1 1 auto; +`; diff --git a/components/UserAvatar/index.tsx b/components/UserAvatar/index.tsx index dde395c..c249184 100644 --- a/components/UserAvatar/index.tsx +++ b/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, diff --git a/next.config.js b/next.config.js index 92ecab8..dc573a3 100644 --- a/next.config.js +++ b/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; }, -}; +}); diff --git a/pages/_app.tsx b/pages/_app.tsx index bacc8ad..44a1ae3 100644 --- a/pages/_app.tsx +++ b/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 =