diff --git a/components/reusable/Footer.tsx b/components/reusable/Footer.tsx new file mode 100644 index 0000000..f2a820b --- /dev/null +++ b/components/reusable/Footer.tsx @@ -0,0 +1,79 @@ +import { styled } from 'styled-components'; +import theme from '../../styles/theme'; +import Spacing from './Spacing'; + +interface TextProps { + size: 'M' | 'L'; +} + +const Footer = () => { + return ( + + + + + + Contact + Soongcharo@gmail.com + + + + + + + Copyright ⓒ Soongcharo All Rights Reserved. + + 이용약관 + 숭차로 운영 정책 + 개인정보 처리방침 + + + + ); +}; + +export default Footer; + +const Container = styled.div` + width: 100%; + height: 352px; + padding-left: 240px; + padding-right: 240px; + position: relative; + bottom: 0; + background-color: ${theme.colors.footer}; + border-bottom: 2px solid ${theme.colors.gray1}; + align-items: center; +`; + +const WhiteLogo = styled.div` + width: 68px; + height: 24px; + background-image: url('whiteLogo.svg'); +`; + +const FooterFlex = styled.div` + display: flex; + flex-direction: row; + justify-content: space-between; +`; + +const TextFlex = styled.div` + display: flex; + flex-direction: row; + gap: 30px; +`; + +const WhiteText = styled.div` + color: ${theme.colors.white}; + font-size: ${(props) => + props.size === 'M' ? theme.fontStyles.Text_M.fontSize : theme.fontStyles.Text_L.fontSize}px; + font-weight: ${(props) => + props.size === 'M' ? theme.fontStyles.Text_M.fontWeight : theme.fontStyles.Text_L.fontWeight}; +`; + +const Line = styled.div` + width: 100%; + height: 1px; + background-color: ${theme.colors.gray2}; +`; diff --git a/pages/_app.tsx b/pages/_app.tsx index fcace32..05cae8e 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -2,6 +2,7 @@ import { AppProps } from 'next/app'; import { RecoilRoot } from 'recoil'; import { QueryClient, QueryClientProvider } from 'react-query'; import { GlobalStyle } from '../styles/globalStyle'; +import Footer from '../components/reusable/Footer'; const MyApp = ({ Component, pageProps }: AppProps) => { const queryClient = new QueryClient(); @@ -11,6 +12,7 @@ const MyApp = ({ Component, pageProps }: AppProps) => { +