diff --git a/frontend/src/components/client/ClientView.tsx b/frontend/src/components/client/ClientView.tsx index 89a31ff0..99f47b19 100644 --- a/frontend/src/components/client/ClientView.tsx +++ b/frontend/src/components/client/ClientView.tsx @@ -2,7 +2,7 @@ import styled from 'styled-components'; import Player from './Player'; import PlayerInfo from './PlayerInfo'; -import Footer from './Footer'; +import Footer from '@components/common/Footer'; const ClientView = () => { return ( diff --git a/frontend/src/components/client/Footer.tsx b/frontend/src/components/client/Footer.tsx deleted file mode 100644 index f6785fd8..00000000 --- a/frontend/src/components/client/Footer.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import styled from 'styled-components'; - -const Footer = () => { - return Footer; -}; - -export default Footer; - -const FooterContainer = styled.div` - display: flex; -`; diff --git a/frontend/src/components/common/Footer.tsx b/frontend/src/components/common/Footer.tsx new file mode 100644 index 00000000..93da8da8 --- /dev/null +++ b/frontend/src/components/common/Footer.tsx @@ -0,0 +1,41 @@ +import styled from 'styled-components'; + +const Footer = () => { + const footerItem = [ + { title: '라이부 노션', link: 'https://gominzip.notion.site/TEAM-127673f3719e803faf63c70322560d3b?pvs=4' }, + { title: '라이부 깃허브', link: 'https://github.com/boostcampwm-2024/web22-LiBoo' }, + { title: '개발자에게 커피 사주기', link: '' }, + { title: '라이부 팀 소개', link: '' }, + { title: '라이부 팀 블로그', link: '' } + ]; + + return ( + + {footerItem.map(({ title, link }, index) => ( + + {title} + + ))} + + ); +}; + +export default Footer; + +const FooterContainer = styled.div` + display: flex; + justify-content: center; + align-items: center; + height: 100px; + gap: 40px; + ${({ theme }) => theme.tokenTypographys['display-medium12']}; + + .footer-link { + color: ${({ theme }) => theme.tokenColors['text-default']}; + text-decoration: none; + + &:hover { + text-decoration: underline; + } + } +`; diff --git a/frontend/src/pages/MainPage.tsx b/frontend/src/pages/MainPage.tsx index a420608d..82db44dc 100644 --- a/frontend/src/pages/MainPage.tsx +++ b/frontend/src/pages/MainPage.tsx @@ -1,10 +1,9 @@ import { styled } from 'styled-components'; import { MainHeader, MainLiveSection, RecommendLive, ServiceBanner } from '@components/main'; +import Footer from '@components/common/Footer'; export default function MainPage() { - - return ( <> @@ -13,6 +12,7 @@ export default function MainPage() { +