Merge pull request #14 from TeamBNBN/FE/articlePreview
[Front-End] feat: ArticlePreview 추가
This commit is contained in:
commit
6a5204eaf2
@ -8,7 +8,6 @@ export default function ArticleDetail() {
|
||||
const author = '이재용';
|
||||
const content = 'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perferendis sed dolorem vitae?';
|
||||
return (
|
||||
<>
|
||||
<div className={styles.articleDetail}>
|
||||
<header>
|
||||
<div>
|
||||
@ -27,6 +26,5 @@ export default function ArticleDetail() {
|
||||
</div>
|
||||
<ArticleDetailAnswer />
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
@ -3,7 +3,6 @@ import styles from './ArticleDetailAnswer.module.css'
|
||||
|
||||
export default function ArticleDetailAnswer () {
|
||||
return (
|
||||
<>
|
||||
<div className={styles.answer}>
|
||||
<div className={styles.answerHeader}>
|
||||
<div>--</div>
|
||||
@ -11,6 +10,5 @@ export default function ArticleDetailAnswer () {
|
||||
</div>
|
||||
<div className={styles.content}>Lorem ipsum dolor sit amet.</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
@ -1,4 +1,5 @@
|
||||
.answer {
|
||||
width: 100%;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 16px;
|
||||
padding: 12px 16px;
|
||||
|
@ -0,0 +1,19 @@
|
||||
import { Link } from "react-router-dom"
|
||||
import styles from "./ArticlePreview.module.css"
|
||||
|
||||
export default function ArticlePreview () {
|
||||
// TODO: 아이콘 변경
|
||||
return (
|
||||
<div className={styles.wrapper}>
|
||||
<div className={styles.header}>
|
||||
<div className={styles.title}>공지사항</div>
|
||||
<Link to="/">ICON</Link>
|
||||
</div>
|
||||
<div className={styles.main}>
|
||||
<div className={styles.content}>3주차 수업 휴강 공지</div>
|
||||
<div className={styles.content}>정보처리기사 어쩌구</div>
|
||||
<div className={styles.content}>첫 수업 준비사항</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
@ -0,0 +1,32 @@
|
||||
.wrapper {
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 20px;
|
||||
background-color: var(--background-default);
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 24px;
|
||||
line-height: 1.2;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
gap: 12px 0;
|
||||
}
|
||||
|
||||
.content {
|
||||
font-size: 16px;
|
||||
line-height: 1.4;
|
||||
font-weight: 400;
|
||||
}
|
@ -5,8 +5,7 @@ import styles from "./CreateArticle.module.css"
|
||||
export default function CreateArticle() {
|
||||
// TODO: 입력 크기에 따라 반응형으로 textarea 크기 변경
|
||||
return (
|
||||
<>
|
||||
<div>
|
||||
<div className={styles.createArticle}>
|
||||
<header className={styles.header}>
|
||||
<div>
|
||||
<Link to={'/'} className={styles.backButton}>
|
||||
@ -35,6 +34,5 @@ export default function CreateArticle() {
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
@ -1,3 +1,8 @@
|
||||
.createArticle {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
.header {
|
||||
padding-left: 20px;
|
||||
width: 100%;
|
||||
|
@ -1,3 +1,4 @@
|
||||
export { default as ArticleDetail } from './ArticleDetail/ArticleDetail.jsx';
|
||||
export { default as ArticleDetailAnswer } from './ArticleDetail/ArticleDetailAnswer/ArticleDetailAnswer.jsx';
|
||||
export { default as CreateArticle } from './CreateArticle/CreateArticle.jsx';
|
||||
export { default as ArticlePreview } from './ArticlePreview/ArticlePreview.jsx';
|
Loading…
Reference in New Issue
Block a user