feat: Footer 추가
This commit is contained in:
parent
122681a76d
commit
438e546eec
22
frontend/src/components/Footer/Footer.jsx
Normal file
22
frontend/src/components/Footer/Footer.jsx
Normal 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>
|
||||||
|
);
|
||||||
|
}
|
46
frontend/src/components/Footer/Footer.module.css
Normal file
46
frontend/src/components/Footer/Footer.module.css
Normal 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);
|
||||||
|
}
|
1
frontend/src/components/Footer/index.js
Normal file
1
frontend/src/components/Footer/index.js
Normal file
@ -0,0 +1 @@
|
|||||||
|
export { default as Footer } from './Footer';
|
@ -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>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user