feat: Footer 추가

This commit is contained in:
jhynsoo 2024-07-12 16:23:08 +09:00
parent 122681a76d
commit 438e546eec
4 changed files with 77 additions and 1 deletions

View File

@ -0,0 +1,22 @@
import { Link } from 'react-router-dom';
import styles from './Footer.module.css';
export default function Footer() {
return (
<footer className={styles.footer}>
<div>
<div className={styles.title}>EduFocus</div>
<div>Copyright © 2024 EduFocus 모든 권리 보유.</div>
</div>
<ul className={styles.linkList}>
<li>
<Link to={'/'}>서비스 이용약관</Link>
</li>
<li className={styles.divider} />
<li>
<Link to={'/'}>개인정보 처리방침</Link>
</li>
</ul>
</footer>
);
}

View File

@ -0,0 +1,46 @@
.footer {
width: 100%;
padding: 40px;
margin-top: 100px;
background-color: var(--background-secondary);
color: var(--text-color-tertiary);
box-sizing: border-box;
}
.footerContent {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
max-width: 1320px;
padding: 0 40px;
margin: 0 auto;
font-size: 14px;
line-height: 1.4;
font-weight: 400;
}
.title {
font-size: 24px;
line-height: 1.2;
font-weight: 700;
}
.linkList {
display: flex;
align-items: center;
gap: 8px;
padding: 0;
margin: 20px 0 0;
list-style: none;
font-size: 14px;
line-height: 1.4;
font-weight: 400;
}
.divider {
width: 2px;
height: 12px;
border-radius: 1px;
background-color: var(--text-color-tertiary);
}

View File

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

View File

@ -1,3 +1,10 @@
import { Footer } from '../../components/Footer';
export default function Home() { export default function Home() {
return <div>Home</div>; return (
<div>
<div>asdf</div>
<Footer />
</div>
);
} }